@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

package/scripts/topo-pressure-seg-self-hover-test.mjs

@@ -0,0 +1,126 @@
+/* Round 210 verification: pressure-bar segments deepen their OWN
+ * colour on hover via filter: brightness(1.2). Closes the chip-row
+ * "hover deepens own identity" family at a 6th surface (the
+ * pressure-bar scope previously had R83 wire setHoveredStatus but
+ * the segment itself stayed flat).
+ *
+ * Pre-R210 hovering a segment fired R55 canvas dim via
+ * setHoveredStatus, but the segment's own background stayed at the
+ * unmodified tier color. R210 makes the cause element (segment)
+ * light up the same gesture it fires on the canvas (effect element).
+ *
+ * Test (cyber dark, 2 working + 1 idle + 1 offline → 3 segments):
+ *   1. 3 [data-pressure-seg] segments rendered.
+ *   2. Idle: every segment has hovered='false', filter='none' (or
+ *      no filter style set).
+ *   3. Inline transition includes 'filter 150ms' alongside the
+ *      existing R165 width 220ms + R60 box-shadow 150ms.
+ *   4. Hover working segment → working hovered='true', filter
+ *      'brightness(1.2)'.
+ *   5. Other (idle/offline) segments stay hovered='false', no filter.
+ *   6. Move away → working back to hovered='false', no filter.
+ */
+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, status) => ({
+    alias, status, 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', 'working'),
+    mk('beta',  'working'),
+    mk('gamma', 'idle'),
+    mk('delta', 'offline'),
+  ] } });
+});
+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-pressure-seg="working"]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probe = async () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-pressure-seg]')].map(el => {
+    const cs = getComputedStyle(el);
+    return {
+      key:        el.getAttribute('data-pressure-seg'),
+      hovered:    el.getAttribute('data-pressure-seg-hovered'),
+      filter:     cs.filter,
+      inlineFilter: el.style.filter,
+      transition: el.style.transition,
+    };
+  });
+});
+
+const idle = await probe();
+
+await page.hover('[data-pressure-seg="working"]');
+await page.waitForTimeout(180);
+const hovered = await probe();
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(180);
+const settled = await probe();
+
+await browser.close();
+
+const idleWorking    = idle.find(s => s.key === 'working');
+const idleIdle       = idle.find(s => s.key === 'idle');
+const idleOffline    = idle.find(s => s.key === 'offline');
+const hovWorking     = hovered.find(s => s.key === 'working');
+const hovIdle        = hovered.find(s => s.key === 'idle');
+const settledWorking = settled.find(s => s.key === 'working');
+
+const isNoFilter = (s) => !s || s === 'none' || s === '';
+const hasBrightness = (s) => /brightness\s*\(\s*1\.2/.test(s || '');
+
+const results = {
+  three_segments_present:   idle.length === 3,
+  working_found:            !!idleWorking,
+  idle_found:               !!idleIdle,
+  offline_found:            !!idleOffline,
+
+  // Idle: no filter, hovered='false', transitions present
+  idle_all_not_hovered:     idle.every(s => s.hovered === 'false'),
+  idle_all_no_filter:       idle.every(s => isNoFilter(s.inlineFilter)),
+  transitions_have_filter:  idle.every(s => /filter\s+(?:150ms|0\.15s)/.test(s.transition || '')),
+  transitions_keep_width:   idle.every(s => /width\s+(?:220ms|0\.22s)/.test(s.transition || '')),
+  transitions_keep_bs:      idle.every(s => /box-shadow\s+(?:150ms|0\.15s)/.test(s.transition || '')),
+
+  // Hover working: brightness applied
+  hov_working_hovered_true: hovWorking?.hovered === 'true',
+  hov_working_has_filter:   hasBrightness(hovWorking?.inlineFilter)
+                            || hasBrightness(hovWorking?.filter),
+  // Other segments stay idle
+  hov_idle_stays_false:     hovIdle?.hovered === 'false',
+  hov_idle_no_filter:       isNoFilter(hovIdle?.inlineFilter),
+
+  // Settled: back to idle
+  settled_hovered_false:    settledWorking?.hovered === 'false',
+  settled_no_filter:        isNoFilter(settledWorking?.inlineFilter),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pressure-seg self-hover:`, JSON.stringify(results),
+  `\n  idle:`,    idle,
+  `\n  hovered:`, hovered,
+  `\n  settled:`, settled);
+process.exit(ok ? 0 : 1);

package/scripts/topo-pressure-seg-tooltip-test.mjs

@@ -0,0 +1,98 @@
+/* Round 102 verification: pressure-bar segment tooltips list the
+ * aliases that fall into that status bucket. Closes the last "how
+ * many but not which" gap in the chip-row surfaces. Composes with
+ * the existing R83 hover preview (canvas dims still answer it
+ * visually too) — this adds a screen-reader-friendly textual
+ * channel for the same info.
+ *
+ * Fleet: 2 working + 2 idle + 1 offline. Verify each segment's
+ * title contains the matching aliases + action hint; data-pressure-
+ * seg-aliases attr carries the full CSV.
+ */
+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 = (key) => page.evaluate((k) => {
+  const el = document.querySelector(`[data-pressure-seg="${k}"]`);
+  if (!el) return null;
+  return {
+    title:   el.getAttribute('title') || '',
+    aliases: el.getAttribute('data-pressure-seg-aliases') || '',
+  };
+}, key);
+
+const working = await read('working');
+const idle    = await read('idle');
+const offline = await read('offline');
+
+// Pin working — action hint should flip in the title.
+await page.locator('[data-pressure-seg="working"]').click();
+await page.waitForTimeout(250);
+const workingPinned = await read('working');
+
+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 = {
+  working_aliasesMatch:   sameSet(working?.aliases || '', ['wkr1', 'wkr2']),
+  working_titleListsThem: /wkr1.*wkr2|wkr2.*wkr1/.test(working?.title || ''),
+  working_titleClickHint: /click to highlight/.test(working?.title || ''),
+  working_titleStatusN:   /^2 working/m.test(working?.title || ''),
+  idle_aliasesMatch:      sameSet(idle?.aliases || '', ['idl1', 'idl2']),
+  idle_titleListsThem:    /idl1.*idl2|idl2.*idl1/.test(idle?.title || ''),
+  offline_aliasesMatch:   sameSet(offline?.aliases || '', ['off1']),
+  offline_titleListsThem: /off1/.test(offline?.title || ''),
+  workingPin_aliasesStable: sameSet(workingPinned?.aliases || '', ['wkr1', 'wkr2']),
+  workingPin_hintFlipped:   /click to release filter/.test(workingPinned?.title || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pressure-seg tooltip:`, JSON.stringify(results),
+  `\n  working:`,        working,
+  `\n  idle:`,           idle,
+  `\n  offline:`,        offline,
+  `\n  workingPinned:`,  workingPinned);
+process.exit(ok ? 0 : 1);

package/scripts/topo-pressure-seg-transition-test.mjs

@@ -0,0 +1,107 @@
+/* Round 165 verification: pressure-bar segments smoothly
+ * transition their widths.
+ *
+ * Pre-R165 segment widths snapped instantly when fleet
+ * composition shifted (e.g., a node going idle → working).
+ * R165 adds `transition: width 220ms ease-out, box-shadow
+ * 150ms ease-out` on each <span data-pressure-seg> inline
+ * style — smooths the breath, doesn't change semantics.
+ *
+ * Tests:
+ *   1. All segments carry the inline transition declaration
+ *   2. Pin one segment → boxShadow string changes (R60 idiom)
+ *   3. Width attribute is a percentage of (n/total)*100
+ */
+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();
+const stale = 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, last) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: last, updated_at: last, last_seen_at: last,
+  });
+  // 3 working + 2 idle + 1 offline = 6 total
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('a1', 'working', fresh), mk('a2', 'working', fresh), mk('a3', 'working', fresh),
+    mk('b1', 'idle',    fresh), mk('b2', 'idle',    fresh),
+    mk('c1', 'offline', stale),
+  ] } });
+});
+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 === 6, { timeout: 30000 });
+await page.waitForSelector('[data-pressure-seg]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const segs = ['working', 'idle', 'offline'].map(k => {
+    const el = document.querySelector(`[data-pressure-seg="${k}"]`);
+    if (!el) return null;
+    // Inline style is what we wrote; window.getComputedStyle reports the
+    // resolved value (which for `transition` is the long form).
+    const inlineTransition = el.style.transition || '';
+    const computedTransition = getComputedStyle(el).transition || '';
+    return {
+      key: k,
+      width: el.style.width,
+      inlineTransition,
+      // Match either width 220ms OR the resolved computed form.
+      hasTransitionWidth:
+        inlineTransition.includes('width 220ms') ||
+        /width\s+0\.22s|width\s+220ms/.test(computedTransition),
+      hasTransitionBoxShadow:
+        inlineTransition.includes('box-shadow 150ms') ||
+        /box-shadow\s+0\.15s|box-shadow\s+150ms/.test(computedTransition),
+    };
+  });
+  return segs;
+});
+
+// Pin the idle segment → boxShadow should appear (R60 inset rings)
+const boxBeforePin = await page.evaluate(() => {
+  const el = document.querySelector('[data-pressure-seg="idle"]');
+  return el ? el.style.boxShadow : null;
+});
+await page.locator('[data-pressure-seg="idle"]').click({ force: true });
+await page.waitForTimeout(300);
+const boxAfterPin = await page.evaluate(() => {
+  const el = document.querySelector('[data-pressure-seg="idle"]');
+  return el ? el.style.boxShadow : null;
+});
+
+await browser.close();
+
+const allOk = probe.every(p => p && p.hasTransitionWidth && p.hasTransitionBoxShadow);
+const results = {
+  three_segs_present:           probe.length === 3 && probe.every(p => p !== null),
+  all_have_transition_width:    probe.every(p => p?.hasTransitionWidth),
+  all_have_transition_boxShadow: probe.every(p => p?.hasTransitionBoxShadow),
+  working_width_50:             probe[0]?.width === '50%',   // 3/6
+  idle_width_33:                /33\.3|33%/.test(probe[1]?.width || ''),  // 2/6
+  offline_width_16:             /16\.6|16%/.test(probe[2]?.width || ''),  // 1/6
+  pin_changes_boxShadow:        boxBeforePin === '' && boxAfterPin !== '',
+  overall:                      allOk,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pressure-seg transition:`, JSON.stringify(results),
+  `\n  probes=`, probe,
+  `\n  box before/after pin =`, JSON.stringify(boxBeforePin), '→', JSON.stringify(boxAfterPin));
+process.exit(ok ? 0 : 1);

package/scripts/topo-pulse-dot-crossfade-test.mjs

@@ -0,0 +1,122 @@
+/* Round 214 verification: working-status pulse dot always-mounts;
+ * visibility crossfades via parent <g> opacity instead of mount/
+ * unmount snap. Extends R181/R182/R183/R213 always-mount-opacity-
+ * gate idiom down to per-node grain.
+ *
+ * Test (cyber dark, 4 sessions in mixed status):
+ *   1. 4 [data-pulse-wrapper] elements present (one per node —
+ *      always-mounted regardless of status).
+ *   2. Working sessions: data-pulse-visible='true', wrapper
+ *      opacity = 1.
+ *   3. Non-working sessions: data-pulse-visible='false', wrapper
+ *      opacity = 0.
+ *   4. Each wrapper has inline transition: 'opacity 300ms ease-out'.
+ *   5. Each wrapper contains the inner <circle> with the SMIL
+ *      <animate> still present (working-rate pulse R24 preserved).
+ *   6. SMIL animate attributeName='opacity', values cycling 1→0.25.
+ *
+ * The key invariant — pulse dot wrapper is DOM-present for ALL
+ * sessions (working and non-working), with visibility purely a
+ * CSS opacity gate.
+ */
+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, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // 2 working + 1 idle + 1 offline — pulse dot only mounts visibly for
+  // working, but R214 keeps wrapper in DOM for all 4
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'working'),
+    mk('beta',  'working'),
+    mk('gamma', 'idle'),
+    mk('delta', 'offline'),
+  ] } });
+});
+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-pulse-wrapper]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  return [...document.querySelectorAll('[data-pulse-wrapper]')].map(el => {
+    const cs = getComputedStyle(el);
+    const inner = el.querySelector('circle');
+    const animate = inner?.querySelector('animate');
+    return {
+      alias:       el.getAttribute('data-pulse-wrapper'),
+      visible:     el.getAttribute('data-pulse-visible'),
+      opacity:     parseFloat(cs.opacity),
+      transition:  el.style.transition,
+      hasInner:    !!inner,
+      animateAttr: animate?.getAttribute('attributeName'),
+      animateVals: animate?.getAttribute('values'),
+    };
+  });
+});
+
+await browser.close();
+
+const alpha    = probe.find(p => p.alias === 'alpha');
+const beta     = probe.find(p => p.alias === 'beta');
+const gamma    = probe.find(p => p.alias === 'gamma');
+const delta    = probe.find(p => p.alias === 'delta');
+
+const near = (got, want, tol = 0.05) => Math.abs(got - want) < tol;
+
+const results = {
+  // All 4 wrappers in DOM regardless of status
+  four_wrappers_in_dom:      probe.length === 4,
+  alpha_in_dom:              !!alpha,
+  beta_in_dom:               !!beta,
+  gamma_in_dom:              !!gamma,
+  delta_in_dom:              !!delta,
+
+  // Working sessions: visible=true, opacity 1
+  alpha_visible:             alpha?.visible === 'true',
+  alpha_opacity_1:           near(alpha?.opacity ?? 0, 1),
+  beta_visible:              beta?.visible === 'true',
+  beta_opacity_1:            near(beta?.opacity ?? 0, 1),
+
+  // Non-working: visible=false, opacity 0
+  gamma_hidden:              gamma?.visible === 'false',
+  gamma_opacity_0:           near(gamma?.opacity ?? 1, 0),
+  delta_hidden:              delta?.visible === 'false',
+  delta_opacity_0:           near(delta?.opacity ?? 1, 0),
+
+  // Inline transition includes opacity 300ms
+  all_have_transition:       probe.every(p => /opacity\s+(?:300ms|0\.3s)/.test(p.transition || '')),
+
+  // Inner <circle> + SMIL <animate> still present in working wrappers
+  // (R24 working-rate pulse preserved)
+  alpha_has_inner:           alpha?.hasInner === true,
+  alpha_animate_opacity:     alpha?.animateAttr === 'opacity',
+  alpha_animate_values:      alpha?.animateVals === '1;0.25;1',
+  // Even hidden wrappers keep inner circle in DOM (always-mount)
+  gamma_has_inner:           gamma?.hasInner === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pulse-dot crossfade:`, JSON.stringify(results),
+  `\n  probe:`, probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-pulse-dot-retired-test.mjs

@@ -0,0 +1,86 @@
+/* Round 294 verification: per-node "working" pulse dot retired.
+ *
+ * Pre-R294 each working node carried a small SMIL-animated green
+ * circle at its top (R24, R214). After R278 (working halo) /
+ * R279 (arrival ping + dispatch pulse) / R280 (backdrop spokes)
+ * cleared the surrounding per-node animation family, the pulse
+ * dot was the last surviving "wiggling per-node decoration".
+ * R294 gates its render block with `{false && ...}` per the
+ * R276/R278/R279/R280 rollback-friendly retirement pattern.
+ *
+ * Working status is preserved via 4 redundant non-animated
+ * signals: status ring colour (R167), label sub-text (R211),
+ * chip-row count, hub centre digit (R130).
+ *
+ * Contract:
+ *   - Zero [data-pulse-wrapper] elements present on the canvas.
+ *   - Working nodes still render (status ring + alias label intact).
+ *   - g[data-node] count matches mock session count.
+ *   - R290 three radar rings + R291 starfield 14 dots intact.
+ */
+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, model) => ({
+    alias, status: 'working', model, runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // 4 working sessions — pre-R294 this would mean 4 pulse dots.
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'claude-opus-4'),
+    mk('beta',  'gpt-4o'),
+    mk('gamma', 'claude-sonnet-4'),
+    mk('delta', 'gpt-4'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r) => r.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 probe = await page.evaluate(() => {
+  const pulses = document.querySelectorAll('[data-pulse-wrapper]');
+  const nodes  = document.querySelectorAll('g[data-node]');
+  const aliasTexts = document.querySelectorAll('[data-node-alias-text]');
+  const rings = [...document.querySelectorAll('[data-topo-radar-ring]')]
+    .map(r => r.getAttribute('data-topo-radar-ring')).sort((a, b) => +a - +b);
+  const dots = document.querySelectorAll('[data-topo-starfield-dot]');
+  return {
+    pulseCount:        pulses.length,
+    nodeCount:         nodes.length,
+    aliasTextCount:    aliasTexts.length,
+    radarRings:        rings,
+    starfieldDotCount: dots.length,
+  };
+});
+await browser.close();
+
+const results = {
+  pulse_dots_absent:        probe.pulseCount === 0,
+  four_nodes_present:       probe.nodeCount === 4,
+  alias_labels_still_render: probe.aliasTextCount >= 4,
+  r290_three_rings:         JSON.stringify(probe.radarRings) === JSON.stringify(['170', '250', '330']),
+  r291_starfield_14:        probe.starfieldDotCount === 14,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pulse dot retired:`, JSON.stringify(results),
+  '\n  pulse [data-pulse-wrapper] count (expect 0):', probe.pulseCount,
+  '\n  node count:', probe.nodeCount,
+  '\n  alias text count:', probe.aliasTextCount);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-count-freshness-test.mjs

@@ -0,0 +1,109 @@
+/* Round 162 verification: recent-signal panel header "N flows"
+ * tspan picks up the R160/R161 freshness vocabulary.
+ *
+ * R10  fades canvas edge by freshness (per-edge stroke opacity)
+ * R160 brought it to the recent-signal panel rows (per-flow pip)
+ * R161 brought it to the chip-row "active links" chip bullet
+ *      (fleet aggregate in the chip-row above the SVG)
+ * R162 brings it to the recent-signal panel HEADER count
+ *      (fleet aggregate inside the SVG corner)
+ *
+ * The chip-row "N active links · last 5s" and the panel-header
+ * "N flows" show the same metric at two scopes. R161 tinted the
+ * chip-row side; R162 tints the panel-side mirror so both
+ * scopes speak the same freshness vocabulary side-by-side.
+ *
+ * Same alpha ramp as R160/R161:
+ *   ageSec ≤ 30   → 1.0  (fully fresh)
+ *   30-300s       → smooth decay 1.0 → 0.25
+ *   > 300s        → 0.25 stale floor
+ *
+ * Hot tail (R129 amber " · N hot") is volume-tinted and stays
+ * unchanged — recency tints the head; volume colors the tail.
+ *
+ * Test: 3 page loads, 5s / 90s / 360s ago.
+ */
+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 {}
+});
+
+async function probe(msgAgeSec) {
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  await ctx.unroute('**/api/hub/status*').catch(() => {});
+  await ctx.unroute('**/api/hub/messages*').catch(() => {});
+  await ctx.unroute('**/api/hub/tasks*').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: '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')] } });
+  });
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+    { id: 'x', from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(Date.now() - msgAgeSec * 1000).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.waitForSelector('[data-recent-panel-count]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+  const out = await page.evaluate(() => {
+    const el = document.querySelector('[data-recent-panel-count]');
+    if (!el) return null;
+    // SVG tspan fill attribute is the source of truth — getComputedStyle on
+    // tspan returns nothing useful on some browsers.
+    return {
+      alpha: parseFloat(el.getAttribute('data-recent-panel-count-freshness-alpha') || ''),
+      fill:  el.getAttribute('fill') || '',
+      text:  el.textContent,
+    };
+  });
+  await page.close();
+  return out;
+}
+
+const A = await probe(5);     // fresh
+const B = await probe(90);    // mid
+const C = await probe(360);   // stale
+
+await browser.close();
+
+const cyanRgb = (str) => {
+  const m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(str);
+  if (!m) return null;
+  return [Number(m[1]), Number(m[2]), Number(m[3])];
+};
+
+const results = {
+  fresh_dot_found:    A !== null,
+  mid_dot_found:      B !== null,
+  stale_dot_found:    C !== null,
+  fresh_alpha_1:      A && Math.abs(A.alpha - 1.0)  < 0.05,
+  mid_alpha_window:   B && B.alpha > 0.7 && B.alpha < 0.95,
+  stale_alpha_floor:  C && Math.abs(C.alpha - 0.25) < 0.05,
+  fresh_color_cyan:   A && JSON.stringify(cyanRgb(A.fill)) === '[34,211,238]',
+  stale_alpha_in_fill: C && /0\.25/.test(C.fill),
+  ladder_descends:    A && B && C && A.alpha > B.alpha && B.alpha > C.alpha,
+  text_says_1_flow:   A && /1 flow/.test(A.text || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel-header count freshness:`, JSON.stringify(results),
+  `\n  fresh =`, A,
+  `\n  mid   =`, B,
+  `\n  stale =`, C);
+process.exit(ok ? 0 : 1);