feat: multi-provider AI support with auto-detection

- Added support for Google Gemini, OpenAI, Anthropic, and Azure OpenAI
- Implemented API key validation with auto model detection
- Added Error Boundary for better error handling
- Migrated PDF generation to native jsPDF (better quality)
- Added PWA support with offline capabilities
- Implemented tests with Vitest
- Fixed language consistency (PT-BR)
- Improved accessibility (ARIA)

components/ApiKeySetup.tsx

@@ -1,68 +1,282 @@
-import React, { useState } from 'react';
-import { KeyIcon, SaveIcon } from './Icons';
-
-interface ApiKeySetupProps {
-  onKeySave: (key: string) => void;
-}
-
-export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
-  const [localApiKey, setLocalApiKey] = useState('');
-
-  const handleSave = () => {
-    if (localApiKey.trim()) {
-      onKeySave(localApiKey.trim());
-    }
-  };
-
-  return (
-    <div className="max-w-md mx-auto animate-fade-in pt-10">
-      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl p-6 sm:p-8 rounded-2xl relative overflow-hidden group">
-        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-
-        <div className="relative z-10">
-          <h2 className="text-2xl font-display font-bold text-center mb-3 text-slate-800 dark:text-white">
-            Configurar Chave de API
-          </h2>
-          <p className="text-sm text-slate-500 dark:text-slate-400 text-center mb-8">
-            Para começar, insira sua chave de API do Google Gemini. Ela será mantida segura no seu navegador.
-          </p>
-
-          <div className="space-y-5">
-            <div>
-              <label htmlFor="api-key-setup" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
-                Sua Chave de API
-              </label>
-              <div className="relative group/input">
-                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-                  <KeyIcon className="h-5 w-5 text-slate-400 group-focus-within/input:text-blue-500 transition-colors" />
-                </div>
-                <input
-                  type="password"
-                  id="api-key-setup"
-                  className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 pl-10 pr-3 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm backdrop-blur-sm transition-all"
-                  placeholder="Cole sua chave aqui"
-                  value={localApiKey}
-                  onChange={(e) => setLocalApiKey(e.target.value)}
-                  onKeyDown={(e) => e.key === 'Enter' && handleSave()}
-                  autoComplete="off"
-                />
-              </div>
-              <p className="mt-3 text-xs text-center text-slate-500 dark:text-slate-400">
-                Não tem uma chave? <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 hover:underline">Obtenha no Google AI Studio</a>.
-              </p>
-            </div>
-
-            <button
-              onClick={handleSave}
-              disabled={!localApiKey.trim()}
-              className="w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
-            >
-              <SaveIcon className="h-5 w-5" />
-              <span>Salvar e Continuar</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import React, { useState, useCallback, useEffect } from 'react';
+import { KeyIcon, SaveIcon, TestTubeIcon } from './Icons';
+import { PROVIDERS, type AIProvider } from '../types/providers';
+import { testApiKey, type ModelInfo } from '../services/apiTestService';
+
+interface ApiKeySetupProps {
+  onKeySave: (key: string, provider: AIProvider, model: string) => void;
+}
+
+const isValidApiKey = (key: string): boolean => {
+  const trimmedKey = key.trim();
+  return trimmedKey.length > 10 && /^[A-Za-z0-9_-]+$/.test(trimmedKey);
+};
+
+export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
+  const [localApiKey, setLocalApiKey] = useState('');
+  const [endpoint, setEndpoint] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isValid, setIsValid] = useState<boolean | null>(null);
+  const [provider, setProvider] = useState<AIProvider>('gemini');
+  const [model, setModel] = useState('gemini-2.5-flash');
+  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
+  const [isTesting, setIsTesting] = useState(false);
+  const [testStatus, setTestStatus] = useState<'idle' | 'success' | 'error'>('idle');
+
+  useEffect(() => {
+    const savedProvider = localStorage.getItem('ai-provider') as AIProvider;
+    if (savedProvider && PROVIDERS.find(p => p.id === savedProvider)) {
+      setProvider(savedProvider);
+      const savedModel = localStorage.getItem(`model-${savedProvider}`);
+      const providerConfig = PROVIDERS.find(p => p.id === savedProvider);
+      setModel(savedModel || providerConfig?.defaultModel || '');
+    }
+  }, []);
+
+  useEffect(() => {
+    const providerConfig = PROVIDERS.find(p => p.id === provider);
+    if (providerConfig && !providerConfig.models.includes(model)) {
+      setModel(providerConfig.defaultModel);
+    }
+    setAvailableModels([]);
+    setTestStatus('idle');
+  }, [provider, model]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setLocalApiKey(value);
+    setTestStatus('idle');
+    
+    if (value.trim() === '') {
+      setIsValid(null);
+      setError(null);
+    } else {
+      const valid = isValidApiKey(value);
+      setIsValid(valid);
+      setError(valid ? null : 'A chave de API parece inválida.');
+    }
+  }, []);
+
+  const getProviderLink = (provider: AIProvider): string => {
+    switch (provider) {
+      case 'gemini': return 'https://aistudio.google.com/app/apikey';
+      case 'openai': return 'https://platform.openai.com/api-keys';
+      case 'anthropic': return 'https://console.anthropic.com/keys';
+      case 'azure': return 'https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps';
+      default: return '#';
+    }
+  };
+
+  const getProviderLabel = (provider: AIProvider): string => {
+    switch (provider) {
+      case 'gemini': return 'Google Gemini';
+      case 'openai': return 'OpenAI';
+      case 'anthropic': return 'Anthropic (Claude)';
+      case 'azure': return 'Azure OpenAI';
+      default: return 'API';
+    }
+  };
+
+  const handleTestApi = async () => {
+    if (!localApiKey.trim() || !isValidApiKey(localApiKey)) {
+      setError('Insira uma chave de API válida para testar.');
+      return;
+    }
+
+    setIsTesting(true);
+    setError(null);
+
+    try {
+      const result = await testApiKey(provider, localApiKey, endpoint);
+      
+      if (result.success && result.models && result.models.length > 0) {
+        setAvailableModels(result.models);
+        setModel(result.models[0].id);
+        setTestStatus('success');
+        setError(null);
+      } else {
+        setTestStatus('error');
+        setError(result.error || 'Falha ao testar API');
+      }
+    } catch (err) {
+      setTestStatus('error');
+      setError(err instanceof Error ? err.message : 'Erro ao testar API');
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  const handleProviderChange = (newProvider: AIProvider) => {
+    setProvider(newProvider);
+    const providerConfig = PROVIDERS.find(p => p.id === newProvider);
+    setModel(providerConfig?.defaultModel || '');
+    setAvailableModels([]);
+    setTestStatus('idle');
+  };
+
+  const handleSave = () => {
+    if (localApiKey.trim() && isValidApiKey(localApiKey)) {
+      onKeySave(localApiKey.trim(), provider, model);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto animate-fade-in pt-10">
+      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl p-6 sm:p-8 rounded-2xl relative overflow-hidden group">
+        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+
+        <div className="relative z-10">
+          <h2 className="text-2xl font-display font-bold text-center mb-3 text-slate-800 dark:text-white">
+            Configurar API
+          </h2>
+          <p className="text-sm text-slate-500 dark:text-slate-400 text-center mb-6">
+            Selecione o provedor e insira sua chave de API.
+          </p>
+
+          <div className="space-y-5">
+            {/* Provider Selector */}
+            <div>
+              <label className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
+                Provedor de IA
+              </label>
+              <div className="grid grid-cols-2 gap-2">
+                {PROVIDERS.map((p) => (
+                  <button
+                    key={p.id}
+                    type="button"
+                    onClick={() => handleProviderChange(p.id)}
+                    className={`px-3 py-2 rounded-lg text-sm font-medium transition-all border
+                      ${provider === p.id 
+                        ? 'bg-blue-500 text-white border-blue-500' 
+                        : 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-blue-400'
+                      }`}
+                  >
+                    {p.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Azure Endpoint (only show if Azure is selected) */}
+            {provider === 'azure' && (
+              <div>
+                <label htmlFor="azure-endpoint" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                  Endpoint do Azure
+                </label>
+                <input
+                  type="url"
+                  id="azure-endpoint"
+                  className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                  placeholder="https://seu-resource.openai.azure.com"
+                  value={endpoint}
+                  onChange={(e) => setEndpoint(e.target.value)}
+                />
+              </div>
+            )}
+
+            {/* API Key Input */}
+            <div>
+              <label htmlFor="api-key-setup" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                Chave de API ({getProviderLabel(provider)})
+              </label>
+              <div className="relative">
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  <KeyIcon className="h-5 w-5 text-slate-400" />
+                </div>
+                <input
+                  type="password"
+                  id="api-key-setup"
+                  className={`block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 pl-10 pr-24 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-all
+                    ${isValid === false ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
+                    ${testStatus === 'success' ? 'border-green-500 focus:border-green-500 focus:ring-green-500' : ''}`}
+                  placeholder="Cole sua chave aqui"
+                  value={localApiKey}
+                  onChange={handleChange}
+                  onKeyDown={(e) => e.key === 'Enter' && handleTestApi()}
+                  autoComplete="off"
+                />
+                <div className="absolute inset-y-0 right-0 flex items-center pr-2">
+                  <button
+                    type="button"
+                    onClick={handleTestApi}
+                    disabled={isTesting || !localApiKey.trim()}
+                    className={`flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium transition-all
+                      ${testStatus === 'success' 
+                        ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                        : testStatus === 'error'
+                        ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                        : 'bg-slate-200 dark:bg-slate-600 text-slate-600 dark:text-slate-300 hover:bg-blue-500 hover:text-white'
+                      } disabled:opacity-50 disabled:cursor-not-allowed`}
+                  >
+                    {isTesting ? (
+                      <span className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
+                    ) : testStatus === 'success' ? (
+                      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                    ) : (
+                      <TestTubeIcon className="w-3 h-3" />
+                    )}
+                    <span>{isTesting ? 'Testando...' : testStatus === 'success' ? 'OK' : 'Testar'}</span>
+                  </button>
+                </div>
+              </div>
+              {error && (
+                <p className="mt-2 text-xs text-red-600 dark:text-red-400" role="alert">
+                  {error}
+                </p>
+              )}
+              <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+                Não tem uma chave? <a href={getProviderLink(provider)} target="_blank" rel="noopener noreferrer" className="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 hover:underline">Obtenha aqui</a>.
+              </p>
+            </div>
+
+            {/* Model Selector */}
+            <div>
+              <label htmlFor="model-selector" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
+                Modelo{availableModels.length > 0 && <span className="text-green-600 ml-1">(detectado automaticamente)</span>}
+              </label>
+              {availableModels.length > 0 ? (
+                <select
+                  id="model-selector"
+                  value={model}
+                  onChange={(e) => setModel(e.target.value)}
+                  className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                >
+                  {availableModels.map((m) => (
+                    <option key={m.id} value={m.id}>{m.name}</option>
+                  ))}
+                </select>
+              ) : (
+                <select
+                  id="model-selector"
+                  value={model}
+                  onChange={(e) => setModel(e.target.value)}
+                  className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                >
+                  {PROVIDERS.find(p => p.id === provider)?.models.map((m) => (
+                    <option key={m} value={m}>{m}</option>
+                  ))}
+                </select>
+              )}
+              {testStatus === 'success' && availableModels.length > 0 && (
+                <p className="mt-2 text-xs text-green-600 dark:text-green-400">
+                  ✓ {availableModels.length} modelos disponíveis detectados
+                </p>
+              )}
+            </div>
+
+            <button
+              onClick={handleSave}
+              disabled={!localApiKey.trim() || isValid === false}
+              className="w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
+            >
+              <SaveIcon className="h-5 w-5" />
+              <span>Salvar e Continuar</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/ErrorBoundary.tsx

@@ -0,0 +1,71 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('Erro capturado pelo ErrorBoundary:', error, errorInfo);
+  }
+
+  handleReset = (): void => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-screen flex items-center justify-center p-4 bg-slate-100 dark:bg-slate-900">
+          <div className="max-w-md w-full bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-8 text-center">
+            <div className="w-16 h-16 mx-auto mb-6 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
+              <svg className="w-8 h-8 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+            <h2 className="text-2xl font-display font-bold text-slate-800 dark:text-white mb-2">
+              Algo deu errado
+            </h2>
+            <p className="text-slate-500 dark:text-slate-400 mb-6">
+              Ocorreu um erro inesperado. Por favor, tente novamente.
+            </p>
+            {this.state.error && (
+              <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-xl text-left">
+                <p className="text-xs font-mono text-red-600 dark:text-red-400 break-words">
+                  {this.state.error.message}
+                </p>
+              </div>
+            )}
+            <button
+              onClick={this.handleReset}
+              className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3 px-6 rounded-xl transition-all"
+            >
+              Tentar novamente
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

components/Header.tsx

@@ -1,33 +1,55 @@
 import React from 'react';
 import { LogoBase64, SunIcon, MoonIcon, RefreshIcon, SignOutIcon } from './Icons';
 import { useTheme } from '../context/ThemeContext';
+import type { AIProvider } from '../types/providers';
 
 interface HeaderProps {
   onReset: () => void;
   onClearKey: () => void;
   hasKey: boolean;
+  provider?: AIProvider;
 }
 
-export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey }) => {
+export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey, provider }) => {
   const { theme, toggleTheme } = useTheme();
 
+  const providerColors: Record<AIProvider, string> = {
+    gemini: 'from-blue-500 to-indigo-600',
+    openai: 'from-green-500 to-emerald-600',
+    anthropic: 'from-orange-500 to-amber-600',
+    azure: 'from-blue-600 to-cyan-600'
+  };
+
+  const providerNames: Record<AIProvider, string> = {
+    gemini: 'Gemini',
+    openai: 'OpenAI',
+    anthropic: 'Claude',
+    azure: 'Azure'
+  };
+
   return (
     <header className="sticky top-0 z-30 transition-all duration-300 backdrop-blur-md bg-white/70 dark:bg-slate-900/70 border-b border-white/20 dark:border-slate-800 shadow-sm">
       <div className="container mx-auto px-4 py-3 flex items-center justify-between">
         <div className="flex items-center gap-3">
           <div className="relative group cursor-pointer">
             <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
-            <img src={LogoBase64} alt="SteelBase Logo" className="relative w-10 h-10 object-contain" />
+            <img src={LogoBase64} alt="SteelCheck Logo" className="relative w-10 h-10 object-contain" />
           </div>
 
           <div className="hidden sm:block">
             <h1 className="text-2xl font-display font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300">
-              SteelBase
+              SteelCheck
             </h1>
           </div>
         </div>
 
         <div className="flex items-center gap-2 sm:gap-4">
+          {hasKey && provider && (
+            <div className={`hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full bg-gradient-to-r ${providerColors[provider]} text-white text-xs font-medium`}>
+              {providerNames[provider]}
+            </div>
+          )}
+
           {hasKey && (
             <button
               onClick={onClearKey}

components/Icons.tsx

@@ -89,4 +89,10 @@ export const SignOutIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
     </svg>
+);
+
+export const TestTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+    </svg>
 );

components/ModelSelector.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import { PROVIDERS, type AIProvider } from '../types/providers';
+
+interface ModelSelectorProps {
+  provider: AIProvider;
+  onModelChange: (model: string) => void;
+  apiKey: string;
+}
+
+export const ModelSelector: React.FC<ModelSelectorProps> = ({ provider, onModelChange, apiKey }) => {
+  const [selectedModel, setSelectedModel] = useState<string>('');
+  const providerConfig = PROVIDERS.find(p => p.id === provider);
+
+  useEffect(() => {
+    if (providerConfig) {
+      const saved = localStorage.getItem(`model-${provider}`);
+      if (saved && providerConfig.models.includes(saved)) {
+        setSelectedModel(saved);
+        onModelChange(saved);
+      } else {
+        setSelectedModel(providerConfig.defaultModel);
+        onModelChange(providerConfig.defaultModel);
+      }
+    }
+  }, [provider, providerConfig, onModelChange]);
+
+  const handleChange = (model: string) => {
+    setSelectedModel(model);
+    localStorage.setItem(`model-${provider}`, model);
+    onModelChange(model);
+  };
+
+  if (!providerConfig) return null;
+
+  return (
+    <div>
+      <label className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
+        Modelo
+      </label>
+      <select
+        value={selectedModel}
+        onChange={(e) => handleChange(e.target.value)}
+        className="w-full px-4 py-3 bg-white/50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-slate-700 dark:text-slate-200"
+      >
+        {providerConfig.models.map((model) => (
+          <option key={model} value={model}>{model}</option>
+        ))}
+      </select>
+    </div>
+  );
+};

components/PrintableReport.tsx

@@ -28,9 +28,15 @@ const TableRow: React.FC<{item: ComplianceItem}> = ({item}) => (
 
 export const PrintableReport: React.FC<PrintableReportProps> = ({ report }) => {
   const { identification, compliance, overPerformance, equivalents, confidence } = report;
+  const jsonData = JSON.stringify(report);
 
   return (
-    <div id="printable-report-container" style={{ width: '210mm', height: '297mm' }} className="bg-white text-gray-900 p-8 font-sans flex flex-col">
+    <div 
+      id="printable-report-container" 
+      data-report={jsonData}
+      style={{ width: '210mm', minHeight: '297mm' }} 
+      className="bg-white text-gray-900 p-8 font-sans flex flex-col"
+    >
       <header className="flex justify-between items-start pb-2 border-b-2 border-gray-400">
         <div>
             <h1 className="text-3xl font-bold text-blue-800">SteelBase</h1>

components/ProviderSelector.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import { PROVIDERS, type AIProvider, type ProviderConfig } from '../types/providers';
+
+interface ProviderSelectorProps {
+  onProviderChange: (provider: AIProvider) => void;
+}
+
+export const ProviderSelector: React.FC<ProviderSelectorProps> = ({ onProviderChange }) => {
+  const [selectedProvider, setSelectedProvider] = useState<AIProvider>('gemini');
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('ai-provider') as AIProvider;
+    if (saved && PROVIDERS.find(p => p.id === saved)) {
+      setSelectedProvider(saved);
+      onProviderChange(saved);
+    }
+  }, [onProviderChange]);
+
+  const handleSelect = (provider: AIProvider) => {
+    setSelectedProvider(provider);
+    setShowDropdown(false);
+    localStorage.setItem('ai-provider', provider);
+    onProviderChange(provider);
+  };
+
+  const currentProvider = PROVIDERS.find(p => p.id === selectedProvider)!;
+
+  return (
+    <div className="relative">
+      <label className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
+        Provedor de IA
+      </label>
+      <button
+        type="button"
+        onClick={() => setShowDropdown(!showDropdown)}
+        className="w-full flex items-center justify-between gap-3 px-4 py-3 bg-white/50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-xl shadow-sm hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
+      >
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-sm">
+            {currentProvider.name.charAt(0)}
+          </div>
+          <div className="text-left">
+            <span className="block font-medium text-slate-700 dark:text-slate-200">{currentProvider.name}</span>
+            <span className="block text-xs text-slate-500 dark:text-slate-400">{currentProvider.defaultModel}</span>
+          </div>
+        </div>
+        <svg className={`w-5 h-5 text-slate-400 transition-transform ${showDropdown ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {showDropdown && (
+        <div className="absolute z-50 w-full mt-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-lg overflow-hidden">
+          {PROVIDERS.map((provider) => (
+            <button
+              key={provider.id}
+              type="button"
+              onClick={() => handleSelect(provider.id)}
+              className={`w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors
+                ${selectedProvider === provider.id ? 'bg-blue-50 dark:bg-blue-900/20' : ''}`}
+            >
+              <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold text-sm
+                ${provider.id === 'gemini' ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : ''}
+                ${provider.id === 'openai' ? 'bg-gradient-to-br from-green-500 to-emerald-600' : ''}
+                ${provider.id === 'anthropic' ? 'bg-gradient-to-br from-orange-500 to-amber-600' : ''}
+                ${provider.id === 'azure' ? 'bg-gradient-to-br from-blue-600 to-cyan-600' : ''}`}
+              >
+                {provider.name.charAt(0)}
+              </div>
+              <div className="flex-1">
+                <span className="block font-medium text-slate-700 dark:text-slate-200">{provider.name}</span>
+                <span className="block text-xs text-slate-500 dark:text-slate-400">{provider.description}</span>
+              </div>
+              {selectedProvider === provider.id && (
+                <svg className="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};