@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

package/scripts/topo-statusbar-chips-self-hover-test.mjs

@@ -0,0 +1,177 @@
+/* Round 201 verification: the chip-row "N working" / "N online" chips
+ * adopt deeper versions of their own identity colour on hover,
+ * mirroring R193 active-links chip pattern.
+ *
+ * Pre-R201 hover working chip → R55 canvas dim + chip-row highlight,
+ * but chip itself stayed at bg-{color}-500/10 — cause silent, effect
+ * loud. R201 deepens 10→15 bg and 20→30 border on hover (only when
+ * the chip has a target count > 0). The inline transition list is
+ * extended to cover background-color + border-color so the swap
+ * eases instead of snapping (Tailwind transition-colors on the
+ * className alone would be overridden by the existing R180 inline
+ * box-shadow transition).
+ *
+ * Test (cyber dark, 4 working sessions):
+ *   1. Working chip: clickable='true', className has hover:bg-green-500/15
+ *      + hover:border-green-500/30, transition includes 'background-color'
+ *      + 'border-color' (both 200ms), inline still has 'box-shadow 150ms'.
+ *   2. Online chip: same shape with cyan hue.
+ *   3. Hover the working chip — wait past 220ms → computed bg
+ *      shifts to a more-saturated/darker green (RGB-or-OKLab signal).
+ *   4. Move away — bg returns to idle (with margin past 220ms).
+ *   5. The chip's R55 canvas-effect setHoveredStatus still fires —
+ *      verified via hoveredStatus change reflected on the working
+ *      legend row's data-legend-row-lifted attribute.
+ */
+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: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+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.waitForSelector('[data-working-chip]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probeChip = async (selector) => page.evaluate((sel) => {
+  const el = document.querySelector(sel);
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    className:   el.getAttribute('class') || '',
+    clickable:   el.getAttribute('data-working-chip-clickable') ||
+                 el.getAttribute('data-online-chip-clickable'),
+    bg:          cs.backgroundColor,
+    borderColor: cs.borderTopColor,
+    transition:  el.style.transition,
+  };
+}, selector);
+
+const idleWorking = await probeChip('[data-working-chip]');
+const idleOnline  = await probeChip('[data-online-chip]');
+
+await page.hover('[data-working-chip]');
+await page.waitForTimeout(250);
+const hoverWorking = await probeChip('[data-working-chip]');
+
+// Confirm R55 canvas effect still fires — hoveredStatus='working'
+// lifts the legend working row.
+const workingRowLifted = await page.evaluate(() =>
+  document.querySelector('[data-legend-status="working"]')
+    ?.getAttribute('data-legend-row-lifted'));
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(280);
+const settledWorking = await probeChip('[data-working-chip]');
+
+await page.hover('[data-online-chip]');
+await page.waitForTimeout(250);
+const hoverOnline = await probeChip('[data-online-chip]');
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(280);
+const settledOnline = await probeChip('[data-online-chip]');
+
+await browser.close();
+
+// Tailwind 4 emits oklab/oklch / color-mix forms. Just check the bg
+// string actually differs idle vs hover, and a brief parser confirms
+// the channel that should grow (green for working, blue/green for cyan).
+// Parse colors including alpha. R201's Tailwind /10 → /15 emits same
+// OKLab L/a/b with stepped-up alpha (0.1 → 0.15); R193's gray→cyan
+// pattern emits a different hue at any alpha. Both are "more saturated
+// against the canvas" from the user's POV. Capture alpha and treat
+// alpha-increase as a valid saturation signal alongside chroma growth.
+function parseColor(s) {
+  if (!s) return null;
+  let m = s.match(/rgba?\(\s*(\d+)\s*,?\s*(\d+)\s*,?\s*(\d+)(?:\s*[,/]\s*([\d.]+))?/);
+  if (m) return { kind: 'rgb', r: +m[1], g: +m[2], b: +m[3], a: m[4] != null ? +m[4] : 1 };
+  m = s.match(/oklab\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)(?:\s*\/\s*([\d.]+))?/);
+  if (m) return { kind: 'oklab', L: +m[1], a: +m[2], b: +m[3], alpha: m[4] != null ? +m[4] : 1 };
+  m = s.match(/oklch\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)(?:\s*\/\s*([\d.]+))?/);
+  if (m) return { kind: 'oklch', L: +m[1], C: +m[2], h: +m[3], alpha: m[4] != null ? +m[4] : 1 };
+  return null;
+}
+
+// "More saturated against the canvas" = either chroma/hue distance
+// from gray grew OR alpha grew (Tailwind /10 → /15 deepens by alpha).
+const moreSaturated = (idle, hov) => {
+  if (!idle || !hov) return false;
+  if (idle.kind === 'rgb' && hov.kind === 'rgb') {
+    const chromaIdle = Math.max(idle.r, idle.g, idle.b) - Math.min(idle.r, idle.g, idle.b);
+    const chromaHov  = Math.max(hov.r, hov.g, hov.b) - Math.min(hov.r, hov.g, hov.b);
+    return chromaHov > chromaIdle || hov.a > idle.a + 0.01;
+  }
+  if (idle.kind === 'oklab' && hov.kind === 'oklab') {
+    const dIdle = Math.hypot(idle.a, idle.b);
+    const dHov  = Math.hypot(hov.a, hov.b);
+    return dHov > dIdle + 0.005 || hov.alpha > idle.alpha + 0.01;
+  }
+  if (idle.kind === 'oklch' && hov.kind === 'oklch') {
+    return hov.C > idle.C + 0.005 || hov.alpha > idle.alpha + 0.01;
+  }
+  return false;
+};
+
+const idleWorkingC = parseColor(idleWorking?.bg);
+const hoverWorkingC = parseColor(hoverWorking?.bg);
+const idleOnlineC  = parseColor(idleOnline?.bg);
+const hoverOnlineC = parseColor(hoverOnline?.bg);
+
+const results = {
+  working_clickable:                   idleWorking?.clickable === 'true',
+  working_className_has_hover:         idleWorking?.className.includes('hover:bg-green-500/15')
+                                       && idleWorking?.className.includes('hover:border-green-500/30'),
+  working_transition_includes_bg:      /background-color\s+(?:200ms|0\.2s)/.test(idleWorking?.transition || ''),
+  working_transition_includes_border:  /border-color\s+(?:200ms|0\.2s)/.test(idleWorking?.transition || ''),
+  working_transition_keeps_boxshadow:  /box-shadow\s+(?:150ms|0\.15s)/.test(idleWorking?.transition || ''),
+  working_hover_bg_changed:            idleWorking?.bg !== hoverWorking?.bg,
+  working_hover_more_saturated:        moreSaturated(idleWorkingC, hoverWorkingC),
+  working_settles_back:                settledWorking?.bg === idleWorking?.bg,
+  // R55 canvas-effect still fires from the chip — hovering the
+  // working chip lifts the legend working row.
+  working_canvas_effect_fires:         workingRowLifted === 'true',
+
+  online_clickable:                    idleOnline?.clickable === 'true',
+  online_className_has_hover:          idleOnline?.className.includes('hover:bg-cyan-500/15')
+                                       && idleOnline?.className.includes('hover:border-cyan-500/30'),
+  online_transition_includes_bg:       /background-color\s+(?:200ms|0\.2s)/.test(idleOnline?.transition || ''),
+  online_transition_includes_border:   /border-color\s+(?:200ms|0\.2s)/.test(idleOnline?.transition || ''),
+  online_hover_bg_changed:             idleOnline?.bg !== hoverOnline?.bg,
+  online_hover_more_saturated:         moreSaturated(idleOnlineC, hoverOnlineC),
+  online_settles_back:                 settledOnline?.bg === idleOnline?.bg,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-bar chips self-hover:`, JSON.stringify(results),
+  `\n  idleWorking:`,    idleWorking,
+  `\n  hoverWorking:`,   hoverWorking,
+  `\n  settledWorking:`, settledWorking,
+  `\n  idleOnline:`,     idleOnline,
+  `\n  hoverOnline:`,    hoverOnline,
+  `\n  settledOnline:`,  settledOnline);
+process.exit(ok ? 0 : 1);

package/scripts/topo-svg-focus-test.mjs

@@ -0,0 +1,112 @@
+/* Round 156 verification: SVG <g> interactives gain
+ * `.anet-topo-svg-focus` for keyboard focus outline.
+ *
+ * Mirrors R155's chip-row treatment at the SVG scope. 6 surfaces:
+ *   data-node                       (R151 node body)
+ *   data-group-label-hit            (R63 group label)
+ *   data-edge-count-badge           (R121 edge badge)
+ *   data-recent-row                 (R116 recent-signal row)
+ *   data-recent-panel-more-nav      (R133 "+N more" footer)
+ *   data-legend-status              (R61 legend row)
+ *
+ * Class `.anet-topo-svg-focus:focus-visible` paints outline 2px
+ * cyan-300 (#67e8f9) with 2px outline-offset. Browser default
+ * focus ring on SVG is hard to spot against the dashboard
+ * canvas; explicit cyan matches the legendAccent palette.
+ *
+ * Test: every SVG interactive surface carries the class.
+ */
+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: 1600, 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');
+    // grid layout to surface group labels
+    localStorage.setItem('anet-topo-layout', 'grid');
+  } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('agents-a1', 'working'), mk('agents-a2', 'working'),
+    mk('infra-b1',  'working'),
+  ] } });
+});
+
+const now = Date.now();
+// Edge midpoint count badge (R100) only renders when link.count >= 3.
+// Pair agents-a1 → agents-a2 gets 4 msgs to clear the threshold; add 4
+// other singletons so flowLinks.length = 5 → R128 "+ 2 more flows"
+// footer also renders.
+const msgs = [];
+for (let i = 0; i < 4; i++) {
+  msgs.push({
+    id: `a2a${i}`, from_alias: 'agents-a1', to_alias: 'agents-a2', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (10000 + i * 500)).toISOString(),
+  });
+}
+msgs.push({ id: 'm1', from_alias: 'agents-a2', to_alias: 'infra-b1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 11000).toISOString() });
+msgs.push({ id: 'm2', from_alias: 'infra-b1', to_alias: 'agents-a1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 12000).toISOString() });
+msgs.push({ id: 'm3', from_alias: 'agents-a1', to_alias: 'infra-b1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 13000).toISOString() });
+msgs.push({ id: 'm4', from_alias: 'agents-a2', to_alias: 'agents-a1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 14000).toISOString() });
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+await page.waitForSelector('[data-recent-row]', { timeout: 10000 });
+await page.waitForSelector('[data-recent-panel-more-nav]', { timeout: 10000 });
+await page.waitForSelector('[data-edge-count-badge]', { timeout: 10000 });
+await page.waitForSelector('[data-group-label-hit]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const out = await page.evaluate(() => {
+  const has = (sel) => {
+    const el = document.querySelector(sel);
+    return el && (el.getAttribute('class') || '').includes('anet-topo-svg-focus');
+  };
+  return {
+    nodeBody:           has('g[data-node]'),
+    groupLabel:         has('[data-group-label-hit]'),
+    edgeCountBadge:     has('[data-edge-count-badge]'),
+    recentRow:          has('[data-recent-row]'),
+    recentPanelMoreNav: has('[data-recent-panel-more-nav]'),
+    legendStatusRow:    has('[data-legend-status="working"]'),
+  };
+});
+
+await browser.close();
+
+const results = {
+  nodeBody_focus:           out.nodeBody === true,
+  groupLabel_focus:         out.groupLabel === true,
+  edgeCountBadge_focus:     out.edgeCountBadge === true,
+  recentRow_focus:          out.recentRow === true,
+  recentPanelMoreNav_focus: out.recentPanelMoreNav === true,
+  legendStatusRow_focus:    out.legendStatusRow === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} SVG focus class:`, JSON.stringify(results),
+  `\n  raw=`, out);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,94 @@
+/* Round 146 verification: R45 radar sweep rotation rate buckets on
+ * workingCount, completing the 5-layer busyness-driven motion family:
+ *
+ *   R84  hub grounding-halo breath  — 4 / 3.2 / 2.7 / 2.4 s
+ *   R131 outer-ring orbit period    — 16 / 14 / 12 / 10 s
+ *   R132 groupbox marching ants     — 14 / 12 / 10 / 8 s  (grid only)
+ *   R145 idle-spoke flow rate       — 2.8 / 2.4 / 2.0 / 1.6 s (ring only)
+ *   R146 radar sweep rotation       — 8 / 6 / 4 / 3 s  (both layouts)
+ *
+ * Shared R84 thresholds (0 / 1-2 / 3-5 / 6+) drive every layer. The
+ * sweep is the only layer visible in BOTH layouts and ties the family
+ * together at the canvas-wide scope.
+ *
+ * R45 baseline 6s sits at bucket 1 — preserved when workingCount in
+ * [1, 2] so existing demos and screenshots stay identical.
+ */
+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.waitForSelector('.anet-topo-sweep', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const g = document.querySelector('.anet-topo-sweep');
+    return {
+      bucket: g?.getAttribute('data-topo-sweep-bucket'),
+      dur:    g?.getAttribute('data-topo-sweep-dur'),
+      cssDur: g ? getComputedStyle(g).getPropertyValue('animation-duration').trim() : null,
+    };
+  });
+  await browser.close();
+  return out;
+}
+
+const b0 = await probe(0, 4);  // 0 working → bucket 0 (8s)
+const b1 = await probe(2, 4);  // 2 working → bucket 1 (6s, R45 baseline)
+const b2 = await probe(4, 5);  // 4 working → bucket 2 (4s)
+const b3 = await probe(7, 8);  // 7 working → bucket 3 (3s)
+
+const consistent = (probe, bucket, dur) =>
+  probe.bucket === String(bucket) && probe.dur === String(dur) && probe.cssDur === `${dur}s`;
+
+const results = {
+  b0_bucket0_8s:   consistent(b0, 0, 8),
+  b1_bucket1_6s:   consistent(b1, 1, 6),
+  b2_bucket2_4s:   consistent(b2, 2, 4),
+  b3_bucket3_3s:   consistent(b3, 3, 3),
+  // dur strictly decreases as busy climbs
+  dur_monotonic:
+    Number(b0.dur) > Number(b1.dur) &&
+    Number(b1.dur) > Number(b2.dur) &&
+    Number(b2.dur) > Number(b3.dur),
+  // R45 baseline preservation: bucket 1 still 6s
+  baseline_preserved: b1.dur === '6',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} sweep 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-tabular-nums-sweep-test.mjs

@@ -0,0 +1,93 @@
+/* Round 225 verification: info-density tabular-nums sweep across
+ * the three remaining digit-bearing texts in the TopoGraph after
+ * R224's edge badge:
+ *   1) Hub center digit       (data-topo-hub-working-count)
+ *   2) Recent panel header    (data-recent-panel-count tspan)
+ *   3) Recent row count       (data-recent-row-count tspan)
+ *
+ * Pre-R225 each suffered the same monospace-digit jitter at the
+ * 9 → 10 boundary (the digit-vs-control glyph width variance is
+ * non-zero even in mono fonts; textAnchor='middle' or trailing
+ * text columns visibly shift on the boundary).
+ *
+ * Verification: getComputedStyle().fontVariantNumeric contains
+ * 'tabular-nums' on each of the three. Single populated scenario
+ * (4 working agents + 12-msg hot flow) drives all three at once.
+ */
+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'),
+  ] } });
+});
+const now = Date.now();
+const msgs = [];
+for (let i = 0; i < 12; i++) {
+  msgs.push({
+    id: `m${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (1000 + i * 50)).toISOString(),
+  });
+}
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: msgs } }));
+await ctx.route('**/api/hub/tasks*', (r2) => r2.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-recent-row-count]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(400);
+
+const out = await page.evaluate(() => {
+  const fvn = (el) => el ? getComputedStyle(el).fontVariantNumeric : null;
+  const text = (el) => el?.textContent?.trim() || null;
+  const hubDigit  = document.querySelector('[data-topo-hub-working-count]');
+  const panelCnt  = document.querySelector('[data-recent-panel-count]');
+  const rowCnt    = document.querySelector('[data-recent-row-count]');
+  return {
+    hub:   { found: !!hubDigit, fvn: fvn(hubDigit),  text: text(hubDigit),
+             working: hubDigit?.getAttribute('data-topo-hub-working-count') },
+    panel: { found: !!panelCnt, fvn: fvn(panelCnt),  text: text(panelCnt) },
+    row:   { found: !!rowCnt,   fvn: fvn(rowCnt),    text: text(rowCnt) },
+  };
+});
+await browser.close();
+
+const hasTab = (s) => /tabular-nums/.test(s || '');
+const results = {
+  hub_found:         out.hub.found,
+  hub_tabular:       hasTab(out.hub.fvn),
+  hub_text_present:  /^\d+$/.test(out.hub.text || ''),
+  hub_text_equals_4: out.hub.text === '4',
+
+  panel_found:       out.panel.found,
+  panel_tabular:     hasTab(out.panel.fvn),
+  panel_text_flows:  /^\d+\s+flows?$/.test(out.panel.text || ''),
+
+  row_found:         out.row.found,
+  row_tabular:       hasTab(out.row.fvn),
+  row_text_equals_12: out.row.text === '12',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} tabular-nums sweep:`, JSON.stringify(results),
+  '\n  hub:  ', out.hub,
+  '\n  panel:', out.panel,
+  '\n  row:  ', out.row);
+process.exit(ok ? 0 : 1);

package/scripts/topo-tier-guide-dashes-test.mjs

@@ -0,0 +1,86 @@
+/* Round 303 verification: tier guide ring strokeDasharray tightens
+ * from "2 8" → "2 6". Same 2px dash; 8px gap → 6px gap so dashes
+ * read closer together, giving tier-guide rings clearer continuous-
+ * ring presence after R290/R291 cleared surrounding backdrop noise.
+ *
+ * Contract:
+ *   - All [data-tier-ring] elements have stroke-dasharray '2 6'.
+ *   - strokeWidth still 0.7 (regression).
+ *   - At least one tier ring rendered with the test fixture (4-node
+ *     working fleet → single-tier layout 220 fits).
+ *   - R302 empty-hint ls=0.2 + R301 panel titles ls=0.3 + R300 kicker
+ *     fw=500 + R294 pulse absent intact.
+ */
+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, model) => ({
+    alias, status: 'working', model, runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // 4 working nodes → single-tier ring layout.
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'claude-opus-4'),
+    mk('beta',  'gpt-4o'),
+    mk('gamma', 'claude-sonnet-4'),
+    mk('delta', 'gpt-4'),
+  ] } });
+});
+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.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const tierRings = [...document.querySelectorAll('[data-tier-ring]')];
+  const samples = tierRings.map(t => ({
+    r:           t.getAttribute('data-tier-ring'),
+    dasharray:   t.getAttribute('stroke-dasharray'),
+    strokeWidth: t.getAttribute('stroke-width'),
+    occupancy:   t.getAttribute('data-tier-occupancy'),
+  }));
+  const empty = document.querySelector('[data-recent-signal-empty]');
+  const recentTitle = document.querySelector('[data-recent-panel-title]');
+  const legendTitle = document.querySelector('[data-legend-panel-title]');
+  const kicker = document.querySelector('[data-topo-section-kicker]');
+  return {
+    samples,
+    emptyLs:       empty?.getAttribute('letter-spacing') ?? null,
+    recentTitleLs: recentTitle?.getAttribute('letter-spacing') ?? null,
+    legendTitleLs: legendTitle?.getAttribute('letter-spacing') ?? null,
+    kickerFw:      kicker ? getComputedStyle(kicker).fontWeight : null,
+    pulseCount:    document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const results = {
+  tier_rings_rendered:     probe.samples.length >= 1,
+  all_dasharray_2_6:       probe.samples.every(s => s.dasharray === '2 6'),
+  all_stroke_width_0_7:    probe.samples.every(s => s.strokeWidth === '0.7'),
+  r302_empty_hint_ls_0_2:  probe.emptyLs === '0.2',
+  r301_recent_title_ls:    probe.recentTitleLs === '0.3',
+  r301_legend_title_ls:    probe.legendTitleLs === '0.3',
+  r300_kicker_fw_500:      String(probe.kickerFw) === '500',
+  r294_pulse_absent:       probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} tier guide dashes:`, JSON.stringify(results),
+  '\n  tier rings sampled:', probe.samples);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,107 @@
+/* Round 174 verification: tier guide rings (ring layout) fade-in
+ * alongside R9/R172/R173 first-paint wave.
+ *
+ * Pre-R174 the structural scaffolding for ring layout — R54
+ * dashed concentric guide rings — appeared instantly while
+ * nodes inside eased in via R9/R72. Closes the symmetry with
+ * R173 group boxes (grid layout's structural frame).
+ *
+ * R174 wraps each tier ring <circle> in:
+ *   className="anet-fade-in"
+ *   style.animationDelay: tierIdx × 60ms (cap 8)
+ *   transition list grows opacity 250ms ease-out
+ *   data-tier-fade-delay={...}
+ *
+ * Test:
+ *   1. Force ring layout
+ *   2. Mock 16 sessions → triggers triple-tier render (>14)
+ *   3. Probe all [data-tier-ring] circles
+ *   4. Each has .anet-fade-in className + correct fade-delay
+ *   5. Delays strictly increase by 60ms
+ */
+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';
+  // 16 sessions → R98 triple-tier (threshold > 14)
+  const sessions = [];
+  for (let i = 0; i < 16; i++) {
+    sessions.push({
+      alias: `n${i}`,
+      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 } });
+});
+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 === 16, { timeout: 30000 });
+await page.waitForSelector('[data-tier-ring]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const rings = [...document.querySelectorAll('[data-tier-ring]')];
+  return rings.map(r => ({
+    radius:         parseFloat(r.getAttribute('data-tier-ring') || ''),
+    occupancy:      parseFloat(r.getAttribute('data-tier-occupancy') || ''),
+    hasFadeClass:   (r.getAttribute('class') || '').includes('anet-fade-in'),
+    fadeDelayAttr:  parseFloat(r.getAttribute('data-tier-fade-delay') || ''),
+    animationDelay: r.style.animationDelay || getComputedStyle(r).animationDelay,
+    transition:     r.style.transition || getComputedStyle(r).transition,
+  }));
+});
+
+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 delays = probe.map(p => parseDelay(p.animationDelay));
+
+const expectedDelays = probe.map((_, i) => Math.min(i, 8) * 60);
+
+const results = {
+  three_tiers_found:        probe.length === 3,
+  all_have_fade_class:      probe.every(p => p.hasFadeClass),
+  all_have_opacity_in_transition: probe.every(p =>
+    (p.transition || '').includes('opacity')),
+  delay_attrs_match:        probe.every((p, i) => p.fadeDelayAttr === expectedDelays[i]),
+  delays_match:             delays.every((d, i) => Math.abs(d - expectedDelays[i]) < 0.5),
+  delays_strictly_increase: delays[0] < delays[1] && delays[1] < delays[2],
+  first_delay_0ms:          delays[0] === 0,
+  third_delay_120ms:        delays[2] === 120,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} tier-ring fade-in:`, JSON.stringify(results),
+  `\n  rings =`, probe,
+  `\n  delays (ms) =`, delays,
+  `\n  expected =`, expectedDelays);
+process.exit(ok ? 0 : 1);