@sleep2agi/agent-network-dashboard 0.4.6-preview.39 → 0.4.6-preview.396

package/scripts/topo-nodesize-crossfade-test.mjs

@@ -0,0 +1,141 @@
+/* Round 171 verification: nodeSize change (S/M/L) picks up the
+ * R170 crossfade pattern.
+ *
+ * Pre-R171 clicking S → L (or any non-active button) in the
+ * chrome node-size segment re-derived every node's radius +
+ * label sizing + (in grid) cell spacing in one paint frame.
+ * Wholesale visual shift, no easing.
+ *
+ * R171 introduces nodeSizeSwitching one-shot flag (parallel
+ * to R170 layoutSwitching). pickNodeScale arms it for 400ms
+ * UNLESS the picked scale matches the current one (clicking
+ * the already-active button bails early). The viewport <g>
+ * opacity dims to 0.45 via the same `(layoutSwitching ||
+ * nodeSizeSwitching)` OR expression.
+ *
+ * Test:
+ *   1. Idle: nodeSize-switching='false', opacity=1, M active
+ *   2. Click 'S' → flag='true', opacity='0.45', S now active
+ *   3. Wait 450ms → flag='false', opacity='1', S still active
+ *   4. Click 'S' again (same as current) → no flag arm (bail)
+ *   5. Click 'L' → flag='true' again
+ */
+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');
+    // Default M (0.84) per the React useState — explicitly clear any
+    // saved value so the test starts at a known state.
+    localStorage.removeItem('anet-topo-nodescale');
+  } 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-viewport]', { timeout: 10000 });
+await page.waitForSelector('[data-topo-chrome-nodesize="S"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = () => page.evaluate(() => {
+  const g = document.querySelector('[data-topo-viewport]');
+  const sBtn = document.querySelector('[data-topo-chrome-nodesize="S"]');
+  const mBtn = document.querySelector('[data-topo-chrome-nodesize="M"]');
+  const lBtn = document.querySelector('[data-topo-chrome-nodesize="L"]');
+  return {
+    nodeSizeSwitching: g?.getAttribute('data-topo-viewport-nodesize-switching'),
+    opacity:           g?.style?.opacity || '',
+    transition:        g?.style?.transition || '',
+    s_active:          sBtn?.getAttribute('data-topo-chrome-nodesize-active'),
+    m_active:          mBtn?.getAttribute('data-topo-chrome-nodesize-active'),
+    l_active:          lBtn?.getAttribute('data-topo-chrome-nodesize-active'),
+  };
+});
+
+const idle = await probe();
+
+// Click S → flag arms, opacity drops
+await page.locator('[data-topo-chrome-nodesize="S"]').click();
+await page.waitForTimeout(50);
+const duringS = await probe();
+
+// Wait past 400ms window
+await page.waitForTimeout(450);
+const afterS = await probe();
+
+// Click S again (same as current) → no fire, no fade
+await page.locator('[data-topo-chrome-nodesize="S"]').click();
+await page.waitForTimeout(50);
+const sameS = await probe();
+
+// Click L (different from S) → flag arms again
+await page.locator('[data-topo-chrome-nodesize="L"]').click();
+await page.waitForTimeout(50);
+const duringL = await probe();
+
+await page.waitForTimeout(450);
+const afterL = await probe();
+
+await browser.close();
+
+const results = {
+  viewport_found:                idle !== null,
+  idle_flag_false:               idle.nodeSizeSwitching === 'false',
+  idle_opacity_1:                idle.opacity === '1' || idle.opacity === '',
+  idle_has_opacity_transition:   idle.transition.includes('opacity 250ms'),
+  idle_M_active:                 idle.m_active === 'true',
+  idle_S_inactive:               idle.s_active === 'false',
+  idle_L_inactive:               idle.l_active === 'false',
+
+  S_armed_flag:                  duringS.nodeSizeSwitching === 'true',
+  S_armed_opacity_0p45:          duringS.opacity === '0.45',
+  S_active_after_click:          duringS.s_active === 'true',
+  S_M_deactivated:               duringS.m_active === 'false',
+
+  after_S_flag_false:            afterS.nodeSizeSwitching === 'false',
+  after_S_opacity_1:             afterS.opacity === '1',
+  after_S_still_S_active:        afterS.s_active === 'true',
+
+  sameS_no_arm:                  sameS.nodeSizeSwitching === 'false',
+  sameS_opacity_stable:          sameS.opacity === '1',
+
+  L_armed_flag:                  duringL.nodeSizeSwitching === 'true',
+  L_armed_opacity_0p45:          duringL.opacity === '0.45',
+  L_active_after_click:          duringL.l_active === 'true',
+  L_S_deactivated:               duringL.s_active === 'false',
+
+  after_L_flag_false:            afterL.nodeSizeSwitching === 'false',
+  after_L_opacity_1:             afterL.opacity === '1',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} nodesize crossfade:`, JSON.stringify(results),
+  `\n  idle     =`, idle,
+  `\n  during S =`, duringS,
+  `\n  after  S =`, afterS,
+  `\n  same   S =`, sameS,
+  `\n  during L =`, duringL,
+  `\n  after  L =`, afterL);
+process.exit(ok ? 0 : 1);

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