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

package/scripts/loop-review.mjs

@@ -1,270 +0,0 @@
-/* Loop self-review — captures Overview in cyber+light × desktop+mobile,
- * runs a few observable checks, prints a per-axis score. Not a regression
- * test — the cron's "review and score then propose next round" output.
- *
- * Round 71: replaced the toy checks (overflow, sidebar visible, blur count)
- * with checks that actually catch the bugs we keep shipping:
- *   - CTA-above-fold: does the primary "Spin up" / "Get started" / etc
- *     button live within the first viewport? (deduct 3)
- *   - Zero-card density: how many "0" stat cards are crammed in above the
- *     CTA? (deduct 1 per zero-card beyond the first 2)
- *   - Whitespace gap: any element-to-element vertical gap >200px in the
- *     top half? (deduct 1)
- *   - Misleading-copy: "All systems go" text rendered when nodes.total=0
- *     (deduct 2) — round-70-class bug guard
- *   - Old: theme, horizontal overflow, sidebar, glow tell — still in
- *
- * Score is 10 max; deductions accumulate. The pre-r70 design that scored
- * 10/10 here should now score ~4–5.
- */
-
-import { chromium } from 'playwright';
-import { mkdirSync } from 'node:fs';
-import path from 'node:path';
-
-const BASE = process.env.LOOP_REVIEW_BASE || 'http://127.0.0.1:3000';
-const TOKEN = process.env.LOOP_REVIEW_TOKEN; // utok_...
-const OUT = path.resolve(process.cwd(), 'test-results/loop-review');
-mkdirSync(OUT, { recursive: true });
-
-if (!TOKEN) {
-  console.error('LOOP_REVIEW_TOKEN env var required (utok_...)');
-  process.exit(1);
-}
-
-const viewports = [
-  { tag: 'desktop', width: 1440, height: 900 },
-  { tag: 'mobile',  width: 390,  height: 844 },
-];
-const themes = ['cyber', 'light'];
-const pages = [
-  { name: 'overview', path: '/' },
-  { name: 'nodes',    path: '/nodes' },
-  { name: 'tasks',    path: '/tasks' },
-  { name: 'messages', path: '/messages' },
-  { name: 'admin',    path: '/admin' },
-  { name: 'settings', path: '/settings' },
-  { name: 'networks', path: '/settings/networks' },
-  { name: 'logs',     path: '/logs' },
-];
-
-const matrix = [];
-for (const t of themes) for (const v of viewports) for (const p of pages) {
-  matrix.push({ theme: t, viewport: { width: v.width, height: v.height }, tag: v.tag, pageName: p.name, pagePath: p.path });
-}
-
-const browser = await chromium.launch({ headless: true });
-
-const report = [];
-
-for (const m of matrix) {
-  const ctx = await browser.newContext({
-    viewport: m.viewport,
-    deviceScaleFactor: 1,
-  });
-  await ctx.addCookies([{
-    name: 'anet_dashboard_session',
-    value: `v3:${TOKEN}`,
-    domain: '127.0.0.1',
-    path: '/',
-  }]);
-  await ctx.addInitScript((theme) => {
-    try {
-      localStorage.setItem('anet-theme', theme);
-      sessionStorage.setItem('anet_v3_auth', '1');
-    } catch {}
-  }, m.theme);
-
-  const page = await ctx.newPage();
-  await page.goto(`${BASE}${m.pagePath}`, { waitUntil: 'domcontentloaded', timeout: 15000 });
-  await page.waitForTimeout(1200);
-
-  await page.evaluate((t) => document.documentElement.setAttribute('data-theme', t), m.theme);
-  await page.waitForTimeout(300);
-
-  const file = path.join(OUT, `${m.pageName}-${m.theme}-${m.tag}.png`);
-  // animations: 'disabled' so polling/spinner-induced render churn does
-  // not stall the screenshot when the dash is populated.
-  await page.screenshot({ path: file, fullPage: true, animations: 'disabled', timeout: 60000 });
-
-  const checks = await page.evaluate(() => {
-    const doc = document.documentElement;
-    const theme = doc.getAttribute('data-theme');
-    const body = document.body;
-    const bodyBg = getComputedStyle(body).backgroundColor;
-    const bodyFg = getComputedStyle(body).color;
-
-    const viewportH = window.innerHeight;
-    const viewportW = window.innerWidth;
-
-    // --- CTA-above-fold ---
-    // We treat any of these texts as the page's primary CTA:
-    //   "Spin up your first agent" — empty Overview onboarding
-    //   "Get started" — generic
-    //   "Dispatch" (when not empty) — populated state primary action
-    const ctaTextRe = /Spin up your first agent|Get started/i;
-    const ctaCandidates = [...document.querySelectorAll('h1, h2, h3, p, div, button, a')]
-      .filter(el => ctaTextRe.test(el.textContent || ''));
-    let ctaTop = null;
-    if (ctaCandidates.length) {
-      // Pick the smallest (innermost) element matching to avoid catching a wrapping section
-      const sorted = ctaCandidates.sort((a, b) => (a.textContent?.length || 0) - (b.textContent?.length || 0));
-      const r = sorted[0].getBoundingClientRect();
-      ctaTop = r.top;
-    }
-
-    // --- Zero-card density ---
-    // Count visible elements whose trimmed text === "0". These are usually
-    // big stat-card values dominating prime real estate.
-    const zeroCards = [...document.querySelectorAll('div, span')]
-      .filter(el => {
-        const t = el.textContent?.trim();
-        if (t !== '0' && t !== '0/0') return false;
-        const r = el.getBoundingClientRect();
-        return r.top >= 0 && r.top < viewportH && r.width > 20 && r.height > 20;
-      });
-
-    // --- Whitespace gap ---
-    // Look for sibling-to-sibling top gaps >200px in the page content
-    // container. AppShell wraps page children in
-    // <main><HealthBanner/><div><div class="min-h-screen ...">{page}</div></div></main>,
-    // so we walk into that inner page wrapper to read real section gaps.
-    const main = document.querySelector('main');
-    const inner = main?.querySelector(':scope > div:last-of-type > div') || main || document.body;
-    const directKids = [...inner.children].filter(el => {
-      const r = el.getBoundingClientRect();
-      return r.height > 0 && r.width > 0;
-    });
-    let maxGap = 0;
-    for (let i = 0; i + 1 < directKids.length; i++) {
-      const a = directKids[i].getBoundingClientRect();
-      const b = directKids[i + 1].getBoundingClientRect();
-      if (a.bottom < 1600 && b.top - a.bottom > maxGap) {
-        maxGap = Math.round(b.top - a.bottom);
-      }
-    }
-
-    // --- Misleading copy guard ---
-    // "All systems go" must not appear anywhere when nodes.total === 0.
-    // We can't read state directly, but if the page also shows
-    // "Waiting for first agent" then we know fleet is empty.
-    const bodyText = document.body.innerText;
-    const fleetEmpty = /Waiting for first agent/i.test(bodyText);
-    const sayingAllSystemsGo = /All systems go/i.test(bodyText);
-    const misleadingCopy = fleetEmpty && sayingAllSystemsGo;
-
-    // --- Carryover ---
-    const docWidth = doc.scrollWidth;
-    const horizontalOverflow = docWidth > viewportW + 2;
-
-    // --- Cut-off-element guard ---
-    // Round 96: scrollWidth check above is fooled when an overflowing
-    // parent has `overflow-x: hidden` (the page's own min-h-screen
-    // wrapper does this). Walk visible elements and flag any whose
-    // bounding rect ends past the viewport edge — that's a real cut-off
-    // even when the body's scroll-width matches. Skip elements with
-    // their own overflow scrolling (intentional inner scroll containers).
-    let cutoffCount = 0;
-    let cutoffSample = '';
-    // Cap the walk at 3000 elements (populated /server-logs has 500+ log
-    // rows × multiple spans each; without a cap the harness OOMs under
-    // chromium during the 32-capture sweep). Walk up ancestors to skip
-    // elements whose parent is an intentional horizontal-scroll
-    // container (overflow-x: auto / scroll) — those extending past the
-    // viewport edge is by design.
-    const hasScrollableAncestor = (el) => {
-      let cur = el;
-      while (cur && cur !== document.body) {
-        const cs = getComputedStyle(cur);
-        if (cs.overflowX === 'auto' || cs.overflowX === 'scroll') return true;
-        cur = cur.parentElement;
-      }
-      return false;
-    };
-    const allEls = document.querySelectorAll('body *');
-    const walk = Math.min(allEls.length, 3000);
-    for (let i = 0; i < walk; i++) {
-      const el = allEls[i];
-      const r = el.getBoundingClientRect();
-      if (r.width === 0 || r.height === 0) continue;
-      if (r.right <= viewportW + 8) continue;
-      if (hasScrollableAncestor(el)) continue;
-      cutoffCount++;
-      if (!cutoffSample) {
-        const txt = (el.textContent || '').trim().slice(0, 30);
-        cutoffSample = `${el.tagName} right=${Math.round(r.right)} "${txt}"`;
-      }
-    }
-    let glowyCount = 0;
-    for (const el of document.querySelectorAll('body *')) {
-      const cs = getComputedStyle(el);
-      if (cs.filter && cs.filter.includes('blur(') && !cs.filter.includes('blur(0px)')) glowyCount++;
-    }
-    const sidebar = document.querySelector('aside, [data-sidebar], nav');
-    const sidebarRect = sidebar?.getBoundingClientRect();
-    const sidebarVisible = !!(sidebarRect && sidebarRect.width > 0 && sidebarRect.height > 0);
-
-    return {
-      theme, bodyBg, bodyFg,
-      viewportH, viewportW,
-      ctaTop, ctaPresent: ctaCandidates.length > 0,
-      zeroCardCount: zeroCards.length,
-      maxGap,
-      fleetEmpty, sayingAllSystemsGo, misleadingCopy,
-      docWidth, horizontalOverflow,
-      cutoffCount, cutoffSample,
-      glowyCount, sidebarVisible,
-    };
-  });
-
-  let score = 10;
-  const notes = [];
-  if (checks.theme !== m.theme) { score -= 3; notes.push(`theme=${checks.theme}`); }
-  if (checks.horizontalOverflow) { score -= 2; notes.push(`horiz overflow ${checks.docWidth}/${checks.viewportW}`); }
-  if (m.tag === 'desktop' && !checks.sidebarVisible) { score -= 1; notes.push('sidebar missing on desktop'); }
-  if (checks.glowyCount > 8) { score -= 1; notes.push(`${checks.glowyCount} blur-filter elements (glow tell)`); }
-
-  // New checks — the ones that would have caught r70's bug
-  if (checks.ctaPresent && checks.ctaTop !== null) {
-    if (checks.ctaTop > checks.viewportH) {
-      score -= 3;
-      notes.push(`CTA below fold (top=${Math.round(checks.ctaTop)} > vh=${checks.viewportH})`);
-    } else if (checks.ctaTop > checks.viewportH * 0.7) {
-      score -= 1;
-      notes.push(`CTA low in fold (top=${Math.round(checks.ctaTop)})`);
-    }
-  }
-  if (checks.zeroCardCount > 4) {
-    const extra = Math.min(checks.zeroCardCount - 4, 3);
-    score -= extra;
-    notes.push(`${checks.zeroCardCount} zero-value cards above fold`);
-  }
-  if (checks.maxGap > 200) {
-    score -= 1;
-    notes.push(`whitespace gap ${checks.maxGap}px`);
-  }
-  if (checks.misleadingCopy) {
-    score -= 2;
-    notes.push(`'All systems go' shown while fleet empty`);
-  }
-  if (checks.cutoffCount > 0) {
-    score -= 2;
-    notes.push(`${checks.cutoffCount} cut-off element(s); first: ${checks.cutoffSample}`);
-  }
-
-  report.push({ ...m, file, checks, score: Math.max(score, 0), notes });
-
-  await page.close();
-  await ctx.close();
-}
-
-await browser.close();
-
-console.log('\n=== Loop self-review (harness r73) ===\n');
-for (const r of report) {
-  console.log(`${r.pageName.padEnd(8)} ${r.theme}/${r.tag.padEnd(7)} score=${r.score}/10`);
-  console.log(`  cta_top=${r.checks.ctaTop !== null ? Math.round(r.checks.ctaTop) : '--'}  zero_cards=${r.checks.zeroCardCount}  max_gap=${r.checks.maxGap}px  fleet_empty=${r.checks.fleetEmpty}`);
-  if (r.notes.length) console.log(`  notes: ${r.notes.join(' · ')}`);
-}
-const avg = report.reduce((s, r) => s + r.score, 0) / report.length;
-console.log(`\noverall avg = ${avg.toFixed(1)}/10 across ${report.length} captures`);

package/scripts/network-derive-shot.mjs

@@ -1,16 +0,0 @@
-import { chromium } from 'playwright';
-const TOKEN = process.env.LOOP_REVIEW_TOKEN;
-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'); sessionStorage.setItem('anet_v3_auth','1'); } catch {} });
-await ctx.route('**/api/hub/networks*', async (route) => {
-  await route.fulfill({ json: { ok: true, networks: [{ network_id: 'default', network_name: 'default', role: 'owner' }] } });
-});
-const page = await ctx.newPage();
-await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-await page.waitForTimeout(3500);
-// crop the sidebar region
-await page.screenshot({ path: '/tmp/anet-issue-50/network-derive.png', clip: { x: 0, y: 0, width: 230, height: 420 } });
-await browser.close();
-console.log('done');

package/scripts/network-derive-test.mjs

@@ -1,28 +0,0 @@
-import { chromium } from 'playwright';
-const TOKEN = process.env.LOOP_REVIEW_TOKEN;
-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'); sessionStorage.setItem('anet_v3_auth','1'); } catch {} });
-// simulate the #92 bug: /api/networks scope-limited to only "default"
-await ctx.route('**/api/hub/networks*', async (route) => {
-  await route.fulfill({ json: { ok: true, networks: [{ network_id: 'default', network_name: 'default', role: 'owner' }] } });
-});
-// see what real network_ids the sessions carry
-const page = await ctx.newPage();
-const apiRes = await page.goto('http://127.0.0.1:3000/api/hub/status', { waitUntil: 'domcontentloaded' });
-const statusBody = await apiRes.json();
-const realNetIds = [...new Set((statusBody.sessions||[]).map(s => s.network_id).filter(Boolean))];
-console.log('real network_ids in sessions:', JSON.stringify(realNetIds));
-await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-await page.waitForTimeout(3500);
-// read the Sidebar network buttons
-const sidebarNets = await page.evaluate(() => {
-  const hdr = [...document.querySelectorAll('div')].find(d => d.textContent?.trim() === 'Networks');
-  if (!hdr) return { error: 'no Networks header' };
-  const list = hdr.nextElementSibling;
-  return [...list.querySelectorAll('button')].map(b => b.textContent.trim());
-});
-console.log('Sidebar shows networks:', JSON.stringify(sidebarNets));
-await browser.close();
-console.log('done');

package/scripts/p0-147-screenshot.mjs

@@ -1,53 +0,0 @@
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-const out = process.argv[2] || 'screenshots/v0.11.0-147/after';
-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: 1400 }, deviceScaleFactor: 2 });
-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', 'grid'); } catch {} });
-const fresh = new Date(Date.now() - 60_000).toISOString();
-// Build a multi-prefix-group fleet (4 prefixes × 5 nodes = 20 nodes — triggers grid + multiple cluster boxes)
-const sessions = [];
-const prefixes = ['ai-insight', 'agent-network-dashboard', 'p-station', 'pay-blueleap'];
-const models = ['claude-opus-4', 'gpt-4o', 'internlm/internlm2', 'minimax/abab6'];
-prefixes.forEach((prefix, gIdx) => {
-  for (let i = 1; i <= 5; i++) {
-    sessions.push({
-      alias: `${prefix}-node-${i}`,
-      status: i === 1 ? 'working' : 'idle',
-      model: models[gIdx],
-      runtime: 'claude-code-cli',
-      network_id: 'default', project_dir: null,
-      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-    });
-  }
-});
-await ctx.route('**/api/hub/status*', async (route) => {
-  const r = await route.fetch();
-  const b = await r.json();
-  await route.fulfill({ response: r, json: { ...b, sessions } });
-});
-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 >= 20, { timeout: 30000 });
-await page.waitForTimeout(800);
-const box = await page.evaluate(() => {
-  const chrome = document.querySelector('[data-topo-chrome]');
-  let card = chrome?.parentElement;
-  while (card && !card.querySelector(':scope > svg')) card = card?.parentElement;
-  if (!card) return null;
-  card.scrollIntoView({ block: 'start' });
-  return new Promise(resolve => requestAnimationFrame(() => {
-    const r = card.getBoundingClientRect();
-    resolve({ x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height });
-  }));
-});
-await page.waitForTimeout(400);
-if (box && box.width > 100) {
-  await page.screenshot({ path: `${out}.png`, clip: { x: box.x, y: box.y, width: box.width, height: Math.min(box.height, 980) } });
-}
-console.log(`✅ wrote ${out}.png`);
-await browser.close();

package/scripts/p0-servers-drawer-screenshot.mjs

@@ -1,101 +0,0 @@
-/* v0.10.0 Hero 1+2 — ServersDrawer extension screenshot evidence for #140.
- * Mocks the /api/hub/servers response with disk + history + agents
- * to surface the new expandable detail view. */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const out = process.argv[2] || 'screenshots/r293-p0/servers-drawer-expanded';
-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: 1000 }, deviceScaleFactor: 2 });
-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');
-    // Force drawer open + expand the first card by hostname guess.
-    localStorage.setItem('anet-servers-drawer', '1');
-    localStorage.setItem('anet-servers-drawer-expanded', JSON.stringify(['mock-1', 'mock-2']));
-  } catch {}
-});
-
-// Mock servers payload with full v0.10.0 schema.
-await ctx.route('**/api/hub/servers*', (route) => {
-  route.fulfill({
-    json: {
-      servers: [
-        {
-          hostname: 'mock-1',
-          ip: '10.0.0.10',
-          cpu_load_1min: 2.4,
-          cpu_cores: 8,
-          mem_used_gb: 18.2,
-          mem_total_gb: 32,
-          disk_used_gb: 220,
-          disk_total_gb: 500,
-          cpu_history: [25, 28, 32, 30, 35, 38, 40, 36, 33, 30],
-          mem_history: [50, 52, 55, 56, 58, 57, 59, 60, 58, 57],
-          disk_history: [40, 42, 43, 43, 44, 44, 44, 44, 44, 44],
-          agents: [
-            { alias: 'claude-1', runtime: 'claude-code-cli', status: 'working', progress: 0.42 },
-            { alias: 'codex-1', runtime: 'codex-sdk', status: 'working', progress: 0.18 },
-            { alias: 'intern-1', runtime: 'claude-agent-sdk', status: 'idle' },
-          ],
-          agent_count: 3,
-          status: 'online',
-        },
-        {
-          hostname: 'mock-2',
-          ip: '10.0.0.11',
-          cpu_load_1min: 7.1,
-          cpu_cores: 4,
-          mem_used_gb: 14.5,
-          mem_total_gb: 16,
-          disk_used_gb: 460,
-          disk_total_gb: 500,
-          cpu_history: [80, 88, 92, 95, 96, 94, 93, 91, 90, 89],
-          mem_history: [85, 87, 89, 91, 90, 92, 93, 91, 90, 91],
-          disk_history: [86, 88, 89, 90, 90, 91, 92, 92, 92, 92],
-          agents: [
-            { alias: 'minimax-busy', runtime: 'claude-code-cli', status: 'working', progress: 0.78 },
-          ],
-          agent_count: 1,
-          status: 'online',
-        },
-        {
-          hostname: 'mock-offline',
-          ip: '10.0.0.20',
-          cpu_load_1min: null,
-          cpu_cores: 0,
-          mem_used_gb: null,
-          mem_total_gb: null,
-          agent_count: 2,
-          status: 'offline',
-          note: 'last seen 12m ago',
-        },
-      ],
-    },
-  });
-});
-await ctx.route('**/api/hub/status*', (r) => r.fulfill({ json: { sessions: [], hub: { networks: [] } } }));
-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-server-card]', { timeout: 15000 });
-await page.waitForTimeout(800);
-
-// Crop to the drawer region only.
-const box = await page.evaluate(() => {
-  const aside = document.querySelector('[aria-label="Servers panel"]');
-  if (!aside) return null;
-  const r = aside.getBoundingClientRect();
-  return { x: r.x - 8, y: r.y - 8, width: r.width + 16, height: Math.min(r.height + 16, 980) };
-});
-if (box && box.width > 100) {
-  await page.screenshot({ path: `${out}.png`, clip: box });
-}
-await page.screenshot({ path: `${out}-full.png`, fullPage: false });
-console.log(`✅ wrote ${out}.png + ${out}-full.png`);
-await browser.close();

package/scripts/p0-topo-screenshot.mjs

@@ -1,82 +0,0 @@
-/* P0 (Vincent 5222) baseline + after screenshot of TopoGraph with a
- * realistic 4-agent mixed-vendor fleet. Usage:
- *   node scripts/p0-topo-screenshot.mjs <out-prefix>
- * Writes <out-prefix>-full.png (1600×900) and <out-prefix>-svg.png
- * (just the SVG bbox, cropped). */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const outPrefix = process.argv[2] || 'screenshots/r293-p0/baseline';
-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: 1400 }, deviceScaleFactor: 2 });
-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, status = 'working') => ({
-    alias, status, 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('claude-1',  'claude-opus-4'),
-    mk('claude-2',  'claude-sonnet-4', 'idle'),
-    mk('codex-1',   'gpt-4o'),
-    mk('intern-1',  'internlm/internlm2'),
-    mk('minimax-1', 'minimax/abab6', 'idle'),
-  ] } });
-});
-await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
-  { from: 'claude-1', to: 'codex-1',  text: 'review the diff please', ts: fresh },
-  { from: 'codex-1',  to: 'claude-1', text: 'lgtm, ship', ts: fresh },
-  { from: 'intern-1', to: 'claude-1', text: 'logs uploaded', ts: fresh },
-] } }));
-await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
-
-const page = await ctx.newPage();
-await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length >= 4, { timeout: 30000 });
-await page.waitForTimeout(800);
-
-// Scroll the topology card into view + measure.
-const topoBox = await page.evaluate(() => {
-  const chromeEl = document.querySelector('[data-topo-chrome]');
-  if (!chromeEl) return null;
-  // Walk up to find the topology card container — has the SVG inside.
-  let card = chromeEl.parentElement;
-  while (card && !card.querySelector(':scope > svg')) card = card.parentElement;
-  if (!card) return null;
-  card.scrollIntoView({ block: 'start' });
-  // Allow scroll to settle.
-  return new Promise(resolve => {
-    requestAnimationFrame(() => {
-      const r = card.getBoundingClientRect();
-      resolve({ x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height });
-    });
-  });
-});
-await page.waitForTimeout(400);
-
-await page.screenshot({ path: `${outPrefix}-full.png`, fullPage: false });
-if (topoBox && topoBox.width > 100 && topoBox.height > 100) {
-  // Re-measure after settling.
-  const box2 = await page.evaluate(() => {
-    const chromeEl = document.querySelector('[data-topo-chrome]');
-    let card = chromeEl?.parentElement;
-    while (card && !card.querySelector(':scope > svg')) card = card?.parentElement;
-    if (!card) return null;
-    const r = card.getBoundingClientRect();
-    return { x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height };
-  });
-  if (box2) {
-    await page.screenshot({ path: `${outPrefix}-topo.png`, clip: box2 });
-  }
-}
-console.log(`✅ wrote ${outPrefix}-full.png + ${outPrefix}-topo.png`);
-await browser.close();

package/scripts/p150-orphan-layout-screenshot.mjs

@@ -1,82 +0,0 @@
-/* v0.10.4 #150 — orphan layout screenshot evidence.
- *
- * Fixture: 3 prefix groups (5+3+4 = 12 grouped) + 5 distinct-prefix
- * singletons (orphans). Pre-#150 the singletons appeared scattered
- * in centred bands between cluster boxes. Post-#150 they all bundle
- * into one "其他" cluster box at the bottom. */
-import { chromium } from 'playwright';
-import { readFileSync } from 'node:fs';
-
-const out = process.argv[2] || 'screenshots/v0.10.4-150-orphans/after';
-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 }, deviceScaleFactor: 2 });
-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');
-    // Force grid layout so the orphan band is visible
-    localStorage.setItem('anet-topo-layout', 'grid');
-  } catch {}
-});
-const fresh = new Date(Date.now() - 60_000).toISOString();
-const sessions = [];
-// Group 1: ai-insight × 5
-for (let i = 1; i <= 5; i++) sessions.push({
-  alias: `ai-insight-node-${i}`, status: i === 1 ? 'working' : 'idle',
-  model: 'claude-opus-4', runtime: 'claude-code-cli',
-  network_id: 'default', project_dir: null,
-  created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-});
-// Group 2: agent-network-dashboard × 3
-for (let i = 1; i <= 3; i++) sessions.push({
-  alias: `agent-network-dashboard-${i}`, status: i === 1 ? 'working' : 'idle',
-  model: 'gpt-4o', runtime: 'codex-sdk',
-  network_id: 'default', project_dir: null,
-  created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-});
-// Group 3: p-station × 4
-for (let i = 1; i <= 4; i++) sessions.push({
-  alias: `p-station-worker-${i}`, status: i === 1 ? 'working' : 'idle',
-  model: 'minimax/abab6', runtime: 'http-api',
-  network_id: 'default', project_dir: null,
-  created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-});
-// Orphans: 5 distinct-prefix singletons — should bundle into "其他" bottom band
-['monitor-prod', 'dispatcher-bot', 'runner-helper', 'oracle-svc', 'cron-worker'].forEach((alias, idx) => {
-  sessions.push({
-    alias, status: idx % 2 === 0 ? 'working' : 'idle',
-    model: 'claude-sonnet-4', runtime: 'claude-agent-sdk',
-    network_id: 'default', project_dir: null,
-    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-  });
-});
-await ctx.route('**/api/hub/status*', async (route) => {
-  const r = await route.fetch();
-  const b = await r.json();
-  await route.fulfill({ response: r, json: { ...b, sessions } });
-});
-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 >= 17, { timeout: 30000 });
-await page.waitForTimeout(800);
-const box = await page.evaluate(() => {
-  const chrome = document.querySelector('[data-topo-chrome]');
-  let card = chrome?.parentElement;
-  while (card && !card.querySelector(':scope > svg')) card = card?.parentElement;
-  if (!card) return null;
-  card.scrollIntoView({ block: 'start' });
-  return new Promise(resolve => requestAnimationFrame(() => {
-    const r = card.getBoundingClientRect();
-    resolve({ x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height });
-  }));
-});
-await page.waitForTimeout(400);
-if (box && box.width > 100) {
-  await page.screenshot({ path: `${out}.png`, clip: { x: box.x, y: box.y, width: box.width, height: Math.min(box.height, 1200) } });
-}
-console.log(`✅ wrote ${out}.png`);
-await browser.close();