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

package/scripts/topo-dense-alias-fill-transition-test.mjs

@@ -0,0 +1,133 @@
+/* Round 212 verification: dense plain-text alias (used when
+ * denseLayout > 16 nodes) gains fill transition on status flip,
+ * extending R211's card-mode coverage to the dense fallback path
+ * users see most on busy fleets.
+ *
+ * Pre-R212 the dense alias snap-cut its fill on tier change while
+ * the status ring smoothly transitioned (R167). R212 inline
+ * transition combines R26 transform 200ms (hover lift) with R212
+ * fill 300ms (status flip ease).
+ *
+ * Test (cyber dark, 17 sessions in mixed status → denseLayout=true):
+ *   1. 17+ [data-node-dense-alias-text] elements present (one per
+ *      session — confirms denseLayout path fired, not card mode).
+ *   2. Inline transition includes BOTH 'transform 200ms' AND
+ *      'fill 300ms' (composite spliced, group-hover lift unbroken).
+ *   3. group-hover:-translate-y-[1.5px] className preserved (lift
+ *      still wires via CSS pseudo-class).
+ *   4. Mixed-status fleet renders different fills per tier (working
+ *      green ≠ idle teal ≠ offline gray family).
+ *   5. paintOrder: stroke + stroke attribute preserved (R110 halo).
+ */
+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();
+// Build 17 sessions: mostly working, a couple idle + offline so fill
+// colors visibly differ.
+const statuses = [
+  ...Array(13).fill('working'),
+  'working', 'idle', 'idle', 'offline',
+];
+const aliases = statuses.map((_, i) => `node-${(i + 1).toString().padStart(2, '0')}`);
+
+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';
+  await route.fulfill({ response: r, json: { ...b, sessions: aliases.map((alias, i) => ({
+    alias, status: statuses[i], 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 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 === 17, { timeout: 30000 });
+await page.waitForSelector('[data-node-dense-alias-text]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  return [...document.querySelectorAll('[data-node-dense-alias-text]')].map(el => ({
+    alias:      el.getAttribute('data-node-dense-alias-text'),
+    text:       el.textContent,
+    fill:       el.getAttribute('fill'),
+    className:  el.getAttribute('class') || '',
+    transition: el.style.transition,
+    paintOrder: el.style.paintOrder,
+    stroke:     el.getAttribute('stroke'),
+  }));
+});
+
+await browser.close();
+
+const hasTransformT = (s) => /transform\s+(?:200ms|0\.2s)/.test(s || '');
+const hasFillT      = (s) => /fill\s+(?:300ms|0\.3s)/.test(s || '');
+
+const workingAlias = probe.find(p => p.alias === 'node-01');  // first working
+const idleAlias    = probe.find(p => p.alias === 'node-15');  // first idle
+const offlineAlias = probe.find(p => p.alias === 'node-17');  // offline
+
+const results = {
+  dense_mode_fired:           probe.length >= 17,
+  // R211 [data-node-alias-text] should NOT be present (card path skipped)
+  card_path_skipped:          true,  // implicit — if dense path fired, card path didn't render its texts
+  all_have_transition_fill:   probe.every(p => hasFillT(p.transition)),
+  all_have_transition_trans:  probe.every(p => hasTransformT(p.transition)),
+  all_keep_group_hover:       probe.every(p => /group-hover:-translate-y/.test(p.className)),
+  all_have_paint_order:       probe.every(p => p.paintOrder === 'stroke'),
+  all_have_halo_stroke:       probe.every(p => !!p.stroke && p.stroke !== 'none'),
+  working_idle_fill_differs:  workingAlias?.fill && idleAlias?.fill
+                              && workingAlias.fill !== idleAlias.fill,
+  working_offline_fill_differs: workingAlias?.fill && offlineAlias?.fill
+                              && workingAlias.fill !== offlineAlias.fill,
+  alias_text_rendered:        workingAlias?.text === 'node-01',
+};
+
+// Verify card path skipped — no R211 card-mode texts at >16 nodes
+const cardAliasCount = await chromium.launch({ headless: true }).then(async (b2) => {
+  const ctx2 = await b2.newContext();
+  await ctx2.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx2.addInitScript(() => {
+    try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+  });
+  await ctx2.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const bj = await r.json();
+    const nid = (bj.sessions || [])[0]?.network_id || 'default';
+    await route.fulfill({ response: r, json: { ...bj, sessions: aliases.map((alias, i) => ({
+      alias, status: statuses[i], 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 ctx2.route('**/api/hub/messages*', (rr) => rr.fulfill({ json: { messages: [] } }));
+  await ctx2.route('**/api/hub/tasks*', (rr) => rr.fulfill({ json: { tasks: [] } }));
+  const p2 = await ctx2.newPage();
+  await p2.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await p2.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 17, { timeout: 30000 });
+  await p2.waitForTimeout(300);
+  const c = await p2.evaluate(() =>
+    document.querySelectorAll('[data-node-alias-text]').length);
+  await b2.close();
+  return c;
+});
+results.card_path_skipped = cardAliasCount === 0;
+
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} dense alias fill transition:`, JSON.stringify(results),
+  `\n  sample (first 3):`, probe.slice(0, 3),
+  `\n  cardAliasCount:`, cardAliasCount);
+process.exit(ok ? 0 : 1);

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