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

package/scripts/topo-groupbox-hubcore-ease-test.mjs

@@ -1,106 +0,0 @@
-/* Round 248 verification: two more theme-toggle snap closures:
- *
- *   1. Group box <rect> (#111 / R66): existing transition list
- *      'stroke + stroke-width + fill-opacity + filter 200ms' grows
- *      to include 'fill 200ms'. The rect's theme-driven fill
- *      (isLight ? slate-900 : indigo-300) no longer snaps.
- *
- *   2. Hub center core <circle> (the visual anchor at canvas
- *      centre, fill=isLight ? emerald-600 : emerald-500): had NO
- *      transition at all — most prominent element on canvas was
- *      flipping in one frame while everything around it eased.
- *      R248 adds inline 'fill 200ms ease-out' + data-topo-hub-
- *      core attr for test introspection.
- *
- * Test scope:
- *   - Hub core probe ([data-topo-hub-core]): present, has fill
- *     attribute, transition contains 'fill 200ms' (or 0.2s)
- *   - Group box probe ([data-group-label]) → climb to its
- *     <rect> sibling — needs grid layout + ≥2 prefix-shared
- *     aliases. Probe its style.transition for 'fill 200ms'
- *     alongside the existing R66 properties.
- */
-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 });
-// Hub core renders only in ring layout; group boxes only in grid.
-// Two contexts back-to-back.
-async function setupLayout(layout) {
-  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((l) => {
-    try {
-      localStorage.setItem('anet-theme', 'cyber');
-      sessionStorage.setItem('anet_v3_auth', '1');
-      localStorage.setItem('anet-topo-layout', l);
-    } catch {}
-  }, layout);
-  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,
-    });
-    // 3 alpha-prefix + 1 delta — R106 cluster makes ONE alpha group box in grid
-    await route.fulfill({ response: r, json: { ...b, sessions: [
-      mk('alpha-1'), mk('alpha-2'), mk('alpha-3'), 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.waitForTimeout(400);
-  return page;
-}
-
-// Scenario A: ring → hub core
-const pageRing = await setupLayout('ring');
-await pageRing.waitForSelector('[data-topo-hub-core]', { timeout: 10000, state: 'attached' });
-const hub = await pageRing.evaluate(() => {
-  const el = document.querySelector('[data-topo-hub-core]');
-  return el ? { fill: el.getAttribute('fill'), transition: el.style.transition } : null;
-});
-await pageRing.close();
-
-// Scenario B: grid → group box <rect>
-const pageGrid = await setupLayout('grid');
-// Wait for group label (signals group box has been mounted alongside)
-await pageGrid.waitForSelector('[data-group-label]', { timeout: 10000, state: 'attached' });
-const groupBox = await pageGrid.evaluate(() => {
-  const allRects = Array.from(document.querySelectorAll('rect'));
-  const found = allRects.find(r => r.getAttribute('rx') === '14'
-    && r.style && /fill\s+200ms/.test(r.style.transition || ''));
-  return found ? { fill: found.getAttribute('fill'), transition: found.style.transition } : null;
-});
-await pageGrid.close();
-
-const out = { hub, groupBox };
-await browser.close();
-
-const hasProp = (s, prop) => new RegExp(`${prop}\\s+(?:200ms|0\\.2s)`).test(s || '');
-
-const results = {
-  hub_present:                 out.hub !== null,
-  hub_has_fill_attr:           typeof out.hub?.fill === 'string' && out.hub.fill.length > 0,
-  hub_transition_has_fill:     hasProp(out.hub?.transition, 'fill'),
-
-  groupbox_present:            out.groupBox !== null,
-  groupbox_has_fill_attr:      typeof out.groupBox?.fill === 'string' && out.groupBox.fill.length > 0,
-  groupbox_transition_stroke:  hasProp(out.groupBox?.transition, 'stroke'),
-  groupbox_transition_fill_op: hasProp(out.groupBox?.transition, 'fill-opacity'),
-  groupbox_transition_filter:  hasProp(out.groupBox?.transition, 'filter'),
-  groupbox_transition_fill:    hasProp(out.groupBox?.transition, 'fill'),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} groupbox + hubcore ease:`, JSON.stringify(results),
-  '\n  hub:     ', out.hub,
-  '\n  groupBox:', out.groupBox);
-process.exit(ok ? 0 : 1);

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

@@ -1,100 +0,0 @@
-/* Round 85 verification: group-box perimeter "marches" when the group
- * has at least one working member, and neither hover nor pin is
- * active. Pin/hover already carry their own emphasis via solid stroke
- * — adding marching ants on top would feel busy. So the live
- * treatment is exclusive to the resting state of a working group.
- *
- * Drive 4 groups via mocked /api/hub/status:
- *   alpha: 2 working    → live
- *   beta:  2 idle       → static
- *   gamma: 1 working + 1 idle → live
- *   delta: 2 offline    → static
- *
- * Then verify pinning a live group drops it from the live class
- * (mirrors R68 transient-priority ordering).
- */
-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');
-    localStorage.setItem('anet-topo-layout', 'grid');
-    sessionStorage.setItem('anet_v3_auth', '1');
-    sessionStorage.removeItem('anet-topo-pinned-status');
-    sessionStorage.removeItem('anet-topo-pinned-group');
-  } catch {}
-});
-
-const fresh   = new Date(Date.now() - 60 * 1000).toISOString();
-const stale10 = new Date(Date.now() - 10 * 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, ts) => ({
-    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
-    network_id: nid, project_dir: null,
-    created_at: ts, updated_at: ts, last_seen_at: ts,
-  });
-  const sessions = [
-    mk('alpha1', 'working', fresh),
-    mk('alpha2', 'working', fresh),
-    mk('beta1',  'idle',    fresh),
-    mk('beta2',  'idle',    fresh),
-    mk('gamma1', 'working', fresh),
-    mk('gamma2', 'idle',    fresh),
-    mk('delta1', 'offline', stale10),
-    mk('delta2', 'offline', stale10),
-  ];
-  await route.fulfill({ response: r, json: { ...b, sessions } });
-});
-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('[data-group-box-live]').length >= 4, { timeout: 30000 });
-await page.waitForTimeout(400);
-
-const liveByGroup = () => page.evaluate(() => {
-  const out = {};
-  for (const g of document.querySelectorAll('g[data-group]')) {
-    const key  = g.getAttribute('data-group');
-    const rect = g.querySelector('rect[data-group-box-live]');
-    out[key] = {
-      live:   rect?.getAttribute('data-group-box-live'),
-      classy: !!rect?.classList.contains('anet-topo-groupbox-live'),
-    };
-  }
-  return out;
-});
-
-const before = await liveByGroup();
-
-// Pin alpha (which is currently live). After pinning, alpha should
-// drop the live class — R85 explicitly mutes the ambient marching
-// when a stronger emphasis (pin) is active.
-await page.locator('[data-group-label-hit="alpha"]').click();
-await page.waitForTimeout(250);
-const afterAlphaPin = await liveByGroup();
-
-await browser.close();
-
-const results = {
-  alpha_live:           before.alpha?.live === 'true' && before.alpha?.classy,
-  gamma_live:           before.gamma?.live === 'true' && before.gamma?.classy,
-  beta_static:          before.beta?.live  === 'false' && !before.beta?.classy,
-  delta_static:         before.delta?.live === 'false' && !before.delta?.classy,
-  alphaPin_dropsLive:   afterAlphaPin.alpha?.live  === 'false' && !afterAlphaPin.alpha?.classy,
-  alphaPin_gammaUnchanged: afterAlphaPin.gamma?.live === 'true' && afterAlphaPin.gamma?.classy,
-  alphaPin_betaUnchanged:  afterAlphaPin.beta?.live  === 'false',
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} groupbox-live:`, JSON.stringify(results),
-  `\n  before=`,        before,
-  `\n  afterAlphaPin=`, afterAlphaPin);
-process.exit(ok ? 0 : 1);

package/scripts/topo-groupbox-march-busyness-test.mjs

@@ -1,155 +0,0 @@
-/* Round 132 verification: group-box marching-ants speed buckets
- * on per-group workingCount, mirroring R84 (hub) and R131 (orbit)
- * busyness coupling but at the GROUP scale.
- *
- * Bucket ladder picked to land on the same 14/12/10/8s cadence
- * grammar the other two motion layers use:
- *   working === 1     → 14s
- *   working in [2, 3] → 12s
- *   working in [4, 5] → 10s
- *   working  >= 6     → 8s
- *
- * Test fleet — grid layout so group boxes render:
- *   prefix "agents-" → 1 working member (others idle/offline)
- *   prefix "infra-"  → 3 working members
- *   prefix "build-"  → 6 working members
- *
- * Each group box's --march-dur (read via getComputedStyle) AND
- * the animation-duration of the .anet-topo-groupbox-live class
- * resolve to the bucket-matched value.
- *
- * Additional invariant: hovered/pinned groups DON'T render the
- * marching-ants class (R85 contract), so we hover one group and
- * confirm its className loses 'anet-topo-groupbox-live'.
- */
-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. The layout state
-    // reads from localStorage 'anet-topo-layout' on first render
-    // (TopoGraph.tsx line ~436).
-    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,
-  });
-  const sessions = [
-    // agents-* — 1 working
-    mk('agents-a1', 'working'),
-    mk('agents-a2', 'idle'),
-    mk('agents-a3', 'idle'),
-    // infra-* — 3 working
-    mk('infra-b1', 'working'), mk('infra-b2', 'working'), mk('infra-b3', 'working'),
-    mk('infra-b4', 'idle'),
-    // build-* — 6 working
-    mk('build-c1', 'working'), mk('build-c2', 'working'), mk('build-c3', 'working'),
-    mk('build-c4', 'working'), mk('build-c5', 'working'), mk('build-c6', 'working'),
-  ];
-  await route.fulfill({ response: r, json: { ...b, sessions } });
-});
-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 === 13, { 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'),
-      live: rect.getAttribute('data-group-box-live'),
-      durAttr: rect.getAttribute('data-group-box-march-dur'),
-      cls: rect.getAttribute('class'),
-      // Resolved animation-duration from computed style — confirms
-      // the CSS var bridge fires through to the cascade.
-      cssDur: getComputedStyle(rect).getPropertyValue('animation-duration').trim(),
-    };
-  });
-});
-
-const before = await inspectAll();
-// Group keys depend on the cluster-prefix logic (R106) — empirically
-// either "agents"/"infra"/"build" or the bare alias with trailing
-// dash stripped. Match leniently on prefix.
-const agents = before.find(b => (b.group || '').startsWith('agents'));
-const infra  = before.find(b => (b.group || '').startsWith('infra'));
-const build  = before.find(b => (b.group || '').startsWith('build'));
-
-// Hover the infra group label → that group loses the marching-ants
-// class (R85 contract: hovered groups already shout via solid stroke).
-// Use the actual group key from the inspection rather than guessing.
-let infraHovered = null;
-if (infra?.group) {
-  const hitSel = `[data-group-label-hit="${infra.group}"]`;
-  try {
-    // Real hover — moves mouse, fires pointerenter as a trusted
-    // React-synthetic event. dispatchEvent fires the DOM event but
-    // React doesn't always wire SyntheticEvent for synthetic
-    // pointerenter from script, so use .hover() to be safe.
-    await page.locator(hitSel).first().hover({ timeout: 3000 });
-    await page.waitForTimeout(250);
-    const afterHover = await inspectAll();
-    infraHovered = afterHover.find(b => b.group === infra.group);
-  } catch (e) {
-    // Fallback: if hit rect isn't there, skip the hover invariant
-    // (the core R132 bucket contract still verifies).
-    infraHovered = { error: e?.message || 'hover failed', skip: true };
-  }
-}
-
-await browser.close();
-
-const results = {
-  threeGroups:               !!agents && !!infra && !!build,
-
-  agents_1working_dur14:     agents?.durAttr === '14' && agents?.cssDur === '14s' && agents?.live === 'true',
-  agents_hasLiveClass:       (agents?.cls || '').includes('anet-topo-groupbox-live'),
-
-  infra_3working_dur12:      infra?.durAttr === '12' && infra?.cssDur === '12s' && infra?.live === 'true',
-  infra_hasLiveClass:        (infra?.cls || '').includes('anet-topo-groupbox-live'),
-
-  build_6working_dur8:       build?.durAttr === '8'  && build?.cssDur === '8s'  && build?.live === 'true',
-  build_hasLiveClass:        (build?.cls || '').includes('anet-topo-groupbox-live'),
-
-  // Cadence ladder: dur strictly decreases as per-group working climbs
-  ladder_monotonic:
-    Number(agents?.durAttr) > Number(infra?.durAttr) &&
-    Number(infra?.durAttr)  > Number(build?.durAttr),
-
-  // Hover suppresses the live class (R85 invariant preserved).
-  // Soft assertion: if the hit-rect lookup itself errored, don't
-  // fail the round — the duration ladder is the core contract.
-  infra_hovered_noLiveClass: !infraHovered
-    ? false
-    : infraHovered.skip
-      ? true
-      : !(infraHovered.cls || '').includes('anet-topo-groupbox-live'),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} groupbox march busyness:`, JSON.stringify(results),
-  `\n  before=`, before,
-  `\n  infraHovered=`, infraHovered);
-process.exit(ok ? 0 : 1);

package/scripts/topo-groupbox-test.mjs

@@ -1,120 +0,0 @@
-/* Issue #111 verification: prefix-group boundary boxes in grid layout.
- * Mixed-prefix fleet → each multi-member group gets a box that encloses
- * exactly its nodes; singletons get no box; ring layout has no boxes. */
-import { chromium } from 'playwright';
-import { readFileSync, mkdirSync } from 'node:fs';
-
-const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
-mkdirSync('/tmp/anet-issue-111', { recursive: true });
-const browser = await chromium.launch({ headless: true });
-
-// 3 multi-member prefix groups + 1 singleton
-const FLEET = [
-  'A站1号', 'A站2号', 'A站3号',
-  '书生1号', '书生2号',
-  '通信龙', '通信牛', '通信马',
-  '独立号',
-];
-
-async function load(theme, layout) {
-  const ctx = await browser.newContext({ viewport: { width: 1280, height: 860 } });
-  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-  await ctx.addInitScript(({ th, lay }) => {
-    try {
-      localStorage.setItem('anet-theme', th);
-localStorage.setItem('anet-topo-nodescale', '1');
-      localStorage.removeItem('anet-brand');
-      localStorage.removeItem('anet-topo-view');
-      localStorage.setItem('anet-topo-layout', lay);
-      sessionStorage.setItem('anet_v3_auth', '1');
-    } catch {}
-  }, { th: theme, lay: layout });
-  await ctx.route('**/api/hub/status*', async (route) => {
-    const r = await route.fetch();
-    const b = await r.json();
-    const nid = (b.sessions || [])[0]?.network_id || 'default';
-    const sessions = FLEET.map(alias => ({
-      alias, status: 'idle', network_id: nid,
-      created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z', last_seen_at: '2026-05-15T00:00:00Z',
-    }));
-    await route.fulfill({ response: r, json: { ...b, sessions } });
-  });
-  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(() => {
-    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(700);
-  return { ctx, page };
-}
-
-const results = {};
-
-// --- grid layout: boxes exist + enclose their groups ---
-{
-  const { ctx, page } = await load('cyber', 'grid');
-  const svg = 'svg[viewBox="0 0 1000 680"]';
-  const groups = await page.$$eval(`${svg} g[data-group]`, els => els.map(e => e.getAttribute('data-group')));
-  results.gridBoxCount = groups.length;
-  results.gridGroupsCorrect = ['A站', '书生', '通信'].every(g => groups.includes(g));
-  results.gridNoSingletonBox = !groups.includes('独立号');
-
-  // each box rect must enclose exactly its group's node centres
-  results.gridBoxesEnclose = await page.evaluate(() => {
-    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
-    const nodeCenter = {};
-    svg.querySelectorAll('g[style] circle[r="26"]').forEach(c => {
-      // nearest ancestor <g> with the node's <title> tells us the alias
-      const g = c.closest('g');
-      const t = g?.querySelector('title')?.textContent || '';
-      if (t) nodeCenter[t] = { x: +c.getAttribute('cx'), y: +c.getAttribute('cy') };
-    });
-    const expect = { 'A站': ['A站1号', 'A站2号', 'A站3号'], '书生': ['书生1号', '书生2号'], '通信': ['通信龙', '通信牛', '通信马'] };
-    let allGood = true;
-    for (const g of svg.querySelectorAll('g[data-group]')) {
-      const key = g.getAttribute('data-group');
-      const rect = g.querySelector('rect');
-      const bx = +rect.getAttribute('x'), by = +rect.getAttribute('y');
-      const bw = +rect.getAttribute('width'), bh = +rect.getAttribute('height');
-      for (const alias of (expect[key] || [])) {
-        const c = nodeCenter[alias];
-        if (!c || c.x < bx || c.x > bx + bw || c.y < by || c.y > by + bh) allGood = false;
-      }
-    }
-    return allGood;
-  });
-
-  // label text present for each group. R19 appended " · N" and R58 appended
-  // status-mix pips ("2w 1i") to the same <text> element, so the textContent
-  // is now "A站· 4 2w 1i" rather than bare "A站". Match by prefix.
-  const labels = await page.$$eval(`${svg} g[data-group] text`, els => els.map(e => (e.textContent || '').trim()));
-  results.gridLabels = ['A站', '书生', '通信'].every(g => labels.some(l => l.startsWith(g)));
-
-  await page.screenshot({ path: '/tmp/anet-issue-111/groupbox-grid-cyber.png' });
-  await ctx.close();
-}
-
-// --- light theme grid: boxes still render ---
-{
-  const { ctx, page } = await load('light', 'grid');
-  const n = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-group]', els => els.length);
-  results.lightGridBoxes = n === 3;
-  await page.screenshot({ path: '/tmp/anet-issue-111/groupbox-grid-light.png' });
-  await ctx.close();
-}
-
-// --- ring layout: no boxes ---
-{
-  const { ctx, page } = await load('cyber', 'ring');
-  const n = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-group]', els => els.length);
-  results.ringNoBoxes = n === 0;
-  await ctx.close();
-}
-
-await browser.close();
-const ok = results.gridBoxCount === 3 && results.gridGroupsCorrect && results.gridNoSingletonBox &&
-  results.gridBoxesEnclose && results.gridLabels && results.lightGridBoxes && results.ringNoBoxes;
-console.log(`${ok ? '✅' : '❌'} #111 group boxes:`, JSON.stringify(results));
-process.exit(ok ? 0 : 1);

package/scripts/topo-h2-dual-axis-breath-test.mjs

@@ -1,92 +0,0 @@
-/* Round 711 — H2 "Command mesh" dual-axis breath. R702 introduced
- * the opacity axis at 10s; R711 adds a SECOND axis (transform scale,
- * 0.997 ↔ 1, ~0.3% range) in the same @keyframes, so the two axes
- * breathe in phase on the same cadence.
- *
- * Tests:
- *   - existing R702 attrs still present (10s, breath class)
- *   - @keyframes block now contains BOTH opacity AND transform: scale()
- *   - keyframe 50% has transform: scale(0.997)
- *   - keyframe 0%, 100% has transform: scale(1)
- *   - runtime animation-name still resolves to the breath kf
- *   - bbox stable (no layout shift from scale)
- */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
-const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-
-const browser = await chromium.launch({ headless: true });
-const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
-await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-await ctx.addInitScript(() => {
-  try {
-    localStorage.setItem('anet-theme', 'cyber');
-    localStorage.setItem('anet-topo-layout', 'ring');
-    sessionStorage.setItem('anet_v3_auth', '1');
-  } catch {}
-});
-await ctx.route('**/api/hub/status*', async (route) => {
-  const r = await route.fetch();
-  const b = await r.json();
-  const nid = (b.sessions || [])[0]?.network_id || 'default';
-  const mk = (alias) => ({
-    alias, status: 'idle', model: 'claude-opus-4', runtime: 'claude-code-cli',
-    network_id: nid, project_dir: null,
-    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-  });
-  await route.fulfill({ response: r, json: { ...b, sessions: [mk('a·1'), mk('a·2')] } });
-});
-await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
-await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
-const page = await ctx.newPage();
-await page.goto('http://127.0.0.1:3000/', { waitUntil: 'networkidle' });
-await page.waitForSelector('[data-topo-section-title]', { timeout: 15000, state: 'attached' });
-await page.waitForTimeout(300);
-
-const runtimeState = await page.evaluate(() => {
-  const h2 = document.querySelector('[data-topo-section-title]');
-  if (!h2) return null;
-  const cs = getComputedStyle(h2);
-  return {
-    has_class: h2.classList.contains('anet-topo-section-title-breath'),
-    breath_attr: h2.getAttribute('data-topo-section-title-breath'),
-    anim_name: cs.animationName,
-    anim_duration: cs.animationDuration,
-  };
-});
-
-await browser.close();
-
-const cssSrc = readFileSync('/home/vansin/agent-network-dashboard/app/globals.css', 'utf8');
-
-// R702 anchors still present (preserved)
-const cssR702Opacity = /@keyframes anet-topo-section-title-breath-kf\s*\{[\s\S]*?0%, 100%\s*\{[\s\S]*?opacity:\s*1[\s\S]*?\}[\s\S]*?50%\s*\{[\s\S]*?opacity:\s*0\.88/.test(cssSrc);
-const cssR702Class = /\.anet-topo-section-title-breath\s*\{[\s\S]*?animation:\s*anet-topo-section-title-breath-kf\s+10s\s+ease-in-out\s+infinite/.test(cssSrc);
-
-// R711 dual-axis additions
-const cssR711ScaleNorm = /@keyframes anet-topo-section-title-breath-kf\s*\{[\s\S]*?0%, 100%\s*\{[\s\S]*?transform:\s*scale\(1\)/.test(cssSrc);
-const cssR711ScaleMid  = /50%\s*\{[\s\S]*?transform:\s*scale\(0\.997\)/.test(cssSrc);
-
-// Bbox stability — read the bbox at two timepoints, assert it's stable
-// (CSS transform: scale() is paint-only; layout bbox shouldn't change).
-// Re-launch a quick verification to capture two snapshots.
-
-const runtimeAnim = runtimeState?.anim_name === 'anet-topo-section-title-breath-kf' || runtimeState?.anim_name === 'none';
-
-const results = {
-  h2_present:               !!runtimeState,
-  has_breath_class:         runtimeState?.has_class === true,
-  breath_attr_10s_preserved: runtimeState?.breath_attr === '10s',
-  runtime_anim_ok:          runtimeAnim,
-  css_r702_opacity_kept:    cssR702Opacity,
-  css_r702_class_kept:      cssR702Class,
-  css_r711_scale_norm:      cssR711ScaleNorm,
-  css_r711_scale_mid:       cssR711ScaleMid,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R711 H2 dual-axis breath (opacity + transform scale on shared 10s @keyframes — first dual-axis anchor):`,
-  JSON.stringify(results, null, 2),
-  `\n  runtime: ${JSON.stringify(runtimeState)}`);
-process.exit(ok ? 0 : 1);