@geminilight/mindos 0.6.27 → 0.6.29

package/app/components/help/HelpContent.tsx

@@ -3,9 +3,12 @@
 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({ icon, title, defaultOpen = false, children }: {
+function Section({ id, icon, title, defaultOpen = false, children }: {
+  id?: string;
   icon: React.ReactNode;
   title: string;
   defaultOpen?: boolean;
@@ -14,7 +17,7 @@ function Section({ icon, title, defaultOpen = false, children }: {
   const [open, setOpen] = useState(defaultOpen);
 
   return (
-    <div className="bg-card border border-border rounded-lg overflow-hidden">
+    <div id={id} className="bg-card border border-border rounded-lg overflow-hidden scroll-mt-4">
       <button
         onClick={() => setOpen(v => !v)}
         className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-muted/50 transition-colors focus-visible:ring-2 focus-visible:ring-ring"
@@ -55,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]);
 
@@ -144,8 +145,63 @@ export default function HelpContent() {
     { keys: '@', label: h.shortcuts.attachFile },
   ], [mod, h.shortcuts]);
 
+  const tocItems = useMemo(() => [
+    { id: 'what-is', label: h.whatIs.title },
+    { id: 'concepts', label: h.concepts.title },
+    { id: 'quick-start', label: h.quickStart.title },
+    { id: 'agent-usage', label: h.agentUsage.title },
+    { id: 'shortcuts', label: h.shortcutsTitle },
+    { id: 'faq', label: h.faq.title },
+  ], [h]);
+
+  const [activeSection, setActiveSection] = useState('');
+  useEffect(() => {
+    const ids = tocItems.map(i => i.id);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveSection(entry.target.id);
+            break;
+          }
+        }
+      },
+      { rootMargin: '-10% 0px -80% 0px', threshold: 0 },
+    );
+    const timer = setTimeout(() => {
+      for (const id of ids) {
+        const el = document.getElementById(id);
+        if (el) observer.observe(el);
+      }
+    }, 100);
+    return () => { clearTimeout(timer); observer.disconnect(); };
+  }, [tocItems]);
+
   return (
-    <div className="content-width px-4 md:px-6 py-8 md:py-12">
+    <div className="content-width px-4 md:px-6 py-8 md:py-12 relative">
+      {/* ── Floating TOC (wide screens only) ── */}
+      <nav className="hidden xl:block fixed top-24 w-44" style={{ left: 'calc(50% + 340px)' }} aria-label="Table of contents">
+        <ul className="space-y-1 border-l border-border pl-3">
+          {tocItems.map(item => (
+            <li key={item.id}>
+              <a
+                href={`#${item.id}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  document.getElementById(item.id)?.scrollIntoView({ behavior: 'smooth' });
+                }}
+                className={`block text-xs py-1 transition-colors ${
+                  activeSection === item.id
+                    ? 'text-[var(--amber)] font-medium border-l-2 border-[var(--amber)] -ml-[13px] pl-[11px]'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
       {/* ── Header ── */}
       <div className="mb-8">
         <div className="flex items-center gap-2 mb-1">
@@ -158,12 +214,12 @@ export default function HelpContent() {
       {/* ── Sections ── */}
       <div className="space-y-3">
         {/* 1. What is MindOS */}
-        <Section icon={<BookOpen size={18} />} title={h.whatIs.title} defaultOpen>
+        <Section id="what-is" icon={<BookOpen size={18} />} title={h.whatIs.title} defaultOpen>
           <p className="text-sm text-muted-foreground leading-relaxed">{h.whatIs.body}</p>
         </Section>
 
         {/* 2. Core Concepts */}
-        <Section icon={<Brain size={18} />} title={h.concepts.title} defaultOpen>
+        <Section id="concepts" icon={<Brain size={18} />} title={h.concepts.title} defaultOpen>
           <div className="space-y-4">
             <div>
               <p className="text-sm font-medium text-foreground">{h.concepts.spaceTitle}</p>
@@ -181,7 +237,7 @@ export default function HelpContent() {
         </Section>
 
         {/* 3. Quick Start */}
-        <Section icon={<Rocket size={18} />} title={h.quickStart.title} defaultOpen>
+        <Section id="quick-start" icon={<Rocket size={18} />} title={h.quickStart.title} defaultOpen>
           <div className="space-y-4">
             <StepCard step={1} title={h.quickStart.step1Title} desc={h.quickStart.step1Desc} />
             <StepCard step={2} title={h.quickStart.step2Title} desc={h.quickStart.step2Desc} />
@@ -190,7 +246,7 @@ export default function HelpContent() {
         </Section>
 
         {/* 4. Using MindOS with AI Agents */}
-        <Section icon={<Bot size={18} />} title={h.agentUsage.title} defaultOpen>
+        <Section id="agent-usage" icon={<Bot size={18} />} title={h.agentUsage.title} defaultOpen>
           <p className="text-sm text-muted-foreground leading-relaxed mb-4">{h.agentUsage.intro}</p>
 
           <div className="space-y-3">
@@ -215,7 +271,7 @@ export default function HelpContent() {
         </Section>
 
         {/* 5. Keyboard Shortcuts */}
-        <Section icon={<Keyboard size={18} />} title={h.shortcutsTitle}>
+        <Section id="shortcuts" icon={<Keyboard size={18} />} title={h.shortcutsTitle}>
           <div className="space-y-0">
             {shortcuts.map((s) => (
               <ShortcutRow key={s.keys} keys={s.keys} label={s.label} />
@@ -224,7 +280,7 @@ export default function HelpContent() {
         </Section>
 
         {/* 6. FAQ */}
-        <Section icon={<HelpCircle size={18} />} title={h.faq.title}>
+        <Section id="faq" icon={<HelpCircle size={18} />} title={h.faq.title}>
           <div>
             {h.faq.items.map((item, i) => (
               <FaqItem key={i} q={item.q} a={item.a} />

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/AgentsPanelAgentListRow.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
-import { Check, ChevronRight, Loader2, RotateCw } from 'lucide-react';
+import { Check, ChevronRight, Globe, Loader2, RotateCw } from 'lucide-react';
 import type { AgentInfo } from '../settings/types';
 import { AgentAvatar } from '../agents/AgentsPrimitives';
 
@@ -23,6 +23,8 @@ export default function AgentsPanelAgentListRow({
   detailHref,
   onInstallAgent,
   copy,
+  isA2aReady = false,
+  a2aTooltip,
 }: {
   agent: AgentInfo;
   agentStatus: AgentsPanelAgentListStatus;
@@ -30,6 +32,8 @@ export default function AgentsPanelAgentListRow({
   detailHref: string;
   onInstallAgent: (key: string) => Promise<boolean>;
   copy: AgentsPanelAgentListRowCopy;
+  isA2aReady?: boolean;
+  a2aTooltip?: string;
 }) {
   return (
     <div
@@ -51,6 +55,11 @@ export default function AgentsPanelAgentListRow({
             {agent.transport}
           </span>
         )}
+        {isA2aReady && (
+          <span title={a2aTooltip} className="shrink-0 text-muted-foreground/70">
+            <Globe size={12} />
+          </span>
+        )}
         <span className="flex-1 min-w-[4px]" />
         <ChevronRight
           size={15}

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>
   );

package/app/components/panels/EchoSidebarStats.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { TrendingUp, MessageSquare, AlertCircle } from 'lucide-react';
+import type { ContentChangeEvent } from '@/lib/fs';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface EchoStats {
+  fileCount: number;
+  unreadChanges: number;
+  sessionCount: number;
+}
+
+export default function EchoSidebarStats() {
+  const [stats, setStats] = useState<EchoStats | null>(null);
+  const [recentEvents, setRecentEvents] = useState<ContentChangeEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { t } = useLocale();
+
+  useEffect(() => {
+    const loadStats = async () => {
+      try {
+        setLoading(true);
+        const [monitoring, changes, sessions] = await Promise.all([
+          apiFetch<any>('/api/monitoring'),
+          apiFetch<any>('/api/changes?op=list&limit=3'),
+          apiFetch<any>('/api/ask-sessions'),
+        ]);
+
+        setStats({
+          fileCount: monitoring?.knowledgeBase?.fileCount ?? 0,
+          unreadChanges: changes?.events?.length ?? 0,
+          sessionCount: Array.isArray(sessions) ? sessions.length : 0,
+        });
+
+        setRecentEvents((changes?.events ?? []).slice(0, 3));
+      } catch (err) {
+        console.warn('[EchoSidebarStats] Failed to load stats:', err);
+        setStats({ fileCount: 0, unreadChanges: 0, sessionCount: 0 });
+        setRecentEvents([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadStats();
+    const interval = setInterval(loadStats, 10000); // Refresh every 10s
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading || !stats) {
+    return (
+      <div className="px-3 py-2 text-xs text-muted-foreground">
+        <div className="h-2 w-20 bg-muted rounded animate-pulse" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 px-3 py-3 border-t border-border">
+      {/* Quick Stats */}
+      <div className="grid grid-cols-3 gap-2">
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.fileCount}</div>
+          <div className="text-xs text-muted-foreground truncate">Files</div>
+        </div>
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.unreadChanges}</div>
+          <div className="text-xs text-muted-foreground truncate">Changes</div>
+        </div>
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.sessionCount}</div>
+          <div className="text-xs text-muted-foreground truncate">Chats</div>
+        </div>
+      </div>
+
+      {/* Recent Activity */}
+      {recentEvents.length > 0 && (
+        <div className="flex flex-col gap-1">
+          <div className="text-xs font-medium text-muted-foreground px-0.5">Recent</div>
+          {recentEvents.map((evt) => {
+            const relTime = formatRelativeTime(evt.ts);
+            const iconType = getIconForOp(evt.op);
+            const fileName = evt.path.split('/').pop() || evt.path;
+            return (
+              <div key={evt.id} className="flex items-start gap-2 p-1.5 rounded hover:bg-muted/40 transition-colors text-xs">
+                <span className="text-muted-foreground shrink-0 mt-0.5">{iconType}</span>
+                <div className="min-w-0 flex-1">
+                  <p className="text-foreground truncate font-medium" title={fileName}>{fileName}</p>
+                  <p className="text-muted-foreground text-2xs">{relTime}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getIconForOp(op: string): React.ReactNode {
+  switch (op) {
+    case 'create':
+      return <TrendingUp size={12} className="text-success" />;
+    case 'write':
+    case 'append':
+      return <AlertCircle size={12} className="text-foreground" />;
+    case 'delete':
+      return <AlertCircle size={12} className="text-destructive" />;
+    case 'rename':
+    case 'move':
+      return <MessageSquare size={12} className="text-muted-foreground" />;
+    default:
+      return <AlertCircle size={12} className="text-muted-foreground" />;
+  }
+}
+
+function formatRelativeTime(isoString: string): string {
+  try {
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  } catch {
+    return 'recently';
+  }
+}

package/app/components/settings/KnowledgeTab.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback, useSyncExternalStore, useRef } from 'react';
 import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive, RotateCcw } from 'lucide-react';
+import { toast } from '@/lib/toast';
 import type { KnowledgeTabProps } from './types';
 import { Field, Input, EnvBadge, SectionLabel, Toggle } from './Primitives';
 import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
@@ -96,7 +97,6 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordMasked = data.webPassword === '***set***';
 
-  const [copied, setCopied] = useState(false);
   const [resetting, setResetting] = useState(false);
   // revealed holds the plaintext token after regenerate, until user navigates away
   const [revealedToken, setRevealedToken] = useState<string | null>(null);
@@ -130,10 +130,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
     const text = revealedToken ?? data.authToken ?? '';
     if (!text) return;
     copyToClipboard(text).then((ok) => {
-      if (ok) {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      }
+      if (ok) toast.copy();
     });
   }
 
@@ -229,7 +226,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
                 className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
                 title={k.authTokenCopy}
               >
-                {copied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
+                <Copy size={13} />
               </button>
             )}
           </div>

package/app/components/settings/McpSkillsSection.tsx

@@ -3,8 +3,9 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   Loader2, ChevronDown, ChevronRight,
-  Plus, X, Search, Copy, Check,
+  Plus, X, Search, Copy,
 } from 'lucide-react';
+import { toast } from '@/lib/toast';
 import { apiFetch } from '@/lib/api';
 import { useMcpDataOptional } from '@/hooks/useMcpData';
 import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
@@ -398,14 +399,12 @@ function SkillCliHint({ agents, skillName, m }: {
   m: Record<string, any> | undefined;
 }) {
   const [selectedAgent, setSelectedAgent] = useState('claude-code');
-  const [copied, setCopied] = useState(false);
-
   const cmd = `npx skills add GeminiLight/MindOS --skill ${skillName} -a ${selectedAgent} -g -y`;
   const skillPath = `~/.agents/skills/${skillName}/SKILL.md`;
 
   const handleCopy = async () => {
     const ok = await copyToClipboard(cmd);
-    if (ok) { setCopied(true); setTimeout(() => setCopied(false), 2000); }
+    if (ok) toast.copy();
   };
 
   // Group agents: connected first, then detected, then not found
@@ -447,7 +446,7 @@ function SkillCliHint({ agents, skillName, m }: {
         </code>
         <button onClick={handleCopy}
           className="p-1.5 rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
-          {copied ? <Check size={11} /> : <Copy size={11} />}
+          <Copy size={11} />
         </button>
       </div>
 

package/app/components/settings/McpTab.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo, useRef, useEffect } from 'react';
-import { Loader2, Copy, Check, Monitor, Globe, AlertCircle, RotateCcw, RefreshCw } from 'lucide-react';
+import { Loader2, Copy, Monitor, Globe, AlertCircle, RotateCcw, RefreshCw } from 'lucide-react';
+import { toast } from '@/lib/toast';
 import { useMcpDataOptional } from '@/hooks/useMcpData';
 import { generateSnippet } from '@/lib/mcp-snippets';
 import { copyToClipboard } from '@/lib/clipboard';
@@ -22,7 +23,6 @@ export function McpTab({ t }: McpTabProps) {
   const [restarting, setRestarting] = useState(false);
   const [selectedAgent, setSelectedAgent] = useState('');
   const [transport, setTransport] = useState<'stdio' | 'http'>('stdio');
-  const [copied, setCopied] = useState(false);
   const restartPollRef = useRef<ReturnType<typeof setInterval>>(undefined);
 
   // Cleanup restart poll on unmount
@@ -99,10 +99,9 @@ export function McpTab({ t }: McpTabProps) {
             onSelectAgent={(key) => setSelectedAgent(key)}
             transport={transport}
             onTransportChange={setTransport}
-            copied={copied}
             onCopy={async (snippet) => {
               const ok = await copyToClipboard(snippet);
-              if (ok) { setCopied(true); setTimeout(() => setCopied(false), 2000); }
+              if (ok) toast.copy();
             }}
             m={m}
           />
@@ -177,7 +176,7 @@ function McpStatusCard({ status, restarting, onRestart, onRefresh, m }: {
 
 /* ── Agent Config Viewer (dropdown + snippet) ── */
 
-function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, currentAgent, mcpStatus, selectedAgent, onSelectAgent, transport, onTransportChange, copied, onCopy, m }: {
+function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, currentAgent, mcpStatus, selectedAgent, onSelectAgent, transport, onTransportChange, onCopy, m }: {
   connectedAgents: AgentInfo[];
   detectedAgents: AgentInfo[];
   notFoundAgents: AgentInfo[];
@@ -187,7 +186,6 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
   onSelectAgent: (key: string) => void;
   transport: 'stdio' | 'http';
   onTransportChange: (t: 'stdio' | 'http') => void;
-  copied: boolean;
   onCopy: (snippet: string) => void;
   m: Record<string, any> | undefined;
 }) {
@@ -292,8 +290,8 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
               <div className="flex items-center gap-3 text-xs">
                 <button onClick={() => onCopy(snippet.snippet)}
                   className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
-                  {copied ? <Check size={12} /> : <Copy size={12} />}
-                  {copied ? (m?.copied ?? 'Copied!') : (m?.copyConfig ?? 'Copy config')}
+                  <Copy size={12} />
+                  {m?.copyConfig ?? 'Copy config'}
                 </button>
                 <span className="text-muted-foreground">→</span>
                 <span className="font-mono text-muted-foreground truncate text-2xs">{snippet.path}</span>

package/app/components/setup/StepSecurity.tsx

@@ -1,13 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import { Copy, Check, RefreshCw } from 'lucide-react';
+import { Copy, RefreshCw } from 'lucide-react';
 import { Field, Input } from '@/components/settings/Primitives';
 import type { SetupMessages } from './types';
 
 export interface StepSecurityProps {
   authToken: string;
-  tokenCopied: boolean;
   onCopy: () => void;
   onGenerate: (seed?: string) => void;
   webPassword: string;
@@ -16,7 +15,7 @@ export interface StepSecurityProps {
 }
 
 export default function StepSecurity({
-  authToken, tokenCopied, onCopy, onGenerate, webPassword, onPasswordChange, s,
+  authToken, onCopy, onGenerate, webPassword, onPasswordChange, s,
 }: StepSecurityProps) {
   const [seed, setSeed] = useState('');
   const [showSeed, setShowSeed] = useState(false);
@@ -29,8 +28,8 @@ export default function StepSecurity({
           <button onClick={onCopy}
             className="flex items-center gap-1 px-3 py-2 text-xs rounded-lg border border-border hover:bg-muted transition-colors shrink-0"
             style={{ color: 'var(--foreground)' }}>
-            {tokenCopied ? <Check size={14} /> : <Copy size={14} />}
-            {tokenCopied ? s.copiedToken : s.copyToken}
+            <Copy size={14} />
+            {s.copyToken}
           </button>
           <button onClick={() => onGenerate()}
             aria-label={s.generateToken}

package/app/components/setup/index.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { Sparkles, Loader2, ChevronLeft, ChevronRight } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { copyToClipboard } from '@/lib/clipboard';
+import { toast } from '@/lib/toast';
 import type { SetupState, PortStatus, AgentEntry, AgentInstallStatus } from './types';
 import { TOTAL_STEPS, STEP_KB, STEP_PORTS, STEP_AGENTS } from './constants';
 import StepKB from './StepKB';
@@ -127,7 +128,6 @@ export default function SetupWizard() {
     webPassword: '',
   });
   const [homeDir, setHomeDir] = useState('~');
-  const [tokenCopied, setTokenCopied] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [completed, setCompleted] = useState(false);
   const [error, setError] = useState('');
@@ -230,15 +230,9 @@ export default function SetupWizard() {
   }, []);
 
   const copyToken = useCallback(() => {
-    copyToClipboard(state.authToken)
-      .then(() => {
-        setTokenCopied(true);
-        setTimeout(() => setTokenCopied(false), 2000);
-      })
-      .catch((err) => {
-        console.error('[Setup] Token copy failed:', err);
-        // Show error toast instead of success
-      });
+    copyToClipboard(state.authToken).then((ok) => {
+      if (ok) toast.copy();
+    });
   }, [state.authToken]);
 
   const checkPort = useCallback(async (port: number, which: 'web' | 'mcp') => {
@@ -384,7 +378,7 @@ export default function SetupWizard() {
         )}
         {step === 3 && (
           <StepSecurity
-            authToken={state.authToken} tokenCopied={tokenCopied}
+            authToken={state.authToken}
             onCopy={copyToken} onGenerate={generateToken}
             webPassword={state.webPassword} onPasswordChange={v => update('webPassword', v)}
             s={s}