@sleep2agi/agent-network-dashboard 0.5.3-preview.21 → 0.5.3-preview.211

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

@@ -0,0 +1,18 @@
+/* Round 663 — vendor chip filter gains a 2nd outer drop-shadow at
+ * 6px with halved color-mix opacity on both pin (60%→30%) + hover
+ * (40%→20%) branches. 22nd anchor in multi-layer halo family.
+ */
+import { readFileSync } from 'node:fs';
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourcePin = /`drop-shadow\(0 0 3px color-mix\(in srgb, \$\{v\.color\} 60%, transparent\)\) drop-shadow\(0 0 6px color-mix\(in srgb, \$\{v\.color\} 30%, transparent\)\) brightness\(1\.15\)`/.test(src);
+const sourceHover = /`drop-shadow\(0 0 3px color-mix\(in srgb, \$\{v\.color\} 40%, transparent\)\) drop-shadow\(0 0 6px color-mix\(in srgb, \$\{v\.color\} 20%, transparent\)\) brightness\(1\.15\)`/.test(src);
+
+const results = {
+  source_pin_branch:   sourcePin,
+  source_hover_branch: sourceHover,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R663 vendor chip multi-layer halo (pin + hover branches):`,
+  JSON.stringify(results, null, 2));
+process.exit(ok ? 0 : 1);

package/scripts/topo-vendor-chip-pin-halo-test.mjs

@@ -0,0 +1,88 @@
+/* Round 690 — extends vendor letter glyph (R676) + count suffix (R688)
+ * halo gates from hover-only to (hover || pin). When a vendor is
+ * pinned, all 3 nested layers (outer chip rect R663 + inner letter +
+ * count) glow persistently in the brand hue. Closes vendor chip
+ * pin-gesture symmetry — sibling to R689 (working/online chip pin-
+ * gated halo).
+ *
+ * Source assertions:
+ *   - vendor letter glyph filter gate: (hoveredVendor || isPinned)
+ *   - count suffix filter gate:        (hoveredVendor || isPinned)
+ *   - halo-layers attrs reflect extended gate logic
+ *
+ * Runtime assertions:
+ *   - vendor letter glyphs + suffixes render (multiple vendors)
+ *   - rest halo-layers='0' on both (no hover, no pin)
+ */
+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,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('a·1', 'claude-opus-4'),
+    mk('a·2', 'gpt-4o'),
+    mk('a·3', 'gemini-pro'),
+  ] } });
+});
+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(300);
+
+const runtimeState = await page.evaluate(() => {
+  const glyphs = Array.from(document.querySelectorAll('[data-vendor-letter-glyph]'));
+  const suffixes = Array.from(document.querySelectorAll('[data-vendor-letter-count-suffix]'));
+  return {
+    glyphs_count:   glyphs.length,
+    suffixes_count: suffixes.length,
+    rest_glyph_layers_all_zero:   glyphs.every(el => el.getAttribute('data-vendor-letter-glyph-halo-layers') === '0'),
+    rest_suffix_layers_all_zero:  suffixes.every(el => el.getAttribute('data-vendor-letter-count-suffix-halo-layers') === '0'),
+  };
+});
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceGlyphGate  = /data-vendor-letter-glyph-halo-layers=\{\(hoveredVendor === v\.initial \|\| isPinned\) \? '2' : '0'\}/.test(src);
+const sourceSuffixGate = /data-vendor-letter-count-suffix-halo-layers=\{\(hoveredVendor === v\.initial \|\| isPinned\) \? '2' : '0'\}/.test(src);
+const sourceGlyphFilter  = /filter: \(hoveredVendor === v\.initial \|\| isPinned\) \? `drop-shadow\(0 0 2px \$\{v\.color\}80\) drop-shadow\(0 0 4px \$\{v\.color\}40\) brightness\(1\.15\)`/.test(src);
+const sourceSuffixFilter = /filter: \(hoveredVendor === v\.initial \|\| isPinned\)\s*\?\s*`drop-shadow\(0 0 2px \$\{v\.color\}80\) drop-shadow\(0 0 4px \$\{v\.color\}40\)`/.test(src);
+
+const results = {
+  glyphs_present:     runtimeState.glyphs_count >= 2,
+  suffixes_present:   runtimeState.suffixes_count >= 2,
+  rest_glyph_zero:    runtimeState.rest_glyph_layers_all_zero,
+  rest_suffix_zero:   runtimeState.rest_suffix_layers_all_zero,
+  source_glyph_gate:  sourceGlyphGate,
+  source_suffix_gate: sourceSuffixGate,
+  source_glyph_filter:  sourceGlyphFilter,
+  source_suffix_filter: sourceSuffixFilter,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R690 vendor letter glyph + count suffix pin-gated halo:`,
+  JSON.stringify(results, null, 2),
+  `\n  runtime: glyphs=${runtimeState.glyphs_count}, suffixes=${runtimeState.suffixes_count}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-vendor-count-suffix-halo-layers-test.mjs

@@ -0,0 +1,79 @@
+/* Round 688 — vendor count suffix `:N` (next to each vendor letter
+ * glyph) extends from 2 group-hover axes (opacity + tracking-wide)
+ * to also include multi-layer halo paint axis. Uses the SAME per-
+ * vendor v.color tint as the inner letter glyph (R676) and the outer
+ * chip (R663) — vendor letter chip now 3/3 nested elements glow in
+ * the same brand hue under hover. 2+4 stride, alpha 80/40.
+ *
+ * Source assertions:
+ *   - filter uses v.color at 80/40 with 2+4 stride, gated on
+ *     hoveredVendor === v.initial
+ *   - data-vendor-letter-count-suffix-halo-layers attr toggles '2'/'0'
+ *
+ * Runtime assertions:
+ *   - count suffix spans present (≥2 vendors so multiple ':N' renders)
+ *   - rest halo-layers='0' on all
+ */
+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,
+  });
+  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-count-suffix]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const restState = await page.evaluate(() => {
+  return Array.from(document.querySelectorAll('[data-vendor-letter-count-suffix]')).map(el => ({
+    layers: el.getAttribute('data-vendor-letter-count-suffix-halo-layers'),
+    text:   el.textContent,
+  }));
+});
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceFilter = /filter: hoveredVendor === v\.initial\s*\?\s*`drop-shadow\(0 0 2px \$\{v\.color\}80\) drop-shadow\(0 0 4px \$\{v\.color\}40\)`\s*: undefined/.test(src);
+const sourceAttr   = /data-vendor-letter-count-suffix-halo-layers=\{hoveredVendor === v\.initial \? '2' : '0'\}/.test(src);
+
+const results = {
+  suffixes_present:    restState.length >= 2,
+  rest_all_layers_0:   restState.every(e => e.layers === '0'),
+  source_filter:       sourceFilter,
+  source_layers_attr:  sourceAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R688 vendor count suffix multi-layer halo (closes vendor letter chip 3/3):`,
+  JSON.stringify(results, null, 2),
+  `\n  count: ${restState.length}, sample: ${JSON.stringify(restState.slice(0, 3))}`);
+process.exit(ok ? 0 : 1);

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