@sleep2agi/agent-network-dashboard 0.4.6-preview.7 → 0.4.6-preview.71

package/app/components/types.ts

@@ -12,6 +12,9 @@ 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;

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.6-preview.7",
+  "version": "0.4.6-preview.71",
   "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');
@@ -140,6 +141,7 @@ async function runFullscreen() {
   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');

package/scripts/chat-theme-test.mjs

@@ -23,6 +23,7 @@ async function run(theme, expectLight) {
   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');

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);

package/scripts/topo-active-filter-pill-test.mjs

@@ -0,0 +1,101 @@
+/* Round 64 verification: active-filter pills appear in chip row when
+ * pins are set and clear their pin on × click.
+ *
+ *  - No pin → no pill rendered.
+ *  - Pin status (via legend) → pill labelled "filter: working" with
+ *    aria-label that includes "Clear working filter".
+ *  - × button click → pin clears + node opacities restore.
+ *  - Both pins independent: pin a status + pin a group → two pills.
+ */
+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: 1400, height: 1500 } });
+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-layout', 'grid');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+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 sessions = [
+    { alias: 'alpha1', status: 'working', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'alpha2', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'alpha3', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'beta',   status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+  ];
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+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(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const readPills = () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-active-filter]')].map(el => ({
+    kind: el.getAttribute('data-active-filter'),
+    text: (el.textContent || '').trim(),
+  }));
+});
+const readWkrOpacity = () => page.evaluate(() => +(document.querySelector('g[data-node="alpha1"]')?.style.opacity || '1'));
+
+const pillsBefore = await readPills();
+
+// Pin working via legend.
+await page.locator('g[data-legend-status="working"]').first().click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const pillsAfterStatus = await readPills();
+const wkrAfterStatus = await readWkrOpacity();
+
+// Pin alpha group via label click.
+await page.locator('g[data-group-label-hit="alpha"]').first().click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const pillsBothPinned = await readPills();
+
+// Click × on the status pill.
+await page.locator('[data-active-filter="status"] button[aria-label*="working"]').first().click({ force: true });
+await page.waitForTimeout(250);
+const pillsAfterStatusClear = await readPills();
+const wkrAfterStatusClear = await readWkrOpacity();
+
+// Click × on the group pill.
+await page.locator('[data-active-filter="group"] button[aria-label*="alpha"]').first().click({ force: true });
+await page.waitForTimeout(250);
+const pillsFinal = await readPills();
+
+await browser.close();
+
+const results = {
+  before_noPills:        pillsBefore.length === 0,
+  statusPin_oneStatusPill: pillsAfterStatus.length === 1
+                          && pillsAfterStatus[0].kind === 'status'
+                          && /filter:\s*working/.test(pillsAfterStatus[0].text),
+  statusPin_dimsBeta:     wkrAfterStatus >= 0.55,   // alpha1 IS working — should stay
+  bothPinned_twoPills:    pillsBothPinned.length === 2
+                          && pillsBothPinned.some(p => p.kind === 'status')
+                          && pillsBothPinned.some(p => p.kind === 'group'),
+  statusClear_only_group_remains: pillsAfterStatusClear.length === 1
+                                  && pillsAfterStatusClear[0].kind === 'group',
+  statusClear_restoredOpacity: wkrAfterStatusClear >= 0.55,
+  groupClear_noPills:     pillsFinal.length === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-filter pill:`, JSON.stringify(results),
+  `\n  pillsAfterStatus=`, pillsAfterStatus,
+  `\n  pillsBothPinned=`, pillsBothPinned,
+  `\n  pillsAfterStatusClear=`, pillsAfterStatusClear);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-links-chip-test.mjs

@@ -0,0 +1,73 @@
+/* Round 42 verification: "X active links" chip in the header includes
+ * "· last <relative>" when flow links exist, drops the `· last …` tail
+ * when no flow links are present, and renders singular/plural correctly. */
+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 probe({ msgs }) {
+  const ctx = await browser.newContext({ viewport: { width: 1400, height: 1000 } });
+  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-layout', 'grid');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  });
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  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 sessions = ['alpha', 'beta', 'gamma'].map(a => ({
+      alias: a, status: 'idle', network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+  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('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+  await page.waitForTimeout(500);
+  const text = await page.evaluate(() => {
+    // The active-links chip is the LAST chip in the topo header row (after
+    // pressure-bar + vendor + working/online). Match by `active link`.
+    const spans = [...document.querySelectorAll('span')];
+    return spans.find(s => /active link/.test(s.textContent || ''))?.textContent?.replace(/\s+/g, ' ').trim() || null;
+  });
+  await ctx.close();
+  return text;
+}
+
+// 1. No messages → 0 active links, no "· last X" tail
+const empty = await probe({ msgs: [] });
+// 2. One message just now → 1 active link · last Ns ago
+const recent = await probe({ msgs: [
+  { from_alias: 'alpha', to_alias: 'beta', content: 'hi', created_at: new Date(Date.now() - 30 * 1000).toISOString() },
+] });
+// 3. Five messages, latest 4 min ago → 5 active links · last 4m ago (singular link uses "link", plural "links")
+const fourMinAgo = new Date(Date.now() - 4 * 60 * 1000).toISOString();
+const eightMinAgo = new Date(Date.now() - 8 * 60 * 1000).toISOString();
+const five = await probe({ msgs: [
+  { from_alias: 'alpha', to_alias: 'beta',  content: '1', created_at: eightMinAgo },
+  { from_alias: 'alpha', to_alias: 'gamma', content: '2', created_at: eightMinAgo },
+  { from_alias: 'alpha', to_alias: 'gamma', content: '3', created_at: eightMinAgo },
+  { from_alias: 'beta',  to_alias: 'gamma', content: '4', created_at: eightMinAgo },
+  { from_alias: 'beta',  to_alias: 'gamma', content: '5', created_at: fourMinAgo }, // latest
+] });
+
+await browser.close();
+const results = {
+  emptyChipHasNoTail: empty === '0 active links',
+  recentSingularChip: recent !== null && /^1 active link · last \d+s ago$/.test(recent),
+  pluralChipShowsLatest: five !== null && /active links · last [34]m ago/.test(five),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links chip:`, JSON.stringify(results),
+  `\n  empty=${JSON.stringify(empty)}\n  recent=${JSON.stringify(recent)}\n  five=${JSON.stringify(five)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-arrow-tier-test.mjs

@@ -0,0 +1,61 @@
+/* Round 16 verification: three flow-link arrow markers exist with the
+ * right sizes, all using userSpaceOnUse so they're decoupled from stroke. */
+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 {
+    localStorage.setItem('anet-theme', 'cyber');
+    localStorage.removeItem('anet-brand');
+    localStorage.removeItem('anet-topo-view');
+    localStorage.setItem('anet-topo-layout', 'grid');
+    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 sessions = ['a', 'b', 'c'].map(a => ({
+    alias: a, status: 'idle', network_id: nid, project_dir: null,
+    created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z',
+    last_seen_at: new Date().toISOString(),
+  }));
+  await route.fulfill({ response: r, json: { ...b, 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.waitForFunction(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return !!svg && svg.querySelectorAll('g[data-node]').length === 3;
+}, { timeout: 30000 }).catch(() => {});
+await page.waitForTimeout(400);
+
+const m = await page.evaluate(() => {
+  const reads = (id) => {
+    const el = document.querySelector(`marker#${id}`);
+    if (!el) return null;
+    return {
+      width: +el.getAttribute('markerWidth'),
+      units: el.getAttribute('markerUnits'),
+    };
+  };
+  return { s: reads('topo-arrow-s'), m: reads('topo-arrow'), l: reads('topo-arrow-l') };
+});
+
+await browser.close();
+const results = {
+  smallExists: m.s?.width === 12 && m.s?.units === 'userSpaceOnUse',
+  mediumExists: m.m?.width === 16 && m.m?.units === 'userSpaceOnUse',
+  largeExists: m.l?.width === 22 && m.l?.units === 'userSpaceOnUse',
+  legendCompatible: m.m !== null, // legend uses url(#topo-arrow); medium tier must exist by that id
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} arrow tiers:`, JSON.stringify(results), 'sizes:', m);
+process.exit(ok ? 0 : 1);

package/scripts/topo-auto-fit-test.mjs

@@ -0,0 +1,73 @@
+/* Round 28 verification: first-paint auto-fit zoom when grid content
+ * would overflow viewBox; respects persisted view; doesn't fire on
+ * small fleets (no overflow). */
+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 probe({ fleetSize, persisted }) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 1600 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(([pers]) => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', 'grid');
+      if (pers) localStorage.setItem('anet-topo-view', JSON.stringify(pers));
+      else localStorage.removeItem('anet-topo-view');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, [persisted]);
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  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';
+    // Use prefix groups with 5 members each — 7 bands stack vertically
+    // and overflow the 680-px viewBox at cellH ≥ 81 (Round 27 floor).
+    const aliases = Array.from({ length: fleetSize }, (_, i) => {
+      const groups = ['A站', 'B站', 'C站', 'D站', 'E站', 'F站', 'G站', 'H站', 'I站', 'J站'];
+      const group = groups[Math.floor(i / 5) % groups.length];
+      return `${group}n${i + 1}`;
+    });
+    const sessions = aliases.map(a => ({
+      alias: a, status: 'idle', network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    }));
+    await route.fulfill({ response: r, json: { ...b, 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.waitForFunction((n) => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('g[data-node]').length === n;
+  }, fleetSize, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(600);
+  const zoom = await page.evaluate(() => {
+    const span = document.querySelector('button[aria-label="Zoom in"]').parentElement.querySelector('span[title*="zoom level"]');
+    return +span.textContent.replace('%', '');
+  });
+  await ctx.close();
+  return zoom;
+}
+
+// 1. Big fleet (35 nodes / 7 bands → overflows ~680-px viewBox at cellH≥81)
+//    with no persisted view → auto-fit triggers (zoom < 100%)
+const bigFresh = await probe({ fleetSize: 35 });
+// 2. Big fleet, user has persisted view (zoom=1) → respect it, no auto-fit
+const bigPersisted = await probe({ fleetSize: 35, persisted: { zoom: 1, x: 0, y: 0 } });
+// 3. Small fleet, no persisted view → no overflow, zoom stays 100%
+const smallFresh = await probe({ fleetSize: 6 });
+
+await browser.close();
+const results = {
+  bigFleetAutoFits: bigFresh < 100 && bigFresh >= 50,
+  persistedRespected: bigPersisted === 100,
+  smallFleetStays100: smallFresh === 100,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} auto-fit:`, JSON.stringify(results),
+  `bigFresh=${bigFresh}% bigPersisted=${bigPersisted}% smallFresh=${smallFresh}%`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chat-focus-ring-test.mjs

@@ -0,0 +1,77 @@
+/* Round 11 verification: clicking a node opens the ChatPopover AND draws a
+ * persistent chat-focus ring on that node (strokeWidth=2.5, status colour).
+ * Closing the popover removes the ring. The ring's strokeWidth stays clear
+ * of the overlap-test selectors (1.5 / 3). */
+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 {
+    localStorage.setItem('anet-theme', 'cyber');
+    localStorage.removeItem('anet-brand');
+    localStorage.removeItem('anet-topo-view');
+    localStorage.setItem('anet-topo-layout', 'grid');
+    localStorage.setItem('anet-topo-nodescale', '1'); // L so radius=26
+    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 sessions = ['A站马', 'B站马', 'C站马'].map(a => ({
+    alias: a, status: 'idle', network_id: nid,
+    project_dir: null,
+    created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z',
+    last_seen_at: new Date().toISOString(),
+  }));
+  await route.fulfill({ response: r, json: { ...b, 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.waitForFunction(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return !!svg && svg.querySelectorAll('g[data-node]').length >= 3;
+}, { timeout: 30000 }).catch(() => {});
+await page.waitForTimeout(400);
+
+// Pre-click: NO chat-focus ring on any node (strokeWidth=2.5, no group-hover class)
+const ringsBefore = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-node] circle[stroke-width="2.5"]', els => els.length);
+
+// Click A站马 → opens chat popover
+await page.locator('g[data-node="A站马"]').click();
+await page.waitForTimeout(300);
+
+const ringsAfter = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-node] circle[stroke-width="2.5"]', els => els.length);
+const ringOnTarget = await page.$eval(
+  'g[data-node="A站马"] circle[stroke-width="2.5"]',
+  el => ({ r: +el.getAttribute('r'), opacity: +el.getAttribute('opacity') })
+).catch(() => null);
+
+// Confirm popover is open
+const popover = await page.locator('[role="dialog"], [data-chat-popover]').count();
+
+// Ring should be ONLY on the clicked node, not on the others
+const ringOnOther = await page.$$eval('g[data-node="B站马"] circle[stroke-width="2.5"], g[data-node="C站马"] circle[stroke-width="2.5"]', els => els.length);
+
+const results = {
+  noRingBefore: ringsBefore === 0,
+  oneRingAfter: ringsAfter === 1,
+  ringOnTargetNode: !!ringOnTarget && ringOnTarget.r === 40, // radius=26 + 14
+  ringNotOnOthers: ringOnOther === 0,
+};
+
+// Re-run the overlap selector to confirm the chat-focus ring isn't mis-counted as a status ring
+const statusRings = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-node] circle[stroke-width="3"], svg[viewBox="0 0 1000 680"] g[data-node] circle[stroke-width="1.5"]', els => els.length);
+results.statusRingCountUnchanged = statusRings === 3; // exactly one per online node
+
+await browser.close();
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chat-focus ring:`, JSON.stringify(results));
+process.exit(ok ? 0 : 1);