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

package/scripts/topo-recent-panel-more-crossfade-test.mjs

@@ -1,124 +0,0 @@
-/* Round 221 verification: recent-signal panel "+N more" footer
- * always-mounts; visibility crossfades via wrapper <g> opacity
- * instead of React conditional mount/unmount on flowLinks > 3.
- *
- * Pre-R221 a fleet's 4th flow appearing snap-popped the footer
- * into the canvas; tapering back to 3 flows snap-removed it.
- * Same threshold-crossing snap R215 closed for edge midpoint
- * badges, now applied to the recent-panel footer surface.
- *
- * Test scenarios:
- *   A. 2 flows (below threshold)  → footer in DOM, visible='false',
- *                                    opacity=0, pointerEvents='none',
- *                                    aria-hidden='true', role unset,
- *                                    tabIndex=-1
- *   B. 5 flows (visible threshold) → footer visible='true',
- *                                    opacity>0, role='link', tabIndex=0
- *   Both: inline transition includes 'opacity 300ms'.
- *   moreCount text content clamps at 0 / 2 respectively.
- */
-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 setup(n) {
-  const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
-  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-  await ctx.addInitScript(() => {
-    try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
-  });
-  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-  await ctx.route('**/api/hub/status*', async (route) => {
-    const r = await route.fetch();
-    const b = await r.json();
-    const nid = (b.sessions || [])[0]?.network_id || 'default';
-    const mk = (alias) => ({
-      alias, status: 'working', model: 'claude-opus-4', runtime: 'claude-code-cli',
-      network_id: nid, project_dir: null,
-      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-    });
-    await route.fulfill({ response: r, json: { ...b, sessions: [
-      mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
-    ] } });
-  });
-  const now = Date.now();
-  // Need N distinct flow pairs → mock N messages with distinct alias pairs
-  const pairs = [
-    ['alpha', 'beta'], ['beta', 'gamma'], ['gamma', 'delta'],
-    ['delta', 'alpha'], ['alpha', 'gamma'], ['beta', 'delta'],
-  ];
-  const msgs = pairs.slice(0, n).map((p, i) => ({
-    id: `m${i}`, from_alias: p[0], to_alias: p[1], content: 'hi',
-    network_id: 'default', created_at: new Date(now - (1000 + i * 500)).toISOString(),
-  }));
-  await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: msgs } }));
-  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-recent-panel-more-nav]', { timeout: 10000, state: 'attached' });
-  await page.waitForTimeout(400);
-  return page;
-}
-
-const probe = async (page) => page.evaluate(() => {
-  const el = document.querySelector('[data-recent-panel-more-nav]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  const txt = el.querySelector('[data-recent-panel-more]');
-  return {
-    visible:        el.getAttribute('data-recent-panel-more-visible'),
-    role:           el.getAttribute('role'),
-    tabIndex:       el.getAttribute('tabindex'),
-    ariaHidden:     el.getAttribute('aria-hidden'),
-    opacity:        parseFloat(cs.opacity),
-    computedPointer:cs.pointerEvents,
-    transition:     el.style.transition,
-    moreText:       txt?.textContent,
-    moreCount:      txt?.getAttribute('data-recent-panel-more'),
-  };
-});
-
-// Scenario A: 2 flows (below threshold)
-const pageA = await setup(2);
-const probeA = await probe(pageA);
-await pageA.close();
-
-// Scenario B: 5 flows (above threshold)
-const pageB = await setup(5);
-const probeB = await probe(pageB);
-await pageB.close();
-await browser.close();
-
-const results = {
-  // Scenario A (2 flows, hidden)
-  A_present_in_dom:        !!probeA,
-  A_visible_false:         probeA?.visible === 'false',
-  A_opacity_0:             probeA?.opacity === 0,
-  A_pointer_none:          probeA?.computedPointer === 'none',
-  A_aria_hidden:           probeA?.ariaHidden === 'true',
-  A_role_unset:            probeA?.role === null || probeA?.role === '',
-  A_tabindex_neg:          probeA?.tabIndex === '-1',
-  A_more_count_0:          probeA?.moreCount === '0',  // clamped at 0
-
-  // Scenario B (5 flows, visible)
-  B_present_in_dom:        !!probeB,
-  B_visible_true:          probeB?.visible === 'true',
-  B_opacity_positive:      (probeB?.opacity ?? 0) > 0,
-  B_pointer_all:           probeB?.computedPointer === 'all',
-  B_role_link:             probeB?.role === 'link',
-  B_tabindex_0:            probeB?.tabIndex === '0',
-  B_more_count_2:          probeB?.moreCount === '2',
-  B_text_says_2:           /^\+\s*2\s*more flow/.test(probeB?.moreText || ''),
-
-  // Both scenarios have opacity 300ms transition
-  A_has_transition:        /opacity\s+(?:300ms|0\.3s)/.test(probeA?.transition || ''),
-  B_has_transition:        /opacity\s+(?:300ms|0\.3s)/.test(probeB?.transition || ''),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} recent-panel more crossfade:`, JSON.stringify(results),
-  `\n  probeA (2 flows hidden):`, probeA,
-  `\n  probeB (5 flows visible):`, probeB);
-process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-more-cyan-hover-test.mjs

@@ -1,151 +0,0 @@
-/* Round 195 verification: the recent-panel "+N more flows" footer
- * (R128/R133) adopts the cyan vocabulary on hover, joining
- * R178/R163/R179/R193 — "interactive-on-hover speaks cyan".
- *
- * Pre-R195 hover brightened opacity 0.55→0.85 + added underline but
- * kept fill = legendText (gray). R195 fills with legendAccent (cyan-
- * 400 dark / teal-600 light) on hover with a fill 200ms transition.
- *
- * Test (cyber/dark theme):
- *   1. Need > 3 flowLinks → mock 5 distinct alias pairs each with
- *      one message so flowLinks.length === 5.
- *   2. Footer renders, data-recent-panel-more='2' (5 - 3 visible),
- *      data-recent-panel-more-hovered='false' at idle.
- *   3. Idle fill is gray-ish (OKLab/Lab a,b ≈ 0); opacity ≈ 0.55.
- *   4. transition style includes 'fill 200ms' AND 'opacity 150ms'.
- *   5. Hover the footer <g> wrapper, wait past transition.
- *   6. data-recent-panel-more-hovered flips to 'true'.
- *   7. Fill leans cyan (OKLab/Lab a < 0 OR b < 0); opacity ≈ 0.85.
- *   8. Move away, fill returns to gray, opacity back to ~0.55.
- */
-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'), mk('delta'),
-  ] } });
-});
-
-// 5 distinct alias pairs → flowLinks.length === 5 → footer "+2 more flows"
-const now = Date.now();
-const msgs = [
-  { id: '1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi', network_id: 'default', created_at: new Date(now - 1000).toISOString() },
-  { id: '2', from_alias: 'beta',  to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 2000).toISOString() },
-  { id: '3', from_alias: 'gamma', to_alias: 'delta', content: 'hi', network_id: 'default', created_at: new Date(now - 3000).toISOString() },
-  { id: '4', from_alias: 'delta', to_alias: 'alpha', content: 'hi', network_id: 'default', created_at: new Date(now - 4000).toISOString() },
-  { id: '5', from_alias: 'alpha', to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 5000).toISOString() },
-];
-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-more]', { timeout: 10000 });
-await page.waitForTimeout(400);
-
-const probe = async () => page.evaluate(() => {
-  const el = document.querySelector('[data-recent-panel-more]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    moreCount:  el.getAttribute('data-recent-panel-more'),
-    hovered:    el.getAttribute('data-recent-panel-more-hovered'),
-    fill:       cs.fill,
-    opacity:    parseFloat(cs.opacity),
-    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
-    textDeco:   cs.textDecorationLine || el.getAttribute('text-decoration'),
-  };
-});
-
-const idle = await probe();
-
-await page.hover('[data-recent-panel-more-nav]');
-await page.waitForTimeout(250);
-const hovered = await probe();
-
-await page.mouse.move(0, 0);
-await page.waitForTimeout(400);  // past 200ms fill + 150ms opacity transitions with margin
-const settled = await probe();
-
-await browser.close();
-
-// slate-400 (legendText) = rgb(148,163,184) — B-R only 36, so a B>R+30
-// threshold misclassifies muted slate as "cyan". cyan-400 (legendAccent)
-// = rgb(34,211,238) and our snapshot here = rgb(107,226,243): B-R ≈ 136.
-// Use a tighter threshold (>=80) and a saturation gate (chroma) so the
-// gray-blue slate doesn't read as cyan but saturated cyan does.
-function parseColor(s) {
-  if (!s) return null;
-  let m;
-  m = s.match(/rgba?\(\s*(\d+)\s*,?\s*(\d+)\s*,?\s*(\d+)/);
-  if (m) {
-    const r = +m[1], g = +m[2], b = +m[3];
-    const chroma = Math.max(r, g, b) - Math.min(r, g, b);
-    return {
-      kind: 'rgb', r, g, b, chroma,
-      cyanish: b - r >= 80 && chroma > 80,    // saturated blue/cyan
-      neutralish: Math.abs(b - r) < 50 && chroma < 70,
-    };
-  }
-  m = s.match(/(?:oklab|lab)\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)/);
-  if (m) {
-    const L = +m[1], a = +m[2], b = +m[3];
-    const scale = Math.max(Math.abs(a), Math.abs(b)) > 5 ? 'lab' : 'oklab';
-    const thr  = scale === 'lab' ? 15 : 0.08;
-    const ntrl = scale === 'lab' ? 8  : 0.04;
-    return {
-      kind: scale, L, a, b,
-      cyanish: (a < -thr || b < -thr),
-      neutralish: Math.abs(a) < ntrl && Math.abs(b) < ntrl,
-    };
-  }
-  return null;
-}
-const idleColor    = parseColor(idle?.fill);
-const hoverColor   = parseColor(hovered?.fill);
-const settledColor = parseColor(settled?.fill);
-
-const results = {
-  footer_present:           !!idle,
-  more_count_2:             idle?.moreCount === '2',
-  idle_not_hovered:         idle?.hovered === 'false',
-  idle_fill_neutral:        idleColor?.neutralish === true,
-  idle_opacity_low:         idle?.opacity > 0.45 && idle?.opacity < 0.65,
-  transition_has_fill:      (idle?.transition || '').includes('fill') && (idle?.transition || '').includes('0.2s'),
-  transition_has_opacity:   (idle?.transition || '').includes('opacity') && (idle?.transition || '').includes('0.15s'),
-
-  hover_attr_true:          hovered?.hovered === 'true',
-  hover_fill_cyan:          hoverColor?.cyanish === true,
-  hover_opacity_high:       hovered?.opacity > 0.75 && hovered?.opacity < 0.95,
-  hover_fill_changed:       idle?.fill !== hovered?.fill,
-
-  settled_attr_false:       settled?.hovered === 'false',
-  settled_fill_neutral:     settledColor?.neutralish === true,
-  settled_opacity_low:      settled?.opacity > 0.45 && settled?.opacity < 0.65,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} recent-panel-more cyan hover:`, JSON.stringify(results),
-  `\n  idle:`,    idle,    `\n   idleColor:`,    idleColor,
-  `\n  hovered:`, hovered, `\n   hoverColor:`,   hoverColor,
-  `\n  settled:`, settled, `\n   settledColor:`, settledColor);
-process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-more-nav-test.mjs

@@ -1,127 +0,0 @@
-/* Round 133 verification: R128's "+N more flows" footer becomes a
- * clickable nav to /messages. R128 introduced the truncation hint
- * as pure metadata; R133 lets the user act on it.
- *
- * Three states tested:
- *   A. Click footer → navigation lands on /messages
- *   B. Hover footer → opacity rises 0.55 → 0.85, underline appears
- *   C. Leave hover → opacity drops back, underline gone
- *
- * Plus: footer carries role="link" + cursor:pointer + a tooltip
- * referencing /messages, all for discoverability and a11y.
- */
-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();
-const aliases = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'];
-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: aliases.map(mk) } });
-});
-
-const now = Date.now();
-const msgs = [];
-// 5 distinct pairs → forces R128 footer with "+ 2 more flows"
-for (let i = 0; i < 5; i++) {
-  msgs.push({
-    id: `m${i}`,
-    from_alias: aliases[i],
-    to_alias:   aliases[(i + 1) % aliases.length],
-    content: 'hi',
-    network_id: 'default',
-    created_at: new Date(now - (20000 + i * 1000)).toISOString(),
-  });
-}
-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 === 6, { timeout: 30000 });
-await page.waitForSelector('[data-recent-panel-more-nav]', { timeout: 10000 });
-await page.waitForTimeout(400);
-
-const beforeHover = await page.evaluate(() => {
-  const wrap = document.querySelector('[data-recent-panel-more-nav]');
-  const text = wrap?.querySelector('text[data-recent-panel-more]');
-  return {
-    role:        wrap?.getAttribute('role'),
-    tabindex:    wrap?.getAttribute('tabindex'),
-    cursor:      (wrap?.getAttribute('style') || '').includes('pointer'),
-    title:       wrap?.querySelector('title')?.textContent,
-    opacity:     text?.getAttribute('opacity'),
-    underline:   text?.getAttribute('text-decoration'),
-    moreCount:   text?.getAttribute('data-recent-panel-more'),
-  };
-});
-
-// Hover the footer
-await page.locator('[data-recent-panel-more-nav]').hover();
-await page.waitForTimeout(250);
-const onHover = await page.evaluate(() => {
-  const text = document.querySelector('[data-recent-panel-more-nav] text');
-  return {
-    opacity:   text?.getAttribute('opacity'),
-    underline: text?.getAttribute('text-decoration'),
-  };
-});
-
-// Move away → restore
-await page.mouse.move(10, 10);
-await page.waitForTimeout(250);
-const afterLeave = await page.evaluate(() => {
-  const text = document.querySelector('[data-recent-panel-more-nav] text');
-  return {
-    opacity:   text?.getAttribute('opacity'),
-    underline: text?.getAttribute('text-decoration'),
-  };
-});
-
-// Click → expect /messages navigation
-await page.locator('[data-recent-panel-more-nav]').click();
-await page.waitForURL('**/messages', { timeout: 10000 });
-const finalUrl = page.url();
-
-await browser.close();
-
-const results = {
-  before_roleLink:       beforeHover.role === 'link',
-  before_tabIndex0:      beforeHover.tabindex === '0',
-  before_cursorPointer:  beforeHover.cursor,
-  before_titleMentionsMessages: (beforeHover.title || '').includes('/messages'),
-  before_moreCount2:     beforeHover.moreCount === '2',
-  before_opacity55:      beforeHover.opacity === '0.55',
-  before_noUnderline:    beforeHover.underline === 'none' || !beforeHover.underline,
-
-  hover_opacity85:       onHover.opacity === '0.85',
-  hover_underline:       onHover.underline === 'underline',
-
-  leave_opacityRestored: afterLeave.opacity === '0.55',
-  leave_underlineGone:   afterLeave.underline === 'none' || !afterLeave.underline,
-
-  click_navigatedToMessages: /\/messages$/.test(finalUrl),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} recent-panel more nav:`, JSON.stringify(results),
-  `\n  before=`, beforeHover,
-  `\n  onHover=`, onHover,
-  `\n  afterLeave=`, afterLeave,
-  `\n  finalUrl=`, finalUrl);
-process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-more-test.mjs

@@ -1,106 +0,0 @@
-/* Round 128 verification: "+N more flows" overflow hint in the
- * recent-signal panel.
- *
- * The panel renders top 3 flowLinks via .slice(0, 3). When the
- * fleet has > 3 active flows, the rest silently disappear — the
- * R96 "X flows" header reports the total but doesn't make
- * truncation explicit. R128 adds a muted italic footer
- *   "+ N more flow(s)"
- * inside the existing panel (y=82, between row-3 baseline and the
- * panel bottom at y=84), only when flowLinks.length > 3.
- *
- * Three states tested:
- *   - 5 distinct flow pairs       → footer shows "+ 2 more flows"
- *   - exactly 3 flow pairs        → footer absent
- *   - 0 flows (empty panel)       → footer absent (R45 placeholder wins)
- *
- * Note: the test seeds (count) messages per pair so each unique
- * (from→to) pair becomes ONE flowLink (deduped). Pairs > 3 force
- * the hint; pairs ≤ 3 don't.
- */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
-
-async function probe(pairCount) {
-  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();
-  const aliases = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'];
-  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: aliases.map(mk) } });
-  });
-
-  const now = Date.now();
-  const msgs = [];
-  // Make pairCount distinct (from→to) pairs, 1 msg each, ascending age
-  for (let i = 0; i < pairCount; i++) {
-    msgs.push({
-      id: `m${i}`,
-      from_alias: aliases[i],
-      to_alias:   aliases[(i + 1) % aliases.length],
-      content: 'hi',
-      network_id: 'default',
-      created_at: new Date(now - (20000 + i * 1000)).toISOString(),
-    });
-  }
-  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 === 6, { timeout: 30000 });
-  await page.waitForTimeout(500);
-
-  const out = await page.evaluate(() => {
-    const el = document.querySelector('[data-recent-panel-more]');
-    const rows = document.querySelectorAll('[data-recent-row]').length;
-    const headerCount = document.querySelector('[data-recent-panel-count]')?.textContent;
-    return {
-      footerPresent: !!el,
-      footerText:    el?.textContent?.trim(),
-      footerAttr:    el?.getAttribute('data-recent-panel-more'),
-      rows,
-      headerCount,
-    };
-  });
-
-  await browser.close();
-  return out;
-}
-
-const five  = await probe(5);
-const three = await probe(3);
-const zero  = await probe(0);
-
-const results = {
-  five_footerPresent:  five.footerPresent,
-  five_footerText:     five.footerText === '+ 2 more flows',
-  five_footerAttr:     five.footerAttr === '2',
-  five_rowsCapped3:    five.rows === 3,
-  five_headerSaysFive: five.headerCount?.startsWith('5'),
-
-  three_footerAbsent:  !three.footerPresent,
-  three_rowsExactly3:  three.rows === 3,
-
-  zero_footerAbsent:   !zero.footerPresent,
-  zero_rowsZero:       zero.rows === 0,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} recent-panel more:`, JSON.stringify(results),
-  `\n  five=`, five, `\n  three=`, three, `\n  zero=`, zero);
-process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-readability-bump-test.mjs

@@ -1,151 +0,0 @@
-/* Round 259 verification: recent-signal panel's two italic instructional
- * texts bump fontSize 8 → 9 for readability.
- *
- * Pre-R259 size hierarchy in the recent-signal panel:
- *   "no flow yet"    main empty-state  fontSize 10 italic    (action prompt)
- *   row content      "alpha→beta · 3"  fontSize  9 regular   (data)
- *   hint             "send a message…" fontSize  8 italic    (instruction)
- *   "+N more flows"  footer link       fontSize  8 italic    (nav affordance)
- *   row timestamp    "5s"              fontSize  8 regular   (recency tag)
- *
- * Pre-R259 the hint + footer rendered at the smallest readable size on
- * canvas, italic + low opacity layering legibility cost on top of the
- * small type. Both are READ-TO-ACT text (instructional / clickable).
- *
- * Post-R259:
- *   hint        fontSize 8 → 9
- *   footer link fontSize 8 → 9
- *
- * The per-row timestamp STAYS at 8 — it's an at-a-glance recency tag
- * tightly co-located with row text, not read-to-act instruction. Hint +
- * footer at 9pt italic still subordinate to row content (9pt regular)
- * via italic + lower opacity discrimination.
- *
- * Test scope:
- *   1. Empty state hint fontSize === 9 (was 8). Tested in empty scenario.
- *   2. "+N more flows" footer fontSize === 9. Tested in 5-msg scenario.
- *   3. Per-row timestamp UNCHANGED at fontSize === 8 (sibling regression).
- *   4. R256 footer-breath invariant preserved — hover footer client
- *      bottom inside panel client bottom (footer with fontSize 9 still
- *      tucks inside the panel).
- */
-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 probeEmpty() {
-  const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
-  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-  await ctx.addInitScript(() => {
-    try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
-  });
-  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-  await ctx.route('**/api/hub/status*', async (route) => {
-    const r = await route.fetch();
-    const b = await r.json();
-    const nid = (b.sessions || [])[0]?.network_id || 'default';
-    const mk = (alias) => ({
-      alias, status: 'working', model: 'claude-opus-4', runtime: 'claude-code-cli',
-      network_id: nid, project_dir: null,
-      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-    });
-    await route.fulfill({ response: r, json: { ...b, sessions: [mk('alpha'), mk('beta')] } });
-  });
-  await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
-  await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
-  const page = await ctx.newPage();
-  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-  await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 2, { timeout: 30000 });
-  await page.waitForSelector('[data-recent-signal-empty-hint]', { timeout: 10000 });
-  await page.waitForTimeout(300);
-  const result = await page.evaluate(() => {
-    const hint = document.querySelector('[data-recent-signal-empty-hint]');
-    return { hintFontSize: hint?.getAttribute('font-size') };
-  });
-  await ctx.close();
-  return result;
-}
-
-async function probePopulated() {
-  const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
-  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
-  await ctx.addInitScript(() => {
-    try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
-  });
-  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-  await ctx.route('**/api/hub/status*', async (route) => {
-    const r = await route.fetch();
-    const b = await r.json();
-    const nid = (b.sessions || [])[0]?.network_id || 'default';
-    const mk = (alias) => ({
-      alias, status: 'working', model: 'claude-opus-4', runtime: 'claude-code-cli',
-      network_id: nid, project_dir: null,
-      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-    });
-    await route.fulfill({ response: r, json: { ...b, sessions: [
-      mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
-    ] } });
-  });
-  // 5 distinct flow pairs → flowLinks.length === 5 → footer visible
-  const now = Date.now();
-  const msgs = [
-    { id: 'm0', from_alias: 'alpha', to_alias: 'beta',  content: 'hi', network_id: 'default', created_at: new Date(now - 1000).toISOString() },
-    { id: 'm1', from_alias: 'beta',  to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 1500).toISOString() },
-    { id: 'm2', from_alias: 'gamma', to_alias: 'delta', content: 'hi', network_id: 'default', created_at: new Date(now - 2000).toISOString() },
-    { id: 'm3', from_alias: 'delta', to_alias: 'alpha', content: 'hi', network_id: 'default', created_at: new Date(now - 2500).toISOString() },
-    { id: 'm4', from_alias: 'alpha', to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 3000).toISOString() },
-  ];
-  await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: msgs } }));
-  await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
-  const page = await ctx.newPage();
-  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-  await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
-  await page.waitForSelector('[data-recent-panel-more-nav]', { timeout: 10000 });
-  await page.waitForTimeout(500);
-
-  const rest = await page.evaluate(() => {
-    const footer = document.querySelector('[data-recent-panel-more]');
-    const ts = document.querySelector('[data-recent-row-ts]');
-    return {
-      footerFontSize: footer?.getAttribute('font-size'),
-      tsFontSize:     ts?.getAttribute('font-size'),
-    };
-  });
-
-  // R256 invariant regression — hover the footer + check it tucks inside panel
-  await page.locator('[data-recent-panel-more-nav]').hover();
-  await page.waitForTimeout(250);
-  const hoverProbe = await page.evaluate(() => {
-    const panelG = document.querySelector('[data-topo-panel="recent"]');
-    const rect   = panelG?.querySelector('rect');
-    const footer = document.querySelector('[data-recent-panel-more]');
-    return {
-      rectBottom:   rect?.getBoundingClientRect().bottom   ?? null,
-      footerBottom: footer?.getBoundingClientRect().bottom ?? null,
-    };
-  });
-  await ctx.close();
-
-  const hoverClearance = (hoverProbe.rectBottom != null && hoverProbe.footerBottom != null)
-    ? (hoverProbe.rectBottom - hoverProbe.footerBottom) : null;
-
-  return { ...rest, hoverClearance };
-}
-
-const empty = await probeEmpty();
-const pop   = await probePopulated();
-await browser.close();
-
-const results = {
-  hint_fontsize_bumped_to_9:        empty.hintFontSize === '9',
-  footer_fontsize_bumped_to_9:      pop.footerFontSize === '9',
-  per_row_timestamp_unchanged_at_8: pop.tsFontSize === '8',
-  r256_footer_inside_panel_on_hover: pop.hoverClearance != null && pop.hoverClearance >= -1,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} recent panel readability bump:`, JSON.stringify(results),
-  '\n  empty:', empty,
-  '\n  pop:',   pop);
-process.exit(ok ? 0 : 1);