@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.1-preview.0

package/scripts/p0-topo-screenshot.mjs

@@ -0,0 +1,82 @@
+/* P0 (Vincent 5222) baseline + after screenshot of TopoGraph with a
+ * realistic 4-agent mixed-vendor fleet. Usage:
+ *   node scripts/p0-topo-screenshot.mjs <out-prefix>
+ * Writes <out-prefix>-full.png (1600×900) and <out-prefix>-svg.png
+ * (just the SVG bbox, cropped). */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const outPrefix = process.argv[2] || 'screenshots/r293-p0/baseline';
+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: 1400 }, deviceScaleFactor: 2 });
+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, status = 'working') => ({
+    alias, status, model, 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('claude-1',  'claude-opus-4'),
+    mk('claude-2',  'claude-sonnet-4', 'idle'),
+    mk('codex-1',   'gpt-4o'),
+    mk('intern-1',  'internlm/internlm2'),
+    mk('minimax-1', 'minimax/abab6', 'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { from: 'claude-1', to: 'codex-1',  text: 'review the diff please', ts: fresh },
+  { from: 'codex-1',  to: 'claude-1', text: 'lgtm, ship', ts: fresh },
+  { from: 'intern-1', to: 'claude-1', text: 'logs uploaded', ts: fresh },
+] } }));
+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(800);
+
+// Scroll the topology card into view + measure.
+const topoBox = await page.evaluate(() => {
+  const chromeEl = document.querySelector('[data-topo-chrome]');
+  if (!chromeEl) return null;
+  // Walk up to find the topology card container — has the SVG inside.
+  let card = chromeEl.parentElement;
+  while (card && !card.querySelector(':scope > svg')) card = card.parentElement;
+  if (!card) return null;
+  card.scrollIntoView({ block: 'start' });
+  // Allow scroll to settle.
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      const r = card.getBoundingClientRect();
+      resolve({ x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height });
+    });
+  });
+});
+await page.waitForTimeout(400);
+
+await page.screenshot({ path: `${outPrefix}-full.png`, fullPage: false });
+if (topoBox && topoBox.width > 100 && topoBox.height > 100) {
+  // Re-measure after settling.
+  const box2 = await page.evaluate(() => {
+    const chromeEl = document.querySelector('[data-topo-chrome]');
+    let card = chromeEl?.parentElement;
+    while (card && !card.querySelector(':scope > svg')) card = card?.parentElement;
+    if (!card) return null;
+    const r = card.getBoundingClientRect();
+    return { x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height };
+  });
+  if (box2) {
+    await page.screenshot({ path: `${outPrefix}-topo.png`, clip: box2 });
+  }
+}
+console.log(`✅ wrote ${outPrefix}-full.png + ${outPrefix}-topo.png`);
+await browser.close();

package/scripts/topo-active-filter-pill-test.mjs

@@ -0,0 +1,101 @@
+/* Round 64 verification: active-filter pills appear in chip row when
+ * pins are set and clear their pin on × click.
+ *
+ *  - No pin → no pill rendered.
+ *  - Pin status (via legend) → pill labelled "filter: working" with
+ *    aria-label that includes "Clear working filter".
+ *  - × button click → pin clears + node opacities restore.
+ *  - Both pins independent: pin a status + pin a group → two pills.
+ */
+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', 'grid');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const sessions = [
+    { alias: 'alpha1', status: 'working', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'alpha2', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'alpha3', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'beta',   status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+  ];
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const readPills = () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-active-filter]')].map(el => ({
+    kind: el.getAttribute('data-active-filter'),
+    text: (el.textContent || '').trim(),
+  }));
+});
+const readWkrOpacity = () => page.evaluate(() => +(document.querySelector('g[data-node="alpha1"]')?.style.opacity || '1'));
+
+const pillsBefore = await readPills();
+
+// Pin working via legend.
+await page.locator('g[data-legend-status="working"]').first().click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const pillsAfterStatus = await readPills();
+const wkrAfterStatus = await readWkrOpacity();
+
+// Pin alpha group via label click.
+await page.locator('g[data-group-label-hit="alpha"]').first().click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const pillsBothPinned = await readPills();
+
+// Click × on the status pill.
+await page.locator('[data-active-filter="status"] button[aria-label*="working"]').first().click({ force: true });
+await page.waitForTimeout(250);
+const pillsAfterStatusClear = await readPills();
+const wkrAfterStatusClear = await readWkrOpacity();
+
+// Click × on the group pill.
+await page.locator('[data-active-filter="group"] button[aria-label*="alpha"]').first().click({ force: true });
+await page.waitForTimeout(250);
+const pillsFinal = await readPills();
+
+await browser.close();
+
+const results = {
+  before_noPills:        pillsBefore.length === 0,
+  statusPin_oneStatusPill: pillsAfterStatus.length === 1
+                          && pillsAfterStatus[0].kind === 'status'
+                          && /filter:\s*working/.test(pillsAfterStatus[0].text),
+  statusPin_dimsBeta:     wkrAfterStatus >= 0.55,   // alpha1 IS working — should stay
+  bothPinned_twoPills:    pillsBothPinned.length === 2
+                          && pillsBothPinned.some(p => p.kind === 'status')
+                          && pillsBothPinned.some(p => p.kind === 'group'),
+  statusClear_only_group_remains: pillsAfterStatusClear.length === 1
+                                  && pillsAfterStatusClear[0].kind === 'group',
+  statusClear_restoredOpacity: wkrAfterStatusClear >= 0.55,
+  groupClear_noPills:     pillsFinal.length === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-filter pill:`, JSON.stringify(results),
+  `\n  pillsAfterStatus=`, pillsAfterStatus,
+  `\n  pillsBothPinned=`, pillsBothPinned,
+  `\n  pillsAfterStatusClear=`, pillsAfterStatusClear);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-links-chip-hover-test.mjs

@@ -0,0 +1,103 @@
+/* Round 77 verification: hovering the "N active links" header chip
+ * boosts every flow edge to 1.5× the baseline opacity simultaneously.
+ * Mouseleave restores. Composes with R49 / R50 — single-edge hover
+ * still wins over chip hover (the priority is edge > node > chip).
+ *
+ *  - 3 flow edges; baseline opacity ~0.28 each.
+ *  - Hover the active-links chip → all 3 jump to ~0.42 (1.5×).
+ *  - Mouse-leave → all 3 return to ~0.28.
+ *  - Hover an individual edge while chip is also hovered → R50 wins,
+ *    edge gets 2.0×, others drop to 0.35×.  (We just check chip-hover
+ *    here; the interaction with edge hover is documented in R50 tests.)
+ */
+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();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const sessions = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'].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 } });
+});
+const now = new Date().toISOString();
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  { from_alias: 'alpha',   to_alias: 'beta',  content: 'm', created_at: now },
+  { from_alias: 'gamma',   to_alias: 'delta', content: 'm', created_at: now },
+  { from_alias: 'epsilon', to_alias: 'zeta',  content: 'm', created_at: now },
+] } }));
+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.waitForTimeout(600);
+
+const readEdgeOpacities = () => page.evaluate(() => {
+  const out = {};
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  for (const g of svg.querySelectorAll(':scope > g > g')) {
+    const t = g.querySelector('path[data-edge-hitbox] title');
+    if (!t) continue;
+    const route = (t.textContent || '').split('\n')[0];
+    const base = [...g.querySelectorAll(':scope > path')].find(
+      p => !p.hasAttribute('data-edge-hitbox') && p.hasAttribute('marker-end')
+    );
+    if (base) out[route] = +base.getAttribute('opacity');
+  }
+  return out;
+});
+
+const before = await readEdgeOpacities();
+
+// Hover the active-links chip.
+const chipExists = await page.locator('[data-active-links-chip]').count();
+if (chipExists === 0) { console.log('❌ active-links chip not rendered'); process.exit(1); }
+await page.locator('[data-active-links-chip]').hover();
+await page.waitForTimeout(300);
+const onHover = await readEdgeOpacities();
+
+// Mouse-leave.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterLeave = await readEdgeOpacities();
+
+await browser.close();
+
+const ratio = (after, before) => after / before;
+const allAround = (rs, lo, hi) => rs.every(r => r > lo && r < hi);
+
+const baseValues = Object.values(before);
+const hoverValues = Object.values(onHover);
+const leaveValues = Object.values(afterLeave);
+
+const results = {
+  baseline_equalAtBase:  allAround(baseValues, 0.25, 0.31),
+  hover_allBoosted_15x:  allAround(hoverValues.map((v, i) => ratio(v, baseValues[i])), 1.4, 1.6),
+  hover_absoluteRange:   allAround(hoverValues, 0.39, 0.46),  // 1.5 * (0.22..0.28) * fresh
+  leave_restoreBaseline: allAround(leaveValues.map((v, i) => Math.abs(v - baseValues[i])), -0.01, 0.02),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links chip hover:`, JSON.stringify(results),
+  `\n  before=`,  before,
+  `\n  onHover=`, onHover,
+  `\n  afterLeave=`, afterLeave);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-links-chip-nav-test.mjs

@@ -0,0 +1,117 @@
+/* Round 136 verification: the "N active links" chip in the chip
+ * row becomes a clickable nav to /messages when flowLinks.length
+ * > 0. Closes the cursor-pointer-lying bug — the chip already had
+ * cursor:pointer set when interactive, but no onClick handler was
+ * wired (line 1877 of TopoGraph.tsx pre-R136). Mirrors R133 footer-
+ * nav idiom and generalizes "click to open the full flow list"
+ * across the chip row, not just the recent-signal panel.
+ *
+ * Two-state behavior:
+ *   - flowLinks.length === 0 → not interactive: no role=link, no
+ *     cursor:pointer, no onClick fires
+ *   - flowLinks.length  > 0 → role=link, tabIndex=0, cursor:pointer,
+ *     onClick → /messages, tooltip mentions "click to open"
+ *
+ * Hover still boosts edges (R77) regardless — that's a separate
+ * gesture.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probeWithFlows(pairCount) {
+  const browser = await chromium.launch({ headless: true });
+  const ctx = await browser.newContext({ viewport: { width: 1400, height: 1500 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(() => {
+    try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+  });
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  const aliases = ['alpha', 'beta', 'gamma', 'delta', 'epsilon'];
+  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: aliases.map(mk) } });
+  });
+  const now = Date.now();
+  const msgs = [];
+  for (let i = 0; i < pairCount; i++) {
+    msgs.push({
+      id: `m${i}`,
+      from_alias: aliases[i % aliases.length],
+      to_alias:   aliases[(i + 1) % aliases.length],
+      content: 'hi',
+      network_id: 'default',
+      created_at: new Date(now - (20000 + i * 1000)).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 === 5, { timeout: 30000 });
+  await page.waitForSelector('[data-active-links-chip]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  const probe = await page.evaluate(() => {
+    const chip = document.querySelector('[data-active-links-chip]');
+    return {
+      flowCount:    chip?.getAttribute('data-active-links-flow-count'),
+      clickable:    chip?.getAttribute('data-active-links-clickable'),
+      role:         chip?.getAttribute('role'),
+      tabindex:     chip?.getAttribute('tabindex'),
+      cursor:       (chip?.getAttribute('style') || '').includes('cursor: pointer'),
+      title:        chip?.getAttribute('title'),
+    };
+  });
+
+  let finalUrl = null;
+  if (pairCount > 0) {
+    await page.locator('[data-active-links-chip]').click();
+    await page.waitForURL('**/messages', { timeout: 10000 });
+    finalUrl = page.url();
+  }
+  await browser.close();
+  return { probe, finalUrl };
+}
+
+const empty   = await probeWithFlows(0);
+const oneFlow = await probeWithFlows(1);
+const many    = await probeWithFlows(3);
+
+const results = {
+  // Empty (0 flows) — not interactive
+  empty_flowCount0:        empty.probe.flowCount === '0',
+  empty_clickableFalse:    empty.probe.clickable === 'false',
+  empty_noRole:            empty.probe.role === null || empty.probe.role === undefined,
+  empty_noTabIndex:        empty.probe.tabindex === null || empty.probe.tabindex === undefined,
+  empty_noPointer:         !empty.probe.cursor,
+  empty_noTooltip:         !empty.probe.title,
+
+  // 1 flow — interactive
+  one_flowCount1:          oneFlow.probe.flowCount === '1',
+  one_clickableTrue:       oneFlow.probe.clickable === 'true',
+  one_roleLink:            oneFlow.probe.role === 'link',
+  one_tabIndex0:           oneFlow.probe.tabindex === '0',
+  one_cursorPointer:       oneFlow.probe.cursor,
+  one_titleMentionsOpen:   (oneFlow.probe.title || '').includes('click to open'),
+  one_navigatedToMessages: /\/messages$/.test(oneFlow.finalUrl || ''),
+
+  // 3 flows — same interactive shape
+  many_clickableTrue:      many.probe.clickable === 'true',
+  many_navigatedToMessages: /\/messages$/.test(many.finalUrl || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links chip nav:`, JSON.stringify(results),
+  `\n  empty=`, empty,
+  `\n  oneFlow=`, oneFlow,
+  `\n  many=`, many);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-links-chip-self-hover-test.mjs

@@ -0,0 +1,171 @@
+/* Round 193 verification: the active-links chip itself responds to
+ * hover by adopting a cyan tint, mirroring the canvas-edge highlight
+ * it already fires (which R77's topo-active-links-chip-hover-test
+ * verifies). Two different surfaces:
+ *   R77  test → canvas edges (effect element)
+ *   R193 test → chip itself  (cause element)
+ *
+ * Pre-R193 the chip stayed gray when hovered while the canvas edges
+ * brightened to cyan — cause-element silent, effect-element loud.
+ * R193 attaches a Tailwind :hover variant (cyan-500/10 bg, cyan-200
+ * text, cyan-500/30 border) when the chip is interactive, plus a
+ * transition-colors duration-200 for smooth blend. Non-interactive
+ * chips (0 active links) keep the gray-only variant.
+ *
+ * Test scenarios:
+ *   A. Interactive (3 flows):
+ *      1. Idle: bg near gray-500/10 (R,G,B close to each other)
+ *      2. className includes 'hover:bg-cyan-500/10'
+ *      3. Hover: bg, text, border all shift cyan (B > R)
+ *      4. transition-colors duration-200 present
+ *      5. bg actually changed from idle to hover
+ *   B. Non-interactive (0 flows):
+ *      6. className does NOT include 'hover:bg-cyan-500/10'
+ *      7. data-active-links-clickable='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: 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 load(flowsScenario) {
+  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'), mk('gamma'), mk('delta'),
+    ] } });
+  });
+  const now = Date.now();
+  const msgs = flowsScenario(now);
+  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 === 4, { timeout: 30000 });
+  await page.waitForSelector('[data-active-links-chip]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+  return page;
+}
+
+// Scenario A: 3 flows (interactive)
+const pageA = await load((now) => [
+  { id: '1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+  { id: '2', from_alias: 'beta',  to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 8000).toISOString() },
+  { id: '3', from_alias: 'gamma', to_alias: 'delta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 11000).toISOString() },
+]);
+
+const idleA = await pageA.evaluate(() => {
+  const el = document.querySelector('[data-active-links-chip]');
+  const cs = getComputedStyle(el);
+  return {
+    className:  el.getAttribute('class') || '',
+    clickable:  el.getAttribute('data-active-links-clickable'),
+    flowCount:  el.getAttribute('data-active-links-flow-count'),
+    bg:         cs.backgroundColor,
+    color:      cs.color,
+    borderColor:cs.borderTopColor,
+    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
+  };
+});
+
+await pageA.hover('[data-active-links-chip]');
+await pageA.waitForTimeout(280);  // longer than 200ms transition
+
+const hoverA = await pageA.evaluate(() => {
+  const el = document.querySelector('[data-active-links-chip]');
+  const cs = getComputedStyle(el);
+  return {
+    bg:         cs.backgroundColor,
+    color:      cs.color,
+    borderColor:cs.borderTopColor,
+  };
+});
+
+await pageA.mouse.move(0, 0);
+await pageA.waitForTimeout(50);
+await pageA.close();
+
+// Scenario B: 0 flows (non-interactive)
+const pageB = await load(() => []);
+const idleB = await pageB.evaluate(() => {
+  const el = document.querySelector('[data-active-links-chip]');
+  return {
+    className: el.getAttribute('class') || '',
+    clickable: el.getAttribute('data-active-links-clickable'),
+    flowCount: el.getAttribute('data-active-links-flow-count'),
+  };
+});
+await pageB.close();
+await browser.close();
+
+// Tailwind 4 emits modern color spaces (oklab / lab). Cyan in OKLab
+// is characterised by a<0 (green-leaning) AND b<0 (blue-leaning).
+// Gray has a ≈ 0, b ≈ 0. Lab uses similar axes at different scales.
+function parseLab(s) {
+  const m = (s || '').match(/(?:oklab|lab)\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)/);
+  return m ? { L: +m[1], a: +m[2], b: +m[3] } : null;
+}
+const idleBgLab  = parseLab(idleA.bg);
+const hoverBgLab = parseLab(hoverA.bg);
+const hoverFgLab = parseLab(hoverA.color);
+const hoverBdLab = parseLab(hoverA.borderColor);
+const idleFgLab  = parseLab(idleA.color);
+
+// Cyan-leaning thresholds: a more negative by at least 0.05 (OKLab)
+// or 5 (Lab), b similarly. Robust to either color space.
+const isMoreCyan = (idle, hov) =>
+  hov && idle && (hov.a < idle.a - 0.04 || hov.b < idle.b - 0.04 || hov.a < -0.05 || hov.b < -0.05);
+
+const results = {
+  // A1: idle is roughly gray-ish — small a,b deviation from 0
+  idleA_gray_bg:        idleBgLab && Math.abs(idleBgLab.a) < 0.05 && Math.abs(idleBgLab.b) < 0.05,
+
+  // A2: className has hover variant
+  idleA_has_hover:      idleA.className.includes('hover:bg-cyan-500/10'),
+
+  // A3: hovered surfaces lean cyan vs idle
+  hover_bg_cyan:        isMoreCyan(idleBgLab, hoverBgLab),
+  hover_text_cyan:      isMoreCyan(idleFgLab, hoverFgLab),
+  hover_border_cyan:    isMoreCyan(idleBgLab, hoverBdLab),
+
+  // bg actually changed
+  bg_changed:           idleA.bg !== hoverA.bg,
+
+  // A4: transition-colors duration-200 present
+  idleA_has_transition: idleA.transition.includes('color') && idleA.transition.includes('0.2s'),
+  idleA_clickable_true: idleA.clickable === 'true',
+  idleA_flow_count_3:   idleA.flowCount === '3',
+
+  // B6: non-interactive chip has NO hover variant
+  idleB_no_hover:       !idleB.className.includes('hover:bg-cyan-500/10'),
+  idleB_clickable_false:idleB.clickable === 'false',
+  idleB_flow_count_0:   idleB.flowCount === '0',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links chip self-hover:`, JSON.stringify(results),
+  `\n  idleA:`,  idleA,
+  `\n  hoverA:`, hoverA,
+  `\n  idleB:`,  idleB);
+process.exit(ok ? 0 : 1);