@sleep2agi/agent-network-dashboard 0.4.6-preview.21 → 0.4.6-preview.210

package/scripts/topo-node-label-card-elevation-test.mjs

@@ -0,0 +1,157 @@
+/* Round 194 verification: node label card picks up drop-shadow
+ * elevation that intensifies on node hover, mirroring R135's panel
+ * hover-elevation but at per-node grain.
+ *
+ * Pre-R194 the card lifted 1.5 px on hover (R26) but had no shadow
+ * follow — the elevation gesture lacked physical weight. R194 adds
+ *   rest  : drop-shadow(0 1px 2px rgba(...,0.30 dark / 0.08 light))
+ *   hover : drop-shadow(0 4px 12px rgba(0,0,0,0.60) dark
+ *           / 0 3px 8px rgba(15,23,42,0.20) light)
+ * with transition: filter 220ms ease-out.
+ *
+ * Test (cyber/dark theme, 4 sessions = card mode):
+ *   1. data-node-label-card present + matches alias
+ *   2. Idle elevation attr = 'idle'
+ *   3. Idle filter style includes 'drop-shadow' (rest shadow on)
+ *   4. Idle blur radius is small (1-2 px range)
+ *   5. transition: filter 220ms ease-out
+ *   6. Hover the node — wait past 250ms
+ *   7. data-node-label-card-elevation flips to 'hover'
+ *   8. Hover filter has bigger blur (>= 8px) — drop-shadow strengthened
+ *   9. Other (non-hovered) cards stay 'idle'
+ *  10. Unhover — flips back to 'idle'
+ *  11. Filter transition string still present after settle
+ */
+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-node-label-card]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+// Probe idle state of alpha's label card
+const idleAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    alias:      el.getAttribute('data-node-label-card'),
+    elevation:  el.getAttribute('data-node-label-card-elevation'),
+    filter:     cs.filter,
+    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
+    inlineFilter: el.style.filter,
+  };
+});
+
+// Hover the alpha node's <g> wrapper
+await page.hover('g[data-node="alpha"]');
+await page.waitForTimeout(280);  // past 220ms transition
+
+const hoveredAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  const cs = getComputedStyle(el);
+  return {
+    elevation: el.getAttribute('data-node-label-card-elevation'),
+    filter:    cs.filter,
+    inlineFilter: el.style.filter,
+  };
+});
+
+// Probe non-hovered card (beta) stays idle
+const idleBeta = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="beta"]');
+  return {
+    elevation: el.getAttribute('data-node-label-card-elevation'),
+  };
+});
+
+// Move away, wait for transition back
+await page.mouse.move(0, 0);
+await page.waitForTimeout(280);
+
+const settledAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  const cs = getComputedStyle(el);
+  return {
+    elevation:  el.getAttribute('data-node-label-card-elevation'),
+    filter:     cs.filter,
+    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
+  };
+});
+
+await browser.close();
+
+// Parse blur radius out of drop-shadow(). Chrome's getComputedStyle
+// canonicalises into `drop-shadow(rgba(...) 0px Ypx BLURpx)` with the
+// color first — the standard write-order `drop-shadow(0 Ypx BLURpx
+// rgba(...))` is rearranged. So scan all numeric tokens inside the
+// drop-shadow() parens with rgba/hsla content stripped first; blur is
+// the 3rd numeric value.
+function parseShadowBlur(filterStr) {
+  if (!filterStr) return null;
+  const m = filterStr.match(/drop-shadow\(([\s\S]+)\)\s*$/);
+  if (!m) return null;
+  const stripped = m[1].replace(/(rgba?|hsla?)\([^)]*\)/g, '');
+  const nums = (stripped.match(/-?\d+(?:\.\d+)?/g) || []).map(Number);
+  return nums.length >= 3 ? Math.abs(nums[2]) : null;
+}
+const idleBlur = parseShadowBlur(idleAlpha?.filter);
+const hoverBlur = parseShadowBlur(hoveredAlpha?.filter);
+const settledBlur = parseShadowBlur(settledAlpha?.filter);
+
+const results = {
+  card_present:          !!idleAlpha,
+  alias_matches:         idleAlpha?.alias === 'alpha',
+  idle_elevation_attr:   idleAlpha?.elevation === 'idle',
+  idle_has_dropshadow:   (idleAlpha?.filter || '').includes('drop-shadow'),
+  idle_blur_small:       idleBlur !== null && idleBlur > 0 && idleBlur <= 3,
+  filter_transition:     idleAlpha?.transition.includes('filter') && idleAlpha?.transition.includes('0.22s'),
+
+  hover_elevation_attr:  hoveredAlpha?.elevation === 'hover',
+  hover_has_dropshadow:  (hoveredAlpha?.filter || '').includes('drop-shadow'),
+  hover_blur_larger:     hoverBlur !== null && hoverBlur >= 8,
+  hover_blur_grew:       idleBlur !== null && hoverBlur !== null && hoverBlur > idleBlur,
+  hover_filter_changed:  idleAlpha?.filter !== hoveredAlpha?.filter,
+
+  beta_stays_idle:       idleBeta?.elevation === 'idle',
+
+  settled_back_to_idle:  settledAlpha?.elevation === 'idle',
+  settled_blur_small:    settledBlur !== null && settledBlur <= 3,
+  settled_keeps_transition: settledAlpha?.transition.includes('filter'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node label card elevation:`, JSON.stringify(results),
+  `\n  idleAlpha:`,     idleAlpha,
+  `\n  hoveredAlpha:`,  hoveredAlpha,
+  `\n  idleBeta:`,      idleBeta,
+  `\n  settledAlpha:`,  settledAlpha,
+  `\n  blurs:`,         { idleBlur, hoverBlur, settledBlur });
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-stroke-transition-test.mjs

@@ -0,0 +1,103 @@
+/* Round 167 verification: node status-ring picks up stroke-width
+ * transition.
+ *
+ * Pre-R167 the node outer ring (cx,cy,r,fill,stroke + binary
+ * stroke-width 3/1.5 + dasharray) had transition-[fill,stroke]
+ * duration-300 — colors transitioned but stroke-width snapped
+ * when a session went working → offline. R167 adds stroke-width
+ * to the transition list (300ms ease-out), symmetric with R165
+ * (pressure-bar width) and R166 (edge stroke-width).
+ *
+ * Test:
+ *   1. Mock 2 working + 2 offline sessions
+ *   2. Probe each node's status ring (via data-node-status-ring)
+ *   3. Working ring: strokeWidth=3, transition includes
+ *      'stroke-width 300ms'
+ *   4. Offline ring: strokeWidth=1.5, dasharray='5 5',
+ *      transition includes 'stroke-width 300ms'
+ *   5. Both rings expose data-node-status-ring with the status
+ *      label
+ *
+ * The DOM attribute reflects the React-rendered value, not the
+ * CSS-interpolated value during transitions — so the R51
+ * overlap-test's stroke-width=3 / 1.5 selectors still 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'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+const stale = new Date(Date.now() - 10 * 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, last) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: last, updated_at: last, last_seen_at: last,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('w1', 'working', fresh), mk('w2', 'working', fresh),
+    mk('o1', 'offline', stale), mk('o2', 'offline', stale),
+  ] } });
+});
+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-node-status-ring]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const rings = [...document.querySelectorAll('[data-node-status-ring]')];
+  return rings.map(r => ({
+    label:       r.getAttribute('data-node-status-ring'),
+    strokeWidth: parseFloat(r.getAttribute('stroke-width')),
+    dasharray:   r.getAttribute('stroke-dasharray'),
+    inlineTransition: r.style.transition || '',
+    computedTransition: getComputedStyle(r).transition || '',
+  }));
+});
+
+await browser.close();
+
+const working = probe.filter(p => p.label === 'working');
+const offline = probe.filter(p => p.label === 'offline');
+
+const allHaveStrokeWidth = probe.every(p =>
+  p.inlineTransition.includes('stroke-width 300ms') ||
+  /stroke-width\s+0\.3s|stroke-width\s+300ms/.test(p.computedTransition));
+const allHaveFill = probe.every(p =>
+  p.inlineTransition.includes('fill 300ms') ||
+  /fill\s+0\.3s|fill\s+300ms/.test(p.computedTransition));
+const allHaveStroke = probe.every(p =>
+  p.inlineTransition.includes('stroke 300ms') ||
+  /[^-]stroke\s+0\.3s|[^-]stroke\s+300ms/.test(p.computedTransition));
+
+const results = {
+  four_rings_found:       probe.length === 4,
+  two_working_rings:      working.length === 2,
+  two_offline_rings:      offline.length === 2,
+  working_strokeWidth_3:  working.every(p => p.strokeWidth === 3),
+  offline_strokeWidth_15: offline.every(p => p.strokeWidth === 1.5),
+  working_no_dasharray:   working.every(p => p.dasharray === 'none' || !p.dasharray),
+  offline_dasharray_5_5:  offline.every(p => p.dasharray === '5 5'),
+  all_have_stroke_width_transition: allHaveStrokeWidth,
+  all_have_fill_transition:         allHaveFill,
+  all_have_stroke_transition:       allHaveStroke,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node status-ring transition:`, JSON.stringify(results),
+  `\n  rings=`, probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-title-peers-test.mjs

@@ -0,0 +1,107 @@
+/* Round 147 verification: node tooltip extends R98's flow summary
+ * with the actual sender / receiver alias breakdown. The R97 idiom
+ * — anywhere the UI shows "N" should hover-explain WHICH N — was
+ * applied to filter pills, group labels, vendor letters, pressure
+ * segments, recent-row, active-links chip. The node title was the
+ * last surface showing only aggregate counts ("12 in / 5 out");
+ * R147 adds peer lines.
+ *
+ * Fleet:
+ *   alpha — sends 3 msgs to beta, 5 to gamma, 2 to delta
+ *   beta  — sends 4 msgs to alpha, 1 to gamma
+ *   gamma — quiet (receiver only)
+ *   delta — quiet (receiver only)
+ *
+ * For alpha:
+ *   flowOut = 3 + 5 + 2 = 10
+ *   flowIn  = 4 (from beta)
+ *   senders ← beta (4)
+ *   receivers → beta (3), gamma (5), delta (2) — sorted by count desc:
+ *               gamma (5), beta (3), delta (2)
+ *
+ * Title should contain:
+ *   "flows: 4 in / 10 out"
+ *   "← from: beta (4)"
+ *   "→ to:   gamma (5), beta (3), delta (2)"  (sorted desc by count)
+ *
+ * Also verify a node with no flows (gamma will have 5 inbound from alpha
+ * and 1 from beta; let's pick delta which only has 2 inbound from alpha).
+ */
+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'); 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, 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('alpha', 'working'), mk('beta', 'working'),
+    mk('gamma', 'idle'),    mk('delta', 'idle'),
+  ] } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from, to, ageMs) => ({
+  id, from_alias: from, to_alias: to, content: 'hi',
+  network_id: 'default', created_at: new Date(now - ageMs).toISOString(),
+});
+const msgs = [];
+let id = 0;
+// alpha → beta (3), gamma (5), delta (2)
+for (let i = 0; i < 3; i++) msgs.push(mkMsg(`m${id++}`, 'alpha', 'beta',  10000 + id * 100));
+for (let i = 0; i < 5; i++) msgs.push(mkMsg(`m${id++}`, 'alpha', 'gamma', 10000 + id * 100));
+for (let i = 0; i < 2; i++) msgs.push(mkMsg(`m${id++}`, 'alpha', 'delta', 10000 + id * 100));
+// beta → alpha (4), gamma (1)
+for (let i = 0; i < 4; i++) msgs.push(mkMsg(`m${id++}`, 'beta',  'alpha', 10000 + id * 100));
+for (let i = 0; i < 1; i++) msgs.push(mkMsg(`m${id++}`, 'beta',  'gamma', 10000 + id * 100));
+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 === 4, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const readTitle = (alias) => page.evaluate((a) => {
+  const node = document.querySelector(`g[data-node="${a}"]`);
+  return node?.querySelector('title')?.textContent || '';
+}, alias);
+
+const alphaTitle = await readTitle('alpha');
+const deltaTitle = await readTitle('delta');
+
+await browser.close();
+
+const results = {
+  // alpha: flows aggregate
+  alpha_flowSummary:  alphaTitle.includes('flows: 4 in / 10 out'),
+  // alpha: senders line
+  alpha_sendersLine:  alphaTitle.includes('← from: beta (4)'),
+  // alpha: receivers line — must be sorted desc by count (gamma 5, beta 3, delta 2)
+  alpha_receiversOrder: alphaTitle.includes('→ to:   gamma (5), beta (3), delta (2)'),
+
+  // delta: receiver only, only inbound from alpha (2 msgs)
+  delta_flowSummary:  deltaTitle.includes('flows: 2 in / 0 out'),
+  delta_sendersLine:  deltaTitle.includes('← from: alpha (2)'),
+  delta_noReceivers:  !deltaTitle.includes('→ to:'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node title peers:`, JSON.stringify(results),
+  `\n  alpha title:\n${alphaTitle}`,
+  `\n  delta title:\n${deltaTitle}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-title-test.mjs

@@ -0,0 +1,101 @@
+/* Round 98 verification: node <title> tooltips now include status,
+ * group membership (when applicable), and per-node flow counts
+ * (inbound/outbound) alongside the existing identity/cwd/last-seen
+ * lines. Same info-density spirit as R97 pill tooltips — hover any
+ * node and the answer is right there.
+ *
+ * Fleet:
+ *   - alpha1 (working, claude) + alpha2 (idle, claude) → alpha group of 2
+ *   - solo (working, gpt-5) — no group (singleton)
+ *   - off1 (offline, claude) — has last_seen_at older
+ *
+ * Flows:
+ *   alpha1 → solo × 3
+ *   solo → alpha1 × 1
+ *   ⇒ alpha1: 1 in / 3 out; solo: 3 in / 1 out; alpha2/off1: no flows
+ */
+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'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+const stale = new Date(Date.now() - 20 * 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, model, ts) => ({
+    alias, status, model, runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: ts, updated_at: ts, last_seen_at: ts,
+  });
+  const sessions = [
+    mk('alpha1', 'working', 'claude-opus-4', fresh),
+    mk('alpha2', 'idle',    'claude-opus-4', fresh),
+    mk('solo',   'working', 'gpt-5',         fresh),
+    mk('off1',   'offline', 'claude-opus-4', stale),
+  ];
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from_alias, to_alias, ageMs) => ({
+  id, from_alias, to_alias, content: 'hi', network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  mkMsg('m1', 'alpha1', 'solo', 30 * 1000),
+  mkMsg('m2', 'alpha1', 'solo', 60 * 1000),
+  mkMsg('m3', 'alpha1', 'solo', 90 * 1000),
+  mkMsg('m4', 'solo', 'alpha1', 45 * 1000),
+] } }));
+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 titles = await page.evaluate(() => {
+  const out = {};
+  for (const alias of ['alpha1', 'alpha2', 'solo', 'off1']) {
+    const g = document.querySelector(`g[data-node="${alias}"]`);
+    out[alias] = g?.querySelector('title')?.textContent || '';
+  }
+  return out;
+});
+
+await browser.close();
+
+const results = {
+  // Status line is the heading.
+  alpha1_statusHeading:  /^alpha1 · working/m.test(titles.alpha1),
+  alpha2_statusHeading:  /^alpha2 · idle/m.test(titles.alpha2),
+  solo_statusHeading:    /^solo · working/m.test(titles.solo),
+  off1_statusHeading:    /^off1 · offline/m.test(titles.off1),
+  // Group line only on multi-member band.
+  alpha1_groupShown:     /group: alpha · 2/.test(titles.alpha1),
+  alpha2_groupShown:     /group: alpha · 2/.test(titles.alpha2),
+  solo_groupSkipped:    !/group:/.test(titles.solo),
+  // Flow counts on participating nodes only.
+  alpha1_flowsCorrect:   /flows: 1 in \/ 3 out/.test(titles.alpha1),
+  solo_flowsCorrect:     /flows: 3 in \/ 1 out/.test(titles.solo),
+  alpha2_noFlows:       !/flows:/.test(titles.alpha2),
+  off1_lastSeen:         /last seen:/.test(titles.off1),
+  // Identity line still present.
+  alpha1_hasIdentity:    /claude/i.test(titles.alpha1),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node titles:`, JSON.stringify(results),
+  `\n  alpha1:\n${titles.alpha1}`,
+  `\n  alpha2:\n${titles.alpha2}`,
+  `\n  solo:\n${titles.solo}`,
+  `\n  off1:\n${titles.off1}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-nodesize-active-hover-test.mjs

@@ -0,0 +1,109 @@
+/* Round 179 verification: nodeSize S/M/L active button picks up
+ * hover:bg-cyan-500/20, closing the inconsistency with R163
+ * layout-toggle and R178 fullscreen which already ship the
+ * cyan-500/20 hover step on the active variant.
+ *
+ * Three active-cyan chrome surfaces now share the same gesture:
+ *   R163 Ring/Grid layout toggle (chip-row)
+ *   R178 Fullscreen button (chrome BR)
+ *   R179 nodeSize S/M/L (chrome BR)              ← this round
+ *
+ * Test:
+ *   1. Default state: M is active (default nodeScale=0.84)
+ *   2. Active 'M' button:
+ *        className includes 'bg-cyan-500/15 text-cyan-300 hover:bg-cyan-500/20'
+ *   3. Inactive 'S' button:
+ *        className includes 'hover:bg-white/5'
+ *        className does NOT include 'bg-cyan-500/15'
+ *   4. Click 'S' → S becomes active
+ *   5. S's className now has cyan + cyan-500/20 hover, M doesn't
+ */
+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.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-chrome-nodesize="M"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = () => page.evaluate(() => {
+  const grab = (sel) => {
+    const el = document.querySelector(sel);
+    return el ? {
+      className: el.getAttribute('class') || '',
+      active:    el.getAttribute('data-topo-chrome-nodesize-active'),
+    } : null;
+  };
+  return {
+    S: grab('[data-topo-chrome-nodesize="S"]'),
+    M: grab('[data-topo-chrome-nodesize="M"]'),
+    L: grab('[data-topo-chrome-nodesize="L"]'),
+  };
+});
+
+const initial = await probe();
+
+// Click S → S becomes active
+await page.locator('[data-topo-chrome-nodesize="S"]').click();
+await page.waitForTimeout(450); // past R171 crossfade window
+const afterS = await probe();
+
+await browser.close();
+
+const results = {
+  // Initial: M default-active
+  M_initial_active:           initial.M?.active === 'true',
+  M_initial_has_cyan_bg:      initial.M?.className.includes('bg-cyan-500/15'),
+  M_initial_has_cyan_text:    initial.M?.className.includes('text-cyan-300'),
+  M_initial_has_cyan_hover:   initial.M?.className.includes('hover:bg-cyan-500/20'),
+
+  S_initial_inactive:         initial.S?.active === 'false',
+  S_initial_no_cyan_bg:       !initial.S?.className.includes('bg-cyan-500/15'),
+  S_initial_has_white_hover:  initial.S?.className.includes('hover:bg-white/5'),
+  S_initial_no_cyan_hover:    !initial.S?.className.includes('hover:bg-cyan-500/20'),
+
+  // After click S: S active, M inactive
+  S_after_click_active:       afterS.S?.active === 'true',
+  S_after_has_cyan_bg:        afterS.S?.className.includes('bg-cyan-500/15'),
+  S_after_has_cyan_hover:     afterS.S?.className.includes('hover:bg-cyan-500/20'),
+  S_after_no_white_hover:     !afterS.S?.className.includes('hover:bg-white/5'),
+
+  M_after_inactive:           afterS.M?.active === 'false',
+  M_after_no_cyan_bg:         !afterS.M?.className.includes('bg-cyan-500/15'),
+  M_after_no_cyan_hover:      !afterS.M?.className.includes('hover:bg-cyan-500/20'),
+  M_after_has_white_hover:    afterS.M?.className.includes('hover:bg-white/5'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} nodesize active hover:`, JSON.stringify(results),
+  `\n  initial =`, initial,
+  `\n  afterS  =`, afterS);
+process.exit(ok ? 0 : 1);