@sleep2agi/agent-network-dashboard 0.4.6-preview.21 → 0.4.6-preview.211

package/scripts/topo-discrete-zoom-smooth-test.mjs

@@ -0,0 +1,125 @@
+/* Round 169 verification: keyboard '+'/'−' and chrome zoom in/out
+ * buttons arm the R168 smoothView transition.
+ *
+ * R168 introduced one-shot smoothView arming on resetView/fitView.
+ * R169 extends the same arming to the three other DISCRETE zoom
+ * surfaces (one keypress / button-click = one 1.2× step):
+ *   keyboard '+' / '=' / '−' / '_'
+ *   chrome zoom-in / zoom-out buttons
+ *
+ * Wheel zoom stays direct (every tick = live, no transition lag).
+ * Wrapper:
+ *   const zoomByDiscrete = (factor) => {
+ *     setSmoothView(true);
+ *     setTimeout(() => setSmoothView(false), 350);
+ *     zoomBy(factor);
+ *   };
+ *
+ * Test:
+ *   1. Idle:        smooth=false, no transition
+ *   2. Press '+':   smooth=true, transition 'transform 300ms ease-out'
+ *                   zoom 100% → 120%
+ *   3. Wait 450ms:  smooth=false, transition cleared
+ *   4. Click chrome zoom-in button: smooth=true again (same path)
+ *   5. Press '−':   smooth=true, zoom back toward 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();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias) => ({
+    alias, status: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [mk('alpha'), mk('beta'), mk('gamma')] } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+await page.waitForSelector('[data-topo-viewport]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probeViewport = () => page.evaluate(() => {
+  const g = document.querySelector('[data-topo-viewport]');
+  return {
+    smooth: g?.getAttribute('data-topo-viewport-smooth'),
+    transition: g?.style?.transition || '',
+  };
+});
+const probeZoom = () => page.evaluate(() =>
+  document.querySelector('[data-topo-chrome-zoom-level]')?.textContent?.trim());
+
+const idle = await probeViewport();
+const zoomIdle = await probeZoom();
+
+// Press '+' → keyboard zoom-in. Probe within the 350ms window.
+await page.keyboard.press('+');
+await page.waitForTimeout(50);
+const duringKbZoomIn = await probeViewport();
+const zoomAfterKb = await probeZoom();
+
+// Wait past the 350ms window
+await page.waitForTimeout(450);
+const afterKbZoomIn = await probeViewport();
+
+// Click chrome zoom-in button → same arming path
+await page.locator('[data-topo-chrome-zoom-in]').click();
+await page.waitForTimeout(50);
+const duringChromeZoomIn = await probeViewport();
+const zoomAfterChromeIn = await probeZoom();
+
+// Wait past window then press '−' (keyboard zoom-out)
+await page.waitForTimeout(450);
+await page.keyboard.press('-');
+await page.waitForTimeout(50);
+const duringKbZoomOut = await probeViewport();
+const zoomAfterKbOut = await probeZoom();
+
+await browser.close();
+
+const results = {
+  viewport_found:                  idle !== null,
+  idle_smooth_false:               idle.smooth === 'false',
+  idle_no_transition:              !idle.transition.includes('transform'),
+  idle_zoom_100:                   zoomIdle === '100%',
+
+  kb_plus_armed_smooth:            duringKbZoomIn.smooth === 'true',
+  kb_plus_transition_set:          duringKbZoomIn.transition.includes('transform 300ms'),
+  kb_plus_zoom_increased:          zoomAfterKb !== '100%',
+
+  after_kb_smooth_cleared:         afterKbZoomIn.smooth === 'false',
+  after_kb_no_transition:          !afterKbZoomIn.transition.includes('transform'),
+
+  chrome_in_armed_smooth:          duringChromeZoomIn.smooth === 'true',
+  chrome_in_transition_set:        duringChromeZoomIn.transition.includes('transform 300ms'),
+  chrome_in_zoom_increased:        zoomAfterChromeIn !== zoomAfterKb,
+
+  kb_minus_armed_smooth:           duringKbZoomOut.smooth === 'true',
+  kb_minus_transition_set:         duringKbZoomOut.transition.includes('transform 300ms'),
+  kb_minus_zoom_decreased:         zoomAfterKbOut !== zoomAfterChromeIn,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} discrete zoom smooth:`, JSON.stringify(results),
+  `\n  idle =`, idle, `zoom=${zoomIdle}`,
+  `\n  '+' fired =`, duringKbZoomIn, `zoom=${zoomAfterKb}`,
+  `\n  after '+' =`, afterKbZoomIn,
+  `\n  chrome-in fired =`, duringChromeZoomIn, `zoom=${zoomAfterChromeIn}`,
+  `\n  '-' fired =`, duringKbZoomOut, `zoom=${zoomAfterKbOut}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-dispatch-pulse-test.mjs

@@ -0,0 +1,83 @@
+/* Round 76 verification: source-side dispatch pulse renders for high-
+ * traffic edges only (link.count >= 3), bookending the R75 destination
+ * ping. Quiet edges (count < 3) skip the source pulse to keep the
+ * canvas calm. Reduced-motion users see neither pulse nor ping.
+ *
+ *  - Busy alpha→beta (5 messages, fresh) → dispatch pulse present at
+ *    source AND arrival ping at destination.
+ *  - Quiet gamma→delta (1 message, fresh) → arrival ping only, no
+ *    dispatch pulse.
+ *  - Reduced-motion: no dispatch pulses, no arrival pings.
+ */
+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(reducedMotion) {
+  const ctx = await browser.newContext({
+    viewport: { width: 1280, height: 1500 },
+    reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
+  });
+  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'].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 } });
+  });
+  // 5 busy messages alpha→beta + 1 quiet gamma→delta.
+  const now = new Date().toISOString();
+  const msgs = [
+    ...Array.from({ length: 5 }).map(() => ({ from_alias: 'alpha', to_alias: 'beta', content: 'm', created_at: now })),
+    { from_alias: 'gamma', to_alias: 'delta', content: 'm', created_at: 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.waitForTimeout(600);
+  const elements = await page.evaluate(() => {
+    return {
+      dispatchPulses: [...document.querySelectorAll('[data-dispatch-pulse]')].map(el => el.getAttribute('data-dispatch-pulse')),
+      arrivalPings:   [...document.querySelectorAll('[data-arrival-ping]')].map(el => el.getAttribute('data-arrival-ping')),
+    };
+  });
+  await ctx.close();
+  return elements;
+}
+
+const normal  = await probe(false);
+const reduced = await probe(true);
+await browser.close();
+
+const has = (arr, key) => arr.includes(key);
+const results = {
+  normal_busyHasDispatch:   has(normal.dispatchPulses, 'alpha->beta'),
+  normal_quietHasNoDispatch: !has(normal.dispatchPulses, 'gamma->delta'),
+  normal_busyHasArrival:    has(normal.arrivalPings, 'alpha->beta'),
+  normal_quietHasArrival:   has(normal.arrivalPings, 'gamma->delta'),
+  reduced_noDispatchPulses: reduced.dispatchPulses.length === 0,
+  reduced_noArrivalPings:   reduced.arrivalPings.length === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} dispatch pulse:`, JSON.stringify(results),
+  `\n  normal=`,  normal,
+  `\n  reduced=`, reduced);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-badge-click-pin-test.mjs

@@ -0,0 +1,94 @@
+/* Round 121 verification: clicking an edge midpoint count badge
+ * (R100) pins the matching flow, mirroring the R116 recent-signal
+ * row click-pin from the canvas side. Closes the gap where the
+ * canvas had no pin-from-here affordance.
+ *
+ * Drive: 1 flow with count >= 3 (badge renders). Click badge →
+ * data-edge-count-badge-pinned="true", aria-pressed="true", the
+ * matching pill (R119) appears. Click again → release.
+ */
+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')] } });
+});
+
+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', 'alpha', 'beta', 40 * 1000),
+  mkMsg('m3', 'alpha', 'beta', 50 * 1000),
+  mkMsg('m4', 'alpha', 'beta', 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 === 3, { timeout: 30000 });
+await page.waitForSelector('[data-edge-count-badge]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = () => page.evaluate(() => {
+  const badge = document.querySelector('[data-edge-count-badge="alpha->beta"]');
+  return {
+    badgePinned: badge?.getAttribute('data-edge-count-badge-pinned') || '',
+    aria:        badge?.getAttribute('aria-pressed') || '',
+    pillExists:  document.querySelector('[data-active-filter="edge"]') !== null,
+    title:       badge?.querySelector('title')?.textContent || '',
+  };
+});
+
+const before = await probe();
+
+// Click the badge → pin.
+await page.locator('[data-edge-count-badge="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterClick = await probe();
+
+// Click again → release.
+await page.locator('[data-edge-count-badge="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterRelease = await probe();
+
+await browser.close();
+
+const results = {
+  before_notPinned:       before.badgePinned === 'false' && before.aria === 'false',
+  before_noPill:          before.pillExists === false,
+  before_titlePinHint:    /click to pin/.test(before.title),
+  click_pinned:           afterClick.badgePinned === 'true' && afterClick.aria === 'true',
+  click_pillAppears:      afterClick.pillExists === true,
+  click_titleReleaseHint: /click to release pin/.test(afterClick.title),
+  release_unpinned:       afterRelease.badgePinned === 'false' && afterRelease.aria === 'false',
+  release_pillGone:       afterRelease.pillExists === false,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-badge click-pin:`, JSON.stringify(results),
+  `\n  before=`,       before,
+  `\n  afterClick=`,   afterClick,
+  `\n  afterRelease=`, afterRelease);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-badge-hot-test.mjs

@@ -0,0 +1,115 @@
+/* Round 126 verification: hot-edge accent on the midpoint count
+ * badge. The edge stroke width (line 2344 of TopoGraph.tsx) scales
+ * with count but clamps at 7px — so count=5 and count=50 look
+ * identical at the line. R100 introduced the badge for high-traffic
+ * lanes, but the badge itself stayed the same colour regardless.
+ *
+ * R126 buckets count ≥ 10 as "hot" and flips the badge stroke to
+ * amber (#d97706 light, #fbbf24 dark) + thickens to width 2. Pin
+ * still wins (uses legendHeadline) so pinned-hot reads as locked
+ * via the badge text + edge brightness, not via a third stroke
+ * colour. Reuses R125's amber convention — "amber draws the eye".
+ *
+ * Fleet:
+ *   alpha (working) — pings beta with 12 msgs (hot)
+ *   beta  (working) — pings gamma with 4 msgs (warm, badge but not hot)
+ *   gamma (idle)
+ *
+ * Path:
+ *   1. alpha→beta:  badge hot=true, stroke matches amber rgb
+ *   2. beta→gamma:  badge hot=false, stroke matches flowEdge (not amber)
+ *   3. Click alpha→beta to pin; pin still wins (stroke = legendHeadline,
+ *      data-edge-count-badge-pinned=true, hot=true is still flagged
+ *      via the attribute but the visible stroke is the pin colour)
+ */
+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, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'working'),
+    mk('beta',  'working'),
+    mk('gamma', 'idle'),
+  ] } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from_alias, to_alias, ageMs) => ({
+  id, from_alias, to_alias, content: 'x', network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+// 12 alpha→beta = HOT, 4 beta→gamma = warm
+const msgs = [];
+for (let i = 0; i < 12; i++) msgs.push(mkMsg(`a${i}`, 'alpha', 'beta',  20000 + i * 500));
+for (let i = 0; i < 4;  i++) msgs.push(mkMsg(`b${i}`, 'beta',  'gamma', 30000 + i * 500));
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+await page.waitForSelector('[data-edge-count-badge="alpha->beta"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const inspect = (key) => page.evaluate((k) => {
+  const g = document.querySelector(`[data-edge-count-badge="${k}"]`);
+  if (!g) return null;
+  const circle = g.querySelector('circle');
+  return {
+    hot:    g.getAttribute('data-edge-count-badge-hot'),
+    pinned: g.getAttribute('data-edge-count-badge-pinned'),
+    stroke:      circle?.getAttribute('stroke'),
+    strokeWidth: circle?.getAttribute('stroke-width'),
+  };
+}, key);
+
+// State 1 + 2: before any pin
+const a2b = await inspect('alpha->beta');
+const b2g = await inspect('beta->gamma');
+
+// State 3: pin alpha→beta — pin wins over hot
+await page.locator('[data-edge-count-badge="alpha->beta"]').click();
+await page.waitForTimeout(200);
+const a2bPinned = await inspect('alpha->beta');
+
+await browser.close();
+
+// Cyber theme amber: #fbbf24
+const amberHex = '#fbbf24';
+const flowEdgeNotAmber = (s) => !!s && s.toLowerCase() !== amberHex.toLowerCase();
+
+const results = {
+  hot_present:        a2b !== null && a2b.hot === 'true',
+  hot_strokeAmber:    a2b !== null && (a2b.stroke || '').toLowerCase() === amberHex.toLowerCase(),
+  hot_strokeWidth2:   a2b !== null && a2b.strokeWidth === '2',
+  warm_notHot:        b2g !== null && b2g.hot === 'false',
+  warm_strokeNotAmber: b2g !== null && flowEdgeNotAmber(b2g.stroke),
+  warm_strokeWidth1:  b2g !== null && b2g.strokeWidth === '1',
+  pin_winsOverHot:    a2bPinned !== null && a2bPinned.pinned === 'true' && a2bPinned.hot === 'true'
+                      && (a2bPinned.stroke || '').toLowerCase() !== amberHex.toLowerCase()
+                      && a2bPinned.strokeWidth === '2',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-badge hot:`, JSON.stringify(results),
+  `\n  a2b(12msg)=`, a2b,
+  `\n  b2g(4msg)=`, b2g,
+  `\n  a2b-pinned=`, a2bPinned);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-badge-hover-test.mjs

@@ -0,0 +1,85 @@
+/* Round 122 verification: hovering the edge midpoint count badge
+ * (R100/R121) sets hoveredEdgeKey — same as hovering the line
+ * itself (R48). Endpoint rings light, edge brightens. R121 only
+ * wired click; R122 closes the hover consistency gap.
+ *
+ * Fleet: alpha→beta with 4 msgs (badge renders), gamma idle.
+ * Hover the badge → alpha + beta get endpoint rings (R111),
+ * gamma stays bare. mouseleave → rings clear.
+ */
+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')] } });
+});
+
+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', 'alpha', 'beta', 40 * 1000),
+  mkMsg('m3', 'alpha', 'beta', 50 * 1000),
+  mkMsg('m4', 'alpha', 'beta', 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 === 3, { timeout: 30000 });
+await page.waitForSelector('[data-edge-count-badge]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const rings = () => page.evaluate(() => ({
+  alpha: !!document.querySelector('g[data-node="alpha"] [data-edge-endpoint-ring]'),
+  beta:  !!document.querySelector('g[data-node="beta"]  [data-edge-endpoint-ring]'),
+  gamma: !!document.querySelector('g[data-node="gamma"] [data-edge-endpoint-ring]'),
+}));
+
+const before = await rings();
+
+// Hover the badge.
+await page.locator('[data-edge-count-badge="alpha->beta"]').hover();
+await page.waitForTimeout(300);
+const onHover = await rings();
+
+// Mouse far away.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterLeave = await rings();
+
+await browser.close();
+
+const results = {
+  before_noRings:  !before.alpha && !before.beta && !before.gamma,
+  hover_alphaRing:  onHover.alpha === true,
+  hover_betaRing:   onHover.beta === true,
+  hover_gammaBare:  onHover.gamma === false,
+  leave_allClear:  !afterLeave.alpha && !afterLeave.beta && !afterLeave.gamma,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-badge hover:`, JSON.stringify(results),
+  `\n  before=`,    before,
+  `\n  onHover=`,   onHover,
+  `\n  afterLeave=`, afterLeave);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-badge-lift-test.mjs

@@ -0,0 +1,150 @@
+/* Round 164 verification: edge midpoint count badge gains
+ * hover-lift (6th surface in the hover-elevation idiom family).
+ *
+ * Pre-R164 the badge had R122 hover→edge-brighten propagation
+ * but the badge itself stayed static (r=9, strokeWidth=1 or 2).
+ * The hover-elevation family covered nodes/panels/group boxes/
+ * recent rows/legend rows but not the canvas edge badges.
+ *
+ * R164:
+ *   r = (isHoveredEdge || isPinned) ? 10.5 : 9
+ *   transition r 180ms ease-out
+ *   data-edge-badge-lifted = 'true' | 'false'
+ *
+ * Pin still keeps its R121 stroke change (legendHeadline +
+ * width 2). Hover and pin share the radius lift.
+ *
+ * Test:
+ *   1. Mock 4 msgs on alpha→beta (R100 threshold = count >= 3)
+ *   2. Probe idle radius = 9
+ *   3. Hover the edge line → badge r = 10.5
+ *   4. Mouseleave → r = 9 again
+ *   5. Click badge → pin, r = 10.5 + stroke change
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias) => ({
+    alias, status: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // 4 sessions so alpha and beta sit 90° apart on the ring
+  // (not 180° apart — which would put alpha→beta midpoint
+  // exactly on the hub at 500,330 and let the hub's r=18
+  // halo intercept the badge hover). gamma + delta are
+  // filler with no flows; the only edge badge that renders
+  // is alpha↔beta.
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+
+const now = Date.now();
+const msgs = [];
+for (let i = 0; i < 4; i++) {
+  msgs.push({ id: `m${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (10000 + i * 500)).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 === 4, { timeout: 30000 });
+await page.waitForSelector('[data-edge-count-badge]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+// Probe idle state
+const idle = await page.evaluate(() => {
+  const g = document.querySelector('[data-edge-count-badge]');
+  if (!g) return null;
+  const c = g.querySelector('circle');
+  return {
+    r: parseFloat(c.getAttribute('r')),
+    lifted: c.getAttribute('data-edge-badge-lifted'),
+    stroke: c.getAttribute('stroke'),
+    strokeWidth: parseFloat(c.getAttribute('stroke-width')),
+  };
+});
+
+// Hover the badge (it also propagates to hoveredEdgeKey)
+await page.locator('[data-edge-count-badge]').hover();
+await page.waitForTimeout(300);
+const hovered = await page.evaluate(() => {
+  const g = document.querySelector('[data-edge-count-badge]');
+  if (!g) return null;
+  const c = g.querySelector('circle');
+  return {
+    r: parseFloat(c.getAttribute('r')),
+    lifted: c.getAttribute('data-edge-badge-lifted'),
+  };
+});
+
+// Move cursor away to a known empty area
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const idleAgain = await page.evaluate(() => {
+  const g = document.querySelector('[data-edge-count-badge]');
+  if (!g) return null;
+  const c = g.querySelector('circle');
+  return {
+    r: parseFloat(c.getAttribute('r')),
+    lifted: c.getAttribute('data-edge-badge-lifted'),
+  };
+});
+
+// Click badge → pin
+await page.locator('[data-edge-count-badge]').click({ force: true });
+await page.waitForTimeout(300);
+// Move away to clear hover, then probe pinned state.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const pinned = await page.evaluate(() => {
+  const g = document.querySelector('[data-edge-count-badge]');
+  if (!g) return null;
+  const c = g.querySelector('circle');
+  return {
+    r: parseFloat(c.getAttribute('r')),
+    lifted: c.getAttribute('data-edge-badge-lifted'),
+    strokeWidth: parseFloat(c.getAttribute('stroke-width')),
+    pinnedAttr: g.getAttribute('data-edge-count-badge-pinned'),
+  };
+});
+
+await browser.close();
+
+const results = {
+  idle_r_9:               idle && Math.abs(idle.r - 9) < 0.01,
+  idle_lifted_false:      idle && idle.lifted === 'false',
+  idle_strokeWidth_1:     idle && idle.strokeWidth === 1,
+  hover_r_10p5:           hovered && Math.abs(hovered.r - 10.5) < 0.01,
+  hover_lifted_true:      hovered && hovered.lifted === 'true',
+  idle_again_r_9:         idleAgain && Math.abs(idleAgain.r - 9) < 0.01,
+  idle_again_lifted_false: idleAgain && idleAgain.lifted === 'false',
+  pinned_r_10p5:          pinned && Math.abs(pinned.r - 10.5) < 0.01,
+  pinned_lifted_true:     pinned && pinned.lifted === 'true',
+  pinned_strokeWidth_2:   pinned && pinned.strokeWidth === 2,
+  pinned_attr_true:       pinned && pinned.pinnedAttr === 'true',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge lift:`, JSON.stringify(results),
+  `\n  idle =`, idle,
+  `\n  hovered =`, hovered,
+  `\n  idleAgain =`, idleAgain,
+  `\n  pinned =`, pinned);
+process.exit(ok ? 0 : 1);