@sleep2agi/agent-network-dashboard 0.5.1-preview.13 → 0.5.1-preview.131

package/scripts/topo-chrome-fullscreen-icon-sw-test.mjs

@@ -0,0 +1,92 @@
+/* Round 455 verification: chrome fullscreen icon (ENTER + EXIT
+ * variants) strokeWidth hover lift via Tailwind arbitrary class
+ * group-hover:[stroke-width:2.8]. Completes the chrome icon hover
+ * sw lift family (6 anchors).
+ *
+ * Contract:
+ *   - rest: fullscreen-enter icon reports attr stroke-width '2.5' +
+ *     computed '2.5px'
+ *   - hover the fullscreen button: that icon computed '2.8px'
+ *   - source-file probe confirms BOTH variants (enter + exit) carry
+ *     the group-hover:[stroke-width:2.8] class
+ */
+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, status) => ({
+    alias, status, 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', 'working'),
+    mk('beta',  'idle'),
+  ] } });
+});
+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-fullscreen-icon]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readIcon = () => page.evaluate(() => {
+  const i = document.querySelector('[data-topo-chrome-fullscreen-icon]');
+  return i ? {
+    variant:      i.getAttribute('data-topo-chrome-fullscreen-icon'),
+    sw_attr:      i.getAttribute('stroke-width'),
+    sw_computed:  getComputedStyle(i).strokeWidth,
+  } : null;
+});
+
+const rest = await readIcon();
+
+// Hover the fullscreen button parent — the button shares the group
+// scope with the SVG icon child via Tailwind group/group-hover utility.
+let hover = null;
+const btn = await page.$('button[aria-label*="fullscreen" i], button[title*="ullscreen" i]');
+if (btn) {
+  await btn.hover({ force: true });
+  await page.waitForTimeout(300);
+  hover = await readIcon();
+  await page.mouse.move(0, 0);
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+// className appears in TWO fullscreen-icon SVGs (enter + exit). Probe
+// for both variants via separate searches:
+const sourceFullscreenIconCount = (fileText.match(/data-topo-chrome-fullscreen-icon=/g) || []).length;
+const sourceArbitrarySwCount = (fileText.match(/group-hover:\[stroke-width:2\.8\]/g) || []).length;
+// We expect: zoom-in + zoom-out + fullscreen-enter + fullscreen-exit = 4 total
+const sourceFourMatches = sourceArbitrarySwCount >= 4;
+
+await browser.close();
+
+const results = {
+  rest_mounted:                !!rest,
+  rest_attr_2_5:               rest?.sw_attr === '2.5',
+  rest_computed_2_5:           rest?.sw_computed === '2.5px' || rest?.sw_computed === '2.5',
+  hover_computed_2_8:          hover?.sw_computed === '2.8px' || hover?.sw_computed === '2.8',
+  source_fullscreen_variants:  sourceFullscreenIconCount === 2,
+  source_arbitrary_4_matches:  sourceFourMatches,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chrome fullscreen icon sw hover:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  hover:', JSON.stringify(hover),
+  '\n  source matches: variants=' + sourceFullscreenIconCount + ' arbitrary-sw=' + sourceArbitrarySwCount);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chrome-reset-icon-sw-test.mjs

@@ -0,0 +1,80 @@
+/* Round 453 verification: chrome reset icon strokeWidth hover lift —
+ * 2.5 → 2.8 on hoveredReset && !resetSpinning. Sibling to R443
+ * runtime badge inner-icon sw lift.
+ *
+ * Contract:
+ *   - rest: reset icon reports stroke-width '2.5' + hover='false'
+ *   - hover the reset button: icon stroke-width '2.8' + hover='true'
+ */
+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, status) => ({
+    alias, status, 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', 'working'),
+    mk('beta',  'idle'),
+  ] } });
+});
+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-reset-icon]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readIcon = () => page.evaluate(() => {
+  const i = document.querySelector('[data-topo-chrome-reset-icon]');
+  return i ? {
+    sw:     i.getAttribute('stroke-width'),
+    sw_d:   i.getAttribute('data-topo-chrome-reset-icon-stroke-width'),
+    hover:  i.getAttribute('data-topo-chrome-reset-icon-hover'),
+  } : null;
+});
+
+const rest = await readIcon();
+
+let hover = null;
+const btn = await page.$('[data-topo-chrome-reset]');
+if (btn) {
+  await btn.hover({ force: true });
+  await page.waitForTimeout(250);
+  hover = await readIcon();
+  await page.mouse.move(0, 0);
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired = /strokeWidth=\{hoveredReset && !resetSpinning \? '2\.8' : '2\.5'\}/.test(fileText);
+
+await browser.close();
+
+const results = {
+  rest_mounted:        !!rest,
+  rest_sw_2_5:         rest?.sw === '2.5',
+  rest_hover_false:    rest?.hover === 'false',
+  hover_sw_2_8:        hover?.sw === '2.8',
+  hover_sw_data_2_8:   hover?.sw_d === '2.8',
+  hover_hover_true:    hover?.hover === 'true',
+  source_wired:        sourceWired,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chrome reset icon sw hover:`, JSON.stringify(results),
+  '\n  rest:', rest, '\n  hover:', hover);
+process.exit(ok ? 0 : 1);

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-chrome-zoom-icon-sw-test.mjs

@@ -0,0 +1,90 @@
+/* Round 454 verification: chrome zoom +/- icons strokeWidth hover lift
+ * via Tailwind arbitrary class group-hover:[stroke-width:2.8].
+ * The attribute strokeWidth='2.5' stays at rest; CSS hover overrides
+ * with stroke-width: 2.8.
+ *
+ * Contract:
+ *   - rest: zoom-in/zoom-out icons report computed stroke-width '2.5px'
+ *   - hover the zoom-in button: that icon computed stroke-width '2.8px'
+ *   - source-file probe confirms group-hover:[stroke-width:2.8] in
+ *     both icon className strings
+ */
+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, status) => ({
+    alias, status, 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', 'working'),
+    mk('beta',  'idle'),
+  ] } });
+});
+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-zoom-in-icon]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readIcons = () => page.evaluate(() => {
+  const zi = document.querySelector('[data-topo-chrome-zoom-in-icon]');
+  const zo = document.querySelector('[data-topo-chrome-zoom-out-icon]');
+  return {
+    zoom_in:  zi ? { sw: zi.getAttribute('stroke-width'), sw_computed: getComputedStyle(zi).strokeWidth } : null,
+    zoom_out: zo ? { sw: zo.getAttribute('stroke-width'), sw_computed: getComputedStyle(zo).strokeWidth } : null,
+  };
+});
+
+const rest = await readIcons();
+
+// Hover zoom-in button
+let hover = null;
+const btn = await page.$('[data-topo-chrome-zoom-in]');
+if (btn) {
+  await btn.hover({ force: true });
+  await page.waitForTimeout(300);
+  hover = await readIcons();
+  await page.mouse.move(0, 0);
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+// className appears BEFORE data-attr on the icon SVG, so check both
+// orderings + count >= 2 to confirm both zoom icons have the class.
+const sourceMatch   = fileText.match(/group-hover:\[stroke-width:2\.8\]/g);
+const sourceTwoMatches = sourceMatch && sourceMatch.length >= 2;
+const sourceZoomOut = /group-hover:\[stroke-width:2\.8\][\s\S]{0,400}data-topo-chrome-zoom-out-icon/.test(fileText);
+const sourceZoomIn  = /group-hover:\[stroke-width:2\.8\][\s\S]{0,400}data-topo-chrome-zoom-in-icon/.test(fileText);
+
+await browser.close();
+
+const results = {
+  rest_zi_attr_2_5:        rest.zoom_in?.sw === '2.5',
+  rest_zo_attr_2_5:        rest.zoom_out?.sw === '2.5',
+  rest_zi_computed_2_5:    rest.zoom_in?.sw_computed === '2.5px' || rest.zoom_in?.sw_computed === '2.5',
+  hover_zi_computed_2_8:   hover?.zoom_in?.sw_computed === '2.8px' || hover?.zoom_in?.sw_computed === '2.8',
+  source_zoom_out_wired:   sourceZoomOut,
+  source_zoom_in_wired:    sourceZoomIn,
+  source_two_matches:      sourceTwoMatches,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chrome zoom icon sw hover:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  hover:', JSON.stringify(hover));
+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-dashboard-version-attr-test.mjs

@@ -0,0 +1,69 @@
+/* Round 462 verification: TopoGraph root <svg> exposes the
+ * shipped DASHBOARD_VERSION via data-dashboard-version attr.
+ * Closes the feedback_dash_zombie_port_3000.md memory rule:
+ * "verify ships via SVG DOM, not tmux 'Ready'" — pre-R462 there
+ * was no in-DOM signal of which build the dash was serving.
+ *
+ * Contract:
+ *   - svg[viewBox="0 0 1000 680"] reports data-dashboard-version
+ *     matching package.json#version (a non-empty string that
+ *     starts with a digit)
+ *   - the dash is serving the EXPECTED preview (rejects zombie
+ *     server scenarios where DOM and package.json disagree)
+ *   - source-file conditional wired (import + attr presence)
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const expected = JSON.parse(readFileSync('/home/vansin/agent-network-dashboard/package.json', 'utf8')).version;
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try {
+    localStorage.setItem('anet-theme', 'cyber');
+    localStorage.setItem('anet-topo-layout', 'grid');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+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('svg[viewBox="0 0 1000 680"]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return {
+    attr: svg ? svg.getAttribute('data-dashboard-version') : null,
+    hasSvg: !!svg,
+  };
+});
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasImport = /import \{ DASHBOARD_VERSION \} from '\.\.\/lib\/version'/.test(src);
+const sourceHasAttr   = /data-dashboard-version=\{DASHBOARD_VERSION\}/.test(src);
+
+await browser.close();
+
+const attrPresent       = typeof probe.attr === 'string' && probe.attr.length > 0;
+const attrIsVersionish  = attrPresent && /^\d/.test(probe.attr);
+const attrMatchesPkg    = probe.attr === expected;
+
+const results = {
+  svg_present:           probe.hasSvg,
+  attr_present:          attrPresent,
+  attr_is_version_shape: attrIsVersionish,
+  attr_matches_package:  attrMatchesPkg,
+  source_import_wired:   sourceHasImport,
+  source_attr_wired:     sourceHasAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} svg data-dashboard-version:`, JSON.stringify(results),
+  '\n  expected:', expected,
+  '\n  found:', probe.attr);
+process.exit(ok ? 0 : 1);

package/scripts/topo-dense-alias-opacity-test.mjs

@@ -0,0 +1,68 @@
+/* Round 452 verification: dense plain-text alias rest opacity 0.9 → 0.95.
+ * Sibling to R449/R450 canvas-presence alpha-gap closures.
+ *
+ * Contract:
+ *   - need >16 sessions to enter dense layout
+ *   - every dense alias-text reports opacity '0.95' + -opacity attr '0.95'
+ *   - source-file probe confirms the value
+ */
+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, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // 20 nodes — crosses the >16 dense threshold
+  const sessions = [];
+  for (let i = 0; i < 20; i++) {
+    sessions.push(mk(`n${String(i).padStart(2, '0')}`, i % 3 === 0 ? 'working' : 'idle'));
+  }
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+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-node-dense-alias-text]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const aliases = await page.evaluate(() => {
+  const ts = [...document.querySelectorAll('[data-node-dense-alias-text]')];
+  return ts.map(t => ({
+    alias:    t.getAttribute('data-node-dense-alias-text'),
+    opacity:  t.getAttribute('opacity'),
+    data_op:  t.getAttribute('data-node-dense-alias-text-opacity'),
+  }));
+});
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired = /opacity=\{0\.95\}/.test(fileText) && /data-node-dense-alias-text-opacity="0\.95"/.test(fileText);
+
+await browser.close();
+
+const results = {
+  dense_layout_count_ge_17: aliases.length >= 17,
+  all_opacity_0_95:         aliases.every(a => a.opacity === '0.95'),
+  all_data_op_0_95:         aliases.every(a => a.data_op === '0.95'),
+  source_wired:             sourceWired,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} dense alias opacity 0.95:`, JSON.stringify(results),
+  '\n  count:', aliases.length, 'sample:', JSON.stringify(aliases[0]));
+process.exit(ok ? 0 : 1);