@sleep2agi/agent-network-dashboard 0.4.6-preview.27 → 0.4.6-preview.270

package/scripts/topo-online-chip-nav-test.mjs

@@ -0,0 +1,143 @@
+/* Round 140 verification: the "N online" chip in the chip row
+ * gets an onClick that navigates to /nodes when interactive.
+ * Mirrors R136 active-links→/messages idiom; complements R139
+ * working→pin idiom. The online chip is the third chip-row chip
+ * that had cursor:pointer without a click action since R79.
+ *
+ * Why nav not pin: "online" = working + idle in semantics; there's
+ * no single pinnedStatus value that captures both. /nodes is the
+ * natural full-list destination.
+ *
+ * Three states tested:
+ *   - Empty fleet (onlineCount=0): chip not interactive
+ *   - 1 online: clickable, role=link, click → /nodes
+ *   - 5 online (mix of working+idle): same shape, click → /nodes
+ *
+ * Hover preview still works (R79 highlight all online) — that's
+ * a separate gesture verified in topo-active-links-chip-hover-test
+ * for the chip-row's hover ladder.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+// status: 'working' | 'idle' | 'offline' — distribute by counts
+async function probe({ working, idle, offline }) {
+  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 sessions = [];
+    let i = 0;
+    for (let n = 0; n < working;  n++, i++) sessions.push(mk(i, 'working',  fresh, nid));
+    for (let n = 0; n < idle;     n++, i++) sessions.push(mk(i, 'idle',     fresh, nid));
+    for (let n = 0; n < offline;  n++, i++) sessions.push(mk(i, 'offline',  fresh, nid));
+    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' });
+  // offline-only fleet won't render g[data-node] (only online ones do),
+  // but the chip row still renders because sessions.length > 0.
+  await page.waitForSelector('[data-online-chip]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  return { browser, page };
+}
+
+function mk(i, status, fresh, nid) {
+  return {
+    alias: `node${i}`,
+    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,
+  };
+}
+
+// State A: 5 online (3 working / 2 idle)
+const { browser: b1, page: p1 } = await probe({ working: 3, idle: 2, offline: 0 });
+const fiveProbe = await p1.evaluate(() => {
+  const chip = document.querySelector('[data-online-chip]');
+  return {
+    text:        chip?.textContent,
+    clickable:   chip?.getAttribute('data-online-chip-clickable'),
+    role:        chip?.getAttribute('role'),
+    tabindex:    chip?.getAttribute('tabindex'),
+    cursor:      chip?.getAttribute('style')?.includes('cursor: pointer'),
+    title:       chip?.getAttribute('title'),
+  };
+});
+await p1.locator('[data-online-chip]').click();
+await p1.waitForURL('**/nodes', { timeout: 10000 });
+const fiveUrl = p1.url();
+await b1.close();
+
+// State B: 1 online (1 idle, 0 working)
+const { browser: b2, page: p2 } = await probe({ working: 0, idle: 1, offline: 0 });
+const oneProbe = await p2.evaluate(() => {
+  const chip = document.querySelector('[data-online-chip]');
+  return {
+    text: chip?.textContent,
+    clickable: chip?.getAttribute('data-online-chip-clickable'),
+    role: chip?.getAttribute('role'),
+  };
+});
+await p2.locator('[data-online-chip]').click();
+await p2.waitForURL('**/nodes', { timeout: 10000 });
+const oneUrl = p2.url();
+await b2.close();
+
+// State C: offline-only fleet (2 sessions, all offline → onlineNodes=0)
+// 0-session fleet hits Overview's R52/R70 first-run CTA path, not
+// TopoGraph; offline-only keeps the chip row alive so the non-
+// interactive contract on "0 online" can be verified.
+const { browser: b3, page: p3 } = await probe({ working: 0, idle: 0, offline: 2 });
+const emptyProbe = await p3.evaluate(() => {
+  const chip = document.querySelector('[data-online-chip]');
+  return {
+    text: chip?.textContent,
+    clickable: chip?.getAttribute('data-online-chip-clickable'),
+    role: chip?.getAttribute('role'),
+    tabindex: chip?.getAttribute('tabindex'),
+    cursor: chip?.getAttribute('style')?.includes('cursor: pointer'),
+  };
+});
+await b3.close();
+
+const results = {
+  five_text5Online:        fiveProbe.text === '5 online',
+  five_clickableTrue:      fiveProbe.clickable === 'true',
+  five_roleLink:           fiveProbe.role === 'link',
+  five_tabIndex0:          fiveProbe.tabindex === '0',
+  five_cursorPointer:      fiveProbe.cursor === true,
+  five_titleMentionsNodes: (fiveProbe.title || '').includes('/nodes'),
+  five_navToNodes:         /\/nodes$/.test(fiveUrl),
+
+  one_text1Online:         oneProbe.text === '1 online',
+  one_clickableTrue:       oneProbe.clickable === 'true',
+  one_roleLink:            oneProbe.role === 'link',
+  one_navToNodes:          /\/nodes$/.test(oneUrl),
+
+  empty_text0Online:       emptyProbe.text === '0 online',
+  empty_clickableFalse:    emptyProbe.clickable === 'false',
+  empty_noRole:            emptyProbe.role === null || emptyProbe.role === undefined,
+  empty_noTabIndex:        emptyProbe.tabindex === null || emptyProbe.tabindex === undefined,
+  empty_noCursor:          !emptyProbe.cursor,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} online chip nav:`, JSON.stringify(results),
+  `\n  fiveProbe=`, fiveProbe, ` fiveUrl=`, fiveUrl,
+  `\n  oneProbe=`, oneProbe, ` oneUrl=`, oneUrl,
+  `\n  emptyProbe=`, emptyProbe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-orbit-busyness-test.mjs

@@ -0,0 +1,96 @@
+/* Round 131 verification: outer-ring orbit period buckets on
+ * workingCount, mirroring R84's hub-breath cadence. Idle fleet
+ * keeps the original 16s "calm sweep"; as work piles up the
+ * orbit accelerates to 14 / 12 / 10s. Both motion layers now
+ * read the same underlying "is the network busy" signal.
+ *
+ * Bucket boundaries identical to R84 (line ~2702):
+ *   workingCount === 0     → bucket 0, dur 16s
+ *   workingCount in [1, 2] → bucket 1, dur 14s
+ *   workingCount in [3, 5] → bucket 2, dur 12s
+ *   workingCount  >= 6     → bucket 3, dur 10s
+ *
+ * R50 only renders on cyber theme (light is skipped to keep the
+ * white surface clean). All probes use cyber.
+ *
+ * Probe fleet sizes pick one representative per bucket.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probe(workingCount, totalCount) {
+  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 sessions = [];
+    for (let i = 0; i < totalCount; i++) {
+      sessions.push({
+        alias: `node${i}`,
+        status: i < workingCount ? 'working' : 'idle',
+        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 } });
+  });
+  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((n) => document.querySelectorAll('g[data-node]').length === n, totalCount, { timeout: 30000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const orbits = [...document.querySelectorAll('[data-topo-orbit-bucket]')];
+    return orbits.map(g => ({
+      bucket: g.getAttribute('data-topo-orbit-bucket'),
+      dur:    g.getAttribute('data-topo-orbit-dur'),
+      animDur: g.querySelector('animateTransform')?.getAttribute('dur'),
+    }));
+  });
+
+  await browser.close();
+  return out;
+}
+
+// Pick one from each bucket
+const b0 = await probe(0, 4);  // workingCount=0  → bucket 0, dur 16
+const b1 = await probe(2, 4);  // workingCount=2  → bucket 1, dur 14
+const b2 = await probe(4, 5);  // workingCount=4  → bucket 2, dur 12
+const b3 = await probe(7, 8);  // workingCount=7  → bucket 3, dur 10
+
+const allConsistent = (orbits, bucket, dur) =>
+  orbits.length === 4 &&
+  orbits.every(o => o.bucket === String(bucket) && o.dur === String(dur) && o.animDur === `${dur}s`);
+
+const results = {
+  b0_fourOrbits:  b0.length === 4,
+  b0_bucket0_16s: allConsistent(b0, 0, 16),
+  b1_bucket1_14s: allConsistent(b1, 1, 14),
+  b2_bucket2_12s: allConsistent(b2, 2, 12),
+  b3_bucket3_10s: allConsistent(b3, 3, 10),
+  // dur strictly decreases as busy increases
+  dur_monotonic:
+    Number(b0[0]?.dur) > Number(b1[0]?.dur) &&
+    Number(b1[0]?.dur) > Number(b2[0]?.dur) &&
+    Number(b2[0]?.dur) > Number(b3[0]?.dur),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} orbit busyness:`, JSON.stringify(results),
+  `\n  b0(0w/4)=`, b0,
+  `\n  b1(2w/4)=`, b1,
+  `\n  b2(4w/5)=`, b2,
+  `\n  b3(7w/8)=`, b3);
+process.exit(ok ? 0 : 1);

package/scripts/topo-orbit-opacity-bucket-test.mjs

@@ -0,0 +1,124 @@
+/* Round 216 verification: outer-ring orbit particle opacity scales
+ * with busy bucket alongside R131's speed scaling. Idle fleet → dim
+ * particles; busy fleet → bright. transitions on opacity 300ms.
+ *
+ * Bucket map: workingCount 0 → busy 0; 1-2 → 1; 3-5 → 2; 6+ → 3
+ *             opacity      [0.5, 0.7, 0.85, 1.0]
+ *
+ * Test scenarios (cyber dark, orbit particles only render in dark):
+ *   A. 0 working sessions (4 idle):   busy=0, opacity≈0.5
+ *   B. 2 working sessions (2 working+2 idle):  busy=1, opacity≈0.7
+ *   C. 6 working sessions:            busy=3, opacity≈1.0
+ *   Every orbit particle has style.transition: 'opacity 300ms'
+ *   Every orbit <g> exposes data-topo-orbit-opacity matching the
+ *   bucket value (test verifies derivation + DOM agreement).
+ */
+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 pageFor(workingN) {
+  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();
+  const totalSessions = Math.max(workingN, 4);
+  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,
+    });
+    const sessions = [];
+    for (let i = 0; i < totalSessions; i++) {
+      sessions.push(mk(`node-${(i + 1).toString().padStart(2, '0')}`, i < workingN ? 'working' : 'idle'));
+    }
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  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((n) => document.querySelectorAll('g[data-node]').length === n, totalSessions, { timeout: 30000 });
+  await page.waitForSelector('[data-topo-orbit-bucket]', { timeout: 10000, state: 'attached' });
+  await page.waitForTimeout(300);
+  return page;
+}
+
+const probe = async (page) => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-topo-orbit-bucket]')].map(el => {
+    const inner = el.querySelector('circle');
+    return {
+      bucket:        el.getAttribute('data-topo-orbit-bucket'),
+      bucketOpacity: el.getAttribute('data-topo-orbit-opacity'),
+      dur:           el.getAttribute('data-topo-orbit-dur'),
+      circleOpacity: parseFloat(inner?.getAttribute('opacity') || ''),
+      transition:    inner?.style.transition,
+    };
+  });
+});
+
+// Scenario A: 0 working → busy=0, opacity=0.5
+const pageA = await pageFor(0);
+const probeA = await probe(pageA);
+await pageA.close();
+
+// Scenario B: 2 working → busy=1, opacity=0.7
+const pageB = await pageFor(2);
+const probeB = await probe(pageB);
+await pageB.close();
+
+// Scenario C: 6 working → busy=3, opacity=1.0
+const pageC = await pageFor(6);
+const probeC = await probe(pageC);
+await pageC.close();
+await browser.close();
+
+const near = (got, want, tol = 0.05) => Math.abs(got - want) < tol;
+const hasOpacityT = (s) => /opacity\s+(?:300ms|0\.3s)/.test(s || '');
+
+const results = {
+  // 4 orbit particles in each scenario (R50 phase array of 4)
+  A_four_particles:        probeA.length === 4,
+  B_four_particles:        probeB.length === 4,
+  C_four_particles:        probeC.length === 4,
+
+  // Scenario A — idle fleet (busy=0)
+  A_bucket_0:              probeA.every(p => p.bucket === '0'),
+  A_opacity_half:          probeA.every(p => near(p.circleOpacity, 0.5)),
+  A_data_attr_matches:     probeA.every(p => parseFloat(p.bucketOpacity) === p.circleOpacity),
+
+  // Scenario B — light load (busy=1)
+  B_bucket_1:              probeB.every(p => p.bucket === '1'),
+  B_opacity_0p7:           probeB.every(p => near(p.circleOpacity, 0.7)),
+
+  // Scenario C — heavy load (busy=3)
+  C_bucket_3:              probeC.every(p => p.bucket === '3'),
+  C_opacity_full:          probeC.every(p => near(p.circleOpacity, 1.0)),
+
+  // Brightness actually grew across buckets
+  brightness_grew:         probeA[0].circleOpacity < probeB[0].circleOpacity
+                           && probeB[0].circleOpacity < probeC[0].circleOpacity,
+
+  // Transitions present in every particle of every scenario
+  A_all_have_transition:   probeA.every(p => hasOpacityT(p.transition)),
+  B_all_have_transition:   probeB.every(p => hasOpacityT(p.transition)),
+  C_all_have_transition:   probeC.every(p => hasOpacityT(p.transition)),
+
+  // R131's existing speed scaling still derives — dur shortens as
+  // bucket grows
+  speed_scales:            parseFloat(probeA[0].dur || '0') > parseFloat(probeC[0].dur || '99'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} orbit opacity bucket:`, JSON.stringify(results),
+  `\n  probeA (0 working):`, probeA.slice(0, 1),
+  `\n  probeB (2 working):`, probeB.slice(0, 1),
+  `\n  probeC (6 working):`, probeC.slice(0, 1));
+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-pan-cursor-test.mjs

@@ -0,0 +1,62 @@
+/* Round 21 verification: SVG cursor flips from grab → grabbing during
+ * a pan drag and back to grab on release. */
+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 });
+// Need a tall enough viewport to keep the SVG ABOVE the fold so real
+// pointer events land — at 1280×900 the canvas starts at ~y=815 (the
+// /admin hero + StatsBar above push it below the viewport bottom).
+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');
+    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'].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/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(400);
+
+const cursorAt = () => page.$eval('svg[viewBox="0 0 1000 680"]', el => el.style.cursor);
+const rest = await cursorAt();
+
+// pick a pan-safe target far from any node — top-left empty canvas region
+const box = await page.$eval('svg[viewBox="0 0 1000 680"]', el => el.getBoundingClientRect());
+const sx = box.x + box.width * 0.08;
+const sy = box.y + box.height * 0.40;
+
+await page.mouse.move(sx, sy);
+await page.mouse.down();
+await page.mouse.move(sx + 40, sy + 30);
+await page.waitForTimeout(50);
+const during = await cursorAt();
+await page.mouse.up();
+await page.waitForTimeout(50);
+const after = await cursorAt();
+
+await browser.close();
+const results = {
+  restIsGrab: rest === 'grab',
+  duringIsGrabbing: during === 'grabbing',
+  afterIsGrab: after === 'grab',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pan cursor:`, JSON.stringify(results), `rest=${rest} during=${during} after=${after}`);
+process.exit(ok ? 0 : 1);

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