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

package/scripts/topo-layout-toggle-hover-tracking-test.mjs

@@ -1,109 +0,0 @@
-/* Round 351 verification: Layout-toggle Ring|Grid buttons gain
- * hover-state letter-spacing (Tailwind hover:tracking-wide =
- * 0.025em). Extends the R344 (footer) / R345 (panel titles) /
- * R347 (zoom-level readout) hover-letter-spacing family to a
- * 4th surface — the chrome-strip Ring/Grid layout-toggle pair.
- *
- * Pure-CSS approach: no new React state. transition-colors
- * className dropped in favour of an inline transition spec
- * that bundles bg/color (150ms ease) + letter-spacing (200ms
- * ease-out) so the tracking-wide hover doesn't snap. Grid
- * button additionally keeps border-color in the transition
- * list (R268 theme-ease).
- *
- * Contract (cyber):
- *   - Rest: both buttons computed letter-spacing === 'normal' (0).
- *   - Hover Ring: computed letter-spacing === '0.4px' (0.025em ×
- *     ~14-16 base font; we'll accept any value > 0.1px).
- *   - Hover Grid: same.
- *   - Inline transition on both contains 'letter-spacing'.
- *   - Pre-R351 invariants: data-topo-chrome-layout attrs intact,
- *     R268 border-color transition still present on Grid.
- */
-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-layout="ring"]', { timeout: 15000 });
-await page.waitForSelector('[data-topo-chrome-layout="grid"]', { timeout: 5000 });
-await page.waitForTimeout(300);
-
-const restProbe = await page.evaluate(() => {
-  const r = document.querySelector('[data-topo-chrome-layout="ring"]');
-  const g = document.querySelector('[data-topo-chrome-layout="grid"]');
-  const rcs = r ? getComputedStyle(r) : null;
-  const gcs = g ? getComputedStyle(g) : null;
-  return {
-    ringLs:     rcs?.letterSpacing ?? null,
-    ringTrans:  rcs?.transition ?? null,
-    gridLs:     gcs?.letterSpacing ?? null,
-    gridTrans:  gcs?.transition ?? null,
-  };
-});
-
-// Hover Ring button.
-await page.hover('[data-topo-chrome-layout="ring"]');
-await page.waitForTimeout(300);
-const ringHover = await page.evaluate(() => {
-  const r = document.querySelector('[data-topo-chrome-layout="ring"]');
-  return { ls: r ? getComputedStyle(r).letterSpacing : null };
-});
-
-// Move to Grid button.
-await page.hover('[data-topo-chrome-layout="grid"]');
-await page.waitForTimeout(300);
-const gridHover = await page.evaluate(() => {
-  const g = document.querySelector('[data-topo-chrome-layout="grid"]');
-  return { ls: g ? getComputedStyle(g).letterSpacing : null };
-});
-
-await browser.close();
-
-const isRestLs = (v) => v === 'normal' || v === '0px' || v === '0' || v === null;
-const isHoverLs = (v) => {
-  // tracking-wide = 0.025em. At base 14-16px font, that's ~0.35-0.4px.
-  if (!v || v === 'normal') return false;
-  const n = parseFloat(v);
-  return Number.isFinite(n) && n > 0.2 && n < 1.0;
-};
-const hasTrans = (s, prop) =>
-  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
-
-const results = {
-  rest_ring_ls_zero:    isRestLs(restProbe.ringLs),
-  rest_grid_ls_zero:    isRestLs(restProbe.gridLs),
-  ring_trans_has_ls:    hasTrans(restProbe.ringTrans, 'letter-spacing'),
-  grid_trans_has_ls:    hasTrans(restProbe.gridTrans, 'letter-spacing'),
-  grid_trans_has_bcol:  hasTrans(restProbe.gridTrans, 'border-color'),  // R268
-  hover_ring_tracked:   isHoverLs(ringHover.ls),
-  hover_grid_tracked:   isHoverLs(gridHover.ls),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} layout-toggle hover tracking-wide:`, JSON.stringify(results),
-  '\n  rest:       ', restProbe,
-  '\n  hover ring: ', ringHover,
-  '\n  hover grid: ', gridHover);
-process.exit(ok ? 0 : 1);

package/scripts/topo-layout-toggle-radius-test.mjs

@@ -1,87 +0,0 @@
-/* Round 375 verification: Layout-toggle wrapper rounded-md → rounded-
- * lg (6 → 8 px). Extends the R330/R331/R332 corner-radius cascade to
- * the chrome-strip layout-toggle wrapper. Pre-R375 the wrapper at
- * rounded-md (6 px) was the only chrome-strip container still using
- * the smaller corner radius — both R330 outer wrapper and R332
- * minimap sit at ≥ 8 px; R375 brings the toggle into the rounded-lg
- * tier where minimap already lives.
- *
- * Contract:
- *   - data-topo-chrome-layout-trailer element computed border-radius
- *     === '8px' (rounded-lg).
- *   - data-topo-chrome-layout-radius === 'rounded-lg'.
- *   - Pre-R375 invariants:
- *     * border still present (1 px default Tailwind)
- *     * R268 inline borderColor + 200ms border-color transition
- *     * R329 mr-0.5 spacing preserved
- *     * inline-flex + overflow-hidden preserved
- *     * Inner buttons (Ring + Grid) still mounted as flex children
- */
-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-layout-trailer]', { timeout: 15000 });
-await page.waitForTimeout(300);
-
-const probe = await page.evaluate(() => {
-  const w = document.querySelector('[data-topo-chrome-layout-trailer]');
-  const cs = w ? getComputedStyle(w) : null;
-  const ring = w?.querySelector('[data-topo-chrome-layout="ring"]');
-  const grid = w?.querySelector('[data-topo-chrome-layout="grid"]');
-  return {
-    borderRadius:    cs?.borderRadius ?? null,
-    radiusData:      w?.getAttribute('data-topo-chrome-layout-radius') ?? null,
-    borderWidth:     cs?.borderWidth ?? null,
-    display:         cs?.display ?? null,
-    overflow:        cs?.overflow ?? null,
-    transition:      cs?.transition ?? null,
-    cls:             w?.getAttribute('class') ?? null,
-    ringPresent:     !!ring,
-    gridPresent:     !!grid,
-  };
-});
-
-await browser.close();
-
-const hasTrans = (s, prop) =>
-  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
-
-const results = {
-  border_radius_8px:      probe.borderRadius === '8px',                       // rounded-lg
-  data_radius_lg:         probe.radiusData === 'rounded-lg',
-  border_width_1px:       probe.borderWidth === '1px',
-  display_inline_flex:    probe.display === 'inline-flex' || probe.display === 'flex',
-  overflow_hidden:        probe.overflow === 'hidden',
-  trans_has_border_color: hasTrans(probe.transition, 'border-color'),         // R268
-  cls_has_mr_0_5:         /mr-0\.5/.test(probe.cls || ''),                    // R329
-  ring_button_present:    probe.ringPresent,
-  grid_button_present:    probe.gridPresent,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} Layout-toggle wrapper rounded-md → rounded-lg:`, JSON.stringify(results),
-  '\n  probe:', probe);
-process.exit(ok ? 0 : 1);

package/scripts/topo-layout-toggle-test.mjs

@@ -1,131 +0,0 @@
-/* Round 163 verification: Ring/Grid layout toggle buttons pick
- * up the R154 chrome-button polish convention.
- *
- * Pre-R163 the buttons had aria-pressed + transition-colors but:
- *   - no focus-visible ring (browser default invisible on canvas)
- *   - inactive hover only nudged text-gray-500 → gray-400, no bg
- *
- * R163 adds:
- *   data-topo-chrome-layout="ring|grid"
- *   data-topo-chrome-layout-active="true|false"
- *   focus-visible:ring-2 ring-cyan-400/60 ring-inset
- *   inactive: hover:text-gray-300 + hover:bg-cyan-500/5
- *   active:   hover:bg-cyan-500/20 (slightly hotter)
- *
- * Test:
- *   1. Both buttons present with data-topo-chrome-layout attr
- *   2. Active button has bg-cyan-500/15 class fragment (existing)
- *   3. Focus the inactive button → focus-visible ring class fragment
- *   4. Hover the inactive button → bg color shifts from transparent
- *      to a cyan-ish tint (border bg-cyan-500/5)
- */
-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', 'ring'); } 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,
-  });
-  await route.fulfill({ response: r, json: { ...b, sessions: [mk('alpha'), mk('beta')] } });
-});
-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 === 2, { timeout: 30000 });
-await page.waitForSelector('[data-topo-chrome-layout]', { timeout: 10000 });
-await page.waitForTimeout(400);
-
-// Probe basic attrs & class membership
-const probe = await page.evaluate(() => {
-  const ring = document.querySelector('[data-topo-chrome-layout="ring"]');
-  const grid = document.querySelector('[data-topo-chrome-layout="grid"]');
-  if (!ring || !grid) return null;
-  return {
-    ring_active:    ring.getAttribute('data-topo-chrome-layout-active'),
-    grid_active:    grid.getAttribute('data-topo-chrome-layout-active'),
-    ring_pressed:   ring.getAttribute('aria-pressed'),
-    grid_pressed:   grid.getAttribute('aria-pressed'),
-    ring_class:     ring.getAttribute('class') || '',
-    grid_class:     grid.getAttribute('class') || '',
-  };
-});
-
-// Focus the inactive (grid) button — focus-visible ring should kick in.
-// Tab-focus produces the :focus-visible state; .focus() doesn't always.
-// Use page.keyboard.press('Tab') after first focusing somewhere known.
-await page.locator('[data-topo-chrome-layout="grid"]').focus();
-// trigger keyboard navigation to enable focus-visible state heuristic
-await page.evaluate(() => {
-  const el = document.querySelector('[data-topo-chrome-layout="grid"]');
-  if (el) el.matches(':focus-visible');
-});
-const focusVisibleProbe = await page.evaluate(() => {
-  const el = document.querySelector('[data-topo-chrome-layout="grid"]');
-  if (!el) return null;
-  return {
-    isActiveElement: document.activeElement === el,
-    // Inspect outline & box-shadow because the Tailwind focus-visible:ring
-    // class compiles to a box-shadow. After .focus() Chromium reports
-    // :focus-visible heuristically — we verify the class fragment exists
-    // in the stylesheet bound to this element rather than relying on the
-    // dynamic pseudo-class match.
-    classFragments: {
-      hasFocusVisibleRingClass: (el.getAttribute('class') || '').includes('focus-visible:ring-cyan-400/60'),
-      hasRingInset:             (el.getAttribute('class') || '').includes('focus-visible:ring-inset'),
-      hasFocusOutlineNone:      (el.getAttribute('class') || '').includes('focus:outline-none'),
-    },
-  };
-});
-
-// Hover the inactive (grid) button — bg should shift away from transparent.
-const gridBgBefore = await page.evaluate(() => {
-  const el = document.querySelector('[data-topo-chrome-layout="grid"]');
-  return el ? getComputedStyle(el).backgroundColor : null;
-});
-await page.locator('[data-topo-chrome-layout="grid"]').hover();
-await page.waitForTimeout(300);
-const gridBgHover = await page.evaluate(() => {
-  const el = document.querySelector('[data-topo-chrome-layout="grid"]');
-  return el ? getComputedStyle(el).backgroundColor : null;
-});
-
-await browser.close();
-
-const results = {
-  both_buttons_found:        probe !== null,
-  ring_is_active:            probe?.ring_active === 'true',
-  grid_is_inactive:          probe?.grid_active === 'false',
-  ring_aria_pressed:         probe?.ring_pressed === 'true',
-  grid_aria_unpressed:       probe?.grid_pressed === 'false',
-  active_has_cyan_bg_class:  probe?.ring_class.includes('bg-cyan-500/15'),
-  inactive_hover_bg_class:   probe?.grid_class.includes('hover:bg-cyan-500/5'),
-  active_hover_bg_class:     probe?.ring_class.includes('hover:bg-cyan-500/20'),
-  focus_outline_none:        focusVisibleProbe?.classFragments?.hasFocusOutlineNone === true,
-  focus_visible_ring_class:  focusVisibleProbe?.classFragments?.hasFocusVisibleRingClass === true,
-  focus_visible_ring_inset:  focusVisibleProbe?.classFragments?.hasRingInset === true,
-  inactive_bg_before:        gridBgBefore !== null,
-  hover_changes_bg:          gridBgBefore !== gridBgHover,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} layout toggle polish:`, JSON.stringify(results),
-  `\n  probe=`, probe,
-  `\n  focus=`, focusVisibleProbe,
-  `\n  bg before/hover=`, gridBgBefore, '→', gridBgHover);
-process.exit(ok ? 0 : 1);

package/scripts/topo-layout-trailer-mr-test.mjs

@@ -1,82 +0,0 @@
-/* Round 329 verification: Layout toggle wrapper `mr-1` → `mr-0.5`
- * to restore R260's 12px effective semantic gap after R328's chip-row
- * gap-2.5 (10px) bump.
- *
- * R260 designed for an effective 12px gap between the Layout CONTROL
- * and the first DISPLAY chip:
- *   pre-R260: chip-row gap-2 (8px) + mr-1 (4px) = 12px ✓
- *   R328:     chip-row gap-2.5 (10px) + mr-1 (4px) = 14px (drift)
- *   R329:     chip-row gap-2.5 (10px) + mr-0.5 (2px) = 12px ✓
- *
- * Contract:
- *   - [data-topo-chrome-layout-trailer] className contains 'mr-0.5'
- *     (not 'mr-1').
- *   - Computed margin-right === '2px'.
- *   - R328 chip-row gap-2.5 regression: parent chip-row column-gap=10px.
- *   - R326 chrome regression: chrome column-gap=8px.
- *   - R317 / R318 / R294 chrome + pulse regressions 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('alpha'), mk('beta') ] } });
-});
-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-layout-trailer]', { timeout: 15000 });
-await page.waitForTimeout(300);
-
-const probe = await page.evaluate(() => {
-  const trailer = document.querySelector('[data-topo-chrome-layout-trailer]');
-  let chipRow = trailer?.parentElement || null;
-  while (chipRow && !chipRow.className.includes('flex-wrap')) {
-    chipRow = chipRow.parentElement;
-  }
-  const chrome = document.querySelector('[data-topo-chrome]');
-  return {
-    trailerClass:       trailer?.className ?? '',
-    trailerMarginRight: trailer ? getComputedStyle(trailer).marginRight : null,
-    chipRowGap:         chipRow ? getComputedStyle(chipRow).columnGap : null,
-    chromeGap:          chrome ? getComputedStyle(chrome).columnGap : null,
-    layoutInactiveCls:  document.querySelector('[data-topo-chrome-layout="grid"]')?.className ?? '',
-    layoutActiveCls:    document.querySelector('[data-topo-chrome-layout="ring"]')?.className ?? '',
-    pulseCount:         document.querySelectorAll('[data-pulse-wrapper]').length,
-  };
-});
-await browser.close();
-
-const results = {
-  trailer_has_mr_0_5:           probe.trailerClass.includes('mr-0.5') && !probe.trailerClass.includes('mr-1 '),
-  trailer_margin_right_2px:     probe.trailerMarginRight === '2px',
-  r328_chip_row_gap_10px:       probe.chipRowGap === '10px',
-  r326_chrome_gap_8px:          probe.chromeGap === '8px',
-  r317_inactive_gray_400:       probe.layoutInactiveCls.includes('text-gray-400'),
-  r318_active_font_medium:      probe.layoutActiveCls.includes('font-medium'),
-  r294_pulse_absent:            probe.pulseCount === 0,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} layout-trailer mr-0.5:`, JSON.stringify(results),
-  '\n  trailer margin-right:', probe.trailerMarginRight,
-  '\n  chip-row column-gap: ', probe.chipRowGap,
-  '\n  chrome column-gap:   ', probe.chromeGap);
-process.exit(ok ? 0 : 1);

package/scripts/topo-legend-compress-test.mjs

@@ -1,107 +0,0 @@
-/* Round 277 verification: legend panel compress 104 → 88, matching the
- * recent-signal panel's height post-R256. Row stride 24 → 18.
- *
- * Pre-R277:
- *   Panel: 224×104, rx=8
- *   Row 1 (working): y0=32, y1=36
- *   Row 2 (idle):    y0=56, y1=60
- *   Row 3 (offline): y0=80, y1=84
- *   Flow-arrow:      M140,80 Q164,56 196,80 (endpoints y=80)
- *
- * Post-R277:
- *   Panel: 224×88, rx=8
- *   Row 1 (working): y0=32, y1=36  (anchored — R271 hitbox y=21 invariant)
- *   Row 2 (idle):    y0=50, y1=54  (-6)
- *   Row 3 (offline): y0=68, y1=72  (-12)
- *   Flow-arrow:      M140,68 Q164,44 196,68 (tracks new offline cy)
- *
- * Net: legend panel takes ~15% less vertical chrome; panel pair
- * (recent-signal 88 + legend 88) now share the same height. Third
- * 减法 cut after R275 (FreshnessChip conditional) + R276 (orbit
- * particles retired).
- *
- * Test scope:
- *   1. Legend panel rect height === 88.
- *   2. Recent-signal panel rect height === 88 (regression — R256 invariant).
- *   3. Working row hitbox y === 21 (R271 invariant: row.y0=32 unchanged).
- *   4. Flow-arrow path starts with "M140,68" (tracks new offline cy=68).
- *   5. R275 freshness chip absent at fresh (regression).
- *   6. R276 orbit particles absent (regression).
- */
-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('alpha'), mk('beta'), mk('gamma'), mk('delta'),
-  ] } });
-});
-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.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
-await page.waitForSelector('[data-topo-panel="legend"]',         { timeout: 10000 });
-await page.waitForSelector('[data-topo-panel="recent"]',         { timeout: 10000 });
-await page.waitForSelector('[data-legend-status="working"] rect', { timeout: 10000 });
-await page.waitForSelector('[data-legend-flow-arrow]',           { timeout: 10000 });
-await page.waitForTimeout(300);
-
-// Hover working row to materialize the tinted hitbox rect for the
-// y=21 invariant check (R271). Without hover the rect carries the
-// same y attr but tint fills are transparent.
-await page.locator('[data-legend-status="working"]').hover();
-await page.waitForTimeout(150);
-
-const probe = await page.evaluate(() => {
-  const legendG       = document.querySelector('[data-topo-panel="legend"]');
-  const recentG       = document.querySelector('[data-topo-panel="recent"]');
-  const workingRow    = document.querySelector('[data-legend-status="working"]');
-  const workingHitbox = workingRow ? workingRow.querySelector('rect') : null;
-  const flowArrow     = document.querySelector('[data-legend-flow-arrow]');
-  const freshnessChip = document.querySelector('[data-freshness-chip]');
-  const orbits        = document.querySelectorAll('[data-topo-orbit-bucket]');
-  return {
-    legendHeight:   legendG?.querySelector('rect')?.getAttribute('height') ?? null,
-    recentHeight:   recentG?.querySelector('rect')?.getAttribute('height') ?? null,
-    workingHitboxY: workingHitbox ? +workingHitbox.getAttribute('y') : null,
-    flowArrowD:     flowArrow ? flowArrow.getAttribute('d') : null,
-    freshnessPresent: freshnessChip !== null,
-    orbitCount:     orbits.length,
-  };
-});
-await browser.close();
-
-const results = {
-  legend_height_88:              probe.legendHeight === '88',
-  recent_height_88_regression:   probe.recentHeight === '88',
-  r271_working_hitbox_y_21:      probe.workingHitboxY === 21,
-  flow_arrow_starts_at_y68:      probe.flowArrowD === 'M140,68 Q164,44 196,68',
-  r275_freshness_absent:         probe.freshnessPresent === false,
-  r276_orbit_absent:             probe.orbitCount === 0,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} legend compress:`, JSON.stringify(results),
-  '\n  legend height:', probe.legendHeight,
-  '\n  recent height:', probe.recentHeight,
-  '\n  working hitbox y:', probe.workingHitboxY,
-  '\n  flow arrow d:', probe.flowArrowD,
-  '\n  orbit count:', probe.orbitCount);
-process.exit(ok ? 0 : 1);

package/scripts/topo-legend-count-active-opacity-test.mjs

@@ -1,102 +0,0 @@
-/* Round 449 verification: legend-row count active-state opacity
- * 0.95 → 1.0 on (hoveredStatus===row.key || isPinned). Closes the 5%
- * alpha gap on populated active rows.
- *
- * Contract:
- *   - rest: every populated legend-count reports opacity '0.65' (R204)
- *   - click 'working' status: that count opacity '1'
- *   - empty (0-count) rows stay at R204 dim (0.28/0.30) unaffected
- *   - siblings stay at rest 0.65
- */
-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',  'working'),
-    mk('gamma', '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-legend-count]', { timeout: 15000 });
-await page.waitForTimeout(400);
-
-const readAll = () => page.evaluate(() => {
-  const ts = [...document.querySelectorAll('[data-legend-count]')];
-  return ts.map(t => ({
-    key:     t.getAttribute('data-legend-count'),
-    opacity: t.getAttribute('opacity'),
-    empty:   t.getAttribute('data-legend-count-empty'),
-  }));
-});
-
-const rest = await readAll();
-
-// Click 'working' status row to pin
-let pinned = null;
-const workingGroup = await page.$(`[data-legend-status="working"]`);
-if (workingGroup) {
-  await workingGroup.click();
-  await page.waitForTimeout(250);
-  pinned = await readAll();
-}
-
-const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceWired = /:\s*\(hoveredStatus === row\.key \|\| isPinned \? 1 : 0\.65\)/.test(fileText);
-
-await browser.close();
-
-// rest: populated rows (working=2, idle=1) should be 0.65; offline (count=0) should be 0.28/0.30
-const workingRest = rest.find(r => r.key === 'working');
-const idleRest = rest.find(r => r.key === 'idle');
-const offlineRest = rest.find(r => r.key === 'offline');
-
-const restWorking_065 = workingRest?.opacity === '0.65';
-const restIdle_065 = idleRest?.opacity === '0.65';
-const restOfflineEmpty = offlineRest?.empty === 'true' && (offlineRest?.opacity === '0.3' || offlineRest?.opacity === '0.28');
-
-// pinned: working should be 1
-const pinnedWorking = pinned?.find(r => r.key === 'working');
-const pinnedIdle = pinned?.find(r => r.key === 'idle');
-const pinnedOffline = pinned?.find(r => r.key === 'offline');
-
-const pinWorking_1 = pinnedWorking?.opacity === '1';
-const pinIdleRest = pinnedIdle?.opacity === '0.65';
-const pinOfflineEmpty = pinnedOffline?.empty === 'true';
-
-const results = {
-  rest_working_065:          restWorking_065,
-  rest_idle_065:             restIdle_065,
-  rest_offline_empty_dim:    restOfflineEmpty,
-  pin_working_opacity_1:     pinWorking_1,
-  pin_idle_stays_rest_065:   pinIdleRest,
-  pin_offline_stays_empty:   pinOfflineEmpty,
-  source_wired:              sourceWired,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} legend count active opacity:`, JSON.stringify(results),
-  '\n  rest:', JSON.stringify(rest),
-  '\n  pinned:', JSON.stringify(pinned));
-process.exit(ok ? 0 : 1);