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

package/scripts/topo-group-status-pips-test.mjs

@@ -1,103 +0,0 @@
-/* Round 58 verification: group label includes a status-mix pip strip
- * showing how many members are working / idle / offline.
- *
- * Sessions (mixed-status alpha team + singleton beta):
- *   alpha1  — working
- *   alpha2  — working
- *   alpha3  — idle
- *   alpha4  — offline
- *   beta    — idle  (singleton, no group box)
- *
- * Grid layout draws a group box for alpha (4 members). Label should
- * end in something like "alpha · 4 · 2w 1i 1o". Status pips render
- * only when their count > 0, so a uniform group reads more simply.
- */
-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 });
-
-async function probe(sessions) {
-  const ctx = await browser.newContext({ viewport: { width: 1280, 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 {}
-  });
-  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-  const stale = new Date(Date.now() - 30 * 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 seeded = sessions.map(s => ({
-      alias: s.alias, status: s.status,
-      network_id: nid, project_dir: null,
-      created_at: s.status === 'offline' ? stale : fresh,
-      updated_at: s.status === 'offline' ? stale : fresh,
-      last_seen_at: s.status === 'offline' ? stale : fresh,
-    }));
-    await route.fulfill({ response: r, json: { ...b, sessions: seeded } });
-  });
-  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
-  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(c => document.querySelectorAll('g[data-node]').length === c, sessions.length, { timeout: 30000 });
-  await page.waitForTimeout(500);
-  const labels = await page.evaluate(() => {
-    const out = {};
-    for (const t of document.querySelectorAll('text[data-group-label]')) {
-      out[t.getAttribute('data-group-label')] = (t.textContent || '').trim();
-    }
-    return out;
-  });
-  await ctx.close();
-  return labels;
-}
-
-// Grouping is consecutive-run on the sorted [...online, ...offline] array,
-// so an offline member of the "alpha" prefix family ends up in a separate
-// band (it falls into the offline tier rather than joining the online
-// alpha group). All members that share a multi-member band are by
-// construction online, so the "offline pip" case is unreachable via the
-// group label and the test covers only the working/idle dimensions here.
-const mixed = await probe([
-  { alias: 'alpha1', status: 'working' },
-  { alias: 'alpha2', status: 'working' },
-  { alias: 'alpha3', status: 'idle' },
-  { alias: 'beta',   status: 'idle' },
-]);
-
-const allWorking = await probe([
-  { alias: 'gamma1', status: 'working' },
-  { alias: 'gamma2', status: 'working' },
-  { alias: 'gamma3', status: 'working' },
-  { alias: 'beta',   status: 'idle' },
-]);
-
-await browser.close();
-
-const alphaLabel = mixed.alpha || '';
-const gammaLabel = allWorking.gamma || '';
-
-const results = {
-  alpha_keyPresent:        /^alpha/.test(alphaLabel),
-  alpha_countCorrect:      /·\s*3/.test(alphaLabel),
-  alpha_workingPip:        /2w/.test(alphaLabel),
-  alpha_idlePip:           /1i/.test(alphaLabel),
-  alpha_noOfflinePip:      !/\d+o\b/.test(alphaLabel),
-  // Uniform-status group: only the working pip renders.
-  gamma_workingPip:        /3w/.test(gammaLabel),
-  gamma_noIdlePip:         !/\d+i\b/.test(gammaLabel),
-  gamma_noOfflinePip:      !/\d+o\b/.test(gammaLabel),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} group status pips:`, JSON.stringify(results),
-  `\n  alpha="${alphaLabel}"`,
-  `\n  gamma="${gammaLabel}"`);
-process.exit(ok ? 0 : 1);

package/scripts/topo-group-test.mjs

@@ -1,37 +0,0 @@
-import { chromium } from 'playwright';
-const TOKEN = process.env.LOOP_REVIEW_TOKEN;
-const browser = await chromium.launch({ headless: true });
-const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
-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.removeItem('anet-topo-view'); sessionStorage.setItem('anet_v3_auth','1'); } catch {} });
-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('circle[r="26"]').length > 0;
-}, { timeout: 30000 }).catch(() => {});
-await page.waitForTimeout(800);
-// for each node: alias + avatar bg fill — same prefix should share fill
-const map = await page.evaluate(() => {
-  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
-  const nodeGs = [...svg.querySelectorAll('g')].filter(g =>
-    g.querySelector(':scope > circle[r="26"], :scope > circle[r="18"]') &&
-    g.querySelector(':scope > g > text[font-weight="700"]'));
-  return nodeGs.map(g => {
-    const label = g.querySelector(':scope > g > text[font-weight="700"]').textContent.trim();
-    // avatar bg circle: the small circle that is NOT the status ring (r 26/18) and NOT inner — it's r=14/10 with a fill
-    const avatarCircle = [...g.querySelectorAll(':scope > circle')].find(c => {
-      const r = parseFloat(c.getAttribute('r'));
-      return (r === 14 || r === 10) && c.getAttribute('fill') && c.getAttribute('fill').startsWith('hsl');
-    });
-    return { alias: label, fill: avatarCircle ? avatarCircle.getAttribute('fill') : null };
-  });
-});
-// group by fill
-const byFill = {};
-map.forEach(({alias, fill}) => { (byFill[fill] ??= []).push(alias); });
-console.log('avatar fill → aliases:');
-Object.entries(byFill).forEach(([fill, aliases]) => console.log('  ' + fill + ': ' + aliases.join(', ')));
-await page.locator('section:has(h2:text("Command mesh"))').screenshot({ path: '/tmp/anet-issue-50/topo-grouped.png' });
-await browser.close();
-console.log('done');

package/scripts/topo-group-tier-attr-test.mjs

@@ -1,84 +0,0 @@
-/* Round 468 verification: each group <g> carries `data-group-tier`
- * classifier ('all-working' / 'all-idle' / 'all-offline' / 'mixed').
- * Surfaces the semantic the R319 pip-strip implicitly encodes
- * (single-tier groups render `name · count` only) as a queryable
- * DOM attr.
- *
- * Contract:
- *   - fixture mixes 2 working + 1 idle in alpha cluster → 'mixed'
- *   - fixture has 3 idle in beta cluster → 'all-idle'
- *   - source-file conditional 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: [
-    // alpha: 2 working + 1 idle → 'mixed'
-    mk('alpha·1', 'working'),
-    mk('alpha·2', 'working'),
-    mk('alpha·3', 'idle'),
-    // beta: 3 idle → 'all-idle'
-    mk('beta·1',  'idle'),
-    mk('beta·2',  'idle'),
-    mk('beta·3',  '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][data-group-tier]', { timeout: 15000 });
-await page.waitForTimeout(400);
-
-const groups = await page.evaluate(() =>
-  [...document.querySelectorAll('[data-group][data-group-tier]')].map(g => ({
-    key:  g.getAttribute('data-group'),
-    tier: g.getAttribute('data-group-tier'),
-  }))
-);
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceClassifier  = /groupTier =/.test(src) && /'all-working' :/.test(src) && /'mixed'/.test(src);
-const sourceAttr        = /data-group-tier=\{groupTier\}/.test(src);
-
-await browser.close();
-
-const alpha = groups.find(g => g.key === 'alpha·');
-const beta  = groups.find(g => g.key === 'beta·');
-const tierIsValid = (t) => ['all-working', 'all-idle', 'all-offline', 'mixed'].includes(t);
-
-const results = {
-  groups_count_ge_2:      groups.length >= 2,
-  alpha_is_mixed:         alpha?.tier === 'mixed',
-  beta_is_all_idle:       beta?.tier === 'all-idle',
-  all_tiers_valid:        groups.every(g => tierIsValid(g.tier)),
-  source_classifier_wired: sourceClassifier,
-  source_attr_wired:      sourceAttr,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} group-tier classifier attr:`, JSON.stringify(results),
-  '\n  groups:', JSON.stringify(groups));
-process.exit(ok ? 0 : 1);

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

@@ -1,82 +0,0 @@
-/* Round 610 — group label tint rect gains filter brightness(1.15)
- * on (pinnedGroup === box.key || hoveredGroupLabel === box.key).
- * Same gate as the existing fill swap.
- *
- * Test phases:
- *   1. mock 2 prefix-group nodes → grid layout renders tint rects
- *   2. rest: filter='none', brightness-attr='1', tinted='none'
- *   3. computed transition-property contains 'filter'
- *   4. source: filter 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', '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,
-  });
-  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-label-tint-brightness]', { timeout: 15000, state: 'attached' });
-await page.waitForTimeout(500);
-
-const rest = await page.evaluate(() => {
-  const el = document.querySelector('[data-group-label-tint-brightness]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter: cs.filter,
-    transitionProperty: cs.transitionProperty,
-    brightnessAttr: el.getAttribute('data-group-label-tint-brightness'),
-    tintedAttr: el.getAttribute('data-group-label-tinted'),
-    transitionAttr: el.getAttribute('data-group-label-tint-transition'),
-  };
-});
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceFilter = /filter: \(pinnedGroup === box\.key \|\| hoveredGroupLabel === box\.key\)\s*\?\s*'brightness\(1\.15\)'\s*:\s*undefined/.test(src);
-const sourceAttr = /data-group-label-tint-brightness=\{\(pinnedGroup === box\.key \|\| hoveredGroupLabel === box\.key\) \? '1\.15' : '1'\}/.test(src);
-const sourceTransition = /transition: 'fill 200ms ease-out, opacity 200ms ease-out, x 200ms ease-out, width 200ms ease-out, rx 200ms ease-out, filter 200ms ease-out'/.test(src);
-
-const results = {
-  tint_present:           !!rest,
-  rest_filter_none:       rest?.filter === 'none',
-  rest_brightness_1:      rest?.brightnessAttr === '1',
-  rest_tinted_none:       rest?.tintedAttr === 'none',
-  transition_attr:        rest?.transitionAttr === '200ms',
-  transition_has_filter:  /filter/.test(rest?.transitionProperty || ''),
-  source_filter:          sourceFilter,
-  source_attr:            sourceAttr,
-  source_transition:      sourceTransition,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R610 group-label tint rect brightness (pin/hover panel tier):`,
-  JSON.stringify(results, null, 2),
-  `\n  rest: ${JSON.stringify(rest)}`);
-process.exit(ok ? 0 : 1);

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

@@ -1,107 +0,0 @@
-/* Round 465 verification: hitbox tint rect rx 4 → 5 on
- * pinnedGroup match — mirror R464 (parent group-box rx 14 → 16
- * on isPinned) at the hitbox tier. Pre-R465 the inner hitbox
- * stayed at fixed rx=4 (codex p.125) while the outer container
- * gained pin-tier rx softening; R465 echoes the locked posture
- * at the smaller rect scale.
- *
- * Contract:
- *   - every <rect data-group-label-tint-rx> reports rx='4' at rest
- *   - clicking the hitbox flips that group's rx to '5'
- *   - sibling stays '4'
- *   - transition list (R460) extends to include rx 200ms
- *   - data-group-label-tint-geom-transition='x,width,rx'
- */
-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-label-tint-rx]', { timeout: 15000 });
-await page.waitForTimeout(400);
-
-const readAll = () => page.evaluate(() => {
-  const tints = [...document.querySelectorAll('[data-group-label-tint-rx]')];
-  return tints.map(t => {
-    const parentG = t.closest('g[data-group]');
-    return {
-      key: parentG ? parentG.getAttribute('data-group') : null,
-      rx_attr: t.getAttribute('data-group-label-tint-rx'),
-      rx_live: t.getAttribute('rx'),
-      geom:    t.getAttribute('data-group-label-tint-geom-transition'),
-    };
-  });
-});
-
-const rest = await readAll();
-const firstKey = rest[0]?.key;
-
-let pinned = null;
-if (firstKey) {
-  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=\{pinnedGroup === box\.key \? '5' : '4'\}/.test(src);
-const sourceGeomXWidthRx    = /data-group-label-tint-geom-transition="x,width,rx"/.test(src);
-
-await browser.close();
-
-const restCountGe2 = rest.length >= 2;
-const restAllRx4   = rest.every(r => r.rx_attr === '4' && r.rx_live === '4');
-const restGeomXWR  = rest.every(r => r.geom === 'x,width,rx');
-const pinnedTarget = pinned?.find(r => r.key === firstKey);
-const pinTargetRx5 = pinnedTarget?.rx_attr === '5' && pinnedTarget?.rx_live === '5';
-const pinSiblings  = pinned ? pinned.filter(r => r.key !== firstKey).every(r => r.rx_attr === '4') : false;
-
-const results = {
-  rest_count_ge_2:         restCountGe2,
-  rest_all_rx_4:           restAllRx4,
-  rest_geom_attr_xwrx:     restGeomXWR,
-  pinned_target_rx_5:      pinTargetRx5,
-  pinned_siblings_rest:    pinSiblings,
-  source_rx_conditional:   sourceRxConditional,
-  source_geom_attr_xwrx:   sourceGeomXWidthRx,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} hitbox tint rx pin 4→5:`, JSON.stringify(results),
-  '\n  rest:', JSON.stringify(rest),
-  '\n  pinned target:', JSON.stringify(pinnedTarget));
-process.exit(ok ? 0 : 1);

package/scripts/topo-groupbox-fadein-test.mjs

@@ -1,95 +0,0 @@
-/* Round 173 verification: group boxes (grid layout) fade-in
- * alongside the R9/R172 first-paint wave.
- *
- * Pre-R173 the structural box frames appeared instantly while
- * nodes inside eased in via R9 (0-540ms) and edges via R172
- * (280-980ms). The reveal felt like 'frame slams down, nodes
- * drift in'.
- *
- * R173 wraps each group box <g> in:
- *   className="transition-opacity anet-fade-in"
- *   style={{ animationDelay: 'boxIdx × 60ms (cap 8)' }}
- *   data-group-fade-delay={boxIdx × 60}
- *
- * Test:
- *   1. Force grid layout
- *   2. Mock 4 prefix-clustered sessions → 2 groups
- *   3. Probe each [data-group] wrapper
- *   4. Assert anet-fade-in className present
- *   5. Assert animation-delay 0ms, 60ms
- */
-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');
-    localStorage.setItem('anet-topo-layout', 'grid');
-  } 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: 'cli-claude-code',
-    network_id: nid, project_dir: null,
-    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-  });
-  // 2 distinct prefix groups, 2 sessions each → 2 group boxes
-  await route.fulfill({ response: r, json: { ...b, sessions: [
-    mk('agents-a1'), mk('agents-a2'),
-    mk('infra-b1'),  mk('infra-b2'),
-  ] } });
-});
-await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
-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(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
-await page.waitForSelector('[data-group]', { timeout: 10000 });
-await page.waitForTimeout(400);
-
-const probe = await page.evaluate(() => {
-  const boxes = [...document.querySelectorAll('g[data-group]')];
-  return boxes.map(b => ({
-    key:            b.getAttribute('data-group'),
-    hasFadeClass:   (b.getAttribute('class') || '').includes('anet-fade-in'),
-    fadeDelayAttr:  parseFloat(b.getAttribute('data-group-fade-delay') || ''),
-    animationDelay: b.style.animationDelay || getComputedStyle(b).animationDelay,
-  }));
-});
-
-await browser.close();
-
-const parseDelay = (s) => {
-  if (!s) return null;
-  if (s.endsWith('ms')) return parseFloat(s);
-  if (s.endsWith('s')) return parseFloat(s) * 1000;
-  return parseFloat(s);
-};
-const delays = probe.map(p => parseDelay(p.animationDelay));
-
-const results = {
-  two_boxes_found:        probe.length === 2,
-  all_have_fade_class:    probe.every(p => p.hasFadeClass),
-  box0_delay_attr_0:      probe[0]?.fadeDelayAttr === 0,
-  box1_delay_attr_60:     probe[1]?.fadeDelayAttr === 60,
-  box0_anim_delay_0ms:    delays[0] === 0,
-  box1_anim_delay_60ms:   Math.abs(delays[1] - 60) < 0.5,
-  delays_strictly_increase: delays[0] < delays[1],
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} groupbox fade-in:`, JSON.stringify(results),
-  `\n  boxes =`, probe,
-  `\n  delays (ms) =`, delays);
-process.exit(ok ? 0 : 1);

package/scripts/topo-groupbox-hover-lift-test.mjs

@@ -1,127 +0,0 @@
-/* Round 142 verification: group boxes (R85+R68) gain a drop-
- * shadow lift on hover or pin, mirroring R135's overlay panel
- * hover-elevation. Closes the "interactive surface elevates"
- * vocabulary across canvas-side major surfaces:
- *   R18  KPI cards (Overview)
- *   R135 overlay panels (recent-signal + legend)
- *   R142 group boxes (canvas-level filter)
- *
- * Each carries a soft outward shadow when hovered/selected.
- *
- * States walked (grid layout, three prefix groups):
- *   1. Idle → all 3 boxes: data-group-box-lifted="false", no filter
- *   2. Hover infra label → infra lifted=true, filter set; others stay flat
- *   3. Leave hover → infra restored to flat
- *   4. Pin agents via CustomEvent → agents lifted=true (R63 pin path)
- *   5. Esc → agents back to flat
- */
-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: 1600, 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');
-    // R85 group boxes only render in grid layout
-    localStorage.setItem('anet-topo-layout', 'grid');
-  } 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, status) => ({
-    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
-    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('agents-a1', 'working'), mk('agents-a2', 'idle'), mk('agents-a3', 'idle'),
-    mk('infra-b1',  'working'), mk('infra-b2',  'idle'),
-    mk('build-c1',  'idle'),    mk('build-c2',  'idle'),
-  ] } });
-});
-await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
-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(() => document.querySelectorAll('g[data-node]').length === 7, { timeout: 30000 });
-await page.waitForSelector('[data-group]', { timeout: 10000 });
-await page.waitForTimeout(500);
-
-const inspectAll = () => page.evaluate(() => {
-  const boxes = [...document.querySelectorAll('rect[data-group-box-pinned]')];
-  return boxes.map(rect => {
-    const parentG = rect.closest('g[data-group]');
-    return {
-      group:   parentG?.getAttribute('data-group'),
-      lifted:  rect.getAttribute('data-group-box-lifted'),
-      filter:  rect.getAttribute('filter'),
-      pinned:  rect.getAttribute('data-group-box-pinned'),
-    };
-  });
-});
-
-const state1 = await inspectAll();
-const idleAll = state1.every(b => b.lifted === 'false' && !b.filter);
-
-// Hover infra label
-const infra = state1.find(b => (b.group || '').startsWith('infra'));
-await page.locator(`[data-group-label-hit="${infra.group}"]`).first().hover({ timeout: 3000 });
-await page.waitForTimeout(250);
-const state2 = await inspectAll();
-const infra2 = state2.find(b => b.group === infra.group);
-const othersFlat2 = state2.filter(b => b.group !== infra.group).every(b => b.lifted === 'false' && !b.filter);
-
-// Mouse away → restore
-await page.mouse.move(20, 20);
-await page.waitForTimeout(250);
-const state3 = await inspectAll();
-const infra3 = state3.find(b => b.group === infra.group);
-
-// Pin agents via CustomEvent
-const agents = state1.find(b => (b.group || '').startsWith('agents'));
-await page.evaluate((key) => {
-  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'group', value: key } }));
-}, agents.group);
-await page.waitForTimeout(250);
-const state4 = await inspectAll();
-const agents4 = state4.find(b => b.group === agents.group);
-
-// Esc clears pin
-await page.keyboard.press('Escape');
-await page.waitForTimeout(250);
-const state5 = await inspectAll();
-const agents5 = state5.find(b => b.group === agents.group);
-
-await browser.close();
-
-const liftFilter = 'url(#topo-groupbox-lift)';
-const results = {
-  s1_idleAllFlat:           idleAll,
-
-  s2_infraLifted:           infra2?.lifted === 'true',
-  s2_infraHasFilter:        infra2?.filter === liftFilter,
-  s2_othersStillFlat:       othersFlat2,
-
-  s3_infraRestored:         infra3?.lifted === 'false' && !infra3.filter,
-
-  s4_agentsLifted:          agents4?.lifted === 'true',
-  s4_agentsHasFilter:       agents4?.filter === liftFilter,
-  s4_agentsPinnedAttr:      agents4?.pinned === 'true',
-
-  s5_agentsCleared:         agents5?.lifted === 'false' && !agents5.filter,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} groupbox hover-lift:`, JSON.stringify(results),
-  `\n  s1=`, state1,
-  `\n  infra2=`, infra2, ` agents4=`, agents4, ` agents5=`, agents5);
-process.exit(ok ? 0 : 1);