@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

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-crossfade-test.mjs

@@ -0,0 +1,138 @@
+/* Round 215 verification: edge midpoint count badge always-mounts;
+ * visibility crossfades via wrapper <g> opacity instead of mount/
+ * unmount on link.count >= 3 threshold. Closes the canvas-edge
+ * surface of the always-mount-opacity-gate family.
+ *
+ * Pre-R215 a flow's first 2 → 3 message snap-popped the badge in
+ * one frame, and a hot flow tapering 3 → 2 vanished in one frame.
+ * R215 always-mounts and opacity-gates, giving 300ms ease through
+ * the threshold crossing.
+ *
+ * Test (cyber dark, mock 3 flows below + at + above threshold):
+ *   1. flow A: count=2 (below threshold) → badge in DOM but
+ *      visible='false', opacity 0, pointerEvents 'none',
+ *      aria-hidden='true', role unset, tabIndex=-1
+ *   2. flow B: count=3 (at threshold)    → badge visible='true',
+ *      opacity > 0, pointerEvents 'all', role='button', tabIndex=0
+ *   3. flow C: count=12 (hot)            → badge visible='true',
+ *      hot='true', opacity > 0, all interactive
+ *   4. Every wrapper has inline transition: 'opacity 300ms ease-out'
+ *   5. text content always matches link.count (even the hidden one)
+ */
+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: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+
+const now = Date.now();
+const msgs = [];
+// flow A: alpha → beta · count=2 (below threshold, badge hidden)
+for (let i = 0; i < 2; i++) {
+  msgs.push({ id: `A${i}`, from_alias: 'alpha', to_alias: 'beta',  content: 'hi',
+    network_id: 'default', created_at: new Date(now - (1000 + i * 50)).toISOString() });
+}
+// flow B: alpha → gamma · count=3 (at threshold, badge visible)
+for (let i = 0; i < 3; i++) {
+  msgs.push({ id: `B${i}`, from_alias: 'alpha', to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (5000 + i * 50)).toISOString() });
+}
+// flow C: alpha → delta · count=12 (hot)
+for (let i = 0; i < 12; i++) {
+  msgs.push({ id: `C${i}`, from_alias: 'alpha', to_alias: 'delta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (10000 + i * 50)).toISOString() });
+}
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: msgs } }));
+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-edge-count-badge]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  return [...document.querySelectorAll('[data-edge-count-badge]')].map(el => {
+    const cs = getComputedStyle(el);
+    const txt = el.querySelector('text')?.textContent;
+    return {
+      key:           el.getAttribute('data-edge-count-badge'),
+      visible:       el.getAttribute('data-edge-count-badge-visible'),
+      hot:           el.getAttribute('data-edge-count-badge-hot'),
+      role:          el.getAttribute('role'),
+      tabIndex:      el.getAttribute('tabindex'),
+      ariaHidden:    el.getAttribute('aria-hidden'),
+      opacity:       parseFloat(el.getAttribute('opacity') || ''),
+      computedPointer: cs.pointerEvents,
+      transition:    el.style.transition,
+      text:          txt,
+    };
+  });
+});
+
+await browser.close();
+
+const flowA = probe.find(p => p.key === 'alpha->beta');   // count=2
+const flowB = probe.find(p => p.key === 'alpha->gamma');  // count=3
+const flowC = probe.find(p => p.key === 'alpha->delta');  // count=12
+
+const results = {
+  // All 3 wrappers present in DOM (always-mount)
+  three_badges_in_dom:       probe.length === 3,
+  flowA_present:             !!flowA,
+  flowB_present:             !!flowB,
+  flowC_present:             !!flowC,
+
+  // flow A (count=2, hidden)
+  A_visible_false:           flowA?.visible === 'false',
+  A_opacity_0:               flowA?.opacity === 0,
+  A_pointer_none:            flowA?.computedPointer === 'none',
+  A_aria_hidden:             flowA?.ariaHidden === 'true',
+  A_role_unset:              flowA?.role === null || flowA?.role === '',
+  A_text_2:                  flowA?.text === '2',
+
+  // flow B (count=3, just visible)
+  B_visible_true:            flowB?.visible === 'true',
+  B_opacity_positive:        (flowB?.opacity ?? 0) > 0,
+  B_pointer_all:             flowB?.computedPointer === 'all',
+  B_role_button:             flowB?.role === 'button',
+  B_text_3:                  flowB?.text === '3',
+  B_not_hot:                 flowB?.hot === 'false',
+
+  // flow C (count=12, hot)
+  C_visible_true:            flowC?.visible === 'true',
+  C_hot_true:                flowC?.hot === 'true',
+  C_opacity_positive:        (flowC?.opacity ?? 0) > 0,
+  C_text_12:                 flowC?.text === '12',
+
+  // All have transition with opacity 300ms (even hidden ones — they
+  // need the transition for when count crosses back into threshold)
+  all_have_transition:       probe.every(p => /opacity\s+(?:300ms|0\.3s)/.test(p.transition || '')),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge crossfade:`, JSON.stringify(results),
+  `\n  flowA (count=2 hidden):`, flowA,
+  `\n  flowB (count=3 visible):`, flowB,
+  `\n  flowC (count=12 hot):`, flowC);
+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);