@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

package/scripts/topo-active-links-empty-recede-test.mjs

@@ -0,0 +1,125 @@
+/* Round 206 verification: active-links chip recedes to opacity 0.5
+ * when flowLinks.length === 0, mirroring R204 legend count recede and
+ * R205 working/online chip recede patterns at a third scope.
+ *
+ * Pre-R206 "0 active links" rendered at the same bg-gray-500/10 +
+ * opacity 1 as "12 active links" — only the absent cursor + missing
+ * tooltip signalled empty. R206 adds the visual recede so all three
+ * signals (visual / interactive / affordance) align.
+ *
+ * Test scenarios:
+ *   A. 0 messages → flowLinks.length === 0:
+ *      data-active-links-empty='true', clickable='false',
+ *      opacity ≈ 0.5
+ *   B. 3 messages → flowLinks.length === 3:
+ *      data-active-links-empty='false', clickable='true',
+ *      opacity = 1.0
+ *   Both: inline transition includes color/background-color/
+ *   border-color/opacity 200ms (4-property splice).
+ *   R193 hover-cyan markup preserved in scenario B className.
+ */
+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 setup(messages) {
+  const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(() => {
+    try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+  });
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const mk = (alias) => ({
+      alias, status: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+      network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    });
+    await route.fulfill({ response: r, json: { ...b, sessions: [
+      mk('alpha'), mk('beta'), mk('gamma'), 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-active-links-chip]', { timeout: 10000 });
+  await page.waitForTimeout(300);
+  return page;
+}
+
+const probe = async (page) => page.evaluate(() => {
+  const el = document.querySelector('[data-active-links-chip]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    className:  el.getAttribute('class') || '',
+    empty:      el.getAttribute('data-active-links-empty'),
+    clickable:  el.getAttribute('data-active-links-clickable'),
+    flowCount:  el.getAttribute('data-active-links-flow-count'),
+    opacity:    parseFloat(cs.opacity),
+    transition: el.style.transition,
+    bg:         cs.backgroundColor,
+  };
+});
+
+// Scenario A: empty
+const pageA = await setup([]);
+const probeA = await probe(pageA);
+await pageA.close();
+
+// Scenario B: populated
+const now = Date.now();
+const pageB = await setup([
+  { id: '1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi',
+    network_id: 'default', created_at: new Date(now - 1000).toISOString() },
+  { id: '2', from_alias: 'beta',  to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 2000).toISOString() },
+  { id: '3', from_alias: 'gamma', to_alias: 'delta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 3000).toISOString() },
+]);
+const probeB = await probe(pageB);
+await pageB.close();
+await browser.close();
+
+const near = (got, want, tol = 0.05) => Math.abs(got - want) < tol;
+const has = (s, re) => re.test(s || '');
+
+const results = {
+  // Scenario A: 0 flows
+  A_chip_present:           !!probeA,
+  A_flow_count_0:           probeA?.flowCount === '0',
+  A_empty_true:             probeA?.empty === 'true',
+  A_clickable_false:        probeA?.clickable === 'false',
+  A_opacity_half:           near(probeA?.opacity ?? 0, 0.5),
+  // hover variant NOT present on empty (only base bg-gray)
+  A_no_hover_variant:       !(probeA?.className || '').includes('hover:bg-cyan-500/10'),
+
+  // Scenario B: 3 flows
+  B_chip_present:           !!probeB,
+  B_flow_count_3:           probeB?.flowCount === '3',
+  B_empty_false:            probeB?.empty === 'false',
+  B_clickable_true:         probeB?.clickable === 'true',
+  B_opacity_full:           near(probeB?.opacity ?? 0, 1.0),
+  // R193 hover-cyan markup preserved
+  B_has_hover_variant:      (probeB?.className || '').includes('hover:bg-cyan-500/10'),
+
+  // Transition integrity — 4-property splice on both scenarios
+  A_transition_opacity:     has(probeA?.transition, /opacity\s+(?:200ms|0\.2s)/),
+  A_transition_bg:          has(probeA?.transition, /background-color\s+(?:200ms|0\.2s)/),
+  A_transition_color:       has(probeA?.transition, /\bcolor\s+(?:200ms|0\.2s)/),
+  A_transition_border:      has(probeA?.transition, /border-color\s+(?:200ms|0\.2s)/),
+  B_transition_opacity:     has(probeB?.transition, /opacity\s+(?:200ms|0\.2s)/),
+  B_transition_bg:          has(probeB?.transition, /background-color\s+(?:200ms|0\.2s)/),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links empty recede:`, JSON.stringify(results),
+  `\n  probeA (0 flows):`,  probeA,
+  `\n  probeB (3 flows):`,  probeB);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,113 @@
+/* Round 161 verification: active-links chip bullet picks up
+ * the R160 freshness vocabulary.
+ *
+ * R10 fades canvas flow edges by freshness. R160 brought that
+ * vocabulary to the recent-signal panel rows via a 1.6-px cyan
+ * pip at row left edge. R161 extends it one more scope — up to
+ * the fleet-aggregate active-links chip in the chip-row.
+ *
+ * The chip text was already "3 active links · last 5s ago" but
+ * the " · " separator was dead gray. R161 colors that bullet
+ * by freshness using the same alpha ramp:
+ *   ageSec ≤ 30   → 1.0 (fully fresh)
+ *   30-300s       → 1.0 → 0.25 smooth decay
+ *   > 300s        → 0.25 stale floor
+ *
+ * Three nested scopes now share one freshness ladder:
+ *   canvas edge fade  (R10)   — per-edge visual
+ *   row pip           (R160)  — per-flow row in recent-signal
+ *   chip bullet       (R161)  — fleet aggregate in chip-row
+ *
+ * Test scenarios (one page load each):
+ *   A. fresh most-recent flow (5s ago)  → alpha ≈ 1.0, fontWeight 700
+ *   B. mid recency (90s ago)            → alpha ≈ 0.83
+ *   C. stale (360s ago)                 → alpha ≈ 0.25 (floor)
+ *
+ * Color parses out of `rgba(34, 211, 238, 1)` cyber theme.
+ */
+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 {}
+});
+
+async function probe(msgAgeSec) {
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  await ctx.unroute('**/api/hub/status*').catch(() => {});
+  await ctx.unroute('**/api/hub/messages*').catch(() => {});
+  await ctx.unroute('**/api/hub/tasks*').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: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+      network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    });
+    await route.fulfill({ response: r, json: { ...b, sessions: [mk('alpha'), mk('beta')] } });
+  });
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+    { id: 'x', from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(Date.now() - msgAgeSec * 1000).toISOString() },
+  ] } }));
+  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.waitForSelector('[data-active-links-freshness-dot]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+  const out = await page.evaluate(() => {
+    const el = document.querySelector('[data-active-links-freshness-dot]');
+    if (!el) return null;
+    const styleColor = el.style.color || getComputedStyle(el).color;
+    return {
+      alpha: parseFloat(el.getAttribute('data-active-links-freshness-alpha') || ''),
+      color: styleColor,
+      fontWeight: el.style.fontWeight || getComputedStyle(el).fontWeight,
+      text: el.textContent,
+    };
+  });
+  await page.close();
+  return out;
+}
+
+const A = await probe(5);     // fresh
+const B = await probe(90);    // mid
+const C = await probe(360);   // stale
+
+await browser.close();
+
+const cyanRgb = (str) => {
+  // Inline `style="color: rgba(34, 211, 238, ...)"` — alpha is part of color.
+  const m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(str);
+  if (!m) return null;
+  return [Number(m[1]), Number(m[2]), Number(m[3])];
+};
+
+const results = {
+  fresh_dot_found:    A !== null,
+  mid_dot_found:      B !== null,
+  stale_dot_found:    C !== null,
+  fresh_alpha_1:      A && Math.abs(A.alpha - 1.0)  < 0.05,
+  mid_alpha_window:   B && B.alpha > 0.7 && B.alpha < 0.95,
+  stale_alpha_floor:  C && Math.abs(C.alpha - 0.25) < 0.05,
+  fresh_color_cyan:   A && JSON.stringify(cyanRgb(A.color)) === '[34,211,238]',
+  fresh_weight_bold:  A && (A.fontWeight === '700' || A.fontWeight === 'bold'),
+  stale_weight_norm:  C && (C.fontWeight === '400' || C.fontWeight === 'normal' || C.fontWeight === ''),
+  ladder_descends:    A && B && C && A.alpha > B.alpha && B.alpha > C.alpha,
+  text_is_separator:  A && A.text && A.text.trim() === '·',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links freshness:`, JSON.stringify(results),
+  `\n  fresh =`, A,
+  `\n  mid   =`, B,
+  `\n  stale =`, C);
+process.exit(ok ? 0 : 1);

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);