@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

package/scripts/topo-legend-row-labels-simplify-test.mjs

@@ -0,0 +1,80 @@
+/* Round 308 verification: continue R307 legend label 减法.
+ * 'working node' → 'working' (drops 'node' qualifier).
+ * 'online idle' → 'idle' (drops 'online' qualifier).
+ * Plus R307 'offline' (already simplified).
+ *
+ * After R307+R308 all three legend labels are just status words:
+ * working / idle / offline — 3-state list at 7 / 4 / 7 chars.
+ *
+ * Contract:
+ *   - [data-legend-row-label='working'] text === 'working'.
+ *   - [data-legend-row-label='idle']    text === 'idle'.
+ *   - [data-legend-row-label='offline'] text === 'offline' (R307).
+ *   - No labels contain ' node' or 'online ' substrings.
+ *   - R306 focus-ring-1 + R304 sub-hint ls=0.15 + 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, status) => ({
+    alias, status, model, 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', 'claude-opus-4', 'working'),
+    mk('beta',  'gpt-4o',        'idle'),
+    mk('gamma', 'claude-sonnet-4', 'offline'),
+  ] } });
+});
+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.waitForSelector('[data-legend-row-label="offline"]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const sel = (s) => document.querySelector(s);
+  const txt = (el) => (el?.textContent || '').trim();
+  const layoutRing = sel('[data-topo-chrome-layout="ring"]');
+  return {
+    workingText:   txt(sel('[data-legend-row-label="working"]')),
+    idleText:      txt(sel('[data-legend-row-label="idle"]')),
+    offlineText:   txt(sel('[data-legend-row-label="offline"]')),
+    layoutRingCls: layoutRing?.className ?? '',
+    subhintLs:     sel('[data-recent-signal-empty-hint]')?.getAttribute('letter-spacing') ?? null,
+    pulseCount:    document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const results = {
+  working_simplified:       probe.workingText === 'working',
+  idle_simplified:          probe.idleText === 'idle',
+  offline_kept_r307:        probe.offlineText === 'offline',
+  no_node_qualifier:        !/ node\b/i.test(probe.workingText),
+  no_online_qualifier:      !/online /i.test(probe.idleText),
+  r306_focus_ring_1_kept:   probe.layoutRingCls.includes('focus-visible:ring-1'),
+  r304_subhint_ls_0_15:     probe.subhintLs === '0.15',
+  r294_pulse_absent:        probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend rows simplified:`, JSON.stringify(results),
+  '\n  working:', JSON.stringify(probe.workingText),
+  '\n  idle:',    JSON.stringify(probe.idleText),
+  '\n  offline:', JSON.stringify(probe.offlineText));
+process.exit(ok ? 0 : 1);

package/scripts/topo-legend-row-pin-spacing-test.mjs

@@ -0,0 +1,124 @@
+/* Round 219 verification: legend row text gets letter-spacing pin
+ * signature 0px → 0.5px, mirroring R218 group label treatment.
+ * Pre-R219 hover and pin shared fill colour and were typographically
+ * identical at letter form.
+ *
+ * Test (cyber dark, 4 working sessions):
+ *   1. Three legend rows (working / idle / offline) render with
+ *      data-legend-row-label.
+ *   2. Idle: data-legend-row-label-pinned='false' on all rows,
+ *      computed letter-spacing ~ 0 (CSS resolves '0px' → 'normal').
+ *   3. Inline transition includes 'letter-spacing 150ms'.
+ *   4. Click the working legend row → that row becomes pinned.
+ *   5. Working row: pinned='true', letter-spacing ~ 0.5px.
+ *   6. Other rows (idle / offline) stay unpinned + 0 spacing.
+ *   7. Click pinned row again → unpin → back to 0 spacing.
+ *
+ * Same 'normal' vs '0px' CSS-equivalence parser as R218 (CSS
+ * resolves letter-spacing: 0px to keyword 'normal' in computed style).
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias) => ({
+    alias, status: 'working', model: 'claude-opus-4', runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: [] } }));
+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-legend-row-label]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = async () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-legend-row-label]')].map(el => {
+    const cs = getComputedStyle(el);
+    return {
+      key:         el.getAttribute('data-legend-row-label'),
+      pinned:      el.getAttribute('data-legend-row-label-pinned'),
+      spacing:     cs.letterSpacing,
+      transition:  el.style.transition,
+    };
+  });
+});
+
+const idle = await probe();
+
+// Click the working row to pin it. Use the row wrapper <g
+// data-legend-status="working"> to ensure the click hits the hit
+// area (the text itself has pointerEvents:'none' via the parent <g>).
+await page.click('[data-legend-status="working"]');
+await page.waitForTimeout(200);
+const pinned = await probe();
+
+await page.click('[data-legend-status="working"]');
+await page.waitForTimeout(200);
+const unpinned = await probe();
+
+await browser.close();
+
+// CSS resolves letter-spacing: 0px to 'normal' in computed style.
+// Accept both forms as "zero spacing".
+const near = (s, want, tol = 0.15) => {
+  if (want === 0 && (s === 'normal' || s === '0px' || s === '0' || !s)) return true;
+  const got = parseFloat(s || '0');
+  return Math.abs(got - want) < tol;
+};
+const hasLetterSpacingT = (s) => /letter-spacing\s+(?:150ms|0\.15s)/.test(s || '');
+
+const idleWorking   = idle.find(p => p.key === 'working');
+const idleIdle      = idle.find(p => p.key === 'idle');
+const idleOffline   = idle.find(p => p.key === 'offline');
+const pinWorking    = pinned.find(p => p.key === 'working');
+const pinIdle       = pinned.find(p => p.key === 'idle');
+const unpinWorking  = unpinned.find(p => p.key === 'working');
+
+const results = {
+  three_rows_present:       idle.length === 3,
+  has_working:              !!idleWorking,
+  has_idle:                 !!idleIdle,
+  has_offline:              !!idleOffline,
+
+  // Idle: all unpinned, spacing 0, transition present
+  all_idle_unpinned:        idle.every(p => p.pinned === 'false'),
+  all_idle_spacing_zero:    idle.every(p => near(p.spacing, 0)),
+  all_have_transition:      idle.every(p => hasLetterSpacingT(p.transition)),
+
+  // After pin click: working pinned, idle unchanged
+  working_pinned_attr:      pinWorking?.pinned === 'true',
+  working_spacing_half:     near(pinWorking?.spacing, 0.5),
+  idle_stays_unpinned:      pinIdle?.pinned === 'false',
+  idle_spacing_unchanged:   near(pinIdle?.spacing, 0),
+
+  // After unpin click: working back to unpinned + 0 spacing
+  unpin_attr_false:         unpinWorking?.pinned === 'false',
+  unpin_spacing_zero:       near(unpinWorking?.spacing, 0),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend-row pin spacing:`, JSON.stringify(results),
+  `\n  idle:`,     idle,
+  `\n  pinned:`,   pinned,
+  `\n  unpinned:`, unpinned);
+process.exit(ok ? 0 : 1);

package/scripts/topo-legend-row-tint-test.mjs

@@ -0,0 +1,95 @@
+/* Round 105 verification: legend rows in the SVG panel pick up a
+ * row-background tint on hover and pin, mirroring R104's treatment
+ * on the recent-signal panel. The tint uses the ROW'S OWN swatch
+ * colour (working=green, idle=teal, offline=slate) so the user's
+ * eye associates the highlight with its swatch instead of a generic
+ * accent.
+ *
+ * Verifies idle / hover / pinned states via the new data-legend-
+ * row-tinted attribute + actual fill/opacity. Pin is stronger than
+ * hover; idle is transparent.
+ */
+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');
+    sessionStorage.removeItem('anet-topo-pinned-status');
+  } 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('wkr1', 'working'),
+    mk('idl1', 'idle'),
+    mk('off1', 'offline'),
+  ] } });
+});
+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.waitForTimeout(400);
+
+const readRow = (key) => page.evaluate((k) => {
+  const g = document.querySelector(`[data-legend-status="${k}"]`);
+  if (!g) return null;
+  const rect = g.querySelector('rect');
+  return {
+    tinted:  rect?.getAttribute('data-legend-row-tinted') || '',
+    fill:    rect?.getAttribute('fill') || '',
+    opacity: rect?.getAttribute('opacity') || '',
+  };
+}, key);
+
+const before = await Promise.all(['working', 'idle', 'offline'].map(readRow));
+
+// Hover working.
+await page.locator('[data-legend-status="working"]').hover();
+await page.waitForTimeout(250);
+const onHoverWorking = await Promise.all(['working', 'idle', 'offline'].map(readRow));
+
+// Move away — clears hover.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+
+// Pin idle.
+await page.locator('[data-legend-status="idle"]').click();
+await page.waitForTimeout(250);
+const onPinIdle = await Promise.all(['working', 'idle', 'offline'].map(readRow));
+
+await browser.close();
+
+const opacity = (s) => parseFloat(s) || 0;
+const results = {
+  before_allTransparent: before.every(r => r?.tinted === 'none' && r?.fill === 'transparent'),
+  hoverWorking_workingTinted: onHoverWorking[0]?.tinted === 'hover' && onHoverWorking[0]?.fill !== 'transparent',
+  hoverWorking_othersUnchanged: onHoverWorking.slice(1).every(r => r?.tinted === 'none'),
+  hoverWorking_opacityLow:    opacity(onHoverWorking[0]?.opacity || '') > 0 && opacity(onHoverWorking[0]?.opacity || '') < 0.2,
+  pinIdle_idlePinned:         onPinIdle[1]?.tinted === 'pinned' && onPinIdle[1]?.fill !== 'transparent',
+  pinIdle_pinStrongerThanHover: opacity(onPinIdle[1]?.opacity || '') > opacity(onHoverWorking[0]?.opacity || ''),
+  pinIdle_otherRowsClean:     onPinIdle.filter((_, i) => i !== 1).every(r => r?.tinted === 'none'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend-row tint:`, JSON.stringify(results),
+  `\n  before=`,         before,
+  `\n  onHoverWorking=`, onHoverWorking,
+  `\n  onPinIdle=`,      onPinIdle);
+process.exit(ok ? 0 : 1);

package/scripts/topo-legend-row-title-test.mjs

@@ -0,0 +1,102 @@
+/* Round 149 verification: legend rows gain a <title> tooltip
+ * symmetric with R148's recent-signal row tooltip. Closes the
+ * R97 idiom on the panel side — anywhere the UI shows "N" should
+ * hover-explain WHICH N.
+ *
+ * Both side panels now have matching row-tooltip affordances:
+ *   recent-signal row (R148): full from/to/timestamp/content + pin hint
+ *   legend row       (R149): status label + matched-aliases + pin hint
+ *
+ * Fleet: 3 working / 2 idle / 1 offline so all three bucket rows
+ * show non-zero. Verify each row's title contains:
+ *   - status label + count
+ *   - alias list of matching nodes
+ *   - "click to pin" hint when not pinned
+ *
+ * Then click idle to pin → title flips to "click to release pin".
+ */
+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('worker-a', 'working'), mk('worker-b', 'working'), mk('worker-c', 'working'),
+    mk('idle-a',   'idle'),    mk('idle-b',   'idle'),
+    mk('off-a',    'offline'),
+  ] } });
+});
+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' });
+// 3 working + 2 idle + 1 offline = 6 sessions; offline nodes still
+// render as g[data-node] (line ~2754 [...onlineNodes, ...offlineNodes]
+// .map). Initial count check was off-by-one.
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 6, { timeout: 30000 });
+await page.waitForSelector('[data-legend-status="working"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const readTitle = (key) => page.evaluate((k) => {
+  const row = document.querySelector(`[data-legend-status="${k}"]`);
+  return row?.querySelector('title')?.textContent || '';
+}, key);
+
+const wTitle = await readTitle('working');
+const iTitle = await readTitle('idle');
+const oTitle = await readTitle('offline');
+
+// Pin idle → its title flips
+await page.locator('[data-legend-status="idle"]').click();
+await page.waitForTimeout(200);
+const iPinnedTitle = await readTitle('idle');
+
+await browser.close();
+
+const results = {
+  // Working row: 3 working aliases
+  w_hasLabel:        wTitle.includes('working node · 3'),
+  w_hasWorkerA:      wTitle.includes('worker-a'),
+  w_hasWorkerB:      wTitle.includes('worker-b'),
+  w_hasWorkerC:      wTitle.includes('worker-c'),
+  w_pinHint:         wTitle.includes('click to pin'),
+
+  // Idle row: 2 idle aliases
+  i_hasLabel:        iTitle.includes('online idle · 2'),
+  i_hasIdleA:        iTitle.includes('idle-a'),
+  i_hasIdleB:        iTitle.includes('idle-b'),
+  i_pinHint:         iTitle.includes('click to pin'),
+
+  // Offline row: 1 offline alias
+  o_hasLabel:        oTitle.includes('offline / no SSE · 1'),
+  o_hasOffA:         oTitle.includes('off-a'),
+
+  // After pin: title hint flipped
+  iPinned_releaseHint: iPinnedTitle.includes('click to release pin'),
+  iPinned_noPinHint:   !iPinnedTitle.includes('click to pin · hover to preview'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend-row title:`, JSON.stringify(results),
+  `\n  workingTitle:\n${wTitle}`,
+  `\n  idleTitle:\n${iTitle}`,
+  `\n  offlineTitle:\n${oTitle}`,
+  `\n  idlePinnedTitle:\n${iPinnedTitle}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-legend-swatch-grow-test.mjs

@@ -0,0 +1,116 @@
+/* Round 197 verification: legend swatch dot scales r 5.5 → 7 when
+ * its row is hovered or pinned. Mirrors R177 hub hover-lift but at
+ * legend grain.
+ *
+ * Pre-R197 the swatch was a flat constant r=5.5 — every other piece
+ * of the row responded to hover/pin (R55 text brighten, R105 bg
+ * tint, R144 1px row lift, R181 pin ring) but the swatch dot
+ * itself stayed still. The dot is the row's visual-identity
+ * anchor; making it grow gives the gesture full row-wide reach.
+ *
+ * Test (cyber/dark theme, 4 working sessions):
+ *   1. Three swatches present: working / idle / offline.
+ *   2. Idle: data-legend-swatch-state='idle', r ~ 5.5.
+ *   3. Hover the "working" legend row, wait past 150ms transition.
+ *   4. Working swatch: state='hover', r ~ 7.
+ *   5. Other swatches (idle/offline) stay 'idle' + r ~ 5.5.
+ *   6. Move away, wait — working swatch back to 'idle' + r 5.5.
+ *   7. transition: r 150ms ease-out is in the inline style.
+ */
+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, status = 'working') => ({
+    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'), 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-legend-swatch]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probe = async () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-legend-swatch]')].map(el => ({
+    key:   el.getAttribute('data-legend-swatch'),
+    state: el.getAttribute('data-legend-swatch-state'),
+    // Read both computed CSS r (the transitionable property) and the
+    // SVG attribute fallback. Chrome computes the CSS r as the live
+    // value, including mid-transition interpolated values.
+    cssR:  parseFloat(getComputedStyle(el).r),
+    attrR: parseFloat(el.getAttribute('r') || ''),
+    transition: el.style.transition,
+  }));
+});
+
+const idle = await probe();
+
+await page.hover('[data-legend-status="working"]');
+await page.waitForTimeout(220);  // past 150ms r transition + margin
+const hovered = await probe();
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(220);
+const settled = await probe();
+
+await browser.close();
+
+const idleWorking  = idle.find(s => s.key === 'working');
+const idleIdle     = idle.find(s => s.key === 'idle');
+const idleOffline  = idle.find(s => s.key === 'offline');
+
+const hovWorking   = hovered.find(s => s.key === 'working');
+const hovIdle      = hovered.find(s => s.key === 'idle');
+const hovOffline   = hovered.find(s => s.key === 'offline');
+
+const settledWorking = settled.find(s => s.key === 'working');
+
+const results = {
+  three_swatches:           idle.length === 3,
+  has_working_swatch:       !!idleWorking,
+  has_idle_swatch:          !!idleIdle,
+  has_offline_swatch:       !!idleOffline,
+
+  idle_working_state_idle:  idleWorking?.state === 'idle',
+  idle_working_r_small:     Math.abs((idleWorking?.cssR ?? idleWorking?.attrR ?? 0) - 5.5) < 0.4,
+  transition_includes_r:    (idleWorking?.transition || '').includes('r') &&
+                            (idleWorking?.transition || '').includes('150ms'),
+
+  hov_working_state_hover:  hovWorking?.state === 'hover',
+  hov_working_r_bigger:     (hovWorking?.cssR ?? hovWorking?.attrR ?? 0) > 6.5,
+  hov_working_r_about_7:    Math.abs((hovWorking?.cssR ?? hovWorking?.attrR ?? 0) - 7) < 0.4,
+  hov_idle_stays_idle:      hovIdle?.state === 'idle',
+  hov_idle_r_unchanged:     Math.abs((hovIdle?.cssR ?? hovIdle?.attrR ?? 0) - 5.5) < 0.4,
+  hov_offline_stays_idle:   hovOffline?.state === 'idle',
+
+  settled_state_idle:       settledWorking?.state === 'idle',
+  settled_r_back_small:     Math.abs((settledWorking?.cssR ?? settledWorking?.attrR ?? 0) - 5.5) < 0.4,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend swatch grow:`, JSON.stringify(results),
+  `\n  idle:`,    idle,
+  `\n  hovered:`, hovered,
+  `\n  settled:`, settled);
+process.exit(ok ? 0 : 1);

package/scripts/topo-legend-swatch-radius-test.mjs

@@ -0,0 +1,78 @@
+/* Round 295 verification: legend swatch idle radius 5.5 → 6.
+ *
+ * R197 grew the swatch on hover/pin from 5.5 → 7 (a 1.5px jump).
+ * R295 bumps the idle radius to 6 so the hover delta becomes
+ * a smoother 6→7 (1px lift). Idle reads slightly more like an
+ * authored color anchor than a faint dot.
+ *
+ * Contract:
+ *   - All [data-legend-swatch] circles have attribute r='6' (was 5.5).
+ *   - data-legend-swatch-state='idle' on all (no fixture hover).
+ *   - Three swatches present (working / idle / offline).
+ *   - R294 pulse dots absent + R290 three radar rings 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, status) => ({
+    alias, status, model, 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', 'claude-opus-4', 'working'),
+    mk('beta',  'gpt-4o',        'idle'),
+    mk('gamma', 'claude-sonnet-4', 'offline'),
+  ] } });
+});
+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.waitForSelector('[data-legend-swatch]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const swatches = [...document.querySelectorAll('[data-legend-swatch]')];
+  const samples = swatches.map(s => ({
+    key:   s.getAttribute('data-legend-swatch'),
+    rAttr: s.getAttribute('r'),
+    rCss:  getComputedStyle(s).r,
+    state: s.getAttribute('data-legend-swatch-state'),
+  }));
+  const pulses = document.querySelectorAll('[data-pulse-wrapper]');
+  const rings = [...document.querySelectorAll('[data-topo-radar-ring]')]
+    .map(r => r.getAttribute('data-topo-radar-ring')).sort((a, b) => +a - +b);
+  return {
+    samples,
+    pulseCount:    pulses.length,
+    radarRings:    rings,
+  };
+});
+await browser.close();
+
+const results = {
+  three_swatches:           probe.samples.length === 3,
+  all_idle_state:           probe.samples.every(s => s.state === 'idle'),
+  all_radius_attr_6:        probe.samples.every(s => s.rAttr === '6'),
+  all_computed_r_6:         probe.samples.every(s => /^6/.test(s.rCss || '')),
+  r294_pulse_absent:        probe.pulseCount === 0,
+  r290_three_rings:         JSON.stringify(probe.radarRings) === JSON.stringify(['170', '250', '330']),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend swatch radius:`, JSON.stringify(results),
+  '\n  swatch samples:', probe.samples);
+process.exit(ok ? 0 : 1);