@sleep2agi/agent-network-dashboard 0.5.1-preview.7 → 0.5.1-preview.71

package/package.json

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

package/scripts/topo-active-links-chip-hover-lift-test.mjs

@@ -0,0 +1,93 @@
+/* Round 399 verification: active-links chip closes the 3-chip
+ * chip-row by extending R398 hover translate-y-px lift onto the
+ * third (rightmost) chip. Gated to clickable variant (flowLinks
+ * > 0) so empty active-links chip stays planted.
+ *
+ * Contract:
+ *   - With seeded messages (active flow links present):
+ *     * data-chip-hover-lift === 'true'
+ *     * data-active-links-clickable === 'true'
+ *     * className includes 'hover:-translate-y-px'
+ *     * className includes 'transition-transform' + 'transform-gpu'
+ *   - Pre-R399 invariants preserved:
+ *     * R232 tabular-nums + R313 font-medium + R266 chip-focus
+ *     * R193 hover:bg-cyan-500/10 + hover:text-cyan-200 + hover:border-cyan-500/30
+ *     * inline transition list still covers color/bg/border/opacity
+ */
+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'),
+    mk('gamma', 'idle'),
+  ] } });
+});
+// Seed messages so flowLinks > 0 → chip becomes clickable
+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: 'gamma', content: 'pong', 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-active-links-chip]', { timeout: 15000 });
+await page.waitForTimeout(600);
+
+const probe = await page.evaluate(() => {
+  const chip = document.querySelector('[data-active-links-chip]');
+  return chip ? {
+    className: chip.className,
+    lift:      chip.getAttribute('data-chip-hover-lift'),
+    clickable: chip.getAttribute('data-active-links-clickable'),
+    flowCount: chip.getAttribute('data-active-links-flow-count'),
+  } : null;
+});
+
+await browser.close();
+
+const cls = probe?.className || '';
+const results = {
+  // Setup: active-links chip mounted with flow > 0
+  chip_mounted:                 !!probe,
+  flow_count_present:           parseInt(probe?.flowCount || '0', 10) > 0,
+  // R399 lift attrs + className tokens (clickable variant)
+  lift_true:                    probe?.lift === 'true',
+  clickable_true:               probe?.clickable === 'true',
+  has_hover_translate:          cls.includes('hover:-translate-y-px'),
+  has_transition_transform:     cls.includes('transition-transform'),
+  has_transform_gpu:            cls.includes('transform-gpu'),
+  // Pre-R399 invariants
+  has_tabular_nums:             cls.includes('tabular-nums'),
+  has_font_medium:              cls.includes('font-medium'),
+  has_chip_focus:               cls.includes('anet-topo-chip-focus'),
+  has_hover_cyan_bg:            cls.includes('hover:bg-cyan-500/10'),  // R193 invariant
+  has_hover_cyan_text:          cls.includes('hover:text-cyan-200'),
+  has_hover_cyan_border:        cls.includes('hover:border-cyan-500/30'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links chip hover lift translateY(-1px):`, JSON.stringify(results),
+  '\n  className:', cls,
+  '\n  flowCount:', probe?.flowCount, '/ lift:', probe?.lift, '/ clickable:', probe?.clickable);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chip-digit-fontweight-test.mjs

@@ -0,0 +1,105 @@
+/* Round 362 verification: 3 chip-row chip digits (working / online /
+ * active-links) wrap their digit in a font-semibold span, lifting it
+ * fw 500 (chip-row R313 baseline) → fw 600 within each chip. The
+ * outer chip className keeps font-medium so the chip's overall data-
+ * weight stays consistent with the R313 family; the digit override
+ * adds a within-chip tier:
+ *   digit  fw 600 + full opacity
+ *   unit   fw 500 + R338 opacity-70
+ *
+ * Joins the R333-R341 chip-internal-hierarchy arc at the chip-count
+ * scope (8th surface family).
+ *
+ * Contract (cyber, fresh fixture):
+ *   - Each of the 3 chip digit spans has data-{name}-chip-digit attr.
+ *   - Computed fontWeight of the digit span === '600'.
+ *   - The unit sibling span still has opacity 0.7 + data-{name}-chip-
+ *     unit attr (R338 invariants).
+ *   - Parent chip retains font-medium (R313 baseline).
+ */
+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') ] } });
+});
+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-working-chip-digit]',      { timeout: 15000 });
+await page.waitForSelector('[data-online-chip-digit]',       { timeout: 5000 });
+await page.waitForSelector('[data-active-links-chip-digit]', { timeout: 5000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  function readChip(digitSel, unitSel, parentSel) {
+    const digit  = document.querySelector(digitSel);
+    const unit   = document.querySelector(unitSel);
+    const parent = document.querySelector(parentSel);
+    return {
+      digitFw:    digit ? getComputedStyle(digit).fontWeight : null,
+      digitText:  digit?.textContent ?? null,
+      unitOp:     unit ? getComputedStyle(unit).opacity : null,
+      unitPresent: !!unit,
+      parentCls:  parent?.getAttribute('class') ?? null,
+    };
+  }
+  return {
+    working:     readChip('[data-working-chip-digit]',      '[data-working-chip-unit]',      '[data-working-chip]'),
+    online:      readChip('[data-online-chip-digit]',       '[data-online-chip-unit]',       '[data-online-chip]'),
+    activeLinks: readChip('[data-active-links-chip-digit]', '[data-active-links-chip-unit]', '[data-active-links-chip]'),
+  };
+});
+
+await browser.close();
+
+const isFw600 = (v) => v === '600' || v === 'bold';   // Tailwind font-semibold === 600
+const approxEq = (a, b, tol = 0.02) => {
+  const x = parseFloat(a); const y = parseFloat(b);
+  return Number.isFinite(x) && Number.isFinite(y) && Math.abs(x - y) <= tol;
+};
+
+const checkChip = (chip) => ({
+  digit_fw_600:    isFw600(chip.digitFw),
+  unit_op_0_7:     approxEq(chip.unitOp, 0.7),     // R338
+  unit_present:    chip.unitPresent,
+  parent_medium:   /font-medium/.test(chip.parentCls || ''),  // R313
+});
+
+const results = {
+  working_digit_fw_600:    checkChip(probe.working).digit_fw_600,
+  working_unit_op_0_7:     checkChip(probe.working).unit_op_0_7,
+  working_parent_medium:   checkChip(probe.working).parent_medium,
+  online_digit_fw_600:     checkChip(probe.online).digit_fw_600,
+  online_unit_op_0_7:      checkChip(probe.online).unit_op_0_7,
+  online_parent_medium:    checkChip(probe.online).parent_medium,
+  active_digit_fw_600:     checkChip(probe.activeLinks).digit_fw_600,
+  active_unit_op_0_7:      checkChip(probe.activeLinks).unit_op_0_7,
+  active_parent_medium:    checkChip(probe.activeLinks).parent_medium,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip-row digit fontWeight 500 → 600:`, JSON.stringify(results),
+  '\n  probe:', JSON.stringify(probe, null, 2));
+process.exit(ok ? 0 : 1);

package/scripts/topo-chip-row-hover-lift-test.mjs

@@ -0,0 +1,95 @@
+/* Round 398 verification: chip-row chips (working / online) gain
+ * hover translateY(-1px) lift on clickable variant only. Extends
+ * R397's filter-pill lift to the static header chips, gated to
+ * the chip's clickable role so empty chips stay planted.
+ *
+ * Contract:
+ *   - Populated working chip (workingCount > 0):
+ *     * data-chip-hover-lift === 'true'
+ *     * className includes 'hover:-translate-y-px'
+ *     * className includes 'transition-transform' + 'transform-gpu'
+ *   - Populated online chip (onlineNodes.length > 0):
+ *     * data-chip-hover-lift === 'true'
+ *     * className includes 'hover:-translate-y-px'
+ *   - Pre-R398 invariants preserved:
+ *     * transition-colors duration-200 still present
+ *     * R201 hover:bg + hover:border tokens still present
+ *     * anet-topo-chip-focus + tabular-nums + font-medium present
+ */
+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'),
+    mk('gamma', '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-working-chip]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const work = document.querySelector('[data-working-chip]');
+  const online = document.querySelector('[data-online-chip]');
+  return {
+    work: work ? {
+      className: work.className,
+      lift:      work.getAttribute('data-chip-hover-lift'),
+      clickable: work.getAttribute('data-working-chip-clickable'),
+    } : null,
+    online: online ? {
+      className: online.className,
+      lift:      online.getAttribute('data-chip-hover-lift'),
+      clickable: online.getAttribute('data-online-chip-clickable'),
+    } : null,
+  };
+});
+
+await browser.close();
+
+const wc = probe.work?.className || '';
+const oc = probe.online?.className || '';
+const results = {
+  // working chip: clickable + R398 lift attrs + className tokens
+  work_lift_true:               probe.work?.lift === 'true',
+  work_clickable_true:          probe.work?.clickable === 'true',
+  work_has_hover_translate:     wc.includes('hover:-translate-y-px'),
+  work_has_transition_transform: wc.includes('transition-transform'),
+  work_has_transform_gpu:       wc.includes('transform-gpu'),
+  work_has_transition_colors:   wc.includes('transition-colors'),  // R201 preserved
+  work_has_hover_bg:            wc.includes('hover:bg-green-500/15'),  // R201 preserved
+  work_has_chip_focus:          wc.includes('anet-topo-chip-focus'),
+  // online chip mirror
+  online_lift_true:             probe.online?.lift === 'true',
+  online_clickable_true:        probe.online?.clickable === 'true',
+  online_has_hover_translate:   oc.includes('hover:-translate-y-px'),
+  online_has_transition_transform: oc.includes('transition-transform'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip-row chips hover lift translateY(-1px):`, JSON.stringify(results),
+  '\n  workingClass:', wc,
+  '\n  onlineClass: ', oc);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chrome-button-hover-lift-test.mjs

@@ -0,0 +1,94 @@
+/* Round 400 verification (milestone): chrome reset + fullscreen
+ * buttons gain hover translateY(-1px) lift. Closes the hover-lift
+ * gesture across every standalone interactive HTML element in
+ * TopoGraph. Segmented controls (zoom/-+, nodeSize S/M/L,
+ * Layout Ring/Grid) intentionally stay planted to preserve the
+ * unified-strip appearance.
+ *
+ * Contract:
+ *   - Reset button:
+ *     * data-topo-chrome-reset-hover-lift === 'true'
+ *     * className includes 'hover:-translate-y-px'
+ *     * className includes 'transition-transform' + 'transform-gpu'
+ *   - Fullscreen button:
+ *     * data-topo-chrome-fullscreen-hover-lift === 'true'
+ *     * className includes 'hover:-translate-y-px'
+ *     * className includes 'transition-transform' + 'transform-gpu'
+ *   - Pre-R400 invariants preserved:
+ *     * R196 active:bg deeper press states
+ *     * R288 strokeWidth=2.5 on chrome icons
+ *     * R350 hover-rotate (reset) / R353 group-hover scale (fullscreen)
+ */
+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-chrome-reset]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const reset = document.querySelector('[data-topo-chrome-reset]');
+  const fs    = document.querySelector('[data-topo-chrome-fullscreen]');
+  return {
+    reset: reset ? {
+      className: reset.className,
+      lift:      reset.getAttribute('data-topo-chrome-reset-hover-lift'),
+    } : null,
+    fs: fs ? {
+      className: fs.className,
+      lift:      fs.getAttribute('data-topo-chrome-fullscreen-hover-lift'),
+    } : null,
+  };
+});
+
+await browser.close();
+
+const rc = probe.reset?.className || '';
+const fc = probe.fs?.className || '';
+const results = {
+  // Reset button R400 wiring
+  reset_lift_true:                  probe.reset?.lift === 'true',
+  reset_has_hover_translate:        rc.includes('hover:-translate-y-px'),
+  reset_has_transition_transform:   rc.includes('transition-transform'),
+  reset_has_transform_gpu:          rc.includes('transform-gpu'),
+  reset_has_transition_colors:      rc.includes('transition-colors'),  // pre-R400 preserved
+  reset_has_active_bg:              rc.includes('active:bg-white/10'),  // R196 preserved
+  reset_has_rounded_md:             rc.includes('rounded-md'),
+  // Fullscreen button R400 wiring
+  fs_lift_true:                     probe.fs?.lift === 'true',
+  fs_has_hover_translate:           fc.includes('hover:-translate-y-px'),
+  fs_has_transition_transform:      fc.includes('transition-transform'),
+  fs_has_transform_gpu:             fc.includes('transform-gpu'),
+  fs_has_transition_colors:         fc.includes('transition-colors'),
+  fs_has_group:                     fc.includes('group'),  // R353 invariant
+  fs_has_rounded_md:                fc.includes('rounded-md'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chrome reset + fullscreen hover lift translateY(-1px):`, JSON.stringify(results),
+  '\n  resetClass:', rc,
+  '\n  fsClass:   ', fc);
+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-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);