@sleep2agi/agent-network-dashboard 0.4.6-preview.14 → 0.4.6-preview.141

package/scripts/topo-legend-row-tint-test.mjs

@@ -0,0 +1,95 @@
+/* Round 105 verification: legend rows in the SVG panel pick up a
+ * row-background tint on hover and pin, mirroring R104's treatment
+ * on the recent-signal panel. The tint uses the ROW'S OWN swatch
+ * colour (working=green, idle=teal, offline=slate) so the user's
+ * eye associates the highlight with its swatch instead of a generic
+ * accent.
+ *
+ * Verifies idle / hover / pinned states via the new data-legend-
+ * row-tinted attribute + actual fill/opacity. Pin is stronger than
+ * hover; idle is transparent.
+ */
+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');
+    sessionStorage.removeItem('anet-topo-pinned-status');
+  } 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('wkr1', 'working'),
+    mk('idl1', 'idle'),
+    mk('off1', 'offline'),
+  ] } });
+});
+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 readRow = (key) => page.evaluate((k) => {
+  const g = document.querySelector(`[data-legend-status="${k}"]`);
+  if (!g) return null;
+  const rect = g.querySelector('rect');
+  return {
+    tinted:  rect?.getAttribute('data-legend-row-tinted') || '',
+    fill:    rect?.getAttribute('fill') || '',
+    opacity: rect?.getAttribute('opacity') || '',
+  };
+}, key);
+
+const before = await Promise.all(['working', 'idle', 'offline'].map(readRow));
+
+// Hover working.
+await page.locator('[data-legend-status="working"]').hover();
+await page.waitForTimeout(250);
+const onHoverWorking = await Promise.all(['working', 'idle', 'offline'].map(readRow));
+
+// Move away — clears hover.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+
+// Pin idle.
+await page.locator('[data-legend-status="idle"]').click();
+await page.waitForTimeout(250);
+const onPinIdle = await Promise.all(['working', 'idle', 'offline'].map(readRow));
+
+await browser.close();
+
+const opacity = (s) => parseFloat(s) || 0;
+const results = {
+  before_allTransparent: before.every(r => r?.tinted === 'none' && r?.fill === 'transparent'),
+  hoverWorking_workingTinted: onHoverWorking[0]?.tinted === 'hover' && onHoverWorking[0]?.fill !== 'transparent',
+  hoverWorking_othersUnchanged: onHoverWorking.slice(1).every(r => r?.tinted === 'none'),
+  hoverWorking_opacityLow:    opacity(onHoverWorking[0]?.opacity || '') > 0 && opacity(onHoverWorking[0]?.opacity || '') < 0.2,
+  pinIdle_idlePinned:         onPinIdle[1]?.tinted === 'pinned' && onPinIdle[1]?.fill !== 'transparent',
+  pinIdle_pinStrongerThanHover: opacity(onPinIdle[1]?.opacity || '') > opacity(onHoverWorking[0]?.opacity || ''),
+  pinIdle_otherRowsClean:     onPinIdle.filter((_, i) => i !== 1).every(r => r?.tinted === 'none'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend-row tint:`, JSON.stringify(results),
+  `\n  before=`,         before,
+  `\n  onHoverWorking=`, onHoverWorking,
+  `\n  onPinIdle=`,      onPinIdle);
+process.exit(ok ? 0 : 1);

package/scripts/topo-minimap-test.mjs

@@ -0,0 +1,68 @@
+/* Round 30 verification: minimap.
+ *  - not mounted at default view (1×, centered)
+ *  - mounted when zoomed in (one node dot per session, viewport rect)
+ *  - click recenters the canvas (view.x / view.y change) */
+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: 1600 } });
+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');
+    localStorage.setItem('anet-topo-view', JSON.stringify({ zoom: 1, x: 0, y: 0 }));
+    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 = ['A站', 'B站', 'C站', 'D站', 'E站', 'F站'].flatMap(g =>
+    Array.from({ length: 3 }, (_, i) => ({
+      alias: `${g}${i + 1}`, 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.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const minimap = '[data-topo-minimap]';
+const notMountedAtDefault = (await page.locator(minimap).count()) === 0;
+
+// Zoom in via `+` twice → view changes → minimap mounts
+await page.keyboard.press('=');
+await page.keyboard.press('=');
+await page.waitForTimeout(200);
+const mountedAfterZoom = (await page.locator(minimap).count()) === 1;
+const dotCount = await page.locator(`${minimap} svg circle`).count();
+const hasViewportRect = await page.locator(`${minimap} svg rect`).count() > 0;
+
+// Click on the minimap's far left → expect view.x to become more positive (canvas pans right)
+const beforeView = await page.evaluate(() => JSON.parse(localStorage.getItem('anet-topo-view')));
+const mmBox = await page.locator(minimap).boundingBox();
+await page.mouse.click(mmBox.x + 10, mmBox.y + mmBox.height / 2);
+await page.waitForTimeout(200);
+const afterView = await page.evaluate(() => JSON.parse(localStorage.getItem('anet-topo-view')));
+const clickRecenters = afterView.x !== beforeView.x || afterView.y !== beforeView.y;
+
+await browser.close();
+const results = {
+  notMountedAtDefault,
+  mountedAfterZoom,
+  oneDotPerSession: dotCount === 18, // 6 groups × 3 = 18 nodes
+  viewportRectPresent: hasViewportRect,
+  clickRecenters,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} minimap:`, JSON.stringify(results), `dots=${dotCount} view before=`, beforeView, `after=`, afterView);
+process.exit(ok ? 0 : 1);

package/scripts/topo-mobile-chips-test.mjs

@@ -0,0 +1,103 @@
+/* Round 47 verification: mobile chip collapse.
+ *  - At narrow viewport (375px), pressure / vendor-dist / active-links /
+ *    freshness chips are display:none; only essential chips render.
+ *  - At sm+ (≥640px), the full chip row is visible.
+ *  - Essential chips (Ring/Grid toggle + working + online) render at both. */
+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(width) {
+  const ctx = await browser.newContext({ viewport: { width, height: 900 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(() => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-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: 'wkr', status: 'working', network_id: nid, project_dir: null,
+        model: 'claude-opus-4', runtime: 'cli-claude-code',
+        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+      { alias: 'idl', status: 'idle', network_id: nid, project_dir: null,
+        model: 'gpt-5', runtime: 'codex-cli',
+        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: [
+    { from_alias: 'wkr', to_alias: 'idl', content: 'm', created_at: new Date().toISOString() },
+  ] } }));
+  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' });
+  // The Overview page auto-hides the topology when window.innerWidth < 1024
+  // (the lg breakpoint). On narrow viewports the user clicks "Show
+  // Topology" to surface it; mimic that here so the chip-row tests reach
+  // the actual code path. Wait for SWR to deliver sessions first so the
+  // button renders before we look for it.
+  await page.waitForTimeout(1500);
+  const showBtn = page.locator('button', { hasText: /Show Topology/i });
+  if (await showBtn.count() > 0) await showBtn.first().click();
+  await page.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+  await page.waitForTimeout(600);
+  const visible = (sel) => page.evaluate(s => {
+    const el = document.querySelector(s);
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0;
+  }, sel);
+  const result = {
+    workingChipVisible: await page.evaluate(() => {
+      // "{N} working" chip — find the green-tinted one
+      const spans = [...document.querySelectorAll('span')];
+      const chip = spans.find(s => /^\d+ working$/.test((s.textContent || '').trim()));
+      if (!chip) return false;
+      const r = chip.getBoundingClientRect();
+      return r.width > 0 && r.height > 0;
+    }),
+    onlineChipVisible: await page.evaluate(() => {
+      const spans = [...document.querySelectorAll('span')];
+      const chip = spans.find(s => /^\d+ online$/.test((s.textContent || '').trim()));
+      if (!chip) return false;
+      const r = chip.getBoundingClientRect();
+      return r.width > 0 && r.height > 0;
+    }),
+    pressureVisible: await visible('[data-fleet-pressure]'),
+    activeLinksVisible: await page.evaluate(() => {
+      const spans = [...document.querySelectorAll('span')];
+      const chip = spans.find(s => /active link/.test(s.textContent || ''));
+      if (!chip) return false;
+      const r = chip.getBoundingClientRect();
+      return r.width > 0 && r.height > 0;
+    }),
+    freshnessVisible: await visible('[data-freshness-chip]'),
+  };
+  await ctx.close();
+  return result;
+}
+
+const mobile = await probe(375);
+const desktop = await probe(900);
+await browser.close();
+
+const results = {
+  mobileEssentialsVisible: mobile.workingChipVisible && mobile.onlineChipVisible,
+  mobilePressureHidden: mobile.pressureVisible === false,
+  mobileActiveLinksHidden: mobile.activeLinksVisible === false,
+  mobileFreshnessHidden: mobile.freshnessVisible === false,
+  desktopAllVisible: desktop.workingChipVisible && desktop.onlineChipVisible && desktop.pressureVisible && desktop.activeLinksVisible && desktop.freshnessVisible,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} mobile chips:`, JSON.stringify(results),
+  `\n  mobile=`, mobile, `\n  desktop=`, desktop);
+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-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-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);