@sleep2agi/agent-network-dashboard 0.5.3 → 0.5.4

package/scripts/topo-vendor-letter-halo-layers-test.mjs

@@ -0,0 +1,93 @@
+/* Round 676 — vendor letter glyph (the per-vendor brand initial in
+ * the distribution chip) gains multi-layer halo on hover using its
+ * OWN per-vendor color (v.color) as tint. 35th anchor in family —
+ * first per-vendor anchor. Sibling to R671 legend-row count's per-
+ * tier row.fill pattern.
+ *
+ * Source assertions:
+ *   - filter chain uses v.color at 0x80 + 0x40 with 2+4 stride,
+ *     gated on hoveredVendor === v.initial
+ *   - transition list extends with 'filter 200ms ease-out'
+ *   - data-vendor-letter-glyph-halo-layers attr toggles '2' ↔ '0'
+ *
+ * Runtime assertions:
+ *   - vendor letter glyphs present in chip-row distribution chip
+ *   - rest state: halo-layers='0' on all glyphs
+ *   - hover gate consistency: hover='true' ↔ halo-layers='2'
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
+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';
+  // 3 vendors: Claude (claude-opus-4), GPT (gpt-4o), Gemini (gemini-pro)
+  // so the vendor distribution chip surfaces multiple letters
+  const mk = (alias, model) => ({
+    alias, status: 'idle', 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('a·1', 'claude-opus-4'),
+    mk('a·2', 'gpt-4o'),
+    mk('a·3', 'gemini-pro'),
+    mk('a·4', 'claude-opus-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: 'networkidle' });
+await page.waitForSelector('[data-vendor-letter-glyph]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(500);
+
+const restState = await page.evaluate(() => {
+  return Array.from(document.querySelectorAll('[data-vendor-letter-glyph]')).map(el => ({
+    initial:  el.getAttribute('data-vendor-letter-glyph'),
+    hover:    el.getAttribute('data-vendor-letter-glyph-hover'),
+    layers:   el.getAttribute('data-vendor-letter-glyph-halo-layers'),
+  }));
+});
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceFilter      = /filter: hoveredVendor === v\.initial \? `drop-shadow\(0 0 2px \$\{v\.color\}80\) drop-shadow\(0 0 4px \$\{v\.color\}40\) brightness\(1\.15\)` : undefined/.test(src);
+const sourceLayersAttr  = /data-vendor-letter-glyph-halo-layers=\{hoveredVendor === v\.initial \? '2' : '0'\}/.test(src);
+const sourceTransition  = /transition: 'transform 200ms ease-out, filter 200ms ease-out'/.test(src);
+
+// Gate consistency: hover ↔ layers must agree on every glyph.
+const allConsistent = restState.every(e =>
+  (e.hover === 'false' && e.layers === '0') ||
+  (e.hover === 'true'  && e.layers === '2')
+);
+
+const results = {
+  glyphs_present:        restState.length >= 2,
+  rest_all_layers_zero:  restState.every(e => e.layers === '0'),
+  rest_all_hover_false:  restState.every(e => e.hover === 'false'),
+  rest_gate_consistent:  allConsistent,
+  source_filter:         sourceFilter,
+  source_layers_attr:    sourceLayersAttr,
+  source_transition:     sourceTransition,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R676 vendor letter glyph multi-layer halo (per-vendor v.color tint):`,
+  JSON.stringify(results, null, 2),
+  `\n  rest: ${JSON.stringify(restState)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-vendor-pill-glow-test.mjs

@@ -0,0 +1,98 @@
+/* Round 545 verification: vendor filter pill gains vendorColor drop-
+ * shadow when rendered. 3rd of 4 pill variants after R543/R544.
+ * Source-canonical (banked R544 lesson — pin via UI is impractical for
+ * vendor chip surface; setPinnedVendor needs explicit click on vendor
+ * letter chip which renders only at vendorDist > 2).
+ *
+ * Test phases:
+ *   1. unpinned (default): no [data-active-filter="vendor"] element
+ *   2. source-side regex confirms filter wired with vendorColor via
+ *      color-mix 60% syntax
+ *   3. source-side scoping: filter wiring is INSIDE the vendor-pill block
+ *      (matched via setPinnedVendor handler proximity)
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
+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, model) => ({
+    alias, status: 'idle', model, runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // 3 vendors so vendor chip renders (vendorDist.length > 2 gate per R281)
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('a·1', 'claude-opus-4'),
+    mk('a·2', 'gemini-2.5-pro'),
+    mk('a·3', '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: 'networkidle' });
+await page.waitForSelector('[data-vendor-letter]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const unpinned = await page.evaluate(() =>
+  document.querySelector('[data-active-filter="vendor"]') !== null
+);
+
+// Phase 2: try to pin via clicking vendor letter chip (HTML element, hoverable)
+await page.click('[data-vendor-letter]');
+await page.waitForTimeout(400);
+
+const pillPresent = await page.evaluate(() =>
+  document.querySelector('[data-active-filter="vendor"]') !== null
+);
+
+let pinned = null;
+if (pillPresent) {
+  pinned = await page.evaluate(() => {
+    const el = document.querySelector('[data-active-filter="vendor"]');
+    if (!el) return null;
+    const cs = getComputedStyle(el);
+    return {
+      inlineFilter: el.style.filter,
+      filter: cs.filter,
+    };
+  });
+}
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+// Filter wiring: same color-mix pattern as R544 but with vendorColor not pal.legendAccent
+const vendorPillScope = src.match(/onClick=\{\(\) => setPinnedVendor\(null\)\}[\s\S]{0,2500}/)?.[0] || '';
+const sourceFilterScoped =
+  /filter: `drop-shadow\(0 0 3px color-mix\(in srgb, \$\{vendorColor\} 60%, transparent\)\)`,/.test(vendorPillScope);
+
+const results = {
+  unpinned_pill_absent:    unpinned === false,
+  pinned_pill_present:     pillPresent === true,
+  pinned_inline_filter:    pinned && /drop-shadow/.test(pinned.inlineFilter || ''),
+  pinned_computed_filter:  pinned && /drop-shadow/.test(pinned.filter || ''),
+  source_filter_scoped:    sourceFilterScoped,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R545 vendor filter pill glow:`,
+  JSON.stringify(results, null, 2),
+  '\n  unpinned absent:', unpinned,
+  '\n  pinned:', JSON.stringify(pinned));
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,100 @@
+/* Round 519 verification: brand watermark gains ambient SMIL breath
+ * animation — 呼吸感 family 3rd anchor.
+ *
+ * Test phases:
+ *   1. default (motion enabled): data-topo-brand-watermark-breath='true'
+ *      + <animate> child mounted inside the <text>
+ *      + animate values='0.32;0.48;0.32', dur='6s', repeatCount='indefinite'
+ *   2. prefers-reduced-motion: data-topo-brand-watermark-breath='false'
+ *      + NO <animate> child (gated out at JSX level)
+ *   3. source-side regex confirms SMIL gate + values + duration
+ *   4. zero-overlap is gated separately by topo-overlap-test.mjs
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+async function probe(reducedMotion) {
+  const browser = await chromium.launch({ headless: true });
+  const ctx = await browser.newContext({
+    viewport: { width: 1500, height: 1200 },
+    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: '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('a·1')] } });
+  });
+  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: 'networkidle' });
+  await page.waitForSelector('[data-topo-brand-watermark]', { timeout: 15000 });
+  await page.waitForTimeout(800);
+  const probe = await page.evaluate(() => {
+    const el = document.querySelector('[data-topo-brand-watermark]');
+    if (!el) return null;
+    const animate = el.querySelector('animate');
+    return {
+      attrBreath:    el.getAttribute('data-topo-brand-watermark-breath'),
+      hasAnimate:    !!animate,
+      attrName:      animate?.getAttribute('attributeName') || null,
+      values:        animate?.getAttribute('values') || null,
+      dur:           animate?.getAttribute('dur') || null,
+      repeatCount:   animate?.getAttribute('repeatCount') || null,
+      textContent:   el.textContent?.trim() || null,
+      opacity:       el.getAttribute('opacity'),
+    };
+  });
+  await browser.close();
+  return probe;
+}
+
+const normal  = await probe(false);
+const reduced = await probe(true);
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWiredGate =
+  /\{!reducedMotion && \(\s*<animate attributeName="opacity" values="0\.32;0\.48;0\.32" dur="6s" repeatCount="indefinite" \/>\s*\)\}/.test(src);
+const sourceWiredAttr =
+  /data-topo-brand-watermark-breath=\{reducedMotion \? 'false' : 'true'\}/.test(src);
+
+const results = {
+  // Phase 1: motion enabled
+  normal_attr_true:           normal?.attrBreath === 'true',
+  normal_has_animate:         normal?.hasAnimate === true,
+  normal_attr_name_opacity:   normal?.attrName === 'opacity',
+  normal_values_correct:      normal?.values === '0.32;0.48;0.32',
+  normal_dur_6s:              normal?.dur === '6s',
+  normal_repeat_indefinite:   normal?.repeatCount === 'indefinite',
+  normal_text_content:        normal?.textContent === 'sleep2agi',
+  normal_static_opacity_04:   normal?.opacity === '0.4',
+  // Phase 2: prefers-reduced-motion
+  reduced_attr_false:         reduced?.attrBreath === 'false',
+  reduced_no_animate:         reduced?.hasAnimate === false,
+  reduced_text_content:       reduced?.textContent === 'sleep2agi',
+  // Phase 3: source regex
+  source_animate_gated:       sourceWiredGate,
+  source_attr_wired:          sourceWiredAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R519 watermark breath:`, JSON.stringify(results, null, 2),
+  '\n  normal:', JSON.stringify(normal),
+  '\n  reduced:', JSON.stringify(reduced));
+process.exit(ok ? 0 : 1);

package/scripts/topo-watermark-dual-axis-breath-test.mjs

@@ -0,0 +1,88 @@
+/* Round 712 — watermark dual-axis breath. R519 6s opacity breath +
+ * R712 6s letter-spacing breath, both via SVG <animate>, both on
+ * the same <text> element, both at 6s cadence → in-phase dual-axis.
+ * Mirror to R711 H2 dual-axis on a different primary-identity surface.
+ *
+ * Assertions:
+ *   - watermark text element present
+ *   - R519 opacity <animate> child still present (regression)
+ *   - R712 letter-spacing <animate> child present
+ *   - both animates have dur="6s"
+ *   - both have repeatCount="indefinite"
+ *   - R712 values "0.45;0.55;0.45"
+ *   - source has the two animate elements paired
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
+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: '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('a·1'), mk('a·2')] } });
+});
+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: 'networkidle' });
+await page.waitForSelector('[data-topo-brand-watermark]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const runtimeState = await page.evaluate(() => {
+  const text = document.querySelector('[data-topo-brand-watermark]');
+  if (!text) return null;
+  const opacityAnim = text.querySelector('animate[attributeName="opacity"]');
+  const lsAnim = text.querySelector('animate[attributeName="letter-spacing"]');
+  return {
+    text_present: true,
+    opacity_anim_present: !!opacityAnim,
+    opacity_dur: opacityAnim?.getAttribute('dur'),
+    opacity_values: opacityAnim?.getAttribute('values'),
+    ls_anim_present: !!lsAnim,
+    ls_dur: lsAnim?.getAttribute('dur'),
+    ls_values: lsAnim?.getAttribute('values'),
+    ls_repeat: lsAnim?.getAttribute('repeatCount'),
+  };
+});
+
+await browser.close();
+
+const tsxSrc = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const tsxR519Preserved = /<animate attributeName="opacity" values="0\.32;0\.48;0\.32" dur="6s" repeatCount="indefinite" \/>/.test(tsxSrc);
+const tsxR712LetterSpacing = /<animate attributeName="letter-spacing" values="0\.45;0\.55;0\.45" dur="6s" repeatCount="indefinite" \/>/.test(tsxSrc);
+
+const results = {
+  text_present:                 !!runtimeState?.text_present,
+  opacity_anim_preserved:       runtimeState?.opacity_anim_present === true,
+  opacity_dur_6s:               runtimeState?.opacity_dur === '6s',
+  opacity_values_kept:          runtimeState?.opacity_values === '0.32;0.48;0.32',
+  ls_anim_present:              runtimeState?.ls_anim_present === true,
+  ls_dur_6s:                    runtimeState?.ls_dur === '6s',
+  ls_values:                    runtimeState?.ls_values === '0.45;0.55;0.45',
+  ls_repeat_indef:              runtimeState?.ls_repeat === 'indefinite',
+  tsx_r519_preserved:           tsxR519Preserved,
+  tsx_r712_letter_spacing:      tsxR712LetterSpacing,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R712 watermark dual-axis breath (opacity + letter-spacing both at 6s — SVG primary-identity dual):`,
+  JSON.stringify(results, null, 2),
+  `\n  runtime: ${JSON.stringify(runtimeState)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-watermark-envelope-breath-test.mjs

@@ -0,0 +1,88 @@
+/* Round 704 — brand watermark wrapper envelope breath at 15s. Slowest
+ * tier in respiratory rolodex. Nested respiration: inner "sleep2agi"
+ * text breathes at 6s (R519); this wrapper envelope at 15s creates
+ * fast-inner / slow-outer layered effect. Focal-recede gate via
+ * [data-topo-brand-watermark-recede="true"] → animation: none.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
+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: '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('a·1'), mk('a·2')] } });
+});
+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: 'networkidle' });
+await page.waitForSelector('[data-topo-brand-watermark-wrapper]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const runtimeState = await page.evaluate(() => {
+  const g = document.querySelector('[data-topo-brand-watermark-wrapper]');
+  if (!g) return null;
+  const cs = getComputedStyle(g);
+  return {
+    has_class: g.classList.contains('anet-topo-brand-watermark-envelope-breath'),
+    breath_attr: g.getAttribute('data-topo-brand-watermark-envelope-breath'),
+    recede_attr: g.getAttribute('data-topo-brand-watermark-recede'),
+    anim_name: cs.animationName,
+    anim_duration: cs.animationDuration,
+    anim_iter: cs.animationIterationCount,
+  };
+});
+
+await browser.close();
+
+const cssSrc = readFileSync('/home/vansin/agent-network-dashboard/app/globals.css', 'utf8');
+const tsxSrc = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+
+const cssKeyframes = /@keyframes anet-topo-brand-watermark-envelope-breath-kf\s*\{[\s\S]*?0%, 100%\s*\{\s*opacity:\s*1;\s*\}[\s\S]*?50%\s*\{\s*opacity:\s*0\.85;/.test(cssSrc);
+const cssRule = /\.anet-topo-brand-watermark-envelope-breath\s*\{[\s\S]*?animation:\s*anet-topo-brand-watermark-envelope-breath-kf\s+15s\s+ease-in-out\s+infinite/.test(cssSrc);
+const cssRecedeGate = /\.anet-topo-brand-watermark-envelope-breath\[data-topo-brand-watermark-recede="true"\]\s*\{\s*animation:\s*none/.test(cssSrc);
+const cssReducedMotion = /prefers-reduced-motion:\s*reduce\s*\)\s*\{\s*\.anet-topo-brand-watermark-envelope-breath\s*\{\s*animation:\s*none/.test(cssSrc);
+const tsxClass = /className="anet-topo-brand-watermark-envelope-breath"/.test(tsxSrc);
+const tsxAttr = /data-topo-brand-watermark-envelope-breath="15s"/.test(tsxSrc);
+
+const runtimeAnim = runtimeState?.anim_name === 'anet-topo-brand-watermark-envelope-breath-kf' || runtimeState?.anim_name === 'none';
+const runtimeDuration = runtimeState?.anim_duration === '15s' || runtimeState?.anim_name === 'none';
+
+const results = {
+  wrapper_present:       !!runtimeState,
+  has_breath_class:      runtimeState?.has_class === true,
+  breath_attr_15s:       runtimeState?.breath_attr === '15s',
+  rest_not_recede:       runtimeState?.recede_attr === 'false',
+  runtime_anim_ok:       runtimeAnim,
+  runtime_duration_ok:   runtimeDuration,
+  css_keyframes:         cssKeyframes,
+  css_rule:              cssRule,
+  css_recede_gate:       cssRecedeGate,
+  css_reduced_motion:    cssReducedMotion,
+  tsx_class:             tsxClass,
+  tsx_breath_attr:       tsxAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R704 brand watermark wrapper envelope breath (15s, recede-gated — slowest tier):`,
+  JSON.stringify(results, null, 2),
+  `\n  runtime: ${JSON.stringify(runtimeState)}`);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,114 @@
+/* Round 525 verification: brand watermark gains focal-recede on
+ * non-hub canvas hover — extends R507/R508 focal-recede pattern to
+ * 3rd anchor.
+ *
+ * Test phases:
+ *   1. rest:  wrapper opacity=1, recede attr='false'
+ *   2. hover an alias (non-hub canvas surface): wrapper opacity=0.7,
+ *      recede attr='true'
+ *   3. mouseleave: wrapper opacity returns to 1
+ *   4. SMIL <animate> still mounted on inner text (R519 preserved)
+ *   5. source-side regex confirms wrapper opacity ternary + attr
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
+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: '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·1'), mk('alpha·2'), mk('alpha·3'),
+  ] } });
+});
+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: 'networkidle' });
+await page.waitForSelector('[data-topo-brand-watermark-wrapper]', { timeout: 15000 });
+await page.waitForTimeout(800);
+
+// Phase 1: rest
+const rest = await page.evaluate(() => {
+  const w = document.querySelector('[data-topo-brand-watermark-wrapper]');
+  const t = document.querySelector('[data-topo-brand-watermark]');
+  const animate = t?.querySelector('animate');
+  return {
+    wOpacity:    w?.getAttribute('opacity'),
+    wRecede:     w?.getAttribute('data-topo-brand-watermark-recede'),
+    hasAnimate:  !!animate,
+    textContent: t?.textContent?.trim() || null,
+  };
+});
+
+// Phase 2: trigger focal-recede via hoveredStatus by hovering the
+// legend `idle` row's label. setHoveredStatus is one of the recede
+// gate vars; the label is a stable hover target (HTML+SVG safe per
+// R518 test path).
+await page.hover('[data-legend-row-label="idle"]');
+await page.waitForTimeout(400);
+const hover = await page.evaluate(() => {
+  const w = document.querySelector('[data-topo-brand-watermark-wrapper]');
+  return {
+    wOpacity: w?.getAttribute('opacity'),
+    wRecede:  w?.getAttribute('data-topo-brand-watermark-recede'),
+  };
+});
+
+// Phase 3: physical mouse move far away from any hover target
+await page.mouse.move(900, 50);
+await page.waitForTimeout(400);
+const leave = await page.evaluate(() => {
+  const w = document.querySelector('[data-topo-brand-watermark-wrapper]');
+  return {
+    wOpacity: w?.getAttribute('opacity'),
+    wRecede:  w?.getAttribute('data-topo-brand-watermark-recede'),
+  };
+});
+
+await browser.close();
+
+// Source regex
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWiredOpacity =
+  /opacity=\{\(hoveredAlias \|\| hoveredEdgeKey \|\| hoveredGroupLabel \|\|\s*hoveredStatus \|\| hoveredVendor\) && !hoveredHub \? 0\.7 : 1\}/.test(src);
+const sourceWiredAttr =
+  /data-topo-brand-watermark-recede=\{\s*\(hoveredAlias \|\| hoveredEdgeKey \|\| hoveredGroupLabel \|\|\s*hoveredStatus \|\| hoveredVendor\) && !hoveredHub \? 'true' : 'false'\s*\}/.test(src);
+
+const results = {
+  rest_wrapper_opacity_1:    rest?.wOpacity === '1',
+  rest_recede_false:         rest?.wRecede === 'false',
+  rest_has_animate:          rest?.hasAnimate === true,  // R519 SMIL preserved
+  rest_text_content:         rest?.textContent === 'sleep2agi',
+  hover_wrapper_opacity_07:  hover?.wOpacity === '0.7',
+  hover_recede_true:         hover?.wRecede === 'true',
+  leave_wrapper_opacity_1:   leave?.wOpacity === '1',
+  leave_recede_false:        leave?.wRecede === 'false',
+  source_opacity_wired:      sourceWiredOpacity,
+  source_attr_wired:         sourceWiredAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R525 watermark focal-recede:`,
+  JSON.stringify(results, null, 2),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  hover:', JSON.stringify(hover),
+  '\n  leave:', JSON.stringify(leave));
+process.exit(ok ? 0 : 1);