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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.5.1-preview.99",
+  "version": "0.5.2-preview.0",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/scripts/p0-147-screenshot.mjs

@@ -0,0 +1,53 @@
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+const out = process.argv[2] || 'screenshots/v0.11.0-147/after';
+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: 1600, height: 1400 }, deviceScaleFactor: 2 });
+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'); localStorage.setItem('anet-topo-layout', 'grid'); } catch {} });
+const fresh = new Date(Date.now() - 60_000).toISOString();
+// Build a multi-prefix-group fleet (4 prefixes × 5 nodes = 20 nodes — triggers grid + multiple cluster boxes)
+const sessions = [];
+const prefixes = ['ai-insight', 'agent-network-dashboard', 'p-station', 'pay-blueleap'];
+const models = ['claude-opus-4', 'gpt-4o', 'internlm/internlm2', 'minimax/abab6'];
+prefixes.forEach((prefix, gIdx) => {
+  for (let i = 1; i <= 5; i++) {
+    sessions.push({
+      alias: `${prefix}-node-${i}`,
+      status: i === 1 ? 'working' : 'idle',
+      model: models[gIdx],
+      runtime: 'claude-code-cli',
+      network_id: 'default', project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    });
+  }
+});
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  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.waitForFunction(() => document.querySelectorAll('g[data-node]').length >= 20, { timeout: 30000 });
+await page.waitForTimeout(800);
+const box = await page.evaluate(() => {
+  const chrome = document.querySelector('[data-topo-chrome]');
+  let card = chrome?.parentElement;
+  while (card && !card.querySelector(':scope > svg')) card = card?.parentElement;
+  if (!card) return null;
+  card.scrollIntoView({ block: 'start' });
+  return new Promise(resolve => requestAnimationFrame(() => {
+    const r = card.getBoundingClientRect();
+    resolve({ x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height });
+  }));
+});
+await page.waitForTimeout(400);
+if (box && box.width > 100) {
+  await page.screenshot({ path: `${out}.png`, clip: { x: box.x, y: box.y, width: box.width, height: Math.min(box.height, 980) } });
+}
+console.log(`✅ wrote ${out}.png`);
+await browser.close();

package/scripts/p0-servers-drawer-screenshot.mjs

@@ -35,6 +35,7 @@ await ctx.route('**/api/hub/servers*', (route) => {
           disk_total_gb: 500,
           cpu_history: [25, 28, 32, 30, 35, 38, 40, 36, 33, 30],
           mem_history: [50, 52, 55, 56, 58, 57, 59, 60, 58, 57],
+          disk_history: [40, 42, 43, 43, 44, 44, 44, 44, 44, 44],
           agents: [
             { alias: 'claude-1', runtime: 'claude-code-cli', status: 'working', progress: 0.42 },
             { alias: 'codex-1', runtime: 'codex-sdk', status: 'working', progress: 0.18 },
@@ -54,6 +55,7 @@ await ctx.route('**/api/hub/servers*', (route) => {
           disk_total_gb: 500,
           cpu_history: [80, 88, 92, 95, 96, 94, 93, 91, 90, 89],
           mem_history: [85, 87, 89, 91, 90, 92, 93, 91, 90, 91],
+          disk_history: [86, 88, 89, 90, 90, 91, 92, 92, 92, 92],
           agents: [
             { alias: 'minimax-busy', runtime: 'claude-code-cli', status: 'working', progress: 0.78 },
           ],

package/scripts/topo-any-hover-attr-test.mjs

@@ -0,0 +1,83 @@
+/* Round 466 verification: root svg gains `data-topo-any-hover`
+ * aggregate hover attr. Composed from 6 per-surface hover vars
+ * (hoveredAlias, hoveredHub, hoveredEdgeKey, hoveredGroupLabel,
+ * hoveredStatus, hoveredVendor). Read-only computed signal —
+ * useful for tests + external CSS hooks.
+ *
+ * Contract:
+ *   - at rest (no hover): data-topo-any-hover === 'false'
+ *   - hover a node: 'true'
+ *   - leave the node: back to 'false'
+ *   - source-file conditional wired
+ */
+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: 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/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·1', 'working'),
+    mk('alpha·2', '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('svg[data-topo-any-hover]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAttr = () => page.evaluate(() =>
+  document.querySelector('svg[viewBox="0 0 1000 680"]')?.getAttribute('data-topo-any-hover')
+);
+
+const restValue = await readAttr();
+
+// Hover a group label to flip hoveredGroupLabel
+await page.hover('[data-group-label-hit]');
+await page.waitForTimeout(200);
+const hoverValue = await readAttr();
+
+// Move pointer far away to clear hover
+await page.mouse.move(2, 2);
+await page.waitForTimeout(300);
+const restAgainValue = await readAttr();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasAttr        = /data-topo-any-hover=\{/.test(src);
+const sourceCombines6Vars  = /hoveredAlias \|\| hoveredHub \|\| hoveredEdgeKey \|\| hoveredGroupLabel \|\|/.test(src);
+
+await browser.close();
+
+const results = {
+  rest_is_false:        restValue === 'false',
+  hover_flips_true:     hoverValue === 'true',
+  rest_again_is_false:  restAgainValue === 'false',
+  source_attr_wired:    sourceHasAttr,
+  source_6_vars:        sourceCombines6Vars,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} data-topo-any-hover aggregate:`, JSON.stringify(results),
+  '\n  rest:', restValue, '/ hover:', hoverValue, '/ rest again:', restAgainValue);
+process.exit(ok ? 0 : 1);

package/scripts/topo-any-pinned-attr-test.mjs

@@ -0,0 +1,86 @@
+/* Round 467 verification: root svg gains `data-topo-any-pinned`
+ * aggregate pin attr — sibling to R466 data-topo-any-hover.
+ * Composed from 4 pin state vars (pinnedStatus, pinnedGroup,
+ * pinnedVendor, pinnedEdgeKey). Together they form a 2-bit
+ * inspection-mode signal on the canvas root.
+ *
+ * Contract:
+ *   - at rest: data-topo-any-pinned === 'false'
+ *   - click a group-label hitbox: attr flips to 'true'
+ *   - press Escape (R62/R63/R88/R116 universal-cancel): back to 'false'
+ *   - source-file conditional wired
+ */
+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: 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/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·1', 'working'),
+    mk('alpha·2', 'idle'),
+    mk('beta·1',  'working'),
+    mk('beta·2',  '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('svg[data-topo-any-pinned]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAttr = () => page.evaluate(() =>
+  document.querySelector('svg[viewBox="0 0 1000 680"]')?.getAttribute('data-topo-any-pinned')
+);
+
+const restValue = await readAttr();
+
+// Click group-label hitbox → pinnedGroup flips
+await page.click('[data-group-label-hit]');
+await page.waitForTimeout(300);
+const pinnedValue = await readAttr();
+
+// Esc → universal cancel
+await page.mouse.move(500, 400); // move off the hitbox so Esc isn't swallowed
+await page.keyboard.press('Escape');
+await page.waitForTimeout(300);
+const restAgainValue = await readAttr();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasAttr        = /data-topo-any-pinned=\{/.test(src);
+const sourceCombines4Vars  = /pinnedStatus \|\| pinnedGroup \|\| pinnedVendor \|\| pinnedEdgeKey/.test(src);
+
+await browser.close();
+
+const results = {
+  rest_is_false:        restValue === 'false',
+  click_flips_true:     pinnedValue === 'true',
+  esc_resets_false:     restAgainValue === 'false',
+  source_attr_wired:    sourceHasAttr,
+  source_4_vars:        sourceCombines4Vars,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} data-topo-any-pinned aggregate:`, JSON.stringify(results),
+  '\n  rest:', restValue, '/ pinned:', pinnedValue, '/ esc:', restAgainValue);
+process.exit(ok ? 0 : 1);

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