@sleep2agi/agent-network-dashboard 0.4.6-preview.13 → 0.4.6-preview.131

package/scripts/topo-recent-row-pin-test.mjs

@@ -0,0 +1,126 @@
+/* Round 116 verification: recent-signal row click pins the edge.
+ * R56 made hover transient; R116 makes click sticky — survives
+ * mouseleave, releases on second click or Esc. activeEdgeKey =
+ * hoveredEdgeKey ?? pinnedEdgeKey, so hover-while-pinned previews
+ * another edge transiently and mouseleave falls back to the pin.
+ *
+ * Drives 2 flow rows. Click row 0 → row's aria-pressed=true,
+ * data-recent-row-pinned=true, the edge stays bright after mouseleave
+ * (non-endpoints stay dim, endpoint ring stays). Click row 0 again
+ * → release. Pin row 0, hover row 1 → row-1 preview wins; leave →
+ * row-0 pin restores. Esc clears.
+ */
+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();
+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'), mk('gamma'), mk('delta')] } });
+});
+
+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', 'alpha', 'beta',  30 * 1000),
+  mkMsg('m2', 'gamma', 'delta', 60 * 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.waitForSelector('[data-recent-row]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const rowState = (key) => page.evaluate((k) => {
+  const g = document.querySelector(`[data-recent-row="${k}"]`);
+  return {
+    pinned: g?.getAttribute('data-recent-row-pinned') || '',
+    aria:   g?.getAttribute('aria-pressed') || '',
+  };
+}, key);
+const endpointRingFor = (alias) => page.evaluate((a) => {
+  const g = document.querySelector(`g[data-node="${a}"]`);
+  return !!g?.querySelector('[data-edge-endpoint-ring]');
+}, alias);
+
+const before = await rowState('alpha->beta');
+
+// Click row 0 → pin.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterPin       = await rowState('alpha->beta');
+const alphaRingPin   = await endpointRingFor('alpha');
+const betaRingPin    = await endpointRingFor('beta');
+const gammaRingPin   = await endpointRingFor('gamma');
+
+// Click again → release.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterRelease     = await rowState('alpha->beta');
+const alphaRingRelease = await endpointRingFor('alpha');
+
+// Pin row 0 again, hover row 1 — preview wins.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(200);
+await page.locator('[data-recent-row="gamma->delta"]').hover();
+await page.waitForTimeout(300);
+const alphaWhileHoverGamma = await endpointRingFor('alpha');
+const gammaWhileHover      = await endpointRingFor('gamma');
+
+// Leave gamma row — row-0 pin restores.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const alphaAfterLeave = await endpointRingFor('alpha');
+const gammaAfterLeave = await endpointRingFor('gamma');
+
+// Esc clears.
+await page.keyboard.press('Escape');
+await page.waitForTimeout(300);
+const afterEsc       = await rowState('alpha->beta');
+const alphaAfterEsc  = await endpointRingFor('alpha');
+
+await browser.close();
+
+const results = {
+  before_notPinned:         before.pinned === 'false' && before.aria === 'false',
+  pin_attrTrue:             afterPin.pinned === 'true' && afterPin.aria === 'true',
+  pin_endpointsLit:         alphaRingPin === true && betaRingPin === true,
+  pin_nonEndpointDark:      gammaRingPin === false,
+  releaseAfterReclick:      afterRelease.pinned === 'false' && alphaRingRelease === false,
+  hoverPreview_gammaLit:    gammaWhileHover === true,
+  hoverPreview_alphaDark:   alphaWhileHoverGamma === false,
+  leave_pinRestored:        alphaAfterLeave === true && gammaAfterLeave === false,
+  esc_clearsPin:            afterEsc.pinned === 'false' && alphaAfterEsc === false,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row pin:`, JSON.stringify(results),
+  `\n  afterPin=`,     afterPin,
+  `\n  rings@pin: alpha=`, alphaRingPin, ' beta=', betaRingPin, ' gamma=', gammaRingPin,
+  `\n  afterRelease=`, afterRelease,
+  `\n  hoverPreview: alpha=`, alphaWhileHoverGamma, ' gamma=', gammaWhileHover,
+  `\n  afterLeave: alpha=`, alphaAfterLeave, ' gamma=', gammaAfterLeave,
+  `\n  afterEsc=`,     afterEsc);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,91 @@
+/* Round 104 verification: recent-signal panel rows get a subtle
+ * row-background tint on hover. R56 already brightens the matching
+ * edge on the canvas, but the panel row itself stayed flat — the
+ * row now has visible feedback at the source surface.
+ *
+ * Driver: 3 flow rows. Initial state — all hitbox rects are
+ * transparent. Hover row 0 — its rect fills with the accent colour
+ * at low alpha + data-recent-row-hovered="true"; the other two rows
+ * stay transparent + "false". Mouseleave — back to all-false.
+ */
+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();
+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'), mk('gamma'), mk('delta')] } });
+});
+
+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', 'alpha', 'beta',  20 * 1000),
+  mkMsg('m2', 'gamma', 'delta', 30 * 1000),
+  mkMsg('m3', 'alpha', 'gamma', 40 * 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.waitForSelector('[data-recent-row]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const readRows = () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-recent-row]')].map(g => {
+    const rect = g.querySelector('rect');
+    return {
+      key:       g.getAttribute('data-recent-row'),
+      hovered:   g.getAttribute('data-recent-row-hovered'),
+      rectFill:  rect?.getAttribute('fill') || '',
+      rectOpac:  rect?.getAttribute('opacity') || '',
+    };
+  });
+});
+
+const before = await readRows();
+
+// Hover the first row.
+await page.locator('[data-recent-row]').first().hover();
+await page.waitForTimeout(250);
+const duringHover = await readRows();
+
+// Move pointer away.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterLeave = await readRows();
+
+await browser.close();
+
+const results = {
+  before_allTransparent:      before.every(r => r.rectFill === 'transparent' && r.hovered === 'false'),
+  hover_firstRowTinted:       duringHover[0]?.hovered === 'true' && duringHover[0]?.rectFill !== 'transparent',
+  hover_otherRowsUnchanged:   duringHover.slice(1).every(r => r.hovered === 'false' && r.rectFill === 'transparent'),
+  hover_opacityVisibleButLow: duringHover[0] && parseFloat(duringHover[0].rectOpac) > 0 && parseFloat(duringHover[0].rectOpac) < 0.3,
+  leave_restored:             afterLeave.every(r => r.rectFill === 'transparent' && r.hovered === 'false'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row tint:`, JSON.stringify(results),
+  `\n  before=`,     before,
+  `\n  duringHover=`, duringHover,
+  `\n  afterLeave=`,  afterLeave);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-ts-test.mjs

@@ -0,0 +1,92 @@
+/* Round 94 verification: each recent-signal panel row now carries a
+ * right-aligned relative timestamp (e.g. `2s` / `1m`). Composes with
+ * the R56 hover affordance and R57 panel elevation without changing
+ * geometry. Mirror what the R42 active-links chip already shows for
+ * the most-recent flow, but per-row so users can see which flows
+ * are current vs stale.
+ *
+ * Drive the dashboard with messages at known ages — 30s, 5m, 2h —
+ * and assert each row's timestamp matches the expected glyph. Also
+ * verify the timestamp <text> is non-interactive (pointerEvents:none)
+ * so it doesn't steal hover from the row hitbox.
+ */
+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');
+  } 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: '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'), mk('gamma'), mk('delta')] } });
+});
+
+// Mock messages so flowLinks aggregates them. Three flows at increasing
+// ages — the panel sorts most-recent first (per the recent-signal
+// aggregator), so row 0 is the freshest.
+const now = Date.now();
+const mkMsg = (id, from_alias, to_alias, content, ageMs) => ({
+  id, from_alias, to_alias, content, network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  mkMsg('m1', 'alpha', 'beta', 'fix-the-bug',    30 * 1000),       // 30s ago → "30s"
+  mkMsg('m2', 'gamma', 'delta', 'review-the-pr',  5 * 60 * 1000),   // 5m ago  → "5m"
+  mkMsg('m3', 'alpha', 'gamma', 'deploy-stage',   2 * 60 * 60 * 1000), // 2h ago → "2h"
+] } }));
+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 });
+// Wait for at least one recent-signal timestamp to render.
+await page.waitForSelector('[data-recent-row-ts]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const rows = await page.evaluate(() => {
+  return [...document.querySelectorAll('[data-recent-row]')].map(g => {
+    const rowKey  = g.getAttribute('data-recent-row');
+    const tsEl    = g.querySelector('[data-recent-row-ts]');
+    const rowText = g.querySelector('text:not([data-recent-row-ts])')?.textContent || '';
+    const tsText  = tsEl?.textContent || null;
+    const tsPointerEvents = tsEl ? getComputedStyle(tsEl).pointerEvents : null;
+    return { rowKey, rowText, tsText, tsPointerEvents };
+  });
+});
+
+await browser.close();
+
+const results = {
+  threeRows:           rows.length === 3,
+  // Row 0 (freshest) should be alpha→beta around "30s" or "29s" etc.
+  row0_hasFreshTs:     rows[0] && /^[2-9]\d?s$/.test(rows[0].tsText || ''),
+  // Row 1 should read 5m (minutes precision).
+  row1_minuteTs:       rows[1] && /^[4-6]m$/.test(rows[1].tsText || ''),
+  // Row 2 should read ~2h.
+  row2_hourTs:         rows[2] && /^[12]h$/.test(rows[2].tsText || ''),
+  // ts <text> must be non-interactive so it doesn't intercept the row hover.
+  ts_nonInteractive:   rows.every(r => r.tsPointerEvents === 'none'),
+  // Row content shows from/to/count/content via the existing layout.
+  row0_hasArrow:       rows[0]?.rowText.includes('->'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row ts:`, JSON.stringify(results),
+  `\n  rows=`, rows);
+process.exit(ok ? 0 : 1);

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-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);