@sleep2agi/agent-network-dashboard 0.4.6-preview.3 → 0.4.6-preview.301

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

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

@@ -0,0 +1,73 @@
+/* Round 42 verification: "X active links" chip in the header includes
+ * "· last <relative>" when flow links exist, drops the `· last …` tail
+ * when no flow links are present, and renders singular/plural correctly. */
+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: 1400, height: 1000 } });
+  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 = ['alpha', 'beta', 'gamma'].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 text = await page.evaluate(() => {
+    // The active-links chip is the LAST chip in the topo header row (after
+    // pressure-bar + vendor + working/online). Match by `active link`.
+    const spans = [...document.querySelectorAll('span')];
+    return spans.find(s => /active link/.test(s.textContent || ''))?.textContent?.replace(/\s+/g, ' ').trim() || null;
+  });
+  await ctx.close();
+  return text;
+}
+
+// 1. No messages → 0 active links, no "· last X" tail
+const empty = await probe({ msgs: [] });
+// 2. One message just now → 1 active link · last Ns ago
+const recent = await probe({ msgs: [
+  { from_alias: 'alpha', to_alias: 'beta', content: 'hi', created_at: new Date(Date.now() - 30 * 1000).toISOString() },
+] });
+// 3. Five messages, latest 4 min ago → 5 active links · last 4m ago (singular link uses "link", plural "links")
+const fourMinAgo = new Date(Date.now() - 4 * 60 * 1000).toISOString();
+const eightMinAgo = new Date(Date.now() - 8 * 60 * 1000).toISOString();
+const five = await probe({ msgs: [
+  { from_alias: 'alpha', to_alias: 'beta',  content: '1', created_at: eightMinAgo },
+  { from_alias: 'alpha', to_alias: 'gamma', content: '2', created_at: eightMinAgo },
+  { from_alias: 'alpha', to_alias: 'gamma', content: '3', created_at: eightMinAgo },
+  { from_alias: 'beta',  to_alias: 'gamma', content: '4', created_at: eightMinAgo },
+  { from_alias: 'beta',  to_alias: 'gamma', content: '5', created_at: fourMinAgo }, // latest
+] });
+
+await browser.close();
+const results = {
+  emptyChipHasNoTail: empty === '0 active links',
+  recentSingularChip: recent !== null && /^1 active link · last \d+s ago$/.test(recent),
+  pluralChipShowsLatest: five !== null && /active links · last [34]m ago/.test(five),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links chip:`, JSON.stringify(results),
+  `\n  empty=${JSON.stringify(empty)}\n  recent=${JSON.stringify(recent)}\n  five=${JSON.stringify(five)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-links-empty-recede-test.mjs

@@ -0,0 +1,125 @@
+/* Round 206 verification: active-links chip recedes to opacity 0.5
+ * when flowLinks.length === 0, mirroring R204 legend count recede and
+ * R205 working/online chip recede patterns at a third scope.
+ *
+ * Pre-R206 "0 active links" rendered at the same bg-gray-500/10 +
+ * opacity 1 as "12 active links" — only the absent cursor + missing
+ * tooltip signalled empty. R206 adds the visual recede so all three
+ * signals (visual / interactive / affordance) align.
+ *
+ * Test scenarios:
+ *   A. 0 messages → flowLinks.length === 0:
+ *      data-active-links-empty='true', clickable='false',
+ *      opacity ≈ 0.5
+ *   B. 3 messages → flowLinks.length === 3:
+ *      data-active-links-empty='false', clickable='true',
+ *      opacity = 1.0
+ *   Both: inline transition includes color/background-color/
+ *   border-color/opacity 200ms (4-property splice).
+ *   R193 hover-cyan markup preserved in scenario B className.
+ */
+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 setup(messages) {
+  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'), mk('delta'),
+    ] } });
+  });
+  await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages } }));
+  await ctx.route('**/api/hub/tasks*', (r2) => r2.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+  await page.waitForSelector('[data-active-links-chip]', { timeout: 10000 });
+  await page.waitForTimeout(300);
+  return page;
+}
+
+const probe = async (page) => page.evaluate(() => {
+  const el = document.querySelector('[data-active-links-chip]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    className:  el.getAttribute('class') || '',
+    empty:      el.getAttribute('data-active-links-empty'),
+    clickable:  el.getAttribute('data-active-links-clickable'),
+    flowCount:  el.getAttribute('data-active-links-flow-count'),
+    opacity:    parseFloat(cs.opacity),
+    transition: el.style.transition,
+    bg:         cs.backgroundColor,
+  };
+});
+
+// Scenario A: empty
+const pageA = await setup([]);
+const probeA = await probe(pageA);
+await pageA.close();
+
+// Scenario B: populated
+const now = Date.now();
+const pageB = await setup([
+  { id: '1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi',
+    network_id: 'default', created_at: new Date(now - 1000).toISOString() },
+  { id: '2', from_alias: 'beta',  to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 2000).toISOString() },
+  { id: '3', from_alias: 'gamma', to_alias: 'delta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 3000).toISOString() },
+]);
+const probeB = await probe(pageB);
+await pageB.close();
+await browser.close();
+
+const near = (got, want, tol = 0.05) => Math.abs(got - want) < tol;
+const has = (s, re) => re.test(s || '');
+
+const results = {
+  // Scenario A: 0 flows
+  A_chip_present:           !!probeA,
+  A_flow_count_0:           probeA?.flowCount === '0',
+  A_empty_true:             probeA?.empty === 'true',
+  A_clickable_false:        probeA?.clickable === 'false',
+  A_opacity_half:           near(probeA?.opacity ?? 0, 0.5),
+  // hover variant NOT present on empty (only base bg-gray)
+  A_no_hover_variant:       !(probeA?.className || '').includes('hover:bg-cyan-500/10'),
+
+  // Scenario B: 3 flows
+  B_chip_present:           !!probeB,
+  B_flow_count_3:           probeB?.flowCount === '3',
+  B_empty_false:            probeB?.empty === 'false',
+  B_clickable_true:         probeB?.clickable === 'true',
+  B_opacity_full:           near(probeB?.opacity ?? 0, 1.0),
+  // R193 hover-cyan markup preserved
+  B_has_hover_variant:      (probeB?.className || '').includes('hover:bg-cyan-500/10'),
+
+  // Transition integrity — 4-property splice on both scenarios
+  A_transition_opacity:     has(probeA?.transition, /opacity\s+(?:200ms|0\.2s)/),
+  A_transition_bg:          has(probeA?.transition, /background-color\s+(?:200ms|0\.2s)/),
+  A_transition_color:       has(probeA?.transition, /\bcolor\s+(?:200ms|0\.2s)/),
+  A_transition_border:      has(probeA?.transition, /border-color\s+(?:200ms|0\.2s)/),
+  B_transition_opacity:     has(probeB?.transition, /opacity\s+(?:200ms|0\.2s)/),
+  B_transition_bg:          has(probeB?.transition, /background-color\s+(?:200ms|0\.2s)/),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links empty recede:`, JSON.stringify(results),
+  `\n  probeA (0 flows):`,  probeA,
+  `\n  probeB (3 flows):`,  probeB);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-links-freshness-test.mjs

@@ -0,0 +1,113 @@
+/* Round 161 verification: active-links chip bullet picks up
+ * the R160 freshness vocabulary.
+ *
+ * R10 fades canvas flow edges by freshness. R160 brought that
+ * vocabulary to the recent-signal panel rows via a 1.6-px cyan
+ * pip at row left edge. R161 extends it one more scope — up to
+ * the fleet-aggregate active-links chip in the chip-row.
+ *
+ * The chip text was already "3 active links · last 5s ago" but
+ * the " · " separator was dead gray. R161 colors that bullet
+ * by freshness using the same alpha ramp:
+ *   ageSec ≤ 30   → 1.0 (fully fresh)
+ *   30-300s       → 1.0 → 0.25 smooth decay
+ *   > 300s        → 0.25 stale floor
+ *
+ * Three nested scopes now share one freshness ladder:
+ *   canvas edge fade  (R10)   — per-edge visual
+ *   row pip           (R160)  — per-flow row in recent-signal
+ *   chip bullet       (R161)  — fleet aggregate in chip-row
+ *
+ * Test scenarios (one page load each):
+ *   A. fresh most-recent flow (5s ago)  → alpha ≈ 1.0, fontWeight 700
+ *   B. mid recency (90s ago)            → alpha ≈ 0.83
+ *   C. stale (360s ago)                 → alpha ≈ 0.25 (floor)
+ *
+ * Color parses out of `rgba(34, 211, 238, 1)` cyber theme.
+ */
+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-active-links-freshness-dot]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+  const out = await page.evaluate(() => {
+    const el = document.querySelector('[data-active-links-freshness-dot]');
+    if (!el) return null;
+    const styleColor = el.style.color || getComputedStyle(el).color;
+    return {
+      alpha: parseFloat(el.getAttribute('data-active-links-freshness-alpha') || ''),
+      color: styleColor,
+      fontWeight: el.style.fontWeight || getComputedStyle(el).fontWeight,
+      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) => {
+  // Inline `style="color: rgba(34, 211, 238, ...)"` — alpha is part of color.
+  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.color)) === '[34,211,238]',
+  fresh_weight_bold:  A && (A.fontWeight === '700' || A.fontWeight === 'bold'),
+  stale_weight_norm:  C && (C.fontWeight === '400' || C.fontWeight === 'normal' || C.fontWeight === ''),
+  ladder_descends:    A && B && C && A.alpha > B.alpha && B.alpha > C.alpha,
+  text_is_separator:  A && A.text && A.text.trim() === '·',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links freshness:`, JSON.stringify(results),
+  `\n  fresh =`, A,
+  `\n  mid   =`, B,
+  `\n  stale =`, C);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-links-tooltip-test.mjs

@@ -0,0 +1,79 @@
+/* Round 114 verification: active-links chip tooltip lists the actual
+ * flow pairs. Closes the info-density sweep on the last chip-row
+ * hover surface (R97-R113 covered everything else). Format:
+ *   "alpha→beta (3), gamma→delta (1) — hover brightens all"
+ *
+ * Drive 3 flow pairs of different counts. Verify each pair appears
+ * in the title with its count; the trailing action hint says
+ * "hover brightens all". Empty-flow fleet → no title.
+ */
+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: 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 {}
+  });
+  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: withFlow ? [
+    mkMsg('m1', 'alpha', 'beta',  30 * 1000),
+    mkMsg('m2', 'alpha', 'beta',  40 * 1000),
+    mkMsg('m3', 'alpha', 'beta',  50 * 1000),
+    mkMsg('m4', '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.waitForTimeout(600);
+  const data = await page.evaluate(() => {
+    const el = document.querySelector('[data-active-links-chip]');
+    return {
+      title:     el?.getAttribute('title'),
+      flowCount: el?.getAttribute('data-active-links-flow-count') || '',
+      text:      el?.textContent?.trim() || '',
+    };
+  });
+  await ctx.close();
+  return data;
+};
+
+const empty = await probe(false);
+const full  = await probe(true);
+await browser.close();
+
+const results = {
+  empty_noTitle:           empty.title === null,
+  empty_zeroCount:         empty.flowCount === '0',
+  full_titleHasAlphaBeta:  /alpha→beta \(3\)/.test(full.title || ''),
+  full_titleHasGammaDelta: /gamma→delta \(1\)/.test(full.title || ''),
+  full_titleActionHint:    /hover brightens all/.test(full.title || ''),
+  full_flowCount2:         full.flowCount === '2',
+  full_chipShowsCount:     /2 active link/.test(full.text),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links tooltip:`, JSON.stringify(results),
+  `\n  empty=`, empty,
+  `\n  full=`,  full);
+process.exit(ok ? 0 : 1);