@sleep2agi/agent-network-dashboard 0.4.6-preview.16 → 0.4.6-preview.161

package/scripts/topo-node-a11y-test.mjs

@@ -0,0 +1,107 @@
+/* Round 151 verification: node <g> gains a11y compliance.
+ *
+ * Node clickable for chat since R45, but tab-unreachable +
+ * screen-reader-unannounced. R151 matches the pattern R116 /
+ * R139 / R140 / R148 / R149 applied to other interactive
+ * surfaces:
+ *   role="button"
+ *   tabIndex={0}
+ *   aria-label="Chat with {alias} ({status})"
+ *   aria-pressed={chatAlias === session.alias}
+ *   onKeyDown(Enter / Space) → setChatAlias
+ *
+ * Three checks:
+ *   1. All nodes carry role=button, tabIndex=0, aria-label, aria-
+ *      pressed=false by default
+ *   2. Pressing Enter on a focused node opens chat (aria-pressed
+ *      flips to true, chat popover renders)
+ *   3. Pressing Space on a different node moves the open chat
+ *      target — only one aria-pressed=true at a time
+ */
+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'); 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 mk = (alias, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'working'), mk('beta', 'idle'), mk('gamma', 'working'),
+  ] } });
+});
+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 === 3, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const inspectAll = () => page.evaluate(() => {
+  const nodes = [...document.querySelectorAll('g[data-node]')];
+  return nodes.map(n => ({
+    alias:    n.getAttribute('data-node'),
+    role:     n.getAttribute('role'),
+    tabIndex: n.getAttribute('tabindex'),
+    ariaLabel: n.getAttribute('aria-label'),
+    ariaPressed: n.getAttribute('aria-pressed'),
+  }));
+});
+
+const before = await inspectAll();
+
+// Focus alpha node and press Enter → opens chat
+await page.locator('g[data-node="alpha"]').focus();
+await page.keyboard.press('Enter');
+await page.waitForTimeout(250);
+const afterAlpha = await inspectAll();
+const popoverPresentA = await page.locator('.anet-chat-popover, [data-chat-popover]').count() > 0
+                       || await page.evaluate(() => !!document.querySelector('[role="dialog"]'));
+
+// Focus gamma node and press Space → moves chat target (only one pressed)
+await page.locator('g[data-node="gamma"]').focus();
+await page.keyboard.press(' ');
+await page.waitForTimeout(250);
+const afterGamma = await inspectAll();
+
+await browser.close();
+
+const results = {
+  // Baseline shape
+  threeNodes:         before.length === 3,
+  allRoleButton:      before.every(n => n.role === 'button'),
+  allTabIndex0:       before.every(n => n.tabIndex === '0'),
+  allAriaLabel:       before.every(n => /^Chat with /.test(n.ariaLabel || '')),
+  allAriaPressedFalse: before.every(n => n.ariaPressed === 'false'),
+
+  // After Enter on alpha
+  enterOpensChat:     afterAlpha.find(n => n.alias === 'alpha')?.ariaPressed === 'true',
+  popoverShown:       popoverPresentA,
+  othersStillFalse:   afterAlpha.filter(n => n.alias !== 'alpha').every(n => n.ariaPressed === 'false'),
+
+  // After Space on gamma (chat target moved)
+  spaceMovesTarget:   afterGamma.find(n => n.alias === 'gamma')?.ariaPressed === 'true',
+  alphaUnpressed:     afterGamma.find(n => n.alias === 'alpha')?.ariaPressed === 'false',
+  onlyOnePressed:     afterGamma.filter(n => n.ariaPressed === 'true').length === 1,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node a11y:`, JSON.stringify(results),
+  `\n  before=`, before,
+  `\n  afterAlpha=`, afterAlpha,
+  `\n  afterGamma=`, afterGamma);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-hover-lift-test.mjs

@@ -0,0 +1,85 @@
+/* Round 51 verification: hovered node <g> lifts -2px via CSS transform.
+ *  - At rest, every node's CSS transform is "none" (or matrix with 0 ty).
+ *  - On hover, the hovered <g> reports `translateY(-2px)` (matrix(1,0,0,1,0,-2))
+ *    via getComputedStyle.transform, while siblings stay at identity.
+ *  - Release: returns to identity.
+ *  - With prefers-reduced-motion forced, NO lift even on hover.
+ */
+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(reducedMotion) {
+  const ctx = await browser.newContext({
+    viewport: { width: 1280, height: 900 },
+    reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
+  });
+  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', 'ring');
+      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: [] } }));
+  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 === 3, { timeout: 30000 });
+  await page.waitForTimeout(500);
+
+  const readTy = (alias) => page.evaluate(a => {
+    const el = document.querySelector(`g[data-node="${a}"]`);
+    if (!el) return null;
+    const m = getComputedStyle(el).transform;
+    if (!m || m === 'none') return 0;
+    // matrix(a, b, c, d, tx, ty) — extract ty
+    const parts = m.match(/matrix\(([^)]+)\)/);
+    if (!parts) return null;
+    const arr = parts[1].split(',').map(s => parseFloat(s.trim()));
+    return arr[5] ?? null;
+  }, alias);
+
+  const restAlpha = await readTy('alpha');
+  const restBeta = await readTy('beta');
+  await page.locator('g[data-node="alpha"]').hover({ force: true });
+  await page.waitForTimeout(300);
+  const hoveredAlpha = await readTy('alpha');
+  const hoveredBeta  = await readTy('beta');
+  await page.mouse.move(10, 10);
+  await page.waitForTimeout(300);
+  const releasedAlpha = await readTy('alpha');
+
+  await ctx.close();
+  return { restAlpha, restBeta, hoveredAlpha, hoveredBeta, releasedAlpha };
+}
+
+const normal = await probe(false);
+const reduced = await probe(true);
+await browser.close();
+
+const results = {
+  normal_restAtZero: normal.restAlpha === 0 && normal.restBeta === 0,
+  normal_hoveredLifts: normal.hoveredAlpha === -2,
+  normal_siblingStays: normal.hoveredBeta === 0,
+  normal_released: normal.releasedAlpha === 0,
+  reduced_noLift: reduced.hoveredAlpha === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node hover lift:`, JSON.stringify(results),
+  `\n  normal=`, normal, `\n  reduced=`, reduced);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-title-peers-test.mjs

@@ -0,0 +1,107 @@
+/* Round 147 verification: node tooltip extends R98's flow summary
+ * with the actual sender / receiver alias breakdown. The R97 idiom
+ * — anywhere the UI shows "N" should hover-explain WHICH N — was
+ * applied to filter pills, group labels, vendor letters, pressure
+ * segments, recent-row, active-links chip. The node title was the
+ * last surface showing only aggregate counts ("12 in / 5 out");
+ * R147 adds peer lines.
+ *
+ * Fleet:
+ *   alpha — sends 3 msgs to beta, 5 to gamma, 2 to delta
+ *   beta  — sends 4 msgs to alpha, 1 to gamma
+ *   gamma — quiet (receiver only)
+ *   delta — quiet (receiver only)
+ *
+ * For alpha:
+ *   flowOut = 3 + 5 + 2 = 10
+ *   flowIn  = 4 (from beta)
+ *   senders ← beta (4)
+ *   receivers → beta (3), gamma (5), delta (2) — sorted by count desc:
+ *               gamma (5), beta (3), delta (2)
+ *
+ * Title should contain:
+ *   "flows: 4 in / 10 out"
+ *   "← from: beta (4)"
+ *   "→ to:   gamma (5), beta (3), delta (2)"  (sorted desc by count)
+ *
+ * Also verify a node with no flows (gamma will have 5 inbound from alpha
+ * and 1 from beta; let's pick delta which only has 2 inbound from alpha).
+ */
+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'); 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 mk = (alias, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'working'), mk('beta', 'working'),
+    mk('gamma', 'idle'),    mk('delta', 'idle'),
+  ] } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from, to, ageMs) => ({
+  id, from_alias: from, to_alias: to, content: 'hi',
+  network_id: 'default', created_at: new Date(now - ageMs).toISOString(),
+});
+const msgs = [];
+let id = 0;
+// alpha → beta (3), gamma (5), delta (2)
+for (let i = 0; i < 3; i++) msgs.push(mkMsg(`m${id++}`, 'alpha', 'beta',  10000 + id * 100));
+for (let i = 0; i < 5; i++) msgs.push(mkMsg(`m${id++}`, 'alpha', 'gamma', 10000 + id * 100));
+for (let i = 0; i < 2; i++) msgs.push(mkMsg(`m${id++}`, 'alpha', 'delta', 10000 + id * 100));
+// beta → alpha (4), gamma (1)
+for (let i = 0; i < 4; i++) msgs.push(mkMsg(`m${id++}`, 'beta',  'alpha', 10000 + id * 100));
+for (let i = 0; i < 1; i++) msgs.push(mkMsg(`m${id++}`, 'beta',  'gamma', 10000 + id * 100));
+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.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const readTitle = (alias) => page.evaluate((a) => {
+  const node = document.querySelector(`g[data-node="${a}"]`);
+  return node?.querySelector('title')?.textContent || '';
+}, alias);
+
+const alphaTitle = await readTitle('alpha');
+const deltaTitle = await readTitle('delta');
+
+await browser.close();
+
+const results = {
+  // alpha: flows aggregate
+  alpha_flowSummary:  alphaTitle.includes('flows: 4 in / 10 out'),
+  // alpha: senders line
+  alpha_sendersLine:  alphaTitle.includes('← from: beta (4)'),
+  // alpha: receivers line — must be sorted desc by count (gamma 5, beta 3, delta 2)
+  alpha_receiversOrder: alphaTitle.includes('→ to:   gamma (5), beta (3), delta (2)'),
+
+  // delta: receiver only, only inbound from alpha (2 msgs)
+  delta_flowSummary:  deltaTitle.includes('flows: 2 in / 0 out'),
+  delta_sendersLine:  deltaTitle.includes('← from: alpha (2)'),
+  delta_noReceivers:  !deltaTitle.includes('→ to:'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node title peers:`, JSON.stringify(results),
+  `\n  alpha title:\n${alphaTitle}`,
+  `\n  delta title:\n${deltaTitle}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-title-test.mjs

@@ -0,0 +1,101 @@
+/* Round 98 verification: node <title> tooltips now include status,
+ * group membership (when applicable), and per-node flow counts
+ * (inbound/outbound) alongside the existing identity/cwd/last-seen
+ * lines. Same info-density spirit as R97 pill tooltips — hover any
+ * node and the answer is right there.
+ *
+ * Fleet:
+ *   - alpha1 (working, claude) + alpha2 (idle, claude) → alpha group of 2
+ *   - solo (working, gpt-5) — no group (singleton)
+ *   - off1 (offline, claude) — has last_seen_at older
+ *
+ * Flows:
+ *   alpha1 → solo × 3
+ *   solo → alpha1 × 1
+ *   ⇒ alpha1: 1 in / 3 out; solo: 3 in / 1 out; alpha2/off1: no flows
+ */
+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'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+const stale = new Date(Date.now() - 20 * 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 mk = (alias, status, model, ts) => ({
+    alias, status, model, runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: ts, updated_at: ts, last_seen_at: ts,
+  });
+  const sessions = [
+    mk('alpha1', 'working', 'claude-opus-4', fresh),
+    mk('alpha2', 'idle',    'claude-opus-4', fresh),
+    mk('solo',   'working', 'gpt-5',         fresh),
+    mk('off1',   'offline', 'claude-opus-4', stale),
+  ];
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from_alias, to_alias, ageMs) => ({
+  id, from_alias, to_alias, content: 'hi', network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  mkMsg('m1', 'alpha1', 'solo', 30 * 1000),
+  mkMsg('m2', 'alpha1', 'solo', 60 * 1000),
+  mkMsg('m3', 'alpha1', 'solo', 90 * 1000),
+  mkMsg('m4', 'solo', 'alpha1', 45 * 1000),
+] } }));
+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(400);
+
+const titles = await page.evaluate(() => {
+  const out = {};
+  for (const alias of ['alpha1', 'alpha2', 'solo', 'off1']) {
+    const g = document.querySelector(`g[data-node="${alias}"]`);
+    out[alias] = g?.querySelector('title')?.textContent || '';
+  }
+  return out;
+});
+
+await browser.close();
+
+const results = {
+  // Status line is the heading.
+  alpha1_statusHeading:  /^alpha1 · working/m.test(titles.alpha1),
+  alpha2_statusHeading:  /^alpha2 · idle/m.test(titles.alpha2),
+  solo_statusHeading:    /^solo · working/m.test(titles.solo),
+  off1_statusHeading:    /^off1 · offline/m.test(titles.off1),
+  // Group line only on multi-member band.
+  alpha1_groupShown:     /group: alpha · 2/.test(titles.alpha1),
+  alpha2_groupShown:     /group: alpha · 2/.test(titles.alpha2),
+  solo_groupSkipped:    !/group:/.test(titles.solo),
+  // Flow counts on participating nodes only.
+  alpha1_flowsCorrect:   /flows: 1 in \/ 3 out/.test(titles.alpha1),
+  solo_flowsCorrect:     /flows: 3 in \/ 1 out/.test(titles.solo),
+  alpha2_noFlows:       !/flows:/.test(titles.alpha2),
+  off1_lastSeen:         /last seen:/.test(titles.off1),
+  // Identity line still present.
+  alpha1_hasIdentity:    /claude/i.test(titles.alpha1),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node titles:`, JSON.stringify(results),
+  `\n  alpha1:\n${titles.alpha1}`,
+  `\n  alpha2:\n${titles.alpha2}`,
+  `\n  solo:\n${titles.solo}`,
+  `\n  off1:\n${titles.off1}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-offline-dim-test.mjs

@@ -0,0 +1,70 @@
+/* Round 17 verification: offline nodes render at opacity 0.6 at rest,
+ * online stay at 1, and the chat-focused node (even if offline) jumps
+ * to 1 when its ChatPopover opens. */
+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 {}
+});
+// fresh-enough so the ghost-age-out filter doesn't drop the offline node
+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: 'on1', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'on2', status: 'working', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'off1', status: 'offline', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'off2', status: 'offline', 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(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return !!svg && svg.querySelectorAll('g[data-node]').length === 4;
+}, { timeout: 30000 }).catch(() => {});
+await page.waitForTimeout(500);
+
+const opacityOf = (alias) => page.$eval(`g[data-node="${alias}"]`, el =>
+  parseFloat(getComputedStyle(el).opacity || el.style.opacity || '1'));
+
+const restOn1 = await opacityOf('on1');
+const restOn2 = await opacityOf('on2');
+const restOff1 = await opacityOf('off1');
+const restOff2 = await opacityOf('off2');
+
+// Click an offline node — the chat popover should open and that node
+// should jump to full opacity.
+await page.locator('g[data-node="off1"]').click();
+await page.waitForTimeout(300);
+const focusedOff1 = await opacityOf('off1');
+const otherOff2 = await opacityOf('off2');
+
+await browser.close();
+const results = {
+  onlineFullOpacity: Math.abs(restOn1 - 1) < 0.01 && Math.abs(restOn2 - 1) < 0.01,
+  offlineDimmedAtRest: Math.abs(restOff1 - 0.6) < 0.01 && Math.abs(restOff2 - 0.6) < 0.01,
+  chatFocusOfflineRestoresOpacity: Math.abs(focusedOff1 - 1) < 0.01,
+  otherOfflineStaysDimmed: Math.abs(otherOff2 - 0.6) < 0.01,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} offline dim:`, JSON.stringify(results),
+  `rest=on1:${restOn1} on2:${restOn2} off1:${restOff1} off2:${restOff2}`,
+  `clicked off1=${focusedOff1} off2=${otherOff2}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-online-chip-nav-test.mjs

@@ -0,0 +1,143 @@
+/* Round 140 verification: the "N online" chip in the chip row
+ * gets an onClick that navigates to /nodes when interactive.
+ * Mirrors R136 active-links→/messages idiom; complements R139
+ * working→pin idiom. The online chip is the third chip-row chip
+ * that had cursor:pointer without a click action since R79.
+ *
+ * Why nav not pin: "online" = working + idle in semantics; there's
+ * no single pinnedStatus value that captures both. /nodes is the
+ * natural full-list destination.
+ *
+ * Three states tested:
+ *   - Empty fleet (onlineCount=0): chip not interactive
+ *   - 1 online: clickable, role=link, click → /nodes
+ *   - 5 online (mix of working+idle): same shape, click → /nodes
+ *
+ * Hover preview still works (R79 highlight all online) — that's
+ * a separate gesture verified in topo-active-links-chip-hover-test
+ * for the chip-row's hover ladder.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+// status: 'working' | 'idle' | 'offline' — distribute by counts
+async function probe({ working, idle, offline }) {
+  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'); 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 = [];
+    let i = 0;
+    for (let n = 0; n < working;  n++, i++) sessions.push(mk(i, 'working',  fresh, nid));
+    for (let n = 0; n < idle;     n++, i++) sessions.push(mk(i, 'idle',     fresh, nid));
+    for (let n = 0; n < offline;  n++, i++) sessions.push(mk(i, 'offline',  fresh, nid));
+    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' });
+  // offline-only fleet won't render g[data-node] (only online ones do),
+  // but the chip row still renders because sessions.length > 0.
+  await page.waitForSelector('[data-online-chip]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  return { browser, page };
+}
+
+function mk(i, status, fresh, nid) {
+  return {
+    alias: `node${i}`,
+    status,
+    model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  };
+}
+
+// State A: 5 online (3 working / 2 idle)
+const { browser: b1, page: p1 } = await probe({ working: 3, idle: 2, offline: 0 });
+const fiveProbe = await p1.evaluate(() => {
+  const chip = document.querySelector('[data-online-chip]');
+  return {
+    text:        chip?.textContent,
+    clickable:   chip?.getAttribute('data-online-chip-clickable'),
+    role:        chip?.getAttribute('role'),
+    tabindex:    chip?.getAttribute('tabindex'),
+    cursor:      chip?.getAttribute('style')?.includes('cursor: pointer'),
+    title:       chip?.getAttribute('title'),
+  };
+});
+await p1.locator('[data-online-chip]').click();
+await p1.waitForURL('**/nodes', { timeout: 10000 });
+const fiveUrl = p1.url();
+await b1.close();
+
+// State B: 1 online (1 idle, 0 working)
+const { browser: b2, page: p2 } = await probe({ working: 0, idle: 1, offline: 0 });
+const oneProbe = await p2.evaluate(() => {
+  const chip = document.querySelector('[data-online-chip]');
+  return {
+    text: chip?.textContent,
+    clickable: chip?.getAttribute('data-online-chip-clickable'),
+    role: chip?.getAttribute('role'),
+  };
+});
+await p2.locator('[data-online-chip]').click();
+await p2.waitForURL('**/nodes', { timeout: 10000 });
+const oneUrl = p2.url();
+await b2.close();
+
+// State C: offline-only fleet (2 sessions, all offline → onlineNodes=0)
+// 0-session fleet hits Overview's R52/R70 first-run CTA path, not
+// TopoGraph; offline-only keeps the chip row alive so the non-
+// interactive contract on "0 online" can be verified.
+const { browser: b3, page: p3 } = await probe({ working: 0, idle: 0, offline: 2 });
+const emptyProbe = await p3.evaluate(() => {
+  const chip = document.querySelector('[data-online-chip]');
+  return {
+    text: chip?.textContent,
+    clickable: chip?.getAttribute('data-online-chip-clickable'),
+    role: chip?.getAttribute('role'),
+    tabindex: chip?.getAttribute('tabindex'),
+    cursor: chip?.getAttribute('style')?.includes('cursor: pointer'),
+  };
+});
+await b3.close();
+
+const results = {
+  five_text5Online:        fiveProbe.text === '5 online',
+  five_clickableTrue:      fiveProbe.clickable === 'true',
+  five_roleLink:           fiveProbe.role === 'link',
+  five_tabIndex0:          fiveProbe.tabindex === '0',
+  five_cursorPointer:      fiveProbe.cursor === true,
+  five_titleMentionsNodes: (fiveProbe.title || '').includes('/nodes'),
+  five_navToNodes:         /\/nodes$/.test(fiveUrl),
+
+  one_text1Online:         oneProbe.text === '1 online',
+  one_clickableTrue:       oneProbe.clickable === 'true',
+  one_roleLink:            oneProbe.role === 'link',
+  one_navToNodes:          /\/nodes$/.test(oneUrl),
+
+  empty_text0Online:       emptyProbe.text === '0 online',
+  empty_clickableFalse:    emptyProbe.clickable === 'false',
+  empty_noRole:            emptyProbe.role === null || emptyProbe.role === undefined,
+  empty_noTabIndex:        emptyProbe.tabindex === null || emptyProbe.tabindex === undefined,
+  empty_noCursor:          !emptyProbe.cursor,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} online chip nav:`, JSON.stringify(results),
+  `\n  fiveProbe=`, fiveProbe, ` fiveUrl=`, fiveUrl,
+  `\n  oneProbe=`, oneProbe, ` oneUrl=`, oneUrl,
+  `\n  emptyProbe=`, emptyProbe);
+process.exit(ok ? 0 : 1);