@geminilight/mindos 0.5.51 → 0.5.54

package/app/components/panels/AgentsPanel.tsx

@@ -1,20 +1,31 @@
 'use client';
 
-import { useState } from 'react';
-import { Loader2, RefreshCw, ChevronDown, ChevronRight, CheckCircle2, AlertCircle, Settings } from 'lucide-react';
+import { useState, useRef, useCallback } from 'react';
+import { Loader2, RefreshCw, ChevronDown, ChevronRight, Settings } from 'lucide-react';
 import { useMcpData } from '@/hooks/useMcpData';
 import { useLocale } from '@/lib/LocaleContext';
 import { Toggle } from '../settings/Primitives';
-import type { AgentInfo, SkillInfo } from '../settings/types';
+import type { SkillInfo } from '../settings/types';
 import PanelHeader from './PanelHeader';
+import { AgentsPanelHubNav } from './AgentsPanelHubNav';
+import { AgentsPanelAgentGroups } from './AgentsPanelAgentGroups';
 
 interface AgentsPanelProps {
   active: boolean;
   maximized?: boolean;
   onMaximize?: () => void;
+  /** Highlights the row for the agent whose detail is open in the right dock. */
+  selectedAgentKey?: string | null;
+  onOpenAgentDetail?: (key: string) => void;
 }
 
-export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPanelProps) {
+export default function AgentsPanel({
+  active,
+  maximized,
+  onMaximize,
+  selectedAgentKey = null,
+  onOpenAgentDetail,
+}: AgentsPanelProps) {
   const { t } = useLocale();
   const p = t.panels.agents;
   const mcp = useMcpData();
@@ -22,12 +33,23 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
   const [showNotDetected, setShowNotDetected] = useState(false);
   const [showBuiltinSkills, setShowBuiltinSkills] = useState(false);
 
+  const overviewRef = useRef<HTMLDivElement>(null);
+  const skillsRef = useRef<HTMLDivElement>(null);
+
   const handleRefresh = async () => {
     setRefreshing(true);
     await mcp.refresh();
     setRefreshing(false);
   };
 
+  const scrollTo = useCallback((el: HTMLElement | null) => {
+    el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }, []);
+
+  const openAdvancedConfig = () => {
+    window.dispatchEvent(new CustomEvent('mindos:open-settings', { detail: { tab: 'mcp' } }));
+  };
+
   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);
@@ -36,20 +58,45 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
   const builtinSkills = mcp.skills.filter(s => s.source === 'builtin');
   const activeSkillCount = mcp.skills.filter(s => s.enabled).length;
 
-  const openAdvancedConfig = () => {
-    window.dispatchEvent(new CustomEvent('mindos:open-settings', { detail: { tab: 'mcp' } }));
+  const listCopy = {
+    installing: p.installing,
+    install: p.install,
   };
 
+  const hubCopy = {
+    navOverview: p.navOverview,
+    navMcp: p.navMcp,
+    navSkills: p.navSkills,
+  };
+
+  const hub = (
+    <AgentsPanelHubNav
+      copy={hubCopy}
+      connectedCount={connected.length}
+      overviewRef={overviewRef}
+      skillsRef={skillsRef}
+      scrollTo={scrollTo}
+      openAdvancedConfig={openAdvancedConfig}
+    />
+  );
+
   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">
           {!mcp.loading && (
-            <span className="text-2xs text-muted-foreground">{connected.length} {p.connected}</span>
+            <span className="text-2xs text-muted-foreground">
+              {connected.length} {p.connected}
+            </span>
           )}
-          <button onClick={handleRefresh} disabled={refreshing}
-            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-50 transition-colors"
-            aria-label={p.refresh} title={p.refresh}>
+          <button
+            onClick={handleRefresh}
+            disabled={refreshing}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={p.refresh}
+            title={p.refresh}
+            type="button"
+          >
             <RefreshCw size={12} className={refreshing ? 'animate-spin' : ''} />
           </button>
         </div>
@@ -57,19 +104,14 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
 
       <div className="flex-1 overflow-y-auto min-h-0">
         {mcp.loading ? (
-          <div className="flex justify-center py-8"><Loader2 size={16} className="animate-spin text-muted-foreground" /></div>
-        ) : 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-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}
-            </button>
+          <div className="flex justify-center py-8">
+            <Loader2 size={16} className="animate-spin text-muted-foreground" />
           </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">
+        ) : mcp.agents.length === 0 && mcp.skills.length === 0 ? (
+          <div className="flex flex-col gap-2 py-4 px-0">
+            {hub}
+            <div className="mx-4 border-t border-border" />
+            <div ref={overviewRef} className="mx-3 rounded-lg border border-border bg-card/50 px-3 py-2.5 flex items-center justify-between scroll-mt-2">
               <span className="text-xs font-medium text-foreground">{p.mcpServer}</span>
               {mcp.status?.running ? (
                 <span className="flex items-center gap-1.5 text-[11px]">
@@ -84,121 +126,117 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
                 </span>
               )}
             </div>
+            <div ref={skillsRef} className="mx-3 scroll-mt-2 rounded-lg border border-dashed border-border px-3 py-3 text-center">
+              <p className="text-xs text-muted-foreground mb-2">{p.noAgents}</p>
+              <p className="text-2xs text-muted-foreground mb-3">{p.skillsEmptyHint}</p>
+              <button
+                onClick={handleRefresh}
+                type="button"
+                className="inline-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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <RefreshCw size={11} /> {p.retry}
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="pb-3">
+            {hub}
 
-            {/* 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}
-                      agentStatus="connected"
-                      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}
-                      agentStatus="detected"
-                      onInstallAgent={mcp.installAgent}
-                      t={p}
-                    />
-                  ))}
-                </div>
-              </section>
-            )}
+            <div className="mx-4 border-t border-border" />
 
-            {/* Not Found Agents (collapsed) */}
-            {notFound.length > 0 && (
-              <section>
-                <button onClick={() => setShowNotDetected(!showNotDetected)}
-                  className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 hover:text-foreground transition-colors">
-                  {showNotDetected ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-                  {p.sectionNotDetected} ({notFound.length})
-                </button>
-                {showNotDetected && (
-                  <div className="space-y-1.5">
-                    {notFound.map(agent => (
-                      <AgentCard
-                        key={agent.key}
-                        agent={agent}
-                        agentStatus="notFound"
-                        onInstallAgent={mcp.installAgent}
-                        t={p}
-                      />
-                    ))}
-                  </div>
+            <div className="px-3 py-3 space-y-4">
+              <div ref={overviewRef} className="rounded-lg border border-border bg-card/50 px-3 py-2.5 flex items-center justify-between scroll-mt-2">
+                <span className="text-xs font-medium text-foreground">{p.mcpServer}</span>
+                {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">:{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]">
+                    <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
+                    <span className="text-muted-foreground">{p.stopped}</span>
+                  </span>
                 )}
-              </section>
-            )}
+              </div>
 
-            {/* ── 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>
+              <AgentsPanelAgentGroups
+                connected={connected}
+                detected={detected}
+                notFound={notFound}
+                onOpenDetail={onOpenAgentDetail}
+                selectedAgentKey={selectedAgentKey}
+                mcp={mcp}
+                listCopy={listCopy}
+                showNotDetected={showNotDetected}
+                setShowNotDetected={setShowNotDetected}
+                p={{
+                  rosterLabel: p.rosterLabel,
+                  sectionConnected: p.sectionConnected,
+                  sectionDetected: p.sectionDetected,
+                  sectionNotDetected: p.sectionNotDetected,
+                }}
+              />
 
-                {/* 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 && (
+              <section ref={skillsRef} className="scroll-mt-2">
+                {mcp.skills.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 => (
+                    <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
+                        type="button"
+                        onClick={openAdvancedConfig}
+                        className="text-2xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+                      >
+                        {p.newSkill}
+                      </button>
+                    </div>
+
+                    {customSkills.length > 0 && (
+                      <div className="space-y-0.5 mb-2">
+                        {customSkills.map(skill => (
                           <SkillRow key={skill.name} skill={skill} onToggle={mcp.toggleSkill} />
                         ))}
                       </div>
                     )}
+
+                    {builtinSkills.length > 0 && (
+                      <>
+                        <button
+                          type="button"
+                          onClick={() => setShowBuiltinSkills(!showBuiltinSkills)}
+                          className="flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground transition-colors mb-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+                        >
+                          {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>
+                        )}
+                      </>
+                    )}
                   </>
+                ) : (
+                  <p className="text-2xs text-muted-foreground py-1">{p.skillsEmptyHint}</p>
                 )}
               </section>
-            )}
+            </div>
           </div>
         )}
       </div>
 
-      {/* Footer: Advanced Config link */}
       <div className="px-3 py-2 border-t border-border shrink-0">
         <button
+          type="button"
           onClick={openAdvancedConfig}
-          className="flex items-center gap-1.5 text-2xs text-muted-foreground hover:text-foreground transition-colors w-full"
+          className="flex items-center gap-1.5 text-2xs text-muted-foreground hover:text-foreground transition-colors w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
         >
           <Settings size={11} />
           {p.advancedConfig}
@@ -208,71 +246,11 @@ export default function AgentsPanel({ active, maximized, onMaximize }: AgentsPan
   );
 }
 
-/* ── 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 (compact — no snippet, config viewing is in Settings) ── */
-
-function AgentCard({ agent, agentStatus, onInstallAgent, t }: {
-  agent: AgentInfo;
-  agentStatus: 'connected' | 'detected' | 'notFound';
-  onInstallAgent: (key: string) => Promise<boolean>;
-  t: Record<string, any>;
-}) {
-  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 handleInstall = async () => {
-    setInstalling(true);
-    setResult(null);
-    const ok = await onInstallAgent(agent.key);
-    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 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>
-
-      {/* 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>
-      )}
-
-      {/* 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>
-      )}
+      <Toggle size="sm" checked={skill.enabled} onChange={v => onToggle(skill.name, v)} />
     </div>
   );
 }

package/app/components/panels/AgentsPanelAgentDetail.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { ChevronLeft, X, Loader2, CheckCircle2, AlertCircle, Copy, Check, Monitor, Globe } from 'lucide-react';
+import { generateSnippet } from '@/lib/mcp-snippets';
+import { copyToClipboard } from '@/lib/clipboard';
+import type { AgentInfo, McpStatus } from '../settings/types';
+import type { AgentsPanelAgentDetailStatus } from './agents-panel-resolve-status';
+
+export type { AgentsPanelAgentDetailStatus };
+
+export interface AgentsPanelAgentDetailCopy {
+  connected: string;
+  installing: string;
+  install: (name: string) => string;
+  copyConfig: string;
+  copied: string;
+  transportLocal: string;
+  transportRemote: string;
+  configPath: string;
+  notFoundDetail: string;
+  backToList: string;
+  /** Close button (dock header) — aria-label */
+  closeDetail?: string;
+  agentDetailTransport: string;
+  agentDetailSnippet: string;
+}
+
+export default function AgentsPanelAgentDetail({
+  agent,
+  agentStatus,
+  mcpStatus,
+  onBack,
+  onInstallAgent,
+  copy,
+  headerVariant = 'inline',
+}: {
+  agent: AgentInfo;
+  agentStatus: AgentsPanelAgentDetailStatus;
+  mcpStatus: McpStatus | null;
+  onBack: () => void;
+  onInstallAgent: (key: string) => Promise<boolean>;
+  copy: AgentsPanelAgentDetailCopy;
+  /** `dock`: right-side sheet title + X. `inline`: back chevron (legacy sidebar drill). */
+  headerVariant?: 'inline' | 'dock';
+}) {
+  const [installing, setInstalling] = useState(false);
+  const [result, setResult] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [transport, setTransport] = useState<'stdio' | 'http'>(() => agent.preferredTransport);
+  const [copied, setCopied] = useState(false);
+
+  const snippet = useMemo(() => {
+    if (agentStatus === 'notFound') return null;
+    return generateSnippet(agent, mcpStatus, transport);
+  }, [agent, mcpStatus, transport, agentStatus]);
+
+  const handleInstall = async () => {
+    setInstalling(true);
+    setResult(null);
+    const ok = await onInstallAgent(agent.key);
+    setResult(
+      ok
+        ? { type: 'success', text: `${agent.name} ${copy.connected}` }
+        : { type: 'error', text: 'Install failed' },
+    );
+    setInstalling(false);
+  };
+
+  const handleCopy = async () => {
+    if (!snippet) return;
+    const ok = await copyToClipboard(snippet.snippet);
+    if (ok) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const dot =
+    agentStatus === 'connected' ? 'bg-emerald-500' : agentStatus === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {headerVariant === 'dock' ? (
+        <header className="shrink-0 flex items-center justify-between gap-3 border-b border-border px-4 py-3 bg-card">
+          <div className="flex items-center gap-2.5 min-w-0">
+            <span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
+            <h2 className="text-sm font-semibold text-foreground truncate font-display">{agent.name}</h2>
+          </div>
+          <button
+            type="button"
+            onClick={onBack}
+            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
+            aria-label={copy.closeDetail ?? 'Close'}
+          >
+            <X size={16} />
+          </button>
+        </header>
+      ) : (
+        <div className="sticky top-0 z-10 flex items-center gap-2 border-b border-border bg-background/95 px-3 py-2.5 backdrop-blur-sm shrink-0">
+          <button
+            type="button"
+            onClick={onBack}
+            className="flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground rounded-md px-1 py-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
+          >
+            <ChevronLeft size={16} />
+            {copy.backToList}
+          </button>
+          <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dot}`} />
+          <span className="text-sm font-medium text-foreground truncate">{agent.name}</span>
+        </div>
+      )}
+
+      <div className="px-4 py-4 space-y-4 flex-1 min-h-0 overflow-y-auto">
+        {agentStatus === 'detected' && (
+          <div className="flex flex-wrap items-center gap-2">
+            <button
+              type="button"
+              onClick={handleInstall}
+              disabled={installing}
+              className="inline-flex items-center gap-1.5 px-3 py-2 text-xs rounded-lg font-medium text-[var(--amber-foreground)] disabled:opacity-50 bg-[var(--amber)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {installing ? <Loader2 size={14} className="animate-spin" /> : null}
+              {installing ? copy.installing : copy.install(agent.name)}
+            </button>
+            {result && (
+              <span
+                className={`flex items-center gap-1 text-2xs ${result.type === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-destructive'}`}
+              >
+                {result.type === 'success' ? <CheckCircle2 size={12} /> : <AlertCircle size={12} />}
+                {result.text}
+              </span>
+            )}
+          </div>
+        )}
+
+        {agentStatus === 'notFound' && (
+          <p className="text-sm text-muted-foreground leading-relaxed">{copy.notFoundDetail}</p>
+        )}
+
+        {agentStatus !== 'notFound' && snippet && (
+          <>
+            <div>
+              <p className="text-2xs font-medium text-muted-foreground uppercase tracking-wider mb-1">{copy.configPath}</p>
+              <p className="text-xs font-mono text-foreground break-all">{snippet.path}</p>
+            </div>
+
+            <div>
+              <p className="text-2xs font-medium text-muted-foreground uppercase tracking-wider mb-2">{copy.agentDetailTransport}</p>
+              <div className="flex items-center gap-1 p-0.5 rounded-lg bg-muted/40 w-fit">
+                <button
+                  type="button"
+                  onClick={() => setTransport('stdio')}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                    transport === 'stdio' ? 'bg-card shadow-sm text-foreground' : 'text-muted-foreground'
+                  }`}
+                >
+                  <Monitor size={13} />
+                  {copy.transportLocal}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setTransport('http')}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                    transport === 'http' ? 'bg-card shadow-sm text-foreground' : 'text-muted-foreground'
+                  }`}
+                >
+                  <Globe size={13} />
+                  {copy.transportRemote}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <p className="text-2xs font-medium text-muted-foreground uppercase tracking-wider mb-2">{copy.agentDetailSnippet}</p>
+              <pre className="text-[11px] font-mono bg-muted/50 border border-border rounded-lg p-3 overflow-x-auto whitespace-pre max-h-[min(320px,50vh)] overflow-y-auto select-all">
+                {snippet.displaySnippet}
+              </pre>
+            </div>
+
+            <button
+              type="button"
+              onClick={handleCopy}
+              className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {copied ? <Check size={14} /> : <Copy size={14} />}
+              {copied ? copy.copied : copy.copyConfig}
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}