@sleep2agi/agent-network-dashboard 0.4.6-preview.4 → 0.4.6-preview.41

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/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.4",
+  "version": "0.4.6-preview.41",
   "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

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

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

package/scripts/topo-click-ripple-test.mjs

@@ -0,0 +1,66 @@
+/* Round 14 verification: clicking a node spawns a one-shot ripple circle
+ * (strokeWidth=2, status-coloured, ~500ms) that's gone by t=800ms. */
+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');
+    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 = ['ripA', 'ripB'].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 >= 2;
+}, { timeout: 30000 }).catch(() => {});
+await page.waitForTimeout(400);
+
+// Ripple circle = direct child of the zoom/pan <g>, strokeWidth=2, with a
+// <animate> child whose attributeName="r" (distinguishes it from the
+// hover ring, which has strokeWidth=2 but no <animate> children).
+const ripplePresent = async () => page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  for (const c of svg.querySelectorAll('circle[stroke-width="2"]')) {
+    const anims = c.querySelectorAll('animate');
+    if (anims.length && [...anims].some(a => a.getAttribute('attributeName') === 'r')) return true;
+  }
+  return false;
+});
+
+const before = await ripplePresent();
+await page.locator('g[data-node="ripA"]').click();
+// Sample at ~150ms (mid-animation) — ripple should be present.
+await page.waitForTimeout(150);
+const during = await ripplePresent();
+// After 800ms total — well past the 600ms clear timer.
+await page.waitForTimeout(700);
+const after = await ripplePresent();
+
+await browser.close();
+const results = { noRippleBefore: before === false, rippleDuring: during === true, rippleClearedAfter: after === false };
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} click ripple:`, JSON.stringify(results));
+process.exit(ok ? 0 : 1);