@sleep2agi/agent-network-dashboard 0.4.4-preview.0 → 0.4.5-preview.1

package/app/components/HelpOverlay.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/** Help overlay — press `?` to see keyboard shortcuts.
+ *  Restrained: no animation noise, single column, all global keys in one
+ *  place. Closes on Esc or `?` again or click-outside.
+ */
+
+interface Shortcut {
+  keys: string[];
+  label: string;
+}
+
+const SHORTCUTS: { group: string; items: Shortcut[] }[] = [
+  {
+    group: 'Global',
+    items: [
+      { keys: ['⌘', 'K'], label: 'Open command palette (also Ctrl+K)' },
+      { keys: ['/'], label: 'Open command palette' },
+      { keys: ['?'], label: 'Toggle this help overlay' },
+      { keys: ['Esc'], label: 'Close any open modal' },
+    ],
+  },
+  {
+    group: 'Command palette',
+    items: [
+      { keys: ['↑', '↓'], label: 'Move selection' },
+      { keys: ['↵'], label: 'Activate selected command' },
+      { keys: ['type'], label: 'Filter — searches commands, agents, tasks' },
+    ],
+  },
+  {
+    group: 'Pages',
+    items: [
+      { keys: ['click', 'sidebar logo'], label: 'Back to Overview' },
+      { keys: ['Cmd+K', 'Go to agent X'], label: 'Jump straight to a node' },
+    ],
+  },
+];
+
+export function HelpOverlay() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      // `?` toggles — Shift+/ on US layout. Only when no input is focused.
+      if (e.key === '?' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
+        e.preventDefault();
+        setOpen(prev => !prev);
+        return;
+      }
+      if (e.key === 'Escape' && open) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Keyboard shortcuts"
+      className="anet-help fixed inset-0 z-[101] flex items-center justify-center px-4"
+      onClick={() => setOpen(false)}
+    >
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" aria-hidden />
+      <div
+        className="relative w-full max-w-md rounded-xl border border-[#2a2a4a] bg-[#0d0d1a] shadow-2xl shadow-black/40 overflow-hidden"
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-[#2a2a4a] px-4 py-2.5">
+          <div className="flex items-center gap-2 text-sm font-medium text-gray-200">
+            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" className="text-gray-500">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Keyboard shortcuts
+          </div>
+          <button
+            onClick={() => setOpen(false)}
+            aria-label="Close help"
+            className="text-gray-500 hover:text-gray-300 text-lg leading-none px-1"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="px-4 py-3 max-h-[70vh] overflow-y-auto">
+          {SHORTCUTS.map(g => (
+            <div key={g.group} className="mb-3 last:mb-0">
+              <div className="text-[10px] uppercase tracking-[0.12em] text-gray-600 mb-1.5">{g.group}</div>
+              <ul className="space-y-1.5">
+                {g.items.map((s, i) => (
+                  <li key={i} className="flex items-center gap-3 text-xs">
+                    <span className="flex items-center gap-1">
+                      {s.keys.map((k, ki) => (
+                        <kbd key={ki} className="text-[10px] font-mono border border-[#2a2a4a] rounded px-1.5 py-0.5 text-gray-400 bg-[#1a1a2a]/40">
+                          {k}
+                        </kbd>
+                      ))}
+                    </span>
+                    <span className="text-gray-400 flex-1">{s.label}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <div className="border-t border-[#2a2a4a] px-4 py-1.5 text-[10px] text-gray-600 flex items-center justify-between">
+          <span>Press <kbd className="font-mono">?</kbd> to toggle</span>
+          <span>or <kbd className="font-mono">esc</kbd> to close</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/LoadingSkeleton.tsx

@@ -1,42 +1,86 @@
 'use client';
 
+/**
+ * Loading skeleton — mirrors the actual Overview layout structure so the
+ * page doesn't appear to "shift" once data arrives. Uses the same
+ * `anet-skeleton-pulse` rhythm as the brand pulse (1.6s opacity drift,
+ * no scale, no blur, no glow) so the loading animation feels native to
+ * the rest of the dashboard rather than a generic spinner.
+ *
+ * Bars are theme-aware: anet-skeleton-bar (existing CSS shim resolves this to
+ * var(--bg-elevated) on light/mint), so light theme shows soft grey blocks
+ * on white cards and dark theme shows lighter blocks on navy cards.
+ */
 export function LoadingSkeleton() {
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-6 font-mono animate-pulse">
-      {/* Header skeleton */}
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <div className="h-7 w-48 bg-gray-800 rounded mb-2" />
-          <div className="h-4 w-64 bg-gray-800/60 rounded" />
-        </div>
-        <div className="flex gap-3">
-          {[1, 2, 3].map(i => (
-            <div key={i} className="w-[72px] h-[60px] bg-gray-800/40 rounded-lg border border-gray-800" />
-          ))}
+    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+      {/* KPI top strip — 4 cards matching StatsBar */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8 anet-skeleton-pulse">
+        {[1, 2, 3, 4].map(i => (
+          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-4 py-3">
+            <Bar w="2.5rem" h="1.75rem" />
+            <Bar w="3.5rem" h="0.75rem" className="mt-2" />
+            <Bar w="5rem" h="0.625rem" className="mt-1" />
+          </div>
+        ))}
+      </div>
+
+      {/* Dispatch + UserBar row */}
+      <div className="flex items-center gap-3 mb-3 anet-skeleton-pulse">
+        <Bar w="6rem" h="2.5rem" rounded="0.75rem" />
+        <div className="flex-1 rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-2.5 flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full anet-skeleton-bar" />
+          <div className="flex-1">
+            <Bar w="6rem" h="0.875rem" />
+            <Bar w="10rem" h="0.625rem" className="mt-1" />
+          </div>
         </div>
       </div>
 
-      {/* Broadcast bar skeleton */}
-      <div className="mb-6 flex gap-2">
-        <div className="flex-1 h-10 bg-gray-800/40 rounded-lg" />
-        <div className="w-28 h-10 bg-gray-800/40 rounded-lg" />
+      {/* Config bar */}
+      <div className="mb-6 rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-3 anet-skeleton-pulse">
+        <Bar w="14rem" h="0.875rem" />
+      </div>
+
+      {/* Stat strip 3 cards */}
+      <div className="grid grid-cols-3 gap-2 sm:gap-3 mb-3 anet-skeleton-pulse">
+        {[1, 2, 3].map(i => (
+          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-3 py-3">
+            <Bar w="2rem" h="1.25rem" />
+            <Bar w="2.5rem" h="0.75rem" className="mt-1" />
+            <Bar w="3.5rem" h="0.625rem" className="mt-px" />
+          </div>
+        ))}
       </div>
 
-      {/* Topology skeleton */}
-      <div className="w-full max-w-4xl mx-auto mb-8 h-64 bg-gray-800/20 rounded-xl" />
+      {/* Nav rail 3 cards */}
+      <div className="grid grid-cols-3 gap-2 sm:gap-3 mb-6 anet-skeleton-pulse">
+        {[1, 2, 3].map(i => (
+          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-3 py-2.5 flex items-center justify-center gap-2">
+            <div className="w-4 h-4 rounded anet-skeleton-bar" />
+            <Bar w="4rem" h="0.75rem" />
+          </div>
+        ))}
+      </div>
 
-      {/* Card grid skeleton */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      {/* Broadcast bar */}
+      <div className="mb-6 flex gap-2 anet-skeleton-pulse">
+        <div className="flex-1 h-10 rounded-lg border border-[#2a2a4a] bg-[#111128]" />
+        <div className="w-28 h-10 rounded-lg anet-skeleton-bar" />
+      </div>
+
+      {/* Agent card grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4 anet-skeleton-pulse">
         {[1, 2, 3, 4].map(i => (
-          <div key={i} className="rounded-xl border border-gray-800/40 p-4 bg-gray-800/20">
+          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] p-4">
             <div className="flex items-center gap-2 mb-3">
-              <div className="w-2.5 h-2.5 rounded-full bg-gray-700" />
-              <div className="h-4 w-24 bg-gray-700 rounded" />
+              <div className="w-2 h-2 rounded-full anet-skeleton-bar" />
+              <Bar w="6rem" h="0.875rem" />
             </div>
             <div className="space-y-2">
-              <div className="h-3 w-full bg-gray-800/60 rounded" />
-              <div className="h-3 w-3/4 bg-gray-800/60 rounded" />
-              <div className="h-3 w-1/2 bg-gray-800/60 rounded" />
+              <Bar w="100%" h="0.625rem" />
+              <Bar w="75%" h="0.625rem" />
+              <Bar w="55%" h="0.625rem" />
             </div>
           </div>
         ))}
@@ -45,21 +89,18 @@ export function LoadingSkeleton() {
   );
 }
 
-export function EmptyState({ hint }: { hint?: { global_count?: number; filtered_network?: string } }) {
+/** Single shimmer bar — uses `anet-skeleton-bar` so theme-specific bar
+ *  color (dark navy on dark themes, mid-grey on light) overrides the
+ *  default. */
+function Bar({ w, h, rounded, className }: { w: string; h: string; rounded?: string; className?: string }) {
   return (
-    <div className="text-center py-16">
-      <div className="text-gray-600 text-4xl mb-4">--</div>
-      <h3 className="text-gray-400 text-lg font-medium mb-2">No agents in this network</h3>
-      {hint?.global_count ? (
-        <p className="text-gray-500 text-sm max-w-md mx-auto">
-          Server has <span className="text-cyan-400 font-medium">{hint.global_count}</span> nodes globally,
-          but none are registered to the current network. Switch network or contact admin.
-        </p>
-      ) : (
-        <p className="text-gray-600 text-sm max-w-md mx-auto">
-          Agent sessions will appear here once they connect to the CommHub.
-        </p>
-      )}
-    </div>
+    <div
+      className={`anet-skeleton-bar ${className || ''}`}
+      style={{ width: w, height: h, borderRadius: rounded || '0.375rem' }}
+    />
   );
 }
+
+// EmptyState export removed in 0.4.5 — replaced by EmptyState.tsx with
+// per-variant glyphs and a NodesEmptyState wrapper for the Overview
+// hint-aware behavior. See app/components/EmptyState.tsx.

package/app/components/Sidebar.tsx

@@ -101,17 +101,11 @@ export function Sidebar() {
         ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}
         lg:translate-x-0 lg:static lg:shrink-0
       `}>
-        {/* Logo */}
-        <div className={`px-4 py-5 border-b border-[#2a2a4a] ${collapsed ? 'text-center' : ''}`}>
-          {collapsed ? (
-            <span className="text-cyan-400 font-bold text-lg">A</span>
-          ) : (
-            <div>
-              <div className="text-white font-bold text-sm">Agent Network</div>
-              <div className="text-gray-600 text-xs">Dashboard</div>
-            </div>
-          )}
-        </div>
+        {/* Brand header — round 4: 3-node mesh mark matches /login,
+            with an inline live "online" pulse so every page surfaces
+            fleet health without leaving for /nodes. */}
+        <SidebarBrand collapsed={collapsed} />
+        <div className={`border-b border-[#2a2a4a]`} />
 
         {/* Network list */}
         {!collapsed && networks.length > 0 && (
@@ -157,6 +151,24 @@ export function Sidebar() {
               Sign out
             </button>
           )}
+          {!collapsed && (
+            <button
+              onClick={() => {
+                // Dispatch a synthetic keypress so the global Cmd+K listener fires
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
+              }}
+              className="w-full flex items-center justify-between gap-2 px-5 py-2 text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1a1a2a] transition-colors"
+              aria-label="Open command palette"
+            >
+              <span className="flex items-center gap-2">
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                Quick search
+              </span>
+              <kbd className="text-[10px] border border-current rounded px-1 py-0.5 opacity-60 font-mono">⌘K</kbd>
+            </button>
+          )}
           <div className={`flex items-center gap-2 px-3 py-2 ${collapsed ? 'justify-center' : 'justify-between'}`}>
             <ThemeSwitcher compact={collapsed} />
             <button
@@ -174,3 +186,70 @@ export function Sidebar() {
     </>
   );
 }
+
+interface StatusData {
+  sessions?: Array<{ status?: string; alias?: string }>;
+}
+
+const statusFetcher = (url: string) =>
+  fetch(url).then(r => r.ok ? r.json() as Promise<StatusData> : { sessions: [] });
+
+function SidebarBrand({ collapsed }: { collapsed: boolean }) {
+  // Live online count — re-uses the same /api/hub/status endpoint the
+  // Overview already polls, so SWR dedupes the request. Pulse is muted —
+  // emerald dot at 4px with a 1.6s slow opacity pulse, no glow, no halo.
+  const { data } = useSWR<StatusData>('/api/hub/status', statusFetcher, {
+    refreshInterval: 10000,
+    dedupingInterval: 4000,
+  });
+  const sessions = data?.sessions || [];
+  const online = sessions.filter(s => s.status && s.status !== 'offline').length;
+  const total = sessions.length;
+
+  if (collapsed) {
+    return (
+      <Link href="/" className="block px-3 py-4 flex justify-center hover:opacity-80 transition-opacity" aria-label="Agent Network — home">
+        <BrandMark size={32} />
+      </Link>
+    );
+  }
+
+  return (
+    <Link
+      href="/"
+      className="block px-4 py-4 flex items-center gap-3 hover:bg-[#11112a]/40 transition-colors rounded-r-xl"
+      aria-label="Agent Network — home"
+    >
+      <BrandMark size={32} />
+      <div className="min-w-0">
+        <div className="text-white text-[13px] font-semibold leading-tight">Agent Network</div>
+        <div className="text-[10px] text-gray-500 flex items-center gap-1.5 mt-0.5">
+          <span
+            className={`inline-block w-1.5 h-1.5 rounded-full ${online > 0 ? 'bg-emerald-400 anet-brand-pulse' : 'bg-gray-600'}`}
+            aria-hidden
+          />
+          {total === 0 ? (
+            <span>waiting for agents</span>
+          ) : (
+            <span><span className="text-gray-300 font-medium tabular-nums">{online}</span><span className="text-gray-600">/{total}</span> online</span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+/** 3-node mesh mark — same SVG as /login, reusable. */
+function BrandMark({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden className="shrink-0">
+      <circle cx="16" cy="16" r="10" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.2" className="text-cyan-400" />
+      <line x1="16" y1="10" x2="10" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.45" className="text-cyan-400" />
+      <line x1="16" y1="10" x2="22" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.45" className="text-cyan-400" />
+      <line x1="10" y1="20" x2="22" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.45" className="text-cyan-400" />
+      <circle cx="16" cy="10" r="2.5" fill="currentColor" className="text-cyan-400" />
+      <circle cx="10" cy="20" r="2.5" fill="currentColor" className="text-green-400" />
+      <circle cx="22" cy="20" r="2.5" fill="currentColor" className="text-violet-400" />
+    </svg>
+  );
+}