@geminilight/mindos 0.5.29 → 0.5.32

package/app/components/HomeContent.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import Link from 'next/link';
-import { FileText, Table, Clock, Sparkles, Puzzle, ArrowRight, FilePlus, Search, ChevronDown, Compass } from 'lucide-react';
-import { useState, useEffect, useRef } from 'react';
+import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass } from 'lucide-react';
+import { useState, useEffect } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
 import { encodePath, relativeTime } from '@/lib/utils';
 import { getAllRenderers } from '@/lib/renderers/registry';
@@ -27,8 +27,6 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
   const { t } = useLocale();
   const [showAll, setShowAll] = useState(false);
   const [suggestionIdx, setSuggestionIdx] = useState(0);
-  const [hintId, setHintId] = useState<string | null>(null);
-  const hintTimer = useRef<ReturnType<typeof setTimeout>>(null);
 
   const suggestions = t.ask?.suggestions ?? [
     'Summarize this document',
@@ -44,15 +42,6 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
     return () => clearInterval(interval);
   }, [suggestions.length]);
 
-  // Cleanup hint timer on unmount
-  useEffect(() => () => { if (hintTimer.current) clearTimeout(hintTimer.current); }, []);
-
-  function showHint(id: string) {
-    if (hintTimer.current) clearTimeout(hintTimer.current);
-    setHintId(id);
-    hintTimer.current = setTimeout(() => setHintId(null), 3000);
-  }
-
   const existingSet = new Set(existingFiles ?? []);
 
   // Empty knowledge base → show onboarding
@@ -62,9 +51,9 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
 
   const formatTime = (mtime: number) => relativeTime(mtime, t.home.relativeTime);
 
-  // Only show renderers with an entryPath on the home page grid.
-  // Opt-in renderers (like Graph) have no entryPath and are toggled from the view toolbar.
+  // Only show renderers that are available (have entryPath + file exists) as quick-access chips
   const renderers = getAllRenderers().filter(r => r.entryPath);
+  const availablePlugins = renderers.filter(r => r.entryPath && existingSet.has(r.entryPath));
 
   const lastFile = recent[0];
 
@@ -166,89 +155,23 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
           </Link>
         </div>
 
-      </div>
-
-      {/* Plugins */}
-      {renderers.length > 0 && (
-        <section className="mb-12">
-          <div className="flex items-center gap-2 mb-4">
-            <Puzzle size={13} style={{ color: 'var(--amber)' }} />
-            <h2 className="text-xs font-semibold uppercase tracking-[0.08em] font-display" style={{ color: 'var(--muted-foreground)' }}>
-              {t.home.plugins}
-            </h2>
-            <span className="text-xs" style={{ color: 'var(--muted-foreground)', opacity: 0.65 }}>
-              {renderers.length}
-            </span>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 items-start">
-            {renderers.map((r) => {
-              const entryPath = r.entryPath ?? null;
-              const available = !entryPath || existingSet.has(entryPath);
-
-              if (!available) {
-                return (
-                  <button
-                    key={r.id}
-                    onClick={() => showHint(r.id)}
-                    className="group flex flex-col gap-1.5 px-3.5 py-3 rounded-lg border transition-all opacity-60 cursor-pointer hover:opacity-80 text-left"
-                    style={{ borderColor: 'var(--border)' }}
-                  >
-                    <div className="flex items-center gap-2.5">
-                      <span className="text-base leading-none shrink-0" suppressHydrationWarning>{r.icon}</span>
-                      <span className="text-xs font-semibold truncate font-display" style={{ color: 'var(--foreground)' }}>
-                        {r.name}
-                      </span>
-                    </div>
-                    <p className="text-xs leading-relaxed line-clamp-2" style={{ color: 'var(--muted-foreground)' }}>
-                      {r.description}
-                    </p>
-                    {hintId === r.id ? (
-                      <p className="text-2xs animate-in" style={{ color: 'var(--amber)' }} role="status">
-                        {(t.home.createToActivate ?? 'Create {file} to activate').replace('{file}', entryPath ?? '')}
-                      </p>
-                    ) : (
-                      <div className="flex flex-wrap gap-1">
-                        {r.tags.slice(0, 3).map(tag => (
-                          <span key={tag} className="text-2xs px-1.5 py-0.5 rounded-full" style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
-                            {tag}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </button>
-                );
-              }
-
-              return (
-                <Link
-                  key={r.id}
-                  href={entryPath ? `/view/${encodePath(entryPath)}` : '#'}
-                  className="group flex flex-col gap-1.5 px-3.5 py-3 rounded-lg border transition-all hover:border-amber-500/30 hover:bg-muted/50"
-                  style={{ borderColor: 'var(--border)' }}
-                >
-                  <div className="flex items-center gap-2.5">
-                    <span className="text-base leading-none shrink-0" suppressHydrationWarning>{r.icon}</span>
-                    <span className="text-xs font-semibold truncate font-display" style={{ color: 'var(--foreground)' }}>
-                      {r.name}
-                    </span>
-                  </div>
-                  <p className="text-xs leading-relaxed line-clamp-2" style={{ color: 'var(--muted-foreground)' }}>
-                    {r.description}
-                  </p>
-                  <div className="flex flex-wrap gap-1">
-                    {r.tags.slice(0, 3).map(tag => (
-                      <span key={tag} className="text-2xs px-1.5 py-0.5 rounded-full" style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                </Link>
-              );
-            })}
+        {/* Plugin quick-access chips — only show available plugins */}
+        {availablePlugins.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mt-3" style={{ paddingLeft: '1rem' }}>
+            {availablePlugins.map(r => (
+              <Link
+                key={r.id}
+                href={`/view/${encodePath(r.entryPath!)}`}
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 hover:bg-muted/60"
+                style={{ color: 'var(--muted-foreground)' }}
+              >
+                <span className="text-sm leading-none" suppressHydrationWarning>{r.icon}</span>
+                <span>{r.name}</span>
+              </Link>
+            ))}
           </div>
-        </section>
-      )}
+        )}
+      </div>
 
       {/* Recently modified — timeline feed */}
       {recent.length > 0 && (() => {

package/app/components/SidebarLayout.tsx

@@ -23,6 +23,7 @@ import { useAskModal } from '@/hooks/useAskModal';
 import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
 import { WalkthroughProvider } from './walkthrough';
+import McpProvider from '@/hooks/useMcpData';
 import type { Tab } from './settings/types';
 
 interface SidebarLayoutProps {
@@ -304,6 +305,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
 
   return (
     <WalkthroughProvider>
+    <McpProvider>
     <>
       {/* Skip link */}
       <a
@@ -471,6 +473,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         }
       `}</style>
     </>
+    </McpProvider>
     </WalkthroughProvider>
   );
 }

package/app/components/panels/AgentsPanel.tsx

@@ -1,10 +1,13 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { Loader2, RefreshCw, ChevronDown, ChevronRight, CheckCircle2, AlertCircle } from 'lucide-react';
-import { apiFetch } from '@/lib/api';
+import { useState, useCallback, useMemo } from 'react';
+import { Loader2, RefreshCw, ChevronDown, ChevronRight, CheckCircle2, AlertCircle, Copy, Check, Monitor, Globe, Settings } from 'lucide-react';
+import { useMcpData } from '@/hooks/useMcpData';
 import { useLocale } from '@/lib/LocaleContext';
-import type { McpStatus, AgentInfo } from '../settings/types';
+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 PanelHeader from './PanelHeader';
 
 interface AgentsPanelProps {
@@ -16,54 +19,39 @@ interface AgentsPanelProps {
 export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPanelProps) {
   const { t } = useLocale();
   const p = t.panels.agents;
-  const [agents, setAgents] = useState<AgentInfo[]>([]);
-  const [mcpStatus, setMcpStatus] = useState<McpStatus | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
+  const mcp = useMcpData();
   const [refreshing, setRefreshing] = useState(false);
   const [showNotDetected, setShowNotDetected] = useState(false);
-  const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
-
-  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);
+  const [expandedAgent, setExpandedAgent] = useState<string | null>(null);
+  const [showBuiltinSkills, setShowBuiltinSkills] = useState(false);
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    await mcp.refresh();
     setRefreshing(false);
-  }, []);
+  };
 
-  const prevActive = useRef(false);
-  useEffect(() => {
-    if (active && !prevActive.current) fetchAll();
-    prevActive.current = active;
-  }, [active, fetchAll]);
+  const toggleAgent = (key: string) => {
+    setExpandedAgent(prev => prev === key ? null : key);
+  };
 
-  useEffect(() => {
-    if (!active) { clearInterval(intervalRef.current); return; }
-    intervalRef.current = setInterval(() => fetchAll(true), 30_000);
-    return () => clearInterval(intervalRef.current);
-  }, [active, fetchAll]);
+  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);
 
-  const handleRefresh = () => { setRefreshing(true); fetchAll(); };
+  const customSkills = mcp.skills.filter(s => s.source === 'user');
+  const builtinSkills = mcp.skills.filter(s => s.source === 'builtin');
+  const activeSkillCount = mcp.skills.filter(s => s.enabled).length;
 
-  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);
+  const openAdvancedConfig = () => {
+    window.dispatchEvent(new CustomEvent('mindos:open-settings', { detail: { tab: 'mcp' } }));
+  };
 
   return (
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       <PanelHeader title={p.title} maximized={maximized} onMaximize={onMaximize}>
         <div className="flex items-center gap-1.5">
-          {!loading && (
+          {!mcp.loading && (
             <span className="text-2xs text-muted-foreground">{connected.length} {p.connected}</span>
           )}
           <button onClick={handleRefresh} disabled={refreshing}
@@ -75,11 +63,11 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
       </PanelHeader>
 
       <div className="flex-1 overflow-y-auto min-h-0">
-        {loading ? (
+        {mcp.loading ? (
           <div className="flex justify-center py-8"><Loader2 size={16} className="animate-spin text-muted-foreground" /></div>
-        ) : error && agents.length === 0 ? (
+        ) : mcp.agents.length === 0 && mcp.skills.length === 0 ? (
           <div className="flex flex-col items-center gap-2 py-8 text-center px-4">
-            <p className="text-xs text-destructive">{p.failedToLoad}</p>
+            <p className="text-xs text-muted-foreground">{p.noAgents}</p>
             <button onClick={handleRefresh}
               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 transition-colors">
               <RefreshCw size={11} /> {p.retry}
@@ -87,12 +75,14 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
           </div>
         ) : (
           <div className="px-3 py-3 space-y-4">
+            {/* MCP Server status — single line */}
             <div className="rounded-lg border border-border bg-card/50 px-3 py-2.5 flex items-center justify-between">
               <span className="text-xs font-medium text-foreground">{p.mcpServer}</span>
-              {mcpStatus?.running ? (
+              {mcp.status?.running ? (
                 <span className="flex items-center gap-1.5 text-[11px]">
                   <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
-                  <span className="text-emerald-600 dark:text-emerald-400">:{mcpStatus.port}</span>
+                  <span className="text-emerald-600 dark:text-emerald-400">:{mcp.status.port}</span>
+                  <span className="text-muted-foreground">· {mcp.status.toolCount} tools</span>
                 </span>
               ) : (
                 <span className="flex items-center gap-1.5 text-[11px]">
@@ -102,26 +92,49 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
               )}
             </div>
 
+            {/* Connected Agents */}
             {connected.length > 0 && (
               <section>
                 <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2">{p.sectionConnected} ({connected.length})</h3>
                 <div className="space-y-1.5">
-                  {connected.map(agent => (<AgentCard key={agent.key} agent={agent} status="connected" t={p} />))}
+                  {connected.map(agent => (
+                    <AgentCard
+                      key={agent.key}
+                      agent={agent}
+                      agentStatus="connected"
+                      mcpStatus={mcp.status}
+                      expanded={expandedAgent === agent.key}
+                      onToggle={() => toggleAgent(agent.key)}
+                      onInstallAgent={mcp.installAgent}
+                      t={p}
+                    />
+                  ))}
                 </div>
               </section>
             )}
 
+            {/* Detected Agents */}
             {detected.length > 0 && (
               <section>
                 <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2">{p.sectionDetected} ({detected.length})</h3>
                 <div className="space-y-1.5">
                   {detected.map(agent => (
-                    <AgentCard key={agent.key} agent={agent} status="detected" onInstalled={() => fetchAll()} t={p} />
+                    <AgentCard
+                      key={agent.key}
+                      agent={agent}
+                      agentStatus="detected"
+                      mcpStatus={mcp.status}
+                      expanded={expandedAgent === agent.key}
+                      onToggle={() => toggleAgent(agent.key)}
+                      onInstallAgent={mcp.installAgent}
+                      t={p}
+                    />
                   ))}
                 </div>
               </section>
             )}
 
+            {/* Not Found Agents (collapsed) */}
             {notFound.length > 0 && (
               <section>
                 <button onClick={() => setShowNotDetected(!showNotDetected)}
@@ -131,90 +144,223 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
                 </button>
                 {showNotDetected && (
                   <div className="space-y-1.5">
-                    {notFound.map(agent => (<AgentCard key={agent.key} agent={agent} status="notFound" t={p} />))}
+                    {notFound.map(agent => (
+                      <AgentCard
+                        key={agent.key}
+                        agent={agent}
+                        agentStatus="notFound"
+                        mcpStatus={mcp.status}
+                        expanded={expandedAgent === agent.key}
+                        onToggle={() => toggleAgent(agent.key)}
+                        onInstallAgent={mcp.installAgent}
+                        t={p}
+                      />
+                    ))}
                   </div>
                 )}
               </section>
             )}
 
-            {agents.length === 0 && (
-              <p className="text-xs text-muted-foreground text-center py-4">{p.noAgents}</p>
+            {/* ── Skills Section ── */}
+            {mcp.skills.length > 0 && (
+              <section>
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
+                    {p.skillsTitle} <span className="normal-case font-normal">{activeSkillCount} {p.skillsActive}</span>
+                  </h3>
+                  <button
+                    onClick={openAdvancedConfig}
+                    className="text-2xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {p.newSkill}
+                  </button>
+                </div>
+
+                {/* Custom skills */}
+                {customSkills.length > 0 && (
+                  <div className="space-y-0.5 mb-2">
+                    {customSkills.map(skill => (
+                      <SkillRow key={skill.name} skill={skill} onToggle={mcp.toggleSkill} />
+                    ))}
+                  </div>
+                )}
+
+                {/* Built-in skills (collapsed) */}
+                {builtinSkills.length > 0 && (
+                  <>
+                    <button
+                      onClick={() => setShowBuiltinSkills(!showBuiltinSkills)}
+                      className="flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground transition-colors mb-1"
+                    >
+                      {showBuiltinSkills ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+                      {p.builtinSkills} ({builtinSkills.length})
+                    </button>
+                    {showBuiltinSkills && (
+                      <div className="space-y-0.5">
+                        {builtinSkills.map(skill => (
+                          <SkillRow key={skill.name} skill={skill} onToggle={mcp.toggleSkill} />
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+              </section>
             )}
           </div>
         )}
       </div>
 
+      {/* Footer: Advanced Config link */}
       <div className="px-3 py-2 border-t border-border shrink-0">
-        <p className="text-2xs text-muted-foreground/60">{p.autoRefresh}</p>
+        <button
+          onClick={openAdvancedConfig}
+          className="flex items-center gap-1.5 text-2xs text-muted-foreground hover:text-foreground transition-colors w-full"
+        >
+          <Settings size={11} />
+          {p.advancedConfig}
+        </button>
       </div>
     </div>
   );
 }
 
+/* ── Skill Row ── */
+
+function SkillRow({ skill, onToggle }: { skill: SkillInfo; onToggle: (name: string, enabled: boolean) => void }) {
+  return (
+    <div className="flex items-center justify-between gap-2 px-2 py-1.5 rounded-md hover:bg-muted/30 transition-colors">
+      <span className="text-xs text-foreground truncate">{skill.name}</span>
+      <Toggle
+        size="sm"
+        checked={skill.enabled}
+        onChange={(v) => onToggle(skill.name, v)}
+      />
+    </div>
+  );
+}
+
 /* ── Agent Card ── */
 
-function AgentCard({ agent, status, onInstalled, t }: {
+function AgentCard({ agent, agentStatus, mcpStatus, expanded, onToggle, onInstallAgent, t }: {
   agent: AgentInfo;
-  status: 'connected' | 'detected' | 'notFound';
-  onInstalled?: () => void;
+  agentStatus: 'connected' | 'detected' | 'notFound';
+  mcpStatus: McpStatus | null;
+  expanded: boolean;
+  onToggle: () => void;
+  onInstallAgent: (key: string, opts?: { scope?: string; transport?: string }) => Promise<boolean>;
   t: Record<string, any>;
 }) {
-  const [expanded, setExpanded] = useState(false);
+  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 = status === 'connected' ? 'bg-emerald-500' : status === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
+  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);
-    try {
-      const res = await apiFetch<{ results: Array<{ key: string; ok: boolean; error?: string }> }>('/api/mcp/install', {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ agents: [{ key: agent.key, scope: agent.hasProjectScope ? 'project' : 'global', transport: agent.preferredTransport }], transport: 'auto' }),
-      });
-      const r = res.results?.[0];
-      if (r?.ok) { setResult({ type: 'success', text: `${agent.name} ${t.connected}` }); setTimeout(() => onInstalled?.(), 1500); }
-      else { setResult({ type: 'error', text: r?.error ?? 'Install failed' }); }
-    } catch { setResult({ type: 'error', text: 'Network error' }); }
+    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' });
+    }
     setInstalling(false);
   };
 
   return (
     <div className="rounded-lg border border-border/60 bg-card/30 overflow-hidden">
-      <div className="px-3 py-2 flex items-center justify-between gap-2">
+      {/* 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>
-          {status === 'connected' && agent.transport && (
+          {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>
-        {status === 'detected' && (
-          <button onClick={() => setExpanded(v => !v)}
-            className="flex items-center gap-1 px-2 py-0.5 text-2xs rounded-md bg-amber-500/10 text-amber-600 dark:text-amber-400 hover:bg-amber-500/20 transition-colors shrink-0">
-            {t.connect}
-            {expanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
-          </button>
-        )}
-      </div>
-      {status === 'detected' && expanded && (
-        <div className="px-3 pb-2.5 pt-1 border-t border-border/40 space-y-2">
-          <div className="flex items-center justify-between text-2xs text-muted-foreground">
-            <span>Transport: <span className="font-medium text-foreground">{agent.preferredTransport}</span></span>
-            <span>Scope: <span className="font-medium text-foreground">{agent.hasProjectScope ? 'project' : 'global'}</span></span>
+        {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>
-          <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>
+
+          {/* No auth warning for HTTP */}
+          {transport === 'http' && mcpStatus && !mcpStatus.authConfigured && (
+            <p className="text-2xs" style={{ color: 'var(--amber)' }}>{t.noAuthWarning}</p>
           )}
+
+          {/* 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>
+
+          {/* 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>
       )}
     </div>