@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/SpaceInitToast.tsx

@@ -1,173 +0,0 @@
-'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

@@ -1,294 +0,0 @@
-'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

@@ -1,216 +0,0 @@
-'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>
-  );
-}