@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

package/scripts/topo-reset-spin-test.mjs

@@ -0,0 +1,120 @@
+/* Round 184 verification: chrome reset button gets a one-shot
+ * icon spin on click — visual confirmation that the click
+ * registered.
+ *
+ * Pre-R184 the reset button triggered R168 smoothView crossfade
+ * on the canvas but the button itself had no on-button feedback.
+ * R184 arms resetSpinning for 460ms on click; the SVG icon
+ * picks up `.anet-reset-spin` CSS animation (450ms ease-out,
+ * -360°).
+ *
+ * Test:
+ *   1. Idle: data-topo-chrome-reset-spinning='false',
+ *            SVG icon has NO 'anet-reset-spin' className
+ *   2. Click reset → flag='true' within 50ms,
+ *                    SVG icon has 'anet-reset-spin' className
+ *   3. Wait 500ms → flag='false', className removed
+ *   4. CSS animation keyframe 'anet-reset-spin' exists in stylesheet
+ *      (rotates -360deg)
+ */
+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')] } });
+});
+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-reset]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = () => page.evaluate(() => {
+  const btn = document.querySelector('[data-topo-chrome-reset]');
+  const icon = document.querySelector('[data-topo-chrome-reset-icon]');
+  return {
+    btnSpinningAttr: btn?.getAttribute('data-topo-chrome-reset-spinning'),
+    iconClass:       icon?.getAttribute('class') || '',
+  };
+});
+
+const idle = await probe();
+
+// First zoom in so reset has visible effect (not strictly needed for the
+// spin test, but exercises the resetView path alongside the spin)
+await page.keyboard.press('+');
+await page.keyboard.press('+');
+await page.waitForTimeout(200);
+
+// Click reset button — spin should arm
+await page.locator('[data-topo-chrome-reset]').click();
+await page.waitForTimeout(50);
+const duringSpin = await probe();
+
+// Wait past the 460ms window
+await page.waitForTimeout(500);
+const afterSpin = await probe();
+
+// Verify the CSS keyframe exists in the stylesheet (rotates negatively)
+const cssCheck = await page.evaluate(() => {
+  for (const sheet of document.styleSheets) {
+    let rules;
+    try { rules = sheet.cssRules; } catch { continue; }
+    if (!rules) continue;
+    for (const rule of rules) {
+      // CSSKeyframesRule has .name and .cssText listing keyframes
+      if (rule.type === 7 /* KEYFRAMES_RULE */ && rule.name === 'anet-reset-spin') {
+        return {
+          found: true,
+          cssText: rule.cssText,
+        };
+      }
+    }
+  }
+  return { found: false, cssText: '' };
+});
+
+await browser.close();
+
+const results = {
+  idle_attr_false:       idle.btnSpinningAttr === 'false',
+  idle_no_spin_class:    !idle.iconClass.includes('anet-reset-spin'),
+
+  spin_attr_true:        duringSpin.btnSpinningAttr === 'true',
+  spin_has_class:        duringSpin.iconClass.includes('anet-reset-spin'),
+
+  after_attr_false:      afterSpin.btnSpinningAttr === 'false',
+  after_no_spin_class:   !afterSpin.iconClass.includes('anet-reset-spin'),
+
+  keyframe_found:        cssCheck.found,
+  keyframe_negative_360: cssCheck.cssText.includes('-360deg') ||
+                         cssCheck.cssText.includes('rotate(-360'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} reset-spin:`, JSON.stringify(results),
+  `\n  idle:`, idle,
+  `\n  duringSpin:`, duringSpin,
+  `\n  afterSpin:`, afterSpin,
+  `\n  keyframe:`, cssCheck);
+process.exit(ok ? 0 : 1);

package/scripts/topo-runtime-badge-grow-test.mjs

@@ -0,0 +1,114 @@
+/* Round 208 verification: runtime badge (CLI/SDK/HTTP icon at the
+ * bottom-right of each node avatar) grows r + thickens stroke on
+ * parent-node hover. Completes the micro-lift radius-axis family:
+ *   R177 hub ring        r 14  → 17  on hub-hover
+ *   R197 legend swatch   r 5.5 → 7   on row-hover/pin
+ *   R208 runtime badge   r 7   → 8   on node-hover (online)
+ *                       (r 5.5 → 6.5 offline)
+ *
+ * Test (cyber dark, 4 working sessions with runtime='cli-claude-code'
+ * which maps to a runtime identity → badge renders):
+ *   1. 4 [data-runtime-badge] badges present (one per node).
+ *   2. Idle: all data-runtime-badge-active='false', computed r ≈ 7,
+ *      strokeWidth ≈ 1.5.
+ *   3. Transition includes 'r 150ms' AND 'stroke-width 150ms'.
+ *   4. Hover g[data-node="alpha"] → wait past 180ms.
+ *   5. alpha badge: active='true', r ≈ 8, strokeWidth ≈ 2.
+ *   6. Other (non-hovered) badges stay active='false', r ≈ 7,
+ *      strokeWidth ≈ 1.5.
+ *   7. Move away — alpha badge back to 'false', r ≈ 7.
+ */
+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 });
+// SVG <circle> doesn't pass Playwright's default visibility check the
+// same way HTML elements do — wait for DOM attachment instead.
+await page.waitForSelector('[data-runtime-badge]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probeAll = async () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-runtime-badge]')].map(el => {
+    const cs = getComputedStyle(el);
+    return {
+      alias:       el.getAttribute('data-runtime-badge'),
+      active:      el.getAttribute('data-runtime-badge-active'),
+      r:           parseFloat(cs.r),
+      strokeWidth: parseFloat(cs.strokeWidth),
+      transition:  el.style.transition,
+    };
+  });
+});
+
+const idle = await probeAll();
+
+await page.hover('g[data-node="alpha"]');
+await page.waitForTimeout(200);
+const hovered = await probeAll();
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(200);
+const settled = await probeAll();
+
+await browser.close();
+
+const idleAlpha    = idle.find(b => b.alias === 'alpha');
+const idleBeta     = idle.find(b => b.alias === 'beta');
+const hoverAlpha   = hovered.find(b => b.alias === 'alpha');
+const hoverBeta    = hovered.find(b => b.alias === 'beta');
+const settledAlpha = settled.find(b => b.alias === 'alpha');
+
+const near = (got, want, tol = 0.4) => Math.abs(got - want) < tol;
+
+const results = {
+  four_badges_present:           idle.length === 4,
+  idle_all_inactive:             idle.every(b => b.active === 'false'),
+  idle_all_r_7:                  idle.every(b => near(b.r, 7)),
+  idle_all_stroke_1p5:           idle.every(b => near(b.strokeWidth, 1.5)),
+  transition_has_r:              idle.every(b => /\br\s+(?:150ms|0\.15s)/.test(b.transition || '')),
+  transition_has_stroke_width:   idle.every(b => /stroke-width\s+(?:150ms|0\.15s)/.test(b.transition || '')),
+
+  hover_alpha_active:            hoverAlpha?.active === 'true',
+  hover_alpha_r_grown:           near(hoverAlpha?.r ?? 0, 8),
+  hover_alpha_stroke_thicker:    near(hoverAlpha?.strokeWidth ?? 0, 2),
+  hover_beta_stays_inactive:     hoverBeta?.active === 'false',
+  hover_beta_r_unchanged:        near(hoverBeta?.r ?? 0, 7),
+  hover_beta_stroke_unchanged:   near(hoverBeta?.strokeWidth ?? 0, 1.5),
+
+  settled_alpha_inactive:        settledAlpha?.active === 'false',
+  settled_alpha_r_back:          near(settledAlpha?.r ?? 0, 7),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} runtime badge grow:`, JSON.stringify(results),
+  `\n  idle:`,     idle,
+  `\n  hovered:`,  hovered,
+  `\n  settled:`,  settled);
+process.exit(ok ? 0 : 1);

package/scripts/topo-spokes-retired-test.mjs

@@ -0,0 +1,93 @@
+/* Round 280 verification: backdrop spokes retired (R93 + R240 family)
+ * — 减法 cut #6.
+ *
+ * Pre-R280 the canvas rendered 6 <line> elements at angles 0, 30, 60,
+ * 90, 120, 150° through hub center — 12 rays of a "radar" star
+ * pattern, stroke opacity 0.18 (cyber) / 0.35 (light), tint shift to
+ * pal.legendAccent when any pin is active (R240).
+ *
+ * The radial-gradient backdrop (`topo-radar`) already provides soft
+ * hub-centered glow; the explicit line spokes were decorative density
+ * without structural signal — the topology IS hub-and-spoke, the
+ * actual hub-to-node connecting strokes already render the structure.
+ *
+ * Post-R280: spokes block gated with `false &&`. The 6 lines no
+ * longer render; radial-gradient backdrop remains.
+ *
+ * Test scope:
+ *   1. No element matches `[data-topo-spoke-angle]`.
+ *   2. R278 working halo <animate> count still 0 (regression).
+ *   3. R279 ping/pulse still absent (regression).
+ *   4. R277 legend height 88 (regression).
+ *   5. R275 freshness chip absent (regression).
+ */
+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*', (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.waitForSelector('[data-topo-panel="legend"]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const spokes        = document.querySelectorAll('[data-topo-spoke-angle]');
+  const ping          = document.querySelectorAll('[data-arrival-ping]');
+  const pulse         = document.querySelectorAll('[data-dispatch-pulse]');
+  const freshnessChip = document.querySelector('[data-freshness-chip]');
+  const legendG       = document.querySelector('[data-topo-panel="legend"]');
+  const legendH       = legendG?.querySelector('rect')?.getAttribute('height') ?? null;
+  const halos         = document.querySelectorAll('[data-node-halo-breath="on"]');
+  let haloAnimateCount = 0;
+  halos.forEach((h) => { haloAnimateCount += h.querySelectorAll('animate').length; });
+  return {
+    spokeCount:       spokes.length,
+    pingCount:        ping.length,
+    pulseCount:       pulse.length,
+    freshnessPresent: freshnessChip !== null,
+    legendHeight:     legendH,
+    haloAnimateCount,
+  };
+});
+await browser.close();
+
+const results = {
+  spokes_absent:                 probe.spokeCount === 0,
+  r279_ping_absent:              probe.pingCount === 0,
+  r279_pulse_absent:             probe.pulseCount === 0,
+  r275_freshness_absent:         probe.freshnessPresent === false,
+  r277_legend_height_88:         probe.legendHeight === '88',
+  r278_halo_animate_count_zero:  probe.haloAnimateCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} backdrop spokes retired:`, JSON.stringify(results),
+  '\n  spoke count (expect 0):',          probe.spokeCount,
+  '\n  ping/pulse:', probe.pingCount, probe.pulseCount,
+  '\n  freshness absent:', !probe.freshnessPresent,
+  '\n  legend height:', probe.legendHeight,
+  '\n  halo animate count (expect 0):', probe.haloAnimateCount);
+process.exit(ok ? 0 : 1);

package/scripts/topo-starfield-density-test.mjs

@@ -0,0 +1,89 @@
+/* Round 291 verification: starfield decorative dot count 28 → 14
+ * (50% reduction). Continuation of the 减法 register R290 pivoted
+ * back to. Atmospheric depth preserved; visual density cut in
+ * half so the eye has less ambient decoration to skip past.
+ *
+ * Contract:
+ *   - [data-topo-starfield] container exists (cyber only).
+ *   - 14 [data-topo-starfield-dot] children (was 28).
+ *   - opacity 0.5 on the container unchanged (regression).
+ *   - Light theme: starfield NOT rendered (regression — pre-R291
+ *     behaviour, conditional on !isLight).
+ *   - R290 radar ring set still ['170','250','330'] (regression).
+ *   - R289 watermark letterSpacing + R283 monogram stroke 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,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'claude-opus-4'),
+    mk('beta',  'gpt-4o'),
+  ] } });
+});
+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-topo-starfield]', { timeout: 15000 });
+await page.waitForSelector('[data-topo-brand-watermark]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const sf = document.querySelector('[data-topo-starfield]');
+  const dots = document.querySelectorAll('[data-topo-starfield-dot]');
+  const opacity = sf?.getAttribute('opacity') ?? null;
+  const rings = [...document.querySelectorAll('[data-topo-radar-ring]')]
+    .map(r => r.getAttribute('data-topo-radar-ring')).sort((a, b) => +a - +b);
+  const wm = document.querySelector('[data-topo-brand-watermark]');
+  const wmLs = wm ? getComputedStyle(wm).letterSpacing : null;
+  const alphaNode = document.querySelector('g[data-node="alpha"]');
+  const alphaCircles = alphaNode ? [...alphaNode.querySelectorAll('circle')] : [];
+  const alphaAvatarCircle = alphaCircles
+    .map(c => ({ r: +c.getAttribute('r') || 0, sw: c.getAttribute('stroke-width'), isBadge: c.hasAttribute('data-runtime-badge') }))
+    .filter(c => c.r > 0 && c.r < 18 && !c.isBadge)
+    .sort((a, b) => b.r - a.r)[0];
+  return {
+    starfieldPresent: sf !== null,
+    dotCount:         dots.length,
+    opacity,
+    radarRings:       rings,
+    watermarkLs:      wmLs,
+    alphaAvatarStroke: alphaAvatarCircle?.sw ?? null,
+  };
+});
+await browser.close();
+
+const wmLsVal = parseFloat(probe.watermarkLs) || 0;
+
+const results = {
+  starfield_container_present: probe.starfieldPresent,
+  fourteen_dots:               probe.dotCount === 14,
+  opacity_0_5_kept:            probe.opacity === '0.5',
+  r290_three_rings:            JSON.stringify(probe.radarRings) === JSON.stringify(['170', '250', '330']),
+  r289_watermark_ls_kept:      wmLsVal >= 0.4 && wmLsVal <= 0.7,
+  r283_monogram_stroke_kept:   probe.alphaAvatarStroke === '1.5',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} starfield density:`, JSON.stringify(results),
+  '\n  dot count (expect 14):', probe.dotCount,
+  '\n  opacity:', probe.opacity,
+  '\n  radar rings (R290):', probe.radarRings);
+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-status-chip-tooltip-test.mjs

@@ -0,0 +1,95 @@
+/* Round 113 verification: chip-row "N working" + "N online" tooltips
+ * list matched aliases. Closes the last hover surfaces in the chip-
+ * row that had generic "Hover to highlight" titles. Same R97-R102 /
+ * R101 alias-list pattern.
+ *
+ * Fleet: 2 working (wkr1/2) + 2 idle (idl1/2) + 1 offline (off1).
+ *   working chip title contains wkr1, wkr2; data-working-chip-aliases CSV matches
+ *   online chip title contains all online aliases (4); data-online-chip-aliases matches
+ *   pin state flips the action hint
+ */
+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();
+const stale10 = 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, ts) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: ts, updated_at: ts, last_seen_at: ts,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('wkr1', 'working', fresh),
+    mk('wkr2', 'working', fresh),
+    mk('idl1', 'idle',    fresh),
+    mk('idl2', 'idle',    fresh),
+    mk('off1', 'offline', stale10),
+  ] } });
+});
+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 === 5, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const read = (sel) => page.evaluate((s) => {
+  const el = document.querySelector(s);
+  if (!el) return null;
+  return {
+    title:   el.getAttribute('title') || '',
+    aliases: el.getAttribute('data-working-chip-aliases') || el.getAttribute('data-online-chip-aliases') || '',
+  };
+}, sel);
+
+const workingBefore = await read('[data-working-chip]');
+const onlineBefore  = await read('[data-online-chip]');
+
+// Pin working status — action hint should flip.
+await page.evaluate(() => {
+  sessionStorage.setItem('anet-topo-pinned-status', 'working');
+  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: 'working' } }));
+});
+await page.waitForTimeout(300);
+const workingPinned = await read('[data-working-chip]');
+
+await browser.close();
+
+const sameSet = (csv, expected) => {
+  const got = new Set(csv.split(',').filter(Boolean));
+  const exp = new Set(expected);
+  return got.size === exp.size && [...exp].every(x => got.has(x));
+};
+
+const results = {
+  workingBefore_aliasesMatch:    sameSet(workingBefore?.aliases || '', ['wkr1', 'wkr2']),
+  workingBefore_titleListsThem:  /wkr1.*wkr2|wkr2.*wkr1/.test(workingBefore?.title || ''),
+  workingBefore_titleClickHint:  /click to pin/.test(workingBefore?.title || ''),
+  onlineBefore_aliasesMatch:     sameSet(onlineBefore?.aliases || '', ['wkr1', 'wkr2', 'idl1', 'idl2']),
+  onlineBefore_titleListsThem:   /wkr1/.test(onlineBefore?.title || '') && /idl1/.test(onlineBefore?.title || ''),
+  pinnedWorking_aliasesStable:   sameSet(workingPinned?.aliases || '', ['wkr1', 'wkr2']),
+  pinnedWorking_titleHintFlipped:/pinned, Esc to clear/.test(workingPinned?.title || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-chip tooltip:`, JSON.stringify(results),
+  `\n  workingBefore=`,  workingBefore,
+  `\n  onlineBefore=`,   onlineBefore,
+  `\n  workingPinned=`,  workingPinned);
+process.exit(ok ? 0 : 1);