@sleep2agi/agent-network-dashboard 0.4.6-preview.28 → 0.4.6-preview.281

package/scripts/topo-minimap-test.mjs

@@ -0,0 +1,68 @@
+/* Round 30 verification: minimap.
+ *  - not mounted at default view (1×, centered)
+ *  - mounted when zoomed in (one node dot per session, viewport rect)
+ *  - click recenters the canvas (view.x / view.y change) */
+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: 1280, height: 1600 } });
+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');
+    localStorage.setItem('anet-topo-view', JSON.stringify({ zoom: 1, x: 0, y: 0 }));
+    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 sessions = ['A站', 'B站', 'C站', 'D站', 'E站', 'F站'].flatMap(g =>
+    Array.from({ length: 3 }, (_, i) => ({
+      alias: `${g}${i + 1}`, status: 'idle', network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    })),
+  );
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const minimap = '[data-topo-minimap]';
+const notMountedAtDefault = (await page.locator(minimap).count()) === 0;
+
+// Zoom in via `+` twice → view changes → minimap mounts
+await page.keyboard.press('=');
+await page.keyboard.press('=');
+await page.waitForTimeout(200);
+const mountedAfterZoom = (await page.locator(minimap).count()) === 1;
+const dotCount = await page.locator(`${minimap} svg circle`).count();
+const hasViewportRect = await page.locator(`${minimap} svg rect`).count() > 0;
+
+// Click on the minimap's far left → expect view.x to become more positive (canvas pans right)
+const beforeView = await page.evaluate(() => JSON.parse(localStorage.getItem('anet-topo-view')));
+const mmBox = await page.locator(minimap).boundingBox();
+await page.mouse.click(mmBox.x + 10, mmBox.y + mmBox.height / 2);
+await page.waitForTimeout(200);
+const afterView = await page.evaluate(() => JSON.parse(localStorage.getItem('anet-topo-view')));
+const clickRecenters = afterView.x !== beforeView.x || afterView.y !== beforeView.y;
+
+await browser.close();
+const results = {
+  notMountedAtDefault,
+  mountedAfterZoom,
+  oneDotPerSession: dotCount === 18, // 6 groups × 3 = 18 nodes
+  viewportRectPresent: hasViewportRect,
+  clickRecenters,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} minimap:`, JSON.stringify(results), `dots=${dotCount} view before=`, beforeView, `after=`, afterView);
+process.exit(ok ? 0 : 1);

package/scripts/topo-minimap-viewport-smooth-test.mjs

@@ -0,0 +1,124 @@
+/* Round 199 verification: minimap viewport rect transitions x/y/w/h
+ * during R169 smoothView (discrete zoom +/− and reset). Closes the
+ * rhythm-mismatch R198 just fixed for minimap dots — now extended to
+ * the rectangle that frames them.
+ *
+ * Pre-R199 a click on zoom-in crossfaded the main canvas over R168's
+ * 280ms but the minimap viewport rect snap-cut to its new dimensions
+ * in one frame. R199 gates a `transition: x/y/w/h 280ms` on
+ * smoothView=true so discrete zooms ease the rect smoothly. Drag-pan
+ * and wheel-zoom (smoothView=false) keep snappy response — a
+ * persistent transition during drag would lag the cursor by 280ms.
+ *
+ * Test:
+ *   1. Open page with 4 sessions, zoom in once to mount minimap.
+ *   2. Idle (smoothView=false): rect has
+ *      data-topo-minimap-viewport-smooth='false', style.transition='none'.
+ *   3. Click zoom-in again → smoothView arms to 'true' for ~350ms.
+ *   4. Within 100ms of click: probe rect →
+ *      data-topo-minimap-viewport-smooth='true', style.transition
+ *      includes 'x 280ms', 'y 280ms', 'width 280ms', 'height 280ms'.
+ *   5. Wait past 400ms → smoothView clears → back to 'false', no
+ *      transition.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias) => ({
+    alias, status: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-topo-chrome-zoom-in]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+// First zoom-in mounts the minimap. Wait past the 350ms smoothView
+// timer so the minimap rect is at idle state (smooth='false') before
+// we probe.
+await page.click('[data-topo-chrome-zoom-in]');
+await page.waitForTimeout(450);
+await page.waitForSelector('[data-topo-minimap-viewport]', { timeout: 5000 });
+
+const probe = async () => page.evaluate(() => {
+  const el = document.querySelector('[data-topo-minimap-viewport]');
+  if (!el) return null;
+  return {
+    smooth:     el.getAttribute('data-topo-minimap-viewport-smooth'),
+    transition: el.style.transition,
+    x:          parseFloat(el.getAttribute('x') || ''),
+    y:          parseFloat(el.getAttribute('y') || ''),
+    w:          parseFloat(el.getAttribute('width')  || ''),
+    h:          parseFloat(el.getAttribute('height') || ''),
+  };
+});
+
+const idle = await probe();
+
+// Click zoom-in once more — arms smoothView for ~350ms — and probe
+// within the arming window.
+await page.click('[data-topo-chrome-zoom-in]');
+await page.waitForTimeout(80);  // well inside the 350ms arming window
+const armed = await probe();
+
+await page.waitForTimeout(420);  // past 350ms timer + transition
+const settled = await probe();
+
+await browser.close();
+
+const hasAllAxes = (s) =>
+  /\bx\s+(?:280ms|0\.28s)/.test(s || '') &&
+  /\by\s+(?:280ms|0\.28s)/.test(s || '') &&
+  /\bwidth\s+(?:280ms|0\.28s)/.test(s || '') &&
+  /\bheight\s+(?:280ms|0\.28s)/.test(s || '');
+
+const results = {
+  idle_smooth_false:           idle?.smooth === 'false',
+  idle_transition_none:        idle?.transition === 'none' || idle?.transition === '',
+  idle_has_dimensions:         idle && Number.isFinite(idle.x) && Number.isFinite(idle.w) && idle.w > 0,
+
+  armed_smooth_true:           armed?.smooth === 'true',
+  armed_transition_present:    !!armed?.transition && armed.transition !== 'none',
+  armed_transition_has_all:    hasAllAxes(armed?.transition),
+
+  settled_smooth_false:        settled?.smooth === 'false',
+  settled_transition_none:     settled?.transition === 'none' || settled?.transition === '',
+
+  // R199 actually changed dimensions between idle (zoom 120%) and
+  // settled (zoom 144% after second click), or x/y diverged.
+  zoom_changed_dimensions:     idle && settled && (
+    Math.abs(idle.w - settled.w) > 1 ||
+    Math.abs(idle.h - settled.h) > 1 ||
+    Math.abs(idle.x - settled.x) > 1 ||
+    Math.abs(idle.y - settled.y) > 1
+  ),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} minimap viewport smooth:`, JSON.stringify(results),
+  `\n  idle:`,    idle,
+  `\n  armed:`,   armed,
+  `\n  settled:`, settled);
+process.exit(ok ? 0 : 1);

package/scripts/topo-mobile-chips-test.mjs

@@ -0,0 +1,103 @@
+/* Round 47 verification: mobile chip collapse.
+ *  - At narrow viewport (375px), pressure / vendor-dist / active-links /
+ *    freshness chips are display:none; only essential chips render.
+ *  - At sm+ (≥640px), the full chip row is visible.
+ *  - Essential chips (Ring/Grid toggle + working + online) render at both. */
+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 });
+
+async function probe(width) {
+  const ctx = await browser.newContext({ viewport: { width, height: 900 } });
+  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 {}
+  });
+  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 sessions = [
+      { alias: 'wkr', status: 'working', network_id: nid, project_dir: null,
+        model: 'claude-opus-4', runtime: 'cli-claude-code',
+        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+      { alias: 'idl', status: 'idle', network_id: nid, project_dir: null,
+        model: 'gpt-5', runtime: 'codex-cli',
+        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    ];
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+    { from_alias: 'wkr', to_alias: 'idl', content: 'm', created_at: new Date().toISOString() },
+  ] } }));
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  // The Overview page auto-hides the topology when window.innerWidth < 1024
+  // (the lg breakpoint). On narrow viewports the user clicks "Show
+  // Topology" to surface it; mimic that here so the chip-row tests reach
+  // the actual code path. Wait for SWR to deliver sessions first so the
+  // button renders before we look for it.
+  await page.waitForTimeout(1500);
+  const showBtn = page.locator('button', { hasText: /Show Topology/i });
+  if (await showBtn.count() > 0) await showBtn.first().click();
+  await page.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+  await page.waitForTimeout(600);
+  const visible = (sel) => page.evaluate(s => {
+    const el = document.querySelector(s);
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0;
+  }, sel);
+  const result = {
+    workingChipVisible: await page.evaluate(() => {
+      // "{N} working" chip — find the green-tinted one
+      const spans = [...document.querySelectorAll('span')];
+      const chip = spans.find(s => /^\d+ working$/.test((s.textContent || '').trim()));
+      if (!chip) return false;
+      const r = chip.getBoundingClientRect();
+      return r.width > 0 && r.height > 0;
+    }),
+    onlineChipVisible: await page.evaluate(() => {
+      const spans = [...document.querySelectorAll('span')];
+      const chip = spans.find(s => /^\d+ online$/.test((s.textContent || '').trim()));
+      if (!chip) return false;
+      const r = chip.getBoundingClientRect();
+      return r.width > 0 && r.height > 0;
+    }),
+    pressureVisible: await visible('[data-fleet-pressure]'),
+    activeLinksVisible: await page.evaluate(() => {
+      const spans = [...document.querySelectorAll('span')];
+      const chip = spans.find(s => /active link/.test(s.textContent || ''));
+      if (!chip) return false;
+      const r = chip.getBoundingClientRect();
+      return r.width > 0 && r.height > 0;
+    }),
+    freshnessVisible: await visible('[data-freshness-chip]'),
+  };
+  await ctx.close();
+  return result;
+}
+
+const mobile = await probe(375);
+const desktop = await probe(900);
+await browser.close();
+
+const results = {
+  mobileEssentialsVisible: mobile.workingChipVisible && mobile.onlineChipVisible,
+  mobilePressureHidden: mobile.pressureVisible === false,
+  mobileActiveLinksHidden: mobile.activeLinksVisible === false,
+  mobileFreshnessHidden: mobile.freshnessVisible === false,
+  desktopAllVisible: desktop.workingChipVisible && desktop.onlineChipVisible && desktop.pressureVisible && desktop.activeLinksVisible && desktop.freshnessVisible,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} mobile chips:`, JSON.stringify(results),
+  `\n  mobile=`, mobile, `\n  desktop=`, desktop);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-a11y-test.mjs

@@ -0,0 +1,107 @@
+/* Round 151 verification: node <g> gains a11y compliance.
+ *
+ * Node clickable for chat since R45, but tab-unreachable +
+ * screen-reader-unannounced. R151 matches the pattern R116 /
+ * R139 / R140 / R148 / R149 applied to other interactive
+ * surfaces:
+ *   role="button"
+ *   tabIndex={0}
+ *   aria-label="Chat with {alias} ({status})"
+ *   aria-pressed={chatAlias === session.alias}
+ *   onKeyDown(Enter / Space) → setChatAlias
+ *
+ * Three checks:
+ *   1. All nodes carry role=button, tabIndex=0, aria-label, aria-
+ *      pressed=false by default
+ *   2. Pressing Enter on a focused node opens chat (aria-pressed
+ *      flips to true, chat popover renders)
+ *   3. Pressing Space on a different node moves the open chat
+ *      target — only one aria-pressed=true at a time
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1400, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'working'), mk('beta', 'idle'), mk('gamma', 'working'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const inspectAll = () => page.evaluate(() => {
+  const nodes = [...document.querySelectorAll('g[data-node]')];
+  return nodes.map(n => ({
+    alias:    n.getAttribute('data-node'),
+    role:     n.getAttribute('role'),
+    tabIndex: n.getAttribute('tabindex'),
+    ariaLabel: n.getAttribute('aria-label'),
+    ariaPressed: n.getAttribute('aria-pressed'),
+  }));
+});
+
+const before = await inspectAll();
+
+// Focus alpha node and press Enter → opens chat
+await page.locator('g[data-node="alpha"]').focus();
+await page.keyboard.press('Enter');
+await page.waitForTimeout(250);
+const afterAlpha = await inspectAll();
+const popoverPresentA = await page.locator('.anet-chat-popover, [data-chat-popover]').count() > 0
+                       || await page.evaluate(() => !!document.querySelector('[role="dialog"]'));
+
+// Focus gamma node and press Space → moves chat target (only one pressed)
+await page.locator('g[data-node="gamma"]').focus();
+await page.keyboard.press(' ');
+await page.waitForTimeout(250);
+const afterGamma = await inspectAll();
+
+await browser.close();
+
+const results = {
+  // Baseline shape
+  threeNodes:         before.length === 3,
+  allRoleButton:      before.every(n => n.role === 'button'),
+  allTabIndex0:       before.every(n => n.tabIndex === '0'),
+  allAriaLabel:       before.every(n => /^Chat with /.test(n.ariaLabel || '')),
+  allAriaPressedFalse: before.every(n => n.ariaPressed === 'false'),
+
+  // After Enter on alpha
+  enterOpensChat:     afterAlpha.find(n => n.alias === 'alpha')?.ariaPressed === 'true',
+  popoverShown:       popoverPresentA,
+  othersStillFalse:   afterAlpha.filter(n => n.alias !== 'alpha').every(n => n.ariaPressed === 'false'),
+
+  // After Space on gamma (chat target moved)
+  spaceMovesTarget:   afterGamma.find(n => n.alias === 'gamma')?.ariaPressed === 'true',
+  alphaUnpressed:     afterGamma.find(n => n.alias === 'alpha')?.ariaPressed === 'false',
+  onlyOnePressed:     afterGamma.filter(n => n.ariaPressed === 'true').length === 1,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node a11y:`, JSON.stringify(results),
+  `\n  before=`, before,
+  `\n  afterAlpha=`, afterAlpha,
+  `\n  afterGamma=`, afterGamma);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-hover-lift-test.mjs

@@ -0,0 +1,85 @@
+/* Round 51 verification: hovered node <g> lifts -2px via CSS transform.
+ *  - At rest, every node's CSS transform is "none" (or matrix with 0 ty).
+ *  - On hover, the hovered <g> reports `translateY(-2px)` (matrix(1,0,0,1,0,-2))
+ *    via getComputedStyle.transform, while siblings stay at identity.
+ *  - Release: returns to identity.
+ *  - With prefers-reduced-motion forced, NO lift even on hover.
+ */
+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 });
+
+async function probe(reducedMotion) {
+  const ctx = await browser.newContext({
+    viewport: { width: 1280, height: 900 },
+    reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
+  });
+  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', 'ring');
+      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 sessions = ['alpha', 'beta', 'gamma'].map(a => ({
+      alias: a, status: 'idle', network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+  await page.waitForTimeout(500);
+
+  const readTy = (alias) => page.evaluate(a => {
+    const el = document.querySelector(`g[data-node="${a}"]`);
+    if (!el) return null;
+    const m = getComputedStyle(el).transform;
+    if (!m || m === 'none') return 0;
+    // matrix(a, b, c, d, tx, ty) — extract ty
+    const parts = m.match(/matrix\(([^)]+)\)/);
+    if (!parts) return null;
+    const arr = parts[1].split(',').map(s => parseFloat(s.trim()));
+    return arr[5] ?? null;
+  }, alias);
+
+  const restAlpha = await readTy('alpha');
+  const restBeta = await readTy('beta');
+  await page.locator('g[data-node="alpha"]').hover({ force: true });
+  await page.waitForTimeout(300);
+  const hoveredAlpha = await readTy('alpha');
+  const hoveredBeta  = await readTy('beta');
+  await page.mouse.move(10, 10);
+  await page.waitForTimeout(300);
+  const releasedAlpha = await readTy('alpha');
+
+  await ctx.close();
+  return { restAlpha, restBeta, hoveredAlpha, hoveredBeta, releasedAlpha };
+}
+
+const normal = await probe(false);
+const reduced = await probe(true);
+await browser.close();
+
+const results = {
+  normal_restAtZero: normal.restAlpha === 0 && normal.restBeta === 0,
+  normal_hoveredLifts: normal.hoveredAlpha === -2,
+  normal_siblingStays: normal.hoveredBeta === 0,
+  normal_released: normal.releasedAlpha === 0,
+  reduced_noLift: reduced.hoveredAlpha === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node hover lift:`, JSON.stringify(results),
+  `\n  normal=`, normal, `\n  reduced=`, reduced);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-label-card-elevation-test.mjs

@@ -0,0 +1,157 @@
+/* Round 194 verification: node label card picks up drop-shadow
+ * elevation that intensifies on node hover, mirroring R135's panel
+ * hover-elevation but at per-node grain.
+ *
+ * Pre-R194 the card lifted 1.5 px on hover (R26) but had no shadow
+ * follow — the elevation gesture lacked physical weight. R194 adds
+ *   rest  : drop-shadow(0 1px 2px rgba(...,0.30 dark / 0.08 light))
+ *   hover : drop-shadow(0 4px 12px rgba(0,0,0,0.60) dark
+ *           / 0 3px 8px rgba(15,23,42,0.20) light)
+ * with transition: filter 220ms ease-out.
+ *
+ * Test (cyber/dark theme, 4 sessions = card mode):
+ *   1. data-node-label-card present + matches alias
+ *   2. Idle elevation attr = 'idle'
+ *   3. Idle filter style includes 'drop-shadow' (rest shadow on)
+ *   4. Idle blur radius is small (1-2 px range)
+ *   5. transition: filter 220ms ease-out
+ *   6. Hover the node — wait past 250ms
+ *   7. data-node-label-card-elevation flips to 'hover'
+ *   8. Hover filter has bigger blur (>= 8px) — drop-shadow strengthened
+ *   9. Other (non-hovered) cards stay 'idle'
+ *  10. Unhover — flips back to 'idle'
+ *  11. Filter transition string still present after settle
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias) => ({
+    alias, status: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-node-label-card]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+// Probe idle state of alpha's label card
+const idleAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    alias:      el.getAttribute('data-node-label-card'),
+    elevation:  el.getAttribute('data-node-label-card-elevation'),
+    filter:     cs.filter,
+    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
+    inlineFilter: el.style.filter,
+  };
+});
+
+// Hover the alpha node's <g> wrapper
+await page.hover('g[data-node="alpha"]');
+await page.waitForTimeout(280);  // past 220ms transition
+
+const hoveredAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  const cs = getComputedStyle(el);
+  return {
+    elevation: el.getAttribute('data-node-label-card-elevation'),
+    filter:    cs.filter,
+    inlineFilter: el.style.filter,
+  };
+});
+
+// Probe non-hovered card (beta) stays idle
+const idleBeta = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="beta"]');
+  return {
+    elevation: el.getAttribute('data-node-label-card-elevation'),
+  };
+});
+
+// Move away, wait for transition back
+await page.mouse.move(0, 0);
+await page.waitForTimeout(280);
+
+const settledAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  const cs = getComputedStyle(el);
+  return {
+    elevation:  el.getAttribute('data-node-label-card-elevation'),
+    filter:     cs.filter,
+    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
+  };
+});
+
+await browser.close();
+
+// Parse blur radius out of drop-shadow(). Chrome's getComputedStyle
+// canonicalises into `drop-shadow(rgba(...) 0px Ypx BLURpx)` with the
+// color first — the standard write-order `drop-shadow(0 Ypx BLURpx
+// rgba(...))` is rearranged. So scan all numeric tokens inside the
+// drop-shadow() parens with rgba/hsla content stripped first; blur is
+// the 3rd numeric value.
+function parseShadowBlur(filterStr) {
+  if (!filterStr) return null;
+  const m = filterStr.match(/drop-shadow\(([\s\S]+)\)\s*$/);
+  if (!m) return null;
+  const stripped = m[1].replace(/(rgba?|hsla?)\([^)]*\)/g, '');
+  const nums = (stripped.match(/-?\d+(?:\.\d+)?/g) || []).map(Number);
+  return nums.length >= 3 ? Math.abs(nums[2]) : null;
+}
+const idleBlur = parseShadowBlur(idleAlpha?.filter);
+const hoverBlur = parseShadowBlur(hoveredAlpha?.filter);
+const settledBlur = parseShadowBlur(settledAlpha?.filter);
+
+const results = {
+  card_present:          !!idleAlpha,
+  alias_matches:         idleAlpha?.alias === 'alpha',
+  idle_elevation_attr:   idleAlpha?.elevation === 'idle',
+  idle_has_dropshadow:   (idleAlpha?.filter || '').includes('drop-shadow'),
+  idle_blur_small:       idleBlur !== null && idleBlur > 0 && idleBlur <= 3,
+  filter_transition:     idleAlpha?.transition.includes('filter') && idleAlpha?.transition.includes('0.22s'),
+
+  hover_elevation_attr:  hoveredAlpha?.elevation === 'hover',
+  hover_has_dropshadow:  (hoveredAlpha?.filter || '').includes('drop-shadow'),
+  hover_blur_larger:     hoverBlur !== null && hoverBlur >= 8,
+  hover_blur_grew:       idleBlur !== null && hoverBlur !== null && hoverBlur > idleBlur,
+  hover_filter_changed:  idleAlpha?.filter !== hoveredAlpha?.filter,
+
+  beta_stays_idle:       idleBeta?.elevation === 'idle',
+
+  settled_back_to_idle:  settledAlpha?.elevation === 'idle',
+  settled_blur_small:    settledBlur !== null && settledBlur <= 3,
+  settled_keeps_transition: settledAlpha?.transition.includes('filter'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node label card elevation:`, JSON.stringify(results),
+  `\n  idleAlpha:`,     idleAlpha,
+  `\n  hoveredAlpha:`,  hoveredAlpha,
+  `\n  idleBeta:`,      idleBeta,
+  `\n  settledAlpha:`,  settledAlpha,
+  `\n  blurs:`,         { idleBlur, hoverBlur, settledBlur });
+process.exit(ok ? 0 : 1);