@sleep2agi/agent-network-dashboard 0.5.3-preview.99 → 0.5.4

package/scripts/topo-title-block-entrance-animation-test.mjs

@@ -0,0 +1,127 @@
+/* Round 742 — title-block entrance animation. 2nd member of the
+ * entrance family (after R740 canvas root). Staggered choreography:
+ *   R740 canvas        0   → 600 ms   scale 0.99 → 1, opacity 0.8 → 1
+ *   R742 title-block   200 → 700 ms   translateY -4 → 0, opacity 0.7 → 1
+ *
+ * Assertions:
+ *   - .anet-topo-title-block-entrance class on title-block wrapper
+ *   - data-topo-section-titleblock-entrance="true"
+ *   - CSS @keyframes 0% translateY(-4px) opacity 0.7 → 100% translateY(0) opacity 1
+ *   - .anet-topo-title-block-entrance binds 500ms ease-out 200ms delay
+ *   - animation NOT infinite (runtime iteration count === '1')
+ *   - prefers-reduced-motion guard present
+ *   - Animation completes within ~900ms (200ms delay + 500ms + 200ms buffer)
+ *     → after 900ms wait, computed transform is identity & opacity = 1
+ *   - Existing R706 envelope-breath class still composed (regression)
+ *   - R741 catalog one-shot-mount.members === 2, includes title-block in examples
+ *   - R740 canvas entrance still present (regression)
+ */
+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-section-titleblock-group]', { timeout: 15000, state: 'attached' });
+/* Wait for both R740 (0-600ms) and R742 (200-700ms) animations to
+ * complete plus a safety buffer. */
+await page.waitForTimeout(900);
+
+const state = await page.evaluate(() => {
+  const tb = document.querySelector('[data-topo-section-titleblock-group]');
+  const svg = document.querySelector('[data-topo-canvas-aria]');
+  if (!tb) return null;
+  const cs = getComputedStyle(tb);
+  return {
+    has_entrance_class:        tb.classList.contains('anet-topo-title-block-entrance'),
+    entrance_attr:             tb.getAttribute('data-topo-section-titleblock-entrance'),
+    envelope_breath_kept:      tb.classList.contains('anet-topo-title-block-envelope-breath'),
+    anim_name:                 cs.animationName,
+    anim_duration:             cs.animationDuration,
+    anim_delay:                cs.animationDelay,
+    anim_iteration:            cs.animationIterationCount,
+    computed_transform:        cs.transform,
+    computed_opacity:          cs.opacity,
+    canvas_entrance_class:     svg?.classList.contains('anet-topo-canvas-entrance') ?? null,
+    temporal_modes:            svg?.getAttribute('data-topo-animation-temporal-modes') ?? null,
+  };
+});
+
+await browser.close();
+
+const cssSrc = readFileSync('/home/vansin/agent-network-dashboard/app/globals.css', 'utf8');
+const cssKfStart = /@keyframes anet-topo-title-block-entrance-kf\s*\{[\s\S]*?0%\s*\{[\s\S]*?transform:\s*translateY\(-4px\)[\s\S]*?opacity:\s*0\.7/.test(cssSrc);
+const cssKfEnd   = /@keyframes anet-topo-title-block-entrance-kf\s*\{[\s\S]*?100%\s*\{[\s\S]*?transform:\s*translateY\(0\)[\s\S]*?opacity:\s*1/.test(cssSrc);
+const cssClassBound = /\.anet-topo-title-block-entrance\s*\{[\s\S]*?animation:\s*anet-topo-title-block-entrance-kf\s+500ms\s+ease-out\s+200ms\s+backwards/.test(cssSrc);
+const cssReducedMotion = /@media\s*\(prefers-reduced-motion:\s*reduce\)\s*\{[\s\S]*?\.anet-topo-title-block-entrance\s*\{\s*animation:\s*none/.test(cssSrc);
+
+const transformSettled = state?.computed_transform === 'none'
+  || state?.computed_transform === 'matrix(1, 0, 0, 1, 0, 0)';
+/* The title-block carries TWO animations via the R742 compound:
+ *   1. entrance      one-shot, 500ms — settles after ~700ms
+ *   2. envelope-breath infinite, 11s — opacity 0.92 ↔ 1 forever (R706)
+ * After the entrance completes, opacity is governed by the ongoing
+ * envelope breath, so it sits SOMEWHERE in [0.92, 1] — never exactly
+ * 1 at a random sample. Assert opacity ∈ [0.90, 1.00] (the R706
+ * breath band with a small tolerance) rather than === 1. */
+const opacityInBreathBand = (() => {
+  const o = parseFloat(state?.computed_opacity ?? '0');
+  return o >= 0.90 && o <= 1.0;
+})();
+/* The compound animation's FIRST entry is the one-shot entrance;
+ * the SECOND is the infinite breath. Verify the entrance part is
+ * one-shot by checking the first iteration-count token === '1'. */
+const entranceIsOneShot = (state?.anim_iteration ?? '').split(',')[0].trim() === '1';
+const entranceIsFirstInCompound = (state?.anim_name ?? '').split(',')[0].trim() === 'anet-topo-title-block-entrance-kf';
+
+let modes = null;
+try { modes = JSON.parse(state?.temporal_modes ?? ''); } catch {}
+const oneShot = Array.isArray(modes) ? modes.find(m => m.mode === 'one-shot-mount') : null;
+const oneShotHas2 = oneShot?.members === 2 && Array.isArray(oneShot?.examples) && oneShot.examples.includes('title-block');
+
+const results = {
+  has_entrance_class:              state?.has_entrance_class === true,
+  entrance_attr_true:              state?.entrance_attr === 'true',
+  envelope_breath_kept:            state?.envelope_breath_kept === true,
+  css_keyframe_start:              cssKfStart,
+  css_keyframe_end:                cssKfEnd,
+  css_class_binds_500ms_delay_200: cssClassBound,
+  css_reduced_motion_guard:        cssReducedMotion,
+  entrance_part_is_one_shot:       entranceIsOneShot,
+  entrance_first_in_compound:      entranceIsFirstInCompound,
+  transform_settled:               transformSettled,
+  opacity_in_breath_band:          opacityInBreathBand,
+  r740_canvas_entrance_kept:       state?.canvas_entrance_class === true,
+  r741_one_shot_members_now_2:     oneShotHas2,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R742 title-block entrance animation (2nd one-shot member, staggered after canvas):`,
+  JSON.stringify(results, null, 2),
+  `\n  state: ${JSON.stringify(state)}`,
+  `\n  one-shot entry: ${JSON.stringify(oneShot)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-title-block-envelope-breath-test.mjs

@@ -0,0 +1,87 @@
+/* Round 706 — title-block wrapper envelope breath at 11s. Mirrors the
+ * canvas-brand-pair nested-envelope pattern (R704/R705) at the title-
+ * block scope. Creates triply-nested respiration: 3 inner trio anchors
+ * (brand-logo 5s + kicker 6s + H2 10s) inside outer wrapper (11s).
+ *
+ * 11s coprime with all 3 inner cadences (5, 6, 10) — no common factor.
+ * Tighter alpha (0.92 ↔ 1, ~8%) than canvas-brand envelopes since
+ * title-block carries primary text identity.
+ */
+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-section-titleblock-group]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const runtimeState = await page.evaluate(() => {
+  const wrap = document.querySelector('[data-topo-section-titleblock-group]');
+  if (!wrap) return null;
+  const cs = getComputedStyle(wrap);
+  return {
+    has_class: wrap.classList.contains('anet-topo-title-block-envelope-breath'),
+    breath_attr: wrap.getAttribute('data-topo-section-titleblock-envelope-breath'),
+    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-title-block-envelope-breath-kf\s*\{[\s\S]*?0%, 100%\s*\{\s*opacity:\s*1;\s*\}[\s\S]*?50%\s*\{\s*opacity:\s*0\.92;/.test(cssSrc);
+const cssRule = /\.anet-topo-title-block-envelope-breath\s*\{[\s\S]*?animation:\s*anet-topo-title-block-envelope-breath-kf\s+11s\s+ease-in-out\s+infinite/.test(cssSrc);
+const cssReducedMotion = /prefers-reduced-motion:\s*reduce\s*\)\s*\{\s*\.anet-topo-title-block-envelope-breath\s*\{\s*animation:\s*none/.test(cssSrc);
+const tsxClass = /anet-topo-title-block-envelope-breath group flex items-center gap-2\.5/.test(tsxSrc);
+const tsxAttr = /data-topo-section-titleblock-envelope-breath="11s"/.test(tsxSrc);
+
+const runtimeAnim = runtimeState?.anim_name === 'anet-topo-title-block-envelope-breath-kf' || runtimeState?.anim_name === 'none';
+const runtimeDuration = runtimeState?.anim_duration === '11s' || runtimeState?.anim_name === 'none';
+
+const results = {
+  wrapper_present:       !!runtimeState,
+  has_breath_class:      runtimeState?.has_class === true,
+  breath_attr_11s:       runtimeState?.breath_attr === '11s',
+  runtime_anim_ok:       runtimeAnim,
+  runtime_duration_ok:   runtimeDuration,
+  css_keyframes:         cssKeyframes,
+  css_rule:              cssRule,
+  css_reduced_motion:    cssReducedMotion,
+  tsx_class:             tsxClass,
+  tsx_breath_attr:       tsxAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R706 title-block wrapper envelope breath (11s, triply-nested respiration):`,
+  JSON.stringify(results, null, 2),
+  `\n  runtime: ${JSON.stringify(runtimeState)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-tree-diag.mjs

@@ -0,0 +1,95 @@
+/* Diagnostic: compare grid vs tree node frontend presentation.
+ * Vincent UX complaint — tree view "没有像 grid 视图那样的前端展示".
+ * Screenshots both layouts + dumps per-node visual element counts. */
+import { chromium } from 'playwright';
+import { readFileSync, mkdirSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+mkdirSync('/tmp/anet-tree-diag', { recursive: true });
+
+const lead = (a) => ({ alias: a, runtime: 'claude-code-cli' });
+const dep = (a) => ({ alias: a, runtime: 'codex-sdk' });
+const mem = (a) => ({ alias: a, runtime: 'claude-agent-sdk' });
+const FLEET = [
+  lead('总指挥'), lead('副指挥A'), lead('副指挥B'),
+  [lead, dep, mem, mem, mem, mem].map((f, i) => f(['A站内容', 'A站评测', 'A站数据', 'A站设计', 'A站运营', 'A站工程'][i])),
+  [lead, dep, mem, mem, mem].map((f, i) => f(['B站产品', 'B站工程', 'B站测试', 'B站运维', 'B站运营'][i])),
+  [lead, dep, mem, mem].map((f, i) => f(['P站产品', 'P站工程', 'P站测试', 'P站运维'][i])),
+  [lead, dep, mem, mem].map((f, i) => f(['通信龙', '通信牛', '通信马', '通信SDK马'][i])),
+  ['srv-a', 'srv-b', 'srv-c'].map(a => ({ alias: a, runtime: 'http-api', project_dir: '/home/v/agent-orchestra' })),
+  ['群星马', '书生1号', '微信马', '飞书马', '独立节点', '研究员1号', '研究员2号', '游侠马'].map(a => mem(a)),
+].flat();
+
+const browser = await chromium.launch({ headless: true });
+
+async function shot(layout) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 920 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript((lay) => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.removeItem('anet-brand');
+      localStorage.removeItem('anet-topo-view');
+      localStorage.removeItem('anet-topo-nodescale');
+      localStorage.setItem('anet-topo-layout', lay);
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, layout);
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const sessions = FLEET.map((f, i) => ({
+      alias: f.alias, status: i % 5 === 0 ? 'working' : 'idle', network_id: nid,
+      project_dir: f.project_dir ?? null, runtime: f.runtime ?? null,
+      created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z',
+      last_seen_at: new Date().toISOString(),
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('g[data-node]').length > 20;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(1200);
+  await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    svg?.scrollIntoView({ behavior: 'instant', block: 'center' });
+  });
+  await page.waitForTimeout(500);
+
+  const facts = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    const nodes = [...svg.querySelectorAll('g[data-node]')];
+    const sample = nodes.slice(0, 3).map(g => ({
+      alias: g.getAttribute('data-node'),
+      circles: g.querySelectorAll('circle').length,
+      images: g.querySelectorAll('image').length,
+      texts: g.querySelectorAll('text').length,
+      paths: g.querySelectorAll('path').length,
+    }));
+    const viewG = svg.querySelector('g[data-topo-viewport], g[transform*="scale"]');
+    const groups = svg.querySelectorAll('g[data-group]').length;
+    return {
+      nodeCount: nodes.length,
+      groupBoxes: groups,
+      viewportTransform: viewG ? viewG.getAttribute('transform') : null,
+      sample,
+    };
+  });
+  const svgEl = await page.$('svg[viewBox="0 0 1000 680"]');
+  await svgEl.screenshot({ path: `/tmp/anet-tree-diag/${layout}.png`, animations: 'disabled' });
+  await ctx.close();
+  return facts;
+}
+
+for (const lay of ['grid', 'tree']) {
+  const f = await shot(lay);
+  console.log(`\n=== ${lay} ===`);
+  console.log(JSON.stringify(f, null, 2));
+}
+await browser.close();
+console.log('\nscreenshots: /tmp/anet-tree-diag/{grid,tree}.png');

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