@geminilight/mindos 0.5.20 → 0.5.21

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 } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { getAllRenderers, loadDisabledState, isRendererEnabled } from '@/lib/renderers/registry';
 import { apiFetch } from '@/lib/api';
@@ -12,7 +12,6 @@ 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';
 
@@ -28,6 +27,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 +38,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 +82,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 +99,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 +125,28 @@ 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} /> },
   ];
 
   return (
@@ -177,12 +177,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 +197,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' ? (
             <div className="flex justify-center py-8">
               <Loader2 size={18} className="animate-spin text-muted-foreground" />
             </div>
@@ -206,54 +207,47 @@ 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} />}
             </>
           )}
         </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/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 && (

package/app/components/settings/AppearanceTab.tsx

@@ -1,22 +1,14 @@
 'use client';
 
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import { Locale } from '@/lib/i18n';
-import { CONTENT_WIDTHS, FONTS } from './types';
+import { CONTENT_WIDTHS, FONTS, AppearanceTabProps } from './types';
 import { Field, Select } from './Primitives';
 
-interface AppearanceTabProps {
-  font: string;
-  setFont: (v: string) => void;
-  contentWidth: string;
-  setContentWidth: (v: string) => void;
-  dark: boolean;
-  setDark: (v: boolean) => void;
-  locale: Locale;
-  setLocale: (v: Locale) => void;
-  t: any;
-}
-
 export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, dark, setDark, locale, setLocale, t }: AppearanceTabProps) {
+  const [showShortcuts, setShowShortcuts] = useState(false);
+
   return (
     <div className="space-y-5">
       <Field label={t.settings.appearance.readingFont}>
@@ -96,6 +88,32 @@ export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, da
       </Field>
 
       <p className="text-xs text-muted-foreground">{t.settings.appearance.browserNote}</p>
+
+      {/* Keyboard Shortcuts */}
+      <div className="border-t border-border pt-4">
+        <button
+          type="button"
+          onClick={() => setShowShortcuts(!showShortcuts)}
+          className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
+        >
+          {showShortcuts ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+          {t.settings.tabs.shortcuts}
+        </button>
+        {showShortcuts && (
+          <div className="mt-3 space-y-1">
+            {t.shortcuts.map((s: { readonly description: string; readonly keys: readonly string[] }, i: number) => (
+              <div key={i} className="flex items-center justify-between py-2 border-b border-border last:border-0">
+                <span className="text-sm text-foreground">{s.description}</span>
+                <div className="flex items-center gap-1">
+                  {s.keys.map((k: string, j: number) => (
+                    <kbd key={j} className="px-2 py-0.5 text-xs font-mono bg-muted border border-border rounded text-foreground">{k}</kbd>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/app/components/settings/KnowledgeTab.tsx

@@ -2,16 +2,10 @@
 
 import { useState, useEffect, useCallback, useSyncExternalStore } from 'react';
 import { Copy, Check, RefreshCw, Trash2, Sparkles } from 'lucide-react';
-import type { SettingsData } from './types';
-import { Field, Input, EnvBadge, SectionLabel } from './Primitives';
+import type { KnowledgeTabProps } from './types';
+import { Field, Input, EnvBadge, SectionLabel, Toggle } from './Primitives';
 import { apiFetch } from '@/lib/api';
 
-interface KnowledgeTabProps {
-  data: SettingsData;
-  setData: React.Dispatch<React.SetStateAction<SettingsData | null>>;
-  t: any;
-}
-
 export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   const env = data.envOverrides ?? {};
   const k = t.settings.knowledge;
@@ -21,8 +15,8 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   const [guideDismissed, setGuideDismissed] = useState(false);
 
   useEffect(() => {
-    fetch('/api/setup')
-      .then(r => r.json())
+    // 🟢 MINOR #5: Use apiFetch instead of raw fetch for consistency
+    apiFetch<{ guideState?: { active: boolean; dismissed: boolean } }>('/api/setup')
       .then(d => {
         const gs = d.guideState;
         if (gs) {
@@ -30,7 +24,9 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
           setGuideDismissed(!!gs.dismissed);
         }
       })
-      .catch(() => {});
+      .catch(err => {
+        console.error('Failed to fetch guide state:', err);
+      });
   }, []);
 
   const handleGuideToggle = useCallback(() => {
@@ -39,13 +35,16 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
     // If re-enabling, also ensure active is true
     const patch: Record<string, boolean> = { dismissed: newDismissed };
     if (!newDismissed) patch.active = true;
-    fetch('/api/setup', {
+    apiFetch('/api/setup', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ guideState: patch }),
     })
       .then(() => window.dispatchEvent(new Event('guide-state-updated')))
-      .catch(() => setGuideDismissed(!newDismissed)); // rollback on failure
+      .catch(err => {
+        console.error('Failed to update guide state:', err);
+        setGuideDismissed(!newDismissed); // rollback on failure
+      });
   }, [guideDismissed]);
 
   const origin = useSyncExternalStore(
@@ -202,21 +201,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
                 <div className="text-sm text-foreground">{t.guide?.showGuide ?? 'Show getting started guide'}</div>
               </div>
             </div>
-            <button
-              type="button"
-              role="switch"
-              aria-checked={!guideDismissed}
-              onClick={handleGuideToggle}
-              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 ${
-                !guideDismissed ? 'bg-amber-500' : 'bg-muted'
-              }`}
-            >
-              <span
-                className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
-                  !guideDismissed ? 'translate-x-4' : 'translate-x-0'
-                }`}
-              />
-            </button>
+            <Toggle checked={!guideDismissed} onChange={() => handleGuideToggle()} />
           </div>
         </div>
       )}

package/app/components/settings/McpAgentInstall.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { useState } from 'react';
+import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import type { AgentInfo, McpAgentInstallProps } from './types';
+
+/* ── Agent Install ─────────────────────────────────────────────── */
+
+export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallProps) {
+  const m = t.settings?.mcp;
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [transport, setTransport] = useState<'auto' | 'stdio' | 'http'>('auto');
+  const [httpUrl, setHttpUrl] = useState('http://localhost:8787/mcp');
+  const [httpToken, setHttpToken] = useState('');
+  const [scopes, setScopes] = useState<Record<string, 'project' | 'global'>>({});
+  const [installing, setInstalling] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const getEffectiveTransport = (agent: AgentInfo) => {
+    if (transport === 'auto') return agent.preferredTransport;
+    return transport;
+  };
+
+  const toggle = (key: string) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key); else next.add(key);
+      return next;
+    });
+  };
+
+  const handleInstall = async () => {
+    if (selected.size === 0) return;
+    setInstalling(true);
+    setMessage(null);
+    try {
+      const payload = {
+        agents: [...selected].map(key => {
+          const agent = agents.find(a => a.key === key);
+          const effectiveTransport = transport === 'auto'
+            ? (agent?.preferredTransport || 'stdio')
+            : transport;
+          return {
+            key,
+            scope: scopes[key] || (agent?.hasProjectScope ? 'project' : 'global'),
+            transport: effectiveTransport,
+          };
+        }),
+        transport,
+        ...(transport === 'http' ? { url: httpUrl, token: httpToken } : {}),
+        // For auto mode, pass http settings for agents that need it
+        ...(transport === 'auto' ? { url: httpUrl, token: httpToken } : {}),
+      };
+      const res = await apiFetch<{ results: Array<{ agent: string; status: string; message?: string }> }>('/api/mcp/install', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      const ok = res.results.filter(r => r.status === 'ok').length;
+      const fail = res.results.filter(r => r.status === 'error');
+      if (fail.length > 0) {
+        setMessage({ type: 'error', text: fail.map(f => `${f.agent}: ${f.message}`).join('; ') });
+      } else {
+        setMessage({ type: 'success', text: m?.installSuccess ? m.installSuccess(ok) : `${ok} agent(s) configured` });
+      }
+      setSelected(new Set());
+      onRefresh();
+    } catch {
+      setMessage({ type: 'error', text: m?.installFailed ?? 'Install failed' });
+    } finally {
+      setInstalling(false);
+      setTimeout(() => setMessage(null), 4000);
+    }
+  };
+
+  // Show http fields if transport is 'http', or 'auto' with any http-preferred agent selected
+  const showHttpFields = transport === 'http' || (transport === 'auto' && [...selected].some(key => {
+    const agent = agents.find(a => a.key === key);
+    return agent?.preferredTransport === 'http';
+  }));
+
+  return (
+    <div className="space-y-3 pt-2">
+      {/* Agent list */}
+      <div className="space-y-1">
+        {agents.map(agent => (
+          <div key={agent.key} className="flex items-center gap-3 py-1.5 text-sm">
+            <input
+              type="checkbox"
+              checked={selected.has(agent.key)}
+              onChange={() => toggle(agent.key)}
+              className="rounded border-border"
+              style={{ accentColor: 'var(--amber)' }}
+            />
+            <span className="w-28 shrink-0 text-xs">{agent.name}</span>
+            <span className="text-2xs px-1.5 py-0.5 rounded font-mono"
+              style={{ background: 'rgba(100,100,120,0.08)' }}>
+              {getEffectiveTransport(agent)}
+            </span>
+            {agent.installed ? (
+              <>
+                <span className="text-2xs px-1.5 py-0.5 rounded bg-success/15 text-success font-mono">
+                  {agent.transport}
+                </span>
+                <span className="text-2xs text-muted-foreground">{agent.scope}</span>
+              </>
+            ) : (
+              <span className="text-2xs text-muted-foreground">
+                {agent.present ? (m?.detected ?? 'Detected') : (m?.notFound ?? 'Not found')}
+              </span>
+            )}
+            {/* Scope selector */}
+            {selected.has(agent.key) && agent.hasProjectScope && agent.hasGlobalScope && (
+              <select
+                value={scopes[agent.key] || 'project'}
+                onChange={e => setScopes({ ...scopes, [agent.key]: e.target.value as 'project' | 'global' })}
+                className="ml-auto text-2xs px-1.5 py-0.5 rounded border border-border bg-background text-foreground"
+              >
+                <option value="project">{m?.project ?? 'Project'}</option>
+                <option value="global">{m?.global ?? 'Global'}</option>
+              </select>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Select detected / Clear buttons */}
+      <div className="flex gap-2 text-xs pt-1">
+        <button type="button"
+          onClick={() => setSelected(new Set(
+            agents.filter(a => !a.installed && a.present).map(a => a.key)
+          ))}
+          className="px-2.5 py-1 rounded-md border transition-colors hover:bg-muted/50"
+          style={{ borderColor: 'var(--amber)', color: 'var(--amber)' }}>
+          {m?.selectDetected ?? 'Select Detected'}
+        </button>
+        <button type="button"
+          onClick={() => setSelected(new Set())}
+          className="px-2.5 py-1 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground">
+          {m?.clearSelection ?? 'Clear'}
+        </button>
+      </div>
+
+      {/* Transport selector */}
+      <div className="flex items-center gap-4 text-xs pt-1">
+        <label className="flex items-center gap-1.5 cursor-pointer">
+          <input
+            type="radio"
+            name="transport"
+            checked={transport === 'auto'}
+            onChange={() => setTransport('auto')}
+            style={{ accentColor: 'var(--amber)' }}
+          />
+          {m?.transportAuto ?? 'auto (recommended)'}
+        </label>
+        <label className="flex items-center gap-1.5 cursor-pointer">
+          <input
+            type="radio"
+            name="transport"
+            checked={transport === 'stdio'}
+            onChange={() => setTransport('stdio')}
+            style={{ accentColor: 'var(--amber)' }}
+          />
+          {m?.transportStdio ?? 'stdio'}
+        </label>
+        <label className="flex items-center gap-1.5 cursor-pointer">
+          <input
+            type="radio"
+            name="transport"
+            checked={transport === 'http'}
+            onChange={() => setTransport('http')}
+            style={{ accentColor: 'var(--amber)' }}
+          />
+          {m?.transportHttp ?? 'http'}
+        </label>
+      </div>
+
+      {/* HTTP settings */}
+      {showHttpFields && (
+        <div className="space-y-2 pl-5 text-xs">
+          <div className="space-y-1">
+            <label className="text-muted-foreground">{m?.httpUrl ?? 'MCP URL'}</label>
+            <input
+              type="text"
+              value={httpUrl}
+              onChange={e => setHttpUrl(e.target.value)}
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-muted-foreground">{m?.httpToken ?? 'Auth Token'}</label>
+            <input
+              type="password"
+              value={httpToken}
+              onChange={e => setHttpToken(e.target.value)}
+              placeholder="Bearer token"
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Install button */}
+      <button
+        onClick={handleInstall}
+        disabled={selected.size === 0 || installing}
+        className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+      >
+        {installing && <Loader2 size={12} className="animate-spin" />}
+        {installing ? (m?.installing ?? 'Installing...') : (m?.installSelected ?? 'Install Selected')}
+      </button>
+
+      {/* Message */}
+      {message && (
+        <div className="flex items-center gap-1.5 text-xs" role="status">
+          {message.type === 'success' ? (
+            <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{message.text}</span></>
+          ) : (
+            <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{message.text}</span></>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}