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

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

@@ -1,102 +0,0 @@
-/* Round 175 verification: corner panels fade-in after the
- * canvas content reveal.
- *
- * Pre-R175 the recent-signal (top-left) + legend (top-right)
- * panels appeared instantly while nodes/edges/group boxes/tier
- * rings staggered in around them. The panels felt like 'already
- * there' before the content showed up.
- *
- * R175 adds .anet-fade-in + 700ms / 800ms animation-delay on
- * the two panel <g> wrappers — fifth surface in the first-paint
- * reveal family (after R9 nodes / R172 edges / R173 group boxes
- * / R174 tier rings).
- *
- * Test:
- *   1. Mock 3 sessions in ring layout
- *   2. Probe [data-topo-panel="recent"] and [="legend"]
- *   3. Both have .anet-fade-in className
- *   4. recent panel animationDelay = 700ms
- *   5. legend panel animationDelay = 800ms
- *   6. data-topo-panel-fade-delay attributes match
- */
-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'), mk('gamma')] } });
-});
-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 === 3, { timeout: 30000 });
-await page.waitForSelector('[data-topo-panel="recent"]', { timeout: 10000 });
-await page.waitForSelector('[data-topo-panel="legend"]', { timeout: 10000 });
-await page.waitForTimeout(400);
-
-const probe = await page.evaluate(() => {
-  const grab = (sel) => {
-    const el = document.querySelector(sel);
-    if (!el) return null;
-    return {
-      hasFadeClass:   (el.getAttribute('class') || '').includes('anet-fade-in'),
-      fadeDelayAttr:  parseFloat(el.getAttribute('data-topo-panel-fade-delay') || ''),
-      animationDelay: el.style.animationDelay || getComputedStyle(el).animationDelay,
-    };
-  };
-  return {
-    recent: grab('[data-topo-panel="recent"]'),
-    legend: grab('[data-topo-panel="legend"]'),
-  };
-});
-
-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 recentDelay = parseDelay(probe.recent?.animationDelay);
-const legendDelay = parseDelay(probe.legend?.animationDelay);
-
-const results = {
-  recent_panel_found:        probe.recent !== null,
-  legend_panel_found:        probe.legend !== null,
-  recent_has_fade_class:     probe.recent?.hasFadeClass === true,
-  legend_has_fade_class:     probe.legend?.hasFadeClass === true,
-  recent_delay_attr_700:     probe.recent?.fadeDelayAttr === 700,
-  legend_delay_attr_800:     probe.legend?.fadeDelayAttr === 800,
-  recent_anim_delay_700ms:   recentDelay === 700,
-  legend_anim_delay_800ms:   legendDelay === 800,
-  legend_lags_recent_100ms:  legendDelay - recentDelay === 100,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} panel fade-in:`, JSON.stringify(results),
-  `\n  recent =`, probe.recent, `delay=${recentDelay}`,
-  `\n  legend =`, probe.legend, `delay=${legendDelay}`);
-process.exit(ok ? 0 : 1);

package/scripts/topo-panel-hot-tail-fade-test.mjs

@@ -1,132 +0,0 @@
-/* Round 190 verification: R129 hot-tail tspan in recent-signal
- * panel header gets anet-fade-in for smooth entrance.
- *
- * Pre-R190 the tspan mounted/unmounted on hotFlowCount > 0 —
- * snap. R190 keeps the conditional render (so the tspan
- * doesn't consume layout when no hot flows) but adds the R3
- * .anet-fade-in CSS animation that plays once on mount.
- *
- * Test scenarios:
- *   A. 0 hot flows (just a few cold ones):
- *      [data-recent-panel-hot-count] NOT present
- *   B. 1 hot flow (count=12):
- *      tspan present with text '· 1 hot', className contains
- *      'anet-fade-in', data-recent-panel-hot-count='1'
- *   C. 2 hot flows (count=15 + count=20):
- *      data-recent-panel-hot-count='2', text '· 2 hot'
- */
-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 {}
-});
-
-async function run(scenario) {
-  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-  await ctx.unroute('**/api/hub/status*').catch(() => {});
-  await ctx.unroute('**/api/hub/messages*').catch(() => {});
-  await ctx.unroute('**/api/hub/tasks*').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: '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'), mk('gamma'), mk('delta'),
-    ] } });
-  });
-  const now = Date.now();
-  const msgs = scenario(now);
-  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
-  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-recent-panel-count]', { timeout: 10000 });
-  await page.waitForTimeout(400);
-
-  const out = await page.evaluate(() => {
-    const tail = document.querySelector('[data-recent-panel-hot-count]');
-    return {
-      tailPresent:    !!tail,
-      tailText:       tail?.textContent || null,
-      tailCount:      tail?.getAttribute('data-recent-panel-hot-count'),
-      tailClassName:  tail?.getAttribute('class') || '',
-      // R223 added: visibility attribute for always-mount-with-opacity-
-      // gate. "no tail" is either tailPresent=false (legacy conditional
-      // mount, no longer current) OR tailVisible='false' (R223 always-
-      // mount with opacity 0).
-      tailVisible:    tail?.getAttribute('data-recent-panel-hot-visible'),
-    };
-  });
-  await page.close();
-  return out;
-}
-
-// Scenario A: 0 hot — 1 cold flow
-const a = await run((now) => {
-  const m = [];
-  for (let i = 0; i < 4; i++) {
-    m.push({ id: `cold${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
-      network_id: 'default', created_at: new Date(now - (1000 + i * 50)).toISOString() });
-  }
-  return m;
-});
-
-// Scenario B: 1 hot flow alpha→beta count=12
-const b = await run((now) => {
-  const m = [];
-  for (let i = 0; i < 12; i++) {
-    m.push({ id: `hot${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
-      network_id: 'default', created_at: new Date(now - (1000 + i * 50)).toISOString() });
-  }
-  return m;
-});
-
-// Scenario C: 2 hot flows
-const c = await run((now) => {
-  const m = [];
-  for (let i = 0; i < 15; i++) {
-    m.push({ id: `h1-${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
-      network_id: 'default', created_at: new Date(now - (5000 + i * 50)).toISOString() });
-  }
-  for (let i = 0; i < 20; i++) {
-    m.push({ id: `h2-${i}`, from_alias: 'gamma', to_alias: 'delta', content: 'hi',
-      network_id: 'default', created_at: new Date(now - (15000 + i * 50)).toISOString() });
-  }
-  return m;
-});
-
-await browser.close();
-
-const results = {
-  // R223 update: hot-tail is always-mounted now with opacity-gate;
-  // "no tail" means either not in DOM (legacy) OR present-but-hidden
-  // (always-mount visible='false'). Accept both forms.
-  a_no_tail:               a.tailPresent === false || a.tailVisible === 'false',
-  b_tail_present:          b.tailPresent === true,
-  b_tail_text:             /·\s*1\s*hot/.test(b.tailText || ''),
-  b_tail_count_1:          b.tailCount === '1',
-  b_has_fade_class:        b.tailClassName.includes('anet-fade-in'),
-  c_tail_present:          c.tailPresent === true,
-  c_tail_text:             /·\s*2\s*hot/.test(c.tailText || ''),
-  c_tail_count_2:          c.tailCount === '2',
-  c_has_fade_class:        c.tailClassName.includes('anet-fade-in'),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} panel hot-tail fade:`, JSON.stringify(results),
-  `\n  A (0 hot):`, a,
-  `\n  B (1 hot):`, b,
-  `\n  C (2 hot):`, c);
-process.exit(ok ? 0 : 1);

package/scripts/topo-panel-hover-elevation-test.mjs

@@ -1,118 +0,0 @@
-/* Round 135 verification: both overlay panels (recent-signal +
- * legend) drop-shadow boosts on mouseenter, restores on leave.
- * Mirrors R18's KPI-card hover-elevation from the Overview page.
- *
- * Why both panels: each panel chrome already hosts interactive
- * rows (R56/R116 recent rows, R55/R61 legend rows) and footer
- * nav (R133). Hover-lift signals "this whole panel is alive"
- * without misleading users that the panel itself is clickable —
- * the underlying click affordances are still the rows + footer.
- *
- * State transitions tested:
- *   1. Neither panel hovered → both data-topo-panel-hovered="false",
- *      both rect filters = baseline (2px/6px blur)
- *   2. Hover recent → that panel hovered=true, filter boosted
- *      (4px/12px blur); legend still baseline
- *   3. Leave recent (move far away) → recent restored
- *   4. Hover legend → legend hovered=true, filter boosted
- *   5. Leave legend → legend restored
- *
- * Filter inline-string detection: the boosted variant carries the
- * `4px 12px` magic numbers in its drop-shadow argument.
- */
-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: 1400, 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, 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('alpha', 'working'), mk('beta', 'idle'), mk('gamma', 'working'),
-  ] } });
-});
-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 === 3, { timeout: 30000 });
-await page.waitForSelector('[data-topo-panel="recent"]', { timeout: 10000 });
-await page.waitForTimeout(400);
-
-const inspect = () => page.evaluate(() => {
-  const get = (key) => {
-    const g = document.querySelector(`[data-topo-panel="${key}"]`);
-    const rect = g?.querySelector('rect[data-topo-panel-elevation]');
-    return {
-      hovered: g?.getAttribute('data-topo-panel-hovered'),
-      filter: (rect?.getAttribute('style') || ''),
-    };
-  };
-  return { recent: get('recent'), legend: get('legend') };
-});
-
-// State 1 — neither hovered
-const s1 = await inspect();
-
-// State 2 — hover recent
-await page.locator('[data-topo-panel="recent"]').hover();
-await page.waitForTimeout(300);
-const s2 = await inspect();
-
-// State 3 — leave recent (move far away from both panels)
-await page.mouse.move(700, 350);
-await page.waitForTimeout(300);
-const s3 = await inspect();
-
-// State 4 — hover legend
-await page.locator('[data-topo-panel="legend"]').hover();
-await page.waitForTimeout(300);
-const s4 = await inspect();
-
-// State 5 — leave legend
-await page.mouse.move(500, 350);
-await page.waitForTimeout(300);
-const s5 = await inspect();
-
-await browser.close();
-
-const isBoosted = (style) => /4px\s+12px/.test(style);
-const isBase    = (style) => /2px\s+6px/.test(style) && !/4px\s+12px/.test(style);
-
-const results = {
-  s1_recent_notHovered: s1.recent.hovered === 'false',
-  s1_legend_notHovered: s1.legend.hovered === 'false',
-  s1_recent_baseShadow: isBase(s1.recent.filter),
-  s1_legend_baseShadow: isBase(s1.legend.filter),
-
-  s2_recent_hovered:    s2.recent.hovered === 'true',
-  s2_recent_boosted:    isBoosted(s2.recent.filter),
-  s2_legend_stillBase:  s2.legend.hovered === 'false' && isBase(s2.legend.filter),
-
-  s3_recent_restored:   s3.recent.hovered === 'false' && isBase(s3.recent.filter),
-
-  s4_legend_hovered:    s4.legend.hovered === 'true',
-  s4_legend_boosted:    isBoosted(s4.legend.filter),
-  s4_recent_stillBase:  s4.recent.hovered === 'false' && isBase(s4.recent.filter),
-
-  s5_legend_restored:   s5.legend.hovered === 'false' && isBase(s5.legend.filter),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} panel hover elevation:`, JSON.stringify(results),
-  `\n  s1=`, s1, `\n  s2=`, s2, `\n  s3=`, s3, `\n  s4=`, s4, `\n  s5=`, s5);
-process.exit(ok ? 0 : 1);

package/scripts/topo-panel-rect-halo-test.mjs

@@ -1,90 +0,0 @@
-/* Round 695 — recent-signal + legend panel rects (panel-pair backdrop)
- * extend filter chain on hoveredPanel branch from elevation-only to
- * 4-LAYER panel-tier composition. Prepends 2-layer radial drop-shadow
- * at pal.legendAccent (3+6 stride, alpha 80/40). Sibling to R693
- * hover-detail card + R694 per-node label card. Closes panel-pair
- * backdrop halo symmetry — both panels now glow on respective hover.
- *
- * Source assertions:
- *   - recent panel hover branch: 2× pal.legendAccent drop-shadow + elevation
- *   - legend panel hover branch: same composition
- *   - both halo-layers data attrs toggle '2' ↔ '0' on hoveredPanel
- *
- * Runtime assertions:
- *   - both panel rects present with data-topo-panel-elevation attrs
- *   - rest halo-layers='0' on both
- */
-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'), mk('a·3')] } });
-});
-await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
-  { id: 'm1', from_alias: 'a·1', to_alias: 'a·2', kind: 'message', content: 'p', network_id: 'default', created_at: fresh },
-] } }));
-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-panel-elevation="legend"]', { timeout: 15000, state: 'attached' });
-await page.waitForTimeout(300);
-
-const runtimeState = await page.evaluate(() => {
-  const recent = document.querySelector('[data-topo-panel-elevation="recent"]');
-  const legend = document.querySelector('[data-topo-panel-elevation="legend"]');
-  return {
-    recent_present: !!recent,
-    legend_present: !!legend,
-    recent_halo:    recent?.getAttribute('data-topo-panel-recent-halo-layers'),
-    legend_halo:    legend?.getAttribute('data-topo-panel-legend-halo-layers'),
-  };
-});
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceRecentLight = /hoveredPanel === 'recent'[\s\S]*?isLight\s*\?\s*`drop-shadow\(0 0 3px \$\{pal\.legendAccent\}80\) drop-shadow\(0 0 6px \$\{pal\.legendAccent\}40\) drop-shadow\(0 4px 12px rgba\(15,23,42,0\.14\)\)`/.test(src);
-const sourceRecentCyber = /hoveredPanel === 'recent'[\s\S]*?:\s*`drop-shadow\(0 0 3px \$\{pal\.legendAccent\}80\) drop-shadow\(0 0 6px \$\{pal\.legendAccent\}40\) drop-shadow\(0 4px 12px rgba\(0,0,0,0\.65\)\)`/.test(src);
-const sourceLegendLight = /hoveredPanel === 'legend'[\s\S]*?isLight\s*\?\s*`drop-shadow\(0 0 3px \$\{pal\.legendAccent\}80\) drop-shadow\(0 0 6px \$\{pal\.legendAccent\}40\) drop-shadow\(0 4px 12px rgba\(15,23,42,0\.14\)\)`/.test(src);
-const sourceLegendCyber = /hoveredPanel === 'legend'[\s\S]*?:\s*`drop-shadow\(0 0 3px \$\{pal\.legendAccent\}80\) drop-shadow\(0 0 6px \$\{pal\.legendAccent\}40\) drop-shadow\(0 4px 12px rgba\(0,0,0,0\.65\)\)`/.test(src);
-const sourceRecentAttr  = /data-topo-panel-recent-halo-layers=\{hoveredPanel === 'recent' \? '2' : '0'\}/.test(src);
-const sourceLegendAttr  = /data-topo-panel-legend-halo-layers=\{hoveredPanel === 'legend' \? '2' : '0'\}/.test(src);
-
-const results = {
-  recent_present:        runtimeState.recent_present,
-  legend_present:        runtimeState.legend_present,
-  rest_recent_layers_0:  runtimeState.recent_halo === '0',
-  rest_legend_layers_0:  runtimeState.legend_halo === '0',
-  source_recent_light:   sourceRecentLight,
-  source_recent_cyber:   sourceRecentCyber,
-  source_legend_light:   sourceLegendLight,
-  source_legend_cyber:   sourceLegendCyber,
-  source_recent_attr:    sourceRecentAttr,
-  source_legend_attr:    sourceLegendAttr,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R695 panel-pair backdrop multi-layer halo (51 anchor — closes panel-pair backdrop symmetry):`,
-  JSON.stringify(results, null, 2),
-  `\n  runtime: ${JSON.stringify(runtimeState)}`);
-process.exit(ok ? 0 : 1);

package/scripts/topo-panel-rect-opacity-hover-test.mjs

@@ -1,109 +0,0 @@
-/* Round 348 verification: panel rect opacity hover-state bump.
- * Recent-signal + legend panels both lift their fill opacity when
- * hoveredPanel === <self>. Cyber: 0.92 → 0.97. Light: 0.97 → 1.0.
- * Joins the panel-hover cue stack:
- *   - R135 drop-shadow boost
- *   - R345 panel title letter-spacing tween 0.3 → 0.4
- *   - R266 fill theme-flip
- *   - R348 rect opacity bump (this round)
- * Pure paint-level change — geometry-safe, bbox unchanged, so
- * topo-overlap-test invariants hold. The R247 transition list already
- * includes `opacity 200ms ease-out` so the value tween is automatic.
- *
- * Contract (cyber theme):
- *   - Rest: both panel rects opacity=0.92.
- *   - Hover recent: recent-panel rect opacity=0.97.
- *   - Hover legend: legend-panel rect opacity=0.97.
- *   - data-topo-panel-elevation selectors locate the rects (existing).
- *   - data-topo-panel-hovered toggles on parent <g> (existing R135).
- *   - Pre-R348 invariants: R331 rx=10 + R247 transition list 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'), mk('gamma') ] } });
-});
-// One message so the recent-signal panel mounts.
-const now = Date.now();
-await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
-  { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping',
-    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
-] } }));
-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-panel-elevation="recent"]', { timeout: 15000 });
-await page.waitForSelector('[data-topo-panel-elevation="legend"]', { timeout: 5000 });
-await page.waitForTimeout(400);
-
-// Rest probe (cyber theme).
-const restProbe = await page.evaluate(() => {
-  const r = document.querySelector('[data-topo-panel-elevation="recent"]');
-  const l = document.querySelector('[data-topo-panel-elevation="legend"]');
-  return {
-    recentOpacity:  r?.getAttribute('opacity') ?? null,
-    legendOpacity:  l?.getAttribute('opacity') ?? null,
-    recentRx:       r?.getAttribute('rx') ?? null,
-    legendRx:       l?.getAttribute('rx') ?? null,
-    recentTrans:    r ? getComputedStyle(r).transition : null,
-    legendTrans:    l ? getComputedStyle(l).transition : null,
-  };
-});
-
-// Hover recent panel.
-await page.hover('[data-topo-panel="recent"]');
-await page.waitForTimeout(300);
-const recentHoverProbe = await page.evaluate(() => {
-  const r = document.querySelector('[data-topo-panel-elevation="recent"]');
-  return { opacity: r?.getAttribute('opacity') ?? null };
-});
-
-// Hover legend panel.
-await page.hover('[data-topo-panel="legend"]');
-await page.waitForTimeout(300);
-const legendHoverProbe = await page.evaluate(() => {
-  const l = document.querySelector('[data-topo-panel-elevation="legend"]');
-  return { opacity: l?.getAttribute('opacity') ?? null };
-});
-
-await browser.close();
-
-const hasTrans = (s, prop) =>
-  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
-
-const results = {
-  rest_recent_0_92:    restProbe.recentOpacity === '0.92',
-  rest_legend_0_92:    restProbe.legendOpacity === '0.92',
-  rest_recent_rx_10:   restProbe.recentRx === '10',
-  rest_legend_rx_10:   restProbe.legendRx === '10',
-  trans_recent_op:     hasTrans(restProbe.recentTrans, 'opacity'),
-  trans_legend_op:     hasTrans(restProbe.legendTrans, 'opacity'),
-  trans_recent_filter: hasTrans(restProbe.recentTrans, 'filter'),
-  trans_legend_filter: hasTrans(restProbe.legendTrans, 'filter'),
-  hover_recent_0_97:   recentHoverProbe.opacity === '0.97',
-  hover_legend_0_97:   legendHoverProbe.opacity === '0.97',
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} panel rect opacity hover bump:`, JSON.stringify(results),
-  '\n  rest:        ', restProbe,
-  '\n  hover recent:', recentHoverProbe,
-  '\n  hover legend:', legendHoverProbe);
-process.exit(ok ? 0 : 1);

package/scripts/topo-panel-row-brightness-test.mjs

@@ -1,116 +0,0 @@
-/* Round 572 verification: panel-row text scopes (recent + legend)
- * stack brightness(1.15) onto R568/R569 drop-shadow filter.
- * 9th + 10th anchors in per-element brightness family.
- *
- * Test phases:
- *   1. mock 1 message + 3 sessions → recent-panel + legend-panel render
- *   2. rest: filters='none', brightness-attrs='1'
- *   3. click pressure-seg working → pinnedStatus='working' →
- *      working legend-row label filter contains drop-shadow AND
- *      brightness(1.15); brightness-attr='1.15'
- *   4. source-side regex confirms stacked filter expressions at both
- *      sites + data-attrs
- */
-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('alpha·1', 'working'),
-    mk('alpha·2', 'idle'),
-    mk('alpha·3', 'offline'),
-  ] } });
-});
-// 1 message so flowLinks > 0 → recent-panel renders
-await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
-  { from_alias: 'alpha·1', to_alias: 'alpha·2', content: 'hi', created_at: fresh },
-] } }));
-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-legend-row-label="working"]', { timeout: 15000 });
-await page.waitForTimeout(500);
-
-const probeLegend = (k) => page.evaluate((key) => {
-  const el = document.querySelector(`[data-legend-row-label="${key}"]`);
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter: cs.filter,
-    brightnessAttr: el.getAttribute('data-legend-row-label-brightness'),
-    glowAttr: el.getAttribute('data-legend-row-label-glow'),
-  };
-}, k);
-
-const probeRecent = () => page.evaluate(() => {
-  const el = document.querySelector('[data-recent-row-text]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter: cs.filter,
-    brightnessAttr: el.getAttribute('data-recent-row-text-brightness'),
-    glowAttr: el.getAttribute('data-recent-row-text-glow'),
-  };
-});
-
-const restLegend = await probeLegend('working');
-const restRecent = await probeRecent();
-
-await page.click('[data-pressure-seg="working"]');
-await page.waitForTimeout(400);
-const pinnedLegend = await probeLegend('working');
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceRecentFilter = /filter: \(isRowHovered \|\| isRowPinned\)\s*\?\s*`drop-shadow\(0 0 2px \$\{pal\.legendAccent\}80\) brightness\(1\.15\)`/.test(src);
-const sourceLegendFilter = /filter: \(hoveredStatus === row\.key \|\| isPinned\)\s*\?\s*`drop-shadow\(0 0 2px \$\{pal\.legendAccent\}80\) brightness\(1\.15\)`/.test(src);
-const sourceRecentAttr = /data-recent-row-text-brightness=\{\(isRowHovered \|\| isRowPinned\) \? '1\.15' : '1'\}/.test(src);
-const sourceLegendAttr = /data-legend-row-label-brightness=\{\(hoveredStatus === row\.key \|\| isPinned\) \? '1\.15' : '1'\}/.test(src);
-
-const results = {
-  rest_legend_filter_none:        restLegend?.filter === 'none',
-  rest_legend_brightness_1:       restLegend?.brightnessAttr === '1',
-  rest_legend_glow_false:         restLegend?.glowAttr === 'false',
-  rest_recent_filter_none:        restRecent?.filter === 'none',
-  rest_recent_brightness_1:       restRecent?.brightnessAttr === '1',
-  rest_recent_glow_false:         restRecent?.glowAttr === 'false',
-  // Pin working → working legend-row label lights up with stacked filter
-  pinned_legend_glow_true:        pinnedLegend?.glowAttr === 'true',
-  pinned_legend_brightness_1_15:  pinnedLegend?.brightnessAttr === '1.15',
-  pinned_legend_has_dropshadow:   /drop-shadow\(/.test(pinnedLegend?.filter || ''),
-  pinned_legend_has_brightness:   /brightness\(1\.15\)/.test(pinnedLegend?.filter || ''),
-  // Source regexes for both anchors
-  source_recent_filter:  sourceRecentFilter,
-  source_legend_filter:  sourceLegendFilter,
-  source_recent_attr:    sourceRecentAttr,
-  source_legend_attr:    sourceLegendAttr,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R572 panel-row text stacked brightness (9th + 10th anchors in per-element family):`,
-  JSON.stringify(results, null, 2),
-  '\n  rest legend (working):', JSON.stringify(restLegend),
-  '\n  rest recent:',           JSON.stringify(restRecent),
-  '\n  pinned legend (working):', JSON.stringify(pinnedLegend));
-process.exit(ok ? 0 : 1);