@sleep2agi/agent-network-dashboard 0.5.3 → 0.5.5-preview.0

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-distribution-wrapper-halo-test.mjs

@@ -0,0 +1,93 @@
+/* Round 698 — vendor-distribution chip-row outer wrapper joins the
+ * R697 wrapper-level :has() halo family. Pre-R698 only the chrome-strip
+ * wrappers (Layout/nodeSize/zoom) echoed inner-button hover at the
+ * parent scope. R698 extends to a NEW parent: the vendor-distribution
+ * chip-row outer <span>. Inner vendor letter chips are <span role="button">
+ * (not real <button>), so the CSS uses :has([role="button"]:hover) — a
+ * new selector variant extending R697's vocabulary from real-button
+ * children to ARIA-button children.
+ *
+ * Source assertions:
+ *   - globals.css :has([role="button"]:hover) rule on wrapper attr
+ *   - globals.css transition rule for the wrapper includes filter
+ *   - TopoGraph.tsx outer <span> has data-topo-chrome-vendor-distribution-wrapper
+ *
+ * Runtime assertions:
+ *   - wrapper present when vendorDist.length > 2 (3+ vendors)
+ *   - data-attr matches "true"
+ *
+ * Mock 3 vendors so vendorDist.length > 2 triggers the chip row.
+ */
+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 distinct vendors → vendorDist.length === 3 → chip row renders.
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('a·1', 'claude-opus-4'),
+    mk('a·2', 'gpt-5'),
+    mk('a·3', 'glm-4.6'),
+  ] } });
+});
+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-chrome-vendor-distribution-wrapper]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const runtimeState = await page.evaluate(() => {
+  const wrapper = document.querySelector('[data-topo-chrome-vendor-distribution-wrapper]');
+  if (!wrapper) return null;
+  // Count inner role="button" children (the vendor letter chips).
+  const innerChips = wrapper.querySelectorAll('[role="button"]');
+  return {
+    wrapper_present: true,
+    wrapper_attr: wrapper.getAttribute('data-topo-chrome-vendor-distribution-wrapper'),
+    inner_role_button_count: innerChips.length,
+  };
+});
+
+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 cssHoverRule = /\[data-topo-chrome-vendor-distribution-wrapper\]:has\(\[role="button"\]:hover\)\s*\{[\s\S]*?drop-shadow\(0 0 2px rgba\(103, 232, 249, 0\.5\)\)[\s\S]*?drop-shadow\(0 0 4px rgba\(103, 232, 249, 0\.25\)\)/.test(cssSrc);
+const cssTransition = /\[data-topo-chrome-vendor-distribution-wrapper\]\s*\{[\s\S]*?transition:[\s\S]*?filter 200ms/.test(cssSrc);
+const tsxWrapperAttr = /data-topo-chrome-vendor-distribution-wrapper="true"/.test(tsxSrc);
+
+const results = {
+  wrapper_present:        !!runtimeState?.wrapper_present,
+  wrapper_attr_true:      runtimeState?.wrapper_attr === 'true',
+  inner_chips_present:    (runtimeState?.inner_role_button_count ?? 0) >= 3,
+  css_hover_rule:         cssHoverRule,
+  css_transition:         cssTransition,
+  tsx_wrapper_attr:       tsxWrapperAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R698 vendor-distribution wrapper :has() multi-layer halo (54th anchor — 2nd wrapper-level :has() anchor):`,
+  JSON.stringify(results, null, 2),
+  `\n  runtime: ${JSON.stringify(runtimeState)}`);
+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-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);