@sleep2agi/agent-network-dashboard 0.4.6-preview.33 → 0.4.6-preview.331

package/scripts/topo-orbit-particles-retired-test.mjs

@@ -0,0 +1,91 @@
+/* Round 276 verification: outer-ring orbit particles retired by default.
+ *
+ * R50 introduced 4 cyan particles orbiting r=330 (outer ring edge) at
+ * 16s revolution. R131 added busy-bucket speed (workingCount → 16/14/
+ * 12/10s). R216 added busy-bucket opacity (0.5/0.7/0.85/1.0).
+ *
+ * Pre-R276 the orbit family rendered 4 <g data-topo-orbit-bucket=...>
+ * groups whenever the canvas was non-light theme. Each particle was a
+ * 2.2-2.8 px cyan circle with animateTransform rotation, opacity gated
+ * by busy bucket.
+ *
+ * The orbit family encoded workingCount busyness via speed + opacity,
+ * but that signal was ALREADY conveyed by:
+ *   · hub halo opacity breath (R244 / R84)
+ *   · hub digit workingCount text (R130)
+ *   · pressure-bar working/idle/offline ratio (R31)
+ *
+ * Info-redundant decoration. For a static Twitter screenshot, 4 small
+ * dots at the canvas outer edge contributed to "乱" without
+ * proportional signal. R276 gates the render block with `false &&` so
+ * the code remains in place (commented context + rollback-friendly)
+ * but nothing renders.
+ *
+ * Test scope:
+ *   1. No element matches `[data-topo-orbit-bucket]` in DOM (orbit
+ *      particles absent).
+ *   2. No element matches `[data-topo-orbit-opacity]` (R216 attr).
+ *   3. R275 freshness chip still absent at fresh state (regression —
+ *      simplification family continues).
+ *   4. R273 Layout toggle Grid inactive has hover:text-cyan-300
+ *      (regression).
+ */
+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('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+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 === 4, { timeout: 30000 });
+await page.waitForSelector('[data-topo-chrome-layout="grid"]', { timeout: 10000 });
+await page.waitForTimeout(500);
+
+const probe = await page.evaluate(() => {
+  const orbits        = document.querySelectorAll('[data-topo-orbit-bucket]');
+  const orbitsOpacity = document.querySelectorAll('[data-topo-orbit-opacity]');
+  const freshnessChip = document.querySelector('[data-freshness-chip]');
+  const grid          = document.querySelector('[data-topo-chrome-layout="grid"]');
+  return {
+    orbitCount:         orbits.length,
+    orbitOpacityCount:  orbitsOpacity.length,
+    freshnessPresent:   freshnessChip !== null,
+    gridClasses:        grid ? grid.className.toString() : null,
+  };
+});
+await browser.close();
+
+const results = {
+  orbit_bucket_absent:                probe.orbitCount === 0,
+  orbit_opacity_absent:               probe.orbitOpacityCount === 0,
+  r275_freshness_absent_at_fresh:     probe.freshnessPresent === false,
+  r273_grid_has_cyan_hover_text:      (probe.gridClasses || '').includes('hover:text-cyan-300'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} orbit particles retired:`, JSON.stringify(results),
+  '\n  orbit count (expect 0):',         probe.orbitCount,
+  '\n  orbit-opacity count (expect 0):', probe.orbitOpacityCount,
+  '\n  freshness chip absent (R275):',   !probe.freshnessPresent);
+process.exit(ok ? 0 : 1);

package/scripts/topo-overlap-test.mjs

@@ -3,7 +3,10 @@
  *   - node ↔ node       — status rings don't intersect
  *   - node ↔ panel      — no node circle intersects an overlay panel rect
  *   - node ↔ group-label — no group-box label text covers a node
- *   - group-box ↔ box   — no two group boxes overlap */
+ *   - group-box ↔ box   — no two group boxes overlap
+ *   - label ↔ label     — no two text labels overlap (Round 27 — caught
+ *                         the dense-node-label vs group-label collision
+ *                         Vincent reported in preview.29) */
 import { chromium } from 'playwright';
 import { readFileSync, mkdirSync } from 'node:fs';
 
@@ -80,11 +83,24 @@ async function check(layout) {
         label: { x: bb.x, y: bb.y, w: bb.width, h: bb.height },
       };
     });
-    return { nodes, panels, groups };
+    // Round 27 / P0: every visible label bbox (node alias text + group
+    // headings) so we can assert label↔label clearance. Skip elements
+    // with empty bboxes (e.g., text inside an unrendered <g>).
+    const allLabels = [];
+    for (const t of svg.querySelectorAll('g[data-node] text, g[data-group] text')) {
+      const bb = t.getBBox();
+      if (bb.width === 0 || bb.height === 0) continue;
+      allLabels.push({
+        kind: t.closest('g[data-group]') ? 'group' : 'node',
+        owner: (t.closest('g[data-group]')?.getAttribute('data-group')) || (t.closest('g[data-node]')?.getAttribute('data-node')) || '?',
+        x: bb.x, y: bb.y, w: bb.width, h: bb.height,
+      });
+    }
+    return { nodes, panels, groups, allLabels };
   });
 
   const TOL = 2; // px slack — touching edges is fine, real overlap is not
-  let nodeNode = 0, nodePanel = 0, nodeLabel = 0, boxBox = 0;
+  let nodeNode = 0, nodePanel = 0, nodeLabel = 0, boxBox = 0, labelLabel = 0;
 
   // node ↔ node
   for (let i = 0; i < data.nodes.length; i++) {
@@ -119,12 +135,23 @@ async function check(layout) {
           overlaps1D(a.y, a.y + a.h, b.y, b.y + b.h, TOL)) boxBox++;
     }
   }
+  // label ↔ label  (Round 27)
+  // Same-node node-labels (e.g. alias + sub-status in the full card) are
+  // intentionally close and adjacent — skip pairs that share an owner.
+  for (let i = 0; i < data.allLabels.length; i++) {
+    for (let j = i + 1; j < data.allLabels.length; j++) {
+      const a = data.allLabels[i], b = data.allLabels[j];
+      if (a.owner === b.owner) continue;
+      if (overlaps1D(a.x, a.x + a.w, b.x, b.x + b.w, TOL) &&
+          overlaps1D(a.y, a.y + a.h, b.y, b.y + b.h, TOL)) labelLabel++;
+    }
+  }
 
   await page.screenshot({ path: `/tmp/anet-issue-112/overlap-${layout}.png` });
   await ctx.close();
-  const ok = nodeNode === 0 && nodePanel === 0 && nodeLabel === 0 && boxBox === 0;
+  const ok = nodeNode === 0 && nodePanel === 0 && nodeLabel === 0 && boxBox === 0 && labelLabel === 0;
   console.log(`${ok ? '✅' : '❌'} [${layout}] nodes=${data.nodes.length} groups=${data.groups.length} — ` +
-    `node↔node:${nodeNode} node↔panel:${nodePanel} node↔label:${nodeLabel} box↔box:${boxBox}`);
+    `node↔node:${nodeNode} node↔panel:${nodePanel} node↔label:${nodeLabel} box↔box:${boxBox} label↔label:${labelLabel}`);
   return ok;
 }
 

package/scripts/topo-panel-elevation-test.mjs

@@ -0,0 +1,76 @@
+/* Round 57 verification: recent-signal + legend panels carry a drop-
+ * shadow filter so they read as floating cards instead of pasted-on
+ * graphics — especially important on light theme where panel fill is
+ * near-white on a near-white canvas.
+ *
+ *  - Both panels render a <rect> with `data-topo-panel-elevation`.
+ *  - The rect's `style.filter` contains "drop-shadow(".
+ *  - Light vs cyber themes use different shadow alpha (light tuned for
+ *    contrast against white canvas; cyber for subtle depth on dark).
+ *    Verify the strings differ so the theme switch isn't a no-op.
+ */
+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(theme) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 1500 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript((t) => {
+    try {
+      localStorage.setItem('anet-theme', t);
+      localStorage.setItem('anet-topo-layout', 'ring');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, theme);
+  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'].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.waitForSelector('rect[data-topo-panel-elevation="recent"]', { timeout: 30000 });
+  await page.waitForTimeout(400);
+  const filters = await page.evaluate(() => {
+    const recent = document.querySelector('rect[data-topo-panel-elevation="recent"]');
+    const legend = document.querySelector('rect[data-topo-panel-elevation="legend"]');
+    return {
+      recent: recent?.getAttribute('style') || '',
+      legend: legend?.getAttribute('style') || '',
+      recentComputed: recent ? getComputedStyle(recent).filter : null,
+      legendComputed: legend ? getComputedStyle(legend).filter : null,
+    };
+  });
+  await ctx.close();
+  return filters;
+}
+
+const light = await probe('light');
+const cyber = await probe('cyber');
+await browser.close();
+
+const hasShadow = (s) => /drop-shadow\(/.test(s || '');
+const results = {
+  light_recent_hasShadow:  hasShadow(light.recent),
+  light_legend_hasShadow:  hasShadow(light.legend),
+  cyber_recent_hasShadow:  hasShadow(cyber.recent),
+  cyber_legend_hasShadow:  hasShadow(cyber.legend),
+  themes_differ:           light.recent !== cyber.recent,
+  computed_resolves:       hasShadow(light.recentComputed) && hasShadow(cyber.recentComputed),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel elevation:`, JSON.stringify(results),
+  `\n  light.recent=${JSON.stringify(light.recent)}`,
+  `\n  cyber.recent=${JSON.stringify(cyber.recent)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-fadein-test.mjs

@@ -0,0 +1,102 @@
+/* Round 175 verification: corner panels fade-in after the
+ * canvas content reveal.
+ *
+ * Pre-R175 the recent-signal (top-left) + legend (top-right)
+ * panels appeared instantly while nodes/edges/group boxes/tier
+ * rings staggered in around them. The panels felt like 'already
+ * there' before the content showed up.
+ *
+ * R175 adds .anet-fade-in + 700ms / 800ms animation-delay on
+ * the two panel <g> wrappers — fifth surface in the first-paint
+ * reveal family (after R9 nodes / R172 edges / R173 group boxes
+ * / R174 tier rings).
+ *
+ * Test:
+ *   1. Mock 3 sessions in ring layout
+ *   2. Probe [data-topo-panel="recent"] and [="legend"]
+ *   3. Both have .anet-fade-in className
+ *   4. recent panel animationDelay = 700ms
+ *   5. legend panel animationDelay = 800ms
+ *   6. data-topo-panel-fade-delay attributes match
+ */
+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');
+    localStorage.setItem('anet-topo-layout', 'ring');
+  } 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')] } });
+});
+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.waitForSelector('[data-topo-panel="recent"]', { timeout: 10000 });
+await page.waitForSelector('[data-topo-panel="legend"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const grab = (sel) => {
+    const el = document.querySelector(sel);
+    if (!el) return null;
+    return {
+      hasFadeClass:   (el.getAttribute('class') || '').includes('anet-fade-in'),
+      fadeDelayAttr:  parseFloat(el.getAttribute('data-topo-panel-fade-delay') || ''),
+      animationDelay: el.style.animationDelay || getComputedStyle(el).animationDelay,
+    };
+  };
+  return {
+    recent: grab('[data-topo-panel="recent"]'),
+    legend: grab('[data-topo-panel="legend"]'),
+  };
+});
+
+await browser.close();
+
+const parseDelay = (s) => {
+  if (!s) return null;
+  if (s.endsWith('ms')) return parseFloat(s);
+  if (s.endsWith('s')) return parseFloat(s) * 1000;
+  return parseFloat(s);
+};
+const recentDelay = parseDelay(probe.recent?.animationDelay);
+const legendDelay = parseDelay(probe.legend?.animationDelay);
+
+const results = {
+  recent_panel_found:        probe.recent !== null,
+  legend_panel_found:        probe.legend !== null,
+  recent_has_fade_class:     probe.recent?.hasFadeClass === true,
+  legend_has_fade_class:     probe.legend?.hasFadeClass === true,
+  recent_delay_attr_700:     probe.recent?.fadeDelayAttr === 700,
+  legend_delay_attr_800:     probe.legend?.fadeDelayAttr === 800,
+  recent_anim_delay_700ms:   recentDelay === 700,
+  legend_anim_delay_800ms:   legendDelay === 800,
+  legend_lags_recent_100ms:  legendDelay - recentDelay === 100,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel fade-in:`, JSON.stringify(results),
+  `\n  recent =`, probe.recent, `delay=${recentDelay}`,
+  `\n  legend =`, probe.legend, `delay=${legendDelay}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-hot-tail-fade-test.mjs

@@ -0,0 +1,132 @@
+/* Round 190 verification: R129 hot-tail tspan in recent-signal
+ * panel header gets anet-fade-in for smooth entrance.
+ *
+ * Pre-R190 the tspan mounted/unmounted on hotFlowCount > 0 —
+ * snap. R190 keeps the conditional render (so the tspan
+ * doesn't consume layout when no hot flows) but adds the R3
+ * .anet-fade-in CSS animation that plays once on mount.
+ *
+ * Test scenarios:
+ *   A. 0 hot flows (just a few cold ones):
+ *      [data-recent-panel-hot-count] NOT present
+ *   B. 1 hot flow (count=12):
+ *      tspan present with text '· 1 hot', className contains
+ *      'anet-fade-in', data-recent-panel-hot-count='1'
+ *   C. 2 hot flows (count=15 + count=20):
+ *      data-recent-panel-hot-count='2', text '· 2 hot'
+ */
+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 {}
+});
+
+async function run(scenario) {
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  await ctx.unroute('**/api/hub/status*').catch(() => {});
+  await ctx.unroute('**/api/hub/messages*').catch(() => {});
+  await ctx.unroute('**/api/hub/tasks*').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: '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'),
+    ] } });
+  });
+  const now = Date.now();
+  const msgs = scenario(now);
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+  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-recent-panel-count]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const tail = document.querySelector('[data-recent-panel-hot-count]');
+    return {
+      tailPresent:    !!tail,
+      tailText:       tail?.textContent || null,
+      tailCount:      tail?.getAttribute('data-recent-panel-hot-count'),
+      tailClassName:  tail?.getAttribute('class') || '',
+      // R223 added: visibility attribute for always-mount-with-opacity-
+      // gate. "no tail" is either tailPresent=false (legacy conditional
+      // mount, no longer current) OR tailVisible='false' (R223 always-
+      // mount with opacity 0).
+      tailVisible:    tail?.getAttribute('data-recent-panel-hot-visible'),
+    };
+  });
+  await page.close();
+  return out;
+}
+
+// Scenario A: 0 hot — 1 cold flow
+const a = await run((now) => {
+  const m = [];
+  for (let i = 0; i < 4; i++) {
+    m.push({ id: `cold${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - (1000 + i * 50)).toISOString() });
+  }
+  return m;
+});
+
+// Scenario B: 1 hot flow alpha→beta count=12
+const b = await run((now) => {
+  const m = [];
+  for (let i = 0; i < 12; i++) {
+    m.push({ id: `hot${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - (1000 + i * 50)).toISOString() });
+  }
+  return m;
+});
+
+// Scenario C: 2 hot flows
+const c = await run((now) => {
+  const m = [];
+  for (let i = 0; i < 15; i++) {
+    m.push({ id: `h1-${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - (5000 + i * 50)).toISOString() });
+  }
+  for (let i = 0; i < 20; i++) {
+    m.push({ id: `h2-${i}`, from_alias: 'gamma', to_alias: 'delta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - (15000 + i * 50)).toISOString() });
+  }
+  return m;
+});
+
+await browser.close();
+
+const results = {
+  // R223 update: hot-tail is always-mounted now with opacity-gate;
+  // "no tail" means either not in DOM (legacy) OR present-but-hidden
+  // (always-mount visible='false'). Accept both forms.
+  a_no_tail:               a.tailPresent === false || a.tailVisible === 'false',
+  b_tail_present:          b.tailPresent === true,
+  b_tail_text:             /·\s*1\s*hot/.test(b.tailText || ''),
+  b_tail_count_1:          b.tailCount === '1',
+  b_has_fade_class:        b.tailClassName.includes('anet-fade-in'),
+  c_tail_present:          c.tailPresent === true,
+  c_tail_text:             /·\s*2\s*hot/.test(c.tailText || ''),
+  c_tail_count_2:          c.tailCount === '2',
+  c_has_fade_class:        c.tailClassName.includes('anet-fade-in'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel hot-tail fade:`, JSON.stringify(results),
+  `\n  A (0 hot):`, a,
+  `\n  B (1 hot):`, b,
+  `\n  C (2 hot):`, c);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-hover-elevation-test.mjs

@@ -0,0 +1,118 @@
+/* Round 135 verification: both overlay panels (recent-signal +
+ * legend) drop-shadow boosts on mouseenter, restores on leave.
+ * Mirrors R18's KPI-card hover-elevation from the Overview page.
+ *
+ * Why both panels: each panel chrome already hosts interactive
+ * rows (R56/R116 recent rows, R55/R61 legend rows) and footer
+ * nav (R133). Hover-lift signals "this whole panel is alive"
+ * without misleading users that the panel itself is clickable —
+ * the underlying click affordances are still the rows + footer.
+ *
+ * State transitions tested:
+ *   1. Neither panel hovered → both data-topo-panel-hovered="false",
+ *      both rect filters = baseline (2px/6px blur)
+ *   2. Hover recent → that panel hovered=true, filter boosted
+ *      (4px/12px blur); legend still baseline
+ *   3. Leave recent (move far away) → recent restored
+ *   4. Hover legend → legend hovered=true, filter boosted
+ *   5. Leave legend → legend restored
+ *
+ * Filter inline-string detection: the boosted variant carries the
+ * `4px 12px` magic numbers in its drop-shadow argument.
+ */
+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.waitForSelector('[data-topo-panel="recent"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const inspect = () => page.evaluate(() => {
+  const get = (key) => {
+    const g = document.querySelector(`[data-topo-panel="${key}"]`);
+    const rect = g?.querySelector('rect[data-topo-panel-elevation]');
+    return {
+      hovered: g?.getAttribute('data-topo-panel-hovered'),
+      filter: (rect?.getAttribute('style') || ''),
+    };
+  };
+  return { recent: get('recent'), legend: get('legend') };
+});
+
+// State 1 — neither hovered
+const s1 = await inspect();
+
+// State 2 — hover recent
+await page.locator('[data-topo-panel="recent"]').hover();
+await page.waitForTimeout(300);
+const s2 = await inspect();
+
+// State 3 — leave recent (move far away from both panels)
+await page.mouse.move(700, 350);
+await page.waitForTimeout(300);
+const s3 = await inspect();
+
+// State 4 — hover legend
+await page.locator('[data-topo-panel="legend"]').hover();
+await page.waitForTimeout(300);
+const s4 = await inspect();
+
+// State 5 — leave legend
+await page.mouse.move(500, 350);
+await page.waitForTimeout(300);
+const s5 = await inspect();
+
+await browser.close();
+
+const isBoosted = (style) => /4px\s+12px/.test(style);
+const isBase    = (style) => /2px\s+6px/.test(style) && !/4px\s+12px/.test(style);
+
+const results = {
+  s1_recent_notHovered: s1.recent.hovered === 'false',
+  s1_legend_notHovered: s1.legend.hovered === 'false',
+  s1_recent_baseShadow: isBase(s1.recent.filter),
+  s1_legend_baseShadow: isBase(s1.legend.filter),
+
+  s2_recent_hovered:    s2.recent.hovered === 'true',
+  s2_recent_boosted:    isBoosted(s2.recent.filter),
+  s2_legend_stillBase:  s2.legend.hovered === 'false' && isBase(s2.legend.filter),
+
+  s3_recent_restored:   s3.recent.hovered === 'false' && isBase(s3.recent.filter),
+
+  s4_legend_hovered:    s4.legend.hovered === 'true',
+  s4_legend_boosted:    isBoosted(s4.legend.filter),
+  s4_recent_stillBase:  s4.recent.hovered === 'false' && isBase(s4.recent.filter),
+
+  s5_legend_restored:   s5.legend.hovered === 'false' && isBase(s5.legend.filter),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel hover elevation:`, JSON.stringify(results),
+  `\n  s1=`, s1, `\n  s2=`, s2, `\n  s3=`, s3, `\n  s4=`, s4, `\n  s5=`, s5);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-theme-ease-test.mjs

@@ -0,0 +1,85 @@
+/* Round 247 verification: recent-signal + legend panel chrome
+ * <rect>s pick up fill + stroke + opacity in their transition
+ * lists, completing the per-panel theme-toggle smoothing.
+ *
+ * Pre-R247 each panel rect transition was 'filter 200ms ease-out'
+ * (R135 hover-elevation drop-shadow). Three theme-driven properties
+ * snapped on theme toggle:
+ *   - fill: pal.legendBox.fill (cyber #020617 ↔ light #ffffff)
+ *   - stroke: pal.legendBox.stroke (cyber #1f2937 ↔ light #e2e8f0)
+ *   - opacity: 0.92 cyber ↔ 0.97 light
+ *
+ * R247 adds all three to the transition list at 200ms ease-out.
+ * Mirrors R246's per-node label-card treatment at the panel scope.
+ *
+ * Test scope per panel:
+ *   - element present at [data-topo-panel-elevation]
+ *   - style.transition contains filter, fill, stroke, AND opacity
+ *     each at 200ms (or 0.2s browser-normalised)
+ */
+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('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r2) => r2.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-panel-elevation="recent"]', { timeout: 10000, state: 'attached' });
+await page.waitForSelector('[data-topo-panel-elevation="legend"]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const grab = (panel) => {
+    const r = document.querySelector(`[data-topo-panel-elevation="${panel}"]`);
+    if (!r) return null;
+    return { transition: r.style.transition };
+  };
+  return {
+    recent: grab('recent'),
+    legend: grab('legend'),
+  };
+});
+await browser.close();
+
+const hasProp = (s, prop) => new RegExp(`${prop}\\s+(?:200ms|0\\.2s)`).test(s || '');
+
+const results = {
+  recent_present:           probe.recent !== null,
+  recent_has_filter_200:    hasProp(probe.recent?.transition, 'filter'),
+  recent_has_fill_200:      hasProp(probe.recent?.transition, 'fill'),
+  recent_has_stroke_200:    hasProp(probe.recent?.transition, 'stroke'),
+  recent_has_opacity_200:   hasProp(probe.recent?.transition, 'opacity'),
+  legend_present:           probe.legend !== null,
+  legend_has_filter_200:    hasProp(probe.legend?.transition, 'filter'),
+  legend_has_fill_200:      hasProp(probe.legend?.transition, 'fill'),
+  legend_has_stroke_200:    hasProp(probe.legend?.transition, 'stroke'),
+  legend_has_opacity_200:   hasProp(probe.legend?.transition, 'opacity'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel theme ease:`, JSON.stringify(results),
+  '\n  recent:', probe.recent,
+  '\n  legend:', probe.legend);
+process.exit(ok ? 0 : 1);