@sleep2agi/agent-network-dashboard 0.4.6-preview.30 → 0.4.6-preview.301

package/scripts/topo-active-links-tooltip-test.mjs

@@ -0,0 +1,79 @@
+/* Round 114 verification: active-links chip tooltip lists the actual
+ * flow pairs. Closes the info-density sweep on the last chip-row
+ * hover surface (R97-R113 covered everything else). Format:
+ *   "alpha→beta (3), gamma→delta (1) — hover brightens all"
+ *
+ * Drive 3 flow pairs of different counts. Verify each pair appears
+ * in the title with its count; the trailing action hint says
+ * "hover brightens all". Empty-flow fleet → no title.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const fresh = new Date(Date.now() - 30 * 1000).toISOString();
+
+const probe = async (withFlow) => {
+  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 {}
+  });
+  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: '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: [mk('alpha'), mk('beta'), mk('gamma'), mk('delta')] } });
+  });
+  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: withFlow ? [
+    mkMsg('m1', 'alpha', 'beta',  30 * 1000),
+    mkMsg('m2', 'alpha', 'beta',  40 * 1000),
+    mkMsg('m3', 'alpha', 'beta',  50 * 1000),
+    mkMsg('m4', 'gamma', 'delta', 60 * 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(600);
+  const data = await page.evaluate(() => {
+    const el = document.querySelector('[data-active-links-chip]');
+    return {
+      title:     el?.getAttribute('title'),
+      flowCount: el?.getAttribute('data-active-links-flow-count') || '',
+      text:      el?.textContent?.trim() || '',
+    };
+  });
+  await ctx.close();
+  return data;
+};
+
+const empty = await probe(false);
+const full  = await probe(true);
+await browser.close();
+
+const results = {
+  empty_noTitle:           empty.title === null,
+  empty_zeroCount:         empty.flowCount === '0',
+  full_titleHasAlphaBeta:  /alpha→beta \(3\)/.test(full.title || ''),
+  full_titleHasGammaDelta: /gamma→delta \(1\)/.test(full.title || ''),
+  full_titleActionHint:    /hover brightens all/.test(full.title || ''),
+  full_flowCount2:         full.flowCount === '2',
+  full_chipShowsCount:     /2 active link/.test(full.text),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links tooltip:`, JSON.stringify(results),
+  `\n  empty=`, empty,
+  `\n  full=`,  full);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-pulse-ease-test.mjs

@@ -0,0 +1,120 @@
+/* Round 243 verification: active-node pulse ring gets two polishes
+ * on a single element:
+ *
+ *   1. Always-mount-opacity-gate wrapper <g> — pulse stays in DOM
+ *      for all online nodes (when reducedMotion is off); isActive
+ *      flips wrapper opacity 1 ↔ 0 with 300ms ease-out, instead of
+ *      conditional mount that snap-restarted SMIL from phase 0.
+ *
+ *   2. SMIL ease-in-out keySplines on both r + opacity animates —
+ *      the breath rises and settles at both endpoints instead of
+ *      linear constant-velocity interp.
+ *
+ * Scenario: 4 working agents + 5-msg alpha→beta flow.
+ *   activeAliases = {alpha, beta} (active=true)
+ *   gamma, delta = active=false
+ *
+ * Test scope per node:
+ *   - [data-node-pulse] always present (4 pulses in DOM)
+ *   - alpha + beta: data-node-pulse-active='true', wrapper opacity=1
+ *   - gamma + delta: data-node-pulse-active='false', wrapper opacity=0
+ *   - All 4 wrappers have style.transition with 'opacity 300ms'
+ *   - All 4 contain two <animate> children (r + opacity)
+ *   - Each <animate> has calcMode='spline', keyTimes='0;0.5;1',
+ *     keySplines='0.42 0 0.58 1;0.42 0 0.58 1', dur='2.4s'
+ */
+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';
+  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 < 5; 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-node-pulse]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const pulses = Array.from(document.querySelectorAll('[data-node-pulse]'));
+  return pulses.map((g) => {
+    const animates = Array.from(g.querySelectorAll('animate'));
+    return {
+      alias:        g.getAttribute('data-node-pulse'),
+      active:       g.getAttribute('data-node-pulse-active'),
+      opacityAttr:  g.getAttribute('opacity'),
+      transition:   g.style.transition,
+      animateCount: animates.length,
+      animates: animates.map(a => ({
+        attr:       a.getAttribute('attributeName'),
+        calcMode:   a.getAttribute('calcMode'),
+        keyTimes:   a.getAttribute('keyTimes'),
+        keySplines: a.getAttribute('keySplines'),
+        dur:        a.getAttribute('dur'),
+      })),
+    };
+  });
+});
+await browser.close();
+
+const EASE_INOUT = '0.42 0 0.58 1;0.42 0 0.58 1';
+const hasOpTransition = (s) => /opacity\s+(?:300ms|0\.3s)/.test(s || '');
+const activeAliases = new Set(['alpha', 'beta']);
+const expectAlias = (p) => activeAliases.has(p.alias) ? 'true' : 'false';
+
+const animateOK = (a) =>
+  (a.attr === 'r' || a.attr === 'opacity') &&
+  a.calcMode === 'spline' &&
+  a.keyTimes === '0;0.5;1' &&
+  a.keySplines === EASE_INOUT &&
+  a.dur === '2.4s';
+
+const results = {
+  four_pulses:                probe.length === 4,
+  all_have_alias:             probe.every(p => typeof p.alias === 'string'),
+  active_state_matches:       probe.every(p => p.active === expectAlias(p)),
+  active_pulses_opacity_1:    probe.filter(p => p.active === 'true').every(p => p.opacityAttr === '1'),
+  inactive_pulses_opacity_0:  probe.filter(p => p.active === 'false').every(p => p.opacityAttr === '0'),
+  all_have_op_transition:     probe.every(p => hasOpTransition(p.transition)),
+  all_two_animates:           probe.every(p => p.animateCount === 2),
+  all_animates_have_r:        probe.every(p => p.animates.some(a => a.attr === 'r')),
+  all_animates_have_opacity:  probe.every(p => p.animates.some(a => a.attr === 'opacity')),
+  all_animates_ease_inout:    probe.every(p => p.animates.every(animateOK)),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active pulse ease+gate:`, JSON.stringify(results),
+  '\n  pulses:', probe.map(p => ({ a: p.alias, active: p.active, op: p.opacityAttr })));
+process.exit(ok ? 0 : 1);

package/scripts/topo-auto-fit-test.mjs

@@ -0,0 +1,73 @@
+/* Round 28 verification: first-paint auto-fit zoom when grid content
+ * would overflow viewBox; respects persisted view; doesn't fire on
+ * small fleets (no overflow). */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+async function probe({ fleetSize, persisted }) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 1600 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(([pers]) => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', 'grid');
+      if (pers) localStorage.setItem('anet-topo-view', JSON.stringify(pers));
+      else localStorage.removeItem('anet-topo-view');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, [persisted]);
+  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';
+    // Use prefix groups with 5 members each — 7 bands stack vertically
+    // and overflow the 680-px viewBox at cellH ≥ 81 (Round 27 floor).
+    const aliases = Array.from({ length: fleetSize }, (_, i) => {
+      const groups = ['A站', 'B站', 'C站', 'D站', 'E站', 'F站', 'G站', 'H站', 'I站', 'J站'];
+      const group = groups[Math.floor(i / 5) % groups.length];
+      return `${group}n${i + 1}`;
+    });
+    const sessions = aliases.map(a => ({
+      alias: a, status: 'idle', network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/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) => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('g[data-node]').length === n;
+  }, fleetSize, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(600);
+  const zoom = await page.evaluate(() => {
+    const span = document.querySelector('button[aria-label="Zoom in"]').parentElement.querySelector('span[title*="zoom level"]');
+    return +span.textContent.replace('%', '');
+  });
+  await ctx.close();
+  return zoom;
+}
+
+// 1. Big fleet (35 nodes / 7 bands → overflows ~680-px viewBox at cellH≥81)
+//    with no persisted view → auto-fit triggers (zoom < 100%)
+const bigFresh = await probe({ fleetSize: 35 });
+// 2. Big fleet, user has persisted view (zoom=1) → respect it, no auto-fit
+const bigPersisted = await probe({ fleetSize: 35, persisted: { zoom: 1, x: 0, y: 0 } });
+// 3. Small fleet, no persisted view → no overflow, zoom stays 100%
+const smallFresh = await probe({ fleetSize: 6 });
+
+await browser.close();
+const results = {
+  bigFleetAutoFits: bigFresh < 100 && bigFresh >= 50,
+  persistedRespected: bigPersisted === 100,
+  smallFleetStays100: smallFresh === 100,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} auto-fit:`, JSON.stringify(results),
+  `bigFresh=${bigFresh}% bigPersisted=${bigPersisted}% smallFresh=${smallFresh}%`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-brand-watermark-test.mjs

@@ -0,0 +1,106 @@
+/* Round 282 verification: sleep2agi brand watermark at canvas bottom-left.
+ *
+ * Per Vincent 5215 ask via 通信龙 (logo placement on the canvas), R282
+ * adds a low-opacity monospace text "sleep2agi" at viewBox (16, 672)
+ * — bottom-left corner, the only fully-empty corner after R275-R281
+ * 减法 arc:
+ *   top-left:    recent-signal panel
+ *   top-right:   legend panel
+ *   bottom-right: chrome strip (HTML overlay)
+ *   bottom-left: EMPTY → watermark home
+ *
+ * No icon yet (no sleep2agi-specific crescent asset in public/);
+ * text-only watermark is the minimal-risk implementation. R283+
+ * can swap in a real logo if Vincent provides asset.
+ *
+ * Test scope:
+ *   1. data-topo-brand-watermark element exists.
+ *   2. Text content === "sleep2agi".
+ *   3. x === 16, y === 672 (bottom-left, 16-unit inset matching panels).
+ *   4. opacity === "0.4" (subtle watermark).
+ *   5. fill is set + theme-aware (not 'none', not empty).
+ *   6. R281 vendor chip threshold regression: 2-vendor scenario chip absent.
+ *   7. R280 spokes still retired (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';
+  // 2-vendor scenario (claude + gpt) so R281 vendor chip should be absent
+  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'),
+    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.waitForSelector('[data-topo-brand-watermark]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+/* P0 (Vincent 5222) note: watermark structure expanded from text-only
+ * to <g>{moon glyph + wordmark}. Opacity moved to the wrapping <g>
+ * (data-topo-brand-watermark-group); text wordmark shifted x=16 → x=34
+ * to make room for the crescent glyph rendered at x=16. Probe both. */
+const probe = await page.evaluate(() => {
+  const mark = document.querySelector('[data-topo-brand-watermark]');
+  const group = document.querySelector('[data-topo-brand-watermark-group]');
+  const glyph = document.querySelector('[data-topo-brand-watermark-glyph]');
+  const vendorChips = document.querySelectorAll('[data-vendor-letter]');
+  const spokes = document.querySelectorAll('[data-topo-spoke-angle]');
+  return {
+    present:        mark !== null,
+    text:           mark?.textContent ?? null,
+    x:              mark ? +mark.getAttribute('x') : null,
+    y:              mark ? +mark.getAttribute('y') : null,
+    groupOpacity:   group?.getAttribute('opacity') ?? null,
+    glyphPresent:   glyph !== null,
+    fill:           mark ? window.getComputedStyle(mark).fill : null,
+    vendorChipCount: vendorChips.length,
+    spokeCount:     spokes.length,
+  };
+});
+await browser.close();
+
+const results = {
+  watermark_present:           probe.present,
+  watermark_text_is_brand:     probe.text === 'sleep2agi',
+  watermark_x_shifted_for_glyph: probe.x === 34,
+  watermark_y_is_672:          probe.y === 672,
+  watermark_group_opacity_0_4: probe.groupOpacity === '0.4',
+  watermark_glyph_present:     probe.glyphPresent,
+  watermark_fill_set:          probe.fill != null && probe.fill !== '' && probe.fill !== 'none',
+  r281_vendor_chip_absent_in_2_vendor: probe.vendorChipCount === 0,
+  r280_spokes_absent:          probe.spokeCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} brand watermark:`, JSON.stringify(results),
+  '\n  text:', JSON.stringify(probe.text),
+  '\n  (x,y):', `(${probe.x}, ${probe.y})`,
+  '\n  group opacity:', probe.groupOpacity,
+  '\n  glyph present:', probe.glyphPresent,
+  '\n  fill:', probe.fill,
+  '\n  vendor chips (expect 0):', probe.vendorChipCount,
+  '\n  spokes (expect 0):',       probe.spokeCount);
+process.exit(ok ? 0 : 1);

package/scripts/topo-canvas-aria-test.mjs

@@ -0,0 +1,108 @@
+/* Round 158 verification: main canvas SVG gains aria-label +
+ * aria-roledescription.
+ *
+ * R151-R157 closed a11y across every interactive surface INSIDE
+ * the canvas (nodes / group labels / edge badges / recent rows /
+ * legend rows / chrome buttons / minimap). The canvas <svg> root
+ * itself was a nameless 1000×680 box — a screen-reader user who
+ * landed on it before tab-diving into children heard nothing
+ * identifying the surface.
+ *
+ * R158 closes that gap:
+ *   aria-roledescription="agent network topology"
+ *   aria-label live-updates with snapshot:
+ *     "Agent network topology — 5 agents online · 3 working ·
+ *      1 offline · 2 active links. Tab to navigate nodes,
+ *      double-click canvas to reset view."
+ *
+ * No role override — default SVG role (graphics-document) keeps
+ * children navigable; role="img" would flatten the SVG to a
+ * single opaque image and hide all the R151-R157 work.
+ *
+ * Test:
+ *   1. Mock 3 working + 2 idle online + 1 offline + 2 active links
+ *   2. Assert canvas SVG has both ARIA attrs
+ *   3. Assert aria-label contains all four count fragments + gesture hints
+ *   4. Assert no role="img" (would defeat children a11y)
+ */
+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() - 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('agents-a1', 'working', fresh),
+    mk('agents-a2', 'working', fresh),
+    mk('agents-a3', 'working', fresh),
+    mk('infra-b1',  'idle',    fresh),
+    mk('infra-b2',  'idle',    fresh),
+    mk('legacy-c1', 'offline', stale),
+  ] } });
+});
+
+const now = Date.now();
+// 4 a1↔a2 msgs (R100 threshold for edge badge) + 1 a2↔a3 = 2 flowLinks
+const msgs = [];
+for (let i = 0; i < 4; i++) {
+  msgs.push({ id: `m${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: 'mx', from_alias: 'agents-a2', to_alias: 'agents-a3', 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' });
+// 5 online + 1 offline = 6 g[data-node]
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 6, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const el = document.querySelector('[data-topo-canvas-aria]');
+  if (!el) return null;
+  return {
+    tagName:            el.tagName.toLowerCase(),
+    role:               el.getAttribute('role'),
+    roledesc:           el.getAttribute('aria-roledescription'),
+    label:              el.getAttribute('aria-label'),
+  };
+});
+
+await browser.close();
+
+const label = probe?.label || '';
+const results = {
+  canvas_found:               probe !== null,
+  is_svg:                     probe?.tagName === 'svg',
+  no_role_img:                probe?.role !== 'img',
+  has_roledescription:        probe?.roledesc === 'agent network topology',
+  label_mentions_online:      /5 agents online/.test(label),
+  label_mentions_working:     /3 working/.test(label),
+  label_mentions_offline:     /1 offline/.test(label),
+  label_mentions_links:       /2 active links/.test(label),
+  label_mentions_tab:         /Tab to navigate/.test(label),
+  label_mentions_doubleclick: /double-click/.test(label),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} canvas SVG aria:`, JSON.stringify(results),
+  `\n  probe=`, probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chat-target-breath-test.mjs

@@ -0,0 +1,84 @@
+/* Round 120 verification: chat-target ring breathes when chat is
+ * open. R51 added the static ring at radius+14; R120 adds a SMIL
+ * opacity pulse (±0.1, 3s) so the active chat session reads as
+ * "live" without being intrusive. Gated by reducedMotion.
+ *
+ * Drive chatAlias by clicking a node to open the popover. Verify:
+ *   - chat-target ring renders with data-chat-target-breath="on"
+ *   - the ring has an <animate> child with dur="3s"
+ *   - reducedMotion suppresses the breath
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const probe = async (reducedMotion) => {
+  const ctx = await browser.newContext({
+    viewport: { width: 1400, height: 1500 },
+    reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
+  });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(() => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', 'ring');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  });
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const mk = (alias) => ({
+      alias, status: 'idle', model: 'claude-opus-4', runtime: 'cli-claude-code',
+      network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    });
+    await route.fulfill({ response: r, json: { ...b, sessions: [mk('alpha'), mk('beta')] } });
+  });
+  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 === 2, { timeout: 30000 });
+  await page.waitForTimeout(400);
+
+  // Open chat by clicking the alpha node.
+  await page.locator('g[data-node="alpha"]').click();
+  await page.waitForTimeout(500);
+
+  const data = await page.evaluate(() => {
+    const ring = document.querySelector('[data-chat-target-ring]');
+    const anim = ring?.querySelector('animate');
+    return {
+      ringPresent: !!ring,
+      breathAttr:  ring?.getAttribute('data-chat-target-breath') || '',
+      hasAnimate:  !!anim,
+      dur:         anim?.getAttribute('dur') || null,
+    };
+  });
+  await ctx.close();
+  return data;
+};
+
+const normal  = await probe(false);
+const reduced = await probe(true);
+await browser.close();
+
+const results = {
+  normal_ringPresent:   normal.ringPresent === true,
+  normal_breathOn:      normal.breathAttr === 'on',
+  normal_hasAnimate:    normal.hasAnimate === true,
+  normal_dur3s:         normal.dur === '3s',
+  reduced_ringPresent:  reduced.ringPresent === true,
+  reduced_breathOff:    reduced.breathAttr === 'off',
+  reduced_noAnimate:    reduced.hasAnimate === false,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chat-target breath:`, JSON.stringify(results),
+  `\n  normal=`,  normal,
+  `\n  reduced=`, reduced);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chat-target-ring-ease-test.mjs

@@ -0,0 +1,82 @@
+/* Round 242 verification: chat-target ring (R183) transition list
+ * grows to include stroke + filter alongside the existing opacity
+ * gate, so a chat-target node's status flips (green→teal etc.) and
+ * the glow toggle (cyber theme) both ease over 200ms instead of
+ * snapping.
+ *
+ * The ring is always-mounted (R183 idiom) with opacity gated by
+ * isChat. Without setting a chat target, opacity stays at 0 — but
+ * the transition wiring is in style.transition regardless, so we
+ * can probe it without needing to demonstrate the easing live.
+ *
+ * Test scope per ring:
+ *   - data-chat-target-ring attr present (probe entry)
+ *   - data-chat-target-active='false' (no chat at default state)
+ *   - style.transition includes opacity / stroke / filter
+ *     each at 200ms (or 0.2s browser-normalised)
+ *   - stroke attribute present (color from status.primary)
+ *   - opacity attribute = 0 (gated by isChat=false)
+ */
+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';
+  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-chat-target-ring]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const rings = Array.from(document.querySelectorAll('[data-chat-target-ring]'));
+  return rings.map((r) => ({
+    active:     r.getAttribute('data-chat-target-active'),
+    stroke:     r.getAttribute('stroke'),
+    opacity:    r.getAttribute('opacity'),
+    transition: r.style.transition,
+  }));
+});
+await browser.close();
+
+const hasProp = (s, prop) => new RegExp(`${prop}\\s+(?:200ms|0\\.2s)`).test(s || '');
+
+const results = {
+  four_rings:                    probe.length === 4,
+  all_inactive:                  probe.every(r => r.active === 'false'),
+  all_have_stroke:               probe.every(r => typeof r.stroke === 'string' && r.stroke.length > 0),
+  all_opacity_zero:              probe.every(r => r.opacity === '0'),
+  all_transition_has_opacity:    probe.every(r => hasProp(r.transition, 'opacity')),
+  all_transition_has_stroke:     probe.every(r => hasProp(r.transition, 'stroke')),
+  all_transition_has_filter:     probe.every(r => hasProp(r.transition, 'filter')),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chat-target ring ease:`, JSON.stringify(results),
+  '\n  rings:', probe.map(r => ({ a: r.active, stroke: r.stroke, t: r.transition.slice(0, 80) })));
+process.exit(ok ? 0 : 1);