@sleep2agi/agent-network-dashboard 0.5.1-preview.98 → 0.5.1

package/scripts/topo-edge-particle-hover-r-test.mjs

@@ -0,0 +1,113 @@
+/* Round 439 verification: edge flow particle radius hover lift —
+ * r 4.5 → 5.5 on (isHoveredEdge || isEndpointHoveredEdge). Continues
+ * the edge paint-layer parity arc (R436 visible path / R437 flow rail
+ * / R439 particle).
+ *
+ * Contract:
+ *   - rest: every particle reports data-edge-particle-radius '4.5' +
+ *     lifted='false'
+ *   - hover one node alias: particles on edges incident to that node
+ *     report radius '5.5' + lifted='true'
+ *   - siblings unaffected
+ *   - source-file probe confirms conditional + 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: 1500 } });
+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'); 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, status) => ({
+    alias, status, 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', 'working'),
+    mk('beta',  'idle'),
+    mk('gamma', 'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta',  content: 'ping', created_at: fresh, network_id: 'default' },
+    { id: 'm2', from_alias: 'alpha', to_alias: 'gamma', content: 'pong', created_at: fresh, network_id: 'default' },
+    { id: 'm3', from_alias: 'gamma', to_alias: 'beta',  content: 'pang', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+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: 'domcontentloaded' });
+await page.waitForSelector('[data-edge-particle]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const ps = [...document.querySelectorAll('[data-edge-particle]')];
+  return ps.map(p => ({
+    key:    p.getAttribute('data-edge-particle'),
+    r_attr: p.getAttribute('r'),
+    r_data: parseFloat(p.getAttribute('data-edge-particle-radius') || '0'),
+    lifted: p.getAttribute('data-edge-particle-lifted'),
+  }));
+});
+
+const rest = await readAll();
+
+let hover = null;
+const box = await page.evaluate(() => {
+  const t = document.querySelector('[data-node-alias-text="alpha"]');
+  if (!t) return null;
+  const node = t.closest('[data-node]');
+  const target = node || t;
+  const b = target.getBoundingClientRect();
+  return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+});
+if (box) {
+  await page.mouse.move(box.x, box.y);
+  await page.waitForTimeout(300);
+  hover = await readAll();
+  await page.mouse.move(0, 0);
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired      = /r=\{\(isHoveredEdge \|\| isEndpointHoveredEdge\) \? 5\.5 : 4\.5\}/.test(fileText);
+const sourceTransition = /transition: 'fill 200ms ease-out, opacity 200ms ease-out, r 200ms ease-out'/.test(fileText);
+
+await browser.close();
+
+const isAlphaKey = (k) => /alpha/i.test(k);
+const hoverByKey = new Map((hover || []).map(h => [h.key, h]));
+const alphaEntries    = [...hoverByKey.entries()].filter(([k]) => isAlphaKey(k));
+const nonAlphaEntries = [...hoverByKey.entries()].filter(([k]) => !isAlphaKey(k));
+
+const restAllR_4_5     = rest.every(r => r.r_data === 4.5);
+const restNoneLifted   = rest.every(r => r.lifted === 'false');
+const alphaAllR_5_5    = alphaEntries.length > 0 && alphaEntries.every(([, h]) => h.r_data === 5.5 && h.lifted === 'true');
+const nonAlphaRestR    = nonAlphaEntries.every(([, h]) => h.r_data === 4.5 && h.lifted === 'false');
+
+const results = {
+  rest_particle_count_ge_2:    rest.length >= 2,
+  rest_all_r_4_5:              restAllR_4_5,
+  rest_none_lifted:            restNoneLifted,
+  hover_alpha_count_ge_2:      alphaEntries.length >= 2,
+  hover_alpha_all_lifted_5_5:  alphaAllR_5_5,
+  hover_non_alpha_unaffected:  nonAlphaRestR,
+  source_r_wired:              sourceWired,
+  source_transition_wired:     sourceTransition,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-particle r hover lift:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  hover:', JSON.stringify(hover));
+process.exit(ok ? 0 : 1);

package/scripts/topo-endpoint-ring-r-hover-test.mjs

@@ -0,0 +1,89 @@
+/* Round 442 verification: endpoint emphasis ring radius hover lift —
+ * r=radius+7 → radius+8 on isEndpoint. Closes 3-axis hover-elevation
+ * parity at endpoint ring scope (r + sw + opacity).
+ *
+ * Contract:
+ *   - rest: every endpoint ring reports radius='27' (default node
+ *     radius 20 + 7) + active='false'
+ *   - source-file probe confirms conditional + transition extension
+ *
+ * Test design: edge-hover dispatch on the hitbox path is unreliable
+ * for React onMouseEnter (same R423/R424 trap) — source-file probe
+ * is the canonical contract for the isEndpoint branch; DOM probe
+ * confirms rest branch resolves correctly.
+ */
+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: 1500 } });
+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'); 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, status) => ({
+    alias, status, 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', 'working'),
+    mk('beta',  'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+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: 'domcontentloaded' });
+await page.waitForSelector('[data-edge-endpoint-ring]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const rest = await page.evaluate(() => {
+  const cs = [...document.querySelectorAll('[data-edge-endpoint-ring]')];
+  return cs.map(c => ({
+    r:      parseFloat(c.getAttribute('data-edge-endpoint-ring-radius') || '0'),
+    active: c.getAttribute('data-edge-endpoint-active'),
+    sw:     c.getAttribute('data-edge-endpoint-ring-stroke-width'),
+  }));
+});
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceR = /const endpointR = isEndpoint \? radius \+ 8 : radius \+ 7/.test(fileText);
+const sourceTransition = /transition: 'opacity 180ms ease-out, stroke-width 180ms ease-out, r 180ms ease-out'/.test(fileText);
+
+await browser.close();
+
+// nodeRadius default scales by nodeScale & status; in our fixture working alpha
+// likely radius=20 → endpointR=27. Just check ≥2 rings mount at the rest value (radius+7).
+const restAnyMounted    = rest.length >= 2;
+const restAllActiveFalse = rest.every(r => r.active === 'false');
+const restAllSwRest     = rest.every(r => r.sw === '1.6');
+// Verify radius is consistent across all rings: radius+7 (any positive number, all equal)
+const allSameRadius     = rest.length > 0 && rest.every(r => r.r === rest[0].r);
+const restRadiusPositive = (rest[0]?.r || 0) > 0;
+
+const results = {
+  rest_count_ge_2:           restAnyMounted,
+  rest_all_active_false:     restAllActiveFalse,
+  rest_all_sw_1_6:           restAllSwRest,
+  rest_all_radius_equal:     allSameRadius,
+  rest_radius_positive:      restRadiusPositive,
+  source_endpointR_wired:    sourceR,
+  source_transition_wired:   sourceTransition,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} endpoint-ring r hover lift:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest));
+process.exit(ok ? 0 : 1);

package/scripts/topo-group-box-geom-transition-test.mjs

@@ -0,0 +1,110 @@
+/* Round 461 verification: parent group-box rect transition list
+ * extends to include x + y + width + height (200ms ease-out each).
+ * Pre-R461 the outer 200×140 px container snap-jumped on cluster
+ * resize while the inner R460 hitbox tint rect (160×18) slid —
+ * jarring two-rate motion at the same surface. R461 unifies the
+ * pair so the whole cluster boundary slides as one Hero D-coherent
+ * motion envelope at 200ms.
+ *
+ * Contract:
+ *   - every <rect data-group-box-geom-transition="x,y,width,height">
+ *     renders (one per cluster)
+ *   - inline style contains all 4 geometry tweens at 200ms
+ *   - existing R66 / R248 transition axes (stroke, stroke-width,
+ *     fill-opacity, filter, fill) all preserved
+ *   - source-file wired
+ */
+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', 'grid');
+    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, status) => ({
+    alias, status, 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', 'working'),
+    mk('alpha·2', 'idle'),
+    mk('beta·1',  'working'),
+    mk('beta·2',  'idle'),
+  ] } });
+});
+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: 'domcontentloaded' });
+await page.waitForSelector('[data-group-box-geom-transition]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const boxes = [...document.querySelectorAll('[data-group-box-geom-transition]')];
+  return {
+    count: boxes.length,
+    nodes: boxes.map(b => ({
+      geom:  b.getAttribute('data-group-box-geom-transition'),
+      style: b.getAttribute('style') || '',
+    })),
+  };
+});
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const parentBoxBlockMatch = src.match(/data-group-box-pinned[\s\S]{0,5500}?\/>/);
+const parentBoxBlock = parentBoxBlockMatch ? parentBoxBlockMatch[0] : '';
+const sourceHasGeomAttr   = /data-group-box-geom-transition="x,y,width,height"/.test(parentBoxBlock);
+const sourceHasAll4Tweens = /x 200ms ease-out/.test(parentBoxBlock)
+                         && /y 200ms ease-out/.test(parentBoxBlock)
+                         && /width 200ms ease-out/.test(parentBoxBlock)
+                         && /height 200ms ease-out/.test(parentBoxBlock);
+const sourcePreservesR66  = /stroke 200ms ease-out/.test(parentBoxBlock)
+                         && /stroke-width 200ms ease-out/.test(parentBoxBlock)
+                         && /fill-opacity 200ms ease-out/.test(parentBoxBlock)
+                         && /filter 200ms ease-out/.test(parentBoxBlock)
+                         && /fill 200ms ease-out/.test(parentBoxBlock);
+
+await browser.close();
+
+const countGe2     = probe.count >= 2;
+const allDataAttr  = probe.nodes.every(n => n.geom === 'x,y,width,height');
+const allStyle4xy  = probe.nodes.every(n =>
+  /x 200ms ease-out/.test(n.style) &&
+  /y 200ms ease-out/.test(n.style) &&
+  /width 200ms ease-out/.test(n.style) &&
+  /height 200ms ease-out/.test(n.style));
+const allStyleR66  = probe.nodes.every(n =>
+  /stroke 200ms ease-out/.test(n.style) &&
+  /fill-opacity 200ms ease-out/.test(n.style) &&
+  /filter 200ms ease-out/.test(n.style) &&
+  /fill 200ms ease-out/.test(n.style));
+
+const results = {
+  box_count_ge_2:           countGe2,
+  all_data_attr_xywh:       allDataAttr,
+  all_style_has_4_geom:     allStyle4xy,
+  all_style_preserves_r66:  allStyleR66,
+  source_geom_attr_wired:   sourceHasGeomAttr,
+  source_all_4_tweens:      sourceHasAll4Tweens,
+  source_preserves_r66:     sourcePreservesR66,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group box geom transition x+y+width+height:`, JSON.stringify(results),
+  '\n  count:', probe.count,
+  '\n  first style (truncated):', (probe.nodes[0]?.style || '').slice(0, 220));
+process.exit(ok ? 0 : 1);

package/scripts/topo-group-box-rx-pin-test.mjs

@@ -0,0 +1,103 @@
+/* Round 464 verification: group-box parent rect rx 14 → 16 on
+ * isPinned — geometric softening at the corner radius. Pin
+ * signature on the outer container now spans 7 axes (R63 fill +
+ * R142 filter + R432 ls + R444 count fw + R457 parent fw + codex
+ * p.125 opacity + R464 rx).
+ *
+ * Contract:
+ *   - every <rect data-group-box-rx> renders with rx='14' at rest
+ *   - clicking the group-label hitbox flips that group's rx to '16'
+ *   - sibling groups stay '14'
+ *   - transition list (R461) extends to include `rx 200ms`
+ */
+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', 'grid');
+    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, status) => ({
+    alias, status, 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', 'working'),
+    mk('alpha·2', 'idle'),
+    mk('beta·1',  'working'),
+    mk('beta·2',  'idle'),
+  ] } });
+});
+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: 'domcontentloaded' });
+await page.waitForSelector('[data-group-box-rx]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const boxes = [...document.querySelectorAll('[data-group-box-rx]')];
+  return boxes.map(b => {
+    const parentG = b.closest('g[data-group]');
+    return {
+      key: parentG ? parentG.getAttribute('data-group') : null,
+      rx_attr: b.getAttribute('data-group-box-rx'),
+      rx_live: b.getAttribute('rx'),
+    };
+  });
+});
+
+const rest = await readAll();
+const firstKey = rest[0]?.key;
+
+let pinned = null;
+if (firstKey) {
+  // click hitbox to pin
+  const hit = await page.$(`[data-group-label-hit="${firstKey}"]`);
+  if (hit) {
+    await hit.click();
+    await page.waitForTimeout(300);
+    pinned = await readAll();
+  }
+}
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceRxConditional = /rx=\{isPinned \? '16' : '14'\}/.test(src);
+const sourceTransitionHasRx = /rx 200ms ease-out/.test(src);
+
+await browser.close();
+
+const restCountGe2  = rest.length >= 2;
+const restAll14     = rest.every(r => r.rx_attr === '14' && r.rx_live === '14');
+const pinnedTarget  = pinned?.find(r => r.key === firstKey);
+const pinTargetIs16 = pinnedTarget?.rx_attr === '16' && pinnedTarget?.rx_live === '16';
+const pinSiblingsRest = pinned ? pinned.filter(r => r.key !== firstKey).every(r => r.rx_attr === '14') : false;
+
+const results = {
+  rest_count_ge_2:           restCountGe2,
+  rest_all_rx_14:            restAll14,
+  pinned_target_rx_16:       pinTargetIs16,
+  pinned_siblings_rest:      pinSiblingsRest,
+  source_rx_conditional:     sourceRxConditional,
+  source_transition_has_rx:  sourceTransitionHasRx,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group box rx pin 14→16:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  pinned target:', JSON.stringify(pinnedTarget));
+process.exit(ok ? 0 : 1);

package/scripts/topo-group-label-count-fw-test.mjs

@@ -0,0 +1,100 @@
+/* Round 444 verification: group label count tspan fontWeight lift —
+ * 500 → 600 on isPinned. Mirror of R416/R424/R425/R426 "data tightens
+ * under attention" pattern at group-label-count scope.
+ *
+ * Contract:
+ *   - rest: every group-label-count reports font-weight '500' +
+ *     pinned='false'
+ *   - click a group-label-hit: that group's count flips to '600' +
+ *     pinned='true'
+ *   - siblings stay rest
+ */
+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: 1500 } });
+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', 'grid');
+    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, status) => ({
+    alias, status, 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', 'working'),
+    mk('alpha·2', 'idle'),
+    mk('beta·1',  'working'),
+    mk('beta·2',  'idle'),
+  ] } });
+});
+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: 'domcontentloaded' });
+await page.waitForSelector('[data-group-label-count]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const ts = [...document.querySelectorAll('[data-group-label-count]')];
+  return ts.map(t => ({
+    key:    t.getAttribute('data-group-label-count'),
+    fw:     t.getAttribute('font-weight'),
+    pinned: t.getAttribute('data-group-label-count-pinned'),
+  }));
+});
+
+const rest = await readAll();
+const firstKey = rest[0]?.key;
+
+// Pin the first group by clicking its label-hit wrapper
+let pinned = null;
+if (firstKey) {
+  const hit = await page.$(`[data-group-label-hit="${firstKey}"]`);
+  if (hit) {
+    await hit.click();
+    await page.waitForTimeout(250);
+    pinned = await readAll();
+  }
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired = /fontWeight=\{isPinned \? '600' : '500'\}/.test(fileText);
+
+await browser.close();
+
+const restAll500    = rest.every(r => r.fw === '500');
+const restNoPin     = rest.every(r => r.pinned === 'false');
+const pinnedEntry   = pinned?.find(r => r.key === firstKey);
+const pinnedFw_600  = pinnedEntry?.fw === '600';
+const pinnedFlag    = pinnedEntry?.pinned === 'true';
+const othersRest    = pinned ? pinned.filter(r => r.key !== firstKey).every(r => r.fw === '500' && r.pinned === 'false') : false;
+
+const results = {
+  rest_count_ge_2:        rest.length >= 2,
+  rest_all_fw_500:        restAll500,
+  rest_no_pin:            restNoPin,
+  pinned_target_fw_600:   pinnedFw_600,
+  pinned_target_flag:     pinnedFlag,
+  pinned_others_stay:     othersRest,
+  source_wired:           sourceWired,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group label count fw pin:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  pinned target:', JSON.stringify(pinnedEntry));
+process.exit(ok ? 0 : 1);

package/scripts/topo-group-label-fw-pin-test.mjs

@@ -0,0 +1,99 @@
+/* Round 457 verification: group label parent text fontWeight 700 → 800
+ * on isPinned. Adds typographic weight axis at parent-text scope.
+ *
+ * Contract:
+ *   - rest: every group-label parent <text> reports font-weight '700' +
+ *     pinned='false'
+ *   - click a group-label-hit: that group's <text> flips to '800' +
+ *     pinned='true'; siblings stay rest
+ */
+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: 1500 } });
+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', 'grid');
+    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, status) => ({
+    alias, status, 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', 'working'),
+    mk('alpha·2', 'idle'),
+    mk('beta·1',  'working'),
+    mk('beta·2',  'idle'),
+  ] } });
+});
+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: 'domcontentloaded' });
+await page.waitForSelector('[data-group-label]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const ts = [...document.querySelectorAll('[data-group-label]')];
+  return ts.map(t => ({
+    key:    t.getAttribute('data-group-label'),
+    fw:     t.getAttribute('font-weight'),
+    fw_d:   t.getAttribute('data-group-label-font-weight'),
+    pinned: t.getAttribute('data-group-label-pinned'),
+  }));
+});
+
+const rest = await readAll();
+const firstKey = rest[0]?.key;
+
+// Pin first group by clicking its hit-area
+let pinned = null;
+if (firstKey) {
+  const hit = await page.$(`[data-group-label-hit="${firstKey}"]`);
+  if (hit) {
+    await hit.click();
+    await page.waitForTimeout(250);
+    pinned = await readAll();
+  }
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired = /fontWeight=\{isPinned \? '800' : '700'\}/.test(fileText);
+
+await browser.close();
+
+const restAll700    = rest.every(r => r.fw === '700');
+const restNoPin     = rest.every(r => r.pinned === 'false');
+const pinnedEntry   = pinned?.find(r => r.key === firstKey);
+const pinFw800      = pinnedEntry?.fw === '800';
+const pinFlag       = pinnedEntry?.pinned === 'true';
+const othersRest    = pinned ? pinned.filter(r => r.key !== firstKey).every(r => r.fw === '700' && r.pinned === 'false') : false;
+
+const results = {
+  rest_count_ge_2:        rest.length >= 2,
+  rest_all_fw_700:        restAll700,
+  rest_no_pin:            restNoPin,
+  pinned_target_fw_800:   pinFw800,
+  pinned_target_flag:     pinFlag,
+  pinned_others_stay:     othersRest,
+  source_wired:           sourceWired,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group label fw pin:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  pinned target:', JSON.stringify(pinnedEntry));
+process.exit(ok ? 0 : 1);