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

package/scripts/topo-kicker-tracking-test.mjs

@@ -1,101 +0,0 @@
-/* Round 285 verification: section kicker letter-spacing widens
- * tracking-wider (0.05em) → tracking-widest (0.1em).
- *
- * Tailwind v4 utility class compiles to:
- *   tracking-wider  → letter-spacing: 0.05em
- *   tracking-widest → letter-spacing: 0.1em
- *
- * At text-xs (12px) the 0.05em→0.1em jump adds ~0.6px between
- * letters, which on an uppercase 'NETWORK TOPOLOGY' label
- * telegraphs "eyebrow label" cleanly vs body-text density.
- *
- * Contract:
- *   - [data-topo-section-kicker] computed letter-spacing ~ 0.1em
- *     (12 * 0.1 = 1.2px ± rounding).
- *   - Pre-R285 was 0.05em → ~0.6px.
- *   - Element still text-transform: uppercase, font-size: 12px.
- *   - data-topo-section-title sibling unchanged (regression).
- *   - R283 monogram stroke + R282 watermark intact (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, model) => ({
-    alias, status: 'working', model, 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', 'claude-opus-4'),
-    mk('beta',  'gpt-4o'),
-  ] } });
-});
-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-section-kicker]', { timeout: 15000 });
-await page.waitForSelector('[data-topo-brand-watermark]', { timeout: 10000 });
-await page.waitForTimeout(300);
-
-const probe = await page.evaluate(() => {
-  const kicker = document.querySelector('[data-topo-section-kicker]');
-  const title  = document.querySelector('[data-topo-section-title]');
-  const kCs = kicker ? getComputedStyle(kicker) : null;
-  const tCs = title  ? getComputedStyle(title)  : null;
-  // Probe alpha avatar circle stroke for R283 regression.
-  const alphaNode = document.querySelector('g[data-node="alpha"]');
-  const alphaCircles = alphaNode ? [...alphaNode.querySelectorAll('circle')] : [];
-  const alphaAvatarCircle = alphaCircles
-    .map(c => ({ r: +c.getAttribute('r') || 0, sw: c.getAttribute('stroke-width'), isBadge: c.hasAttribute('data-runtime-badge') }))
-    .filter(c => c.r > 0 && c.r < 18 && !c.isBadge)
-    .sort((a, b) => b.r - a.r)[0];
-  const watermark = document.querySelector('[data-topo-brand-watermark]');
-  return {
-    kickerLetterSpacing: kCs?.letterSpacing ?? null,
-    kickerFontSize:      kCs?.fontSize ?? null,
-    kickerTextTransform: kCs?.textTransform ?? null,
-    kickerText:          kicker?.textContent ?? null,
-    titleText:           title?.textContent ?? null,
-    titleLeading:        tCs?.lineHeight ?? null,
-    alphaAvatarStroke:   alphaAvatarCircle?.sw ?? null,
-    watermarkPresent:    watermark !== null,
-  };
-});
-await browser.close();
-
-// 12px * 0.1em = 1.2px (post-R285). Pre-R285 0.05em = 0.6px.
-// Allow tolerance window 1.0–1.4 to be safe across rounding.
-const ls = parseFloat(probe.kickerLetterSpacing) || 0;
-const fs = parseFloat(probe.kickerFontSize) || 12;
-const lsPerEm = fs ? ls / fs : 0;
-
-const results = {
-  kicker_present:           probe.kickerText === 'Network Topology',
-  kicker_uppercase:         probe.kickerTextTransform === 'uppercase',
-  kicker_widest_ls:         ls >= 1.0 && ls <= 1.5,  // 0.1em at 12px ≈ 1.2px
-  kicker_ls_per_em_widest:  lsPerEm >= 0.08 && lsPerEm <= 0.12,
-  title_still_present:      probe.titleText === 'Command mesh',
-  r283_monogram_stroke_kept: probe.alphaAvatarStroke === '1.5',
-  r282_watermark_present:    probe.watermarkPresent,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} kicker tracking:`, JSON.stringify(results),
-  '\n  kicker text:', JSON.stringify(probe.kickerText),
-  '\n  letter-spacing:', probe.kickerLetterSpacing, `(=${lsPerEm.toFixed(3)}em)`,
-  '\n  font-size:', probe.kickerFontSize,
-  '\n  title text:', JSON.stringify(probe.titleText));
-process.exit(ok ? 0 : 1);

package/scripts/topo-kicker-triple-axis-breath-test.mjs

@@ -1,124 +0,0 @@
-/* Round 721 — kicker promoted from dual-axis to TRIPLE-axis breath.
- * R699 opacity (6 s) + R714 transform-scale (6 s) joined by R721
- * text-shadow (6 s) — all 3 axes share the 6 s cadence in phase.
- * First triple-axis surface in the family.
- *
- * Glow specification: at mid-breath (50%) the kicker emits
- * text-shadow: 0 0 6px rgba(34, 211, 238, 0.30). Reads as an "inhale
- * glow" — a subtle cyan aura appears as the text dims and shrinks.
- *
- * Assertions:
- *   - CSS keyframes 0%/100% has text-shadow: none
- *   - CSS keyframes 50% has text-shadow: 0 0 6px rgba(34, 211, 238, 0.30)
- *   - existing opacity (1 ↔ 0.78) + transform-scale (1 ↔ 0.995) axes
- *     preserved in same @keyframes block (R699 + R714 still composing)
- *   - .anet-topo-kicker-breath rule still binds 6 s cadence
- *   - prefers-reduced-motion guard still present
- *   - runtime kicker has the breath class + 6s data attr (preserved)
- *   - R716 catalog kicker entry axes = ["opacity", "transform-scale", "text-shadow"]
- *   - kicker is the ONLY entry with 3 axes (first triple-axis surface)
- *   - text-shadow appears nowhere else in the catalog (kicker exclusive)
- */
-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('.anet-topo-kicker-breath', { timeout: 15000, state: 'attached' });
-await page.waitForTimeout(300);
-
-const runtimeState = await page.evaluate(() => {
-  const kicker = document.querySelector('.anet-topo-kicker-breath');
-  if (!kicker) return null;
-  const cs = getComputedStyle(kicker);
-  const svg = document.querySelector('[data-topo-canvas-aria]');
-  return {
-    has_class:     kicker.classList.contains('anet-topo-kicker-breath'),
-    breath_attr:   kicker.getAttribute('data-topo-section-kicker-breath'),
-    anim_name:     cs.animationName,
-    anim_duration: cs.animationDuration,
-    catalog:       svg?.getAttribute('data-topo-respiratory-dual-axis-surfaces') ?? null,
-  };
-});
-
-await browser.close();
-
-const cssSrc = readFileSync('/home/vansin/agent-network-dashboard/app/globals.css', 'utf8');
-// 0%/100% keyframe must include text-shadow: none + opacity:1 + transform: scale(1)
-const cssKf0_Triple = /@keyframes anet-topo-kicker-breath-kf\s*\{[\s\S]*?0%,\s*100%\s*\{[\s\S]*?opacity:\s*1[\s\S]*?transform:\s*scale\(1\)[\s\S]*?text-shadow:\s*none[\s\S]*?\}/.test(cssSrc);
-// 50% keyframe must include text-shadow: 0 0 6px rgba(34, 211, 238, 0.30) + dim opacity + retract scale
-const cssKf50_Triple = /@keyframes anet-topo-kicker-breath-kf\s*\{[\s\S]*?50%\s*\{[\s\S]*?opacity:\s*0\.78[\s\S]*?transform:\s*scale\(0\.995\)[\s\S]*?text-shadow:\s*0\s+0\s+6px\s+rgba\(34,\s*211,\s*238,\s*0\.30\)/.test(cssSrc);
-const cssClassBound6s = /\.anet-topo-kicker-breath\s*\{[\s\S]*?animation:\s*anet-topo-kicker-breath-kf\s+6s\s+ease-in-out\s+infinite/.test(cssSrc);
-const cssReducedMotion = /@media\s*\(prefers-reduced-motion:\s*reduce\)\s*\{[\s\S]*?\.anet-topo-kicker-breath\s*\{\s*animation:\s*none/.test(cssSrc);
-
-const runtimeAnim = runtimeState?.anim_name === 'anet-topo-kicker-breath-kf' || runtimeState?.anim_name === 'none';
-
-let catalog = null;
-try { catalog = JSON.parse(runtimeState?.catalog ?? ''); } catch {}
-const kickerEntry = Array.isArray(catalog) ? catalog.find(e => e.anchor === 'kicker') : null;
-const kickerTripleAxes = !!kickerEntry
-  && Array.isArray(kickerEntry.axes)
-  && kickerEntry.axes.length === 3
-  && JSON.stringify(kickerEntry.axes) === JSON.stringify(['opacity', 'transform-scale', 'text-shadow']);
-
-/* R722 added watermark as the 2nd triple-axis surface, so the
- * "exclusive to kicker" invariants from R721's first-mover round
- * no longer hold. R723 widens these to "kicker is a member of the
- * triple-axis set" — the property R721 actually established (kicker
- * IS triple-axis with text-shadow), without the exclusivity claim
- * that R722 retired. */
-const tripleAxisSurfaces = Array.isArray(catalog)
-  ? catalog.filter(e => Array.isArray(e.axes) && e.axes.length === 3)
-  : [];
-const kickerIsTripleAxisMember = tripleAxisSurfaces.some(e => e.anchor === 'kicker');
-
-const textShadowSurfaces = Array.isArray(catalog)
-  ? catalog.filter(e => Array.isArray(e.axes) && e.axes.includes('text-shadow'))
-  : [];
-const kickerHasTextShadow = textShadowSurfaces.some(e => e.anchor === 'kicker');
-
-const results = {
-  kicker_present:                   !!runtimeState,
-  has_breath_class:                 runtimeState?.has_class === true,
-  breath_cadence_attr_6s:           runtimeState?.breath_attr === '6s',
-  runtime_anim_kicker_kf:           runtimeAnim,
-  css_0_100_triple_axis:            cssKf0_Triple,
-  css_50_triple_axis_with_glow:     cssKf50_Triple,
-  css_class_binds_6s:               cssClassBound6s,
-  css_reduced_motion_guard:         cssReducedMotion,
-  catalog_kicker_three_axes:        kickerTripleAxes,
-  kicker_is_triple_axis_member:     kickerIsTripleAxisMember,
-  kicker_has_text_shadow_axis:      kickerHasTextShadow,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R721 kicker triple-axis breath (first 3-axis surface: opacity + transform-scale + text-shadow @ 6s):`,
-  JSON.stringify(results, null, 2),
-  `\n  kicker entry: ${JSON.stringify(kickerEntry)}`,
-  `\n  runtime: ${JSON.stringify({ anim_name: runtimeState?.anim_name, anim_duration: runtimeState?.anim_duration })}`);
-process.exit(ok ? 0 : 1);

package/scripts/topo-kicker-weight-test.mjs

@@ -1,98 +0,0 @@
-/* Round 300 (milestone) verification: kicker font-weight bumps from
- * default (400/normal) → font-medium (500). Uppercase eyebrow at
- * text-xs with R285 tracking-widest reads slightly under-authored
- * at 400; 500 lifts the label to the conventional SaaS-eyebrow
- * weight (Stripe / Vercel / Linear).
- *
- * Hierarchy preserved: h2 (600 font-semibold) > kicker (500 font-
- * medium) > body weight families.
- *
- * Contract:
- *   - [data-topo-section-kicker] computed font-weight === 500.
- *   - R296 kicker color (~gray-500) preserved.
- *   - R285 tracking-widest (~1.2px @ 12px) preserved.
- *   - R299 title-block mb=16px + R298 left flex gap=10px preserved.
- *   - R297 brand-logo transition + R294 pulse absent 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, model) => ({
-    alias, status: 'working', model, 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', 'claude-opus-4'),
-    mk('beta',  'gpt-4o'),
-  ] } });
-});
-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-section-kicker]', { timeout: 15000 });
-await page.waitForTimeout(300);
-
-const probe = await page.evaluate(() => {
-  const kicker = document.querySelector('[data-topo-section-kicker]');
-  const title  = document.querySelector('[data-topo-section-title]');
-  const logo   = document.querySelector('[data-topo-brand-logo]');
-  const kCs = kicker ? getComputedStyle(kicker) : null;
-  const tCs = title  ? getComputedStyle(title)  : null;
-  const flexParent = logo?.parentElement;
-  const flexCs = flexParent ? getComputedStyle(flexParent) : null;
-  const titleBlockContainer = flexParent?.parentElement;
-  const tbCs = titleBlockContainer ? getComputedStyle(titleBlockContainer) : null;
-  const swatch = document.querySelector('[data-legend-swatch="working"]');
-  return {
-    kickerFontWeight: kCs?.fontWeight ?? null,
-    kickerColor:      kCs?.color ?? null,
-    kickerLetterSpacing: kCs?.letterSpacing ?? null,
-    titleFontWeight:  tCs?.fontWeight ?? null,
-    titleBlockMarginBottom: tbCs?.marginBottom ?? null,
-    leftFlexGap:      flexCs?.columnGap ?? null,
-    brandLogoTransition: logo ? getComputedStyle(logo).transition : null,
-    swatchR:          swatch?.getAttribute('r') ?? null,
-    pulseCount:       document.querySelectorAll('[data-pulse-wrapper]').length,
-  };
-});
-await browser.close();
-
-const kFw = parseInt(probe.kickerFontWeight) || 0;
-const tFw = parseInt(probe.titleFontWeight) || 0;
-const ls = parseFloat(probe.kickerLetterSpacing) || 0;
-const mb = parseFloat(probe.titleBlockMarginBottom) || 0;
-const gap = parseFloat(probe.leftFlexGap) || 0;
-
-const results = {
-  kicker_weight_500:        kFw === 500,
-  title_weight_higher:      tFw > kFw,
-  r285_tracking_widest:     ls >= 1.0 && ls <= 1.5,
-  r296_kicker_color_not_gray600: !/rgba?\(\s*75\s*,\s*85\s*,\s*99/.test(probe.kickerColor || ''),
-  r299_mb_16:               mb >= 15.5 && mb <= 16.5,
-  r298_gap_10:              gap >= 9.5 && gap <= 10.5,
-  r297_transition_kept:     /color/.test(probe.brandLogoTransition || ''),
-  r295_swatch_r_6:          probe.swatchR === '6',
-  r294_pulse_absent:        probe.pulseCount === 0,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} kicker weight (R300 milestone):`, JSON.stringify(results),
-  '\n  kicker font-weight:', probe.kickerFontWeight,
-  '\n  title  font-weight:', probe.titleFontWeight,
-  '\n  letter-spacing:', probe.kickerLetterSpacing,
-  '\n  title-block mb (R299):', probe.titleBlockMarginBottom);
-process.exit(ok ? 0 : 1);

package/scripts/topo-label-card-brightness-test.mjs

@@ -1,81 +0,0 @@
-/* Round 613 — per-node label card stacks brightness(1.15)
- * onto R142's hover drop-shadow. 4th paint axis on the card's
- * hover signature. Same banked R582/R583 stacked-filter pattern.
- *
- * Test phases:
- *   1. mock 2 idle nodes → label cards render
- *   2. rest: filter contains rest drop-shadow but NO brightness,
- *      brightness-attr='1'
- *   3. computed transition-property contains 'filter'
- *   4. source: stacked filter conditional + 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', '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-node-label-card-brightness]', { timeout: 15000, state: 'attached' });
-await page.waitForTimeout(500);
-
-const rest = await page.evaluate(() => {
-  const el = document.querySelector('[data-node-label-card-brightness]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter: cs.filter,
-    transitionProperty: cs.transitionProperty,
-    brightnessAttr: el.getAttribute('data-node-label-card-brightness'),
-    elevationAttr: el.getAttribute('data-node-label-card-elevation'),
-  };
-});
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceCyberStack = /'drop-shadow\(0 4px 12px rgba\(0,0,0,0\.60\)\) brightness\(1\.15\)'/.test(src);
-const sourceLightStack = /'drop-shadow\(0 3px 8px rgba\(15,23,42,0\.20\)\) brightness\(1\.15\)'/.test(src);
-const sourceAttr = /data-node-label-card-brightness=\{!reducedMotion && hoveredAlias === session\.alias \? '1\.15' : '1'\}/.test(src);
-
-const results = {
-  card_present:           !!rest,
-  // At rest: rest-tier drop-shadow but no brightness
-  rest_has_drop_shadow:   /drop-shadow/.test(rest?.filter || ''),
-  rest_no_brightness:     !/brightness/.test(rest?.filter || ''),
-  rest_brightness_1:      rest?.brightnessAttr === '1',
-  rest_elevation_idle:    rest?.elevationAttr === 'idle',
-  transition_has_filter:  /filter/.test(rest?.transitionProperty || ''),
-  source_cyber_stack:     sourceCyberStack,
-  source_light_stack:     sourceLightStack,
-  source_attr:            sourceAttr,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R613 label card stacked brightness (4-axis hover paint signature):`,
-  JSON.stringify(results, null, 2),
-  `\n  rest: ${JSON.stringify(rest)}`);
-process.exit(ok ? 0 : 1);

package/scripts/topo-label-card-opacity-hover-test.mjs

@@ -1,99 +0,0 @@
-/* Round 429 verification: node label-card body opacity 0.94 → 1.0 on
- * hover (cyber theme). Sibling to R348 panel rect opacity lift at
- * panel scope. Adds a solidity axis to node hover signature alongside
- * R217 stroke tint + R142 drop-shadow + R26 lift + R427/R428 ls.
- *
- * Contract:
- *   - rest (cyber): every label-card reports opacity '0.94'
- *   - rest elevation attr 'idle' on all cards
- *   - hover one node: that card opacity '1' + elevation 'hover'
- *   - siblings stay at 0.94 / 'idle'
- *   - source-file probe confirms conditional + R246 transition intact
- */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
-const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-
-const browser = await chromium.launch({ headless: true });
-const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
-await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-await ctx.addInitScript(() => {
-  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
-});
-await ctx.route('**/api/hub/status*', async (route) => {
-  const r = await route.fetch();
-  const b = await r.json();
-  const nid = (b.sessions || [])[0]?.network_id || 'default';
-  const mk = (alias, status) => ({
-    alias, status, model: 'claude-opus-4', runtime: 'claude-code-cli',
-    network_id: nid, project_dir: null,
-    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-  });
-  await route.fulfill({ response: r, json: { ...b, sessions: [
-    mk('alpha', 'working'),
-    mk('beta',  'idle'),
-    mk('gamma', 'working'),
-  ] } });
-});
-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-node-label-card]', { timeout: 15000 });
-await page.waitForTimeout(400);
-
-const readAll = () => page.evaluate(() => {
-  const rects = [...document.querySelectorAll('[data-node-label-card]')];
-  return rects.map(t => ({
-    alias:      t.getAttribute('data-node-label-card'),
-    opacity:    t.getAttribute('opacity'),
-    elevation:  t.getAttribute('data-node-label-card-elevation'),
-  }));
-});
-
-const rest = await readAll();
-const firstAlias = rest[0]?.alias;
-let hover = null;
-if (firstAlias) {
-  const box = await page.evaluate((alias) => {
-    const t = document.querySelector(`[data-node-label-card="${alias}"]`);
-    if (!t) return null;
-    const node = t.closest('[data-node]');
-    const target = node || t;
-    const b = target.getBoundingClientRect();
-    return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
-  }, firstAlias);
-  if (box) {
-    await page.mouse.move(box.x, box.y);
-    await page.waitForTimeout(300);
-    hover = await readAll();
-    await page.mouse.move(0, 0);
-  }
-}
-
-const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceWired = /opacity=\{\s*\n?\s*!reducedMotion && hoveredAlias === session\.alias\s*\n?\s*\?\s*1\s*\n?\s*:\s*\(isLight \? 1 : 0\.94\)\s*\n?\s*\}/.test(fileText);
-const sourceTransition = /transition: 'filter 220ms ease-out, stroke 220ms ease-out, fill 220ms ease-out, opacity 220ms ease-out'/.test(fileText);
-
-await browser.close();
-
-const hoveredEntry = hover?.find(r => r.alias === firstAlias);
-const othersRest = hover ? hover.filter(r => r.alias !== firstAlias).every(r => r.opacity === '0.94' && r.elevation === 'idle') : false;
-
-const results = {
-  rest_card_count_gte_3:       rest.length >= 3,
-  rest_all_opacity_0_94:       rest.every(r => r.opacity === '0.94'),
-  rest_all_elevation_idle:     rest.every(r => r.elevation === 'idle'),
-  hover_target_opacity_1:      hoveredEntry?.opacity === '1',
-  hover_target_elevation:      hoveredEntry?.elevation === 'hover',
-  hover_others_stay_idle:      othersRest,
-  source_conditional_wired:    sourceWired,
-  source_transition_intact:    sourceTransition,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} label card opacity hover:`, JSON.stringify(results),
-  '\n  hover target:', JSON.stringify(hoveredEntry));
-process.exit(ok ? 0 : 1);

package/scripts/topo-label-card-theme-ease-test.mjs

@@ -1,85 +0,0 @@
-/* Round 246 verification: node label card chrome rect picks up
- * fill + opacity transitions to coordinate with the existing
- * filter (R142) + stroke (R217) easing on the same element.
- *
- * Pre-R246 the rect transition list was 'filter 220ms ease-out,
- * stroke 220ms ease-out'. fill (pal.labelBox.fill: cyber dark ↔
- * light white) and opacity (cyber 0.94, light 1) snapped on theme
- * toggle. Surrounding elements already ease theme:
- *   R211 alias/sub text fill (same card)
- *   R242 chat-target ring filter + stroke
- *   R244 hub + halo opacity
- *   R245 edge stroke
- *
- * R246 closes the label-card chrome — adds fill + opacity to the
- * existing transition list so the whole card (background + text)
- * eases as one unit through theme switches and any future
- * fill/opacity state changes.
- *
- * Test scope per visible label card:
- *   - element present at [data-node-label-card]
- *   - style.transition contains filter, stroke, fill, AND opacity
- *     each at 220ms (or 0.22s browser-normalised)
- */
-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: '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*', (r2) => r2.fulfill({ json: { messages: [] } }));
-await ctx.route('**/api/hub/tasks*', (r2) => r2.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-node-label-card]', { timeout: 10000, state: 'attached' });
-await page.waitForTimeout(300);
-
-const probe = await page.evaluate(() => {
-  const cards = Array.from(document.querySelectorAll('[data-node-label-card]'));
-  return cards.map((r) => ({
-    alias:      r.getAttribute('data-node-label-card'),
-    elevation:  r.getAttribute('data-node-label-card-elevation'),
-    transition: r.style.transition,
-  }));
-});
-await browser.close();
-
-const hasProp = (s, prop) => new RegExp(`${prop}\\s+(?:220ms|0\\.22s)`).test(s || '');
-
-const results = {
-  four_cards:                probe.length === 4,
-  all_have_alias:            probe.every(p => typeof p.alias === 'string'),
-  all_idle_elevation:        probe.every(p => p.elevation === 'idle'),
-  all_have_filter_220:       probe.every(p => hasProp(p.transition, 'filter')),
-  all_have_stroke_220:       probe.every(p => hasProp(p.transition, 'stroke')),
-  all_have_fill_220:         probe.every(p => hasProp(p.transition, 'fill')),
-  all_have_opacity_220:      probe.every(p => hasProp(p.transition, 'opacity')),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} label card theme ease:`, JSON.stringify(results),
-  '\n  cards:', probe.map(p => ({ a: p.alias, e: p.elevation, t: (p.transition || '').slice(0, 100) })));
-process.exit(ok ? 0 : 1);