@geminilight/mindos 0.5.49 → 0.5.51

package/README.md

@@ -5,7 +5,7 @@
 <h1 align="center">MindOS</h1>
 
 <p align="center">
-  <strong>Human Thinks Here, Agent Acts There.</strong>
+  <strong>Human Thinks Here, Agents Act There.</strong>
 </p>
 
 <p align="center">
@@ -20,7 +20,7 @@
   <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-6366f1.svg?style=for-the-badge" alt="MIT License"></a>
 </p>
 
-MindOS is a **Human-AI Collaborative Mind System**—a local-first knowledge base that ensures your notes, workflows, and personal context are both human-readable and directly executable by Agents. **Share your brain with every AI — auditable, correctable, and more YOU with every use.**
+MindOS is where you think, and where your AI agents act — a local-first knowledge base shared between you and every AI you use. **Share your brain with every AI — every thought grows.**
 
 ---
 

package/README_zh.md

@@ -20,7 +20,7 @@
   <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-6366f1.svg?style=for-the-badge" alt="MIT License"></a>
 </p>
 
-MindOS 是一个**人机协同心智系统**——基于本地优先的协作知识库，让你的笔记、工作流、个人上下文既对人类阅读友好，也能直接被 Agent 调用和执行。**和所有 AI 共享你的大脑——可审计、可修正、越用越是你。**
+MindOS 是你思考的地方，也是 AI Agent 行动的起点——一个你和所有 AI 共享的本地知识库。**每次思考，都在生长。**
 
 ---
 

package/app/app/api/mcp/install/route.ts

@@ -4,6 +4,13 @@ import fs from 'fs';
 import path from 'path';
 import { MCP_AGENTS, expandHome } from '@/lib/mcp-agents';
 
+/** Parse JSONC — strips single-line (//) and block comments before JSON.parse */
+function parseJsonc(text: string): Record<string, unknown> {
+  let stripped = text.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*$)/gm, (m, g) => g ? '' : m);
+  stripped = stripped.replace(/\/\*[\s\S]*?\*\//g, '');
+  return JSON.parse(stripped);
+}
+
 interface AgentInstallItem {
   key: string;
   scope: 'project' | 'global';
@@ -92,7 +99,7 @@ export async function POST(req: NextRequest) {
         // Read existing config
         let config: Record<string, unknown> = {};
         if (fs.existsSync(absPath)) {
-          config = JSON.parse(fs.readFileSync(absPath, 'utf-8'));
+          config = parseJsonc(fs.readFileSync(absPath, 'utf-8'));
         }
 
         // Merge — only touch mcpServers.mindos

package/app/app/api/mcp/restart/route.ts

@@ -0,0 +1,88 @@
+export const dynamic = 'force-dynamic';
+import { NextResponse } from 'next/server';
+import { execSync, spawn } from 'node:child_process';
+import { existsSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { homedir } from 'node:os';
+
+const CONFIG_PATH = resolve(homedir(), '.mindos', 'config.json');
+
+function readConfig(): Record<string, unknown> {
+  try { return JSON.parse(readFileSync(CONFIG_PATH, 'utf-8')); }
+  catch { return {}; }
+}
+
+/**
+ * Kill process(es) listening on the given port.
+ * Tries lsof first, falls back to ss + manual kill.
+ */
+function killByPort(port: number) {
+  try {
+    execSync(`lsof -ti :${port} | xargs kill -9 2>/dev/null`, { stdio: 'ignore' });
+    return;
+  } catch { /* lsof not available */ }
+  try {
+    const output = execSync('ss -tlnp 2>/dev/null', { encoding: 'utf-8' });
+    const portRe = new RegExp(`:${port}(?!\\d)`);
+    for (const line of output.split('\n')) {
+      if (!portRe.test(line)) continue;
+      const pidMatch = line.match(/pid=(\d+)/g);
+      if (pidMatch) {
+        for (const m of pidMatch) {
+          const pid = Number(m.slice(4));
+          if (pid > 0) try { process.kill(pid, 'SIGKILL'); } catch {}
+        }
+      }
+    }
+  } catch { /* no process to kill */ }
+}
+
+/**
+ * POST /api/mcp/restart — kill the MCP server process and spawn a new one.
+ *
+ * Unlike /api/restart which restarts the entire MindOS (Web + MCP),
+ * this endpoint only restarts the MCP server. The Web UI stays up.
+ */
+export async function POST() {
+  try {
+    const cfg = readConfig();
+    const mcpPort = (cfg.mcpPort as number) ?? 8781;
+    const webPort = process.env.MINDOS_WEB_PORT || '3456';
+    const authToken = cfg.authToken as string | undefined;
+
+    // Step 1: Kill process on MCP port
+    killByPort(mcpPort);
+
+    // Step 2: Wait briefly for port to free
+    await new Promise(r => setTimeout(r, 1000));
+
+    // Step 3: Spawn new MCP server
+    const root = resolve(process.cwd(), '..');
+    const mcpDir = resolve(root, 'mcp');
+
+    if (!existsSync(resolve(mcpDir, 'node_modules'))) {
+      return NextResponse.json({ error: 'MCP dependencies not installed' }, { status: 500 });
+    }
+
+    const env: NodeJS.ProcessEnv = {
+      ...process.env,
+      MCP_PORT: String(mcpPort),
+      MCP_HOST: process.env.MCP_HOST || '0.0.0.0',
+      MINDOS_URL: process.env.MINDOS_URL || `http://127.0.0.1:${webPort}`,
+      ...(authToken ? { AUTH_TOKEN: authToken } : {}),
+    };
+
+    const child = spawn('npx', ['tsx', 'src/index.ts'], {
+      cwd: mcpDir,
+      detached: true,
+      stdio: 'ignore',
+      env,
+    });
+    child.unref();
+
+    return NextResponse.json({ ok: true, pid: child.pid, port: mcpPort });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/app/app/help/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from 'next/navigation';
+import { readSettings } from '@/lib/settings';
+import HelpContent from '@/components/help/HelpContent';
+
+export const dynamic = 'force-dynamic';
+
+export default function HelpPage() {
+  const settings = readSettings();
+  if (settings.setupPending) redirect('/setup');
+
+  return <HelpContent />;
+}

package/app/components/help/HelpContent.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { BookOpen, Rocket, Brain, Keyboard, HelpCircle, Bot, ChevronDown, Copy, Check } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+
+/* ── Collapsible Section ── */
+function Section({ icon, title, defaultOpen = false, children }: {
+  icon: React.ReactNode;
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="bg-card border border-border rounded-lg overflow-hidden">
+      <button
+        onClick={() => setOpen(v => !v)}
+        className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-muted/50 transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+        aria-expanded={open}
+      >
+        <span className="text-[var(--amber)]">{icon}</span>
+        <span className="text-base font-medium font-display text-foreground flex-1">{title}</span>
+        <ChevronDown size={16} className={`text-muted-foreground transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
+      </button>
+      {open && (
+        <div className="px-5 pb-5 pt-0">
+          <div className="border-t border-border pt-4">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Step Card ── */
+function StepCard({ step, title, desc }: { step: number; title: string; desc: string }) {
+  return (
+    <div className="flex gap-4 items-start">
+      <div className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold font-mono" style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}>
+        {step}
+      </div>
+      <div className="min-w-0">
+        <p className="text-sm font-medium text-foreground">{title}</p>
+        <p className="text-sm text-muted-foreground mt-0.5">{desc}</p>
+      </div>
+    </div>
+  );
+}
+
+/* ── Copyable Prompt Block ── */
+function PromptBlock({ text, copyLabel }: { text: string; copyLabel: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    const clean = text.replace(/^[""]|[""]$/g, '');
+    navigator.clipboard.writeText(clean).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [text]);
+
+  return (
+    <div className="group/prompt mt-2 flex items-start gap-2 bg-background border border-border rounded-md px-3 py-2">
+      <p className="flex-1 text-xs font-mono leading-relaxed" style={{ color: 'var(--amber)' }}>{text}</p>
+      <button
+        onClick={handleCopy}
+        className="shrink-0 p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors opacity-0 group-hover/prompt:opacity-100 focus-visible:opacity-100"
+        aria-label={copyLabel}
+        title={copyLabel}
+      >
+        {copied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
+      </button>
+    </div>
+  );
+}
+
+/* ── FAQ Item ── */
+function FaqItem({ q, a }: { q: string; a: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="border-b border-border last:border-b-0">
+      <button
+        onClick={() => setOpen(v => !v)}
+        className="w-full flex items-center justify-between py-3 text-left focus-visible:ring-2 focus-visible:ring-ring"
+        aria-expanded={open}
+      >
+        <span className="text-sm font-medium text-foreground pr-4">{q}</span>
+        <ChevronDown size={14} className={`shrink-0 text-muted-foreground transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
+      </button>
+      {open && (
+        <p className="text-sm text-muted-foreground pb-3 leading-relaxed">{a}</p>
+      )}
+    </div>
+  );
+}
+
+/* ── Shortcut Row ── */
+function ShortcutRow({ keys, label }: { keys: string; label: string }) {
+  return (
+    <div className="flex items-center justify-between py-1.5">
+      <span className="text-sm text-foreground">{label}</span>
+      <div className="flex items-center gap-1">
+        {keys.split(' ').map((key, i) => (
+          <kbd
+            key={i}
+            className="px-1.5 py-0.5 text-xs rounded border border-border bg-muted text-muted-foreground font-mono min-w-[24px] text-center"
+          >
+            {key}
+          </kbd>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ── Main Component ── */
+export default function HelpContent() {
+  const { t } = useLocale();
+  const h = t.help;
+
+  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent);
+  const mod = isMac ? '⌘' : 'Ctrl';
+
+  const shortcuts = useMemo(() => [
+    { keys: `${mod} K`, label: h.shortcuts.search },
+    { keys: `${mod} /`, label: h.shortcuts.askAI },
+    { keys: `${mod} ,`, label: h.shortcuts.settings },
+    { keys: `${mod} ?`, label: h.shortcuts.shortcutPanel },
+    { keys: 'E', label: h.shortcuts.editFile },
+    { keys: `${mod} S`, label: h.shortcuts.save },
+    { keys: 'Esc', label: h.shortcuts.closePanel },
+    { keys: '@', label: h.shortcuts.attachFile },
+  ], [mod, h.shortcuts]);
+
+  return (
+    <div className="content-width px-4 md:px-6 py-8 md:py-12">
+      {/* ── Header ── */}
+      <div className="mb-8">
+        <div className="flex items-center gap-2 mb-1">
+          <div className="w-1 h-6 rounded-full" style={{ background: 'var(--amber)' }} />
+          <h1 className="text-2xl font-bold font-display text-foreground">{h.title}</h1>
+        </div>
+        <p className="text-muted-foreground text-sm ml-3 mt-1">{h.subtitle}</p>
+      </div>
+
+      {/* ── Sections ── */}
+      <div className="space-y-3">
+        {/* 1. What is MindOS */}
+        <Section icon={<BookOpen size={18} />} title={h.whatIs.title} defaultOpen>
+          <p className="text-sm text-muted-foreground leading-relaxed">{h.whatIs.body}</p>
+        </Section>
+
+        {/* 2. Core Concepts */}
+        <Section icon={<Brain size={18} />} title={h.concepts.title} defaultOpen>
+          <div className="space-y-4">
+            <div>
+              <p className="text-sm font-medium text-foreground">{h.concepts.spaceTitle}</p>
+              <p className="text-sm text-muted-foreground mt-0.5">{h.concepts.spaceDesc}</p>
+            </div>
+            <div>
+              <p className="text-sm font-medium text-foreground">{h.concepts.instructionTitle}</p>
+              <p className="text-sm text-muted-foreground mt-0.5">{h.concepts.instructionDesc}</p>
+            </div>
+            <div>
+              <p className="text-sm font-medium text-foreground">{h.concepts.skillTitle}</p>
+              <p className="text-sm text-muted-foreground mt-0.5">{h.concepts.skillDesc}</p>
+            </div>
+          </div>
+        </Section>
+
+        {/* 3. Quick Start */}
+        <Section icon={<Rocket size={18} />} title={h.quickStart.title} defaultOpen>
+          <div className="space-y-4">
+            <StepCard step={1} title={h.quickStart.step1Title} desc={h.quickStart.step1Desc} />
+            <StepCard step={2} title={h.quickStart.step2Title} desc={h.quickStart.step2Desc} />
+            <StepCard step={3} title={h.quickStart.step3Title} desc={h.quickStart.step3Desc} />
+          </div>
+        </Section>
+
+        {/* 4. Using MindOS with AI Agents */}
+        <Section icon={<Bot size={18} />} title={h.agentUsage.title} defaultOpen>
+          <p className="text-sm text-muted-foreground leading-relaxed mb-4">{h.agentUsage.intro}</p>
+
+          <div className="space-y-3">
+            {h.agentUsage.scenarios.map((sc, i) => {
+              const prompts = sc.prompt.split('\n');
+              return (
+                <div key={i} className="bg-muted/50 rounded-md px-4 py-3">
+                  <div className="flex items-center gap-2">
+                    <span className="text-base leading-none" role="img" suppressHydrationWarning>{sc.emoji}</span>
+                    <p className="text-sm font-medium text-foreground">{sc.title}</p>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-1">{sc.desc}</p>
+                  {prompts.map((p, j) => (
+                    <PromptBlock key={j} text={p} copyLabel={h.agentUsage.copy} />
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+
+          <p className="text-xs text-muted-foreground mt-4">{h.agentUsage.hint}</p>
+        </Section>
+
+        {/* 5. Keyboard Shortcuts */}
+        <Section icon={<Keyboard size={18} />} title={h.shortcutsTitle}>
+          <div className="space-y-0">
+            {shortcuts.map((s) => (
+              <ShortcutRow key={s.keys} keys={s.keys} label={s.label} />
+            ))}
+          </div>
+        </Section>
+
+        {/* 6. FAQ */}
+        <Section icon={<HelpCircle size={18} />} title={h.faq.title}>
+          <div>
+            {h.faq.items.map((item, i) => (
+              <FaqItem key={i} q={item.q} a={item.a} />
+            ))}
+          </div>
+        </Section>
+      </div>
+    </div>
+  );
+}

package/app/components/panels/AgentsPanel.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import { useState, useCallback, useMemo } from 'react';
-import { Loader2, RefreshCw, ChevronDown, ChevronRight, CheckCircle2, AlertCircle, Copy, Check, Monitor, Globe, Settings } from 'lucide-react';
+import { useState } from 'react';
+import { Loader2, RefreshCw, ChevronDown, ChevronRight, CheckCircle2, AlertCircle, Settings } from 'lucide-react';
 import { useMcpData } from '@/hooks/useMcpData';
 import { useLocale } from '@/lib/LocaleContext';
-import { generateSnippet } from '@/lib/mcp-snippets';
-import { copyToClipboard } from '@/lib/clipboard';
 import { Toggle } from '../settings/Primitives';
-import type { AgentInfo, McpStatus, SkillInfo } from '../settings/types';
+import type { AgentInfo, SkillInfo } from '../settings/types';
 import PanelHeader from './PanelHeader';
 
 interface AgentsPanelProps {
@@ -22,7 +20,6 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
   const mcp = useMcpData();
   const [refreshing, setRefreshing] = useState(false);
   const [showNotDetected, setShowNotDetected] = useState(false);
-  const [expandedAgent, setExpandedAgent] = useState<string | null>(null);
   const [showBuiltinSkills, setShowBuiltinSkills] = useState(false);
 
   const handleRefresh = async () => {
@@ -31,10 +28,6 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
     setRefreshing(false);
   };
 
-  const toggleAgent = (key: string) => {
-    setExpandedAgent(prev => prev === key ? null : key);
-  };
-
   const connected = mcp.agents.filter(a => a.present && a.installed);
   const detected = mcp.agents.filter(a => a.present && !a.installed);
   const notFound = mcp.agents.filter(a => !a.present);
@@ -102,9 +95,6 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
                       key={agent.key}
                       agent={agent}
                       agentStatus="connected"
-                      mcpStatus={mcp.status}
-                      expanded={expandedAgent === agent.key}
-                      onToggle={() => toggleAgent(agent.key)}
                       onInstallAgent={mcp.installAgent}
                       t={p}
                     />
@@ -123,9 +113,6 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
                       key={agent.key}
                       agent={agent}
                       agentStatus="detected"
-                      mcpStatus={mcp.status}
-                      expanded={expandedAgent === agent.key}
-                      onToggle={() => toggleAgent(agent.key)}
                       onInstallAgent={mcp.installAgent}
                       t={p}
                     />
@@ -149,9 +136,6 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
                         key={agent.key}
                         agent={agent}
                         agentStatus="notFound"
-                        mcpStatus={mcp.status}
-                        expanded={expandedAgent === agent.key}
-                        onToggle={() => toggleAgent(agent.key)}
                         onInstallAgent={mcp.installAgent}
                         t={p}
                       />
@@ -239,129 +223,55 @@ function SkillRow({ skill, onToggle }: { skill: SkillInfo; onToggle: (name: stri
   );
 }
 
-/* ── Agent Card ── */
+/* ── Agent Card (compact — no snippet, config viewing is in Settings) ── */
 
-function AgentCard({ agent, agentStatus, mcpStatus, expanded, onToggle, onInstallAgent, t }: {
+function AgentCard({ agent, agentStatus, onInstallAgent, t }: {
   agent: AgentInfo;
   agentStatus: 'connected' | 'detected' | 'notFound';
-  mcpStatus: McpStatus | null;
-  expanded: boolean;
-  onToggle: () => void;
-  onInstallAgent: (key: string, opts?: { scope?: string; transport?: string }) => Promise<boolean>;
+  onInstallAgent: (key: string) => Promise<boolean>;
   t: Record<string, any>;
 }) {
-  const [transport, setTransport] = useState<'stdio' | 'http'>('stdio');
-  const [copied, setCopied] = useState(false);
   const [installing, setInstalling] = useState(false);
   const [result, setResult] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
 
   const dot = agentStatus === 'connected' ? 'bg-emerald-500' : agentStatus === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
 
-  const snippet = useMemo(() => generateSnippet(agent, mcpStatus, transport), [agent, mcpStatus, transport]);
-
-  const handleCopy = useCallback(async () => {
-    const ok = await copyToClipboard(snippet.snippet);
-    if (ok) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [snippet.snippet]);
-
   const handleInstall = async () => {
     setInstalling(true);
     setResult(null);
     const ok = await onInstallAgent(agent.key);
-    if (ok) {
-      setResult({ type: 'success', text: `${agent.name} ${t.connected}` });
-    } else {
-      setResult({ type: 'error', text: 'Install failed' });
-    }
+    setResult(ok
+      ? { type: 'success', text: `${agent.name} ${t.connected}` }
+      : { type: 'error', text: 'Install failed' });
     setInstalling(false);
   };
 
   return (
-    <div className="rounded-lg border border-border/60 bg-card/30 overflow-hidden">
-      {/* Header row — always clickable to expand */}
-      <button
-        onClick={onToggle}
-        className="w-full px-3 py-2 flex items-center justify-between gap-2 hover:bg-muted/30 transition-colors text-left"
-      >
-        <div className="flex items-center gap-2 min-w-0">
-          <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dot}`} />
-          <span className="text-xs font-medium text-foreground truncate">{agent.name}</span>
-          {agentStatus === 'connected' && agent.transport && (
-            <span className="text-2xs px-1 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{agent.transport}</span>
-          )}
-        </div>
-        {expanded ? <ChevronDown size={10} className="text-muted-foreground shrink-0" /> : <ChevronRight size={10} className="text-muted-foreground shrink-0" />}
-      </button>
-
-      {/* Expanded: snippet + actions */}
-      {expanded && (
-        <div className="px-3 pb-3 pt-1 border-t border-border/40 space-y-2.5">
-          {/* Detected: Connect button */}
-          {agentStatus === 'detected' && (
-            <>
-              <button onClick={handleInstall} disabled={installing}
-                className="w-full flex items-center justify-center gap-1.5 px-2.5 py-1.5 text-2xs rounded-md font-medium text-white disabled:opacity-50 transition-colors"
-                style={{ background: 'var(--amber)' }}>
-                {installing ? <Loader2 size={11} className="animate-spin" /> : null}
-                {installing ? t.installing : t.install(agent.name)}
-              </button>
-              {result && (
-                <div className={`flex items-center gap-1.5 text-2xs ${result.type === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-destructive'}`}>
-                  {result.type === 'success' ? <CheckCircle2 size={11} /> : <AlertCircle size={11} />}
-                  {result.text}
-                </div>
-              )}
-            </>
-          )}
-
-          {/* Transport toggle */}
-          <div className="flex items-center rounded-md border border-border overflow-hidden w-fit">
-            <button
-              onClick={() => setTransport('stdio')}
-              className={`flex items-center gap-1 px-2 py-1 text-2xs transition-colors ${
-                transport === 'stdio' ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
-              }`}
-            >
-              <Monitor size={10} />
-              {t.transportLocal}
-            </button>
-            <button
-              onClick={() => setTransport('http')}
-              className={`flex items-center gap-1 px-2 py-1 text-2xs transition-colors ${
-                transport === 'http' ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
-              }`}
-            >
-              <Globe size={10} />
-              {t.transportRemote}
-            </button>
-          </div>
-
-          {/* No auth warning for HTTP */}
-          {transport === 'http' && mcpStatus && !mcpStatus.authConfigured && (
-            <p className="text-2xs" style={{ color: 'var(--amber)' }}>{t.noAuthWarning}</p>
-          )}
+    <div className="rounded-lg border border-border/60 bg-card/30 px-3 py-2 flex items-center justify-between gap-2">
+      <div className="flex items-center gap-2 min-w-0">
+        <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dot}`} />
+        <span className="text-xs font-medium text-foreground truncate">{agent.name}</span>
+        {agentStatus === 'connected' && agent.transport && (
+          <span className="text-2xs px-1 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{agent.transport}</span>
+        )}
+      </div>
 
-          {/* Config snippet */}
-          <pre className="text-[10px] font-mono bg-muted/50 border border-border rounded-lg p-2.5 overflow-x-auto whitespace-pre select-all max-h-[200px] overflow-y-auto">
-            {snippet.displaySnippet}
-          </pre>
+      {/* Detected: Install button */}
+      {agentStatus === 'detected' && (
+        <button onClick={handleInstall} disabled={installing}
+          className="flex items-center gap-1 px-2 py-1 text-2xs rounded-md font-medium text-white disabled:opacity-50 transition-colors shrink-0"
+          style={{ background: 'var(--amber)' }}>
+          {installing ? <Loader2 size={10} className="animate-spin" /> : null}
+          {installing ? t.installing : t.install(agent.name)}
+        </button>
+      )}
 
-          {/* Copy + path */}
-          <div className="flex items-center gap-2 text-2xs">
-            <button
-              onClick={handleCopy}
-              className="inline-flex items-center gap-1 px-2 py-1 rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
-            >
-              {copied ? <Check size={10} /> : <Copy size={10} />}
-              {copied ? t.copied : t.copyConfig}
-            </button>
-            <span className="text-muted-foreground">→</span>
-            <span className="font-mono text-muted-foreground truncate">{snippet.path}</span>
-          </div>
-        </div>
+      {/* Install result */}
+      {result && (
+        <span className={`flex items-center gap-1 text-2xs shrink-0 ${result.type === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-destructive'}`}>
+          {result.type === 'success' ? <CheckCircle2 size={10} /> : <AlertCircle size={10} />}
+          {result.text}
+        </span>
       )}
     </div>
   );

package/app/components/settings/McpTab.tsx

@@ -1,6 +1,10 @@
-import { Loader2 } from 'lucide-react';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { Loader2, ChevronDown, Copy, Check, Monitor, Globe, AlertCircle, RotateCcw, RefreshCw } from 'lucide-react';
 import { useMcpDataOptional } from '@/hooks/useMcpData';
-import type { McpTabProps } from './types';
+import { generateSnippet } from '@/lib/mcp-snippets';
+import { copyToClipboard } from '@/lib/clipboard';
+import { apiFetch } from '@/lib/api';
+import type { McpTabProps, McpStatus, AgentInfo } from './types';
 import AgentInstall from './McpAgentInstall';
 import SkillsSection from './McpSkillsSection';
 
@@ -13,6 +17,15 @@ export function McpTab({ t }: McpTabProps) {
   const mcp = useMcpDataOptional();
   const m = t.settings?.mcp;
 
+  const [restarting, setRestarting] = useState(false);
+  const [selectedAgent, setSelectedAgent] = useState('');
+  const [transport, setTransport] = useState<'stdio' | 'http'>('stdio');
+  const [copied, setCopied] = useState(false);
+  const restartPollRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  // Cleanup restart poll on unmount
+  useEffect(() => () => clearInterval(restartPollRef.current), []);
+
   if (!mcp || mcp.loading) {
     return (
       <div className="flex justify-center py-8">
@@ -21,29 +34,62 @@ export function McpTab({ t }: McpTabProps) {
     );
   }
 
+  const connectedAgents = mcp.agents.filter(a => a.present && a.installed);
+  const detectedAgents = mcp.agents.filter(a => a.present && !a.installed);
+  const notFoundAgents = mcp.agents.filter(a => !a.present);
+
+  // Auto-select first agent if none selected
+  const effectiveSelected = selectedAgent || (mcp.agents[0]?.key ?? '');
+  const currentAgent = mcp.agents.find(a => a.key === effectiveSelected);
+
   return (
     <div className="space-y-6">
-      {/* Server status summary (minimal — full status is in sidebar AgentsPanel) */}
-      {mcp.status && (
-        <div className="rounded-xl border p-4 space-y-2" style={{ borderColor: 'var(--border)', background: 'var(--card)' }}>
-          <div className="flex items-center gap-2.5 text-xs">
-            <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${mcp.status.running ? 'bg-success' : 'bg-muted-foreground'}`} />
-            <span className="text-foreground font-medium">
-              {mcp.status.running ? (m?.running ?? 'Running') : (m?.stopped ?? 'Stopped')}
-            </span>
-            {mcp.status.running && (
-              <>
-                <span className="text-muted-foreground">·</span>
-                <span className="font-mono text-muted-foreground">{mcp.status.endpoint}</span>
-                <span className="text-muted-foreground">·</span>
-                <span className="text-muted-foreground">{mcp.status.toolCount} tools</span>
-              </>
-            )}
-          </div>
+      {/* Server status with restart */}
+      <McpStatusCard
+        status={mcp.status}
+        restarting={restarting}
+        onRestart={async () => {
+          setRestarting(true);
+          try { await apiFetch('/api/mcp/restart', { method: 'POST' }); } catch {}
+          const deadline = Date.now() + 60_000;
+          clearInterval(restartPollRef.current);
+          restartPollRef.current = setInterval(async () => {
+            if (Date.now() > deadline) { clearInterval(restartPollRef.current); setRestarting(false); return; }
+            try {
+              const s = await apiFetch<McpStatus>('/api/mcp/status', { timeout: 3000 });
+              if (s.running) { clearInterval(restartPollRef.current); setRestarting(false); mcp.refresh(); }
+            } catch {}
+          }, 3000);
+        }}
+        onRefresh={mcp.refresh}
+        m={m}
+      />
+
+      {/* MCP Config Viewer */}
+      {mcp.agents.length > 0 && (
+        <div>
+          <h3 className="text-sm font-medium text-foreground mb-3">MCP</h3>
+          <AgentConfigViewer
+            connectedAgents={connectedAgents}
+            detectedAgents={detectedAgents}
+            notFoundAgents={notFoundAgents}
+            currentAgent={currentAgent ?? null}
+            mcpStatus={mcp.status}
+            selectedAgent={effectiveSelected}
+            onSelectAgent={(key) => setSelectedAgent(key)}
+            transport={transport}
+            onTransportChange={setTransport}
+            copied={copied}
+            onCopy={async (snippet) => {
+              const ok = await copyToClipboard(snippet);
+              if (ok) { setCopied(true); setTimeout(() => setCopied(false), 2000); }
+            }}
+            m={m}
+          />
         </div>
       )}
 
-      {/* Skills (full CRUD — search, edit, delete, create, language switch) */}
+      {/* Skills */}
       <div>
         <h3 className="text-sm font-medium text-foreground mb-3">{m?.skillsTitle ?? 'Skills'}</h3>
         <SkillsSection t={t} />
@@ -57,3 +103,169 @@ export function McpTab({ t }: McpTabProps) {
     </div>
   );
 }
+
+/* ── MCP Status Card ── */
+
+function McpStatusCard({ status, restarting, onRestart, onRefresh, m }: {
+  status: McpStatus | null;
+  restarting: boolean;
+  onRestart: () => void;
+  onRefresh: () => void;
+  m: Record<string, any> | undefined;
+}) {
+  if (!status) return null;
+  return (
+    <div className="rounded-xl border border-border bg-card p-4 flex items-center justify-between">
+      <div className="flex items-center gap-2.5 text-xs">
+        {restarting ? (
+          <>
+            <Loader2 size={12} className="animate-spin" style={{ color: 'var(--amber)' }} />
+            <span style={{ color: 'var(--amber)' }}>{m?.restarting ?? 'Restarting...'}</span>
+          </>
+        ) : (
+          <>
+            <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${status.running ? 'bg-success' : 'bg-muted-foreground'}`} />
+            <span className="text-foreground font-medium">
+              {status.running ? (m?.running ?? 'Running') : (m?.stopped ?? 'Stopped')}
+            </span>
+            {status.running && (
+              <>
+                <span className="text-muted-foreground">·</span>
+                <span className="font-mono text-muted-foreground">{status.endpoint}</span>
+                <span className="text-muted-foreground">·</span>
+                <span className="text-muted-foreground">{status.toolCount} tools</span>
+              </>
+            )}
+          </>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        {!status.running && !restarting && (
+          <button onClick={onRestart}
+            className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg font-medium text-white transition-colors"
+            style={{ background: 'var(--amber)' }}>
+            <RotateCcw size={12} /> {m?.restart ?? 'Restart'}
+          </button>
+        )}
+        <button onClick={onRefresh}
+          className="p-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+          <RefreshCw size={12} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ── Agent Config Viewer (dropdown + snippet) ── */
+
+function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, currentAgent, mcpStatus, selectedAgent, onSelectAgent, transport, onTransportChange, copied, onCopy, m }: {
+  connectedAgents: AgentInfo[];
+  detectedAgents: AgentInfo[];
+  notFoundAgents: AgentInfo[];
+  currentAgent: AgentInfo | null;
+  mcpStatus: McpStatus | null;
+  selectedAgent: string;
+  onSelectAgent: (key: string) => void;
+  transport: 'stdio' | 'http';
+  onTransportChange: (t: 'stdio' | 'http') => void;
+  copied: boolean;
+  onCopy: (snippet: string) => void;
+  m: Record<string, any> | undefined;
+}) {
+  const snippet = useMemo(
+    () => currentAgent ? generateSnippet(currentAgent, mcpStatus, transport) : null,
+    [currentAgent, mcpStatus, transport]
+  );
+
+  return (
+    <div className="rounded-xl border border-border bg-card p-4 space-y-3">
+      {/* Agent selector */}
+      <div className="relative">
+        <select
+          value={selectedAgent}
+          onChange={(e) => onSelectAgent(e.target.value)}
+          className="w-full appearance-none px-3 py-2 pr-8 text-xs rounded-lg border border-border bg-background text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        >
+          {connectedAgents.length > 0 && (
+            <optgroup label={m?.connectedGroup ?? 'Connected'}>
+              {connectedAgents.map(a => (
+                <option key={a.key} value={a.key}>
+                  ✓ {a.name} — {a.transport ?? 'stdio'} · {a.scope ?? 'global'}
+                </option>
+              ))}
+            </optgroup>
+          )}
+          {detectedAgents.length > 0 && (
+            <optgroup label={m?.detectedGroup ?? 'Detected (not configured)'}>
+              {detectedAgents.map(a => (
+                <option key={a.key} value={a.key}>
+                  ○ {a.name} — {m?.notConfigured ?? 'not configured'}
+                </option>
+              ))}
+            </optgroup>
+          )}
+          {notFoundAgents.length > 0 && (
+            <optgroup label={m?.notFoundGroup ?? 'Not Installed'}>
+              {notFoundAgents.map(a => (
+                <option key={a.key} value={a.key}>
+                  · {a.name}
+                </option>
+              ))}
+            </optgroup>
+          )}
+        </select>
+        <ChevronDown size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+      </div>
+
+      {currentAgent && (
+        <>
+          {/* Transport toggle */}
+          <div className="flex items-center rounded-lg border border-border overflow-hidden w-fit">
+            <button
+              onClick={() => onTransportChange('stdio')}
+              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs transition-colors ${
+                transport === 'stdio' ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Monitor size={12} /> {m?.transportLocal ?? 'Local (stdio)'}
+            </button>
+            <button
+              onClick={() => onTransportChange('http')}
+              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs transition-colors ${
+                transport === 'http' ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Globe size={12} /> {m?.transportRemote ?? 'Remote (HTTP)'}
+            </button>
+          </div>
+
+          {/* Auth warning */}
+          {transport === 'http' && mcpStatus && !mcpStatus.authConfigured && (
+            <p className="flex items-center gap-1.5 text-xs" style={{ color: 'var(--amber)' }}>
+              <AlertCircle size={12} />
+              {m?.noAuthWarning ?? 'Auth not configured. Run `mindos token` to set up.'}
+            </p>
+          )}
+
+          {/* Snippet */}
+          {snippet && (
+            <>
+              <pre className="text-[11px] font-mono bg-muted/50 border border-border rounded-lg p-3 overflow-x-auto whitespace-pre select-all max-h-[240px] overflow-y-auto">
+                {snippet.displaySnippet}
+              </pre>
+              <div className="flex items-center gap-3 text-xs">
+                <button onClick={() => onCopy(snippet.snippet)}
+                  className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
+                  {copied ? <Check size={12} /> : <Copy size={12} />}
+                  {copied ? (m?.copied ?? 'Copied!') : (m?.copyConfig ?? 'Copy config')}
+                </button>
+                <span className="text-muted-foreground">→</span>
+                <span className="font-mono text-muted-foreground truncate text-2xs">{snippet.path}</span>
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/app/lib/i18n-en.ts

@@ -415,6 +415,8 @@ export const en = {
       mcpServer: 'MCP Server',
       running: 'Running',
       stopped: 'Not running',
+      restarting: 'Restarting...',
+      restart: 'Restart',
       onPort: (port: number) => `on :${port}`,
       refresh: 'Refresh',
       refreshing: 'Refreshing...',

package/app/lib/i18n-zh.ts

@@ -440,6 +440,8 @@ export const zh = {
       mcpServer: 'MCP 服务器',
       running: '运行中',
       stopped: '未运行',
+      restarting: '重启中...',
+      restart: '重启',
       onPort: (port: number) => `端口 :${port}`,
       refresh: '刷新',
       refreshing: '刷新中...',

package/app/lib/mcp-agents.ts

@@ -3,6 +3,16 @@ import path from 'path';
 import os from 'os';
 import { execSync } from 'child_process';
 
+/** Parse JSONC — strips single-line (//) and block comments before JSON.parse */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function parseJsonc(text: string): any {
+  // Strip single-line comments (not inside strings)
+  let stripped = text.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*$)/gm, (m, g) => g ? '' : m);
+  // Strip block comments
+  stripped = stripped.replace(/\/\*[\s\S]*?\*\//g, '');
+  return JSON.parse(stripped);
+}
+
 export function expandHome(p: string): string {
   return p.startsWith('~/') ? path.resolve(os.homedir(), p.slice(2)) : p;
 }
@@ -91,11 +101,11 @@ export const MCP_AGENTS: Record<string, AgentDef> = {
   'codebuddy': {
     name: 'CodeBuddy',
     project: null,
-    global: '~/.claude-internal/.claude.json',
+    global: '~/.codebuddy/mcp.json',
     key: 'mcpServers',
     preferredTransport: 'stdio',
-    presenceCli: 'claude-internal',
-    presenceDirs: ['~/.claude-internal/'],
+    presenceCli: 'codebuddy',
+    presenceDirs: ['~/.codebuddy/'],
   },
   'iflow-cli': {
     name: 'iFlow CLI',
@@ -227,7 +237,7 @@ export function detectInstalled(agentKey: string): { installed: boolean; scope?:
         }
       } else {
         // JSON format (default)
-        const config = JSON.parse(content);
+        const config = parseJsonc(content);
         const servers = config[agent.key];
         if (servers?.mindos) {
           const entry = servers.mindos;

package/bin/lib/mcp-install.js

@@ -2,7 +2,7 @@ import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { CONFIG_PATH } from './constants.js';
 import { bold, dim, cyan, green, red, yellow } from './colors.js';
-import { expandHome } from './utils.js';
+import { expandHome, parseJsonc } from './utils.js';
 import { MCP_AGENTS, detectAgentPresence } from './mcp-agents.js';
 
 export { MCP_AGENTS };
@@ -194,7 +194,7 @@ export async function mcpInstall() {
           const abs = expandHome(cfgPath);
           if (!existsSync(abs)) continue;
           try {
-            const config = JSON.parse(readFileSync(abs, 'utf-8'));
+            const config = parseJsonc(readFileSync(abs, 'utf-8'));
             if (config[agent.key]?.mindos) { installed = true; break; }
           } catch {}
         }
@@ -313,7 +313,7 @@ export async function mcpInstall() {
     const absPath = expandHome(configPath);
     let config = {};
     if (existsSync(absPath)) {
-      try { config = JSON.parse(readFileSync(absPath, 'utf-8')); } catch {
+      try { config = parseJsonc(readFileSync(absPath, 'utf-8')); } catch {
         console.error(red(`  Failed to parse existing config: ${absPath} — skipping.`));
         continue;
       }

package/bin/lib/utils.js

@@ -37,3 +37,15 @@ export function npmInstall(cwd, extraFlags = '') {
 export function expandHome(p) {
   return p.startsWith('~/') ? resolve(homedir(), p.slice(2)) : p;
 }
+
+/**
+ * Parse JSONC — strips single-line and block comments before JSON.parse.
+ * VS Code-based editors (Cursor, Windsurf, Cline) use JSONC for config files.
+ */
+export function parseJsonc(text) {
+  // Strip single-line comments (not inside quoted strings)
+  let stripped = text.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*$)/gm, (m, g) => g ? '' : m);
+  // Strip block comments
+  stripped = stripped.replace(/\/\*[\s\S]*?\*\//g, '');
+  return JSON.parse(stripped);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geminilight/mindos",
-  "version": "0.5.49",
+  "version": "0.5.51",
   "description": "MindOS — Human-Agent Collaborative Mind System. Local-first knowledge base that syncs your mind to all AI Agents via MCP.",
   "keywords": [
     "mindos",

package/scripts/setup.js

@@ -598,6 +598,13 @@ function expandHomePath(p) {
   return p.startsWith('~/') ? resolve(homedir(), p.slice(2)) : p;
 }
 
+/** Parse JSONC (JSON with // and /* */ comments) — for VS Code-based editor configs */
+function parseJsonc(text) {
+  let stripped = text.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*$)/gm, (m, g) => g ? '' : m);
+  stripped = stripped.replace(/\/\*[\s\S]*?\*\//g, '');
+  return JSON.parse(stripped);
+}
+
 /** Detect if an agent already has mindos configured (for pre-selection). */
 function isAgentInstalled(agentKey) {
   const agent = MCP_AGENTS[agentKey];
@@ -607,7 +614,7 @@ function isAgentInstalled(agentKey) {
     const abs = expandHomePath(cfgPath);
     if (!existsSync(abs)) continue;
     try {
-      const config = JSON.parse(readFileSync(abs, 'utf-8'));
+      const config = parseJsonc(readFileSync(abs, 'utf-8'));
       if (config[agent.key]?.mindos) return true;
     } catch { /* ignore */ }
   }
@@ -720,7 +727,7 @@ async function runMcpInstallStep(mcpPort, authToken) {
     const abs = expandHomePath(cfgPath);
     try {
       let config = {};
-      if (existsSync(abs)) config = JSON.parse(readFileSync(abs, 'utf-8'));
+      if (existsSync(abs)) config = parseJsonc(readFileSync(abs, 'utf-8'));
       if (!config[agent.key]) config[agent.key] = {};
       config[agent.key].mindos = entry;
       const dir = resolve(abs, '..');
@@ -740,7 +747,7 @@ async function runMcpInstallStep(mcpPort, authToken) {
 /* ── Skill auto-install ────────────────────────────────────────────────────── */
 
 const UNIVERSAL_AGENTS = new Set([
-  'amp', 'cline', 'codex', 'cursor', 'gemini-cli',
+  'cline', 'codex', 'cursor', 'gemini-cli',
   'github-copilot', 'kimi-cli', 'opencode', 'warp',
 ]);
 const SKILL_UNSUPPORTED = new Set(['claude-desktop']);

package/app/components/settings/AgentsTab.tsx

@@ -1,240 +0,0 @@
-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>
-  );
-}