@sleep2agi/agent-network-dashboard 0.5.3-preview.24 → 0.5.3-preview.241

package/scripts/topo-runtime-badge-brightness-test.mjs

@@ -0,0 +1,78 @@
+/* Round 586 verification: runtime badge outer <g> stacks
+ * brightness(1.15) onto the R559 drop-shadow on node hover.
+ * 25th anchor in per-element brightness family, 18th in
+ * stacked-filter sub-pattern.
+ *
+ * Test phases:
+ *   1. mock 2 idle nodes → runtime badges render
+ *   2. rest: filter='none' on outer <g> (no hover), brightness-attr='1'
+ *   3. transition-property contains 'filter'
+ *   4. source: filter string contains 'brightness(1.15)' stacked
+ *      onto drop-shadow + data-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('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-runtime-badge-brightness]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(500);
+
+const rest = await page.evaluate(() => {
+  const el = document.querySelector('[data-runtime-badge-brightness]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    filter: cs.filter,
+    transitionProperty: cs.transitionProperty,
+    brightnessAttr: el.getAttribute('data-runtime-badge-brightness'),
+    glowAttr: el.getAttribute('data-runtime-badge-glow'),
+  };
+});
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceFilter = /filter: isNodeActive\s*\?\s*`drop-shadow\(0 0 2px \$\{rt\.color\}99\) brightness\(1\.15\)`\s*:\s*undefined/.test(src);
+const sourceAttr = /data-runtime-badge-brightness=\{isNodeActive \? '1\.15' : '1'\}/.test(src);
+
+const results = {
+  badge_present:          !!rest,
+  rest_filter_none:       rest?.filter === 'none',
+  rest_brightness_1:      rest?.brightnessAttr === '1',
+  rest_glow_false:        rest?.glowAttr === 'false',
+  transition_has_filter:  /filter/.test(rest?.transitionProperty || ''),
+  source_filter:          sourceFilter,
+  source_attr:            sourceAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R586 runtime-badge brightness (25th anchor, badge 4-axis closure):`,
+  JSON.stringify(results, null, 2),
+  `\n  rest: ${JSON.stringify(rest)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-runtime-badge-glow-test.mjs

@@ -0,0 +1,108 @@
+/* Round 559 verification: runtime badge outer <g> gains drop-shadow
+ * glow using rt.color on node hover. 16th anchor in drop-shadow
+ * family. Pairs with R208 (ring r+sw) + R443 (icon sw) for 3-axis
+ * hover signature.
+ *
+ * runtimeIdentity('claude-code-cli').color is one of:
+ *   '#a78bfa', '#38bdf8', '#34d399', '#fbbf24'
+ *
+ * Test phases:
+ *   1. mock sessions with runtime → badge renders
+ *   2. rest: outer <g> filter='none', glow attr='false'
+ *   3. hover the parent node group → filter contains 'drop-shadow',
+ *      glow attr='true', and the existing R208 ring r/sw still lift
+ *   4. source: drop-shadow with rt.color hex+99 alpha + transition
+ */
+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 {}
+});
+// Use claude-code-cli runtime so the runtime badge renders.
+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-runtime-badge="a·1"]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+// The outer <g> wrapping the runtime badge carries the glow filter.
+// We can locate it via the parent of the [data-runtime-badge] circle.
+const probe = async (state) => {
+  return page.evaluate(() => {
+    const circle = document.querySelector('[data-runtime-badge="a·1"]');
+    if (!circle) return null;
+    const outerG = circle.parentElement;
+    if (!outerG) return null;
+    const cs = getComputedStyle(outerG);
+    const ringCs = getComputedStyle(circle);
+    return {
+      outerFilter: cs.filter,
+      outerTransitionProperty: cs.transitionProperty,
+      outerTransitionDuration: cs.transitionDuration,
+      glowAttr: outerG.getAttribute('data-runtime-badge-glow'),
+      ringR: ringCs.r,
+      ringSw: ringCs.strokeWidth,
+      activeAttr: circle.getAttribute('data-runtime-badge-active'),
+    };
+  });
+};
+
+const rest = await probe();
+
+await page.hover('g[data-node="a·1"]');
+await page.waitForTimeout(400);
+const hover = await probe();
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceFilter = /filter: isNodeActive\s*\?\s*`drop-shadow\(0 0 2px \$\{rt\.color\}99\)`\s*:\s*undefined,/.test(src);
+const sourceTransition = /transition: 'filter 150ms ease-out',/.test(src);
+const sourceGlowAttr = /data-runtime-badge-glow=\{isNodeActive \? 'true' : 'false'\}/.test(src);
+
+const results = {
+  rest_filter_none:        rest?.outerFilter === 'none',
+  rest_glow_false:         rest?.glowAttr === 'false',
+  rest_ring_r_7:           rest?.ringR === '7px',
+  rest_ring_sw_1_5:        rest?.ringSw === '1.5px',
+  rest_active_false:       rest?.activeAttr === 'false',
+  hover_filter_dropshadow: /drop-shadow\(/.test(hover?.outerFilter || ''),
+  hover_glow_true:         hover?.glowAttr === 'true',
+  hover_ring_r_8:          hover?.ringR === '8px', // R208 still lifts
+  hover_ring_sw_2:         hover?.ringSw === '2px', // R208 still lifts
+  hover_active_true:       hover?.activeAttr === 'true',
+  transition_has_filter:   /filter/.test(rest?.outerTransitionProperty || ''),
+  transition_duration:     rest?.outerTransitionDuration === '0.15s',
+  source_filter:           sourceFilter,
+  source_transition:       sourceTransition,
+  source_glow_attr:        sourceGlowAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R559 runtime badge drop-shadow glow (16th anchor):`,
+  JSON.stringify(results, null, 2),
+  `\n  rest: ${JSON.stringify(rest)}`,
+  `\n  hover: ${JSON.stringify(hover)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-runtime-badge-halo-layers-test.mjs

@@ -0,0 +1,87 @@
+/* Round 656 — runtime badge filter gains a SECOND outer drop-shadow
+ * at 4px + 0x4c alpha (half R559 inner 0x99). 15th anchor in multi-
+ * layer halo family (1st per-node-badge anchor).
+ */
+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-runtime-badge-halo-layers]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(500);
+
+const restBadges = await page.evaluate(() => {
+  return Array.from(document.querySelectorAll('[data-runtime-badge-halo-layers]')).map(el => ({
+    layers: el.getAttribute('data-runtime-badge-halo-layers'),
+    glow:   el.getAttribute('data-runtime-badge-glow'),
+  }));
+});
+
+// Open chat to fire isNodeActive (chat-gated per R620)
+await page.click('[data-node="a·1"]', { force: true });
+await page.waitForTimeout(400);
+
+const activeState = await page.evaluate(() => {
+  const node = document.querySelector('[data-node="a·1"]');
+  if (!node) return null;
+  const badge = node.querySelector('[data-runtime-badge-halo-layers]');
+  if (!badge) return null;
+  const cs = getComputedStyle(badge);
+  return {
+    layers: badge.getAttribute('data-runtime-badge-halo-layers'),
+    glow:   badge.getAttribute('data-runtime-badge-glow'),
+    filter: cs.filter,
+  };
+});
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceFilter = /`drop-shadow\(0 0 2px \$\{rt\.color\}99\) drop-shadow\(0 0 4px \$\{rt\.color\}4c\) brightness\(1\.15\)`/.test(src);
+const sourceLayersAttr = /data-runtime-badge-halo-layers=\{isNodeActive \? '2' : '0'\}/.test(src);
+
+const dropShadowCount = (activeState?.filter?.match(/drop-shadow/g) || []).length;
+const restAllZero = restBadges.every(b => b.layers === '0' && b.glow === 'false');
+
+const results = {
+  badges_present:           restBadges.length >= 2,
+  rest_all_zero:            restAllZero,
+  active_present:           !!activeState,
+  active_layers_2:          activeState?.layers === '2',
+  active_glow_true:         activeState?.glow === 'true',
+  active_two_dropshadows:   dropShadowCount === 2,
+  source_filter:            sourceFilter,
+  source_layers_attr:       sourceLayersAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R656 runtime badge multi-layer halo (1st per-node-badge anchor):`,
+  JSON.stringify(results, null, 2),
+  `\n  rest:   ${JSON.stringify(restBadges)}`,
+  `\n  active: ${JSON.stringify(activeState)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-runtime-badge-rotate-test.mjs

@@ -0,0 +1,85 @@
+/* Round 599 verification: runtime badge outer <g> gains
+ * hover-rotate-3 via CSS individual `rotate` property. 5th
+ * anchor in hover-rotate idiom (R350/R547/R549/R576/R599).
+ * Extends runtime badge hover signature to 6 axes.
+ *
+ * Test phases:
+ *   1. mock 2 idle nodes → runtime badges render
+ *   2. rest: rotate='0deg' (or 'none'), rotate-attr='0'
+ *   3. computed transition-property contains 'rotate'
+ *   4. transform-origin set to badge center coords
+ *   5. source: rotate conditional + data-attr + transition extension
+ */
+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-runtime-badge-rotate]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(500);
+
+const rest = await page.evaluate(() => {
+  const el = document.querySelector('[data-runtime-badge-rotate]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    rotate: cs.rotate,
+    transformOrigin: cs.transformOrigin,
+    transitionProperty: cs.transitionProperty,
+    rotateAttr: el.getAttribute('data-runtime-badge-rotate'),
+    glowAttr: el.getAttribute('data-runtime-badge-glow'),
+  };
+});
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceRotate = /rotate: isNodeActive \? '3deg' : '0deg'/.test(src);
+const sourceAttr = /data-runtime-badge-rotate=\{isNodeActive \? '3' : '0'\}/.test(src);
+const sourceTransformOrigin = /transformOrigin: `\$\{bx\}px \$\{by\}px`/.test(src);
+const sourceTransition = /transition: 'filter 150ms ease-out, rotate 150ms ease-out'/.test(src);
+
+const results = {
+  badge_present:          !!rest,
+  // CSS rotate at rest = 'none' or '0deg' depending on browser
+  rest_rotate_zero:       rest?.rotate === 'none' || rest?.rotate === '0deg',
+  rest_rotate_attr:       rest?.rotateAttr === '0',
+  rest_glow_false:        rest?.glowAttr === 'false',
+  has_transform_origin:   !!rest?.transformOrigin && rest.transformOrigin !== '',
+  transition_has_rotate:  /rotate/.test(rest?.transitionProperty || ''),
+  source_rotate:          sourceRotate,
+  source_attr:            sourceAttr,
+  source_transform_origin: sourceTransformOrigin,
+  source_transition:      sourceTransition,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R599 runtime-badge rotate (5th hover-rotate anchor, badge 6-axis):`,
+  JSON.stringify(results, null, 2),
+  `\n  rest: ${JSON.stringify(rest)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-section-title-breath-test.mjs

@@ -0,0 +1,83 @@
+/* Round 702 — H2 "Command mesh" at-rest breathing fade. Completes the
+ * title-block respiratory trio: brand-logo (R553) 5s + kicker (R699) 6s
+ * + H2 (R702) 10s. Tighter alpha range (0.88↔1) than kicker for the
+ * heavier text weight.
+ */
+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-title]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const runtimeState = await page.evaluate(() => {
+  const h2 = document.querySelector('[data-topo-section-title]');
+  if (!h2) return null;
+  const cs = getComputedStyle(h2);
+  return {
+    has_class: h2.classList.contains('anet-topo-section-title-breath'),
+    breath_attr: h2.getAttribute('data-topo-section-title-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-section-title-breath-kf\s*\{[\s\S]*?0%, 100%\s*\{\s*opacity:\s*1;\s*\}[\s\S]*?50%\s*\{\s*opacity:\s*0\.88;/.test(cssSrc);
+const cssRule = /\.anet-topo-section-title-breath\s*\{[\s\S]*?animation:\s*anet-topo-section-title-breath-kf\s+10s\s+ease-in-out\s+infinite/.test(cssSrc);
+const cssReducedMotion = /prefers-reduced-motion:\s*reduce\s*\)\s*\{\s*\.anet-topo-section-title-breath\s*\{\s*animation:\s*none/.test(cssSrc);
+const tsxClass = /anet-topo-section-title-breath text-lg/.test(tsxSrc);
+const tsxAttr = /data-topo-section-title-breath="10s"/.test(tsxSrc);
+
+const runtimeAnim = runtimeState?.anim_name === 'anet-topo-section-title-breath-kf' || runtimeState?.anim_name === 'none';
+const runtimeDuration = runtimeState?.anim_duration === '10s' || runtimeState?.anim_name === 'none';
+
+const results = {
+  h2_present:            !!runtimeState,
+  has_breath_class:      runtimeState?.has_class === true,
+  breath_attr_10s:       runtimeState?.breath_attr === '10s',
+  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 ? '✅' : '❌'} R702 H2 "Command mesh" at-rest breath (title-block trio closed — 10s):`,
+  JSON.stringify(results, null, 2),
+  `\n  runtime: ${JSON.stringify(runtimeState)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-section-title-halo-layers-test.mjs

@@ -0,0 +1,88 @@
+/* Round 684 — H2 title "Command mesh" extends from 2 typographic hover
+ * axes (R554 tracking-tighter + R556 font-bold via group-hover) to
+ * also include a multi-layer halo paint axis. Sibling to R683 brand
+ * logo (both lift together when ANY surface in the title-block cluster
+ * is hovered).
+ *
+ * Implemented via CSS rule targeting `[data-topo-section-titleblock-
+ * group]:hover [data-topo-section-title]` — 2-layer drop-shadow at
+ * currentColor (inherits H2 fill), 4+8px stride.
+ *
+ * Source assertions:
+ *   - globals.css has the cluster-hover descendant rule with 2 drop-
+ *     shadow layers
+ *   - globals.css has transition on the H2 including 'filter 200ms'
+ *   - TopoGraph.tsx H2 has data-topo-section-title-halo-layers="2"
+ *
+ * Runtime assertions:
+ *   - H2 element present with data-topo-section-title-halo-layers="2"
+ *   - title-block wrapper present (group hover target)
+ */
+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-title]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const runtimeState = await page.evaluate(() => {
+  const title = document.querySelector('[data-topo-section-title]');
+  const wrap  = document.querySelector('[data-topo-section-titleblock-group]');
+  return {
+    title_present: !!title,
+    wrap_present:  !!wrap,
+    halo_layers:   title?.getAttribute('data-topo-section-title-halo-layers'),
+    text:          title?.textContent,
+  };
+});
+
+await browser.close();
+
+const tsxSrc = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const cssSrc = readFileSync('/home/vansin/agent-network-dashboard/app/globals.css', 'utf8');
+
+const cssHoverRule = /\[data-topo-section-titleblock-group\]:hover \[data-topo-section-title\]\s*\{[\s\S]*?drop-shadow\(0 0 4px currentColor\)[\s\S]*?drop-shadow\(0 0 8px currentColor\)/.test(cssSrc);
+const cssTransition = /\[data-topo-section-title\]\s*\{[\s\S]*?transition:[\s\S]*?filter 200ms/.test(cssSrc);
+const tsxHaloAttr   = /data-topo-section-title-halo-layers="2"/.test(tsxSrc);
+
+const results = {
+  title_present:       runtimeState.title_present,
+  wrap_present:        runtimeState.wrap_present,
+  runtime_halo_layers: runtimeState.halo_layers === '2',
+  runtime_text:        runtimeState.text === 'Command mesh',
+  css_hover_rule:      cssHoverRule,
+  css_transition:      cssTransition,
+  tsx_halo_attr:       tsxHaloAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R684 H2 title multi-layer halo (sibling to R683 brand logo):`,
+  JSON.stringify(results, null, 2),
+  `\n  runtime: ${JSON.stringify(runtimeState)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-spoke-chat-gate-test.mjs

@@ -0,0 +1,72 @@
+/* Round 622 — extend hub-spoke isHoveredSpoke gate to include
+ * chatAlias. Single conceptual change cascades the spoke's
+ * opacity + sw axes to also fire on chat-target. 8th anchor in
+ * chat-target-gated brightness family.
+ *
+ * Test phases:
+ *   1. mock 2 idle nodes → hub-spokes render
+ *   2. rest: spoke at idle opacity (0.50) + idle sw (1)
+ *   3. source: isHoveredSpoke declaration uses gate union
+ *      (hoveredAlias || chatAlias)
+ */
+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-hub-spoke-hovered]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(500);
+
+const rest = await page.evaluate(() => {
+  const el = document.querySelector('[data-topo-hub-spoke-hovered]');
+  if (!el) return null;
+  return {
+    hoveredAttr: el.getAttribute('data-topo-hub-spoke-hovered'),
+    opacityAttr: el.getAttribute('data-topo-hub-spoke-opacity'),
+    swAttr: el.getAttribute('data-topo-hub-spoke-stroke-width'),
+  };
+});
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceGate = /const isHoveredSpoke = !reducedMotion && \(hoveredAlias === session\.alias \|\| chatAlias === session\.alias\)/.test(src);
+
+const results = {
+  spoke_present:          !!rest,
+  rest_hovered_false:     rest?.hoveredAttr === 'false',
+  rest_opacity_idle:      rest?.opacityAttr === '0.5',  // idle no-hover
+  rest_sw_idle:           rest?.swAttr === '1',  // idle no-hover
+  source_gate_or:         sourceGate,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} R622 hub-spoke chat-target gate (chat-gated family 8th anchor):`,
+  JSON.stringify(results, null, 2),
+  `\n  rest: ${JSON.stringify(rest)}`);
+process.exit(ok ? 0 : 1);