@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

package/app/components/HelpOverlay.tsx

@@ -58,8 +58,116 @@ const SHORTCUTS: { group: string; items: Shortcut[] }[] = [
       { keys: ['l'], label: 'Toggle layout (ring ↔ grid)' },
       { keys: ['⌘', 'wheel'], label: 'Zoom toward cursor (Ctrl on Windows/Linux)' },
       { keys: ['drag'], label: 'Pan the canvas (cursor → grabbing)' },
-      { keys: ['dbl-click'], label: 'Reset zoom + pan' },
+      { keys: ['dbl-click'], label: 'Reset zoom + pan (empty canvas only)' },
       { keys: ['click'], label: 'Open chat popover on a node (Esc to close)' },
+      // Round 59 / Loop: discoverability for the interactions added in
+      // R52 (hub click), R55 (legend status hover), R56 (recent-signal
+      // row hover). All three live inside the topology canvas, so this
+      // is the right group for the new entries.
+      { keys: ['click hub'], label: 'Fit topology to canvas (R52)' },
+      { keys: ['hover legend'], label: 'Highlight nodes of a status (R55)' },
+      { keys: ['hover signal'], label: 'Highlight one flow edge (R56)' },
+      // Round 62 / Loop: R60 + R61 added click-to-pin on the pressure
+      // chip and legend rows; R62 added Esc to release the pin. Pin
+      // gives users a sticky filter (vs R55 transient hover).
+      { keys: ['click chip'], label: 'Pin a status filter (R60/R61)' },
+      { keys: ['Esc'], label: 'Clear pinned filter (R62) — or close chat' },
+      // Round 65 / Loop: R63 added group-pin via group label click; R64
+      // added active-filter pills in the chip row with per-pill ×
+      // clear. Both compose with the R62 Esc keystroke (single press
+      // clears everything pinned).
+      { keys: ['click group'], label: 'Pin a team focus (R63)' },
+      { keys: ['click ×'], label: 'Clear one filter (R64) — Esc clears all' },
+      // Round 70 / Loop: R69 added 4 Cmd+K palette actions that pin/
+      // clear topology filters from anywhere. Surface them so keyboard
+      // power users find the shortcut without spelunking the palette.
+      { keys: ['⌘', 'K'], label: 'Pin / clear filters via palette → "Pin topology filter…" (R69)' },
+      // Round 74 / Loop: palette also exposes layout + view actions —
+      // a search-friendly alternative to the `l` (R32) and `f` (R29)
+      // keyboard shortcuts for users who can't remember them.
+      { keys: ['⌘', 'K'], label: 'Toggle layout / Fit canvas via palette (R74)' },
+      // Round 78 / Loop: surface R73 (whole pill body is a click target)
+      // and R77 (active-links chip hover → boost all flow edges) —
+      // both are real user gestures that weren't in the help overlay.
+      { keys: ['click pill'], label: 'Clear filter — click anywhere on the pill body (R73)' },
+      { keys: ['hover chip'], label: 'Brighten all active flows — hover "N active links" (R77)' },
+      // Round 81 / Loop: catch up on the two newest chip-row affordances
+      // — R79 working/online chips and R80 vendor-letter chips. All
+      // four chip hovers feed the same dim mechanic the R55 legend
+      // rows use.
+      { keys: ['hover N working'], label: 'Highlight working nodes — chip-row sibling of legend (R79)' },
+      { keys: ['hover vendor'], label: 'Highlight one vendor — hover A/O/书/? in the chip row (R80)' },
+      // Round 87 / Loop: catch up on the two newest hover-preview
+      // gestures that close click-only gaps from earlier rounds.
+      // R83 added preview-before-pin on the pressure-bar segments;
+      // R86 did the same for group labels. Both compose with their
+      // existing click-pin (R60 / R63) — hover transient, click
+      // sticky, Esc clears (R62).
+      { keys: ['hover seg'], label: 'Preview a status filter — hover a pressure-bar segment (R83)' },
+      { keys: ['hover group'], label: 'Preview a team focus — hover a group label (R86)' },
+      // Round 91 / Loop: catch up on vendor pin (R88) and granular
+      // Cmd+K vendor-clear (R90). Vendor was the last filter
+      // dimension without a sticky pin; the click-to-pin gesture
+      // and palette clear command both deserve discovery entries.
+      // R89's third "filter:" pill is already covered by the
+      // generic "click pill" (R73) and "click ×" (R64) entries.
+      { keys: ['click vendor'], label: 'Pin a vendor filter — click A/O/书/? in the chip row (R88)' },
+      { keys: ['⌘', 'K'], label: 'Clear vendor pin only via palette → "Clear topology vendor filter" (R90)' },
+      // Round 109 / Loop: catch up on R108 — palette gained
+      // pin-vendor commands for the three major vendors. Mirror of
+      // R69's pin-status entry; closes the symmetric gap so the
+      // palette can both pin AND clear every filter dimension.
+      { keys: ['⌘', 'K'], label: 'Pin vendor: Anthropic/OpenAI/书生 via palette → "Pin topology filter…" (R108)' },
+      // Round 118 / Loop: catch up on R116 (recent-signal row click
+      // pins the edge — the 4th pin dim, completing the hover→pin
+      // sweep) and R117 (granular Cmd+K clear-edge command).
+      { keys: ['click row'], label: 'Pin a flow filter — click a recent-signal row to lock the edge (R116)' },
+      { keys: ['⌘', 'K'], label: 'Clear edge pin only via palette → "Clear topology edge pin" (R117)' },
+      // Round 123 / Loop: catch up on R121 — the edge midpoint count
+      // badge (R100) became a click-to-pin affordance, giving the
+      // canvas side a peer to R116's row-pin. R122 made hovering the
+      // badge mirror line hover; doesn't need its own entry — it's
+      // the natural hover partner of this click gesture.
+      { keys: ['click badge'], label: 'Pin a flow filter from the canvas — click an edge midpoint count badge (R121)' },
+      // Round 134 / Loop: catch up on R133 — the recent-signal panel's
+      // "+ N more flows" truncation footer (R128) became a clickable
+      // nav to /messages. First TopoGraph affordance that reaches OUT
+      // of the canvas; every prior gesture composes back into local
+      // state. Help overlay should surface the cross-page jump so
+      // operators know the path exists. R124-R132 were all passive
+      // visuals / motion / readouts with no new gestures, so this is
+      // the only new entry since R123.
+      { keys: ['click footer'], label: 'See all flows — click "+ N more flows" in the recent-signal panel (R133)' },
+      // Round 137 / Loop: catch up on R136 — the "N active links"
+      // chip in the chip row gained a real onClick → /messages
+      // navigation (it already had cursor:pointer since R77 but the
+      // handler was missing, the cursor was lying). Pairs with R133
+      // footer-nav at a different surface: R133 lives on the canvas-
+      // side panel and only shows when flowLinks > 3; R136 lives at
+      // the chip row and triggers whenever flowLinks > 0 — a broader
+      // entry point for the same "show me the full list" jump.
+      { keys: ['click chip'], label: 'See all flows — click the "N active links" chip in the chip row (R136)' },
+      // Round 141 / Loop: catch up on R139 + R140 — the chip-row
+      // "N working" and "N online" chips finally honour the cursor:
+      // pointer they've carried since R79. Working pins
+      // pinnedStatus='working' (composes with R60 pressure-bar + R61
+      // legend rows — three surfaces, one pin); online navigates to
+      // /nodes (pinning 'idle' would misrepresent the chip, which
+      // semantically means working+idle). Two entries this round
+      // because two new gestures landed since R137's catch-up.
+      { keys: ['click chip'], label: 'Pin "working" status — click "N working" in the chip row (R139)' },
+      { keys: ['click chip'], label: 'Open the agent list — click "N online" in the chip row (R140)' },
+      // Round 153 / Loop: catch up on R151 — node <g> gained role=button
+      // + tabIndex=0 + aria-pressed + onKeyDown so keyboard-only users
+      // can Tab to a node and press Enter / Space to open the chat
+      // popover (same path as mouse click). Was the FIRST true keyboard
+      // gesture added since R141 (R142-R150 were visual / motion / hover
+      // refinements; R151 + R152 added/closed keyboard handlers — R152
+      // wired Enter on the group label which is just the keyboard parallel
+      // of the existing R63 click-group entry, so it doesn't earn a new
+      // line). The chat-open path didn't exist as a keyboard gesture
+      // before R151, so this is the discoverability entry for it.
+      { keys: ['Tab', 'Enter'], label: 'Open chat on a focused node (also Space) — keyboard parallel of click-to-chat (R151)' },
     ],
   },
 ];

package/app/components/ServersDrawer.tsx

@@ -20,6 +20,14 @@ import useSWR from 'swr';
  * so old hubs don't read as "something broke".
  */
 
+interface ServerAgent {
+  alias: string;
+  runtime: string | null;
+  status: 'working' | 'idle' | 'offline';
+  last_seen_at?: string | null;
+  progress?: number | null;  // 0..1
+}
+
 interface ServerCard {
   hostname: string;
   ip?: string | null;
@@ -27,6 +35,17 @@ interface ServerCard {
   cpu_cores: number;
   mem_used_gb: number | null;
   mem_total_gb: number | null;
+  /** Hero 1 v0.10.0: disk usage. Optional — older hubs don't report. */
+  disk_used_gb?: number | null;
+  disk_total_gb?: number | null;
+  /** Hero 1 v0.10.0: short history for sparklines (5-min sliding window).
+   *  Each is the rolling 1-min average sampled at ~30s cadence (so ~10
+   *  data points for 5-min). Optional — older hubs don't report. */
+  cpu_history?: number[];
+  mem_history?: number[];
+  /** Hero 2 v0.10.0: per-server agent rollup. Optional — older hubs
+   *  send only aggregate agent_count. */
+  agents?: ServerAgent[];
   agent_count: number;
   status: 'online' | 'offline';
   note?: string;
@@ -74,18 +93,122 @@ function Bar({ pct, label }: { pct: number; label: string }) {
   );
 }
 
+/** Hero 1 v0.10.0 — inline SVG sparkline for 5-min rolling history.
+ *  Zero-dep (no recharts). Renders a stroked polyline + filled area.
+ *  Values are percentages (0..100); clamps inside. */
+function Sparkline({ values, tint, label }: { values: number[]; tint: string; label: string }) {
+  if (!values || values.length < 2) return null;
+  const w = 100, h = 18;
+  const max = 100;
+  const stride = w / Math.max(1, values.length - 1);
+  const pts = values.map((v, i) => {
+    const x = i * stride;
+    const y = h - (Math.max(0, Math.min(max, v)) / max) * h;
+    return `${x.toFixed(1)},${y.toFixed(1)}`;
+  });
+  const polyline = pts.join(' ');
+  const area = `M0,${h} L${pts.join(' L')} L${w},${h} Z`;
+  return (
+    <svg
+      width="100%" height={h} viewBox={`0 0 ${w} ${h}`}
+      preserveAspectRatio="none" aria-label={`${label} 5-min history`}
+      data-server-sparkline={label}
+    >
+      <path d={area} fill={tint} opacity="0.18" />
+      <polyline points={polyline} fill="none" stroke={tint} strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+/** Hero 1 v0.10.0 — single health badge derived from the worst of
+ *  CPU / Mem / Disk percentages. Green ≤60%, amber 60-85%, red >85%
+ *  (same thresholds as Bar). Returns null when no percentages available
+ *  (e.g. offline server) so the card layout reads "n/a · offline" instead. */
+function HealthBadge({ cpu, mem, disk }: { cpu: number | null; mem: number | null; disk: number | null }) {
+  const vals = [cpu, mem, disk].filter((v): v is number => typeof v === 'number');
+  if (vals.length === 0) return null;
+  const worst = Math.max(...vals);
+  const t = barTint(worst);
+  const status = worst >= 85 ? 'red' : worst >= 60 ? 'amber' : 'green';
+  return (
+    <span
+      className="inline-block w-2 h-2 rounded-full shrink-0"
+      style={{ background: t.fill, boxShadow: `0 0 0 2px ${t.track}` }}
+      data-server-health-badge={status}
+      title={`worst: ${Math.round(worst)}%`}
+    />
+  );
+}
+
+/** Hero 2 v0.10.0 — per-server expandable agent list. Renders compact
+ *  rows: alias · runtime · status chip · last_seen relative. progress
+ *  bar appears when an agent reports progress (0..1). When the upstream
+ *  hub doesn't report agents[], the row falls through to a small
+ *  "agent list pending hub upgrade" hint. */
+function AgentList({ agents }: { agents?: ServerAgent[] }) {
+  if (!agents || agents.length === 0) {
+    return (
+      <div className="text-[9px] text-[var(--fg-dim)] font-mono italic px-1 py-1">
+        agent rollup pending hub ≥ 0.8.2-preview
+      </div>
+    );
+  }
+  return (
+    <ul className="space-y-1" data-server-agent-list>
+      {agents.map(a => {
+        const statusColor =
+          a.status === 'working' ? '#10b981' :
+          a.status === 'idle'    ? '#06b6d4' : '#6b7280';
+        return (
+          <li
+            key={a.alias}
+            className="flex items-center gap-1.5 text-[10px] font-mono"
+            data-server-agent={a.alias}
+          >
+            <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: statusColor }} />
+            <span className="font-semibold truncate" style={{ color: 'var(--fg)' }}>{a.alias}</span>
+            {a.runtime && (
+              <span className="text-[9px] text-[var(--fg-dim)] shrink-0">· {a.runtime}</span>
+            )}
+            {typeof a.progress === 'number' && a.progress > 0 && (
+              <span className="ml-auto text-[9px] tabular-nums text-[var(--fg-muted)]">
+                {Math.round(a.progress * 100)}%
+              </span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
 export function ServersDrawer() {
   const [open, setOpen] = useState(false);
+  /** v0.10.0 Hero 1+2 — per-server expanded state for detail card
+   *  (sparklines + disk bar + agent rollup). Stored as a Set of
+   *  hostnames; persists in localStorage so the user's last selection
+   *  survives reload. Independent of the drawer's open/close state. */
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
   // Drawer state is per-user-machine — persist like the other dashboard
   // sticky toggles (`anet-topo-layout`, `anet-topo-view`, etc.).
   useEffect(() => {
     try { if (localStorage.getItem('anet-servers-drawer') === '1') setOpen(true); } catch {}
+    try {
+      const raw = localStorage.getItem('anet-servers-drawer-expanded');
+      if (raw) setExpanded(new Set(JSON.parse(raw)));
+    } catch {}
   }, []);
   const toggle = () => setOpen(prev => {
     const next = !prev;
     try { localStorage.setItem('anet-servers-drawer', next ? '1' : '0'); } catch {}
     return next;
   });
+  const toggleExpanded = (hostname: string) => setExpanded(prev => {
+    const next = new Set(prev);
+    if (next.has(hostname)) next.delete(hostname); else next.add(hostname);
+    try { localStorage.setItem('anet-servers-drawer-expanded', JSON.stringify([...next])); } catch {}
+    return next;
+  });
 
   // Round 20 / #119 step 3 final delivery — real SWR fetch. 5s refresh
   // matches the other live drawers (HealthBanner, Sidebar) so an operator
@@ -162,6 +285,8 @@ export function ServersDrawer() {
             const offline = s.status === 'offline';
             const cpuPct = s.cpu_load_1min != null && s.cpu_cores > 0 ? (s.cpu_load_1min / s.cpu_cores) * 100 : null;
             const memPct = s.mem_used_gb != null && s.mem_total_gb != null && s.mem_total_gb > 0 ? (s.mem_used_gb / s.mem_total_gb) * 100 : null;
+            const diskPct = s.disk_used_gb != null && s.disk_total_gb != null && s.disk_total_gb > 0 ? (s.disk_used_gb / s.disk_total_gb) * 100 : null;
+            const isExpanded = expanded.has(s.hostname);
             return (
               <div
                 key={s.hostname}
@@ -171,17 +296,39 @@ export function ServersDrawer() {
                   borderColor: 'var(--border)',
                   opacity: offline ? 0.55 : 1,
                 }}
+                data-server-card={s.hostname}
+                data-server-expanded={isExpanded ? 'true' : 'false'}
                 title={s.ip ? `${s.hostname} · ${s.ip}` : s.hostname}
               >
-                <div className="flex items-baseline justify-between gap-2">
-                  <div className="min-w-0 flex items-baseline gap-1.5">
+                {/* v0.10.0 Hero 1+2: header row — click toggles expanded
+                    detail view (sparklines + disk + agent rollup). */}
+                <button
+                  type="button"
+                  onClick={() => toggleExpanded(s.hostname)}
+                  aria-expanded={isExpanded}
+                  className="w-full flex items-center justify-between gap-2 text-left"
+                  data-server-card-toggle={s.hostname}
+                >
+                  <div className="min-w-0 flex items-center gap-1.5">
+                    {/* Hero 1 health badge — worst-of CPU/Mem/Disk */}
+                    {!offline && <HealthBadge cpu={cpuPct} mem={memPct} disk={diskPct} />}
                     <span className="font-mono text-[12px] font-semibold truncate" style={{ color: 'var(--fg)' }}>{s.hostname}</span>
                     {s.note && <span className="text-[9px] text-[var(--fg-dim)]">({s.note})</span>}
                   </div>
-                  <span className="text-[10px] text-[var(--fg-muted)] font-mono tabular-nums shrink-0">
-                    {s.agent_count}&nbsp;agent{s.agent_count === 1 ? '' : 's'}
+                  <span className="flex items-center gap-1 shrink-0">
+                    <span className="text-[10px] text-[var(--fg-muted)] font-mono tabular-nums">
+                      {s.agent_count}&nbsp;agent{s.agent_count === 1 ? '' : 's'}
+                    </span>
+                    {/* Chevron — rotates 90° on expanded */}
+                    <svg
+                      width="10" height="10" viewBox="0 0 10 10"
+                      style={{ transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 150ms ease-out' }}
+                      aria-hidden
+                    >
+                      <path d="M3 1.5L7 5L3 8.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
                   </span>
-                </div>
+                </button>
                 {!offline && cpuPct != null && (
                   <Bar pct={cpuPct} label={`CPU ${s.cpu_load_1min!.toFixed(2)}/${s.cpu_cores}`} />
                 )}
@@ -191,6 +338,35 @@ export function ServersDrawer() {
                 {offline && (
                   <div className="text-[10px] text-[var(--fg-dim)] font-mono italic">CPU n/a · RAM n/a · offline</div>
                 )}
+                {/* v0.10.0 Hero 1+2: expanded detail — disk bar +
+                    5-min sparklines + agent rollup. Visible only when
+                    the user clicks the card. Renders gracefully when
+                    upstream hub hasn't shipped optional fields. */}
+                {isExpanded && !offline && (
+                  <div className="pt-1 mt-1 border-t space-y-1.5" style={{ borderColor: 'var(--border)' }}>
+                    {diskPct != null ? (
+                      <Bar pct={diskPct} label={`DISK ${s.disk_used_gb!.toFixed(1)}/${s.disk_total_gb!.toFixed(1)}G`} />
+                    ) : (
+                      <div className="text-[9px] text-[var(--fg-dim)] font-mono italic">disk metric pending hub ≥ 0.8.2-preview</div>
+                    )}
+                    {s.cpu_history && s.cpu_history.length >= 2 && (
+                      <div className="space-y-0.5">
+                        <div className="text-[9px] text-[var(--fg-muted)] font-mono">CPU · 5-min</div>
+                        <Sparkline values={s.cpu_history} tint="#10b981" label="CPU" />
+                      </div>
+                    )}
+                    {s.mem_history && s.mem_history.length >= 2 && (
+                      <div className="space-y-0.5">
+                        <div className="text-[9px] text-[var(--fg-muted)] font-mono">RAM · 5-min</div>
+                        <Sparkline values={s.mem_history} tint="#06b6d4" label="MEM" />
+                      </div>
+                    )}
+                    <div className="pt-1">
+                      <div className="text-[9px] text-[var(--fg-muted)] font-mono mb-0.5">agents</div>
+                      <AgentList agents={s.agents} />
+                    </div>
+                  </div>
+                )}
               </div>
             );
           })}