@sleep2agi/agent-network-dashboard 0.4.6-preview.4 → 0.4.6-preview.405

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-arrow-tier-test.mjs

@@ -0,0 +1,61 @@
+/* Round 16 verification: three flow-link arrow markers exist with the
+ * right sizes, all using userSpaceOnUse so they're decoupled from stroke. */
+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: 1280, height: 900 } });
+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.removeItem('anet-brand');
+    localStorage.removeItem('anet-topo-view');
+    localStorage.setItem('anet-topo-layout', 'grid');
+    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 sessions = ['a', 'b', 'c'].map(a => ({
+    alias: a, status: 'idle', network_id: nid, project_dir: null,
+    created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z',
+    last_seen_at: new Date().toISOString(),
+  }));
+  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(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return !!svg && svg.querySelectorAll('g[data-node]').length === 3;
+}, { timeout: 30000 }).catch(() => {});
+await page.waitForTimeout(400);
+
+const m = await page.evaluate(() => {
+  const reads = (id) => {
+    const el = document.querySelector(`marker#${id}`);
+    if (!el) return null;
+    return {
+      width: +el.getAttribute('markerWidth'),
+      units: el.getAttribute('markerUnits'),
+    };
+  };
+  return { s: reads('topo-arrow-s'), m: reads('topo-arrow'), l: reads('topo-arrow-l') };
+});
+
+await browser.close();
+const results = {
+  smallExists: m.s?.width === 12 && m.s?.units === 'userSpaceOnUse',
+  mediumExists: m.m?.width === 16 && m.m?.units === 'userSpaceOnUse',
+  largeExists: m.l?.width === 22 && m.l?.units === 'userSpaceOnUse',
+  legendCompatible: m.m !== null, // legend uses url(#topo-arrow); medium tier must exist by that id
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} arrow tiers:`, JSON.stringify(results), 'sizes:', m);
+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-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);