@sleep2agi/agent-network-dashboard 0.4.6-preview.8 → 0.4.6-preview.80

package/scripts/topo-pressure-pin-test.mjs

@@ -0,0 +1,112 @@
+/* Round 60 verification: each pressure-bar segment toggles a sticky
+ * status filter. Click "working" → all non-working nodes dim, working
+ * ones stay. Click again → release. Pin and the R55 legend hover feed
+ * the same node-opacity branch via `activeStatus = hoveredStatus ??
+ * pinnedStatus`, so hover transiently overrides without nuking the pin.
+ *
+ * Sessions:
+ *   wkr   — working
+ *   idl1  — idle
+ *   idl2  — idle
+ *   off   — offline
+ */
+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');
+    localStorage.setItem('anet-topo-layout', 'ring');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+const stale = new Date(Date.now() - 30 * 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, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'idl1', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'idl2', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'off',  status: 'offline', network_id: nid, project_dir: null, created_at: stale, updated_at: stale, last_seen_at: stale },
+  ];
+  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 === 4, { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const opacities = () => page.evaluate(() => {
+  const o = {};
+  for (const a of ['wkr', 'idl1', 'idl2', 'off']) {
+    const g = document.querySelector(`g[data-node="${a}"]`);
+    o[a] = g ? +(g.style.opacity || '1') : null;
+  }
+  return o;
+});
+
+const before = await opacities();
+
+const bright = (v) => v != null && v >= 0.55;
+const dim    = (v) => v != null && v < 0.4;
+
+// Click the WORKING segment.
+const workingSeg = page.locator('[data-pressure-seg="working"]').first();
+const workingExists = await workingSeg.count() > 0;
+if (!workingExists) { console.log('❌ pressure segment[working] not found'); process.exit(1); }
+await workingSeg.click({ force: true });
+await page.waitForTimeout(250);
+const afterPin = await opacities();
+
+// Pin should persist past mouse moving away.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterMouseMove = await opacities();
+
+// Click again to release.
+await workingSeg.click({ force: true });
+await page.waitForTimeout(250);
+const afterRelease = await opacities();
+
+// Repeat for offline segment.
+const offlineSeg = page.locator('[data-pressure-seg="offline"]').first();
+await offlineSeg.click({ force: true });
+await page.waitForTimeout(250);
+const afterOfflinePin = await opacities();
+await offlineSeg.click({ force: true });
+await page.waitForTimeout(250);
+const afterOfflineRelease = await opacities();
+
+await browser.close();
+
+const results = {
+  before_baseline:           bright(before.wkr) && bright(before.idl1),
+  working_pinKeepsWorking:   bright(afterPin.wkr),
+  working_pinDimsIdle:       dim(afterPin.idl1) && dim(afterPin.idl2),
+  working_pinDimsOffline:    dim(afterPin.off),
+  working_pinSurvivesMouse:  bright(afterMouseMove.wkr) && dim(afterMouseMove.idl1),
+  working_releaseRestoresAll: bright(afterRelease.wkr) && bright(afterRelease.idl1),
+  offline_pinKeepsOffline:   bright(afterOfflinePin.off),   // base offline 0.6 reads as bright (>=0.55)
+  offline_pinDimsOnline:     dim(afterOfflinePin.wkr) && dim(afterOfflinePin.idl1),
+  offline_releaseRestoresAll: bright(afterOfflineRelease.wkr),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pressure pin:`, JSON.stringify(results),
+  `\n  before=`, before,
+  `\n  afterPin=`, afterPin,
+  `\n  afterMouseMove=`, afterMouseMove,
+  `\n  afterRelease=`, afterRelease,
+  `\n  afterOfflinePin=`, afterOfflinePin,
+  `\n  afterOfflineRelease=`, afterOfflineRelease);
+process.exit(ok ? 0 : 1);

package/scripts/topo-pulse-rate-test.mjs

@@ -0,0 +1,71 @@
+/* Round 24 verification: working-node pulse duration tiers by sse:N.
+ *   sse 0-1 → 1.2s    (calm)
+ *   sse 2-3 → 0.9s    (active)
+ *   sse ≥ 4 → 0.7s    (busy)
+ * Inject sse counts via mocked /api/hub/health → sse_sessions map. */
+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: 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();
+// Three working sessions with different sse counts. Use a known network_id
+// so the `${nid}:${alias}` sse-map key works (the page's grouped lookup).
+const NID = 'net_test';
+await ctx.route('**/api/hub/status*', async (route) => {
+  await route.fulfill({ json: {
+    ok: true,
+    sessions: ['calm', 'active', 'busy'].map(alias => ({
+      alias, status: 'working', network_id: NID, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    })),
+  } });
+});
+await ctx.route('**/api/hub/health*', async (route) => {
+  await route.fulfill({ json: {
+    ok: true,
+    version: '0.8.0-test',
+    sse_sessions: {
+      [`${NID}:calm`]: 1,
+      [`${NID}:active`]: 2,
+      [`${NID}:busy`]: 4,
+    },
+  } });
+});
+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(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return !!svg && svg.querySelectorAll('g[data-node]').length === 3;
+}, { timeout: 30000 }).catch(() => {});
+await page.waitForTimeout(600);
+
+const durOf = alias => page.$eval(
+  `g[data-node="${alias}"] circle[data-pulse-dur]`,
+  el => el.getAttribute('data-pulse-dur'),
+).catch(() => null);
+
+const calm = await durOf('calm');
+const active = await durOf('active');
+const busy = await durOf('busy');
+
+await browser.close();
+const results = {
+  calmIs1_2s: calm === '1.2s',
+  activeIs0_9s: active === '0.9s',
+  busyIs0_7s: busy === '0.7s',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pulse rate:`, JSON.stringify(results), `calm=${calm} active=${active} busy=${busy}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-hover-test.mjs

@@ -0,0 +1,122 @@
+/* Round 56 verification: hovering a recent-signal panel row sets
+ * hoveredEdgeKey to that link, which fires the R50 edge-focus +
+ * R49 endpoint-highlight ladders against the canvas.
+ *
+ * Sessions: alpha, beta, gamma, delta, epsilon, zeta (all idle).
+ * Messages create three deduped flow links in this order:
+ *   alpha → beta
+ *   gamma → delta
+ *   epsilon → zeta
+ * Hover the FIRST recent-signal row (alpha→beta):
+ *   - alpha→beta visible edge: opacity boosts ≥1.5× baseline (R50)
+ *   - other edges (γ→δ, ε→ζ): opacity dims < 0.6× baseline
+ *   - alpha + beta nodes: stay bright (≥0.55) — endpoint highlight (R49)
+ *   - gamma/delta/epsilon/zeta nodes: dim (<0.4)
+ * Release → all restore.
+ */
+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');
+    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', 'delta', 'epsilon', 'zeta'].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 } });
+});
+const now = new Date().toISOString();
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  { from_alias: 'alpha',   to_alias: 'beta',  content: 'm', created_at: now },
+  { from_alias: 'gamma',   to_alias: 'delta', content: 'm', created_at: now },
+  { from_alias: 'epsilon', to_alias: 'zeta',  content: 'm', created_at: now },
+] } }));
+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 === 6, { timeout: 30000 });
+await page.waitForTimeout(600);
+
+const readState = () => page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  const edges = {};
+  for (const g of svg.querySelectorAll(':scope > g > g')) {
+    const t = g.querySelector('path[data-edge-hitbox] title');
+    if (!t) continue;
+    const route = (t.textContent || '').split('\n')[0];
+    const base = [...g.querySelectorAll(':scope > path')].find(
+      p => !p.hasAttribute('data-edge-hitbox') && p.hasAttribute('marker-end')
+    );
+    if (base) edges[route] = +base.getAttribute('opacity');
+  }
+  const nodes = {};
+  for (const a of ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta']) {
+    const n = document.querySelector(`g[data-node="${a}"]`);
+    nodes[a] = n ? +(n.style.opacity || '1') : null;
+  }
+  return { edges, nodes };
+});
+
+const before = await readState();
+
+// Hover the first recent-signal row — its key is "alpha->beta".
+const rowRect = await page.evaluate(() => {
+  const g = document.querySelector('g[data-recent-row="alpha->beta"]');
+  if (!g) return null;
+  const r = g.getBoundingClientRect();
+  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+});
+if (!rowRect) { console.log('❌ recent-signal row alpha->beta not found'); process.exit(1); }
+await page.mouse.move(10, 10);
+await page.mouse.move(rowRect.x, rowRect.y);
+await page.waitForTimeout(350);
+const during = await readState();
+
+await page.mouse.move(10, 10);
+await page.waitForTimeout(350);
+const after = await readState();
+
+await browser.close();
+
+const baseEdgeOp = before.edges['alpha → beta'];
+const eAB = during.edges['alpha → beta'];
+const eGD = during.edges['gamma → delta'];
+const eEZ = during.edges['epsilon → zeta'];
+
+const bright = (v) => v != null && v >= 0.55;
+const dim = (v) => v != null && v < 0.4;
+const results = {
+  baselineEqual: Math.abs(before.edges['alpha → beta'] - before.edges['gamma → delta']) < 0.001
+              && Math.abs(before.edges['alpha → beta'] - before.edges['epsilon → zeta']) < 0.001,
+  hoverBrightensTargetEdge: eAB > baseEdgeOp * 1.5,
+  hoverDimsOtherEdges: eGD < baseEdgeOp * 0.6 && eEZ < baseEdgeOp * 0.6,
+  endpointsStayBright: bright(during.nodes.alpha) && bright(during.nodes.beta),
+  nonEndpointsDim: dim(during.nodes.gamma) && dim(during.nodes.delta)
+                && dim(during.nodes.epsilon) && dim(during.nodes.zeta),
+  releaseRestoresEdges: Math.abs(after.edges['alpha → beta'] - baseEdgeOp) < 0.05
+                     && Math.abs(after.edges['gamma → delta'] - baseEdgeOp) < 0.05,
+  releaseRestoresNodes: bright(after.nodes.alpha) && bright(after.nodes.gamma) && bright(after.nodes.epsilon),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row hover:`, JSON.stringify(results),
+  `\n  baseline α→β=${baseEdgeOp}`,
+  `\n  during α→β=${eAB} γ→δ=${eGD} ε→ζ=${eEZ}`,
+  `\n  during nodes=`, during.nodes,
+  `\n  after  edges=`, after.edges);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-signal-empty-test.mjs

@@ -0,0 +1,63 @@
+/* Round 45 verification: recent-signal panel shows "no flow yet" placeholder
+ * when flowLinks is empty; renders normal link rows when populated. */
+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({ msgs }) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, 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 = ['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/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.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+  await page.waitForTimeout(500);
+  const data = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    const empty = svg.querySelector('text[data-recent-signal-empty]');
+    // count flow-link description rows in the recent-signal panel (translate(16,16))
+    const panel = [...svg.querySelectorAll(':scope > g[transform^="translate(16, 16)"]')][0];
+    const linkRows = panel ? [...panel.querySelectorAll('text')].filter(t => /->.*\/.*\//.test(t.textContent || '')).length : 0;
+    return { emptyShown: !!empty, emptyText: empty?.textContent || null, linkRows };
+  });
+  await ctx.close();
+  return data;
+}
+
+const noFlow = await probe({ msgs: [] });
+const withFlow = await probe({ msgs: [
+  { from_alias: 'a', to_alias: 'b', content: 'hello', created_at: new Date().toISOString() },
+] });
+await browser.close();
+
+const results = {
+  emptyShowsPlaceholder: noFlow.emptyShown === true && /no flow yet/i.test(noFlow.emptyText || ''),
+  emptyHidesLinkRows: noFlow.linkRows === 0,
+  populatedHidesPlaceholder: withFlow.emptyShown === false,
+  populatedShowsLinkRows: withFlow.linkRows >= 1,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-signal empty state:`, JSON.stringify(results),
+  `\n  noFlow=`, noFlow, `\n  withFlow=`, withFlow);
+process.exit(ok ? 0 : 1);

package/scripts/topo-reduced-motion-test.mjs

@@ -0,0 +1,77 @@
+/* Round 36 verification: prefers-reduced-motion disables all SMIL
+ * animations in the topology. Round 29 zeroed CSS via media query;
+ * SVG <animate> / <animateMotion> elements need JS to opt out and
+ * this round wires that via the useReducedMotion hook. */
+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({ reduce, layout }) {
+  const ctx = await browser.newContext({
+    viewport: { width: 1280, height: 1600 },
+    reducedMotion: reduce ? 'reduce' : 'no-preference',
+  });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript((lay) => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', lay);
+      localStorage.setItem('anet-topo-view', JSON.stringify({ zoom: 1, x: 0, y: 0 }));
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, layout);
+  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';
+    // Include a 'working' status so the working pulse path renders.
+    const sessions = [
+      { alias: 'wkr', status: 'working', network_id: nid, project_dir: null,
+        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+      { alias: 'idl', 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 } });
+  });
+  // Inject a tiny message so a flow link + particle render.
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+    { from_alias: 'wkr', to_alias: 'idl', content: 'hi', created_at: fresh },
+  ] } }));
+  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 === 2, { timeout: 30000 });
+  await page.waitForTimeout(600);
+  // Click a node so the click ripple is invoked (it should NOT render under reduced motion).
+  await page.locator('g[data-node="wkr"]').click().catch(() => {});
+  await page.waitForTimeout(120);
+  const counts = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return {
+      animate: svg.querySelectorAll('animate').length,
+      animateMotion: svg.querySelectorAll('animateMotion').length,
+    };
+  });
+  await ctx.close();
+  return counts;
+}
+
+// Baseline (no reduce) — many SMIL elements expected.
+const normalRing = await probe({ reduce: false, layout: 'ring' });
+// Reduced motion — every SMIL element should be gone.
+const reducedRing = await probe({ reduce: true, layout: 'ring' });
+const reducedGrid = await probe({ reduce: true, layout: 'grid' });
+
+await browser.close();
+const results = {
+  baselineHasAnimations: normalRing.animate + normalRing.animateMotion > 0,
+  reducedRingDropsAll: reducedRing.animate === 0 && reducedRing.animateMotion === 0,
+  reducedGridDropsAll: reducedGrid.animate === 0 && reducedGrid.animateMotion === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} reduced motion:`, JSON.stringify(results),
+  `\n  normalRing=`, normalRing, `\n  reducedRing=`, reducedRing, `\n  reducedGrid=`, reducedGrid);
+process.exit(ok ? 0 : 1);

package/scripts/topo-tier-ring-test.mjs

@@ -0,0 +1,69 @@
+/* Round 54 verification: tier-radius guide rings render at the active
+ * tier radii only, picked from the online node count.
+ *  - N ≤ 8  → 1 ring at r=220
+ *  - 9-14   → 2 rings at r=175 and r=260
+ *  - N > 14 → 3 rings at r=145, 215, 285
+ *  - Grid layout has NO tier rings (they're ring-only).
+ * Identified via the `data-tier-ring` attribute the implementation
+ * stamps on each guide circle. */
+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(layout, count) {
+  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((layout) => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', layout);
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, layout);
+  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 = Array.from({ length: count }).map((_, i) => ({
+      alias: `n${i.toString().padStart(2, '0')}`,
+      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(c => document.querySelectorAll('g[data-node]').length === c, count, { timeout: 30000 });
+  await page.waitForTimeout(400);
+  const radii = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return [...svg.querySelectorAll('circle[data-tier-ring]')]
+      .map(c => +c.getAttribute('data-tier-ring'))
+      .sort((a, b) => a - b);
+  });
+  await ctx.close();
+  return radii;
+}
+
+const single = await probe('ring', 6);
+const dual = await probe('ring', 12);
+const triple = await probe('ring', 22);
+const grid = await probe('grid', 6);
+
+await browser.close();
+const eq = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+const results = {
+  singleHas220: eq(single, [220]),
+  dualHas175And260: eq(dual, [175, 260]),
+  tripleHas145_215_285: eq(triple, [145, 215, 285]),
+  gridHasNoTierRings: eq(grid, []),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} tier rings:`, JSON.stringify(results),
+  `\n  single=${JSON.stringify(single)} dual=${JSON.stringify(dual)} triple=${JSON.stringify(triple)} grid=${JSON.stringify(grid)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-tier-stagger-test.mjs

@@ -0,0 +1,89 @@
+/* Round 72 verification: ring-layout first-paint stagger is tier-radial
+ * (inner ring → outer ring → offline ring), instead of R9's pure
+ * clockwise nodeIdx walk. Grid mode keeps R9 unchanged.
+ *
+ *  - Mount 20 sessions in ring layout → triple-tier (r1=145 / r2=215 /
+ *    r3=285). data-tier-idx reflects 0/1/2 (offline=3).
+ *  - For ring: every tier-2 node's animationDelay is >= every tier-0
+ *    node's animationDelay (strict tier ordering).
+ *  - For grid: every node has data-tier-idx="-1" and the delay falls
+ *    on R9's `nodeIdx * 25` schedule (max 600ms tail).
+ */
+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(layout, count) {
+  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((layout) => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', layout);
+      sessionStorage.setItem('anet_v3_auth', '1');
+      sessionStorage.removeItem('anet-topo-pinned-status');
+      sessionStorage.removeItem('anet-topo-pinned-group');
+    } catch {}
+  }, layout);
+  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 = Array.from({ length: count }).map((_, i) => ({
+      alias: `n${i.toString().padStart(2, '0')}`,
+      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(c => document.querySelectorAll('g[data-node]').length === c, count, { timeout: 30000 });
+  await page.waitForTimeout(600);
+  const rows = await page.evaluate(() => {
+    return [...document.querySelectorAll('g[data-node]')].map(g => ({
+      alias: g.getAttribute('data-node'),
+      tier:  g.getAttribute('data-tier-idx'),
+      delay: g.style.animationDelay,
+    }));
+  });
+  await ctx.close();
+  return rows;
+}
+
+const ringRows = await probe('ring', 20);
+const gridRows = await probe('grid', 6);
+
+await browser.close();
+
+const ms = (s) => parseFloat((s || '0ms').replace('ms', ''));
+const tier0 = ringRows.filter(r => r.tier === '0').map(r => ms(r.delay));
+const tier1 = ringRows.filter(r => r.tier === '1').map(r => ms(r.delay));
+const tier2 = ringRows.filter(r => r.tier === '2').map(r => ms(r.delay));
+
+const maxTier0 = Math.max(...(tier0.length ? tier0 : [0]));
+const minTier1 = Math.min(...(tier1.length ? tier1 : [Infinity]));
+const minTier2 = Math.min(...(tier2.length ? tier2 : [Infinity]));
+const maxTier1 = Math.max(...(tier1.length ? tier1 : [0]));
+
+const results = {
+  ring_tier0_present: tier0.length > 0,
+  ring_tier1_present: tier1.length > 0,
+  ring_tier2_present: tier2.length > 0,
+  ring_tier1_after_tier0: minTier1 > maxTier0,   // every t1 delay > every t0 delay
+  ring_tier2_after_tier1: minTier2 > maxTier1,
+  grid_allTierMinus1:    gridRows.every(r => r.tier === '-1'),
+  grid_followsR9:        gridRows.every((r, i) => ms(r.delay) === Math.min(i, 24) * 25),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} tier stagger:`, JSON.stringify(results),
+  `\n  ring tier0 delays=`, tier0,
+  `\n  ring tier1 delays=`, tier1,
+  `\n  ring tier2 delays=`, tier2,
+  `\n  grid delays=`,       gridRows.map(r => r.delay));
+process.exit(ok ? 0 : 1);