@sleep2agi/agent-network-dashboard 0.5.1-preview.8 → 0.5.1-preview.81

package/scripts/topo-chrome-segmented-radius-test.mjs

@@ -0,0 +1,100 @@
+/* Round 376 verification: nodeSize + zoom segmented control wrappers
+ * rounded-md → rounded-lg (6 → 8 px). Sibling polish to R375 Layout-
+ * toggle wrapper — three chrome-strip segmented controls now all
+ * share rounded-lg at the wrapper tier:
+ *   R375 Layout-toggle wrapper  rounded-lg  8 px
+ *   R376 nodeSize wrapper       rounded-lg  8 px (this round)
+ *   R376 zoom wrapper           rounded-lg  8 px (this round)
+ *
+ * Individual atomic chrome buttons (reset, fullscreen) keep rounded-
+ * md (6 px) as their own atomic-button tier — chrome strip now
+ * expresses a two-tier hierarchy: 'segmented control container'
+ * (rounded-lg) vs 'standalone button' (rounded-md).
+ *
+ * Contract:
+ *   - [data-topo-chrome-nodesize-radius] computed border-radius '8px'.
+ *   - data-topo-chrome-nodesize-radius === 'rounded-lg'.
+ *   - [data-topo-chrome-zoom-wrapper-radius] computed border-radius '8px'.
+ *   - data-topo-chrome-zoom-wrapper-radius === 'rounded-lg'.
+ *   - Pre-R376 invariants: border 1px + flex display + overflow:hidden
+ *     + R263 background-color/border-color transition preserved on
+ *     each wrapper.
+ *   - Atomic reset + fullscreen buttons still have border-radius 6px
+ *     (rounded-md, untouched).
+ */
+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('a'), mk('b'), mk('c') ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-topo-chrome-nodesize-radius]',     { timeout: 15000 });
+await page.waitForSelector('[data-topo-chrome-zoom-wrapper-radius]', { timeout: 5000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const nodesize = document.querySelector('[data-topo-chrome-nodesize-radius]');
+  const zoom     = document.querySelector('[data-topo-chrome-zoom-wrapper-radius]');
+  const reset    = document.querySelector('[data-topo-chrome-reset]');
+  const fs       = document.querySelector('[data-topo-chrome-fullscreen]');
+  const ncs      = nodesize ? getComputedStyle(nodesize) : null;
+  const zcs      = zoom     ? getComputedStyle(zoom)     : null;
+  const rcs      = reset    ? getComputedStyle(reset)    : null;
+  const fcs      = fs       ? getComputedStyle(fs)       : null;
+  return {
+    nodesizeRadius:    ncs?.borderRadius ?? null,
+    nodesizeData:      nodesize?.getAttribute('data-topo-chrome-nodesize-radius') ?? null,
+    nodesizeBorderW:   ncs?.borderWidth ?? null,
+    nodesizeTrans:     ncs?.transition ?? null,
+    zoomRadius:        zcs?.borderRadius ?? null,
+    zoomData:          zoom?.getAttribute('data-topo-chrome-zoom-wrapper-radius') ?? null,
+    zoomBorderW:       zcs?.borderWidth ?? null,
+    zoomTrans:         zcs?.transition ?? null,
+    resetRadius:       rcs?.borderRadius ?? null,
+    fullscreenRadius:  fcs?.borderRadius ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  nodesize_radius_8px:    probe.nodesizeRadius === '8px',           // rounded-lg
+  nodesize_data_lg:       probe.nodesizeData === 'rounded-lg',
+  nodesize_border_1px:    probe.nodesizeBorderW === '1px',
+  nodesize_trans_border:  hasTrans(probe.nodesizeTrans, 'border-color'),  // R263 / R268
+  zoom_radius_8px:        probe.zoomRadius === '8px',
+  zoom_data_lg:           probe.zoomData === 'rounded-lg',
+  zoom_border_1px:        probe.zoomBorderW === '1px',
+  zoom_trans_border:      hasTrans(probe.zoomTrans, 'border-color'),
+  // Atomic chrome buttons stay rounded-md (6 px) — invariant.
+  reset_still_md:         probe.resetRadius === '6px',
+  fullscreen_still_md:    probe.fullscreenRadius === '6px',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chrome segmented wrappers rounded-md → rounded-lg:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-click-ripple-opacity-test.mjs

@@ -0,0 +1,99 @@
+/* Round 403 verification: click-ripple SMIL initial opacity 0.7 →
+ * 0.8. Theme-consistency / canvas-presence polish family (8th
+ * anchor) — click-feedback now starts at the same 0.8 alpha as
+ * R370 hub hover-ring and R391 hub-spoke active. Three canvas
+ * state-feedback indicators share a uniform 0.8 start alpha.
+ *
+ * Contract:
+ *   - Click the hub to fire the ripple (R52 fitView click path)
+ *   - data-click-ripple-start-opacity === '0.8' on the opacity
+ *     <animate> element
+ *   - The opacity animation `values` starts with '0.8'
+ *   - Pre-R403 invariants preserved:
+ *     * dur='0.5s'
+ *     * R227 calcMode='spline'
+ *     * R227 keySplines='0.25 0.1 0.25 1'
+ *     * fill='freeze'
+ *
+ * Source-file verification fallback: the SMIL element appears
+ * only during the 500ms ripple window, so the test reads source
+ * if the runtime probe doesn't catch the element in flight.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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 {}
+});
+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: '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') ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-topo-hub]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+// Click hub to fire ripple
+await page.click('[data-topo-hub]');
+await page.waitForTimeout(100);  // ripple lives 500ms, probe early
+
+const probe = await page.evaluate(() => {
+  const ripple = document.querySelector('[data-click-ripple]');
+  if (!ripple) return null;
+  const opacityAnim = ripple.querySelector('[data-click-ripple-start-opacity]');
+  return {
+    rippleMounted:  true,
+    strokeWidth:    ripple.getAttribute('stroke-width'),
+    fillAttr:       ripple.getAttribute('fill'),
+    startOpacity:   opacityAnim?.getAttribute('data-click-ripple-start-opacity') ?? null,
+    valuesAttr:     opacityAnim?.getAttribute('values') ?? null,
+    durAttr:        opacityAnim?.getAttribute('dur') ?? null,
+    calcMode:       opacityAnim?.getAttribute('calcMode') ?? null,
+    keySplines:     opacityAnim?.getAttribute('keySplines') ?? null,
+    fillFreeze:     opacityAnim?.getAttribute('fill') ?? null,
+  };
+});
+
+// Source-file fallback in case the SMIL element is not caught
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasStartOpacity = fileText.includes('data-click-ripple-start-opacity="0.8"');
+const sourceHasValues08     = fileText.includes('values="0.8;0"');
+
+await browser.close();
+
+const results = {
+  // Source-file invariants (deterministic from disk)
+  source_start_opacity_attr: sourceHasStartOpacity,
+  source_values_0_8_to_0:    sourceHasValues08,
+  // Runtime probe (best-effort during 500ms ripple window)
+  ripple_mounted:            !!probe,
+  start_opacity_0_8:         probe?.startOpacity === '0.8',
+  values_0_8_to_0:           probe?.valuesAttr === '0.8;0',
+  dur_0_5s:                  probe?.durAttr === '0.5s',
+  calcMode_spline:           probe?.calcMode === 'spline',
+  keySplines_easeout:        probe?.keySplines === '0.25 0.1 0.25 1',
+  // Static ring invariants
+  strokeWidth_2:             probe?.strokeWidth === '2',
+  fill_none:                 probe?.fillAttr === 'none',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} click-ripple SMIL opacity 0.7 → 0.8:`, JSON.stringify(results),
+  '\n  probe:', JSON.stringify(probe, null, 2));
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,90 @@
+/* Round 361 verification: edge midpoint badge text fontSize 10 → 11.
+ * Sibling visual-weight bump to R360 hub digit 11 → 12. The badge
+ * digit is the per-edge equivalent of the hub digit — a high-info
+ * scalar (link.count) at a stable canvas position. Pre-R361 the
+ * digit at fontSize=10 was readable but small against the r=9 /
+ * 18-px badge envelope; fontSize=11 nudges the glyph ~10 % bigger
+ * (bbox ~7×10 px from ~6×9 px). Still well inside the r=9 idle +
+ * r=10.5 hover/pin (R164) envelope.
+ *
+ * Contract:
+ *   - Edge badge text font-size attr === '11'.
+ *   - data-edge-badge-text-font-size === '11'.
+ *   - Pre-R361 invariants preserved:
+ *     * R224 tabular-nums fontVariantNumeric
+ *     * R220 letter-spacing 0px → 0.4px on pin/hot
+ *     * fontWeight=700 + fontFamily=monospace
+ *     * textAnchor="middle"
+ *     * data-edge-badge-text={link.key} surface attr
+ *
+ * Test mounts the dashboard with 1 message → 1 flow link → 1 badge.
+ */
+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('a'), mk('b') ] } });
+});
+const now = Date.now();
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { id: 'm1', from_alias: 'a', to_alias: 'b', content: 'ping',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+] } }));
+await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-edge-badge-text]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const t = document.querySelector('[data-edge-badge-text]');
+  const cs = t ? getComputedStyle(t) : null;
+  return {
+    fontSizeAttr:    t?.getAttribute('font-size') ?? null,
+    fontSizeData:    t?.getAttribute('data-edge-badge-text-font-size') ?? null,
+    fontWeight:      t?.getAttribute('font-weight') ?? null,
+    fontFamily:      t?.getAttribute('font-family') ?? null,
+    textAnchor:      t?.getAttribute('text-anchor') ?? null,
+    linkKey:         t?.getAttribute('data-edge-badge-text') ?? null,
+    pinAttr:         t?.getAttribute('data-edge-badge-text-pin') ?? null,
+    fontVariant:     cs?.fontVariantNumeric ?? null,
+    letterSpacing:   cs?.letterSpacing ?? null,
+  };
+});
+
+await browser.close();
+
+const isRestLs = (v) => v === 'normal' || v === '0px' || v === '0' || v === null;
+
+const results = {
+  font_size_attr_11:    probe.fontSizeAttr === '11',
+  data_font_size_11:    probe.fontSizeData === '11',
+  font_weight_700:      probe.fontWeight === '700',
+  font_family_mono:     /monospace/i.test(probe.fontFamily || ''),
+  text_anchor_middle:   probe.textAnchor === 'middle',
+  link_key_present:     (probe.linkKey || '').length > 0,
+  pin_attr_false:       probe.pinAttr === 'false',     // single-flow, not isHot
+  tabular_nums:         /tabular-nums/.test(probe.fontVariant || ''),  // R224
+  rest_letter_spacing:  isRestLs(probe.letterSpacing),                  // R220 rest = 0
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge fontSize 10 → 11:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,94 @@
+/* Round 395 verification: edge-badge gains a third hover axis —
+ * opacity 0.85 (cyber) / 0.95 (light) → 1.0 on isHoveredEdge.
+ * Pre-R395 hovering thickened the stroke (R394 1.25 → 1.5) and
+ * grew the radius (R164 9 → 10.5) but the badge's translucency
+ * stayed at R371's rest alpha. R395 makes the hovered badge fully
+ * opaque so it reads as "in focus" against dim siblings.
+ *
+ * Contract:
+ *   - Cold rest badge (no hover): opacity attr === '0.85' (cyber)
+ *   - data-edge-badge-opacity-rest === '0.85' (cyber)
+ *   - data-edge-badge-opacity-hover === '1'
+ *   - Source-file verification of the hover branch
+ *     (`isHoveredEdge ? 1 : (isLight ? 0.95 : 0.85)`) — SVG
+ *     hover dispatch is fragile in headless; source-grep is the
+ *     reliable probe for the wire change.
+ *   - Pre-R395 invariants on cold rest:
+ *     * R164 r='9'
+ *     * R367 strokeWidth='1.25'
+ *     * lifted='false'
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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 {}
+});
+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: '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') ] } });
+});
+// Seed a cold flow (count=3 < 10) so badge stays in cold rest mode
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+    { id: 'm2', from_alias: 'alpha', to_alias: 'beta', content: 'pong', created_at: fresh, network_id: 'default' },
+    { id: 'm3', from_alias: 'alpha', to_alias: 'beta', content: 'ack',  created_at: fresh, network_id: 'default' },
+  ] },
+}));
+await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-edge-badge-stroke-width-rest]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const restProbe = await page.evaluate(() => {
+  const badge = document.querySelector('[data-edge-badge-stroke-width-rest]');
+  return badge ? {
+    opacityAttr:   badge.getAttribute('opacity'),
+    restOpacity:   badge.getAttribute('data-edge-badge-opacity-rest'),
+    hoverOpacity:  badge.getAttribute('data-edge-badge-opacity-hover'),
+    strokeWidth:   badge.getAttribute('stroke-width'),
+    rAttr:         badge.getAttribute('r'),
+    lifted:        badge.getAttribute('data-edge-badge-lifted'),
+  } : null;
+});
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasHover1   = fileText.includes('opacity={isHoveredEdge ? 1 : (isLight ? 0.95 : 0.85)}');
+const sourceHasDataHover = fileText.includes('data-edge-badge-opacity-hover="1"');
+
+await browser.close();
+
+const results = {
+  // Cold rest (cyber): R371 opacity 0.85
+  rest_opacity_0_85:        restProbe?.opacityAttr === '0.85',
+  rest_data_0_85:           restProbe?.restOpacity === '0.85',
+  // R395: new hover-data attr
+  hover_data_1:             restProbe?.hoverOpacity === '1',
+  // Pre-R395 invariants
+  rest_strokeWidth_1_25:    restProbe?.strokeWidth === '1.25',     // R367 invariant
+  rest_r_9:                 restProbe?.rAttr === '9',              // R164 invariant
+  rest_lifted_false:        restProbe?.lifted === 'false',
+  // Source-file verification of the hover branch
+  source_hover_branch:      sourceHasHover1,
+  source_data_attr:         sourceHasDataHover,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-badge hover opacity 0.85 → 1.0:`, JSON.stringify(results),
+  '\n  restProbe:', restProbe);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,92 @@
+/* Round 394 verification: edge-badge gains hover strokeWidth tier
+ * (1.5) between cold rest (R367 1.25) and pin/hot (2). Pre-R394
+ * hovering an edge thickened nothing on the badge stroke; r grew
+ * via R164 but contour stayed at 1.25. R394 adds the missing
+ * stroke axis on hover so both r and stroke lift in concert.
+ *
+ * Contract:
+ *   - Cold rest badges (no hover, no pin, no hot): stroke-width '1.25'
+ *   - Hovered badge: stroke-width '1.5' + R164 r='10.5'
+ *   - data-edge-badge-stroke-width-rest='1.25' attr present on all
+ *   - data-edge-badge-stroke-width-hover='1.5' attr present on all
+ *   - Pin/hot badges (count≥10 = hot): stroke-width '2'
+ *
+ * Fixture: 9 messages alpha→beta keeps the flow cold (under hot
+ * threshold of 10). Hover the badge via DOM dispatch.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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 {}
+});
+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: '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') ] } });
+});
+// Seed a cold flow (count=3 < 10) so badge stays in cold rest mode
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+    { id: 'm2', from_alias: 'alpha', to_alias: 'beta', content: 'pong', created_at: fresh, network_id: 'default' },
+    { id: 'm3', from_alias: 'alpha', to_alias: 'beta', content: 'ack',  created_at: fresh, network_id: 'default' },
+  ] },
+}));
+await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-edge-badge-stroke-width-rest]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+// Read cold rest probe
+const restProbe = await page.evaluate(() => {
+  const badge = document.querySelector('[data-edge-badge-stroke-width-rest]');
+  return badge ? {
+    strokeWidthAttr: badge.getAttribute('stroke-width'),
+    rAttr:           badge.getAttribute('r'),
+    restData:        badge.getAttribute('data-edge-badge-stroke-width-rest'),
+    hoverData:       badge.getAttribute('data-edge-badge-stroke-width-hover'),
+    lifted:          badge.getAttribute('data-edge-badge-lifted'),
+  } : null;
+});
+
+// Source-file verification of the hover path. Browser hover for
+// SVG sub-elements with pointer-events:none parents is fragile;
+// the wire change is straightforward (`isHoveredEdge ? 1.5 :
+// 1.25` and the new -hover data attr), so confirm via source.
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasHover15 = fileText.includes('isHoveredEdge ? 1.5 : 1.25');
+const sourceHasHoverData = fileText.includes('data-edge-badge-stroke-width-hover="1.5"');
+
+await browser.close();
+
+const results = {
+  // Cold rest (current view: no hover) — pre-R394 path preserved
+  rest_strokeWidth_1_25:    restProbe?.strokeWidthAttr === '1.25',
+  rest_r_9:                 restProbe?.rAttr === '9',
+  rest_lifted_false:        restProbe?.lifted === 'false',
+  // R394 data attrs present
+  data_rest_1_25:           restProbe?.restData === '1.25',
+  data_hover_1_5:           restProbe?.hoverData === '1.5',
+  // Source-file verification of the hover branch
+  source_hover_15:          sourceHasHover15,
+  source_data_hover:        sourceHasHoverData,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-badge hover strokeWidth tier (1.25/1.5/2):`, JSON.stringify(results),
+  '\n  restProbe:', restProbe);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,80 @@
+/* Round 371 verification: edge-badge cyber opacity 0.82 → 0.85.
+ * Sibling theme-consistency polish to R370 hub hover-ring (cyber
+ * 0.7 → 0.8). R251 designed the badge at 0.82 (cyber) / 0.95 (light)
+ * — a 13 % delta. R371 narrows to 10 %, bringing cyber closer to
+ * light theme's 0.95 floor. Light stays at 0.95.
+ *
+ * Contract (cyber):
+ *   - Edge badge circle opacity attr === '0.85'.
+ *   - data-edge-badge-opacity === '0.85'.
+ *   - Pre-R371 invariants:
+ *     * R164 r=9 (cold)
+ *     * R367 strokeWidth=1.25 (cold rest)
+ *     * R251 transition list (fill + opacity 200ms + r + stroke
+ *       300ms) intact
+ */
+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('a'), mk('b') ] } });
+});
+const now = Date.now();
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { id: 'm1', from_alias: 'a', to_alias: 'b', content: 'ping',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+] } }));
+await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-edge-badge-stroke-width-rest]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const circle = document.querySelector('[data-edge-badge-stroke-width-rest]');
+  const cs = circle ? getComputedStyle(circle) : null;
+  return {
+    opacityAttr:     circle?.getAttribute('opacity') ?? null,
+    opacityData:     circle?.getAttribute('data-edge-badge-opacity') ?? null,
+    rAttr:           circle?.getAttribute('r') ?? null,
+    strokeWidthAttr: circle?.getAttribute('stroke-width') ?? null,
+    transition:      cs?.transition ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  opacity_attr_0_85:    probe.opacityAttr === '0.85',
+  data_opacity_0_85:    probe.opacityData === '0.85',
+  r_9_cold:             probe.rAttr === '9',                  // R164 cold
+  stroke_width_1_25:    probe.strokeWidthAttr === '1.25',     // R367
+  trans_has_opacity:    hasTrans(probe.transition, 'opacity'),
+  trans_has_fill:       hasTrans(probe.transition, 'fill'),
+  trans_has_strokew:    hasTrans(probe.transition, 'stroke-width'),
+  trans_has_r:          hasTrans(probe.transition, 'r'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge cyber opacity 0.82 → 0.85:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,86 @@
+/* Round 396 verification: extend the R395 opacity → 1.0 lift to
+ * the pinned state. Pin (sticky selection) was reading softer
+ * than hover (transient preview) at rest 0.85 cyber / 0.95 light
+ * despite being the stronger commitment. R396 unifies hover + pin
+ * at opacity 1.0 so the data-edge-badge-lifted='true' surface
+ * uniformly carries full alpha.
+ *
+ * Contract:
+ *   - Source-file verification of the unified gate (the wire
+ *     change is mechanical; SVG hover/pin dispatch in headless
+ *     is fragile but the source is the canonical contract).
+ *   - data-edge-badge-opacity-active='1' attr present on cold rest
+ *   - data-edge-badge-opacity-rest === '0.85' (cyber) — R371 invariant
+ *   - data-edge-badge-opacity-hover === '1' — R395 invariant
+ *   - Cold rest opacity attr === '0.85' (cyber) — neither hover nor pin
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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 {}
+});
+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: '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') ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+    { id: 'm2', from_alias: 'alpha', to_alias: 'beta', content: 'pong', created_at: fresh, network_id: 'default' },
+    { id: 'm3', from_alias: 'alpha', to_alias: 'beta', content: 'ack',  created_at: fresh, network_id: 'default' },
+  ] },
+}));
+await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-edge-badge-stroke-width-rest]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const restProbe = await page.evaluate(() => {
+  const badge = document.querySelector('[data-edge-badge-stroke-width-rest]');
+  return badge ? {
+    opacityAttr:    badge.getAttribute('opacity'),
+    restData:       badge.getAttribute('data-edge-badge-opacity-rest'),
+    hoverData:      badge.getAttribute('data-edge-badge-opacity-hover'),
+    activeData:     badge.getAttribute('data-edge-badge-opacity-active'),
+    lifted:         badge.getAttribute('data-edge-badge-lifted'),
+  } : null;
+});
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasUnifiedGate = fileText.includes('opacity={(isHoveredEdge || isPinned) ? 1 : (isLight ? 0.95 : 0.85)}');
+const sourceHasActiveData  = fileText.includes('data-edge-badge-opacity-active="1"');
+
+await browser.close();
+
+const results = {
+  // Cold rest (no hover, no pin) — pre-R396 path preserved
+  rest_opacity_0_85:       restProbe?.opacityAttr === '0.85',
+  rest_data_0_85:          restProbe?.restData === '0.85',
+  rest_lifted_false:       restProbe?.lifted === 'false',
+  // R395 attr preserved + R396 new attr
+  hover_data_1:            restProbe?.hoverData === '1',
+  active_data_1:           restProbe?.activeData === '1',
+  // R396 source-file wire (mechanical change)
+  source_unified_gate:     sourceHasUnifiedGate,
+  source_active_attr:      sourceHasActiveData,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-badge opacity unifies hover + pin → 1.0:`, JSON.stringify(results),
+  '\n  restProbe:', restProbe);
+process.exit(ok ? 0 : 1);