feat: add AI Settings modal to manage API keys from the UI

src/components/SettingsModal.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import { X, Settings, Key, Save, Trash2, CheckCircle2 } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
+  const [apiKey, setApiKey] = useState('');
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      const stored = localStorage.getItem('GEMINI_API_KEY') || '';
+      setApiKey(stored);
+      setSaved(false);
+    }
+  }, [isOpen]);
+
+  const handleSave = () => {
+    if (apiKey.trim()) {
+      localStorage.setItem('GEMINI_API_KEY', apiKey.trim());
+    } else {
+      localStorage.removeItem('GEMINI_API_KEY');
+    }
+    setSaved(true);
+    setTimeout(() => {
+      setSaved(false);
+      onClose();
+    }, 1500);
+  };
+
+  const handleClear = () => {
+    localStorage.removeItem('GEMINI_API_KEY');
+    setApiKey('');
+    setSaved(true);
+    setTimeout(() => setSaved(false), 1500);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
+      <div className="bg-slate-900 border border-slate-700 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300">
+        <div className="flex items-center justify-between p-4 border-b border-slate-700/50 bg-slate-800/20">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-blue-500/10 text-blue-500">
+              <Settings className="w-5 h-5" />
+            </div>
+            <h3 className="text-lg font-semibold text-white uppercase tracking-tight text-xs">AI Settings</h3>
+          </div>
+          <button 
+            onClick={onClose}
+            className="p-1.5 text-slate-500 hover:text-white hover:bg-slate-700 rounded-md transition-all"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="p-6 space-y-6">
+          <div className="space-y-2">
+            <label className="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center gap-2">
+              <Key className="w-3 h-3" />
+              Gemini API Key
+            </label>
+            <div className="relative">
+              <input
+                type="password"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                placeholder="Enter your API key..."
+                className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all placeholder:text-slate-600"
+              />
+              {saved && (
+                <div className="absolute right-3 top-1/2 -translate-y-1/2 text-green-500 animate-in fade-in zoom-in duration-300">
+                  <CheckCircle2 className="w-5 h-5" />
+                </div>
+              )}
+            </div>
+            <p className="text-[10px] text-slate-500 leading-relaxed italic">
+              This key is stored locally in your browser and will override the system default. 
+              Useful if you want to use your own billing account.
+            </p>
+          </div>
+
+          <div className="bg-blue-500/5 border border-blue-500/10 rounded-lg p-4">
+            <h4 className="text-[10px] font-bold text-blue-400 uppercase mb-2">Instructions</h4>
+            <ul className="text-[10px] text-slate-400 space-y-1.5 list-disc pl-3">
+              <li>Go to <a href="https://aistudio.google.com/" target="_blank" rel="noreferrer" className="text-blue-500 hover:underline">Google AI Studio</a></li>
+              <li>Enable billing in Settings if you want to use the paid tier</li>
+              <li>Generate a new API key and paste it here</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between p-4 bg-slate-800/40 border-t border-slate-700/50">
+          <button
+            onClick={handleClear}
+            className="flex items-center gap-2 px-4 py-2 text-xs font-bold text-red-400 hover:text-white hover:bg-red-600/20 rounded-lg transition-all uppercase tracking-widest"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            Clear
+          </button>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-xs font-bold text-slate-400 hover:text-white uppercase tracking-widest transition-all"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              className="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black uppercase tracking-widest rounded-lg shadow-lg transition-all active:scale-95"
+            >
+              <Save className="w-3.5 h-3.5" />
+              Save Key
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TopBar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Download, LogOut, Undo2, CloudUpload, Loader2, ChevronDown, RotateCcw, Maximize2, X } from 'lucide-react';
+import { Download, LogOut, Undo2, CloudUpload, Loader2, ChevronDown, RotateCcw, Maximize2, X, Settings } from 'lucide-react';
 import { cn } from '../lib/utils';
+import { SettingsModal } from './SettingsModal';
 
 interface TopBarProps {
   stats: any;
@@ -26,6 +27,7 @@ interface TopBarProps {
 
 export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasUnsavedChanges, userEmail, onSignOut, canUndo, onUndo, undoMessage, undoSteps, pendingCount, pendingChanges, onSaveAll, onRevertRow, isSavingAll, isMaximized, onToggleMaximize }: TopBarProps) {
   const [showPending, setShowPending] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -190,6 +192,15 @@ export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasU
           MAXIMIZE
         </button>
 
+        <button
+          onClick={() => setShowSettings(true)}
+          className="flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium bg-slate-700 hover:bg-slate-600 text-slate-200 transition-colors"
+          title="AI Settings - Configure API keys"
+        >
+          <Settings className="w-4 h-4" />
+          AI SETTINGS
+        </button>
+
         <button
           onClick={onUndo}
           disabled={!canUndo}
@@ -223,6 +234,11 @@ export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasU
           </div>
         )}
       </div>
+
+      <SettingsModal 
+        isOpen={showSettings} 
+        onClose={() => setShowSettings(false)} 
+      />
     </header>
   );
 }

src/services/anthropic.ts

@@ -1,5 +1,8 @@
 export async function generateDescription(prompt: string, systemPrompt: string): Promise<string> {
-  const apiKey = import.meta.env.VITE_ANTHROPIC_API_KEY || localStorage.getItem('ANTHROPIC_API_KEY') || '';
+  const apiKey = 
+    localStorage.getItem('ANTHROPIC_API_KEY') || 
+    import.meta.env.VITE_ANTHROPIC_API_KEY || 
+    '';
   if (!apiKey) {
     throw new Error('Anthropic API Key not found. Please set VITE_ANTHROPIC_API_KEY in .env or ANTHROPIC_API_KEY in localStorage.');
   }