@geminilight/mindos 0.5.20 → 0.5.22

package/app/app/api/monitoring/route.ts

@@ -0,0 +1,95 @@
+export const dynamic = 'force-dynamic';
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import { getMindRoot } from '@/lib/fs';
+import { metrics } from '@/lib/metrics';
+
+// Aligned with IGNORED_DIRS in lib/fs.ts and lib/core/tree.ts
+const IGNORED_DIRS = new Set(['.git', 'node_modules', 'app', '.next', '.DS_Store', 'mcp']);
+
+/**
+ * Recursively count files and sum their sizes under a directory.
+ * Skips directories in IGNORED_DIRS (aligned with the rest of the codebase).
+ */
+function walkStats(dir: string): { fileCount: number; totalSizeBytes: number } {
+  let fileCount = 0;
+  let totalSizeBytes = 0;
+
+  function walk(current: string) {
+    let entries: fs.Dirent[];
+    try {
+      entries = fs.readdirSync(current, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (IGNORED_DIRS.has(entry.name)) continue;
+      const fullPath = path.join(current, entry.name);
+      if (entry.isDirectory()) {
+        walk(fullPath);
+      } else if (entry.isFile()) {
+        try {
+          const stat = fs.statSync(fullPath);
+          fileCount++;
+          totalSizeBytes += stat.size;
+        } catch { /* skip unreadable files */ }
+      }
+    }
+  }
+
+  walk(dir);
+  return { fileCount, totalSizeBytes };
+}
+
+// ── TTL cache for walkStats (avoid blocking event loop every 5s poll) ──
+let cachedKbStats: { fileCount: number; totalSizeBytes: number } | null = null;
+let cachedKbStatsTs = 0;
+const KB_STATS_TTL = 30_000; // 30s
+
+function getCachedKbStats(mindRoot: string): { fileCount: number; totalSizeBytes: number } {
+  const now = Date.now();
+  if (cachedKbStats && now - cachedKbStatsTs < KB_STATS_TTL) return cachedKbStats;
+  cachedKbStats = walkStats(mindRoot);
+  cachedKbStatsTs = now;
+  return cachedKbStats;
+}
+
+export async function GET() {
+  const snap = metrics.getSnapshot();
+  const mem = process.memoryUsage();
+  const mindRoot = getMindRoot();
+
+  const kbStats = getCachedKbStats(mindRoot);
+
+  // Detect MCP status from environment / config
+  const mcpPort = Number(process.env.MCP_PORT) || 3457;
+
+  return NextResponse.json({
+    system: {
+      uptimeMs: Date.now() - snap.processStartTime,
+      memory: {
+        heapUsed: mem.heapUsed,
+        heapTotal: mem.heapTotal,
+        rss: mem.rss,
+      },
+      nodeVersion: process.version,
+    },
+    application: {
+      agentRequests: snap.agentRequests,
+      toolExecutions: snap.toolExecutions,
+      totalTokens: snap.totalTokens,
+      avgResponseTimeMs: snap.avgResponseTimeMs,
+      errors: snap.errors,
+    },
+    knowledgeBase: {
+      root: mindRoot,
+      fileCount: kbStats.fileCount,
+      totalSizeBytes: kbStats.totalSizeBytes,
+    },
+    mcp: {
+      running: true, // If this endpoint responds, the server is running
+      port: mcpPort,
+    },
+  });
+}

package/app/components/SettingsModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect, useState, useCallback } from 'react';
-import { X, Settings, Save, Loader2, AlertCircle, CheckCircle2, RotateCcw } from 'lucide-react';
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { X, Settings, Loader2, AlertCircle, CheckCircle2, RotateCcw, Sparkles, Palette, Database, RefreshCw, Plug, Puzzle, Activity, Users } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { getAllRenderers, loadDisabledState, isRendererEnabled } from '@/lib/renderers/registry';
 import { apiFetch } from '@/lib/api';
@@ -12,9 +12,10 @@ import { AiTab } from './settings/AiTab';
 import { AppearanceTab } from './settings/AppearanceTab';
 import { KnowledgeTab } from './settings/KnowledgeTab';
 import { PluginsTab } from './settings/PluginsTab';
-import { ShortcutsTab } from './settings/ShortcutsTab';
 import { SyncTab } from './settings/SyncTab';
 import { McpTab } from './settings/McpTab';
+import { MonitoringTab } from './settings/MonitoringTab';
+import { AgentsTab } from './settings/AgentsTab';
 
 interface SettingsModalProps {
   open: boolean;
@@ -28,6 +29,8 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
   const [saving, setSaving] = useState(false);
   const [status, setStatus] = useState<'idle' | 'saved' | 'error' | 'load-error'>('idle');
   const { t, locale, setLocale } = useLocale();
+  const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const dataLoaded = useRef(false);
 
   // Appearance state (localStorage-based)
   const [font, setFont] = useState('lora');
@@ -37,8 +40,8 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
   const [pluginStates, setPluginStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
-    if (!open) return;
-    apiFetch<SettingsData>('/api/settings').then(setData).catch(() => setStatus('load-error'));
+    if (!open) { dataLoaded.current = false; return; }
+    apiFetch<SettingsData>('/api/settings').then(d => { setData(d); dataLoaded.current = true; }).catch(() => setStatus('load-error'));
     setFont(localStorage.getItem('prose-font') ?? 'lora');
     setContentWidth(localStorage.getItem('content-width') ?? '780px');
     const stored = localStorage.getItem('theme');
@@ -81,14 +84,14 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
     return () => window.removeEventListener('keydown', handler);
   }, [open, onClose]);
 
-  const handleSave = useCallback(async () => {
-    if (!data) return;
+  // Auto-save with debounce when data changes
+  const doSave = useCallback(async (d: SettingsData) => {
     setSaving(true);
     try {
       await apiFetch('/api/settings', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ai: data.ai, agent: data.agent, mindRoot: data.mindRoot, webPassword: data.webPassword, authToken: data.authToken }),
+        body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken }),
       });
       setStatus('saved');
       setTimeout(() => setStatus('idle'), 2500);
@@ -98,7 +101,14 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
     } finally {
       setSaving(false);
     }
-  }, [data]);
+  }, []);
+
+  useEffect(() => {
+    if (!data || !dataLoaded.current) return;
+    clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(() => doSave(data), 800);
+    return () => clearTimeout(saveTimer.current);
+  }, [data, doSave]);
 
   const updateAi = useCallback((patch: Partial<AiSettings>) => {
     setData(d => d ? { ...d, ai: { ...d.ai, ...patch } } : d);
@@ -117,36 +127,30 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
         openai:    { apiKey: '', model: '', baseUrl: '' },
       },
     };
+    // Set defaults — auto-save will persist them
     setData(d => d ? { ...d, ai: defaults } : d);
-    setSaving(true);
-    try {
-      await apiFetch('/api/settings', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ai: defaults, mindRoot: data.mindRoot }),
-      });
-      setStatus('saved');
-    } catch {
-      setStatus('error');
-    } finally {
-      setSaving(false);
-    }
-    apiFetch<SettingsData>('/api/settings').then(setData).catch(() => setStatus('error'));
-    setTimeout(() => setStatus('idle'), 2500);
+    // 🟢 MINOR #4: Refetch after auto-save completes (800ms debounce + 500ms save operation)
+    // Rather than magic 1200ms, wait for save to finish before refetching env-resolved values
+    const DEBOUNCE_DELAY = 800;
+    const SAVE_OPERATION_TIME = 500;
+    setTimeout(() => {
+      apiFetch<SettingsData>('/api/settings').then(d => { setData(d); }).catch(() => setStatus('error'));
+    }, DEBOUNCE_DELAY + SAVE_OPERATION_TIME);
   }, [data]);
 
   if (!open) return null;
 
   const env = data?.envOverrides ?? {};
 
-  const TABS: { id: Tab; label: string }[] = [
-    { id: 'ai', label: t.settings.tabs.ai },
-    { id: 'appearance', label: t.settings.tabs.appearance },
-    { id: 'knowledge', label: t.settings.tabs.knowledge },
-    { id: 'sync', label: t.settings.tabs.sync ?? 'Sync' },
-    { id: 'mcp', label: t.settings.tabs.mcp ?? 'MCP' },
-    { id: 'plugins', label: t.settings.tabs.plugins },
-    { id: 'shortcuts', label: t.settings.tabs.shortcuts },
+  const TABS: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    { id: 'ai', label: t.settings.tabs.ai, icon: <Sparkles size={13} /> },
+    { id: 'appearance', label: t.settings.tabs.appearance, icon: <Palette size={13} /> },
+    { id: 'knowledge', label: t.settings.tabs.knowledge, icon: <Database size={13} /> },
+    { id: 'sync', label: t.settings.tabs.sync ?? 'Sync', icon: <RefreshCw size={13} /> },
+    { id: 'mcp', label: t.settings.tabs.mcp ?? 'MCP', icon: <Plug size={13} /> },
+    { id: 'plugins', label: t.settings.tabs.plugins, icon: <Puzzle size={13} /> },
+    { id: 'monitoring', label: t.settings.tabs.monitoring, icon: <Activity size={13} /> },
+    { id: 'agents', label: t.settings.tabs.agents ?? 'Agents', icon: <Users size={13} /> },
   ];
 
   return (
@@ -177,12 +181,13 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
             <button
               key={t.id}
               onClick={() => setTab(t.id)}
-              className={`px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
+              className={`flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
                 tab === t.id
                   ? 'border-amber-500 text-foreground'
                   : 'border-transparent text-muted-foreground hover:text-foreground'
               }`}
             >
+              {t.icon}
               {t.label}
             </button>
           ))}
@@ -196,7 +201,7 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
               <p className="text-sm text-destructive font-medium">Failed to load settings</p>
               <p className="text-xs text-muted-foreground">Check that the server is running and AUTH_TOKEN is configured correctly.</p>
             </div>
-          ) : !data && tab !== 'shortcuts' && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' ? (
+          ) : !data && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' && tab !== 'agents' ? (
             <div className="flex justify-center py-8">
               <Loader2 size={18} className="animate-spin text-muted-foreground" />
             </div>
@@ -206,54 +211,49 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
               {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} contentWidth={contentWidth} setContentWidth={setContentWidth} dark={dark} setDark={setDark} locale={locale} setLocale={setLocale} t={t} />}
               {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
               {tab === 'plugins' && <PluginsTab pluginStates={pluginStates} setPluginStates={setPluginStates} t={t} />}
-              {tab === 'shortcuts' && <ShortcutsTab t={t} />}
               {tab === 'sync' && <SyncTab t={t} />}
               {tab === 'mcp' && <McpTab t={t} />}
+              {tab === 'monitoring' && <MonitoringTab t={t} />}
+              {tab === 'agents' && <AgentsTab t={t} />}
             </>
           )}
         </div>
 
-        {/* Footer */}
+        {/* Footer — status bar + contextual actions */}
         {(tab === 'ai' || tab === 'knowledge') && (
-          <div className="px-5 py-3 border-t border-border shrink-0 flex items-center justify-between">
+          <div className="px-5 py-2.5 border-t border-border shrink-0 flex items-center justify-between">
             <div className="flex items-center gap-3">
               {tab === 'ai' && Object.values(env).some(Boolean) && (
                 <button
                   onClick={restoreFromEnv}
                   disabled={saving || !data}
-                  className="flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                  className="flex items-center gap-1.5 px-3 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                 >
-                  <RotateCcw size={13} />
+                  <RotateCcw size={12} />
                   {t.settings.ai.restoreFromEnv}
                 </button>
               )}
               {tab === 'knowledge' && (
                 <a
                   href="/setup?force=1"
-                  className="flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  className="flex items-center gap-1.5 px-3 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                 >
-                  <RotateCcw size={13} />
+                  <RotateCcw size={12} />
                   {t.settings.reconfigure}
                 </a>
               )}
-              <div className="flex items-center gap-1.5 text-xs">
-                {status === 'saved' && (
-                  <><CheckCircle2 size={13} className="text-success" /><span className="text-success">{t.settings.saved}</span></>
-                )}
-                {status === 'error' && (
-                  <><AlertCircle size={13} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>
-                )}
-              </div>
             </div>
-            <button
-              onClick={handleSave}
-              disabled={saving || !data}
-              className="flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
-              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
-            >
-              {saving ? <Loader2 size={13} className="animate-spin" /> : <Save size={13} />}
-              {t.settings.save}
-            </button>
+            <div className="flex items-center gap-1.5 text-xs" role="status" aria-live="polite">
+              {saving && (
+                <><Loader2 size={12} className="animate-spin text-muted-foreground" /><span className="text-muted-foreground">{t.settings.save}...</span></>
+              )}
+              {status === 'saved' && (
+                <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{t.settings.saved}</span></>
+              )}
+              {status === 'error' && (
+                <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>
+              )}
+            </div>
           </div>
         )}
       </div>

package/app/components/settings/AgentsTab.tsx

@@ -0,0 +1,240 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Loader2, RefreshCw, ChevronDown, ChevronRight, ExternalLink } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import type { McpStatus, AgentInfo } from './types';
+import type { Messages } from '@/lib/i18n';
+
+interface AgentsTabProps {
+  t: Messages;
+}
+
+export function AgentsTab({ t }: AgentsTabProps) {
+  const [agents, setAgents] = useState<AgentInfo[]>([]);
+  const [mcpStatus, setMcpStatus] = useState<McpStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [showNotDetected, setShowNotDetected] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  const a = t.settings?.agents as Record<string, unknown> | undefined;
+
+  // i18n helpers with fallbacks
+  const txt = (key: string, fallback: string) => (a?.[key] as string) ?? fallback;
+  const txtFn = <T,>(key: string, fallback: (v: T) => string) =>
+    (a?.[key] as ((v: T) => string) | undefined) ?? fallback;
+
+  const fetchAll = useCallback(async (silent = false) => {
+    if (!silent) setError(false);
+    try {
+      const [statusData, agentsData] = await Promise.all([
+        apiFetch<McpStatus>('/api/mcp/status'),
+        apiFetch<{ agents: AgentInfo[] }>('/api/mcp/agents'),
+      ]);
+      setMcpStatus(statusData);
+      setAgents(agentsData.agents);
+      setError(false);
+    } catch {
+      if (!silent) setError(true);
+    }
+    setLoading(false);
+    setRefreshing(false);
+  }, []);
+
+  // Initial fetch + 30s auto-refresh
+  useEffect(() => {
+    fetchAll();
+    intervalRef.current = setInterval(() => fetchAll(true), 30_000);
+    return () => clearInterval(intervalRef.current);
+  }, [fetchAll]);
+
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchAll();
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-8">
+        <Loader2 size={18} className="animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error && agents.length === 0) {
+    return (
+      <div className="flex flex-col items-center gap-3 py-8 text-center">
+        <p className="text-sm text-destructive">{txt('fetchError', 'Failed to load agent data')}</p>
+        <button
+          onClick={handleRefresh}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        >
+          <RefreshCw size={12} />
+          {txt('refresh', 'Refresh')}
+        </button>
+      </div>
+    );
+  }
+
+  // Group agents
+  const connected = agents.filter(a => a.present && a.installed);
+  const detected = agents.filter(a => a.present && !a.installed);
+  const notFound = agents.filter(a => !a.present);
+
+  return (
+    <div className="space-y-5">
+      {/* MCP Server Status */}
+      <div className="rounded-xl border border-border bg-card p-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className="text-sm font-medium text-foreground">{txt('mcpServer', 'MCP Server')}</span>
+          {mcpStatus?.running ? (
+            <span className="flex items-center gap-1.5 text-xs">
+              <span className="w-2 h-2 rounded-full bg-emerald-500 inline-block" />
+              <span className="text-emerald-600 dark:text-emerald-400">
+                {txt('running', 'Running')} {txtFn<number>('onPort', (p) => `on :${p}`)(mcpStatus.port)}
+              </span>
+            </span>
+          ) : (
+            <span className="flex items-center gap-1.5 text-xs">
+              <span className="w-2 h-2 rounded-full bg-zinc-400 inline-block" />
+              <span className="text-muted-foreground">{txt('stopped', 'Not running')}</span>
+            </span>
+          )}
+        </div>
+        <button
+          onClick={handleRefresh}
+          disabled={refreshing}
+          className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+        >
+          <RefreshCw size={12} className={refreshing ? 'animate-spin' : ''} />
+          {refreshing ? txt('refreshing', 'Refreshing...') : txt('refresh', 'Refresh')}
+        </button>
+      </div>
+
+      {/* Connected Agents */}
+      {connected.length > 0 && (
+        <section>
+          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            {txtFn<number>('connectedCount', (n) => `Connected (${n})`)(connected.length)}
+          </h3>
+          <div className="space-y-2">
+            {connected.map(agent => (
+              <AgentCard key={agent.key} agent={agent} status="connected" />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Detected but not configured */}
+      {detected.length > 0 && (
+        <section>
+          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            {txtFn<number>('detectedCount', (n) => `Detected but not configured (${n})`)(detected.length)}
+          </h3>
+          <div className="space-y-2">
+            {detected.map(agent => (
+              <AgentCard
+                key={agent.key}
+                agent={agent}
+                status="detected"
+                connectLabel={txt('connect', 'Connect')}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Not Detected */}
+      {notFound.length > 0 && (
+        <section>
+          <button
+            onClick={() => setShowNotDetected(!showNotDetected)}
+            className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3 hover:text-foreground transition-colors"
+          >
+            {showNotDetected ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+            {txtFn<number>('notDetectedCount', (n) => `Not Detected (${n})`)(notFound.length)}
+          </button>
+          {showNotDetected && (
+            <div className="space-y-2">
+              {notFound.map(agent => (
+                <AgentCard key={agent.key} agent={agent} status="notFound" />
+              ))}
+            </div>
+          )}
+        </section>
+      )}
+
+      {/* Empty state */}
+      {agents.length === 0 && (
+        <p className="text-sm text-muted-foreground text-center py-4">
+          {txt('noAgents', 'No agents detected on this machine.')}
+        </p>
+      )}
+
+      {/* Auto-refresh hint */}
+      <p className="text-[10px] text-muted-foreground/60 text-center">
+        {txt('autoRefresh', 'Auto-refresh every 30s')}
+      </p>
+    </div>
+  );
+}
+
+/* ── Agent Card ──────────────────────────────────────────────── */
+
+function AgentCard({
+  agent,
+  status,
+  connectLabel,
+}: {
+  agent: AgentInfo;
+  status: 'connected' | 'detected' | 'notFound';
+  connectLabel?: string;
+}) {
+  const dot =
+    status === 'connected' ? 'bg-emerald-500' :
+    status === 'detected' ? 'bg-amber-500' :
+    'bg-zinc-400';
+
+  return (
+    <div className="rounded-lg border border-border bg-card/50 px-4 py-3 flex items-center justify-between gap-3">
+      <div className="flex items-center gap-3 min-w-0">
+        <span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
+        <span className="text-sm font-medium text-foreground truncate">{agent.name}</span>
+        {status === 'connected' && (
+          <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+            <span className="px-1.5 py-0.5 rounded bg-muted">{agent.transport}</span>
+            <span className="px-1.5 py-0.5 rounded bg-muted">{agent.scope}</span>
+            {agent.configPath && (
+              <span className="truncate max-w-[200px]" title={agent.configPath}>
+                {agent.configPath.replace(/^.*[/\\]/, '')}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+      {status === 'detected' && (
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            // Navigate to MCP tab by dispatching a custom event
+            const settingsModal = document.querySelector('[role="dialog"][aria-label="Settings"]');
+            if (settingsModal) {
+              const mcpBtn = settingsModal.querySelectorAll('button');
+              for (const btn of mcpBtn) {
+                if (btn.textContent?.trim() === 'MCP') {
+                  btn.click();
+                  break;
+                }
+              }
+            }
+          }}
+          className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-lg bg-amber-500/10 text-amber-600 dark:text-amber-400 hover:bg-amber-500/20 transition-colors shrink-0"
+        >
+          {connectLabel ?? 'Connect'}
+          <ExternalLink size={11} />
+        </a>
+      )}
+    </div>
+  );
+}

package/app/components/settings/AiTab.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { AlertCircle, Loader2 } from 'lucide-react';
-import type { AiSettings, AgentSettings, ProviderConfig, SettingsData } from './types';
-import { Field, Select, Input, EnvBadge, ApiKeyInput } from './Primitives';
+import type { AiSettings, AgentSettings, ProviderConfig, SettingsData, AiTabProps } from './types';
+import { Field, Select, Input, EnvBadge, ApiKeyInput, Toggle } from './Primitives';
 
 type TestState = 'idle' | 'testing' | 'ok' | 'error';
 type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
@@ -15,7 +15,7 @@ interface TestResult {
   code?: ErrorCode;
 }
 
-function errorMessage(t: any, code?: ErrorCode): string {
+function errorMessage(t: AiTabProps['t'], code?: ErrorCode): string {
   switch (code) {
     case 'auth_error': return t.settings.ai.testKeyAuthError;
     case 'model_not_found': return t.settings.ai.testKeyModelNotFound;
@@ -25,13 +25,6 @@ function errorMessage(t: any, code?: ErrorCode): string {
   }
 }
 
-interface AiTabProps {
-  data: SettingsData;
-  updateAi: (patch: Partial<AiSettings>) => void;
-  updateAgent: (patch: Partial<AgentSettings>) => void;
-  t: any;
-}
-
 export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
   const env = data.envOverrides ?? {};
   const envVal = data.envValues ?? {};
@@ -262,21 +255,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
                   <div className="text-sm text-foreground">{t.settings.agent.thinking}</div>
                   <div className="text-xs text-muted-foreground mt-0.5">{t.settings.agent.thinkingHint}</div>
                 </div>
-                <button
-                  type="button"
-                  role="switch"
-                  aria-checked={data.agent?.enableThinking ?? false}
-                  onClick={() => updateAgent({ enableThinking: !(data.agent?.enableThinking ?? false) })}
-                  className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-                    data.agent?.enableThinking ? 'bg-amber-500' : 'bg-muted'
-                  }`}
-                >
-                  <span
-                    className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
-                      data.agent?.enableThinking ? 'translate-x-4' : 'translate-x-0'
-                    }`}
-                  />
-                </button>
+                <Toggle checked={data.agent?.enableThinking ?? false} onChange={() => updateAgent({ enableThinking: !(data.agent?.enableThinking ?? false) })} />
               </div>
 
               {data.agent?.enableThinking && (