@sleep2agi/agent-network-dashboard 0.4.6-preview.26 → 0.4.6-preview.261

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-nodesize-active-hover-test.mjs

@@ -0,0 +1,109 @@
+/* Round 179 verification: nodeSize S/M/L active button picks up
+ * hover:bg-cyan-500/20, closing the inconsistency with R163
+ * layout-toggle and R178 fullscreen which already ship the
+ * cyan-500/20 hover step on the active variant.
+ *
+ * Three active-cyan chrome surfaces now share the same gesture:
+ *   R163 Ring/Grid layout toggle (chip-row)
+ *   R178 Fullscreen button (chrome BR)
+ *   R179 nodeSize S/M/L (chrome BR)              ← this round
+ *
+ * Test:
+ *   1. Default state: M is active (default nodeScale=0.84)
+ *   2. Active 'M' button:
+ *        className includes 'bg-cyan-500/15 text-cyan-300 hover:bg-cyan-500/20'
+ *   3. Inactive 'S' button:
+ *        className includes 'hover:bg-white/5'
+ *        className does NOT include 'bg-cyan-500/15'
+ *   4. Click 'S' → S becomes active
+ *   5. S's className now has cyan + cyan-500/20 hover, M doesn't
+ */
+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: 1500, 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');
+    localStorage.removeItem('anet-topo-nodescale');
+  } 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) => ({
+    alias, status: 'working', 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'), mk('beta'), mk('gamma')] } });
+});
+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.waitForSelector('[data-topo-chrome-nodesize="M"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = () => page.evaluate(() => {
+  const grab = (sel) => {
+    const el = document.querySelector(sel);
+    return el ? {
+      className: el.getAttribute('class') || '',
+      active:    el.getAttribute('data-topo-chrome-nodesize-active'),
+    } : null;
+  };
+  return {
+    S: grab('[data-topo-chrome-nodesize="S"]'),
+    M: grab('[data-topo-chrome-nodesize="M"]'),
+    L: grab('[data-topo-chrome-nodesize="L"]'),
+  };
+});
+
+const initial = await probe();
+
+// Click S → S becomes active
+await page.locator('[data-topo-chrome-nodesize="S"]').click();
+await page.waitForTimeout(450); // past R171 crossfade window
+const afterS = await probe();
+
+await browser.close();
+
+const results = {
+  // Initial: M default-active
+  M_initial_active:           initial.M?.active === 'true',
+  M_initial_has_cyan_bg:      initial.M?.className.includes('bg-cyan-500/15'),
+  M_initial_has_cyan_text:    initial.M?.className.includes('text-cyan-300'),
+  M_initial_has_cyan_hover:   initial.M?.className.includes('hover:bg-cyan-500/20'),
+
+  S_initial_inactive:         initial.S?.active === 'false',
+  S_initial_no_cyan_bg:       !initial.S?.className.includes('bg-cyan-500/15'),
+  S_initial_has_white_hover:  initial.S?.className.includes('hover:bg-white/5'),
+  S_initial_no_cyan_hover:    !initial.S?.className.includes('hover:bg-cyan-500/20'),
+
+  // After click S: S active, M inactive
+  S_after_click_active:       afterS.S?.active === 'true',
+  S_after_has_cyan_bg:        afterS.S?.className.includes('bg-cyan-500/15'),
+  S_after_has_cyan_hover:     afterS.S?.className.includes('hover:bg-cyan-500/20'),
+  S_after_no_white_hover:     !afterS.S?.className.includes('hover:bg-white/5'),
+
+  M_after_inactive:           afterS.M?.active === 'false',
+  M_after_no_cyan_bg:         !afterS.M?.className.includes('bg-cyan-500/15'),
+  M_after_no_cyan_hover:      !afterS.M?.className.includes('hover:bg-cyan-500/20'),
+  M_after_has_white_hover:    afterS.M?.className.includes('hover:bg-white/5'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} nodesize active hover:`, JSON.stringify(results),
+  `\n  initial =`, initial,
+  `\n  afterS  =`, afterS);
+process.exit(ok ? 0 : 1);

package/scripts/topo-nodesize-crossfade-test.mjs

@@ -0,0 +1,141 @@
+/* Round 171 verification: nodeSize change (S/M/L) picks up the
+ * R170 crossfade pattern.
+ *
+ * Pre-R171 clicking S → L (or any non-active button) in the
+ * chrome node-size segment re-derived every node's radius +
+ * label sizing + (in grid) cell spacing in one paint frame.
+ * Wholesale visual shift, no easing.
+ *
+ * R171 introduces nodeSizeSwitching one-shot flag (parallel
+ * to R170 layoutSwitching). pickNodeScale arms it for 400ms
+ * UNLESS the picked scale matches the current one (clicking
+ * the already-active button bails early). The viewport <g>
+ * opacity dims to 0.45 via the same `(layoutSwitching ||
+ * nodeSizeSwitching)` OR expression.
+ *
+ * Test:
+ *   1. Idle: nodeSize-switching='false', opacity=1, M active
+ *   2. Click 'S' → flag='true', opacity='0.45', S now active
+ *   3. Wait 450ms → flag='false', opacity='1', S still active
+ *   4. Click 'S' again (same as current) → no flag arm (bail)
+ *   5. Click 'L' → flag='true' again
+ */
+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: 1500, 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');
+    // Default M (0.84) per the React useState — explicitly clear any
+    // saved value so the test starts at a known state.
+    localStorage.removeItem('anet-topo-nodescale');
+  } 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) => ({
+    alias, status: 'working', 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'), mk('beta'), mk('gamma')] } });
+});
+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.waitForSelector('[data-topo-viewport]', { timeout: 10000 });
+await page.waitForSelector('[data-topo-chrome-nodesize="S"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = () => page.evaluate(() => {
+  const g = document.querySelector('[data-topo-viewport]');
+  const sBtn = document.querySelector('[data-topo-chrome-nodesize="S"]');
+  const mBtn = document.querySelector('[data-topo-chrome-nodesize="M"]');
+  const lBtn = document.querySelector('[data-topo-chrome-nodesize="L"]');
+  return {
+    nodeSizeSwitching: g?.getAttribute('data-topo-viewport-nodesize-switching'),
+    opacity:           g?.style?.opacity || '',
+    transition:        g?.style?.transition || '',
+    s_active:          sBtn?.getAttribute('data-topo-chrome-nodesize-active'),
+    m_active:          mBtn?.getAttribute('data-topo-chrome-nodesize-active'),
+    l_active:          lBtn?.getAttribute('data-topo-chrome-nodesize-active'),
+  };
+});
+
+const idle = await probe();
+
+// Click S → flag arms, opacity drops
+await page.locator('[data-topo-chrome-nodesize="S"]').click();
+await page.waitForTimeout(50);
+const duringS = await probe();
+
+// Wait past 400ms window
+await page.waitForTimeout(450);
+const afterS = await probe();
+
+// Click S again (same as current) → no fire, no fade
+await page.locator('[data-topo-chrome-nodesize="S"]').click();
+await page.waitForTimeout(50);
+const sameS = await probe();
+
+// Click L (different from S) → flag arms again
+await page.locator('[data-topo-chrome-nodesize="L"]').click();
+await page.waitForTimeout(50);
+const duringL = await probe();
+
+await page.waitForTimeout(450);
+const afterL = await probe();
+
+await browser.close();
+
+const results = {
+  viewport_found:                idle !== null,
+  idle_flag_false:               idle.nodeSizeSwitching === 'false',
+  idle_opacity_1:                idle.opacity === '1' || idle.opacity === '',
+  idle_has_opacity_transition:   idle.transition.includes('opacity 250ms'),
+  idle_M_active:                 idle.m_active === 'true',
+  idle_S_inactive:               idle.s_active === 'false',
+  idle_L_inactive:               idle.l_active === 'false',
+
+  S_armed_flag:                  duringS.nodeSizeSwitching === 'true',
+  S_armed_opacity_0p45:          duringS.opacity === '0.45',
+  S_active_after_click:          duringS.s_active === 'true',
+  S_M_deactivated:               duringS.m_active === 'false',
+
+  after_S_flag_false:            afterS.nodeSizeSwitching === 'false',
+  after_S_opacity_1:             afterS.opacity === '1',
+  after_S_still_S_active:        afterS.s_active === 'true',
+
+  sameS_no_arm:                  sameS.nodeSizeSwitching === 'false',
+  sameS_opacity_stable:          sameS.opacity === '1',
+
+  L_armed_flag:                  duringL.nodeSizeSwitching === 'true',
+  L_armed_opacity_0p45:          duringL.opacity === '0.45',
+  L_active_after_click:          duringL.l_active === 'true',
+  L_S_deactivated:               duringL.s_active === 'false',
+
+  after_L_flag_false:            afterL.nodeSizeSwitching === 'false',
+  after_L_opacity_1:             afterL.opacity === '1',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} nodesize crossfade:`, JSON.stringify(results),
+  `\n  idle     =`, idle,
+  `\n  during S =`, duringS,
+  `\n  after  S =`, afterS,
+  `\n  same   S =`, sameS,
+  `\n  during L =`, duringL,
+  `\n  after  L =`, afterL);
+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);

package/scripts/topo-orbit-busyness-test.mjs

@@ -0,0 +1,96 @@
+/* Round 131 verification: outer-ring orbit period buckets on
+ * workingCount, mirroring R84's hub-breath cadence. Idle fleet
+ * keeps the original 16s "calm sweep"; as work piles up the
+ * orbit accelerates to 14 / 12 / 10s. Both motion layers now
+ * read the same underlying "is the network busy" signal.
+ *
+ * Bucket boundaries identical to R84 (line ~2702):
+ *   workingCount === 0     → bucket 0, dur 16s
+ *   workingCount in [1, 2] → bucket 1, dur 14s
+ *   workingCount in [3, 5] → bucket 2, dur 12s
+ *   workingCount  >= 6     → bucket 3, dur 10s
+ *
+ * R50 only renders on cyber theme (light is skipped to keep the
+ * white surface clean). All probes use cyber.
+ *
+ * Probe fleet sizes pick one representative per bucket.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probe(workingCount, totalCount) {
+  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 = [];
+    for (let i = 0; i < totalCount; i++) {
+      sessions.push({
+        alias: `node${i}`,
+        status: i < workingCount ? 'working' : 'idle',
+        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 } });
+  });
+  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((n) => document.querySelectorAll('g[data-node]').length === n, totalCount, { timeout: 30000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const orbits = [...document.querySelectorAll('[data-topo-orbit-bucket]')];
+    return orbits.map(g => ({
+      bucket: g.getAttribute('data-topo-orbit-bucket'),
+      dur:    g.getAttribute('data-topo-orbit-dur'),
+      animDur: g.querySelector('animateTransform')?.getAttribute('dur'),
+    }));
+  });
+
+  await browser.close();
+  return out;
+}
+
+// Pick one from each bucket
+const b0 = await probe(0, 4);  // workingCount=0  → bucket 0, dur 16
+const b1 = await probe(2, 4);  // workingCount=2  → bucket 1, dur 14
+const b2 = await probe(4, 5);  // workingCount=4  → bucket 2, dur 12
+const b3 = await probe(7, 8);  // workingCount=7  → bucket 3, dur 10
+
+const allConsistent = (orbits, bucket, dur) =>
+  orbits.length === 4 &&
+  orbits.every(o => o.bucket === String(bucket) && o.dur === String(dur) && o.animDur === `${dur}s`);
+
+const results = {
+  b0_fourOrbits:  b0.length === 4,
+  b0_bucket0_16s: allConsistent(b0, 0, 16),
+  b1_bucket1_14s: allConsistent(b1, 1, 14),
+  b2_bucket2_12s: allConsistent(b2, 2, 12),
+  b3_bucket3_10s: allConsistent(b3, 3, 10),
+  // dur strictly decreases as busy increases
+  dur_monotonic:
+    Number(b0[0]?.dur) > Number(b1[0]?.dur) &&
+    Number(b1[0]?.dur) > Number(b2[0]?.dur) &&
+    Number(b2[0]?.dur) > Number(b3[0]?.dur),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} orbit busyness:`, JSON.stringify(results),
+  `\n  b0(0w/4)=`, b0,
+  `\n  b1(2w/4)=`, b1,
+  `\n  b2(4w/5)=`, b2,
+  `\n  b3(7w/8)=`, b3);
+process.exit(ok ? 0 : 1);