@sleep2agi/agent-network-dashboard 0.4.6-preview.99 → 0.5.0

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-brand-logo-transition-test.mjs

@@ -0,0 +1,94 @@
+/* Round 297 verification: brand-logo color transition.
+ *
+ * Codex's bbde2b7-era title-block sleep2agi crescent logo had
+ * theme-conditional color (cyber #67e8f9 ↔ light #0d9488) but no
+ * CSS transition — theme flips snapped the moon color in one
+ * frame. R297 adds `transition: color 200ms ease-out` so the
+ * brand mark joins the coordinated theme-toggle choreography
+ * (R245/R246/R247/R253/R254).
+ *
+ * Contract:
+ *   - [data-topo-brand-logo] is present (regression — codex's
+ *     integration shipped).
+ *   - computed transition includes 'color' with ~200ms duration.
+ *   - computed color matches cyber palette (#67e8f9 in cyber theme).
+ *   - R296 kicker color stays gray-500 (regression).
+ *   - R295 swatch r=6 + R294 pulse absent intact.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias, model) => ({
+    alias, status: 'working', model, runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  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-brand-logo]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const logo = document.querySelector('[data-topo-brand-logo]');
+  if (!logo) return null;
+  const cs = getComputedStyle(logo);
+  const kicker = document.querySelector('[data-topo-section-kicker]');
+  const kCs = kicker ? getComputedStyle(kicker) : null;
+  const swatch = document.querySelector('[data-legend-swatch="working"]');
+  const pulses = document.querySelectorAll('[data-pulse-wrapper]');
+  return {
+    color:          cs.color,
+    transition:     cs.transition,
+    width:          logo.getAttribute('width'),
+    kickerColor:    kCs?.color ?? null,
+    swatchR:        swatch?.getAttribute('r') ?? null,
+    pulseCount:     pulses.length,
+  };
+});
+await browser.close();
+
+const hasColorTransition = (s) => /color\s+0?\.?\d*s|color\s+\d+ms/i.test(s || '');
+const isAround200ms = (s) => /(color\s+200ms|0\.2s)/i.test(s || '');
+
+// gray-600 (#4b5563 = rgb(75,85,99))
+const isNotGray600 = (s) => !/rgba?\(\s*75\s*,\s*85\s*,\s*99/.test(s || '');
+// gray-500 (#6b7280 = rgb(107,114,128))
+const isGrayish = (s) => /(rgb|oklab|lab|oklch|hsl)/.test(s || '');
+
+const results = {
+  brand_logo_present:       probe !== null,
+  // R316 bumped width 36 → 40; assertion updated.
+  brand_logo_width_40:      probe?.width === '40',
+  transition_has_color:     hasColorTransition(probe?.transition),
+  transition_200ms:         isAround200ms(probe?.transition),
+  r296_kicker_not_gray600:  isNotGray600(probe?.kickerColor),
+  r296_kicker_grayish:      isGrayish(probe?.kickerColor),
+  r295_swatch_r_6:          probe?.swatchR === '6',
+  r294_pulse_absent:        probe?.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} brand-logo transition:`, JSON.stringify(results),
+  '\n  logo color:', probe?.color,
+  '\n  logo transition:', probe?.transition,
+  '\n  kicker color:', probe?.kickerColor);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,97 @@
+/* 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);
+
+const probe = await page.evaluate(() => {
+  const mark = document.querySelector('[data-topo-brand-watermark]');
+  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,
+    opacity:        mark?.getAttribute('opacity') ?? 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_is_16:           probe.x === 16,
+  watermark_y_is_672:          probe.y === 672,
+  watermark_opacity_0_4:       probe.opacity === '0.4',
+  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  opacity:', probe.opacity,
+  '\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-canvas-brand-fade-test.mjs

@@ -0,0 +1,87 @@
+/* Round 327 verification: canvas brand crescent (top-left corner,
+ * codex-shipped via 1817f55 Hero 3 §3.I) joins the always-mount-
+ * opacity-gate family. Pre-R327 it conditionally mounted on
+ * `flowLinks.length === 0` — first flow arriving SNAP-removed it.
+ * Now always-mounted with opacity={flowLinks.length === 0 ? 0.35 : 0}
+ * + transition opacity 300ms ease-out so the crescent crossfades
+ * in/out as the recent-signal panel state flips.
+ *
+ * 11th surface in the always-mount-opacity-gate idiom family
+ * (R181/R182/R183/R213×2/R214/R215/R221/R222/R223/R327).
+ *
+ * Contract:
+ *   - [data-topo-brand-canvas-mark] is present (always-mounted).
+ *   - When flowLinks.length === 0 (no messages mocked): opacity=0.35
+ *     + data-topo-brand-canvas-mark-visible='true'.
+ *   - Computed style.transition contains 'opacity'.
+ *   - R326 chrome gap-2 + R317/R318 chrome regressions intact.
+ *   - R294 pulse absent.
+ */
+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') ] } });
+});
+// Zero messages: recent-signal panel hidden, brand crescent visible.
+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-brand-canvas-mark]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const mark = document.querySelector('[data-topo-brand-canvas-mark]');
+  const chrome = document.querySelector('[data-topo-chrome]');
+  return {
+    markPresent:        mark !== null,
+    markOpacityAttr:    mark?.getAttribute('opacity') ?? null,
+    markVisibleAttr:    mark?.getAttribute('data-topo-brand-canvas-mark-visible') ?? null,
+    markTransition:     mark ? getComputedStyle(mark).transition : null,
+    // R326 regression: chrome strip gap-2.
+    chromeGap:          chrome ? getComputedStyle(chrome).columnGap : null,
+    layoutInactiveCls:  document.querySelector('[data-topo-chrome-layout="grid"]')?.className ?? '',
+    layoutActiveCls:    document.querySelector('[data-topo-chrome-layout="ring"]')?.className ?? '',
+    pulseCount:         document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const hasOpacityTransition = (s) => /opacity\s+0?\.?\d*s|opacity\s+\d+ms/i.test(s || '');
+
+const results = {
+  mark_present:               probe.markPresent,
+  mark_visible_when_empty:    probe.markVisibleAttr === 'true',
+  mark_opacity_0_35:          probe.markOpacityAttr === '0.35',
+  mark_has_opacity_trans:     hasOpacityTransition(probe.markTransition),
+  // R326 regression.
+  r326_chrome_gap_8px:        probe.chromeGap === '8px',
+  // R317 / R318 chrome regression.
+  r317_inactive_gray_400:     probe.layoutInactiveCls.includes('text-gray-400'),
+  r318_active_font_medium:    probe.layoutActiveCls.includes('font-medium'),
+  r294_pulse_absent:          probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} canvas-brand crescent fade:`, JSON.stringify(results),
+  '\n  opacity attr:', probe.markOpacityAttr,
+  '\n  visible attr:', probe.markVisibleAttr,
+  '\n  transition:',   probe.markTransition);
+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);