@sleep2agi/agent-network-dashboard 0.4.6-preview.27 → 0.4.6-preview.270

package/scripts/topo-recent-signal-empty-hint-test.mjs

@@ -0,0 +1,73 @@
+/* Round 110 verification: recent-signal empty placeholder gains a
+ * sub-text hint so the empty state reads as intentional invitation
+ * rather than a stuck-loading state. Primary line "no flow yet"
+ * stays at the same position semantics (now y=54 instead of y=60
+ * to balance the two-line stack within the panel); sub-line at
+ * y=68 says "send a message between agents".
+ *
+ * Verifies:
+ *   - both lines render when flowLinks is empty
+ *   - both lines disappear when flowLinks has content
+ *   - data-recent-signal-empty + data-recent-signal-empty-hint
+ *     attributes are stable test hooks
+ */
+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 fresh = new Date(Date.now() - 30 * 1000).toISOString();
+
+const probe = async (withFlow) => {
+  const ctx = await browser.newContext({ viewport: { width: 1400, height: 1200 } });
+  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 {}
+  });
+  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: '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: [mk('alpha'), mk('beta')] } });
+  });
+  const now = Date.now();
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: withFlow ? [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - 10000).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' });
+  await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 2, { timeout: 30000 });
+  await page.waitForTimeout(600);
+  const data = await page.evaluate(() => ({
+    empty:     document.querySelector('[data-recent-signal-empty]')?.textContent || null,
+    emptyHint: document.querySelector('[data-recent-signal-empty-hint]')?.textContent || null,
+    rowCount:  document.querySelectorAll('[data-recent-row]').length,
+  }));
+  await ctx.close();
+  return data;
+};
+
+const empty = await probe(false);
+const full  = await probe(true);
+await browser.close();
+
+const results = {
+  empty_primaryLineShown:  empty.empty === 'no flow yet',
+  empty_hintShown:         /^send a message between agents$/.test(empty.emptyHint || ''),
+  empty_noRows:            empty.rowCount === 0,
+  full_primaryGone:        full.empty === null,
+  full_hintGone:           full.emptyHint === null,
+  full_rowsRendered:       full.rowCount >= 1,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-signal empty hint:`, JSON.stringify(results),
+  `\n  empty=`, empty,
+  `\n  full=`,  full);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-signal-empty-test.mjs

@@ -0,0 +1,63 @@
+/* Round 45 verification: recent-signal panel shows "no flow yet" placeholder
+ * when flowLinks is empty; renders normal link rows when populated. */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+async function probe({ msgs }) {
+  const ctx = await browser.newContext({ viewport: { width: 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.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 = ['a', 'b'].map(a => ({
+      alias: a, status: 'idle', network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+  await page.waitForTimeout(500);
+  const data = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    const empty = svg.querySelector('text[data-recent-signal-empty]');
+    // count flow-link description rows in the recent-signal panel (translate(16,16))
+    const panel = [...svg.querySelectorAll(':scope > g[transform^="translate(16, 16)"]')][0];
+    const linkRows = panel ? [...panel.querySelectorAll('text')].filter(t => /->.*\/.*\//.test(t.textContent || '')).length : 0;
+    return { emptyShown: !!empty, emptyText: empty?.textContent || null, linkRows };
+  });
+  await ctx.close();
+  return data;
+}
+
+const noFlow = await probe({ msgs: [] });
+const withFlow = await probe({ msgs: [
+  { from_alias: 'a', to_alias: 'b', content: 'hello', created_at: new Date().toISOString() },
+] });
+await browser.close();
+
+const results = {
+  emptyShowsPlaceholder: noFlow.emptyShown === true && /no flow yet/i.test(noFlow.emptyText || ''),
+  emptyHidesLinkRows: noFlow.linkRows === 0,
+  populatedHidesPlaceholder: withFlow.emptyShown === false,
+  populatedShowsLinkRows: withFlow.linkRows >= 1,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-signal empty state:`, JSON.stringify(results),
+  `\n  noFlow=`, noFlow, `\n  withFlow=`, withFlow);
+process.exit(ok ? 0 : 1);

package/scripts/topo-reduced-motion-test.mjs

@@ -0,0 +1,77 @@
+/* Round 36 verification: prefers-reduced-motion disables all SMIL
+ * animations in the topology. Round 29 zeroed CSS via media query;
+ * SVG <animate> / <animateMotion> elements need JS to opt out and
+ * this round wires that via the useReducedMotion hook. */
+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({ reduce, layout }) {
+  const ctx = await browser.newContext({
+    viewport: { width: 1280, height: 1600 },
+    reducedMotion: reduce ? 'reduce' : 'no-preference',
+  });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript((lay) => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', lay);
+      localStorage.setItem('anet-topo-view', JSON.stringify({ zoom: 1, x: 0, y: 0 }));
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, layout);
+  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';
+    // Include a 'working' status so the working pulse path renders.
+    const sessions = [
+      { alias: 'wkr', status: 'working', network_id: nid, project_dir: null,
+        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+      { alias: 'idl', 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 } });
+  });
+  // Inject a tiny message so a flow link + particle render.
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+    { from_alias: 'wkr', to_alias: 'idl', content: 'hi', created_at: fresh },
+  ] } }));
+  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 === 2, { timeout: 30000 });
+  await page.waitForTimeout(600);
+  // Click a node so the click ripple is invoked (it should NOT render under reduced motion).
+  await page.locator('g[data-node="wkr"]').click().catch(() => {});
+  await page.waitForTimeout(120);
+  const counts = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return {
+      animate: svg.querySelectorAll('animate').length,
+      animateMotion: svg.querySelectorAll('animateMotion').length,
+    };
+  });
+  await ctx.close();
+  return counts;
+}
+
+// Baseline (no reduce) — many SMIL elements expected.
+const normalRing = await probe({ reduce: false, layout: 'ring' });
+// Reduced motion — every SMIL element should be gone.
+const reducedRing = await probe({ reduce: true, layout: 'ring' });
+const reducedGrid = await probe({ reduce: true, layout: 'grid' });
+
+await browser.close();
+const results = {
+  baselineHasAnimations: normalRing.animate + normalRing.animateMotion > 0,
+  reducedRingDropsAll: reducedRing.animate === 0 && reducedRing.animateMotion === 0,
+  reducedGridDropsAll: reducedGrid.animate === 0 && reducedGrid.animateMotion === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} reduced motion:`, JSON.stringify(results),
+  `\n  normalRing=`, normalRing, `\n  reducedRing=`, reducedRing, `\n  reducedGrid=`, reducedGrid);
+process.exit(ok ? 0 : 1);

package/scripts/topo-reset-spin-test.mjs

@@ -0,0 +1,120 @@
+/* Round 184 verification: chrome reset button gets a one-shot
+ * icon spin on click — visual confirmation that the click
+ * registered.
+ *
+ * Pre-R184 the reset button triggered R168 smoothView crossfade
+ * on the canvas but the button itself had no on-button feedback.
+ * R184 arms resetSpinning for 460ms on click; the SVG icon
+ * picks up `.anet-reset-spin` CSS animation (450ms ease-out,
+ * -360°).
+ *
+ * Test:
+ *   1. Idle: data-topo-chrome-reset-spinning='false',
+ *            SVG icon has NO 'anet-reset-spin' className
+ *   2. Click reset → flag='true' within 50ms,
+ *                    SVG icon has 'anet-reset-spin' className
+ *   3. Wait 500ms → flag='false', className removed
+ *   4. CSS animation keyframe 'anet-reset-spin' exists in stylesheet
+ *      (rotates -360deg)
+ */
+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'); } 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-reset]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = () => page.evaluate(() => {
+  const btn = document.querySelector('[data-topo-chrome-reset]');
+  const icon = document.querySelector('[data-topo-chrome-reset-icon]');
+  return {
+    btnSpinningAttr: btn?.getAttribute('data-topo-chrome-reset-spinning'),
+    iconClass:       icon?.getAttribute('class') || '',
+  };
+});
+
+const idle = await probe();
+
+// First zoom in so reset has visible effect (not strictly needed for the
+// spin test, but exercises the resetView path alongside the spin)
+await page.keyboard.press('+');
+await page.keyboard.press('+');
+await page.waitForTimeout(200);
+
+// Click reset button — spin should arm
+await page.locator('[data-topo-chrome-reset]').click();
+await page.waitForTimeout(50);
+const duringSpin = await probe();
+
+// Wait past the 460ms window
+await page.waitForTimeout(500);
+const afterSpin = await probe();
+
+// Verify the CSS keyframe exists in the stylesheet (rotates negatively)
+const cssCheck = await page.evaluate(() => {
+  for (const sheet of document.styleSheets) {
+    let rules;
+    try { rules = sheet.cssRules; } catch { continue; }
+    if (!rules) continue;
+    for (const rule of rules) {
+      // CSSKeyframesRule has .name and .cssText listing keyframes
+      if (rule.type === 7 /* KEYFRAMES_RULE */ && rule.name === 'anet-reset-spin') {
+        return {
+          found: true,
+          cssText: rule.cssText,
+        };
+      }
+    }
+  }
+  return { found: false, cssText: '' };
+});
+
+await browser.close();
+
+const results = {
+  idle_attr_false:       idle.btnSpinningAttr === 'false',
+  idle_no_spin_class:    !idle.iconClass.includes('anet-reset-spin'),
+
+  spin_attr_true:        duringSpin.btnSpinningAttr === 'true',
+  spin_has_class:        duringSpin.iconClass.includes('anet-reset-spin'),
+
+  after_attr_false:      afterSpin.btnSpinningAttr === 'false',
+  after_no_spin_class:   !afterSpin.iconClass.includes('anet-reset-spin'),
+
+  keyframe_found:        cssCheck.found,
+  keyframe_negative_360: cssCheck.cssText.includes('-360deg') ||
+                         cssCheck.cssText.includes('rotate(-360'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} reset-spin:`, JSON.stringify(results),
+  `\n  idle:`, idle,
+  `\n  duringSpin:`, duringSpin,
+  `\n  afterSpin:`, afterSpin,
+  `\n  keyframe:`, cssCheck);
+process.exit(ok ? 0 : 1);

package/scripts/topo-runtime-badge-grow-test.mjs

@@ -0,0 +1,114 @@
+/* Round 208 verification: runtime badge (CLI/SDK/HTTP icon at the
+ * bottom-right of each node avatar) grows r + thickens stroke on
+ * parent-node hover. Completes the micro-lift radius-axis family:
+ *   R177 hub ring        r 14  → 17  on hub-hover
+ *   R197 legend swatch   r 5.5 → 7   on row-hover/pin
+ *   R208 runtime badge   r 7   → 8   on node-hover (online)
+ *                       (r 5.5 → 6.5 offline)
+ *
+ * Test (cyber dark, 4 working sessions with runtime='cli-claude-code'
+ * which maps to a runtime identity → badge renders):
+ *   1. 4 [data-runtime-badge] badges present (one per node).
+ *   2. Idle: all data-runtime-badge-active='false', computed r ≈ 7,
+ *      strokeWidth ≈ 1.5.
+ *   3. Transition includes 'r 150ms' AND 'stroke-width 150ms'.
+ *   4. Hover g[data-node="alpha"] → wait past 180ms.
+ *   5. alpha badge: active='true', r ≈ 8, strokeWidth ≈ 2.
+ *   6. Other (non-hovered) badges stay active='false', r ≈ 7,
+ *      strokeWidth ≈ 1.5.
+ *   7. Move away — alpha badge back to 'false', r ≈ 7.
+ */
+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'); } 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: 'claude-code-cli',
+    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'), mk('delta'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r2) => r2.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 });
+// SVG <circle> doesn't pass Playwright's default visibility check the
+// same way HTML elements do — wait for DOM attachment instead.
+await page.waitForSelector('[data-runtime-badge]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probeAll = async () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-runtime-badge]')].map(el => {
+    const cs = getComputedStyle(el);
+    return {
+      alias:       el.getAttribute('data-runtime-badge'),
+      active:      el.getAttribute('data-runtime-badge-active'),
+      r:           parseFloat(cs.r),
+      strokeWidth: parseFloat(cs.strokeWidth),
+      transition:  el.style.transition,
+    };
+  });
+});
+
+const idle = await probeAll();
+
+await page.hover('g[data-node="alpha"]');
+await page.waitForTimeout(200);
+const hovered = await probeAll();
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(200);
+const settled = await probeAll();
+
+await browser.close();
+
+const idleAlpha    = idle.find(b => b.alias === 'alpha');
+const idleBeta     = idle.find(b => b.alias === 'beta');
+const hoverAlpha   = hovered.find(b => b.alias === 'alpha');
+const hoverBeta    = hovered.find(b => b.alias === 'beta');
+const settledAlpha = settled.find(b => b.alias === 'alpha');
+
+const near = (got, want, tol = 0.4) => Math.abs(got - want) < tol;
+
+const results = {
+  four_badges_present:           idle.length === 4,
+  idle_all_inactive:             idle.every(b => b.active === 'false'),
+  idle_all_r_7:                  idle.every(b => near(b.r, 7)),
+  idle_all_stroke_1p5:           idle.every(b => near(b.strokeWidth, 1.5)),
+  transition_has_r:              idle.every(b => /\br\s+(?:150ms|0\.15s)/.test(b.transition || '')),
+  transition_has_stroke_width:   idle.every(b => /stroke-width\s+(?:150ms|0\.15s)/.test(b.transition || '')),
+
+  hover_alpha_active:            hoverAlpha?.active === 'true',
+  hover_alpha_r_grown:           near(hoverAlpha?.r ?? 0, 8),
+  hover_alpha_stroke_thicker:    near(hoverAlpha?.strokeWidth ?? 0, 2),
+  hover_beta_stays_inactive:     hoverBeta?.active === 'false',
+  hover_beta_r_unchanged:        near(hoverBeta?.r ?? 0, 7),
+  hover_beta_stroke_unchanged:   near(hoverBeta?.strokeWidth ?? 0, 1.5),
+
+  settled_alpha_inactive:        settledAlpha?.active === 'false',
+  settled_alpha_r_back:          near(settledAlpha?.r ?? 0, 7),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} runtime badge grow:`, JSON.stringify(results),
+  `\n  idle:`,     idle,
+  `\n  hovered:`,  hovered,
+  `\n  settled:`,  settled);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,110 @@
+/* Round 145 verification: R46 idle-spoke flow rate buckets on
+ * workingCount, completing the 4-layer busyness-driven motion
+ * family:
+ *   R84  hub breath          (centre)
+ *   R131 outer-ring orbit    (periphery)
+ *   R132 groupbox march      (per-team, grid layout)
+ *   R145 idle-spoke flow     (ring layout, hub→nodes) — new
+ *
+ * Bucket ladder shared across the four layers (same R84
+ * thresholds):
+ *   workingCount === 0     → bucket 0
+ *   workingCount in [1, 2] → bucket 1
+ *   workingCount in [3, 5] → bucket 2
+ *   workingCount  >= 6     → bucket 3
+ *
+ * Idle-spoke durations per bucket: 2.8 / 2.4 / 2.0 / 1.6 seconds
+ * (R46 baseline 2.4s is bucket 1).
+ *
+ * Spokes only render in ring layout. Active spokes (carrying flow
+ * traffic) don't get the animation — they're solid bright strokes.
+ * Only idle spokes carry the .anet-topo-spoke-flow class and the
+ * --spoke-dur var. The test seeds 0 messages so all spokes are idle.
+ */
+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');
+      // ring layout is R145's target — it's also the default, but
+      // pinning explicitly defends against future default flips.
+      localStorage.setItem('anet-topo-layout', 'ring');
+    } 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 } });
+  });
+  // 0 messages → no active spokes → every spoke is idle (.anet-topo-spoke-flow)
+  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 spokes = [...document.querySelectorAll('path.anet-topo-spoke-flow')];
+    return spokes.map(p => ({
+      bucket: p.getAttribute('data-topo-spoke-bucket'),
+      dur:    p.getAttribute('data-topo-spoke-dur'),
+      // Resolved animation-duration from computed style — confirms
+      // the CSS var bridge through to the cascade.
+      cssDur: getComputedStyle(p).getPropertyValue('animation-duration').trim(),
+    }));
+  });
+  await browser.close();
+  return out;
+}
+
+// One probe per bucket
+const b0 = await probe(0, 4);  // 0 working / 4 idle  → bucket 0 (2.8s)
+const b1 = await probe(2, 4);  // 2 working / 2 idle  → bucket 1 (2.4s)
+const b2 = await probe(4, 5);  // 4 working / 1 idle  → bucket 2 (2.0s)
+const b3 = await probe(7, 8);  // 7 working / 1 idle  → bucket 3 (1.6s)
+
+const consistent = (spokes, bucket, dur) =>
+  spokes.length > 0 &&
+  spokes.every(s => s.bucket === String(bucket) && s.dur === String(dur) && s.cssDur === `${dur}s`);
+
+const results = {
+  b0_someSpokes:   b0.length > 0,
+  b0_bucket0_2_8s: consistent(b0, 0, 2.8),
+  b1_bucket1_2_4s: consistent(b1, 1, 2.4),
+  b2_bucket2_2_0s: consistent(b2, 2, 2.0),
+  b3_bucket3_1_6s: consistent(b3, 3, 1.6),
+  // dur strictly decreases as busy climbs
+  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 ? '✅' : '❌'} spoke busyness:`, JSON.stringify(results),
+  `\n  b0(0w/4)=`, b0.slice(0,1),
+  `\n  b1(2w/4)=`, b1.slice(0,1),
+  `\n  b2(4w/5)=`, b2.slice(0,1),
+  `\n  b3(7w/8)=`, b3.slice(0,1));
+process.exit(ok ? 0 : 1);

package/scripts/topo-spoke-tint-test.mjs

@@ -0,0 +1,96 @@
+/* Round 240 verification: backdrop spokes (6 radar-style lines)
+ * tint to pal.legendAccent on any pinned filter, mirroring R93's
+ * tier-ring treatment. Background scaffolding now signals
+ * 'filtered mode' as a unified set instead of half-and-half.
+ *
+ * Cyber theme palette:
+ *   pal.ringStroke   = #164e63 = rgb(22, 78, 99)
+ *   pal.legendAccent = #67e8f9 = rgb(103, 232, 249)
+ *
+ * Test scope:
+ *   - rest state (no pin):  all 6 spokes stroke = ringStroke
+ *   - pinned state:         all 6 spokes stroke = legendAccent
+ *   - transition wiring:    style.transition contains 'stroke 200ms'
+ *     (browser may normalise to '0.2s' — accept either)
+ *   - data-topo-spoke-tinted attr flips false ↔ true
+ *
+ * Scenario: 4 working agents (single tier, simple geometry).
+ * Click the working pressure-bar segment to pin status=working.
+ */
+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'); } 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: 'claude-code-cli',
+    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'), mk('delta'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r2) => r2.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.waitForSelector('[data-topo-spoke-angle]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(400);
+
+const probeSpokes = (page) => page.evaluate(() => {
+  const spokes = Array.from(document.querySelectorAll('[data-topo-spoke-angle]'));
+  return spokes.map((s) => ({
+    angle:      s.getAttribute('data-topo-spoke-angle'),
+    tinted:     s.getAttribute('data-topo-spoke-tinted'),
+    fill:       getComputedStyle(s).stroke,
+    transition: getComputedStyle(s).transition,
+  }));
+});
+
+const rest = await probeSpokes(page);
+
+// Pin working status via pressure-bar segment click
+await page.locator('[data-pressure-seg="working"]').first().click();
+await page.waitForTimeout(400);
+const pinned = await probeSpokes(page);
+
+await browser.close();
+
+const RING_RGB   = 'rgb(22, 78, 99)';
+const ACCENT_RGB = 'rgb(103, 232, 249)';
+// Browser normalises 200ms → 0.2s
+const hasTransition = (s) => /stroke\s+(?:200ms|0\.2s)/.test(s || '');
+
+const results = {
+  six_spokes:             rest.length === 6,
+  rest_all_untinted:      rest.every(s => s.tinted === 'false'),
+  rest_all_ring_stroke:   rest.every(s => s.fill === RING_RGB),
+  rest_all_has_transition: rest.every(s => hasTransition(s.transition)),
+
+  pinned_six_spokes:      pinned.length === 6,
+  pinned_all_tinted:      pinned.every(s => s.tinted === 'true'),
+  pinned_all_accent:      pinned.every(s => s.fill === ACCENT_RGB),
+  pinned_all_has_transition: pinned.every(s => hasTransition(s.transition)),
+
+  // Angles match the original 0/30/60/90/120/150 pattern (sanity)
+  angles_correct:         JSON.stringify(rest.map(s => s.angle).sort())
+                          === JSON.stringify(['0','120','150','30','60','90']),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} spoke tint:`, JSON.stringify(results),
+  '\n  rest:  ',   rest.map(s => ({ a: s.angle, t: s.tinted, fill: s.fill })),
+  '\n  pinned:',   pinned.map(s => ({ a: s.angle, t: s.tinted, fill: s.fill })));
+process.exit(ok ? 0 : 1);