@sleep2agi/agent-network-dashboard 0.5.6 → 0.5.7-preview.1

package/scripts/topo-fullscreen-attr-test.mjs

@@ -1,73 +0,0 @@
-/* Round 515 verification: root svg surfaces `data-topo-fullscreen`
- * (16th attr in canvas state surface set). Reflects isFullscreen
- * React state.
- *
- * Test phases:
- *   1. default (not fullscreen): attr='false'
- *   2. after clicking fullscreen toggle: attr='true'
- *   3. after clicking again to exit: attr='false'
- *   4. source-side regex confirms wiring
- *
- * Note: fullscreen API may behave differently in headless Chromium —
- * we test by clicking the toggle button which dispatches the React
- * setIsFullscreen call regardless of whether the browser's actual
- * fullscreen API succeeds.
- */
-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, 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('a·1', '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: 'networkidle' });
-await page.waitForSelector('svg[data-topo-fullscreen]', { timeout: 15000 });
-await page.waitForTimeout(1500);
-
-// Phase 1: default
-const init = await page.evaluate(() =>
-  document.querySelector('svg[viewBox="0 0 1000 680"]')?.getAttribute('data-topo-fullscreen')
-);
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceWired = /data-topo-fullscreen=\{isFullscreen \? 'true' : 'false'\}/.test(src);
-
-// Phase 2: try toggling — but fullscreen API + state coupling depends
-// on the toggleFullscreen implementation. The simpler bet: source-side
-// is canonical proof; runtime probe just verifies the attr renders +
-// reflects the default state. Don't try to fight the fullscreen API
-// in headless browser.
-
-await browser.close();
-
-const results = {
-  initial_attr_false:  init === 'false',
-  source_wired:        sourceWired,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R515 fullscreen attr:`, JSON.stringify(results),
-  '\n  initial:', init);
-process.exit(ok ? 0 : 1);

package/scripts/topo-fullscreen-brightness-test.mjs

@@ -1,84 +0,0 @@
-/* Round 595 verification: chrome fullscreen button gains filter
- * brightness(1.15) on hoveredFullscreen. 34th anchor in per-
- * element brightness family, 3rd HTML-element anchor. Sibling
- * to R594 reset — closes standalone chrome button pair.
- *
- * Test phases:
- *   1. mock nodes → chrome strip renders Fullscreen button
- *   2. rest (no hover): filter='none', brightness-attr='1'
- *   3. transition-property contains 'filter'
- *   4. source: filter conditional + data-attr + state hook
- */
-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-chrome-fullscreen-brightness]', { timeout: 15000, state: 'attached' });
-await page.waitForTimeout(500);
-
-const rest = await page.evaluate(() => {
-  const el = document.querySelector('[data-topo-chrome-fullscreen-brightness]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter: cs.filter,
-    transitionProperty: cs.transitionProperty,
-    brightnessAttr: el.getAttribute('data-topo-chrome-fullscreen-brightness'),
-    hoverAttr: el.getAttribute('data-topo-chrome-fullscreen-hover'),
-    activeAttr: el.getAttribute('data-topo-chrome-fullscreen-active'),
-    ariaLabel: el.getAttribute('aria-label'),
-  };
-});
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceFilter = /filter: hoveredFullscreen \? 'brightness\(1\.15\)' : undefined/.test(src);
-const sourceAttr = /data-topo-chrome-fullscreen-brightness=\{hoveredFullscreen \? '1\.15' : '1'\}/.test(src);
-const sourceState = /const \[hoveredFullscreen, setHoveredFullscreen\] = useState\(false\)/.test(src);
-const sourceTransition = /transition: 'color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out'/.test(src);
-
-const results = {
-  button_present:         !!rest,
-  rest_filter_none:       rest?.filter === 'none',
-  rest_brightness_1:      rest?.brightnessAttr === '1',
-  rest_hover_false:       rest?.hoverAttr === 'false',
-  is_fullscreen_button:   /fullscreen/i.test(rest?.ariaLabel || ''),
-  transition_has_filter:  /filter/.test(rest?.transitionProperty || ''),
-  source_filter:          sourceFilter,
-  source_attr:            sourceAttr,
-  source_state:           sourceState,
-  source_transition:      sourceTransition,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R595 fullscreen-button brightness (34th anchor, 3rd HTML, pair-symmetry close):`,
-  JSON.stringify(results, null, 2),
-  `\n  rest: ${JSON.stringify(rest)}`);
-process.exit(ok ? 0 : 1);

package/scripts/topo-fullscreen-icon-hover-scale-test.mjs

@@ -1,91 +0,0 @@
-/* Round 353 verification: fullscreen icon (enter + exit variants)
- * picks up group-hover:scale-110 — sibling to R352 zoom icons + R350
- * reset hover-rotate. Closes the chrome-strip per-icon hover-
- * affordance arc:
- *   zoom-out  R352  scale 1 → 1.1
- *   zoom-in   R352  scale 1 → 1.1
- *   reset     R350  rotate 0 → -8°
- *   fullscreen R353 scale 1 → 1.1  (this round, both enter+exit svgs)
- *
- * Tailwind 4 compiles scale-110 to the modern CSS `scale` property
- * (verified during R352 — getComputedStyle(el).scale carries the
- * value, not transform).
- *
- * Contract (cyber, non-fullscreen):
- *   - Rest: enter-icon computed scale 'none' (no scale applied).
- *   - Hover button: enter-icon scale='1.1'.
- *   - Inline transition contains scale (or transform — Tailwind 4
- *     emits both transition-property entries on transition-transform).
- *   - Pre-R353 invariants: R288 strokeWidth=2.5 preserved, anet-
- *     chrome-pop class absent at rest, data-topo-chrome-fullscreen-
- *     icon="enter" attr intact.
- */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
-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 {}
-});
-const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-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: 'working', 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'), mk('b'), mk('c') ] } });
-});
-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-topo-chrome-fullscreen-icon="enter"]', { timeout: 15000 });
-await page.waitForTimeout(300);
-
-const restProbe = await page.evaluate(() => {
-  const ico = document.querySelector('[data-topo-chrome-fullscreen-icon="enter"]');
-  const cs  = ico ? getComputedStyle(ico) : null;
-  return {
-    scale:      cs?.scale ?? null,
-    transition: cs?.transition ?? null,
-    strokeW:    ico?.getAttribute('stroke-width') ?? null,
-    className:  ico?.getAttribute('class') ?? null,
-  };
-});
-
-// Hover the fullscreen button.
-await page.hover('[data-topo-chrome-fullscreen]');
-await page.waitForTimeout(300);
-const hoverProbe = await page.evaluate(() => {
-  const ico = document.querySelector('[data-topo-chrome-fullscreen-icon="enter"]');
-  return { scale: ico ? getComputedStyle(ico).scale : null };
-});
-
-await browser.close();
-
-const isRestScale = (s) => s === 'none' || s === '1' || s === '1 1' || s === null;
-const isHoverScale110 = (s) => s === '1.1' || s === '1.1 1.1';
-const hasTrans = (s, prop) =>
-  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
-
-const results = {
-  rest_scale_1:         isRestScale(restProbe.scale),
-  trans_has_scale:      hasTrans(restProbe.transition, 'scale') || hasTrans(restProbe.transition, 'transform'),
-  strokew_2_5:          restProbe.strokeW === '2.5',           // R288
-  no_chrome_pop_rest:   !/anet-chrome-pop/.test(restProbe.className || ''),
-  has_group_hover_cls:  /group-hover:scale-110/.test(restProbe.className || ''),
-  hover_scale_110:      isHoverScale110(hoverProbe.scale),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} fullscreen icon hover-scale:`, JSON.stringify(results),
-  '\n  rest: ', restProbe,
-  '\n  hover:', hoverProbe);
-process.exit(ok ? 0 : 1);

package/scripts/topo-fullscreen-icon-rotate-test.mjs

@@ -1,93 +0,0 @@
-/* Round 576 verification: chrome fullscreen icon gains hover-rotate-3.
- * 4th anchor in hover-rotate idiom (R350 reset / R547 pill × / R549
- * brand logo / R576 fullscreen).
- *
- * Banked R547 Tailwind 4 pattern — probe cs.rotate (individual CSS
- * property), not cs.transform.
- *
- * Test phases:
- *   1. rest: fullscreen icon cs.rotate = 'none' (or '0deg')
- *   2. hover the fullscreen button → icon rotate = '3deg' (+ scale 1.1)
- *   3. source-side regex: 2 occurrences (enter + exit) of
- *      'group-hover:rotate-3'
- */
-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')] } });
-});
-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-fullscreen-icon="enter"]', { timeout: 15000 });
-await page.waitForTimeout(500);
-
-// Locate the parent button (the <button aria-label="Enter fullscreen">).
-const fullscreenButtonSel = 'button[aria-label*="fullscreen" i], button[aria-label*="Fullscreen"]';
-const iconSel = '[data-topo-chrome-fullscreen-icon="enter"]';
-
-const rest = await page.evaluate((s) => {
-  const el = document.querySelector(s);
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    rotate: cs.rotate,
-    scale: cs.scale,
-  };
-}, iconSel);
-
-// Hover the parent button
-await page.hover(fullscreenButtonSel);
-await page.waitForTimeout(400);
-const hover = await page.evaluate((s) => {
-  const el = document.querySelector(s);
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    rotate: cs.rotate,
-    scale: cs.scale,
-  };
-}, iconSel);
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const occurrences = (src.match(/group-hover:scale-110 group-hover:rotate-3 group-hover:\[stroke-width:2\.8\]/g) || []).length;
-
-const results = {
-  rest_rotate_idle:        rest?.rotate === 'none' || rest?.rotate === '0deg',
-  rest_scale_idle:         rest?.scale === 'none' || rest?.scale === '1',
-  hover_rotate_3deg:       hover?.rotate === '3deg',
-  hover_scale_110:         hover?.scale === '1.1',
-  source_2_occurrences:    occurrences === 2,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R576 fullscreen icon hover-rotate-3 (4th anchor):`,
-  JSON.stringify(results, null, 2),
-  `\n  rest: ${JSON.stringify(rest)}`,
-  `\n  hover: ${JSON.stringify(hover)}`,
-  `\n  source 2-occurrence count: ${occurrences}`);
-process.exit(ok ? 0 : 1);

package/scripts/topo-grid-content-bottom-attr-test.mjs

@@ -1,72 +0,0 @@
-/* Round 516 verification: root svg surfaces `data-topo-grid-content-
- * bottom` (17th attr). Reflects gridContentBottom state.
- *
- * Test phases:
- *   1. grid layout: attr is a positive number (actual pixel y-coord)
- *   2. ring layout: attr is '0' (no grid content)
- *   3. source-side regex confirms wiring
- */
-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(layout) {
-  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((l) => {
-    try {
-      localStorage.setItem('anet-theme', 'cyber');
-      localStorage.setItem('anet-topo-layout', l);
-      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 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',  'idle'),
-      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: 'networkidle' });
-  await page.waitForSelector('svg[data-topo-grid-content-bottom]', { timeout: 15000 });
-  await page.waitForTimeout(1500);
-  const attr = await page.evaluate(() =>
-    document.querySelector('svg[viewBox="0 0 1000 680"]')?.getAttribute('data-topo-grid-content-bottom')
-  );
-  await browser.close();
-  return attr;
-}
-
-const grid = await probe('grid');
-const ring = await probe('ring');
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceWired = /data-topo-grid-content-bottom=\{gridContentBottom\}/.test(src);
-
-const gridNum = parseInt(grid || '0', 10);
-
-const results = {
-  grid_is_positive:    gridNum > 0,
-  grid_within_viewBox: gridNum > 0 && gridNum <= 680,
-  ring_returns_0:      ring === '0',
-  source_wired:        sourceWired,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R516 grid-content-bottom attr:`, JSON.stringify(results),
-  '\n  grid:', grid, '/ ring:', ring);
-process.exit(ok ? 0 : 1);

package/scripts/topo-group-box-brightness-test.mjs

@@ -1,84 +0,0 @@
-/* Round 587 verification: group box gains stacked
- * brightness(1.15) on hover/pin. 26th anchor in per-element
- * brightness family, 19th in stacked-filter sub-pattern.
- * Stacks with R142 url(#topo-groupbox-lift) SVG filter.
- *
- * Test phases:
- *   1. mock 2 nodes with prefix-group alias → grid layout
- *      renders group box
- *   2. rest (not hovered, not pinned): filter='none' computed,
- *      brightness-attr='1', pinned='false'
- *   3. transition-property contains 'filter'
- *   4. source: filter conditional stack + 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', '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) => ({
-    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,
-  });
-  // Two prefix groups so grid layout produces visible group boxes
-  await route.fulfill({ response: r, json: { ...b, sessions: [
-    mk('alpha·1'), mk('alpha·2'), mk('beta·1'), mk('beta·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-group-box-brightness]', { timeout: 15000, state: 'attached' });
-await page.waitForTimeout(500);
-
-const rest = await page.evaluate(() => {
-  const el = document.querySelector('[data-group-box-brightness]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter: cs.filter,
-    transitionProperty: cs.transitionProperty,
-    brightnessAttr: el.getAttribute('data-group-box-brightness'),
-    pinnedAttr: el.getAttribute('data-group-box-pinned'),
-    liftedAttr: el.getAttribute('data-group-box-lifted'),
-  };
-});
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceFilter = /filter: \(isPinned \|\| isHovered\)\s*\?\s*'url\(#topo-groupbox-lift\) brightness\(1\.15\)'\s*:\s*undefined/.test(src);
-const sourceAttr = /data-group-box-brightness=\{\(isPinned \|\| isHovered\) \? '1\.15' : '1'\}/.test(src);
-
-const results = {
-  box_present:            !!rest,
-  rest_filter_none:       rest?.filter === 'none',
-  rest_brightness_1:      rest?.brightnessAttr === '1',
-  rest_pinned_false:      rest?.pinnedAttr === 'false',
-  rest_lifted_false:      rest?.liftedAttr === 'false',
-  transition_has_filter:  /filter/.test(rest?.transitionProperty || ''),
-  source_filter:          sourceFilter,
-  source_attr:            sourceAttr,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R587 group-box brightness (26th anchor, group-cluster scope):`,
-  JSON.stringify(results, null, 2),
-  `\n  rest: ${JSON.stringify(rest)}`);
-process.exit(ok ? 0 : 1);

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

@@ -1,110 +0,0 @@
-/* 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);