@sleep2agi/agent-network-dashboard 0.4.6-preview.1 → 0.4.6-preview.100

package/app/components/types.ts

@@ -12,6 +12,13 @@ export interface Session {
   last_seen_at?: string;
   config_path?: string;
   network_id?: string;
+  // #111: working directory — nodes sharing a project_dir are one group
+  // (a more precise "same project" signal than the alias prefix).
+  project_dir?: string | null;
+  // #96: model vendor + execution runtime. Added to /api/status sessions in
+  // commhub-server 0.8.1-preview.0; null on older nodes / older hubs.
+  model?: string | null;
+  runtime?: string | null;
 }
 
 export interface Health {

package/app/components/utils.ts

@@ -11,14 +11,15 @@ export function previewContent(raw: string | null | undefined): string {
     .trim() || '--';
 }
 
+// Round 44 / Loop: timeAgo now delegates to the shared lib/time helper.
+// The old in-line `replace + 'Z'` parse appended a Z to already-ISO
+// inputs (producing "…ZZ", browser-fragile) — strict-superset semantics
+// preserved for SQL-style inputs, fixed for ISO. Plus a 'just now' fallback
+// when clock skew puts the timestamp in the future. Five callers benefit:
+// /admin · /logs · /settings/networks · InboxPanel · /messages.
+import { relativeAgo } from '../lib/time';
 export function timeAgo(dateStr: string): string {
-  if (!dateStr) return '--';
-  const diff = Date.now() - new Date(dateStr.replace(' ', 'T') + 'Z').getTime();
-  const s = Math.floor(diff / 1000);
-  if (s < 60) return `${s}s ago`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  return `${Math.floor(s / 86400)}d ago`;
+  return relativeAgo(dateStr) ?? '--';
 }
 
 export function statusColor(status: string, hasSse: boolean): string {

package/app/globals.css

@@ -860,6 +860,23 @@ body {
   animation: anet-topo-spoke-flow-kf 2.4s linear infinite;
 }
 
+/* Round 85 — group-box "marching ants" perimeter drift.
+   Applied to a grid-layout group box whose `statuses.working > 0`
+   AND that is neither hovered nor pinned (those treatments already
+   carry their own visual emphasis via solid stroke). Slow 12s
+   linear cycle reads as ambient motion, not animation — the eye
+   parses "this group has live work" without registering the box
+   as moving. R86 stride matches the box's `strokeDasharray="6 6"`
+   so a single full cycle returns to a frame-identical state.
+   prefers-reduced-motion handled by the blanket override below. */
+@keyframes anet-topo-groupbox-march-kf {
+  from { stroke-dashoffset: 0;   }
+  to   { stroke-dashoffset: -12; }
+}
+.anet-topo-groupbox-live {
+  animation: anet-topo-groupbox-march-kf 12s linear infinite;
+}
+
 /* ─────────────────────────────────────────────────────────────────────
    Round 29 — prefers-reduced-motion a11y sweep
 
@@ -894,7 +911,8 @@ body {
   .anet-fade-in,
   .anet-current-step-pulse,
   .anet-topo-sweep,
-  .anet-topo-spoke-flow {
+  .anet-topo-spoke-flow,
+  .anet-topo-groupbox-live {
     animation: none !important;
   }
   /* Tasks row grid 0fr↔1fr keep working (it's the toggle mechanism),

package/app/lib/time.ts

@@ -0,0 +1,36 @@
+/** Shared timestamp helpers for hub-sourced data.
+ *
+ *  Background — the CommHub serialises timestamps SQL-style without a
+ *  zone ("2026-05-15 06:00:28"), but some test data uses full ISO
+ *  ("…T06:00:28Z"). `Date.parse` on bare SQL is **local-time** in every
+ *  browser the dashboard supports, so a UTC+8 operator silently sees
+ *  every timestamp 8 h older than reality (Round 35 dug this out via
+ *  the `isGhost` filter mis-fire).
+ *
+ *  Round 38 / Loop consolidates parsing — TopoGraph (R35), ChatPopover
+ *  (R37) and utils.ts::timeAgo all mirrored the same SQL→UTC rewrite;
+ *  one source of truth here. */
+
+/** Parse a hub timestamp to ms-since-epoch, treating SQL-style strings
+ *  as UTC. ISO strings (with `T`) bypass the rewrite and are parsed as-is.
+ *  Returns null for empty / unparseable input. */
+export function parseHubTime(dateStr: string | null | undefined): number | null {
+  if (!dateStr) return null;
+  const iso = dateStr.includes('T') ? dateStr : dateStr.replace(' ', 'T') + 'Z';
+  const t = Date.parse(iso);
+  return Number.isFinite(t) ? t : null;
+}
+
+/** Format `dateStr` as a short relative-time string ("6m ago" / "2h ago").
+ *  Future timestamps (clock skew) collapse to "just now". Returns null when
+ *  the input doesn't parse — callers can decide on a fallback. */
+export function relativeAgo(dateStr: string | null | undefined): string | null {
+  const t = parseHubTime(dateStr);
+  if (t === null) return null;
+  const s = Math.floor((Date.now() - t) / 1000);
+  if (s < 0) return 'just now';
+  if (s < 60) return `${s}s ago`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}

package/app/lib/vendorIdentity.ts

@@ -0,0 +1,145 @@
+/** Issue #96: node visual identity — model vendor + runtime.
+ *
+ * Single source for two orthogonal node dimensions:
+ *   - vendor : which model house powers the node (avatar body)
+ *   - runtime: which execution shell it runs in (corner badge)
+ *
+ * Both are driven by the server `model` / `runtime` fields added in
+ * commhub-server 0.8.1-preview.0 (#96 Phase 1, commit 08482ef). Old nodes
+ * report `model: null` / `runtime: null` and fall back gracefully — never a
+ * broken image or blank avatar.
+ *
+ * Adding a vendor = one entry in VENDOR_RULES. Dropping a real logo file into
+ * public/vendors/ + setting `logo` lights it up with zero render-code change;
+ * until then a vendor-tinted monogram stands in (not a fake official logo).
+ */
+
+export interface VendorIdentity {
+  id: string;
+  label: string;
+  /** Monogram fallback colours, used when `logo` is null. */
+  mono: { bg: string; ring: string; text: string };
+  /** 1-char monogram shown when there's no logo asset. */
+  initial: string;
+  /** Packaged logo asset path, or null → render the monogram instead. */
+  logo: string | null;
+}
+
+const UNKNOWN_VENDOR: VendorIdentity = {
+  id: 'unknown',
+  label: 'Unknown vendor',
+  mono: { bg: 'hsl(220 10% 26%)', ring: 'hsl(220 10% 46%)', text: 'hsl(220 14% 82%)' },
+  initial: '?',
+  logo: null,
+};
+
+// Ordered prefix rules — first match wins. `test` runs against a lowercased
+// model id. Keep the most specific prefixes first.
+const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity }> = [
+  {
+    test: (m) => m.startsWith('intern'),
+    vendor: {
+      id: 'intern',
+      label: '书生 · 上海 AI 实验室',
+      mono: { bg: 'hsl(28 38% 24%)', ring: 'hsl(32 45% 52%)', text: 'hsl(34 60% 82%)' },
+      initial: '书',
+      // #79 shipped this asset — reuse it as the 书生 vendor logo.
+      logo: '/intern_avatar.png',
+    },
+  },
+  {
+    test: (m) => m.startsWith('minimax'),
+    vendor: {
+      id: 'minimax',
+      label: 'MiniMax',
+      mono: { bg: 'hsl(18 50% 26%)', ring: 'hsl(18 65% 52%)', text: 'hsl(20 80% 82%)' },
+      initial: 'M',
+      logo: null, // → public/vendors/minimax.* when assets land
+    },
+  },
+  {
+    test: (m) => m.startsWith('claude'),
+    vendor: {
+      id: 'anthropic',
+      label: 'Anthropic',
+      mono: { bg: 'hsl(16 32% 26%)', ring: 'hsl(16 48% 54%)', text: 'hsl(18 60% 84%)' },
+      initial: 'A',
+      logo: null,
+    },
+  },
+  {
+    test: (m) => m.startsWith('gpt') || m.startsWith('codex') || m.startsWith('o1') || m.startsWith('o3') || m.startsWith('o4'),
+    vendor: {
+      id: 'openai',
+      label: 'OpenAI',
+      mono: { bg: 'hsl(165 26% 22%)', ring: 'hsl(165 40% 44%)', text: 'hsl(165 45% 80%)' },
+      initial: 'O',
+      logo: null,
+    },
+  },
+];
+
+/** Resolve a model id to its vendor identity. `null` / unmatched → UNKNOWN. */
+export function vendorForModel(model: string | null | undefined): VendorIdentity {
+  if (!model) return UNKNOWN_VENDOR;
+  const m = model.toLowerCase();
+  for (const rule of VENDOR_RULES) {
+    if (rule.test(m)) return rule.vendor;
+  }
+  return UNKNOWN_VENDOR;
+}
+
+export type Runtime = 'claude-code-cli' | 'codex-sdk' | 'claude-agent-sdk' | 'http-api';
+
+export interface RuntimeIdentity {
+  label: string;
+  /** SVG path(s) drawn inside a 0..24 viewBox for the corner badge. */
+  iconPath: string;
+  /** Badge accent colour — kept clear of working/idle/offline status hues. */
+  color: string;
+}
+
+const RUNTIME_MAP: Record<Runtime, RuntimeIdentity> = {
+  // terminal / CLI
+  'claude-code-cli': {
+    label: 'Claude Code CLI',
+    iconPath: 'M4 5h16v14H4z M7 9l3 3-3 3 M13 15h4',
+    color: '#a78bfa',
+  },
+  // code-block / SDK
+  'codex-sdk': {
+    label: 'Codex SDK',
+    iconPath: 'M9 7l-5 5 5 5 M15 7l5 5-5 5',
+    color: '#38bdf8',
+  },
+  // SDK, distinct hue from codex
+  'claude-agent-sdk': {
+    label: 'Claude Agent SDK',
+    iconPath: 'M4 7h16v10H4z M8 11h8 M8 14h5',
+    color: '#34d399',
+  },
+  // cloud / API — non-resident process
+  'http-api': {
+    label: 'HTTP API',
+    iconPath: 'M7 18a4 4 0 010-8 5 5 0 019.6-1.3A3.5 3.5 0 0118 18z',
+    color: '#fbbf24',
+  },
+};
+
+/** Resolve a server runtime string to badge identity. Unknown → null. */
+export function runtimeIdentity(runtime: string | null | undefined): RuntimeIdentity | null {
+  if (!runtime) return null;
+  return RUNTIME_MAP[runtime as Runtime] ?? null;
+}
+
+/** Compact one-line identity for hover / detail surfaces:
+ *  "Anthropic · claude-opus-4 · Claude Code CLI". Pieces with no data drop. */
+export function identityLine(model: string | null | undefined, runtime: string | null | undefined): string {
+  const v = vendorForModel(model);
+  const r = runtimeIdentity(runtime);
+  const parts: string[] = [];
+  if (v.id !== 'unknown') parts.push(v.label);
+  if (model) parts.push(model);
+  if (r) parts.push(r.label);
+  return parts.join(' · ');
+}

package/app/page.tsx

@@ -42,6 +42,10 @@ export default function Dashboard() {
   const [showDispatch, setShowDispatch] = useState(false);
   const [inbox, setInbox] = useState<InboxMessage[]>([]);
   const [agentFilter, setAgentFilter] = useState<'all' | 'working' | 'idle' | 'offline'>('all');
+  // #84: last node.renamed event — passed to TopoGraph so an open chat
+  // popover follows the rename instead of pointing at a dead alias. `ts`
+  // makes the effect re-fire even when the same from/to repeats.
+  const [renameSignal, setRenameSignal] = useState<{ from: string; to: string; ts: number } | null>(null);
   const { mutate } = useSWRConfig();
 
   // SSE: instant revalidation on CommHub events
@@ -51,6 +55,19 @@ export default function Dashboard() {
     url: '/api/hub/events',
     enabled: sseEnabled,
     onEvent: (event) => {
+      // #84 (RFC-010 §3.4): node.renamed — revalidate the session list so the
+      // new alias propagates instantly (TopoGraph + node grid re-render, the
+      // avatar hue recomputes as a pure fn of alias) instead of waiting for
+      // the next 5s poll. The renamed node's history keeps the old alias
+      // server-side, so the task list needs no revalidation here.
+      if (event.type === 'node.renamed') {
+        mutate('/api/hub/status');
+        const d = event.data as { old_alias?: string; new_alias?: string } | undefined;
+        if (d?.old_alias && d?.new_alias) {
+          setRenameSignal({ from: d.old_alias, to: d.new_alias, ts: Date.now() });
+        }
+        return;
+      }
       if (['new_task', 'new_message', 'new_reply', 'node_status_changed', 'broadcast'].includes(event.type)) {
         mutate('/api/hub/status');
         mutate((key: string) => typeof key === 'string' && key.startsWith('/api/hub/tasks'), undefined, { revalidate: true });
@@ -368,7 +385,7 @@ export default function Dashboard() {
         </div>
       )}
 
-      {showTopo && sessions.length > 0 && <TopoGraph sessions={sessions} sseSessions={sseSessions} />}
+      {showTopo && sessions.length > 0 && <TopoGraph sessions={sessions} sseSessions={sseSessions} renameSignal={renameSignal} />}
 
       {sessions.length === 0 && !sessError ? (
         <EmptyState

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.6-preview.1",
+  "version": "0.4.6-preview.100",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/scripts/chat-popover-test.mjs

@@ -17,6 +17,7 @@ async function run(nodeCount, viewport, label) {
   await ctx.addInitScript(() => {
     try {
       localStorage.setItem('anet-theme', 'cyber');
+localStorage.setItem('anet-topo-nodescale', '1');
       localStorage.removeItem('anet-brand');
       localStorage.removeItem('anet-topo-view');
       sessionStorage.setItem('anet_v3_auth', '1');
@@ -131,11 +132,101 @@ async function run(nodeCount, viewport, label) {
   return ok;
 }
 
+// #106 addendum: the popover must work while the topology is fullscreen.
+// It's rendered inside the fullscreen container, so it must end up as a
+// descendant of document.fullscreenElement and still open / drag / resize.
+async function runFullscreen() {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(() => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-nodescale', '1');
+      localStorage.removeItem('anet-brand');
+      localStorage.removeItem('anet-topo-view');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  });
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const fleet = Array.from({ length: 5 }, (_, i) => ({
+      alias: `节点${i + 1}号`, status: 'idle', network_id: nid,
+      created_at: '2026-05-14T00:00:00Z', updated_at: '2026-05-14T00:00:00Z', last_seen_at: '2026-05-14T00:00:00Z',
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions: fleet } });
+  });
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('circle[r="26"]').length > 0;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(600);
+
+  const results = {};
+  // enter fullscreen on the topology container
+  await page.locator('button[aria-label="Enter fullscreen"]').click();
+  await page.waitForTimeout(500);
+  results.enteredFullscreen = await page.evaluate(() => !!document.fullscreenElement);
+
+  // open the popover by clicking a node
+  const ring = page.locator('svg[viewBox="0 0 1000 680"] circle[r="26"]').first();
+  const b = await ring.boundingBox();
+  if (b) await page.mouse.wheel(0, b.y - 200);
+  await page.waitForTimeout(150);
+  await ring.click({ force: true });
+  await page.waitForTimeout(400);
+  const popover = page.locator('[role="dialog"][aria-label^="Chat with"]');
+  results.opensInFullscreen = (await popover.count()) === 1;
+  // the popover must be inside the fullscreen element, else it's invisible
+  results.insideFullscreenLayer = await page.evaluate(() => {
+    const fs = document.fullscreenElement;
+    const pop = document.querySelector('[role="dialog"][aria-label^="Chat with"]');
+    return !!fs && !!pop && fs.contains(pop);
+  });
+
+  // drag + resize must still work in fullscreen
+  const box0 = await popover.boundingBox();
+  const hb = await popover.locator('div').first().boundingBox();
+  await page.mouse.move(hb.x + hb.width / 2, hb.y + 14);
+  await page.mouse.down();
+  await page.mouse.move(hb.x + hb.width / 2 - 120, hb.y + 14 - 60, { steps: 8 });
+  await page.mouse.up();
+  await page.waitForTimeout(250);
+  const box1 = await popover.boundingBox();
+  results.draggableInFullscreen = !!(box0 && box1) && (Math.abs(box1.x - box0.x) > 40 || Math.abs(box1.y - box0.y) > 40);
+
+  const grip = await popover.locator('[aria-label="Resize chat"]').boundingBox();
+  await page.mouse.move(grip.x + 10, grip.y + 10);
+  await page.mouse.down();
+  await page.mouse.move(grip.x + 10 + 80, grip.y + 10 + 80, { steps: 8 });
+  await page.mouse.up();
+  await page.waitForTimeout(250);
+  const box2 = await popover.boundingBox();
+  results.resizableInFullscreen = !!(box1 && box2) && (Math.abs(box2.width - box1.width) > 20 || Math.abs(box2.height - box1.height) > 20);
+
+  await page.screenshot({ path: '/tmp/anet-issue-100/popover-fullscreen.png' });
+
+  await popover.locator('button[aria-label="Close chat"]').click();
+  await page.waitForTimeout(250);
+  results.closesInFullscreen = (await popover.count()) === 0;
+
+  await ctx.close();
+  const ok = results.opensInFullscreen && results.insideFullscreenLayer &&
+    results.draggableInFullscreen && results.resizableInFullscreen && results.closesInFullscreen;
+  console.log(`${ok ? '✅' : '❌'} [fullscreen] 1440x900:`, JSON.stringify(results));
+  return ok;
+}
+
 const all = [];
 all.push(await run(1, { width: 1440, height: 900 }, 'desktop-1node'));
 all.push(await run(5, { width: 1440, height: 900 }, 'desktop-5node'));
 all.push(await run(50, { width: 1440, height: 900 }, 'desktop-50node'));
 all.push(await run(5, { width: 390, height: 844 }, 'mobile-5node'));
+all.push(await runFullscreen());
 
 await browser.close();
 const pass = all.every(Boolean);

package/scripts/chat-theme-test.mjs

@@ -0,0 +1,98 @@
+/* Issue #105 verification: TaskChatPanel + ChatPopover follow the dashboard
+ * light / dark theme (CSS design tokens, no hardcoded darks). Checks the
+ * popover panel + header + input resolve to a light surface under
+ * data-theme="light" and a dark one under "cyber", and captures both. */
+import { chromium } from 'playwright';
+import { readFileSync, mkdirSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+mkdirSync('/tmp/anet-issue-105', { recursive: true });
+const browser = await chromium.launch({ headless: true });
+
+// crude luminance from "rgb(r, g, b)" — >128 = light surface
+const isLight = (rgb) => {
+  const m = rgb.match(/\d+/g);
+  if (!m) return null;
+  const [r, g, b] = m.map(Number);
+  return (0.299 * r + 0.587 * g + 0.114 * b) > 128;
+};
+
+async function run(theme, expectLight) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 860 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript((th) => {
+    try {
+      localStorage.setItem('anet-theme', th);
+localStorage.setItem('anet-topo-nodescale', '1');
+      localStorage.removeItem('anet-brand');
+      localStorage.removeItem('anet-topo-view');
+      localStorage.setItem('anet-topo-layout', 'grid');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, theme);
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const fleet = Array.from({ length: 4 }, (_, i) => ({
+      alias: `节点${i + 1}号`, status: 'idle', network_id: nid,
+      created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z', last_seen_at: '2026-05-15T00:00:00Z',
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions: fleet } });
+  });
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [
+    { task_id: 't1', from_name: 'Dashboard', to_name: '节点1号', status: 'replied', priority: 'normal',
+      content: 'ping', result: 'pong — **ready**', created_at: '2026-05-15T00:00:00Z' },
+  ] } }));
+
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('circle[r="26"]').length > 0;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(700);
+
+  // open the chat popover
+  const ring = page.locator('svg[viewBox="0 0 1000 680"] circle[r="26"]').first();
+  const bb = await ring.boundingBox();
+  if (bb) await page.mouse.wheel(0, bb.y - 160);
+  await page.waitForTimeout(150);
+  await ring.click({ force: true });
+  await page.waitForTimeout(500);
+
+  const popover = page.locator('[role="dialog"][aria-label^="Chat with"]');
+  const results = {};
+
+  const panelBg = await popover.evaluate(el => getComputedStyle(el).backgroundColor);
+  results.panelMatchesTheme = isLight(panelBg) === expectLight;
+
+  // header (first child div) + its title text colour
+  const header = popover.locator('div').first();
+  const headerBg = await header.evaluate(el => getComputedStyle(el).backgroundColor);
+  results.headerMatchesTheme = isLight(headerBg) === expectLight;
+  const titleColor = await header.locator('div.text-sm').first().evaluate(el => getComputedStyle(el).color);
+  // title text must contrast the panel: dark text on light theme, light on dark
+  results.titleContrasts = isLight(titleColor) === !expectLight;
+
+  // input textarea surface
+  const ta = popover.locator('textarea');
+  const taBg = await ta.evaluate(el => getComputedStyle(el).backgroundColor);
+  results.inputMatchesTheme = isLight(taBg) === expectLight;
+
+  await page.screenshot({ path: `/tmp/anet-issue-105/chat-${theme}.png` });
+  await ctx.close();
+
+  const ok = results.panelMatchesTheme && results.headerMatchesTheme &&
+    results.titleContrasts && results.inputMatchesTheme;
+  console.log(`${ok ? '✅' : '❌'} [${theme}] expectLight=${expectLight}:`, JSON.stringify(results), `panelBg=${panelBg}`);
+  return ok;
+}
+
+const all = [];
+all.push(await run('cyber', false));
+all.push(await run('light', true));
+await browser.close();
+const pass = all.every(Boolean);
+console.log(pass ? '\n✅ ALL PASS' : '\n❌ FAIL');
+process.exit(pass ? 0 : 1);

package/scripts/help-overlay-topo-test.mjs

@@ -0,0 +1,44 @@
+/* Round 25 verification: pressing `?` opens the help overlay, and the
+ * new "Topology canvas" section is present with the documented keys. */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+await ctx.route('**/api/hub/status*', (route) => route.fulfill({ json: { sessions: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(400);
+
+await page.keyboard.press('?');
+await page.waitForTimeout(200);
+
+// The overlay contains group headings; find the Topology canvas group + its rows.
+const data = await page.evaluate(() => {
+  // The group heading is a <div>; its parent wraps heading + the <ul> of items.
+  const heading = [...document.querySelectorAll('[role="dialog"] div')].find(el => el.textContent === 'Topology canvas');
+  if (!heading) return null;
+  return {
+    headingPresent: true,
+    sectionText: (heading.parentElement?.textContent || '').replace(/\s+/g, ' ').trim(),
+  };
+});
+
+await browser.close();
+const results = {
+  overlayOpened: !!data,
+  topologySectionPresent: !!data?.headingPresent,
+  hasZoomKeys: !!data && /Zoom in/.test(data.sectionText) && /Zoom out/.test(data.sectionText) && /Reset zoom/.test(data.sectionText),
+  hasMouseGestures: !!data && /wheel/.test(data.sectionText) && /Pan the canvas/.test(data.sectionText),
+  hasClickHint: !!data && /chat popover/.test(data.sectionText) && /dbl-click/.test(data.sectionText),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} help overlay topology section:`, JSON.stringify(results));
+if (!ok && data) console.log('section text:', data.sectionText.slice(0, 300));
+process.exit(ok ? 0 : 1);

package/scripts/servers-drawer-live-test.mjs

@@ -0,0 +1,96 @@
+/* Round 20 / #119 step 3: ServersDrawer now consumes /api/hub/servers via
+ * useSWR. Verifies:
+ *   1. drawer renders live cards from the proxied endpoint (3 hosts)
+ *   2. polling fires (refreshInterval 5s) — second snapshot reflects an
+ *      updated payload after >5.2s
+ *   3. when the hub predates 0.8.1-preview.2 the proxy returns
+ *      `{ servers: [], unavailable: true }` and the drawer shows the
+ *      friendly upgrade hint instead of an angry empty state
+ *   4. hub-down (502) shows the retry chip */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+async function load({ payload, status = 200 }) {
+  const ctx = await browser.newContext({ viewport: { width: 1400, height: 900 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(() => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-servers-drawer', '1'); // start expanded so SWR fires
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  });
+  let calls = 0;
+  await ctx.route('**/api/hub/servers', async (route) => {
+    calls++;
+    const body = typeof payload === 'function' ? payload(calls) : payload;
+    await route.fulfill({ status, contentType: 'application/json', body: JSON.stringify(body) });
+  });
+  // keep the rest of the dashboard quiet
+  await ctx.route('**/api/hub/status*', (route) => route.fulfill({ json: { sessions: [] } }));
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForSelector('aside[aria-label="Servers panel"]', { timeout: 30000 });
+  return { ctx, page, getCalls: () => calls };
+}
+
+const results = {};
+
+// 1+2: live cards + polling
+{
+  const seed = (n) => ({
+    servers: [
+      { hostname: 'srv-01', ip: '10.0.0.1', cpu_load_1min: 1.2, cpu_cores: 4, mem_used_gb: 3, mem_total_gb: 16, agent_count: n, status: 'online' },
+      { hostname: 'srv-02', cpu_load_1min: 0.4, cpu_cores: 8, mem_used_gb: 6, mem_total_gb: 32, agent_count: 2, status: 'online' },
+      { hostname: 'srv-03', cpu_load_1min: null, cpu_cores: 0, mem_used_gb: null, mem_total_gb: null, agent_count: 1, status: 'offline' },
+    ],
+  });
+  const { ctx, page, getCalls } = await load({ payload: seed });
+  await page.waitForFunction(() => {
+    const cards = document.querySelectorAll('aside[aria-label="Servers panel"] [data-servers-body] > div[title]');
+    return cards.length >= 3;
+  }, { timeout: 10000 });
+  const hostnames = await page.$$eval(
+    'aside[aria-label="Servers panel"] [data-servers-body] span.font-semibold',
+    els => els.map(e => e.textContent),
+  );
+  results.rendersLiveCards = hostnames.includes('srv-01') && hostnames.includes('srv-02') && hostnames.includes('srv-03');
+
+  // wait past one poll cycle (5s + slack) and confirm the proxy was hit again
+  await page.waitForTimeout(5400);
+  results.polls = getCalls() >= 2;
+  await ctx.close();
+}
+
+// 3: hub predates 0.8.1-preview.2 → unavailable hint
+{
+  const { ctx, page } = await load({ payload: { servers: [], unavailable: true } });
+  await page.waitForFunction(() => {
+    const el = document.querySelector('aside[aria-label="Servers panel"] [data-servers-body]');
+    return el && el.textContent.includes('host telemetry not available');
+  }, { timeout: 10000 }).catch(() => {});
+  const body = await page.$eval('aside[aria-label="Servers panel"] [data-servers-body]', el => el.textContent);
+  results.showsUpgradeHint = /host telemetry not available/.test(body) && /commhub-server/.test(body);
+  await ctx.close();
+}
+
+// 4: hub-down 502 → retry chip
+{
+  const { ctx, page } = await load({ payload: { error: 'hub unreachable' }, status: 502 });
+  await page.waitForFunction(() => {
+    const el = document.querySelector('aside[aria-label="Servers panel"] [data-servers-body]');
+    return el && /hub unreachable/.test(el.textContent || '');
+  }, { timeout: 10000 }).catch(() => {});
+  const body = await page.$eval('aside[aria-label="Servers panel"] [data-servers-body]', el => el.textContent);
+  results.showsRetryChip = /hub unreachable/.test(body) && /every 5s/.test(body);
+  await ctx.close();
+}
+
+await browser.close();
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} servers drawer live:`, JSON.stringify(results));
+process.exit(ok ? 0 : 1);