@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/SpaceInitToast.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useState, useEffect, useCallback, useTransition } from 'react';
+import { Sparkles, Check, Undo2, X } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useLocale } from '@/lib/stores/locale-store';
+import { encodePath } from '@/lib/utils';
+import { revertSpaceInitAction } from '@/lib/actions';
+
+type InitState = 'working' | 'done' | 'reverted' | 'error';
+
+interface InitInfo {
+  spaceName: string;
+  spacePath: string;
+  description: string;
+  state: InitState;
+}
+
+/**
+ * Global toast that shows AI initialization progress when a new space is created.
+ * Mounted in SidebarLayout so it persists across route transitions.
+ *
+ * States:
+ *  - working: ✨ progress animation
+ *  - done:    ✓ ready + [Review] [Discard] [×] — persists until user acts
+ *  - reverted: ↩ "reverted to template" — auto-dismiss 2s
+ *  - error:   silent dismiss
+ */
+export default function SpaceInitToast() {
+  const [info, setInfo] = useState<InitInfo | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [reverting, startRevert] = useTransition();
+  const router = useRouter();
+  const { t } = useLocale();
+
+  const dismiss = useCallback(() => {
+    setVisible(false);
+    setTimeout(() => setInfo(null), 200);
+  }, []);
+
+  const handleEvent = useCallback((e: Event) => {
+    const detail = (e as CustomEvent).detail as Partial<InitInfo>;
+    if (detail.state === 'working') {
+      setInfo(detail as InitInfo);
+      requestAnimationFrame(() => setVisible(true));
+    } else if (detail.state === 'done') {
+      setInfo((prev) => prev ? { ...prev, state: 'done' } : null);
+      router.refresh();
+    } else {
+      dismiss();
+    }
+  }, [router, dismiss]);
+
+  useEffect(() => {
+    window.addEventListener('mindos:ai-init', handleEvent);
+    return () => window.removeEventListener('mindos:ai-init', handleEvent);
+  }, [handleEvent]);
+
+  const handleReview = useCallback(() => {
+    if (!info) return;
+    dismiss();
+    router.push(`/view/${encodePath(info.spacePath + '/')}`);
+  }, [info, dismiss, router]);
+
+  const handleDiscard = useCallback(() => {
+    if (!info) return;
+    startRevert(async () => {
+      await revertSpaceInitAction(info.spacePath, info.spaceName, info.description);
+      setInfo((prev) => prev ? { ...prev, state: 'reverted' } : null);
+      router.refresh();
+      window.dispatchEvent(new Event('mindos:files-changed'));
+      setTimeout(dismiss, 2000);
+    });
+  }, [info, router, dismiss]);
+
+  const handleAccept = useCallback(() => {
+    dismiss();
+  }, [dismiss]);
+
+  if (!info) return null;
+
+  const h = t.home;
+  const { state } = info;
+  const isDone = state === 'done';
+  const isReverted = state === 'reverted';
+  const isWorking = state === 'working';
+
+  return (
+    <div
+      className={`fixed bottom-6 left-1/2 z-50 -translate-x-1/2 transition-all duration-200 ease-out ${
+        visible
+          ? 'opacity-100 translate-y-0 scale-100'
+          : 'opacity-0 translate-y-3 scale-[0.96] pointer-events-none'
+      }`}
+    >
+      <div
+        className="flex items-center gap-2.5 rounded-full border bg-card/95 backdrop-blur py-2 shadow-lg"
+        style={{
+          borderColor: 'color-mix(in srgb, var(--amber) 40%, var(--border))',
+          boxShadow: '0 8px 24px color-mix(in srgb, var(--amber) 12%, rgba(0,0,0,.2))',
+          paddingLeft: '0.75rem',
+          paddingRight: isDone ? '0.5rem' : '1rem',
+        }}
+      >
+        {/* Icon */}
+        <span
+          className={`inline-flex h-6 w-6 items-center justify-center rounded-full shrink-0 ${
+            isReverted
+              ? 'text-muted-foreground bg-muted'
+              : 'text-[var(--amber)] bg-[var(--amber-subtle)]'
+          } ${isWorking ? 'animate-pulse' : ''}`}
+        >
+          {isReverted ? <Undo2 size={12} /> : isDone ? <Check size={13} strokeWidth={2.5} /> : <Sparkles size={13} />}
+        </span>
+
+        {/* Text */}
+        <span className="text-xs text-foreground whitespace-nowrap select-none font-medium">
+          {isReverted
+            ? h.aiInitReverted(info.spaceName)
+            : isDone
+              ? h.aiInitReady(info.spaceName)
+              : <>{h.aiInitGenerating(info.spaceName)}<DotPulse /></>
+          }
+        </span>
+
+        {/* Action buttons — only in done state */}
+        {isDone && (
+          <div className="flex items-center gap-1 ml-1">
+            <button
+              type="button"
+              onClick={handleReview}
+              className="px-2.5 py-1 rounded-full text-2xs font-medium bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 transition-opacity focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {h.aiInitReview}
+            </button>
+            <button
+              type="button"
+              onClick={handleDiscard}
+              disabled={reverting}
+              className="px-2.5 py-1 rounded-full text-2xs font-medium bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            >
+              {h.aiInitDiscard}
+            </button>
+            <button
+              type="button"
+              onClick={handleAccept}
+              aria-label="Accept"
+              className="ml-0.5 inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <X size={12} />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DotPulse() {
+  return (
+    <span className="inline-flex gap-[2px] items-end h-[1em] ml-px">
+      <span className="w-[3px] h-[3px] rounded-full bg-muted-foreground animate-[dotBounce_1.2s_0ms_infinite]" />
+      <span className="w-[3px] h-[3px] rounded-full bg-muted-foreground animate-[dotBounce_1.2s_200ms_infinite]" />
+      <span className="w-[3px] h-[3px] rounded-full bg-muted-foreground animate-[dotBounce_1.2s_400ms_infinite]" />
+      <style>{`
+        @keyframes dotBounce {
+          0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
+          30% { opacity: 1; transform: translateY(-2px); }
+        }
+      `}</style>
+    </span>
+  );
+}

package/_standalone/components/SyncStatusBar.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { RefreshCw, CheckCircle2, XCircle } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/stores/locale-store';
+import type { SyncStatus } from './settings/types';
+import { timeAgo } from './settings/SyncTab';
+
+export type StatusLevel = 'synced' | 'unpushed' | 'conflicts' | 'error' | 'off' | 'syncing';
+
+export function getStatusLevel(status: SyncStatus | null, syncing: boolean): StatusLevel {
+  if (syncing) return 'syncing';
+  if (!status || !status.enabled) return 'off';
+  if (status.lastError) return 'error';
+  if (status.conflicts && status.conflicts.length > 0) return 'conflicts';
+  const unpushed = parseInt(status.unpushed || '0', 10);
+  if (unpushed > 0) return 'unpushed';
+  return 'synced';
+}
+
+export const DOT_COLORS: Record<StatusLevel, string> = {
+  synced: 'bg-success',
+  unpushed: 'bg-yellow-500',
+  conflicts: 'bg-error',       // #6 — conflicts more prominent than unpushed
+  error: 'bg-error',
+  off: 'bg-muted-foreground/40',
+  syncing: 'bg-blue-500',
+};
+
+interface SyncStatusBarProps {
+  collapsed?: boolean;
+  onOpenSyncSettings: () => void;
+}
+
+// #1 — Hook to force re-render every 60s so timeAgo stays fresh
+function useTick(intervalMs: number) {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setTick(n => n + 1), intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+}
+
+export function useSyncStatus() {
+  const [status, setStatus] = useState<SyncStatus | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const data = await apiFetch<SyncStatus>('/api/sync');
+      setStatus(data);
+    } catch {
+      setStatus(null);
+    } finally {
+      setLoaded(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+
+    const start = () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      intervalRef.current = setInterval(fetchStatus, 30_000);
+    };
+    const stop = () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    };
+
+    start();
+
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        fetchStatus();
+        start();
+      } else {
+        stop();
+      }
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+
+    return () => {
+      stop();
+      document.removeEventListener('visibilitychange', onVisibility);
+    };
+  }, [fetchStatus]);
+
+  return { status, loaded, fetchStatus };
+}
+
+/** Shared hook for the "Sync Now" action — avoids duplicating sync logic in SyncStatusBar & SyncPopover */
+export function useSyncAction(refreshFn: () => Promise<void>) {
+  const [syncing, setSyncing] = useState(false);
+  const [syncResult, setSyncResult] = useState<'success' | 'error' | null>(null);
+
+  const syncNow = useCallback(async () => {
+    if (syncing) return;
+    setSyncing(true);
+    setSyncResult(null);
+    try {
+      await apiFetch('/api/sync', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'now' }),
+      });
+      await refreshFn();
+      setSyncResult('success');
+    } catch {
+      await refreshFn();
+      setSyncResult('error');
+    } finally {
+      setSyncing(false);
+      setTimeout(() => setSyncResult(null), 2500);
+    }
+  }, [syncing, refreshFn]);
+
+  return { syncing, syncResult, syncNow };
+}
+
+/** Shared status label formatter — used by SyncStatusBar and SyncPopover */
+export function getSyncLabel(
+  level: StatusLevel,
+  status: SyncStatus | null,
+  syncT?: Record<string, string>,
+): { label: string; tooltip: string } {
+  switch (level) {
+    case 'syncing': {
+      const l = syncT?.syncing ?? 'Syncing...';
+      return { label: l, tooltip: l };
+    }
+    case 'synced': {
+      const l = `${syncT?.synced ?? 'Synced'} · ${timeAgo(status?.lastSync)}`;
+      return { label: l, tooltip: l };
+    }
+    case 'unpushed': {
+      const n = parseInt(status?.unpushed || '0', 10);
+      return {
+        label: `${n} ${syncT?.unpushed ?? 'awaiting push'}`,
+        tooltip: syncT?.unpushedHint ?? `${n} commit(s) not yet pushed to remote`,
+      };
+    }
+    case 'conflicts': {
+      const n = status?.conflicts?.length || 0;
+      return {
+        label: `${n} ${syncT?.conflicts ?? 'conflicts'}`,
+        tooltip: syncT?.conflictsHint ?? `${n} file(s) have merge conflicts — resolve in Settings > Sync`,
+      };
+    }
+    case 'error':
+      return {
+        label: syncT?.syncError ?? 'Sync error',
+        tooltip: status?.lastError || (syncT?.syncError ?? 'Sync error'),
+      };
+    default: {
+      const l = syncT?.syncOff ?? 'Sync off';
+      return { label: l, tooltip: l };
+    }
+  }
+}
+
+export default function SyncStatusBar({ collapsed, onOpenSyncSettings }: SyncStatusBarProps) {
+  const { status, loaded, fetchStatus } = useSyncStatus();
+  const { syncing, syncResult, syncNow } = useSyncAction(fetchStatus);
+  const [toast, setToast] = useState<string | null>(null);
+  const prevLevelRef = useRef<StatusLevel>('off');
+  const [hintDismissed, setHintDismissed] = useState(() => {
+    if (typeof window !== 'undefined') {
+      try { return !!localStorage.getItem('sync-hint-dismissed'); } catch (err) { console.warn("[SyncStatusBar] localStorage read failed:", err); }
+    }
+    return false;
+  });
+  const { t } = useLocale();
+
+  // #1 — refresh timeAgo display every 60s
+  useTick(60_000);
+
+  // Task G — detect first sync or recovery from error and show toast
+  useEffect(() => {
+    if (!loaded || syncing) return;
+    const currentLevel = getStatusLevel(status, false);
+    const prev = prevLevelRef.current;
+    if (prev !== currentLevel) {
+      const syncT = t.sidebar?.sync;
+      // Recovery: was error/conflicts, now synced
+      if ((prev === 'error' || prev === 'conflicts') && currentLevel === 'synced') {
+        setToast(syncT?.syncRestored ?? 'Sync restored');
+        setTimeout(() => setToast(null), 3000);
+      }
+      prevLevelRef.current = currentLevel;
+    }
+  }, [status, loaded, syncing, t]);
+
+  const handleSyncNow = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    syncNow();
+  };
+
+  if (!loaded || collapsed) return null;
+
+  const level = getStatusLevel(status, syncing);
+
+  // Task E — Show dismissible hint when sync is not configured
+  if (level === 'off') {
+    if (hintDismissed) return null;
+    const syncT = (t as any).sidebar?.sync;
+    return (
+      <div className="hidden md:flex items-center justify-between px-4 py-1.5 border-t border-border text-xs text-muted-foreground shrink-0 animate-in fade-in duration-300">
+        <button
+          onClick={onOpenSyncSettings}
+          className="flex items-center gap-2 min-w-0 hover:text-foreground transition-colors truncate"
+          title={syncT?.enableHint ?? 'Set up cross-device sync'}
+        >
+          <span className="w-2 h-2 rounded-full shrink-0 bg-muted-foreground/40" />
+          <span className="truncate">{syncT?.enableSync ?? 'Enable sync'} →</span>
+        </button>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            try { localStorage.setItem('sync-hint-dismissed', '1'); } catch (err) { console.warn("[SyncStatusBar] localStorage write dismissed:", err); }
+            setHintDismissed(true);
+          }}
+          className="p-1 rounded hover:bg-muted hover:text-foreground transition-colors shrink-0 ml-2 text-muted-foreground/50 hover:text-muted-foreground"
+          title="Dismiss"
+        >
+          <span className="text-2xs">✕</span>
+        </button>
+      </div>
+    );
+  }
+
+  const syncT = (t as any).sidebar?.sync;
+  const { label, tooltip } = getSyncLabel(level, status, syncT);
+
+  return (
+    // #3 — fade-in via animate-in
+    <div className="hidden md:flex items-center justify-between px-4 py-1.5 border-t border-border text-xs text-muted-foreground shrink-0 animate-in fade-in duration-300">
+      <button
+        onClick={onOpenSyncSettings}
+        className="flex items-center gap-2 min-w-0 hover:text-foreground transition-colors truncate"
+        title={tooltip}
+      >
+        <span
+          className={`w-2 h-2 rounded-full shrink-0 ${DOT_COLORS[level]} ${
+            level === 'syncing' ? 'animate-pulse' :
+            level === 'conflicts' ? 'animate-pulse' : ''   // #6 — conflicts pulse
+          }`}
+        />
+        <span className="truncate">{toast || label}</span>
+      </button>
+      <div className="flex items-center gap-1 shrink-0 ml-2">
+        {/* #2 — sync result flash */}
+        {(syncResult === 'success' || toast) && <CheckCircle2 size={12} className="text-success animate-in fade-in duration-200" />}
+        {syncResult === 'error' && <XCircle size={12} className="text-error animate-in fade-in duration-200" />}
+        <button
+          onClick={handleSyncNow}
+          disabled={syncing}
+          className="p-1 rounded hover:bg-muted hover:text-foreground transition-colors disabled:opacity-40"
+          title={syncT?.syncNow ?? 'Sync now'}
+        >
+          <RefreshCw size={12} className={syncing ? 'animate-spin' : ''} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// #7 — Minimal dot for collapsed sidebar
+export function SyncDot({ status, syncing }: { status: SyncStatus | null; syncing?: boolean }) {
+  const level = getStatusLevel(status, syncing ?? false);
+  if (level === 'off') return null;
+  return (
+    <span
+      className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${DOT_COLORS[level]} ${
+        level === 'conflicts' || level === 'error' ? 'animate-pulse' : ''
+      }`}
+    />
+  );
+}
+
+// #8 — Small dot for mobile header
+export function MobileSyncDot({ status, syncing }: { status: SyncStatus | null; syncing?: boolean }) {
+  const level = getStatusLevel(status, syncing ?? false);
+  if (level === 'off' || level === 'synced') return null;  // only show when attention needed
+  return (
+    <span
+      className={`w-1.5 h-1.5 rounded-full ${DOT_COLORS[level]} ${
+        level === 'conflicts' || level === 'error' ? 'animate-pulse' : ''
+      }`}
+    />
+  );
+}

package/_standalone/components/SystemPulse.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import { Bot, ChevronDown, ArrowRight } from 'lucide-react';
+import { useMcpAgents, useMcpStatus, useMcpLoading } from '@/lib/stores/mcp-store';
+import { useLocale } from '@/lib/stores/locale-store';
+import type { AgentInfo } from '@/components/settings/types';
+
+/* ── Constants ── */
+
+const COLLAPSE_KEY = 'mindos:pulse-collapsed';
+const VISIBLE_AGENTS = 3;
+
+/* ── Helpers ── */
+
+function sortAgents(agents: AgentInfo[]): AgentInfo[] {
+  return [...agents].sort((a, b) => {
+    const score = (ag: AgentInfo) => (ag.installed ? 3 : ag.present ? 2 : 0);
+    const diff = score(b) - score(a);
+    if (diff !== 0) return diff;
+    const ta = a.runtimeLastActivityAt ? new Date(a.runtimeLastActivityAt).getTime() : 0;
+    const tb = b.runtimeLastActivityAt ? new Date(b.runtimeLastActivityAt).getTime() : 0;
+    return tb - ta;
+  });
+}
+
+function activityAge(isoStr?: string): string | null {
+  if (!isoStr) return null;
+  const ms = Date.now() - new Date(isoStr).getTime();
+  if (ms < 60_000) return '<1m';
+  if (ms < 3600_000) return `${Math.floor(ms / 60_000)}m`;
+  if (ms < 86400_000) return `${Math.floor(ms / 3600_000)}h`;
+  return `${Math.floor(ms / 86400_000)}d`;
+}
+
+function initials(name: string): string {
+  const words = name.split(/[\s-]+/);
+  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+
+/* ── Main Component ── */
+
+export default function SystemPulse() {
+  const agents = useMcpAgents();
+  const status = useMcpStatus();
+  const loading = useMcpLoading();
+  const { t } = useLocale();
+  const pulse = t.pulse;
+  const [collapsed, setCollapsed] = useState(false);
+  const [showAll, setShowAll] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(COLLAPSE_KEY);
+    if (stored !== null) setCollapsed(stored === '1');
+  }, []);
+
+  const sorted = useMemo(() => sortAgents(agents), [agents]);
+  const connectedAgents = sorted.filter(a => a.installed);
+  const mcpRunning = status?.running ?? false;
+
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    setCollapsed(next);
+    localStorage.setItem(COLLAPSE_KEY, next ? '1' : '0');
+  };
+
+  if (loading) return (
+    <section className="mb-8 animate-pulse">
+      <div className="h-4 w-32 bg-muted rounded mb-3" />
+      <div className="h-16 bg-muted/50 rounded-xl" />
+    </section>
+  );
+
+  // ── State 0: No agents detected ──
+  if (agents.every(a => !a.present)) {
+    return (
+      <section className="mb-10">
+        {/* Use same title style as other sections */}
+        <div className="flex items-center gap-2.5 mb-5">
+          <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Bot size={13} /></div>
+          <h2 className="text-[13px] font-semibold text-foreground tracking-wide">{pulse.title}</h2>
+        </div>
+        <div className="rounded-xl border border-border/40 bg-card/30 p-5">
+          <div className="flex items-center gap-4">
+            <div className="w-10 h-10 rounded-full bg-[var(--amber-subtle)] flex items-center justify-center shrink-0">
+              <Bot size={18} className="text-[var(--amber)]" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground">{pulse.connectTitle}</p>
+              <p className="text-xs text-muted-foreground mt-0.5">{pulse.connectDesc}</p>
+            </div>
+            <Link
+              href="/agents"
+              className="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-xs font-medium bg-[var(--amber)] text-[var(--amber-foreground)] transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {pulse.connectAction}
+              <ArrowRight size={11} />
+            </Link>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  const totalConnected = connectedAgents.length;
+
+  // ── Collapsed ──
+  if (collapsed) {
+    return (
+      <section className="mb-10">
+        <button
+          onClick={toggleCollapsed}
+          className="w-full flex items-center gap-2 group cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+        >
+          <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Bot size={13} /></div>
+          <h2 className="text-[13px] font-semibold text-foreground tracking-wide">{pulse.title}</h2>
+          {totalConnected > 0 && (
+            <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[10px] font-semibold rounded-full bg-muted text-muted-foreground tabular-nums">{totalConnected}</span>
+          )}
+          {/* Inline status */}
+          <div className="flex items-center gap-2 ml-1">
+            {connectedAgents.slice(0, 3).map(agent => (
+              <span key={agent.key} className="inline-flex items-center gap-1 text-xs text-muted-foreground/60">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shrink-0" />
+                <span className="hidden sm:inline">{agent.name}</span>
+              </span>
+            ))}
+            {totalConnected > 3 && (
+              <span className="text-xs text-muted-foreground/40">+{totalConnected - 3}</span>
+            )}
+          </div>
+          <ChevronDown size={12} className="ml-auto text-muted-foreground/30 group-hover:text-[var(--amber)] transition-colors" />
+        </button>
+      </section>
+    );
+  }
+
+  // ── Expanded ──
+  const visibleAgents = showAll ? connectedAgents : connectedAgents.slice(0, VISIBLE_AGENTS);
+  const hiddenCount = connectedAgents.length - VISIBLE_AGENTS;
+
+  return (
+    <section className="mb-10">
+      {/* Section title — same pattern as Spaces / Recently Edited */}
+      <div className="flex items-center gap-2.5 mb-5">
+        <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Bot size={13} /></div>
+          <h2 className="text-[13px] font-semibold text-foreground tracking-wide">{pulse.title}</h2>
+          {totalConnected > 0 && (
+            <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[10px] font-semibold rounded-full bg-muted text-muted-foreground tabular-nums">{totalConnected}</span>
+        )}
+        {mcpRunning && (
+          <span className="inline-flex items-center gap-1 text-xs text-muted-foreground/50 ml-1">
+            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+            <span className="hidden sm:inline">{pulse.running}</span>
+          </span>
+        )}
+        <div className="flex items-center gap-2 ml-auto">
+          <Link
+            href="/agents"
+            className="text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity"
+          >
+            {pulse.manage}
+          </Link>
+          <button
+            onClick={toggleCollapsed}
+            className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground/40 hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label="Collapse"
+          >
+            <ChevronDown size={12} className="rotate-180" />
+          </button>
+        </div>
+      </div>
+
+      {/* Agent cards — grid layout */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
+        {visibleAgents.map(agent => {
+          const age = activityAge(agent.runtimeLastActivityAt);
+          return (
+            <Link
+              key={agent.key}
+              href={`/agents/${encodeURIComponent(agent.key)}`}
+              className="flex items-center gap-3 px-3.5 py-3 rounded-xl border border-border hover:border-[var(--amber)]/30 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 hover:bg-muted/30 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {/* Avatar */}
+              <div className="relative w-8 h-8 rounded-lg bg-[var(--amber)]/8 text-[var(--amber-text)] ring-1 ring-[var(--amber)]/15 flex items-center justify-center text-xs font-semibold font-display shrink-0">
+                {initials(agent.name)}
+                <span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-500 ring-[1.5px] ring-card" />
+              </div>
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <span className="text-sm font-medium text-foreground block truncate">{agent.name}</span>
+                <span className="text-xs text-muted-foreground/60 block">
+                  {pulse.active}
+                  {age ? ` · ${age}` : ''}
+                </span>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+
+      {/* Show more */}
+      {hiddenCount > 0 && (
+        <button
+          onClick={() => setShowAll(v => !v)}
+          className="flex items-center gap-1.5 mt-2 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+        >
+          <ChevronDown size={12} className={`transition-transform duration-200 ${showAll ? 'rotate-180' : ''}`} />
+          <span>{showAll ? pulse.showLess : pulse.showMore(hiddenCount)}</span>
+        </button>
+      )}
+    </section>
+  );
+}