@geminilight/mindos 0.6.27 → 0.6.29

package/app/components/SearchModal.tsx

@@ -1,22 +1,32 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
+import { useState, useEffect, useCallback, useRef, useLayoutEffect, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Search, X, FileText, Table } from 'lucide-react';
+import { Search, X, FileText, Table, Settings, RotateCcw, Moon, Sun, Bot, Compass, HelpCircle } from 'lucide-react';
 import { SearchResult } from '@/lib/types';
 import { encodePath } from '@/lib/utils';
 import { apiFetch } from '@/lib/api';
 import { useLocale } from '@/lib/LocaleContext';
+import { toast } from '@/lib/toast';
 
 interface SearchModalProps {
   open: boolean;
   onClose: () => void;
 }
 
+type PaletteTab = 'search' | 'actions';
+
+interface CommandAction {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  shortcut?: string;
+  execute: () => void;
+}
+
 /** Highlight matched text fragments in a snippet based on the query */
 function highlightSnippet(snippet: string, query: string): React.ReactNode {
   if (!query.trim()) return snippet;
-  // Split query into words and escape for regex
   const words = query.trim().split(/\s+/).filter(Boolean);
   const escaped = words.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
   const pattern = new RegExp(`(${escaped.join('|')})`, 'gi');
@@ -31,12 +41,74 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
   const [results, setResults] = useState<SearchResult[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [tab, setTab] = useState<PaletteTab>('search');
+  const [actionIndex, setActionIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const resultsRef = useRef<HTMLDivElement>(null);
+  const actionsRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const { t } = useLocale();
 
+  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+
+  const actions: CommandAction[] = useMemo(() => [
+    {
+      id: 'settings',
+      label: t.search.openSettings,
+      icon: <Settings size={15} />,
+      shortcut: '⌘,',
+      execute: () => { router.push('/settings'); onClose(); },
+    },
+    {
+      id: 'restart-walkthrough',
+      label: t.search.restartWalkthrough,
+      icon: <RotateCcw size={15} />,
+      execute: () => {
+        fetch('/api/setup', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ walkthroughStep: 0, walkthroughDismissed: false }),
+        }).then(() => {
+          toast.success(t.search.walkthroughRestarted);
+        }).catch(() => {
+          toast.error('Failed to restart walkthrough');
+        });
+        onClose();
+      },
+    },
+    {
+      id: 'toggle-dark-mode',
+      label: t.search.toggleDarkMode,
+      icon: isDark ? <Sun size={15} /> : <Moon size={15} />,
+      execute: () => {
+        const html = document.documentElement;
+        const nowDark = html.classList.contains('dark');
+        html.classList.toggle('dark', !nowDark);
+        try { localStorage.setItem('theme', nowDark ? 'light' : 'dark'); } catch { /* noop */ }
+        onClose();
+      },
+    },
+    {
+      id: 'go-agents',
+      label: t.search.goToAgents,
+      icon: <Bot size={15} />,
+      execute: () => { router.push('/agents'); onClose(); },
+    },
+    {
+      id: 'go-discover',
+      label: t.search.goToDiscover,
+      icon: <Compass size={15} />,
+      execute: () => { router.push('/discover'); onClose(); },
+    },
+    {
+      id: 'go-help',
+      label: t.search.goToHelp,
+      icon: <HelpCircle size={15} />,
+      execute: () => { router.push('/help'); onClose(); },
+    },
+  ], [t, router, onClose, isDark]);
+
   // Focus input when modal opens
   useEffect(() => {
     if (open) {
@@ -44,6 +116,8 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
       setQuery('');
       setResults([]);
       setSelectedIndex(0);
+      setTab('search');
+      setActionIndex(0);
     }
   }, [open]);
 
@@ -86,26 +160,51 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         onClose();
+      } else if (e.key === 'Tab') {
+        // Tab switches between Search/Actions tabs
+        e.preventDefault();
+        setTab(prev => prev === 'search' ? 'actions' : 'search');
+        setActionIndex(0);
+        setSelectedIndex(0);
       } else if (e.key === 'ArrowDown') {
         e.preventDefault();
-        setSelectedIndex(i => Math.min(i + 1, results.length - 1));
+        if (tab === 'search') {
+          setSelectedIndex(i => Math.min(i + 1, results.length - 1));
+        } else {
+          setActionIndex(i => Math.min(i + 1, actions.length - 1));
+        }
       } else if (e.key === 'ArrowUp') {
         e.preventDefault();
-        setSelectedIndex(i => Math.max(i - 1, 0));
+        if (tab === 'search') {
+          setSelectedIndex(i => Math.max(i - 1, 0));
+        } else {
+          setActionIndex(i => Math.max(i - 1, 0));
+        }
       } else if (e.key === 'Enter') {
-        if (results[selectedIndex]) navigate(results[selectedIndex]);
+        if (tab === 'search') {
+          if (results[selectedIndex]) navigate(results[selectedIndex]);
+        } else {
+          if (actions[actionIndex]) actions[actionIndex].execute();
+        }
       }
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [open, onClose, results, selectedIndex, navigate]);
+  }, [open, onClose, results, selectedIndex, navigate, tab, actions, actionIndex]);
 
   useLayoutEffect(() => {
-    const container = resultsRef.current;
-    if (!container) return;
-    const selected = container.children[selectedIndex] as HTMLElement | undefined;
-    selected?.scrollIntoView({ block: 'nearest' });
-  }, [selectedIndex]);
+    if (tab === 'search') {
+      const container = resultsRef.current;
+      if (!container) return;
+      const selected = container.children[selectedIndex] as HTMLElement | undefined;
+      selected?.scrollIntoView({ block: 'nearest' });
+    } else {
+      const container = actionsRef.current;
+      if (!container) return;
+      const selected = container.children[actionIndex] as HTMLElement | undefined;
+      selected?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [selectedIndex, actionIndex, tab]);
 
   if (!open) return null;
 
@@ -114,85 +213,140 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
       className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[15vh] modal-backdrop"
       onClick={(e) => e.target === e.currentTarget && onClose()}
     >
-      <div role="dialog" aria-modal="true" aria-label="Search" className="w-full md:max-w-xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl overflow-hidden max-h-[85vh] md:max-h-none flex flex-col">
+      <div role="dialog" aria-modal="true" aria-label="Command palette" className="w-full md:max-w-xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl overflow-hidden max-h-[85vh] md:max-h-none flex flex-col">
         {/* Mobile drag indicator */}
         <div className="flex justify-center pt-2 pb-0 md:hidden">
           <div className="w-8 h-1 rounded-full bg-muted-foreground/20" />
         </div>
-        {/* Search input */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
-          <Search size={16} className="text-muted-foreground shrink-0" />
-          <input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={handleChange}
-            placeholder={t.search.placeholder}
-            className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground text-sm outline-none"
-          />
-          {loading && (
-            <div className="w-4 h-4 border-2 border-muted-foreground/40 border-t-foreground rounded-full animate-spin shrink-0" />
-          )}
-          {!loading && query && (
-            <button onClick={() => { setQuery(''); setResults([]); inputRef.current?.focus(); }}>
-              <X size={14} className="text-muted-foreground hover:text-foreground" />
-            </button>
-          )}
-          <kbd className="hidden md:inline text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5 font-mono">ESC</kbd>
+
+        {/* Tab bar */}
+        <div className="flex items-center gap-1 px-4 pt-2 pb-0">
+          <button
+            onClick={() => { setTab('search'); setTimeout(() => inputRef.current?.focus(), 50); }}
+            className={`px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${
+              tab === 'search'
+                ? 'text-foreground border-b-2 border-[var(--amber)]'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {t.search.tabSearch}
+          </button>
+          <button
+            onClick={() => { setTab('actions'); setActionIndex(0); }}
+            className={`px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${
+              tab === 'actions'
+                ? 'text-foreground border-b-2 border-[var(--amber)]'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {t.search.tabActions}
+          </button>
         </div>
 
-        {/* Results */}
-        <div ref={resultsRef} className="max-h-[50vh] md:max-h-80 overflow-y-auto flex-1">
-          {results.length === 0 && query && !loading && (
-            <div className="px-4 py-8 text-center text-sm text-muted-foreground">{t.search.noResults}</div>
-          )}
-          {results.length === 0 && !query && (
-            <div className="px-4 py-8 text-center text-sm text-muted-foreground/60">{t.search.prompt}</div>
-          )}
-          {results.map((result, i) => {
-            const ext = result.path.endsWith('.csv') ? '.csv' : '.md';
-            const parts = result.path.split('/');
-            const fileName = parts[parts.length - 1];
-            const dirPath = parts.slice(0, -1).join('/');
-            return (
+        {/* Search tab */}
+        {tab === 'search' && (
+          <>
+            {/* Search input */}
+            <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+              <Search size={16} className="text-muted-foreground shrink-0" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={handleChange}
+                placeholder={t.search.placeholder}
+                className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground text-sm outline-none"
+              />
+              {loading && (
+                <div className="w-4 h-4 border-2 border-muted-foreground/40 border-t-foreground rounded-full animate-spin shrink-0" />
+              )}
+              {!loading && query && (
+                <button onClick={() => { setQuery(''); setResults([]); inputRef.current?.focus(); }}>
+                  <X size={14} className="text-muted-foreground hover:text-foreground" />
+                </button>
+              )}
+              <kbd className="hidden md:inline text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5 font-mono">ESC</kbd>
+            </div>
+
+            {/* Results */}
+            <div ref={resultsRef} className="max-h-[50vh] md:max-h-80 overflow-y-auto flex-1">
+              {results.length === 0 && query && !loading && (
+                <div className="px-4 py-8 text-center text-sm text-muted-foreground">{t.search.noResults}</div>
+              )}
+              {results.length === 0 && !query && (
+                <div className="px-4 py-8 text-center text-sm text-muted-foreground/60">{t.search.prompt}</div>
+              )}
+              {results.map((result, i) => {
+                const ext = result.path.endsWith('.csv') ? '.csv' : '.md';
+                const parts = result.path.split('/');
+                const fileName = parts[parts.length - 1];
+                const dirPath = parts.slice(0, -1).join('/');
+                return (
+                  <button
+                    key={result.path}
+                    onClick={() => navigate(result)}
+                    onMouseEnter={() => setSelectedIndex(i)}
+                    className={`
+                      w-full px-4 py-3 flex items-start gap-3 text-left transition-colors duration-75
+                      ${i === selectedIndex ? 'bg-muted' : 'hover:bg-muted/50'}
+                      ${i < results.length - 1 ? 'border-b border-border' : ''}
+                    `}
+                  >
+                    {ext === '.csv'
+                      ? <Table size={14} className="text-success shrink-0 mt-0.5" />
+                      : <FileText size={14} className="text-muted-foreground shrink-0 mt-0.5" />
+                    }
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-baseline gap-2 flex-wrap">
+                        <span className="text-sm text-foreground font-medium truncate" title={fileName}>{fileName}</span>
+                        {dirPath && (
+                          <span className="text-xs text-muted-foreground truncate" title={dirPath}>{dirPath}</span>
+                        )}
+                      </div>
+                      {result.snippet && (
+                        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 leading-relaxed" title={result.snippet}>
+                          {highlightSnippet(result.snippet, query)}
+                        </p>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Footer — desktop only */}
+            {results.length > 0 && (
+              <div className="hidden md:flex px-4 py-2 border-t border-border items-center gap-3 text-xs text-muted-foreground/60">
+                <span><kbd className="font-mono">↑↓</kbd> {t.search.navigate}</span>
+                <span><kbd className="font-mono">↵</kbd> {t.search.open}</span>
+                <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Actions tab */}
+        {tab === 'actions' && (
+          <div ref={actionsRef} className="max-h-[50vh] md:max-h-80 overflow-y-auto flex-1 py-1">
+            {actions.map((action, i) => (
               <button
-                key={result.path}
-                onClick={() => navigate(result)}
-                onMouseEnter={() => setSelectedIndex(i)}
+                key={action.id}
+                onClick={() => action.execute()}
+                onMouseEnter={() => setActionIndex(i)}
                 className={`
-                  w-full px-4 py-3 flex items-start gap-3 text-left transition-colors duration-75
-                  ${i === selectedIndex ? 'bg-muted' : 'hover:bg-muted/50'}
-                  ${i < results.length - 1 ? 'border-b border-border' : ''}
+                  w-full px-4 py-2.5 flex items-center gap-3 text-left transition-colors duration-75
+                  ${i === actionIndex ? 'bg-muted' : 'hover:bg-muted/50'}
                 `}
               >
-                {ext === '.csv'
-                  ? <Table size={14} className="text-success shrink-0 mt-0.5" />
-                  : <FileText size={14} className="text-muted-foreground shrink-0 mt-0.5" />
-                }
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-baseline gap-2 flex-wrap">
-                    <span className="text-sm text-foreground font-medium truncate" title={fileName}>{fileName}</span>
-                    {dirPath && (
-                      <span className="text-xs text-muted-foreground truncate" title={dirPath}>{dirPath}</span>
-                    )}
-                  </div>
-                  {result.snippet && (
-                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 leading-relaxed" title={result.snippet}>
-                      {highlightSnippet(result.snippet, query)}
-                    </p>
-                  )}
-                </div>
+                <span className="text-muted-foreground shrink-0">{action.icon}</span>
+                <span className="text-sm text-foreground flex-1">{action.label}</span>
+                {action.shortcut && (
+                  <kbd className="text-xs text-muted-foreground/60 font-mono border border-border rounded px-1.5 py-0.5">
+                    {action.shortcut}
+                  </kbd>
+                )}
               </button>
-            );
-          })}
-        </div>
-
-        {/* Footer — desktop only */}
-        {results.length > 0 && (
-          <div className="hidden md:flex px-4 py-2 border-t border-border items-center gap-3 text-xs text-muted-foreground/60">
-            <span><kbd className="font-mono">↑↓</kbd> {t.search.navigate}</span>
-            <span><kbd className="font-mono">↵</kbd> {t.search.open}</span>
-            <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>
+            ))}
           </div>
         )}
       </div>

package/app/components/agents/AgentDetailContent.tsx

@@ -2,9 +2,12 @@
 
 import Link from 'next/link';
 import { useCallback, useMemo, useState } from 'react';
-import { ArrowLeft, Server, Search, Trash2, Zap } from 'lucide-react';
+import { ArrowLeft, ChevronDown, Globe, Server, Search, Trash2, Zap } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { useLocale } from '@/lib/LocaleContext';
+import { toast } from '@/lib/toast';
 import { useMcpData } from '@/hooks/useMcpData';
+import { useA2aRegistry } from '@/hooks/useA2aRegistry';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
 import { generateSnippet } from '@/lib/mcp-snippets';
@@ -21,7 +24,9 @@ import SkillDetailPopover from './SkillDetailPopover';
 export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
   const { t } = useLocale();
   const a = t.agentsContent;
+  const p = t.panels.agents;
   const mcp = useMcpData();
+  const a2a = useA2aRegistry();
 
   const agent = useMemo(() => mcp.agents.find((item) => item.key === agentKey), [mcp.agents, agentKey]);
   const [skillQuery, setSkillQuery] = useState('');
@@ -31,7 +36,6 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
   const [editContent, setEditContent] = useState('');
   const [editError, setEditError] = useState<string | null>(null);
   const [saveBusy, setSaveBusy] = useState(false);
-  const [snippetCopied, setSnippetCopied] = useState(false);
   const [mcpBusy, setMcpBusy] = useState(false);
   const [mcpMessage, setMcpMessage] = useState<string | null>(null);
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
@@ -39,6 +43,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
   const [confirmMcpRemove, setConfirmMcpRemove] = useState<string | null>(null);
   const [mcpHint, setMcpHint] = useState<string | null>(null);
   const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
+  const [a2aOpen, setA2aOpen] = useState(false);
 
   const filteredSkills = useMemo(
     () =>
@@ -157,9 +162,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
 
   const handleCopySnippet = useCallback(async () => {
     const ok = await copyToClipboard(snippet.snippet);
-    if (!ok) return;
-    setSnippetCopied(true);
-    setTimeout(() => setSnippetCopied(false), 1200);
+    if (ok) toast.copy();
   }, [snippet.snippet]);
 
   const handleApplyMcpConfig = useCallback(async (scope: 'project' | 'global', transport: 'stdio' | 'http') => {
@@ -272,7 +275,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
                 onClick={() => void handleCopySnippet()}
                 disabled={false}
                 busy={false}
-                label={snippetCopied ? a.detail.mcpCopied : a.detail.mcpCopySnippet}
+                label={a.detail.mcpCopySnippet}
               />
             )}
             <ActionButton
@@ -358,6 +361,48 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
         </div>
       </section>
 
+      {/* ═══════════ A2A CAPABILITIES ═══════════ */}
+      <section className="rounded-xl border border-border bg-card overflow-hidden">
+        <button
+          type="button"
+          onClick={() => setA2aOpen(!a2aOpen)}
+          className="w-full flex items-center justify-between gap-2 px-4 py-3 text-left hover:bg-muted/20 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-expanded={a2aOpen}
+        >
+          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
+            <Globe size={12} className="text-muted-foreground/50" />
+            {p.a2aCapabilities}
+          </h2>
+          <ChevronDown
+            size={13}
+            className={cn('shrink-0 text-muted-foreground/50 transition-transform duration-200', a2aOpen && 'rotate-180')}
+            aria-hidden="true"
+          />
+        </button>
+        <div
+          className={cn(
+            'grid transition-[grid-template-rows] duration-250 ease-out',
+            a2aOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+          )}
+        >
+          <div className="overflow-hidden" {...(!a2aOpen && { inert: true } as React.HTMLAttributes<HTMLDivElement>)}>
+            <div className="px-4 pb-3 pt-1 space-y-2 border-t border-border/40">
+              <div className="flex items-baseline gap-2 px-0.5 min-w-0">
+                <span className="text-2xs text-muted-foreground/50 uppercase tracking-wider shrink-0 min-w-[60px]">{p.a2aStatus}</span>
+                <span className={`text-xs font-medium ${
+                  status === 'connected' ? 'text-[var(--success)]' : 'text-muted-foreground'
+                }`}>
+                  {status === 'connected' ? p.a2aConnected : p.a2aUnavailable}
+                </span>
+              </div>
+              {a2a.agents.length === 0 && (
+                <p className="text-2xs text-muted-foreground/50">{p.a2aNoRemoteHint}</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* ═══════════ SKILL ASSIGNMENTS ═══════════ */}
       <section className="rounded-xl border border-border bg-card p-4 space-y-3">
         <div className="flex flex-wrap items-center justify-between gap-2">

package/app/components/agents/AgentsContentPage.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import { toast } from '@/lib/toast';
 import { useLocale } from '@/lib/LocaleContext';
 import { useMcpData } from '@/hooks/useMcpData';
+import { useA2aRegistry } from '@/hooks/useA2aRegistry';
 import { copyToClipboard } from '@/lib/clipboard';
 import { generateSnippet } from '@/lib/mcp-snippets';
 import {
@@ -13,13 +15,20 @@ import {
 import AgentsOverviewSection from './AgentsOverviewSection';
 import AgentsMcpSection from './AgentsMcpSection';
 import AgentsSkillsSection from './AgentsSkillsSection';
+import AgentsPanelA2aTab from './AgentsPanelA2aTab';
 
 export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab }) {
   const { t } = useLocale();
   const a = t.agentsContent;
   const mcp = useMcpData();
-  const [copyState, setCopyState] = useState<string | null>(null);
+  const a2a = useA2aRegistry();
   const pageHeader = useMemo(() => {
+    if (tab === 'a2a') {
+      return {
+        title: a.navNetwork,
+        subtitle: a.a2aTabEmptyHint,
+      };
+    }
     if (tab === 'skills') {
       return {
         title: a.navSkills,
@@ -60,9 +69,7 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
     if (!agent) return;
     const snippet = generateSnippet(agent, mcp.status, agent.preferredTransport);
     const ok = await copyToClipboard(snippet.snippet);
-    if (!ok) return;
-    setCopyState(agentKey);
-    setTimeout(() => setCopyState(null), 1500);
+    if (ok) toast.copy();
   };
 
   return (
@@ -86,16 +93,27 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
           enabledSkillCount={enabledSkillCount}
           allAgents={mcp.agents}
           pulseCopy={a.workspacePulse}
+          a2aCount={a2a.agents.length}
         />
       )}
 
       {tab === 'mcp' && (
-        <AgentsMcpSection copy={{ ...a.mcp, status: a.status }} mcp={mcp} buckets={buckets} copyState={copyState} onCopySnippet={copySnippet} />
+        <AgentsMcpSection copy={{ ...a.mcp, status: a.status }} mcp={mcp} buckets={buckets} copyState={null} onCopySnippet={copySnippet} />
       )}
 
       {tab === 'skills' && (
         <AgentsSkillsSection copy={a.skills} mcp={mcp} buckets={buckets} />
       )}
+
+      {tab === 'a2a' && (
+        <AgentsPanelA2aTab
+          agents={a2a.agents}
+          discovering={a2a.discovering}
+          error={a2a.error}
+          onDiscover={a2a.discover}
+          onRemove={a2a.remove}
+        />
+      )}
     </div>
   );
 }

package/app/components/agents/AgentsOverviewSection.tsx

@@ -7,6 +7,7 @@ import {
   ArrowRight,
   Cable,
   ChevronDown,
+  Globe,
   Server,
   Zap,
 } from 'lucide-react';
@@ -63,6 +64,7 @@ export default function AgentsOverviewSection({
   enabledSkillCount,
   allAgents,
   pulseCopy,
+  a2aCount,
 }: {
   copy: OverviewCopy;
   buckets: AgentBuckets;
@@ -73,6 +75,7 @@ export default function AgentsOverviewSection({
   enabledSkillCount: number;
   allAgents: AgentInfo[];
   pulseCopy: PulseCopy;
+  a2aCount?: number;
 }) {
   const allHealthy = riskQueue.length === 0 && mcpRunning;
   const totalAgents = allAgents.length;
@@ -128,6 +131,14 @@ export default function AgentsOverviewSection({
             value={mcpRunning ? `:${mcpPort}` : '—'}
             tone={mcpRunning ? 'ok' : 'warn'}
           />
+          {a2aCount != null && (
+            <StatCell
+              icon={<Globe size={14} aria-hidden="true" />}
+              label={copy.a2aLabel as string ?? 'A2A'}
+              value={a2aCount}
+              tone={a2aCount > 0 ? 'ok' : 'muted'}
+            />
+          )}
         </div>
       </section>