@geminilight/mindos 0.6.28 → 0.6.29

package/app/components/agents/AgentsPanelA2aTab.tsx

@@ -0,0 +1,445 @@
+'use client';
+
+import { useState } from 'react';
+import { Clock, Globe, Loader2, Network, RefreshCw, Trash2, Wifi, WifiOff, Zap } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import type { RemoteAgent, DelegationRecord } from '@/lib/a2a/types';
+import type { AcpRegistryEntry } from '@/lib/acp/types';
+import { useDelegationHistory } from '@/hooks/useDelegationHistory';
+import { useAcpRegistry } from '@/hooks/useAcpRegistry';
+import { useAcpDetection } from '@/hooks/useAcpDetection';
+import { openAskModal } from '@/hooks/useAskModal';
+import DiscoverAgentModal from './DiscoverAgentModal';
+
+interface AgentsPanelA2aTabProps {
+  agents: RemoteAgent[];
+  discovering: boolean;
+  error: string | null;
+  onDiscover: (url: string) => Promise<RemoteAgent | null>;
+  onRemove: (id: string) => void;
+}
+
+export default function AgentsPanelA2aTab({
+  agents,
+  discovering,
+  error,
+  onDiscover,
+  onRemove,
+}: AgentsPanelA2aTabProps) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+  const [showModal, setShowModal] = useState(false);
+  const { delegations } = useDelegationHistory(true);
+  const acp = useAcpRegistry();
+
+  const isEmpty = agents.length === 0 && !acp.loading && acp.agents.length === 0;
+
+  return (
+    <div className="space-y-5">
+      {/* Header + Discover button */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-sm font-medium text-foreground">{p.a2aTabTitle}</h2>
+        <button
+          type="button"
+          onClick={() => setShowModal(true)}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-foreground text-background hover:bg-foreground/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Globe size={12} />
+          {p.a2aDiscover}
+        </button>
+      </div>
+
+      {/* Unified empty state when both A2A and ACP are empty */}
+      {isEmpty ? (
+        <NetworkEmptyState
+          onDiscover={() => setShowModal(true)}
+          onBrowseRegistry={acp.retry}
+        />
+      ) : (
+        <>
+          {/* Remote A2A agent list */}
+          {agents.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-8 text-center">
+              <div className="w-12 h-12 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto mb-3">
+                <Globe size={20} className="text-muted-foreground/50" aria-hidden="true" />
+              </div>
+              <p className="text-sm font-medium text-muted-foreground mb-1">{p.a2aTabEmpty}</p>
+              <p className="text-xs text-muted-foreground/70 leading-relaxed max-w-xs mx-auto">
+                {p.a2aTabEmptyHint}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {agents.map((agent) => (
+                <RemoteAgentRow key={agent.id} agent={agent} onRemove={onRemove} removeCopy={p.a2aRemoveAgent} skillsCopy={p.a2aSkills} />
+              ))}
+            </div>
+          )}
+
+          {/* ACP Registry section */}
+          <AcpRegistrySection />
+
+          {/* Recent Delegations */}
+          <DelegationHistorySection delegations={delegations} />
+        </>
+      )}
+
+      <DiscoverAgentModal
+        open={showModal}
+        onClose={() => setShowModal(false)}
+        onDiscover={onDiscover}
+        discovering={discovering}
+        error={error}
+      />
+    </div>
+  );
+}
+
+/* ────────── Network Empty State ────────── */
+
+function NetworkEmptyState({
+  onDiscover,
+  onBrowseRegistry,
+}: {
+  onDiscover: () => void;
+  onBrowseRegistry: () => void;
+}) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+
+  return (
+    <div className="rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-12 text-center">
+      <div className="w-14 h-14 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto mb-4">
+        <Network size={22} className="text-muted-foreground/50" aria-hidden="true" />
+      </div>
+      <p className="text-sm font-medium text-foreground mb-1">{p.networkEmptyTitle}</p>
+      <p className="text-xs text-muted-foreground/70 leading-relaxed max-w-sm mx-auto mb-5">
+        {p.networkEmptyDesc}
+      </p>
+      <div className="flex items-center justify-center gap-2.5">
+        <button
+          type="button"
+          onClick={onDiscover}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-foreground text-background hover:bg-foreground/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Globe size={12} />
+          {p.networkDiscoverBtn}
+        </button>
+        <button
+          type="button"
+          onClick={onBrowseRegistry}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Network size={12} />
+          {p.networkBrowseBtn}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ────────── ACP Registry Section ────────── */
+
+function AcpRegistrySection() {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+  const acp = useAcpRegistry();
+  const detection = useAcpDetection();
+
+  if (acp.loading) {
+    return (
+      <div className="space-y-2">
+        <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          {p.acpSectionTitle}
+        </h3>
+        <div className="flex items-center justify-center py-6 gap-2">
+          <Loader2 size={14} className="animate-spin text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">{p.acpLoading}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (acp.error) {
+    return (
+      <div className="space-y-2">
+        <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          {p.acpSectionTitle}
+        </h3>
+        <div className="rounded-lg border border-border/60 bg-card/80 p-4 text-center">
+          <p className="text-xs text-muted-foreground mb-2">{p.acpLoadFailed}</p>
+          <button
+            type="button"
+            onClick={acp.retry}
+            className="text-xs font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+          >
+            {p.acpRetry}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (acp.agents.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          {p.acpSectionTitle}
+        </h3>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => detection.refresh()}
+            disabled={detection.loading}
+            className="inline-flex items-center gap-1 px-2 py-1 text-2xs font-medium rounded-md 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 disabled:opacity-50"
+          >
+            <RefreshCw size={10} className={detection.loading ? 'animate-spin' : ''} />
+            {p.acpScan}
+          </button>
+          <span className="text-2xs text-muted-foreground/60">
+            {p.acpSectionDesc(acp.agents.length)}
+          </span>
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        {acp.agents.map((agent) => {
+          const installed = detection.installedAgents.find((d) => d.id === agent.id);
+          const notInstalled = detection.notInstalledAgents.find((d) => d.id === agent.id);
+          return (
+            <AcpAgentRow
+              key={agent.id}
+              agent={agent}
+              installed={installed ?? null}
+              installCmd={notInstalled?.installCmd ?? null}
+              detectionDone={!detection.loading}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* ────────── ACP Agent Row ────────── */
+
+const TRANSPORT_STYLES: Record<string, string> = {
+  npx: 'bg-[var(--amber)]/15 text-[var(--amber)]',
+  binary: 'bg-muted text-muted-foreground',
+  uvx: 'bg-[var(--success)]/15 text-[var(--success)]',
+  stdio: 'bg-muted text-muted-foreground',
+};
+
+function AcpAgentRow({ agent, installed, installCmd, detectionDone }: {
+  agent: AcpRegistryEntry;
+  installed: { id: string; name: string; binaryPath: string } | null;
+  installCmd: string | null;
+  detectionDone: boolean;
+}) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+  const transportLabels: Record<string, string> = {
+    npx: p.acpTransportNpx,
+    binary: p.acpTransportBinary,
+    uvx: p.acpTransportUvx,
+    stdio: p.acpTransportStdio,
+  };
+
+  const isReady = !!installed;
+
+  const handleUse = () => {
+    openAskModal(`Use ${agent.name} to help me with `);
+    window.dispatchEvent(
+      new CustomEvent('mindos:ask-with-agent', {
+        detail: { agentId: agent.id, agentName: agent.name },
+      }),
+    );
+  };
+
+  return (
+    <div className="group rounded-xl border border-border bg-card p-3 hover:border-border/80 transition-all duration-150">
+      <div className="flex items-center gap-2.5">
+        <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
+          <Network size={14} className="text-muted-foreground" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-foreground truncate">{agent.name}</p>
+          {agent.description && (
+            <p className="text-2xs text-muted-foreground truncate">{agent.description}</p>
+          )}
+        </div>
+        <span className={`text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 ${TRANSPORT_STYLES[agent.transport] ?? TRANSPORT_STYLES.stdio}`}>
+          {transportLabels[agent.transport] ?? agent.transport}
+        </span>
+        {detectionDone && (
+          <span className={`text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 ${
+            isReady
+              ? 'bg-[var(--success)]/15 text-[var(--success)]'
+              : 'bg-muted text-muted-foreground/60'
+          }`}>
+            {isReady ? p.acpReady : p.acpNotInstalled}
+          </span>
+        )}
+        <button
+          type="button"
+          disabled={!isReady}
+          onClick={handleUse}
+          className={`inline-flex items-center gap-1 px-2 py-1 text-2xs font-medium rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+            isReady
+              ? 'border-[var(--amber)] text-[var(--amber)] hover:bg-[var(--amber)]/10 cursor-pointer'
+              : 'border-border text-muted-foreground/50 cursor-not-allowed'
+          }`}
+          title={
+            isReady
+              ? undefined
+              : installCmd
+                ? p.acpInstallHint(installCmd)
+                : p.acpComingSoon
+          }
+        >
+          {p.acpUseAgent}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ────────── Delegation History Section ────────── */
+
+function DelegationHistorySection({ delegations }: { delegations: DelegationRecord[] }) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+        {p.a2aDelegations}
+      </h3>
+      {delegations.length === 0 ? (
+        <p className="text-xs text-muted-foreground/70 py-3">{p.a2aDelegationsEmpty}</p>
+      ) : (
+        <div className="space-y-1.5">
+          {delegations.map((d) => (
+            <DelegationRow key={d.id} record={d} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ────────── Delegation Row ────────── */
+
+const STATUS_STYLES: Record<DelegationRecord['status'], string> = {
+  pending: 'bg-muted text-muted-foreground',
+  completed: 'bg-[var(--success)]/15 text-[var(--success)]',
+  failed: 'bg-[var(--error)]/15 text-[var(--error)]',
+};
+
+function DelegationRow({ record }: { record: DelegationRecord }) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+  const statusLabels: Record<DelegationRecord['status'], string> = {
+    pending: p.a2aDelegationPending,
+    completed: p.a2aDelegationCompleted,
+    failed: p.a2aDelegationFailed,
+  };
+
+  const duration = record.completedAt
+    ? formatDuration(new Date(record.startedAt), new Date(record.completedAt))
+    : null;
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-card/80 px-3 py-2.5 flex items-center gap-2.5">
+      <div className="flex-1 min-w-0">
+        <p className="text-xs font-medium text-foreground truncate">{record.agentName}</p>
+        <p className="text-2xs text-muted-foreground truncate" title={record.message}>
+          {record.message.length > 60 ? record.message.slice(0, 60) + '...' : record.message}
+        </p>
+      </div>
+      <span className={`text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 ${STATUS_STYLES[record.status]}`}>
+        {statusLabels[record.status]}
+      </span>
+      {duration && (
+        <span className="text-2xs text-muted-foreground/60 shrink-0 flex items-center gap-0.5">
+          <Clock size={10} aria-hidden="true" />
+          {duration}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function formatDuration(start: Date, end: Date): string {
+  const ms = end.getTime() - start.getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const secs = Math.round(ms / 1000);
+  if (secs < 60) return `${secs}s`;
+  const mins = Math.floor(secs / 60);
+  const remSecs = secs % 60;
+  return remSecs > 0 ? `${mins}m ${remSecs}s` : `${mins}m`;
+}
+
+/* ────────── Remote Agent Row ────────── */
+
+function RemoteAgentRow({
+  agent,
+  onRemove,
+  removeCopy,
+  skillsCopy,
+}: {
+  agent: RemoteAgent;
+  onRemove: (id: string) => void;
+  removeCopy: string;
+  skillsCopy: string;
+}) {
+  const StatusIcon = agent.reachable ? Wifi : WifiOff;
+  const statusColor = agent.reachable
+    ? 'text-[var(--success)]'
+    : 'text-muted-foreground/50';
+
+  return (
+    <div className="group rounded-xl border border-border bg-card p-3.5 hover:border-[var(--amber)]/30 transition-all duration-150">
+      <div className="flex items-center gap-2.5">
+        <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
+          <Globe size={14} className="text-muted-foreground" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-foreground truncate">{agent.card.name}</p>
+          <p className="text-2xs text-muted-foreground truncate">{agent.card.description}</p>
+        </div>
+        <StatusIcon size={13} className={statusColor} aria-hidden="true" />
+        <button
+          type="button"
+          onClick={() => onRemove(agent.id)}
+          className="p-1.5 rounded-md text-muted-foreground/50 hover:text-error hover:bg-error/10 transition-colors opacity-0 group-hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100"
+          aria-label={removeCopy}
+          title={removeCopy}
+        >
+          <Trash2 size={12} />
+        </button>
+      </div>
+      {agent.card.skills.length > 0 && (
+        <div className="mt-2.5 pt-2 border-t border-border/40 flex items-center gap-1.5">
+          <Zap size={11} className="text-muted-foreground/60 shrink-0" aria-hidden="true" />
+          <span className="text-2xs text-muted-foreground">{skillsCopy}: {agent.card.skills.length}</span>
+          <div className="flex flex-wrap gap-1 ml-1">
+            {agent.card.skills.slice(0, 3).map((s) => (
+              <span
+                key={s.id}
+                className="text-2xs px-1.5 py-0.5 rounded bg-muted/80 text-muted-foreground border border-border/50"
+                title={s.description}
+              >
+                {s.name}
+              </span>
+            ))}
+            {agent.card.skills.length > 3 && (
+              <span className="text-2xs text-muted-foreground/60">+{agent.card.skills.length - 3}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/agents/SkillDetailPopover.tsx

@@ -5,7 +5,6 @@ import {
   BookOpen,
   Code2,
   Copy,
-  Check,
   FileText,
   Loader2,
   Plus,
@@ -19,6 +18,7 @@ import {
 } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
+import { toast } from '@/lib/toast';
 import type { SkillInfo } from '@/components/settings/types';
 import { Toggle } from '@/components/settings/Primitives';
 import { AgentAvatar, ConfirmDialog } from './AgentsPrimitives';
@@ -187,7 +187,6 @@ export default function SkillDetailPopover({
   const [nativeDesc, setNativeDesc] = useState<string>('');
   const [loading, setLoading] = useState(false);
   const [loadError, setLoadError] = useState(false);
-  const [copied, setCopied] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [deleteMsg, setDeleteMsg] = useState<string | null>(null);
@@ -228,7 +227,6 @@ export default function SkillDetailPopover({
       setContent(null);
       setNativeDesc('');
       setLoadError(false);
-      setCopied(false);
       setDeleteMsg(null);
       setDeleting(false);
       setToggleBusy(false);
@@ -250,10 +248,7 @@ export default function SkillDetailPopover({
   const handleCopy = useCallback(async () => {
     if (!content) return;
     const ok = await copyToClipboard(content);
-    if (ok) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    }
+    if (ok) toast.copy();
   }, [content]);
 
   const handleToggle = useCallback(async (enabled: boolean) => {
@@ -442,8 +437,8 @@ export default function SkillDetailPopover({
                       className="inline-flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1.5 py-0.5"
                       aria-label={copy.copyContent}
                     >
-                      {copied ? <Check size={11} /> : <Copy size={11} />}
-                      {copied ? copy.copied : copy.copyContent}
+                      <Copy size={11} />
+                      {copy.copyContent}
                     </button>
                   )}
                 </div>

package/app/components/agents/agents-content-model.ts

@@ -1,6 +1,6 @@
 import type { AgentInfo, SkillInfo } from '@/components/settings/types';
 
-export type AgentsDashboardTab = 'overview' | 'mcp' | 'skills';
+export type AgentsDashboardTab = 'overview' | 'mcp' | 'skills' | 'a2a';
 export type AgentResolvedStatus = 'connected' | 'detected' | 'notFound';
 export type SkillCapability = 'research' | 'coding' | 'docs' | 'ops' | 'memory';
 export type SkillSourceFilter = 'all' | 'builtin' | 'user';
@@ -24,7 +24,7 @@ export interface AgentBuckets {
 }
 
 export function parseAgentsTab(tab: string | undefined): AgentsDashboardTab {
-  if (tab === 'mcp' || tab === 'skills') return tab;
+  if (tab === 'mcp' || tab === 'skills' || tab === 'a2a') return tab;
   return 'overview';
 }
 

package/app/components/help/HelpContent.tsx

@@ -3,6 +3,8 @@
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { BookOpen, Rocket, Brain, Keyboard, HelpCircle, Bot, ChevronDown, Copy, Check } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
+import { copyToClipboard } from '@/lib/clipboard';
+import { toast } from '@/lib/toast';
 
 /* ── Collapsible Section ── */
 function Section({ id, icon, title, defaultOpen = false, children }: {
@@ -56,15 +58,13 @@ 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);
-    }).catch((err) => {
-      console.error('[HelpContent] Clipboard copy failed:', err);
-      // Show error feedback in UI
-      setCopied(true); // Reuse copied state to show error
-      setTimeout(() => setCopied(false), 2000);
+    const clean = text.replace(/^["“]|["”]$/g, '');
+    copyToClipboard(clean).then((ok) => {
+      if (ok) {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+        toast.copy();
+      }
     });
   }, [text]);
 

package/app/components/panels/AgentsPanel.tsx

@@ -70,6 +70,7 @@ export default function AgentsPanel({
     navOverview: p.navOverview,
     navMcp: p.navMcp,
     navSkills: p.navSkills,
+    navNetwork: p.navNetwork,
   };
 
   const hub = (

package/app/components/panels/AgentsPanelAgentDetail.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { ChevronLeft, X, Loader2, CheckCircle2, AlertCircle, Copy, Check, Monitor, Globe } from 'lucide-react';
+import { ChevronLeft, X, Loader2, CheckCircle2, AlertCircle, Copy, Monitor, Globe } from 'lucide-react';
+import { toast } from '@/lib/toast';
 import { generateSnippet } from '@/lib/mcp-snippets';
 import { copyToClipboard } from '@/lib/clipboard';
 import type { AgentInfo, McpStatus } from '../settings/types';
@@ -48,7 +49,6 @@ export default function AgentsPanelAgentDetail({
   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;
@@ -70,10 +70,7 @@ export default function AgentsPanelAgentDetail({
   const handleCopy = async () => {
     if (!snippet) return;
     const ok = await copyToClipboard(snippet.snippet);
-    if (ok) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
+    if (ok) toast.copy();
   };
 
   const dot =
@@ -183,8 +180,8 @@ export default function AgentsPanelAgentDetail({
               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}
+              <Copy size={14} />
+              {copy.copyConfig}
             </button>
           </>
         )}

package/app/components/panels/AgentsPanelHubNav.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import { usePathname, useSearchParams } from 'next/navigation';
-import { LayoutDashboard, Server, Zap } from 'lucide-react';
+import { Globe, LayoutDashboard, Server, Zap } from 'lucide-react';
 import { PanelNavRow } from './PanelNavRow';
 
 type HubCopy = {
   navOverview: string;
   navMcp: string;
   navSkills: string;
+  navNetwork: string;
 };
 
 export function AgentsPanelHubNav({
@@ -43,6 +44,12 @@ export function AgentsPanelHubNav({
         href="/agents?tab=skills"
         active={inAgentsRoute && tab === 'skills'}
       />
+      <PanelNavRow
+        icon={<Globe size={14} className={inAgentsRoute && tab === 'a2a' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+        title={copy.navNetwork}
+        href="/agents?tab=a2a"
+        active={inAgentsRoute && tab === 'a2a'}
+      />
     </div>
   );
 }

package/app/components/panels/EchoPanel.tsx

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation';
 import { UserRound, Bookmark, Sun, History, Brain } from 'lucide-react';
 import PanelHeader from './PanelHeader';
 import { PanelNavRow } from './PanelNavRow';
+import EchoSidebarStats from './EchoSidebarStats';
 import { useLocale } from '@/lib/LocaleContext';
 import { ECHO_SEGMENT_HREF, ECHO_SEGMENT_ORDER, type EchoSegment } from '@/lib/echo-segments';
 
@@ -30,7 +31,7 @@ export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelPr
   return (
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       <PanelHeader title={e.title} maximized={maximized} onMaximize={onMaximize} />
-      <div className="flex-1 overflow-y-auto min-h-0">
+      <div className="flex-1 overflow-y-auto min-h-0 flex flex-col">
         <div className="flex flex-col gap-0.5 py-1.5">
           {ECHO_SEGMENT_ORDER.map((segment) => {
             const row = rowBySegment[segment];
@@ -41,6 +42,9 @@ export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelPr
             );
           })}
         </div>
+        <div className="mt-auto">
+          <EchoSidebarStats />
+        </div>
       </div>
     </div>
   );