@sleep2agi/agent-network-dashboard 0.4.6-preview.11 → 0.4.6-preview.111

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-status-chip-hover-test.mjs

@@ -0,0 +1,101 @@
+/* Round 79 verification: header working + online count chips become
+ * hover affordances (sister to R77 active-links chip).
+ *  - Hover "N working" → setHoveredStatus('working') → idle + offline
+ *    nodes dim, working stays bright. Same outcome as R55 legend row
+ *    hover, just from the chip surface.
+ *  - Hover "N online" with working present → same as above.
+ *  - Mouseleave restores baseline.
+ *
+ * Fleet: 1 working (wkr), 2 idle (idl1, idl2), 1 offline (off).
+ */
+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');
+    sessionStorage.removeItem('anet-topo-pinned-status');
+    sessionStorage.removeItem('anet-topo-pinned-group');
+  } 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();
+
+// Hover working chip
+await page.locator('[data-working-chip]').hover();
+await page.waitForTimeout(250);
+const onWorking = await opacities();
+
+// Move away
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterWorking = await opacities();
+
+// Hover online chip (working present → routes to 'working')
+await page.locator('[data-online-chip]').hover();
+await page.waitForTimeout(250);
+const onOnline = await opacities();
+
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterOnline = await opacities();
+
+await browser.close();
+
+const bright = (v) => v != null && v >= 0.55;
+const dim    = (v) => v != null && v < 0.4;
+const results = {
+  before_baseline:           bright(before.wkr) && bright(before.idl1) && bright(before.idl2),
+  working_keepsWkrBright:    bright(onWorking.wkr),
+  working_dimsIdle:          dim(onWorking.idl1) && dim(onWorking.idl2),
+  working_dimsOffline:       dim(onWorking.off),
+  workingLeave_restoresAll:  bright(afterWorking.wkr) && bright(afterWorking.idl1),
+  online_keepsWkrBright:     bright(onOnline.wkr),  // routes to working filter
+  online_dimsIdle:           dim(onOnline.idl1) && dim(onOnline.idl2),
+  onlineLeave_restoresAll:   bright(afterOnline.wkr) && bright(afterOnline.idl1),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-chip hover:`, JSON.stringify(results),
+  `\n  before=`,        before,
+  `\n  onWorking=`,     onWorking,
+  `\n  afterWorking=`,  afterWorking,
+  `\n  onOnline=`,      onOnline,
+  `\n  afterOnline=`,   afterOnline);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,87 @@
+/* Round 92 verification: tier-ring opacity reflects occupancy. R54
+ * drew the guide rings at a fixed opacity regardless of how many
+ * nodes lived on each tier. R92 buckets the count and scales
+ * opacity, so a crowded tier shouts and an empty tier disappears.
+ *
+ * Probe three fleet sizes: small (4 → 1 ring), medium (12 → 2 rings),
+ * large (18 → 3 rings). Assert bucket monotonicity (higher count =
+ * higher bucket = higher opacity) and that each rendered ring carries
+ * its occupancy + bucket data attributes.
+ */
+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 fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const probe = async (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(() => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', 'ring');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } 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 sessions = [];
+    for (let i = 0; i < count; i++) {
+      sessions.push({ alias: `n${i}`, status: '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,
+    count, { timeout: 30000 });
+  await page.waitForTimeout(500);
+
+  const rings = await page.evaluate(() => {
+    return [...document.querySelectorAll('[data-tier-ring]')].map(r => ({
+      radius:    r.getAttribute('data-tier-ring'),
+      occupancy: r.getAttribute('data-tier-occupancy'),
+      bucket:    r.getAttribute('data-tier-bucket'),
+      opacity:   +(r.getAttribute('opacity') || '0'),
+    })).sort((a, b) => +a.radius - +b.radius);
+  });
+  await ctx.close();
+  return rings;
+};
+
+const small  = await probe(4);    // 4 nodes → 1 ring, occupancy 4, bucket 1 (3-6)
+const medium = await probe(12);   // 12 nodes → 2 rings
+const large  = await probe(18);   // 18 nodes → 3 rings
+await browser.close();
+
+const occupancySum = (rings) => rings.reduce((acc, r) => acc + +r.occupancy, 0);
+
+const results = {
+  small_oneRing:        small.length === 1,
+  small_occupancy4:     small[0]?.occupancy === '4',
+  small_bucket1:        small[0]?.bucket === '1',
+  medium_twoRings:      medium.length === 2,
+  medium_occupancyMatchesFleet: occupancySum(medium) === 12,
+  large_threeRings:     large.length === 3,
+  large_occupancyMatchesFleet:  occupancySum(large) === 18,
+  // Higher bucket → higher opacity (monotonic ladder).
+  bucketLadder_monotonic: large.every(r => {
+    const b = +r.bucket;
+    // dark theme: bucket 0 → 0.32, 1 → 0.46, 2 → 0.62
+    const expected = [0.32, 0.46, 0.62][b];
+    return Math.abs(r.opacity - expected) < 0.01;
+  }),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} tier-ring occupancy:`, JSON.stringify(results),
+  `\n  small (4)=`,  small,
+  `\n  medium (12)=`, medium,
+  `\n  large (18)=`,  large);
+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-ring-tint-test.mjs

@@ -0,0 +1,110 @@
+/* Round 93 verification: tier rings tint to pal.legendAccent when
+ * any of pinnedStatus / pinnedGroup / pinnedVendor is active, and
+ * revert to the neutral pal.ringStroke when all three release.
+ *
+ * Drive pin state via the R69 CustomEvent for status (deterministic;
+ * same approach the R82 chip-pin-mirror test uses) and the vendor
+ * letter click for vendor. Verify data-tier-tinted toggles + stroke
+ * attribute differs from the neutral baseline.
+ */
+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');
+    sessionStorage.removeItem('anet-topo-pinned-status');
+    sessionStorage.removeItem('anet-topo-pinned-group');
+    sessionStorage.removeItem('anet-topo-pinned-vendor');
+  } 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';
+  // 4 nodes → single tier (≤8 threshold). Enough to have 1 ring to inspect.
+  const mk = (alias, model) => ({
+    alias, status: 'idle', model, runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  const sessions = [
+    mk('alpha', 'claude-opus-4'),
+    mk('beta',  'gpt-5'),
+    mk('gamma', 'claude-opus-4'),
+    mk('delta', 'gpt-5'),
+  ];
+  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(400);
+
+const ring = () => page.evaluate(() => {
+  const r = document.querySelector('[data-tier-ring]');
+  if (!r) return null;
+  return {
+    tinted: r.getAttribute('data-tier-tinted'),
+    stroke: r.getAttribute('stroke'),
+  };
+});
+
+const before = await ring();
+
+// Pin a status — tier ring should tint.
+await page.evaluate(() => {
+  sessionStorage.setItem('anet-topo-pinned-status', 'idle');
+  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: 'idle' } }));
+});
+await page.waitForTimeout(300);
+const afterStatusPin = await ring();
+
+// Clear via Esc — ring should revert.
+await page.keyboard.press('Escape');
+await page.waitForTimeout(250);
+const afterEscStatus = await ring();
+
+// Pin vendor — tier ring should tint again.
+await page.locator('[data-vendor-letter="A"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterVendorPin = await ring();
+
+// Clear via Esc — back to neutral.
+await page.keyboard.press('Escape');
+await page.waitForTimeout(250);
+const afterEscVendor = await ring();
+
+await browser.close();
+
+const results = {
+  before_neutral:       before?.tinted === 'false',
+  before_strokeSet:     typeof before?.stroke === 'string' && before.stroke.length > 0,
+  statusPin_tinted:     afterStatusPin?.tinted === 'true',
+  statusPin_strokeDiffers: afterStatusPin?.stroke !== before?.stroke,
+  escStatus_revertsTinted: afterEscStatus?.tinted === 'false',
+  escStatus_strokeMatchesBaseline: afterEscStatus?.stroke === before?.stroke,
+  vendorPin_tinted:     afterVendorPin?.tinted === 'true',
+  vendorPin_strokeDiffers: afterVendorPin?.stroke !== before?.stroke,
+  escVendor_revertsTinted: afterEscVendor?.tinted === 'false',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} tier-ring tint:`, JSON.stringify(results),
+  `\n  before=`,           before,
+  `\n  afterStatusPin=`,   afterStatusPin,
+  `\n  afterEscStatus=`,   afterEscStatus,
+  `\n  afterVendorPin=`,   afterVendorPin,
+  `\n  afterEscVendor=`,   afterEscVendor);
+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);

package/scripts/topo-tz-ghost-test.mjs

@@ -0,0 +1,69 @@
+/* Round 35 verification: SQL-style timestamps (CommHub format) parse as
+ * UTC regardless of the browser's local timezone. Reproduces the latent
+ * bug from Round 34 — a 30-min-old offline node would have been ghosted
+ * on a UTC+8 browser without parseHubTime. */
+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 });
+
+// SQL-style timestamp = ISO with the T replaced by space and Z stripped.
+// This is exactly what the CommHub returns (see /api/status probe).
+const sqlMin = (m) => {
+  const d = new Date(Date.now() - m * 60 * 1000);
+  return d.toISOString().replace('T', ' ').replace(/\.\d+Z$/, '');
+};
+
+async function probe(timezoneId) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 }, timezoneId });
+  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 = sqlMin(0.1);
+  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: 'live',  status: 'idle',    network_id: nid, project_dir: null,
+        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+      { alias: 'off30', status: 'offline', network_id: nid, project_dir: null,
+        created_at: fresh, updated_at: fresh, last_seen_at: sqlMin(30) },   // 30 min ago, SQL format
+      { alias: 'ghost', status: 'offline', network_id: nid, project_dir: null,
+        created_at: fresh, updated_at: fresh, last_seen_at: sqlMin(75) },   // 75 min ago — should ghost
+    ];
+    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(600);
+  const rendered = await page.$$eval('g[data-node]', els => els.map(e => e.getAttribute('data-node')));
+  await ctx.close();
+  return rendered;
+}
+
+const utc = await probe('UTC');
+const shanghai = await probe('Asia/Shanghai');     // UTC+8 — the failing case before Round 35
+const losAngeles = await probe('America/Los_Angeles'); // UTC-7/8 — the opposite skew
+await browser.close();
+
+const expectsLiveAndOff30 = list =>
+  list.includes('live') && list.includes('off30') && !list.includes('ghost');
+
+const results = {
+  utcRendersLiveAndOff30: expectsLiveAndOff30(utc),
+  shanghaiRendersLiveAndOff30: expectsLiveAndOff30(shanghai),
+  losAngelesRendersLiveAndOff30: expectsLiveAndOff30(losAngeles),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} TZ-safe ghost:`, JSON.stringify(results),
+  `\n  UTC=${JSON.stringify(utc)}\n  Asia/Shanghai=${JSON.stringify(shanghai)}\n  America/Los_Angeles=${JSON.stringify(losAngeles)}`);
+process.exit(ok ? 0 : 1);