@sleep2agi/agent-network-dashboard 0.4.6-preview.20 → 0.4.6-preview.200

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-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-status-chip-hover-test.mjs

@@ -0,0 +1,101 @@
+/* Round 79 verification: header working + online count chips become
+ * hover affordances (sister to R77 active-links chip).
+ *  - Hover "N working" → setHoveredStatus('working') → idle + offline
+ *    nodes dim, working stays bright. Same outcome as R55 legend row
+ *    hover, just from the chip surface.
+ *  - Hover "N online" with working present → same as above.
+ *  - Mouseleave restores baseline.
+ *
+ * Fleet: 1 working (wkr), 2 idle (idl1, idl2), 1 offline (off).
+ */
+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');
+    localStorage.setItem('anet-topo-layout', 'ring');
+    sessionStorage.setItem('anet_v3_auth', '1');
+    sessionStorage.removeItem('anet-topo-pinned-status');
+    sessionStorage.removeItem('anet-topo-pinned-group');
+  } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+const stale = new Date(Date.now() - 30 * 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, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'idl1', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'idl2', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'off',  status: 'offline', network_id: nid, project_dir: null, created_at: stale, updated_at: stale, last_seen_at: stale },
+  ];
+  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 === 4, { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const opacities = () => page.evaluate(() => {
+  const o = {};
+  for (const a of ['wkr', 'idl1', 'idl2', 'off']) {
+    const g = document.querySelector(`g[data-node="${a}"]`);
+    o[a] = g ? +(g.style.opacity || '1') : null;
+  }
+  return o;
+});
+
+const before = await opacities();
+
+// Hover working chip
+await page.locator('[data-working-chip]').hover();
+await page.waitForTimeout(250);
+const onWorking = await opacities();
+
+// Move away
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterWorking = await opacities();
+
+// Hover online chip (working present → routes to 'working')
+await page.locator('[data-online-chip]').hover();
+await page.waitForTimeout(250);
+const onOnline = await opacities();
+
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterOnline = await opacities();
+
+await browser.close();
+
+const bright = (v) => v != null && v >= 0.55;
+const dim    = (v) => v != null && v < 0.4;
+const results = {
+  before_baseline:           bright(before.wkr) && bright(before.idl1) && bright(before.idl2),
+  working_keepsWkrBright:    bright(onWorking.wkr),
+  working_dimsIdle:          dim(onWorking.idl1) && dim(onWorking.idl2),
+  working_dimsOffline:       dim(onWorking.off),
+  workingLeave_restoresAll:  bright(afterWorking.wkr) && bright(afterWorking.idl1),
+  online_keepsWkrBright:     bright(onOnline.wkr),  // routes to working filter
+  online_dimsIdle:           dim(onOnline.idl1) && dim(onOnline.idl2),
+  onlineLeave_restoresAll:   bright(afterOnline.wkr) && bright(afterOnline.idl1),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-chip hover:`, JSON.stringify(results),
+  `\n  before=`,        before,
+  `\n  onWorking=`,     onWorking,
+  `\n  afterWorking=`,  afterWorking,
+  `\n  onOnline=`,      onOnline,
+  `\n  afterOnline=`,   afterOnline);
+process.exit(ok ? 0 : 1);

package/scripts/topo-status-chip-tooltip-test.mjs

@@ -0,0 +1,95 @@
+/* Round 113 verification: chip-row "N working" + "N online" tooltips
+ * list matched aliases. Closes the last hover surfaces in the chip-
+ * row that had generic "Hover to highlight" titles. Same R97-R102 /
+ * R101 alias-list pattern.
+ *
+ * Fleet: 2 working (wkr1/2) + 2 idle (idl1/2) + 1 offline (off1).
+ *   working chip title contains wkr1, wkr2; data-working-chip-aliases CSV matches
+ *   online chip title contains all online aliases (4); data-online-chip-aliases matches
+ *   pin state flips the action hint
+ */
+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();
+const stale10 = new Date(Date.now() - 10 * 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, ts) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: ts, updated_at: ts, last_seen_at: ts,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('wkr1', 'working', fresh),
+    mk('wkr2', 'working', fresh),
+    mk('idl1', 'idle',    fresh),
+    mk('idl2', 'idle',    fresh),
+    mk('off1', 'offline', stale10),
+  ] } });
+});
+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 === 5, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const read = (sel) => page.evaluate((s) => {
+  const el = document.querySelector(s);
+  if (!el) return null;
+  return {
+    title:   el.getAttribute('title') || '',
+    aliases: el.getAttribute('data-working-chip-aliases') || el.getAttribute('data-online-chip-aliases') || '',
+  };
+}, sel);
+
+const workingBefore = await read('[data-working-chip]');
+const onlineBefore  = await read('[data-online-chip]');
+
+// Pin working status — action hint should flip.
+await page.evaluate(() => {
+  sessionStorage.setItem('anet-topo-pinned-status', 'working');
+  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: 'working' } }));
+});
+await page.waitForTimeout(300);
+const workingPinned = await read('[data-working-chip]');
+
+await browser.close();
+
+const sameSet = (csv, expected) => {
+  const got = new Set(csv.split(',').filter(Boolean));
+  const exp = new Set(expected);
+  return got.size === exp.size && [...exp].every(x => got.has(x));
+};
+
+const results = {
+  workingBefore_aliasesMatch:    sameSet(workingBefore?.aliases || '', ['wkr1', 'wkr2']),
+  workingBefore_titleListsThem:  /wkr1.*wkr2|wkr2.*wkr1/.test(workingBefore?.title || ''),
+  workingBefore_titleClickHint:  /click to pin/.test(workingBefore?.title || ''),
+  onlineBefore_aliasesMatch:     sameSet(onlineBefore?.aliases || '', ['wkr1', 'wkr2', 'idl1', 'idl2']),
+  onlineBefore_titleListsThem:   /wkr1/.test(onlineBefore?.title || '') && /idl1/.test(onlineBefore?.title || ''),
+  pinnedWorking_aliasesStable:   sameSet(workingPinned?.aliases || '', ['wkr1', 'wkr2']),
+  pinnedWorking_titleHintFlipped:/pinned, Esc to clear/.test(workingPinned?.title || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-chip tooltip:`, JSON.stringify(results),
+  `\n  workingBefore=`,  workingBefore,
+  `\n  onlineBefore=`,   onlineBefore,
+  `\n  workingPinned=`,  workingPinned);
+process.exit(ok ? 0 : 1);

package/scripts/topo-svg-focus-test.mjs

@@ -0,0 +1,112 @@
+/* Round 156 verification: SVG <g> interactives gain
+ * `.anet-topo-svg-focus` for keyboard focus outline.
+ *
+ * Mirrors R155's chip-row treatment at the SVG scope. 6 surfaces:
+ *   data-node                       (R151 node body)
+ *   data-group-label-hit            (R63 group label)
+ *   data-edge-count-badge           (R121 edge badge)
+ *   data-recent-row                 (R116 recent-signal row)
+ *   data-recent-panel-more-nav      (R133 "+N more" footer)
+ *   data-legend-status              (R61 legend row)
+ *
+ * Class `.anet-topo-svg-focus:focus-visible` paints outline 2px
+ * cyan-300 (#67e8f9) with 2px outline-offset. Browser default
+ * focus ring on SVG is hard to spot against the dashboard
+ * canvas; explicit cyan matches the legendAccent palette.
+ *
+ * Test: every SVG interactive surface carries the class.
+ */
+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: 1600, 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');
+    // grid layout to surface group labels
+    localStorage.setItem('anet-topo-layout', 'grid');
+  } 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('agents-a1', 'working'), mk('agents-a2', 'working'),
+    mk('infra-b1',  'working'),
+  ] } });
+});
+
+const now = Date.now();
+// Edge midpoint count badge (R100) only renders when link.count >= 3.
+// Pair agents-a1 → agents-a2 gets 4 msgs to clear the threshold; add 4
+// other singletons so flowLinks.length = 5 → R128 "+ 2 more flows"
+// footer also renders.
+const msgs = [];
+for (let i = 0; i < 4; i++) {
+  msgs.push({
+    id: `a2a${i}`, from_alias: 'agents-a1', to_alias: 'agents-a2', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (10000 + i * 500)).toISOString(),
+  });
+}
+msgs.push({ id: 'm1', from_alias: 'agents-a2', to_alias: 'infra-b1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 11000).toISOString() });
+msgs.push({ id: 'm2', from_alias: 'infra-b1', to_alias: 'agents-a1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 12000).toISOString() });
+msgs.push({ id: 'm3', from_alias: 'agents-a1', to_alias: 'infra-b1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 13000).toISOString() });
+msgs.push({ id: 'm4', from_alias: 'agents-a2', to_alias: 'agents-a1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 14000).toISOString() });
+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 === 3, { timeout: 30000 });
+await page.waitForSelector('[data-recent-row]', { timeout: 10000 });
+await page.waitForSelector('[data-recent-panel-more-nav]', { timeout: 10000 });
+await page.waitForSelector('[data-edge-count-badge]', { timeout: 10000 });
+await page.waitForSelector('[data-group-label-hit]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const out = await page.evaluate(() => {
+  const has = (sel) => {
+    const el = document.querySelector(sel);
+    return el && (el.getAttribute('class') || '').includes('anet-topo-svg-focus');
+  };
+  return {
+    nodeBody:           has('g[data-node]'),
+    groupLabel:         has('[data-group-label-hit]'),
+    edgeCountBadge:     has('[data-edge-count-badge]'),
+    recentRow:          has('[data-recent-row]'),
+    recentPanelMoreNav: has('[data-recent-panel-more-nav]'),
+    legendStatusRow:    has('[data-legend-status="working"]'),
+  };
+});
+
+await browser.close();
+
+const results = {
+  nodeBody_focus:           out.nodeBody === true,
+  groupLabel_focus:         out.groupLabel === true,
+  edgeCountBadge_focus:     out.edgeCountBadge === true,
+  recentRow_focus:          out.recentRow === true,
+  recentPanelMoreNav_focus: out.recentPanelMoreNav === true,
+  legendStatusRow_focus:    out.legendStatusRow === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} SVG focus class:`, JSON.stringify(results),
+  `\n  raw=`, out);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,94 @@
+/* Round 146 verification: R45 radar sweep rotation rate buckets on
+ * workingCount, completing the 5-layer busyness-driven motion family:
+ *
+ *   R84  hub grounding-halo breath  — 4 / 3.2 / 2.7 / 2.4 s
+ *   R131 outer-ring orbit period    — 16 / 14 / 12 / 10 s
+ *   R132 groupbox marching ants     — 14 / 12 / 10 / 8 s  (grid only)
+ *   R145 idle-spoke flow rate       — 2.8 / 2.4 / 2.0 / 1.6 s (ring only)
+ *   R146 radar sweep rotation       — 8 / 6 / 4 / 3 s  (both layouts)
+ *
+ * Shared R84 thresholds (0 / 1-2 / 3-5 / 6+) drive every layer. The
+ * sweep is the only layer visible in BOTH layouts and ties the family
+ * together at the canvas-wide scope.
+ *
+ * R45 baseline 6s sits at bucket 1 — preserved when workingCount in
+ * [1, 2] so existing demos and screenshots stay identical.
+ */
+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.waitForSelector('.anet-topo-sweep', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const g = document.querySelector('.anet-topo-sweep');
+    return {
+      bucket: g?.getAttribute('data-topo-sweep-bucket'),
+      dur:    g?.getAttribute('data-topo-sweep-dur'),
+      cssDur: g ? getComputedStyle(g).getPropertyValue('animation-duration').trim() : null,
+    };
+  });
+  await browser.close();
+  return out;
+}
+
+const b0 = await probe(0, 4);  // 0 working → bucket 0 (8s)
+const b1 = await probe(2, 4);  // 2 working → bucket 1 (6s, R45 baseline)
+const b2 = await probe(4, 5);  // 4 working → bucket 2 (4s)
+const b3 = await probe(7, 8);  // 7 working → bucket 3 (3s)
+
+const consistent = (probe, bucket, dur) =>
+  probe.bucket === String(bucket) && probe.dur === String(dur) && probe.cssDur === `${dur}s`;
+
+const results = {
+  b0_bucket0_8s:   consistent(b0, 0, 8),
+  b1_bucket1_6s:   consistent(b1, 1, 6),
+  b2_bucket2_4s:   consistent(b2, 2, 4),
+  b3_bucket3_3s:   consistent(b3, 3, 3),
+  // dur strictly decreases as busy climbs
+  dur_monotonic:
+    Number(b0.dur) > Number(b1.dur) &&
+    Number(b1.dur) > Number(b2.dur) &&
+    Number(b2.dur) > Number(b3.dur),
+  // R45 baseline preservation: bucket 1 still 6s
+  baseline_preserved: b1.dur === '6',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} sweep 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);