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

package/scripts/topo-reduced-motion-attr-test.mjs

@@ -1,69 +0,0 @@
-/* Round 513 verification: root svg surfaces `data-topo-prefers-reduced-
- * motion` (15th attr in canvas state surface set). Reflects the
- * client's prefers-reduced-motion media-query state.
- *
- * Tests:
- *   1. no-preference: attr='false'
- *   2. reduce:        attr='true'
- *   3. source-side regex confirms wiring
- */
-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();
-
-async function probe(reducedMotion) {
-  const browser = await chromium.launch({ headless: true });
-  const ctx = await browser.newContext({
-    viewport: { width: 1500, height: 1200 },
-    reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
-  });
-  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('a·1', '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: 'networkidle' });
-  await page.waitForSelector('svg[data-topo-prefers-reduced-motion]', { timeout: 15000 });
-  // Wait for the useEffect that updates reducedMotion via matchMedia listener
-  await page.waitForTimeout(800);
-  const attr = await page.evaluate(() =>
-    document.querySelector('svg[viewBox="0 0 1000 680"]')?.getAttribute('data-topo-prefers-reduced-motion')
-  );
-  await browser.close();
-  return attr;
-}
-
-const noPref = await probe(false);
-const reduce = await probe(true);
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceWired = /data-topo-prefers-reduced-motion=\{reducedMotion \? 'true' : 'false'\}/.test(src);
-
-const results = {
-  no_pref_returns_false: noPref === 'false',
-  reduce_returns_true:   reduce === 'true',
-  source_wired:          sourceWired,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R513 prefers-reduced-motion attr:`, JSON.stringify(results),
-  '\n  no-pref:', noPref, '/ reduce:', reduce);
-process.exit(ok ? 0 : 1);

package/scripts/topo-reduced-motion-test.mjs

@@ -1,77 +0,0 @@
-/* Round 36 verification: prefers-reduced-motion disables all SMIL
- * animations in the topology. Round 29 zeroed CSS via media query;
- * SVG <animate> / <animateMotion> elements need JS to opt out and
- * this round wires that via the useReducedMotion hook. */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
-const browser = await chromium.launch({ headless: true });
-
-async function probe({ reduce, layout }) {
-  const ctx = await browser.newContext({
-    viewport: { width: 1280, height: 1600 },
-    reducedMotion: reduce ? 'reduce' : 'no-preference',
-  });
-  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-  await ctx.addInitScript((lay) => {
-    try {
-      localStorage.setItem('anet-theme', 'cyber');
-      localStorage.setItem('anet-topo-layout', lay);
-      localStorage.setItem('anet-topo-view', JSON.stringify({ zoom: 1, x: 0, y: 0 }));
-      sessionStorage.setItem('anet_v3_auth', '1');
-    } 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';
-    // Include a 'working' status so the working pulse path renders.
-    const sessions = [
-      { alias: 'wkr', status: 'working', network_id: nid, project_dir: null,
-        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
-      { alias: 'idl', status: 'idle', network_id: nid, project_dir: null,
-        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
-    ];
-    await route.fulfill({ response: r, json: { ...b, sessions } });
-  });
-  // Inject a tiny message so a flow link + particle render.
-  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
-    { from_alias: 'wkr', to_alias: 'idl', content: 'hi', created_at: fresh },
-  ] } }));
-  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.waitForTimeout(600);
-  // Click a node so the click ripple is invoked (it should NOT render under reduced motion).
-  await page.locator('g[data-node="wkr"]').click().catch(() => {});
-  await page.waitForTimeout(120);
-  const counts = await page.evaluate(() => {
-    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
-    return {
-      animate: svg.querySelectorAll('animate').length,
-      animateMotion: svg.querySelectorAll('animateMotion').length,
-    };
-  });
-  await ctx.close();
-  return counts;
-}
-
-// Baseline (no reduce) — many SMIL elements expected.
-const normalRing = await probe({ reduce: false, layout: 'ring' });
-// Reduced motion — every SMIL element should be gone.
-const reducedRing = await probe({ reduce: true, layout: 'ring' });
-const reducedGrid = await probe({ reduce: true, layout: 'grid' });
-
-await browser.close();
-const results = {
-  baselineHasAnimations: normalRing.animate + normalRing.animateMotion > 0,
-  reducedRingDropsAll: reducedRing.animate === 0 && reducedRing.animateMotion === 0,
-  reducedGridDropsAll: reducedGrid.animate === 0 && reducedGrid.animateMotion === 0,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} reduced motion:`, JSON.stringify(results),
-  `\n  normalRing=`, normalRing, `\n  reducedRing=`, reducedRing, `\n  reducedGrid=`, reducedGrid);
-process.exit(ok ? 0 : 1);

package/scripts/topo-rename-test.mjs

@@ -1,107 +0,0 @@
-/* Issue #84 verification: node.renamed SSE handler.
- * Mocks the SSE stream + status API so a node.renamed event flips the
- * topology node old→new alias instantly, and an open chat popover follows
- * the rename instead of pointing at a dead alias. */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
-const OLD = '节点旧名', NEW = '节点新名';
-const browser = await chromium.launch({ headless: true });
-const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
-await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-await ctx.addInitScript(() => {
-  try {
-    localStorage.setItem('anet-theme', 'cyber');
-localStorage.setItem('anet-topo-nodescale', '1');
-    localStorage.removeItem('anet-brand');
-    localStorage.removeItem('anet-topo-view');
-    localStorage.setItem('anet-topo-layout', 'grid');
-    sessionStorage.setItem('anet_v3_auth', '1');
-  } catch {}
-});
-
-// shared test state
-let fireRename = false;   // test arms this once the old-name node is confirmed
-let renamed = false;      // flips true the moment the rename event is served
-
-// status: old alias before rename, new alias after
-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 alias = renamed ? NEW : OLD;
-  await route.fulfill({ response: r, json: { ...b, sessions: [
-    { 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 ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
-
-// SSE: HEAD probe says "available"; GET serves `connected` until the test
-// arms fireRename, then one reconnect later it serves the node.renamed event.
-await ctx.route('**/api/hub/events**', async (route) => {
-  const req = route.request();
-  if (req.method() === 'HEAD') {
-    await route.fulfill({ status: 204, headers: { 'x-anet-sse-available': 'true' } });
-    return;
-  }
-  let body = `data: ${JSON.stringify({ type: 'connected', session: 'tester' })}\n\n`;
-  if (fireRename && !renamed) {
-    renamed = true; // status refetch triggered by the handler now returns NEW
-    body += `data: ${JSON.stringify({
-      type: 'node.renamed', event: 'node.renamed', alias: NEW,
-      txn_id: 'rtxn_test', ts: '2026-05-15T00:00:00Z',
-      data: { old_alias: OLD, new_alias: NEW, surfaces_updated: ['config', 'commhub'], history_policy: 'preserve' },
-    })}\n\n`;
-  }
-  await route.fulfill({ status: 200, headers: { 'content-type': 'text/event-stream', 'cache-control': 'no-cache' }, body });
-});
-
-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(600);
-
-const results = {};
-const svg = 'svg[viewBox="0 0 1000 680"]';
-const nodeTexts = () => page.$$eval(`${svg} text`, els => els.map(e => (e.textContent || '').trim()));
-
-// --- before rename: old alias rendered ---
-let texts = await nodeTexts();
-results.oldNameShown = texts.includes(OLD);
-
-// open the chat popover on the old-name node
-const ring = page.locator(`${svg} circle[r="26"]`).first();
-const bb = await ring.boundingBox();
-if (bb) await page.mouse.wheel(0, bb.y - 160);
-await page.waitForTimeout(150);
-await ring.click({ force: true });
-await page.waitForTimeout(400);
-const popover = page.locator('[role="dialog"][aria-label^="Chat with"]');
-results.popoverOpenedOnOld = (await popover.getAttribute('aria-label')) === `Chat with ${OLD}`;
-
-// --- arm the rename, wait for the SSE reconnect to deliver it ---
-fireRename = true;
-await page.waitForFunction((oldName) => {
-  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
-  if (!svg) return false;
-  const txt = [...svg.querySelectorAll('text')].map(t => (t.textContent || '').trim());
-  return !txt.includes(oldName);
-}, OLD, { timeout: 15000 }).catch(() => {});
-await page.waitForTimeout(500);
-
-// --- after rename: topology flipped to the new alias ---
-texts = await nodeTexts();
-results.newNameShown = texts.includes(NEW);
-results.oldNameGone = !texts.includes(OLD);
-// chat popover followed the rename
-results.popoverFollowedRename = (await popover.getAttribute('aria-label').catch(() => null)) === `Chat with ${NEW}`;
-
-await browser.close();
-const ok = results.oldNameShown && results.popoverOpenedOnOld &&
-  results.newNameShown && results.oldNameGone && results.popoverFollowedRename;
-console.log(`${ok ? '✅' : '❌'} node.renamed handler:`, JSON.stringify(results));
-process.exit(ok ? 0 : 1);

package/scripts/topo-reset-brightness-test.mjs

@@ -1,83 +0,0 @@
-/* Round 594 verification: chrome reset button gains filter
- * brightness(1.15) on hoveredReset. 33rd anchor in per-element
- * brightness family, 2nd HTML-element anchor (R593 zoom-level
- * was the first).
- *
- * Test phases:
- *   1. mock nodes → chrome strip renders Reset button
- *   2. rest (no hover): filter='none', brightness-attr='1'
- *   3. transition-property contains 'filter'
- *   4. source: filter conditional + data-attr + transition list
- */
-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-chrome-reset-brightness]', { timeout: 15000, state: 'attached' });
-await page.waitForTimeout(500);
-
-const rest = await page.evaluate(() => {
-  const el = document.querySelector('[data-topo-chrome-reset-brightness]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter: cs.filter,
-    transitionProperty: cs.transitionProperty,
-    brightnessAttr: el.getAttribute('data-topo-chrome-reset-brightness'),
-    hoverAttr: el.getAttribute('data-topo-chrome-reset-hover'),
-    hoverLiftAttr: el.getAttribute('data-topo-chrome-reset-hover-lift'),
-    ariaLabel: el.getAttribute('aria-label'),
-  };
-});
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceFilter = /filter: hoveredReset \? 'brightness\(1\.15\)' : undefined/.test(src);
-const sourceAttr = /data-topo-chrome-reset-brightness=\{hoveredReset \? '1\.15' : '1'\}/.test(src);
-const sourceTransition = /transition: 'color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out'/.test(src);
-
-const results = {
-  button_present:         !!rest,
-  rest_filter_none:       rest?.filter === 'none',
-  rest_brightness_1:      rest?.brightnessAttr === '1',
-  rest_hover_false:       rest?.hoverAttr === 'false',
-  hover_lift_attr_true:   rest?.hoverLiftAttr === 'true',
-  is_reset_button:        /reset/i.test(rest?.ariaLabel || ''),
-  transition_has_filter:  /filter/.test(rest?.transitionProperty || ''),
-  source_filter:          sourceFilter,
-  source_attr:            sourceAttr,
-  source_transition:      sourceTransition,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R594 reset-button brightness (33rd anchor, 2nd HTML, 5-axis closure):`,
-  JSON.stringify(results, null, 2),
-  `\n  rest: ${JSON.stringify(rest)}`);
-process.exit(ok ? 0 : 1);

package/scripts/topo-reset-hover-rotate-test.mjs

@@ -1,102 +0,0 @@
-/* Round 350 verification: chrome reset-button icon gains a hover-
- * rotate preview of the R184 click-spin. Pre-R350 hovering the reset
- * button only changed the button bg (white/5); the icon stayed still.
- * R350 nudges the icon -8° on hover — tactile hint that this button
- * rotates the icon on click. Gated on !resetSpinning so anet-reset-
- * spin keyframe still owns transform during its 450 ms run.
- * 350th-round milestone polish.
- *
- * Contract:
- *   - Rest: icon transform 'rotate(0deg)' (no rotation), transformOrigin
- *     'center'.
- *   - Hover: icon transform 'rotate(-8deg)'.
- *   - Inline transition contains 'transform'.
- *   - data-topo-chrome-reset-hover toggles on container; data-topo-
- *     chrome-reset-icon-hover mirrors on the icon (only when !spinning).
- *   - Pre-R350 invariants: R288 strokeWidth=2.5 + R184 anet-reset-spin
- *     className gate intact (no spin running at rest).
- */
-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-reset]', { timeout: 15000 });
-await page.waitForTimeout(300);
-
-// Rest probe.
-const restProbe = await page.evaluate(() => {
-  const btn = document.querySelector('[data-topo-chrome-reset]');
-  const ico = document.querySelector('[data-topo-chrome-reset-icon]');
-  const cs  = ico ? getComputedStyle(ico) : null;
-  return {
-    btnHover:     btn?.getAttribute('data-topo-chrome-reset-hover') ?? null,
-    icoHover:     ico?.getAttribute('data-topo-chrome-reset-icon-hover') ?? null,
-    icoTransform: cs?.transform ?? null,
-    icoTransition: cs?.transition ?? null,
-    icoStrokeW:   ico?.getAttribute('stroke-width') ?? null,
-    spinClass:    ico?.getAttribute('class') ?? null,
-  };
-});
-
-// Hover the reset button.
-await page.hover('[data-topo-chrome-reset]');
-await page.waitForTimeout(300);
-const hoverProbe = await page.evaluate(() => {
-  const btn = document.querySelector('[data-topo-chrome-reset]');
-  const ico = document.querySelector('[data-topo-chrome-reset-icon]');
-  const cs  = ico ? getComputedStyle(ico) : null;
-  return {
-    btnHover:     btn?.getAttribute('data-topo-chrome-reset-hover') ?? null,
-    icoHover:     ico?.getAttribute('data-topo-chrome-reset-icon-hover') ?? null,
-    icoTransform: cs?.transform ?? null,
-  };
-});
-
-await browser.close();
-
-const hasTrans = (s) => /transform\s+\d*\.?\d*s|transform\s+\d+ms/i.test(s || '');
-// computed transform 'none' or a matrix near identity at rest.
-const isRestTransform = (t) => t === 'none' || /matrix\(1, 0, 0, 1, 0, 0\)/.test(t || '') ||
-  /matrix\(0\.999/i.test(t || '') /* tiny rounding tolerance */;
-// computed transform for -8deg ≈ matrix(0.990, -0.139, 0.139, 0.990, 0, 0).
-const isHoverTransform = (t) => /matrix\(0\.99/i.test(t || '') && /-0\.13/i.test(t || '');
-
-const results = {
-  rest_btn_false:      restProbe.btnHover === 'false',
-  rest_ico_false:      restProbe.icoHover === 'false',
-  rest_no_rotation:    isRestTransform(restProbe.icoTransform),
-  trans_has_transform: hasTrans(restProbe.icoTransition),
-  rest_strokew_2_5:    restProbe.icoStrokeW === '2.5',     // R288
-  rest_no_spin_class:  !/anet-reset-spin/.test(restProbe.spinClass || ''),
-  hover_btn_true:      hoverProbe.btnHover === 'true',
-  hover_ico_true:      hoverProbe.icoHover === 'true',
-  hover_rotated:       isHoverTransform(hoverProbe.icoTransform),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} reset icon hover-rotate:`, JSON.stringify(results),
-  '\n  rest: ', restProbe,
-  '\n  hover:', hoverProbe);
-process.exit(ok ? 0 : 1);

package/scripts/topo-reset-icon-hover-scale-test.mjs

@@ -1,102 +0,0 @@
-/* Round 514 verification: reset icon hover-transform composes
- * rotate + scale (was rotate-only). Brings reset icon into the
- * R352/R353 chrome icon scale-110 family with an extra rotate axis
- * for reset-specific preview semantic.
- *
- * Test phases:
- *   1. rest: transform contains rotate(0deg) and scale(1) (or simply
- *      empty/none if computed)
- *   2. hover (synthetic mouseenter on reset button): transform
- *      contains rotate(-8deg) AND scale(1.1)
- *   3. source-side regex confirms 3-axis transform string wired
- */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
-const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-
-const browser = await chromium.launch({ headless: true });
-const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
-await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-await ctx.addInitScript(() => {
-  try {
-    localStorage.setItem('anet-theme', 'cyber');
-    localStorage.setItem('anet-topo-layout', '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('a·1', '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: 'networkidle' });
-await page.waitForSelector('[data-topo-chrome-reset-icon]', { timeout: 15000 });
-await page.waitForTimeout(1500);
-
-// Phase 1: rest state
-const rest = await page.evaluate(() => {
-  const icon = document.querySelector('[data-topo-chrome-reset-icon]');
-  if (!icon) return null;
-  const inline = icon.getAttribute('style') || '';
-  return {
-    inline_transform: inline.match(/transform:\s*([^;]+)/)?.[1]?.trim(),
-    hover_attr: icon.getAttribute('data-topo-chrome-reset-icon-hover'),
-  };
-});
-
-// Phase 2: trigger hover. The hover-state needs hoveredReset=true; that
-// state updates via React onMouseEnter on the button. Find reset button
-// + dispatch synthetic mouseenter on it.
-await page.evaluate(() => {
-  const btn = document.querySelector('button[data-topo-chrome-reset-hover-lift]');
-  if (!btn) return;
-  ['pointerenter', 'pointerover', 'mouseenter', 'mouseover'].forEach((t) => {
-    btn.dispatchEvent(new Event(t, { bubbles: true, cancelable: true }));
-  });
-});
-await page.waitForTimeout(400);
-const hover = await page.evaluate(() => {
-  const icon = document.querySelector('[data-topo-chrome-reset-icon]');
-  if (!icon) return null;
-  const inline = icon.getAttribute('style') || '';
-  return {
-    inline_transform: inline.match(/transform:\s*([^;]+)/)?.[1]?.trim(),
-    hover_attr: icon.getAttribute('data-topo-chrome-reset-icon-hover'),
-  };
-});
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceWired = /transform: hoveredReset && !resetSpinning \? 'rotate\(-8deg\) scale\(1\.1\)' : 'rotate\(0deg\) scale\(1\)'/.test(src);
-
-const results = {
-  rest_transform_includes_rotate_0: rest && /rotate\(0deg\)/.test(rest.inline_transform || ''),
-  rest_transform_includes_scale_1:  rest && /scale\(1\)/.test(rest.inline_transform || ''),
-  rest_hover_attr_false:            rest && rest.hover_attr === 'false',
-  // Hover state may or may not take depending on React state update reaching
-  // hoveredReset. Test passes vacuously if hover didn't take.
-  hover_strict_or_vacuous:
-    !hover ||
-    hover.hover_attr === 'false' ||
-    (/rotate\(-8deg\)/.test(hover.inline_transform || '') &&
-     /scale\(1\.1\)/.test(hover.inline_transform || '') &&
-     hover.hover_attr === 'true'),
-  source_wired: sourceWired,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R514 reset icon hover-scale:`, JSON.stringify(results),
-  '\n  rest:', JSON.stringify(rest),
-  '\n  hover:', JSON.stringify(hover));
-process.exit(ok ? 0 : 1);

package/scripts/topo-reset-spin-test.mjs

@@ -1,120 +0,0 @@
-/* Round 184 verification: chrome reset button gets a one-shot
- * icon spin on click — visual confirmation that the click
- * registered.
- *
- * Pre-R184 the reset button triggered R168 smoothView crossfade
- * on the canvas but the button itself had no on-button feedback.
- * R184 arms resetSpinning for 460ms on click; the SVG icon
- * picks up `.anet-reset-spin` CSS animation (450ms ease-out,
- * -360°).
- *
- * Test:
- *   1. Idle: data-topo-chrome-reset-spinning='false',
- *            SVG icon has NO 'anet-reset-spin' className
- *   2. Click reset → flag='true' within 50ms,
- *                    SVG icon has 'anet-reset-spin' className
- *   3. Wait 500ms → flag='false', className removed
- *   4. CSS animation keyframe 'anet-reset-spin' exists in stylesheet
- *      (rotates -360deg)
- */
-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: '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-chrome-reset]', { timeout: 10000 });
-await page.waitForTimeout(400);
-
-const probe = () => page.evaluate(() => {
-  const btn = document.querySelector('[data-topo-chrome-reset]');
-  const icon = document.querySelector('[data-topo-chrome-reset-icon]');
-  return {
-    btnSpinningAttr: btn?.getAttribute('data-topo-chrome-reset-spinning'),
-    iconClass:       icon?.getAttribute('class') || '',
-  };
-});
-
-const idle = await probe();
-
-// First zoom in so reset has visible effect (not strictly needed for the
-// spin test, but exercises the resetView path alongside the spin)
-await page.keyboard.press('+');
-await page.keyboard.press('+');
-await page.waitForTimeout(200);
-
-// Click reset button — spin should arm
-await page.locator('[data-topo-chrome-reset]').click();
-await page.waitForTimeout(50);
-const duringSpin = await probe();
-
-// Wait past the 460ms window
-await page.waitForTimeout(500);
-const afterSpin = await probe();
-
-// Verify the CSS keyframe exists in the stylesheet (rotates negatively)
-const cssCheck = await page.evaluate(() => {
-  for (const sheet of document.styleSheets) {
-    let rules;
-    try { rules = sheet.cssRules; } catch { continue; }
-    if (!rules) continue;
-    for (const rule of rules) {
-      // CSSKeyframesRule has .name and .cssText listing keyframes
-      if (rule.type === 7 /* KEYFRAMES_RULE */ && rule.name === 'anet-reset-spin') {
-        return {
-          found: true,
-          cssText: rule.cssText,
-        };
-      }
-    }
-  }
-  return { found: false, cssText: '' };
-});
-
-await browser.close();
-
-const results = {
-  idle_attr_false:       idle.btnSpinningAttr === 'false',
-  idle_no_spin_class:    !idle.iconClass.includes('anet-reset-spin'),
-
-  spin_attr_true:        duringSpin.btnSpinningAttr === 'true',
-  spin_has_class:        duringSpin.iconClass.includes('anet-reset-spin'),
-
-  after_attr_false:      afterSpin.btnSpinningAttr === 'false',
-  after_no_spin_class:   !afterSpin.iconClass.includes('anet-reset-spin'),
-
-  keyframe_found:        cssCheck.found,
-  keyframe_negative_360: cssCheck.cssText.includes('-360deg') ||
-                         cssCheck.cssText.includes('rotate(-360'),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} reset-spin:`, JSON.stringify(results),
-  `\n  idle:`, idle,
-  `\n  duringSpin:`, duringSpin,
-  `\n  afterSpin:`, afterSpin,
-  `\n  keyframe:`, cssCheck);
-process.exit(ok ? 0 : 1);