@benzsiangco/jarvis 1.0.2 → 1.1.0

package/src/web/ui/src/components/Settings/SettingsModal.tsx

@@ -0,0 +1,935 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { 
+  X, Shield, Zap, Globe, Cpu, User, Check, 
+  RefreshCw, Save, Terminal as LucideTerminal, FileText, Bot, Code, Settings, Plus, Trash2
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface SettingsModalProps {
+  onClose: () => void;
+}
+
+const cn = (...classes: any[]) => classes.filter(Boolean).join(' ');
+
+import { useAgentStore, type Persona } from '../../store/agentStore';
+import { useUIStore } from '../../store/uiStore';
+
+const personas = [
+  { id: 'it-expert', name: 'IT Expert', icon: Cpu, description: 'Deep technical knowledge, professional architecture focus.' },
+  { id: 'hacker', name: 'Hacker', icon: Shield, description: 'Efficiency, automation, and security-centric perspective.' },
+  { id: 'designer', name: 'Graphic Designer', icon: FileText, description: 'Visual aesthetic, user experience, and creative flow.' },
+  { id: 'minimalist', name: 'Minimalist', icon: User, description: 'Concise, helpful, and standard professional tone.' },
+];
+
+export function SettingsModal({ onClose }: SettingsModalProps) {
+  const { persona, setPersona } = useAgentStore();
+  const [activeTab, setActiveTab] = useState<'brain' | 'general' | 'intelligence' | 'security' | 'accounts' | 'personality' | 'config' | 'tools'>('personality');
+  const [systemPrompt, setSystemPrompt] = useState('');
+  const [skillsContent, setSkillsContent] = useState('');
+  const [brainContent, setBrainContent] = useState('');
+  const [selectedPersona, setSelectedPersona] = useState<Persona>(persona);
+  const [isSaving, setIsSaving] = useState(false);
+  const [authProviders, setAuthProviders] = useState<any[]>([]);
+  const [accounts, setAccounts] = useState<any[]>([]);
+  const [workdir, setWorkdir] = useState('');
+  const [activeKeySetup, setActiveKeySetup] = useState<string | null>(null);
+  const [activeModeSelection, setActiveModeSelection] = useState<string | null>(null);
+  const [accountToDelete, setAccountToDelete] = useState<string | null>(null);
+  const [tempApiKey, setTempApiKey] = useState('');
+  const [jarvisConfig, setJarvisConfig] = useState<any>(null);
+  const [editingConfig, setEditingConfig] = useState(false);
+  const [configJson, setConfigJson] = useState('');
+  const [oauthConfig, setOauthConfig] = useState<any>(null);
+  const [editingOauth, setEditingOauth] = useState(false);
+  const [tempCallbackUrl, setTempCallbackUrl] = useState('');
+
+  const refreshAuthStatus = async () => {
+    try {
+      const res = await fetch('/api/auth/status');
+      const data = await res.json();
+      setAuthProviders(data.providers || []);
+      setAccounts(data.accounts || []);
+    } catch (e) { console.error(e); }
+  };
+
+  useEffect(() => {
+    fetch('/api/config').then(r => r.json()).then(data => {
+      setSystemPrompt(data.instructions || '');
+      setWorkdir(data.workdir || '');
+      setJarvisConfig(data);
+      setConfigJson(JSON.stringify(data, null, 2));
+    });
+    fetch('/api/skills').then(r => r.json()).then(data => setSkillsContent(data.content || ''));
+    fetch('/api/brain').then(r => r.json()).then(data => setBrainContent(data.content || ''));
+    fetch('/api/oauth/config').then(r => r.json()).then(data => {
+      setOauthConfig(data);
+      setTempCallbackUrl(data.callbackUrl || '');
+    });
+    refreshAuthStatus();
+  }, []);
+
+  const handleSetupKey = async (providerId: string) => {
+    // If provider supports both (like google/antigravity or openai), show mode selection
+    if (providerId === 'google' || providerId === 'openai') {
+      setActiveModeSelection(providerId);
+      return;
+    }
+
+    setActiveKeySetup(providerId);
+    setTempApiKey('');
+  };
+
+  const handleLoginFlow = async (providerId: string) => {
+    try {
+      const res = await fetch('/api/auth/antigravity/login', { method: 'POST' });
+      const data = await res.json();
+      
+      if (data.url) {
+        // Open the auth URL in a new tab
+        window.open(data.url, '_blank');
+      } else {
+        console.error('Failed to initiate login flow');
+      }
+
+      setActiveModeSelection(null);
+    } catch (e) { console.error(e); }
+  };
+
+  const handleManualKeyFlow = (providerId: string) => {
+     setActiveModeSelection(null);
+     setActiveKeySetup(providerId);
+     setTempApiKey('');
+  };
+
+  const handleSaveKey = async () => {
+    if (!activeKeySetup || !tempApiKey) return;
+    
+    try {
+      await fetch('/api/auth/key', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ providerId: activeKeySetup, apiKey: tempApiKey })
+      });
+      refreshAuthStatus();
+      setActiveKeySetup(null);
+      setTempApiKey('');
+    } catch (e) { console.error(e); }
+  };
+
+  const handleDeleteAccount = async (id: string) => {
+    setAccountToDelete(id);
+  };
+
+  const confirmDeleteAccount = async () => {
+     if (!accountToDelete) return;
+     try {
+        await fetch(`/api/auth/account/${accountToDelete}`, { method: 'DELETE' });
+        refreshAuthStatus();
+        setAccountToDelete(null);
+     } catch (e) { console.error(e); }
+  };
+
+  const handleSaveConfig = async () => {
+    try {
+      const parsedConfig = JSON.parse(configJson);
+      await fetch('/api/config/full', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(parsedConfig)
+      });
+      setJarvisConfig(parsedConfig);
+      setEditingConfig(false);
+    } catch (e) {
+      console.error('Failed to save config:', e);
+    }
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      setPersona(selectedPersona);
+      
+      // Save brain
+      await fetch('/api/brain', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: brainContent })
+      });
+      
+      await fetch('/api/config/full', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          instructions: systemPrompt,
+          persona: selectedPersona,
+        })
+      });
+
+      await fetch('/api/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: skillsContent })
+      });
+
+      setIsSaving(false);
+      onClose();
+    } catch (e) {
+      console.error(e);
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <motion.div 
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="fixed inset-0 z-[100] flex items-center justify-center p-0 md:p-8 bg-black/80 backdrop-blur-sm"
+    >
+      <motion.div 
+        initial={{ scale: 0.95, opacity: 0, y: 20 }}
+        animate={{ scale: 1, opacity: 1, y: 0 }}
+        exit={{ scale: 0.95, opacity: 0, y: 20 }}
+        className="w-full max-w-5xl h-full md:h-auto md:max-h-[85vh] bg-zinc-950 border-0 md:border border-zinc-800 rounded-none md:rounded-3xl shadow-2xl flex flex-col overflow-hidden ring-0 md:ring-1 ring-white/5"
+      >
+        <div className="h-16 border-b border-zinc-900 flex items-center justify-between px-6 md:px-8 shrink-0 bg-zinc-900/30">
+          <div className="flex items-center gap-4">
+             <div className="w-8 h-8 rounded bg-zinc-900 border border-zinc-800 flex items-center justify-center text-zinc-500">
+                <Settings size={18} />
+             </div>
+             <h2 className="text-lg font-black uppercase tracking-tighter italic text-white">System Configuration</h2>
+          </div>
+          <button onClick={onClose} className="p-2 hover:bg-zinc-800 rounded-xl text-zinc-500 hover:text-white transition-all">
+             <X size={20} />
+          </button>
+        </div>
+
+        <div className="flex-1 flex flex-col md:flex-row min-h-0">
+          {/* Sidebar / Tabs */}
+          <div className="w-full md:w-64 border-b md:border-b-0 md:border-r border-zinc-900 p-2 md:p-4 shrink-0 bg-zinc-900/10 overflow-x-auto md:overflow-visible">
+            <div className="flex flex-row md:flex-col gap-1 md:gap-1 min-w-max md:min-w-0">
+              {              [
+                { id: 'brain', label: 'Brain', icon: Cpu },
+                { id: 'intelligence', label: 'Intelligence', icon: Bot },
+                { id: 'personality', label: 'Persona', icon: User },
+                { id: 'general', label: 'Environment', icon: Globe },
+                { id: 'security', label: 'Safety', icon: Shield },
+                { id: 'accounts', label: 'Accounts', icon: User },
+                { id: 'tools', label: 'Tools', icon: Code },
+                { id: 'config', label: 'Config', icon: FileText },
+              ].map(tab => (
+                <button 
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id as any)}
+                  className={`flex items-center gap-3 px-4 py-2.5 md:p-3 rounded-xl text-sm font-bold transition-all whitespace-nowrap ${
+                    activeTab === tab.id ? 'bg-zinc-900 text-white shadow-sm ring-1 ring-white/5' : 'text-zinc-500 hover:bg-zinc-900/50 hover:text-zinc-300'
+                  }`}
+                >
+                  <tab.icon size={16} />
+                  <span>{tab.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Main Content Area */}
+          <div className="flex-1 overflow-y-auto custom-scrollbar p-4 md:p-10 bg-zinc-950">
+             
+             {activeTab === 'brain' && (
+               <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-500 pb-10">
+                  <div className="flex items-center justify-between border-b border-zinc-900 pb-6">
+                     <div>
+                        <h3 className="text-xl font-black text-white italic tracking-tighter">JARVIS Core Brain</h3>
+                        <p className="text-xs text-zinc-600 font-medium mt-1">
+                           Define JARVIS's fundamental identity, personality, and capabilities.
+                        </p>
+                     </div>
+                  </div>
+
+                  <div className="space-y-4">
+                     <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 flex items-center gap-2">
+                        <FileText size={12} className="text-cyan-500" />
+                        JARVIS.md - Core Identity
+                     </label>
+                     <p className="text-xs text-zinc-600 font-medium opacity-60">
+                        This is JARVIS's primary knowledge base. Everything here becomes part of the system prompt.
+                        Use markdown for formatting. Changes apply to all new conversations.
+                     </p>
+                     
+                     <textarea 
+                        value={brainContent}
+                        onChange={(e) => setBrainContent(e.target.value)}
+                        placeholder="# JARVIS - Just A Rather Very Intelligent System
+
+You are JARVIS, an advanced AI coding assistant...
+
+## Core Principles
+- Be precise and thorough
+- Explain your reasoning
+- Prioritize security
+
+## Capabilities
+- Full-stack development
+- DevOps automation
+- Security analysis"
+                        className="w-full h-[500px] bg-zinc-950 border border-zinc-800 rounded-2xl p-5 text-sm font-mono text-zinc-300 focus:outline-none focus:border-cyan-500/30 transition-all shadow-inner custom-scrollbar"
+                        spellCheck={false}
+                     />
+                     
+                     <div className="flex items-center gap-3 p-4 bg-cyan-950/10 border border-cyan-900/30 rounded-2xl">
+                        <div className="w-8 h-8 rounded-lg bg-cyan-900/30 flex items-center justify-center text-cyan-500">
+                           <Zap size={16} />
+                        </div>
+                        <div className="flex-1">
+                           <p className="text-xs font-bold text-cyan-400">Live System Prompt</p>
+                           <p className="text-[10px] text-zinc-500 mt-0.5">
+                              Changes here will be included in every AI conversation. Combine with Skills for modular knowledge.
+                           </p>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+             )}
+
+             {activeTab === 'intelligence' && (
+               <div className="space-y-12 animate-in fade-in slide-in-from-right-4 duration-500">
+                  <div className="space-y-4">
+                     <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 flex items-center gap-2">
+                        <Zap size={12} className="text-cyan-500" />
+                        Master System Prompt
+                     </label>
+                     <p className="text-xs text-zinc-600 font-medium opacity-60">The core identity and instructions that guide JARVIS's behavior.</p>
+                     <textarea 
+                        value={systemPrompt}
+                        onChange={(e) => setSystemPrompt(e.target.value)}
+                        className="w-full h-48 bg-zinc-900 border border-zinc-800 rounded-2xl p-5 text-sm font-mono text-zinc-300 focus:outline-none focus:border-cyan-500/30 transition-all shadow-inner custom-scrollbar"
+                     />
+                  </div>
+
+                  <div className="space-y-4 pb-10">
+                     <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 flex items-center gap-2">
+                        <Code size={12} className="text-cyan-500" />
+                        Skills Registry (skills.md)
+                     </label>
+                     <p className="text-xs text-zinc-600 font-medium opacity-60">Define modular capabilities and instructions the agent can use.</p>
+                     <textarea 
+                        value={skillsContent}
+                        onChange={(e) => setSkillsContent(e.target.value)}
+                        className="w-full h-96 bg-zinc-950 border border-zinc-800 border-dashed rounded-2xl p-5 text-xs font-mono text-zinc-400 focus:outline-none focus:border-cyan-500/30 transition-all custom-scrollbar"
+                     />
+                  </div>
+               </div>
+             )}
+
+             {activeTab === 'personality' && (
+               <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-500">
+                  <p className="text-[10px] font-black uppercase tracking-widest text-zinc-500">Select Core Persona</p>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                     {personas.map(p => (
+                        <button 
+                          key={p.id}
+                          onClick={() => setSelectedPersona(p.id as Persona)}
+                          className={`p-6 rounded-2xl border text-left transition-all ${
+                             selectedPersona === p.id ? 'bg-zinc-900 border-cyan-500/30 shadow-lg shadow-cyan-950/20' : 'bg-zinc-900/30 border-zinc-900 hover:border-zinc-800'
+                          }`}
+                        >
+                         <p className={`text-xs font-black uppercase mb-1 ${selectedPersona === p.id ? 'text-cyan-500' : 'text-zinc-500'}`}>{p.name}</p>
+                         <p className="text-xs text-zinc-400 font-medium opacity-70 italic">{p.description}</p>
+                       </button>
+                     ))}
+                  </div>
+               </div>
+             )}
+
+              {activeTab === 'security' && (
+                <div className="space-y-10 animate-in fade-in slide-in-from-right-4 duration-500 pb-10">
+                   <div className="flex items-center justify-between border-b border-zinc-900 pb-6">
+                      <h3 className="text-xl font-black text-white italic tracking-tighter">Guardian Safety Protocols</h3>
+                   </div>
+
+                   <div className="space-y-4">
+                      <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 flex items-center gap-2">
+                         Restricted Filesystem Paths
+                      </label>
+                      <p className="text-xs text-zinc-600 font-medium opacity-60 italic">Jarvis is strictly forbidden to read or write in these directories.</p>
+                      <div className="space-y-2">
+                         {['/etc', '/windows/system32', '.env', 'credentials.json'].map(path => (
+                           <div key={path} className="flex items-center justify-between p-4 bg-zinc-900/30 border border-zinc-900 rounded-2xl group hover:border-red-950/50 transition-all">
+                              <span className="text-xs font-mono text-zinc-400">{path}</span>
+                              <button className="text-[10px] font-black uppercase text-zinc-700 hover:text-red-500 transition-all opacity-0 group-hover:opacity-100">Remove</button>
+                           </div>
+                         ))}
+                         <button className="w-full py-4 border border-zinc-900 border-dashed rounded-2xl text-[10px] font-black uppercase tracking-widest text-zinc-700 hover:text-zinc-500 hover:border-zinc-800 transition-all flex items-center justify-center gap-2">
+                            <Plus size={14} /> Add Restricted Path
+                         </button>
+                      </div>
+                   </div>
+
+                   <div className="space-y-4">
+                      <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500">Tool Permission Matrix</label>
+                      <div className="grid grid-cols-1 gap-2">
+                         {[
+                           { name: 'bash', risk: 'high', mode: 'ask' },
+                           { name: 'edit', risk: 'high', mode: 'ask' },
+                           { name: 'read', risk: 'low', mode: 'allow' },
+                           { name: 'grep', risk: 'low', mode: 'allow' },
+                         ].map(tool => (
+                           <div key={tool.name} className="flex items-center justify-between p-4 bg-zinc-900/30 border border-zinc-900 rounded-2xl">
+                              <div className="flex items-center gap-3">
+                                 <div className={`w-2 h-2 rounded-full ${tool.risk === 'high' ? 'bg-red-500 animate-pulse' : 'bg-emerald-500'}`} />
+                                 <span className="text-xs font-bold text-zinc-200 font-mono italic">{tool.name}</span>
+                              </div>
+                              <select className="bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-1.5 text-[10px] font-black uppercase text-zinc-400 focus:outline-none focus:border-cyan-500/50">
+                                 <option value="allow" selected={tool.mode === 'allow'}>Allow</option>
+                                 <option value="ask" selected={tool.mode === 'ask'}>Always Ask</option>
+                                 <option value="deny" selected={tool.mode === 'deny'}>Deny</option>
+                              </select>
+                           </div>
+                         ))}
+                      </div>
+                   </div>
+                </div>
+              )}
+
+              {activeTab === 'accounts' && (
+                 <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-500 pb-10">
+                    <div className="flex items-center justify-between border-b border-zinc-900 pb-6">
+                       <h3 className="text-xl font-black text-white italic tracking-tighter">Connected Accounts Pool</h3>
+                       <button 
+                         onClick={() => handleSetupKey('google')}
+                         className="flex items-center gap-2 px-6 py-2 bg-white text-black rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-zinc-200 transition-all"
+                       >
+                          <Plus size={14} /> Link Google
+                       </button>
+                    </div>
+
+                    {/* Active Accounts List */}
+                    <div className="space-y-3">
+                       {accounts.length > 0 ? accounts.map((acc: any) => (
+                         <div key={acc.account.id} className="flex items-center justify-between p-5 bg-zinc-900/50 border border-zinc-800 rounded-[1.5rem] group hover:border-zinc-700 transition-all">
+                            <div className="flex items-center gap-4">
+                               <div className="w-10 h-10 rounded-xl bg-purple-600/10 flex items-center justify-center text-purple-500">
+                                  <User size={20} />
+                               </div>
+                               <div>
+                                  <p className="font-bold text-zinc-200">{acc.account.email || acc.account.id}</p>
+                                  <div className="flex items-center gap-2 mt-0.5">
+                                     <span className={`text-[8px] font-black uppercase px-1.5 py-0.5 rounded border ${acc.status === 'available' ? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20' : 'bg-red-500/10 text-red-500 border-red-500/20'}`}>
+                                        {acc.status}
+                                     </span>
+                                     <span className="text-[9px] text-zinc-600 font-medium italic">Provider: {acc.account.quotaType || 'antigravity'}</span>
+                                  </div>
+                                </div>
+                            </div>
+                            <button 
+                              onClick={() => handleDeleteAccount(acc.account.id)}
+                              className="p-3 text-zinc-700 hover:text-red-500 hover:bg-red-500/10 rounded-xl transition-all opacity-0 group-hover:opacity-100"
+                            >
+                               <Trash2 size={16} />
+                            </button>
+                         </div>
+                       )) : (
+                         <div className="p-10 text-center border border-dashed border-zinc-900 rounded-[2rem]">
+                            <p className="text-xs text-zinc-600 italic">No active accounts in the pool...</p>
+                         </div>
+                       )}
+                    </div>
+
+                    <div className="pt-8 border-t border-zinc-900">
+                       <h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-500 mb-6">Available AI Providers</h4>
+                       <div className="grid grid-cols-1 gap-4">
+                          {authProviders.map((p: any) => (
+                            <div key={p.id} className="group relative">
+                               <div className="flex items-center justify-between p-6 bg-zinc-900/30 border border-zinc-900 rounded-[2rem] group-hover:border-zinc-700 transition-all">
+                                  <div className="flex items-center gap-5">
+                                     <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shadow-inner ${p.isAvailable ? 'bg-cyan-600/10 text-cyan-500 ring-1 ring-cyan-500/20' : 'bg-zinc-800 text-zinc-600'}`}>
+                                        <Bot size={24} />
+                                     </div>
+                                      <div>
+                                         <div className="flex items-center gap-2">
+                                            <p className="font-bold text-zinc-200">{p.name}</p>
+                                            {p.isAvailable && <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" />}
+                                         </div>
+                                         <div className="flex flex-col mt-1">
+                                            <p className="text-[10px] font-mono text-zinc-600 uppercase tracking-widest">{p.envVar}</p>
+                                            {p.maskedKey && (
+                                               <p className="text-[10px] font-mono text-emerald-500/70 mt-0.5 flex items-center gap-1">
+                                                  <span className="w-1 h-1 rounded-full bg-emerald-500/50"></span>
+                                                  {p.maskedKey}
+                                               </p>
+                                            )}
+                                         </div>
+                                      </div>
+                                   </div>
+                                  
+                                  <div className="flex items-center gap-4">
+                                     <div className="text-right mr-4 hidden md:block">
+                                        <p className="text-[10px] font-black uppercase text-zinc-700">Usage Status</p>
+                                        <p className="text-xs font-mono text-zinc-400">Stable</p>
+                                     </div>
+                                     <button 
+                                       onClick={() => handleSetupKey(p.id)}
+                                       className={cn(
+                                         "px-8 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all",
+                                         p.isAvailable ? "bg-zinc-800 text-zinc-300 hover:bg-zinc-700" : "bg-cyan-600 text-white hover:bg-cyan-500"
+                                       )}
+                                     >
+                                        {p.isAvailable ? 'Update Key' : 'Setup Key'}
+                                     </button>
+                                  </div>
+                               </div>
+                            </div>
+                          ))}
+                       </div>
+                    </div>
+
+                    <div className="p-8 rounded-[2.5rem] bg-zinc-900/50 border border-zinc-800 border-dashed">
+                       <div className="flex flex-col items-center text-center space-y-4">
+                          <div className="w-12 h-12 rounded-full bg-zinc-950 flex items-center justify-center text-zinc-700">
+                             <RefreshCw size={24} />
+                          </div>
+                          <div>
+                             <p className="text-sm font-bold text-zinc-400">Rate-Limit Guardian Active</p>
+                             <p className="text-xs text-zinc-600 max-w-xs mt-1 italic">Jarvis will automatically cycle accounts within the pool if a provider hits a rate limit.</p>
+                          </div>
+                       </div>
+                    </div>
+                  </div>
+               )}
+
+               {activeTab === 'config' && (
+                  <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-500 pb-10">
+                     <div className="flex items-center justify-between border-b border-zinc-900 pb-6">
+                        <h3 className="text-xl font-black text-white italic tracking-tighter">JARVIS Configuration</h3>
+                        {!editingConfig && (
+                           <button 
+                             onClick={() => setEditingConfig(true)}
+                             className="flex items-center gap-2 px-6 py-2 bg-cyan-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-cyan-500 transition-all"
+                           >
+                              Edit Config
+                           </button>
+                        )}
+                     </div>
+
+                     <div className="space-y-4">
+                        <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 flex items-center gap-2">
+                           <FileText size={12} className="text-cyan-500" />
+                           Configuration JSON
+                        </label>
+                        <p className="text-xs text-zinc-600 font-medium opacity-60">
+                           View and edit the complete JARVIS configuration. Be careful when modifying this directly.
+                        </p>
+                        
+                        {editingConfig ? (
+                           <div className="space-y-4">
+                              <textarea 
+                                 value={configJson}
+                                 onChange={(e) => setConfigJson(e.target.value)}
+                                 className="w-full h-96 bg-zinc-950 border border-zinc-800 border-dashed rounded-2xl p-5 text-xs font-mono text-zinc-400 focus:outline-none focus:border-cyan-500/30 transition-all custom-scrollbar"
+                                 spellCheck={false}
+                              />
+                              <div className="flex items-center gap-3">
+                                 <button 
+                                    onClick={() => {
+                                       setConfigJson(JSON.stringify(jarvisConfig, null, 2));
+                                       setEditingConfig(false);
+                                    }}
+                                    className="px-6 py-2 bg-zinc-900 text-zinc-500 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-zinc-800 hover:text-zinc-300 transition-all"
+                                 >
+                                    Cancel
+                                 </button>
+                                 <button 
+                                    onClick={handleSaveConfig}
+                                    className="px-6 py-2 bg-cyan-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-cyan-500 transition-all"
+                                 >
+                                    Save Config
+                                 </button>
+                              </div>
+                           </div>
+                        ) : (
+                           <pre className="w-full h-96 bg-zinc-950 border border-zinc-800 rounded-2xl p-5 text-xs font-mono text-zinc-400 overflow-auto custom-scrollbar">
+                              {JSON.stringify(jarvisConfig, null, 2)}
+                           </pre>
+                        )}
+                     </div>
+                  </div>
+               )}
+
+               {activeTab === 'tools' && (
+                  <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-500 pb-10">
+                     <div className="flex items-center justify-between border-b border-zinc-900 pb-6">
+                        <div>
+                           <h3 className="text-xl font-black text-white italic tracking-tighter">Extension Tools</h3>
+                           <p className="text-xs text-zinc-600 font-medium mt-1">
+                              Manage custom tools and extensions that JARVIS can use
+                           </p>
+                        </div>
+                        <button className="flex items-center gap-2 px-6 py-2 bg-zinc-900 text-zinc-600 rounded-xl text-[10px] font-black uppercase tracking-widest opacity-50 cursor-not-allowed">
+                           <Plus size={14} />
+                           Install Tool
+                        </button>
+                     </div>
+
+                     {/* Built-in Tools */}
+                     <div className="space-y-4">
+                        <h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-500">
+                           Built-in Tools (12)
+                        </h4>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                           {['bash', 'read', 'write', 'edit', 'glob', 'grep', 'list', 'webfetch', 'task', 'question', 'todoread', 'todowrite'].map(tool => (
+                              <div key={tool} className="flex items-center justify-between p-4 bg-zinc-900/30 border border-zinc-800 rounded-2xl">
+                                 <div className="flex items-center gap-3">
+                                    <div className="w-8 h-8 rounded-lg bg-zinc-950 flex items-center justify-center text-zinc-500">
+                                       <LucideTerminal size={16} />
+                                    </div>
+                                    <div>
+                                       <p className="text-sm font-bold text-zinc-200 font-mono">{tool}</p>
+                                       <p className="text-[10px] text-zinc-600">Core tool</p>
+                                    </div>
+                                 </div>
+                                 <span className="w-2 h-2 rounded-full bg-emerald-500" />
+                              </div>
+                           ))}
+                        </div>
+                     </div>
+
+                     {/* Extension Tools (Coming Soon) */}
+                     <div className="space-y-4">
+                        <h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-500">
+                           Extension Tools
+                        </h4>
+                        <div className="p-10 text-center border border-dashed border-zinc-900 rounded-[2rem] bg-zinc-900/20">
+                           <div className="w-12 h-12 rounded-full bg-zinc-950 flex items-center justify-center text-zinc-700 mx-auto mb-4">
+                              <Code size={24} />
+                           </div>
+                           <p className="text-sm font-bold text-zinc-500 mb-2">Extension System Coming Soon</p>
+                           <p className="text-xs text-zinc-600 max-w-md mx-auto italic">
+                              Install custom tools like SSH, Git integration, Docker management, and more.
+                           </p>
+                        </div>
+                     </div>
+
+                     {/* Planned Extensions Preview */}
+                     <div className="p-6 bg-gradient-to-br from-cyan-950/20 to-purple-950/20 border border-cyan-900/30 rounded-[2rem]">
+                        <h4 className="text-[10px] font-black uppercase tracking-widest text-cyan-500 mb-4">
+                           Planned Extensions
+                        </h4>
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                           {[
+                              { name: 'SSH Manager', desc: 'Execute commands on remote servers', icon: '🔐' },
+                              { name: 'Git Advanced', desc: 'Enhanced git operations', icon: '🌿' },
+                              { name: 'Docker Tools', desc: 'Container management', icon: '🐳' },
+                           ].map(ext => (
+                              <div key={ext.name} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-xl">
+                                 <div className="text-2xl mb-2">{ext.icon}</div>
+                                 <p className="text-xs font-bold text-zinc-300 mb-1">{ext.name}</p>
+                                 <p className="text-[10px] text-zinc-600">{ext.desc}</p>
+                              </div>
+                           ))}
+                        </div>
+                     </div>
+
+                     {/* OAuth Callback Configuration */}
+                     <div className="pt-8 border-t border-zinc-900">
+                        <div className="flex items-center justify-between mb-6">
+                           <div>
+                              <h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-500 mb-2">
+                                 OAuth Callback Configuration
+                              </h4>
+                              <p className="text-xs text-zinc-600 font-medium">
+                                 Configure OAuth callback URL for container deployments and custom domains
+                              </p>
+                           </div>
+                           {!editingOauth && (
+                              <button 
+                                 onClick={() => {
+                                    setEditingOauth(true);
+                                    setTempCallbackUrl(oauthConfig?.callbackUrl || '');
+                                 }}
+                                 className="px-6 py-2 bg-zinc-900 text-zinc-400 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-zinc-800 hover:text-zinc-200 transition-all"
+                              >
+                                 Edit OAuth
+                              </button>
+                           )}
+                        </div>
+
+                        {editingOauth ? (
+                           <div className="space-y-4">
+                              <div className="space-y-2">
+                                 <label className="text-[10px] font-bold text-zinc-400 uppercase">
+                                    Callback URL (Optional)
+                                 </label>
+                                 <input
+                                    type="text"
+                                    value={tempCallbackUrl}
+                                    onChange={(e) => setTempCallbackUrl(e.target.value)}
+                                    placeholder="http://localhost:51121/oauth-callback"
+                                    className="w-full bg-zinc-950 border border-zinc-800 rounded-2xl p-4 text-sm font-mono text-zinc-200 focus:outline-none focus:border-cyan-500/50 transition-all placeholder:text-zinc-700"
+                                 />
+                                 <p className="text-[10px] text-zinc-600 italic">
+                                    Leave empty for default (localhost:51121)
+                                 </p>
+                              </div>
+
+                              <div className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-2xl space-y-2">
+                                 <p className="text-[10px] font-black uppercase text-zinc-500">Examples:</p>
+                                 <div className="space-y-1 font-mono text-[10px] text-zinc-600">
+                                    <div className="flex items-center gap-2">
+                                       <span className="text-zinc-700">•</span>
+                                       <code className="text-cyan-500">http://localhost:51121/oauth-callback</code>
+                                       <span className="text-zinc-700">(Default)</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                       <span className="text-zinc-700">•</span>
+                                       <code className="text-purple-500">https://jarvis.yourdomain.com/oauth-callback</code>
+                                       <span className="text-zinc-700">(Cloudflare Tunnel)</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                       <span className="text-zinc-700">•</span>
+                                       <code className="text-emerald-500">http://100.64.1.2:51121/oauth-callback</code>
+                                       <span className="text-zinc-700">(Tailscale)</span>
+                                    </div>
+                                 </div>
+                              </div>
+
+                              <div className="flex items-center gap-3">
+                                 <button 
+                                    onClick={() => {
+                                       setTempCallbackUrl(oauthConfig?.callbackUrl || '');
+                                       setEditingOauth(false);
+                                    }}
+                                    className="px-6 py-2 bg-zinc-900 text-zinc-500 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-zinc-800 hover:text-zinc-300 transition-all"
+                                 >
+                                    Cancel
+                                 </button>
+                                 <button 
+                                    onClick={async () => {
+                                       try {
+                                          const res = await fetch('/api/oauth/config', {
+                                             method: 'POST',
+                                             headers: { 'Content-Type': 'application/json' },
+                                             body: JSON.stringify({ 
+                                                callbackUrl: tempCallbackUrl.trim() || null 
+                                             })
+                                          });
+                                          const data = await res.json();
+                                          if (data.success) {
+                                             setOauthConfig({ ...oauthConfig, callbackUrl: tempCallbackUrl.trim() || null, currentUrl: tempCallbackUrl.trim() || 'http://localhost:51121/oauth-callback' });
+                                             setEditingOauth(false);
+                                          }
+                                       } catch (e) {
+                                          console.error('Failed to save OAuth config:', e);
+                                       }
+                                    }}
+                                    className="px-6 py-2 bg-cyan-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-cyan-500 transition-all"
+                                 >
+                                    Save OAuth Config
+                                 </button>
+                                 {oauthConfig?.callbackUrl && (
+                                    <button 
+                                       onClick={async () => {
+                                          try {
+                                             await fetch('/api/oauth/config', { method: 'DELETE' });
+                                             setOauthConfig({ ...oauthConfig, callbackUrl: null, currentUrl: 'http://localhost:51121/oauth-callback' });
+                                             setTempCallbackUrl('');
+                                             setEditingOauth(false);
+                                          } catch (e) {
+                                             console.error('Failed to reset OAuth config:', e);
+                                          }
+                                       }}
+                                       className="px-6 py-2 text-red-500 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-red-500/10 transition-all"
+                                    >
+                                       Reset to Default
+                                    </button>
+                                 )}
+                              </div>
+                           </div>
+                        ) : (
+                           <div className="p-6 bg-zinc-900/30 border border-zinc-800 rounded-2xl">
+                              <div className="flex items-center justify-between">
+                                 <div>
+                                    <p className="text-xs font-bold text-zinc-400 mb-1">Current Callback URL</p>
+                                    <code className="text-sm font-mono text-cyan-500">
+                                       {oauthConfig?.currentUrl || 'http://localhost:51121/oauth-callback'}
+                                    </code>
+                                 </div>
+                                 <div className={`w-2 h-2 rounded-full ${oauthConfig?.callbackUrl ? 'bg-cyan-500' : 'bg-zinc-700'}`} />
+                              </div>
+                           </div>
+                        )}
+                     </div>
+                  </div>
+               )}
+            </div>
+         </div>
+
+          <div className="h-auto py-4 md:h-24 border-t border-zinc-900 px-6 md:px-10 flex flex-col md:flex-row items-center justify-between gap-4 bg-zinc-900/50 backdrop-blur shrink-0">
+           <div className="flex items-center gap-6 w-full md:w-auto justify-center md:justify-start">
+              <div className="flex items-center gap-2">
+                 <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                 <span className="text-[9px] font-black uppercase text-zinc-700 tracking-widest">Core Synchronized</span>
+              </div>
+           </div>
+           <div className="flex items-center gap-3 w-full md:w-auto">
+              <button onClick={onClose} className="flex-1 md:flex-none px-6 py-3 md:px-8 md:py-3 text-[10px] font-black uppercase tracking-widest text-zinc-600 hover:text-white transition-all italic border border-transparent hover:border-zinc-800 rounded-xl">Discard</button>
+              <button 
+                onClick={handleSave}
+                disabled={isSaving}
+                className="flex-1 md:flex-none flex items-center justify-center gap-3 px-8 py-3 md:px-12 md:py-4 bg-white text-black rounded-xl md:rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-zinc-200 transition-all active:scale-95 shadow-2xl whitespace-nowrap"
+              >
+                 {isSaving ? <RefreshCw size={14} className="animate-spin" /> : <Save size={14} />}
+                 <span>Commit</span>
+              </button>
+           </div>
+        </div>
+      </motion.div>
+
+      <AnimatePresence>
+        {/* Mode Selection Modal (Login vs API Key) */}
+        {activeModeSelection && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md"
+          >
+             <motion.div
+              initial={{ scale: 0.9, y: 10 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 10 }}
+              className="w-full max-w-lg bg-zinc-950 border border-zinc-800 rounded-3xl p-8 shadow-2xl ring-1 ring-white/10"
+            >
+               <h3 className="text-xl font-black text-white italic tracking-tighter mb-2">Connect {activeModeSelection}</h3>
+               <p className="text-xs text-zinc-500 font-medium mb-8">Choose how you want to authenticate with this provider.</p>
+
+               <div className="grid grid-cols-2 gap-4">
+                  <button 
+                     onClick={() => handleLoginFlow(activeModeSelection)}
+                     className="flex flex-col items-center justify-center gap-3 p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:bg-zinc-800 hover:border-zinc-700 transition-all group"
+                  >
+                     <div className="w-10 h-10 rounded-full bg-cyan-900/20 text-cyan-500 flex items-center justify-center group-hover:scale-110 transition-transform">
+                        <User size={20} />
+                     </div>
+                     <div className="text-center">
+                        <p className="text-xs font-black uppercase text-zinc-200">Browser Login</p>
+                        <p className="text-[10px] text-zinc-500 mt-1">Interactive OAuth flow</p>
+                     </div>
+                  </button>
+
+                  <button 
+                     onClick={() => handleManualKeyFlow(activeModeSelection)}
+                     className="flex flex-col items-center justify-center gap-3 p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:bg-zinc-800 hover:border-zinc-700 transition-all group"
+                  >
+                     <div className="w-10 h-10 rounded-full bg-purple-900/20 text-purple-500 flex items-center justify-center group-hover:scale-110 transition-transform">
+                        <Code size={20} />
+                     </div>
+                     <div className="text-center">
+                        <p className="text-xs font-black uppercase text-zinc-200">API Key</p>
+                        <p className="text-[10px] text-zinc-500 mt-1">Manual credential entry</p>
+                     </div>
+                  </button>
+               </div>
+
+               <div className="flex justify-center mt-8">
+                  <button 
+                    onClick={() => setActiveModeSelection(null)}
+                    className="text-[10px] font-black uppercase tracking-widest text-zinc-600 hover:text-zinc-400 transition-all"
+                  >
+                    Cancel
+                  </button>
+               </div>
+            </motion.div>
+          </motion.div>
+        )}
+
+        {/* Delete Confirmation Modal */}
+        {accountToDelete && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md"
+          >
+             <motion.div
+              initial={{ scale: 0.9, y: 10 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 10 }}
+              className="w-full max-w-sm bg-zinc-950 border border-zinc-800 rounded-3xl p-6 shadow-2xl ring-1 ring-white/10"
+            >
+               <div className="flex flex-col items-center text-center space-y-4">
+                  <div className="w-12 h-12 rounded-full bg-red-500/10 text-red-500 flex items-center justify-center mb-2">
+                     <Trash2 size={20} />
+                  </div>
+                  <h3 className="text-lg font-black text-white italic tracking-tighter">Remove Account?</h3>
+                  <p className="text-xs text-zinc-500 font-medium px-4">This will permanently remove <span className="text-zinc-300 font-mono">{accountToDelete}</span> from the pool.</p>
+                  
+                  <div className="flex items-center gap-3 w-full pt-4">
+                     <button 
+                       onClick={() => setAccountToDelete(null)}
+                       className="flex-1 py-3 rounded-xl bg-zinc-900 text-zinc-500 text-[10px] font-black uppercase tracking-widest hover:bg-zinc-800 hover:text-zinc-300 transition-all"
+                     >
+                       Cancel
+                     </button>
+                     <button 
+                       onClick={confirmDeleteAccount}
+                       className="flex-1 py-3 rounded-xl bg-red-600 text-white text-[10px] font-black uppercase tracking-widest hover:bg-red-500 transition-all shadow-lg shadow-red-900/20"
+                     >
+                       Confirm
+                     </button>
+                  </div>
+               </div>
+            </motion.div>
+          </motion.div>
+        )}
+
+        {activeKeySetup && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md"
+          >
+            <motion.div
+              initial={{ scale: 0.9, y: 10 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 10 }}
+              className="w-full max-w-lg bg-zinc-950 border border-zinc-800 rounded-3xl p-8 shadow-2xl ring-1 ring-white/10"
+            >
+              <h3 className="text-xl font-black text-white italic tracking-tighter mb-2">Connect {activeKeySetup}</h3>
+              <p className="text-xs text-zinc-500 font-medium mb-6">
+                {activeKeySetup === 'local' 
+                  ? 'Enter the Base URL of your local inference server (Ollama or LM Studio).' 
+                  : 'Enter your API key below to enable this provider.'}
+              </p>
+              
+              <input
+                type={activeKeySetup === 'local' ? 'text' : 'password'}
+                value={tempApiKey}
+                onChange={(e) => setTempApiKey(e.target.value)}
+                placeholder={activeKeySetup === 'local' ? 'http://localhost:1234/v1' : `sk-...`}
+                className="w-full bg-zinc-900 border border-zinc-800 rounded-2xl p-4 text-sm font-mono text-zinc-200 focus:outline-none focus:border-cyan-500/50 transition-all mb-6 placeholder:text-zinc-700"
+                autoFocus
+              />
+
+              <div className="flex items-center justify-end gap-3">
+                <button 
+                  onClick={() => setActiveKeySetup(null)}
+                  className="px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-500 hover:text-zinc-300 hover:bg-zinc-900 transition-all"
+                >
+                  Cancel
+                </button>
+                <button 
+                  onClick={handleSaveKey}
+                  disabled={!tempApiKey}
+                  className="px-8 py-3 rounded-xl bg-cyan-600 text-white text-[10px] font-black uppercase tracking-widest hover:bg-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-cyan-900/20"
+                >
+                  {activeKeySetup === 'local' ? 'Save URL' : 'Save Credential'}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}