@sleep2agi/agent-network-dashboard 0.4.5-preview.9 → 0.4.5-preview.91

package/scripts/empty-state-test.mjs

@@ -0,0 +1,41 @@
+import { chromium } from 'playwright';
+const TOKEN = process.env.LOOP_REVIEW_TOKEN;
+const browser = await chromium.launch({ headless: true });
+
+async function shoot(name, { emptyStats }) {
+  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 {} });
+  // force 0 sessions
+  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: [] } });
+  });
+  if (emptyStats) {
+    // also zero out task history → true first-run
+    await ctx.route('**/api/hub/stats*', async (route) => {
+      const r = await route.fetch(); const b = await r.json();
+      await route.fulfill({ response: r, json: { ...b, tasks: { by_status: [] } } });
+    });
+    await ctx.route('**/api/hub/tasks*', async (route) => {
+      const r = await route.fetch(); const b = await r.json();
+      await route.fulfill({ response: r, json: { ...b, tasks: [] } });
+    });
+  }
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForTimeout(3000);
+  // find the empty-state card text
+  const txt = await page.evaluate(() => {
+    const h3 = [...document.querySelectorAll('h3')].map(h => h.textContent?.trim());
+    return h3.filter(t => /agent/i.test(t || ''));
+  });
+  console.log(name, '→ empty-state headline(s):', JSON.stringify(txt));
+  await page.screenshot({ path: `/tmp/anet-issue-50/empty-${name}.png`, fullPage: true });
+  await ctx.close();
+}
+
+await shoot('with-history', { emptyStats: false });   // 0 sessions, real task history → "No agents online"
+await shoot('true-firstrun', { emptyStats: true });   // 0 sessions, 0 tasks → "Spin up your first agent"
+await browser.close();
+console.log('done');

package/scripts/fold-only.mjs

@@ -0,0 +1,47 @@
+/* Captures the fold (viewport-only screenshot) for a given page so we
+ * can inspect what the user actually sees on first paint. */
+
+import { chromium } from 'playwright';
+import { mkdirSync } from 'node:fs';
+import path from 'node:path';
+
+const TOKEN = process.env.LOOP_REVIEW_TOKEN;
+const OUT = path.resolve(process.cwd(), 'test-results/loop-review/folds');
+mkdirSync(OUT, { recursive: true });
+
+const targets = [
+  { name: 'tasks-cyber-desktop', path: '/tasks', theme: 'cyber', w: 1440, h: 900 },
+  { name: 'tasks-cyber-mobile',  path: '/tasks', theme: 'cyber', w: 390, h: 844 },
+  { name: 'nodes-cyber-desktop', path: '/nodes', theme: 'cyber', w: 1440, h: 900 },
+  { name: 'nodes-cyber-mobile',  path: '/nodes', theme: 'cyber', w: 390, h: 844 },
+  { name: 'overview-cyber-desktop', path: '/', theme: 'cyber', w: 1440, h: 900 },
+  { name: 'overview-light-desktop', path: '/', theme: 'light', w: 1440, h: 900 },
+  { name: 'server-logs-cyber-desktop', path: '/server-logs', theme: 'cyber', w: 1440, h: 900 },
+  { name: 'server-logs-cyber-mobile',  path: '/server-logs', theme: 'cyber', w: 390,  h: 844 },
+  { name: 'admin-cyber-desktop',       path: '/admin',       theme: 'cyber', w: 1440, h: 900 },
+  { name: 'admin-light-desktop',       path: '/admin',       theme: 'light', w: 1440, h: 900 },
+  { name: 'tasks-light-desktop',       path: '/tasks',       theme: 'light', w: 1440, h: 900 },
+  { name: 'server-logs-light-desktop', path: '/server-logs', theme: 'light', w: 1440, h: 900 },
+];
+
+const browser = await chromium.launch({ headless: true });
+for (const t of targets) {
+  const ctx = await browser.newContext({ viewport: { width: t.w, height: t.h } });
+  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 {}
+  }, t.theme);
+  const page = await ctx.newPage();
+  await page.goto(`http://127.0.0.1:3000${t.path}`, { waitUntil: 'domcontentloaded' });
+  await page.waitForTimeout(2500);
+  await page.evaluate(theme => document.documentElement.setAttribute('data-theme', theme), t.theme);
+  await page.waitForTimeout(300);
+  await page.screenshot({ path: path.join(OUT, `${t.name}.png`), fullPage: false, animations: 'disabled' });
+  await ctx.close();
+}
+await browser.close();
+console.log('captured', targets.length, 'fold-only screenshots to', OUT);

package/scripts/intern-alias-test.mjs

@@ -0,0 +1,46 @@
+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'); localStorage.removeItem('anet-brand'); localStorage.removeItem('anet-topo-view'); sessionStorage.setItem('anet_v3_auth','1'); } catch {} });
+// inject a 书生 fleet alongside the real sessions
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch(); const b = await r.json();
+  const real = b.sessions || [];
+  const fleet = Array.from({length: 8}, (_, i) => ({
+    alias: `书生${i+1}号`, status: i % 3 === 0 ? 'working' : 'idle',
+    network_id: real[0]?.network_id || 'default',
+    created_at:'2026-05-14T00:00:00Z', updated_at:'2026-05-14T00:00:00Z', last_seen_at:'2026-05-14T00:00:00Z',
+  }));
+  await route.fulfill({ response: r, json: { ...b, sessions: [...real, ...fleet] } });
+});
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });  // NO ?brand=intern
+await page.waitForFunction(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return !!svg && svg.querySelectorAll('circle[r="26"]').length >= 14;
+}, { timeout: 30000 }).catch(() => {});
+await page.waitForTimeout(1000);
+const result = await page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  const nodeGs = [...svg.querySelectorAll('g')].filter(g =>
+    g.querySelector(':scope > circle[r="26"], :scope > circle[r="18"]') &&
+    g.querySelector(':scope > g > text[font-weight="700"]'));
+  let internWithImage = 0, internWithoutImage = 0, nonInternWithImage = 0, nonInternGeneric = 0;
+  const samples = [];
+  nodeGs.forEach(g => {
+    const alias = g.querySelector(':scope > g > text[font-weight="700"]').textContent.trim();
+    const hasImage = !!g.querySelector(':scope > image[href*="intern_avatar"]');
+    const isIntern = /书生|书小生|intern/i.test(alias);
+    if (isIntern && hasImage) internWithImage++;
+    else if (isIntern && !hasImage) { internWithoutImage++; samples.push('MISS:'+alias); }
+    else if (!isIntern && hasImage) { nonInternWithImage++; samples.push('LEAK:'+alias); }
+    else nonInternGeneric++;
+  });
+  return { internWithImage, internWithoutImage, nonInternWithImage, nonInternGeneric, samples };
+});
+console.log(JSON.stringify(result, null, 1));
+await page.locator('section:has(h2:text("Command mesh"))').screenshot({ path: '/tmp/anet-issue-50/intern-alias-cyber.png' });
+await browser.close();
+console.log('done');

package/scripts/loop-review.mjs

@@ -0,0 +1,270 @@
+/* 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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,28 @@
+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/topo-brand-shot.mjs

@@ -0,0 +1,61 @@
+/* Screenshot TopoGraph with brand=intern flag (书小生 avatars). */
+import { chromium } from 'playwright';
+
+const TOKEN = process.env.LOOP_REVIEW_TOKEN;
+const browser = await chromium.launch({ headless: true });
+
+function makeFakeSession(index) {
+  return {
+    alias: `agent${index}号`,
+    status: index % 5 === 0 ? 'working' : 'idle',
+    network_id: 'default',
+    created_at: '2026-05-13T00:00:00Z',
+    updated_at: '2026-05-13T00:00:00Z',
+    last_seen_at: '2026-05-13T00:00:00Z',
+  };
+}
+
+for (const [variant, themes] of [['normal', ['cyber', 'light']], ['large', ['cyber']]]) {
+  for (const theme of themes) {
+    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(t => {
+      try {
+        localStorage.setItem('anet-theme', t);
+        localStorage.setItem('anet-brand', 'intern');
+        sessionStorage.setItem('anet_v3_auth', '1');
+      } catch {}
+    }, theme);
+
+    if (variant === 'large') {
+      await ctx.route('**/api/hub/status*', async (route) => {
+        const response = await route.fetch();
+        const body = await response.json();
+        const real = body.sessions || [];
+        const padded = [...real];
+        while (padded.length < 25) padded.push(makeFakeSession(padded.length));
+        await route.fulfill({ response, json: { ...body, sessions: padded } });
+      });
+    }
+
+    const page = await ctx.newPage();
+    await page.goto('http://127.0.0.1:3000/?brand=intern', { waitUntil: 'domcontentloaded' });
+    await page.waitForFunction(() => {
+      const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+      const minNodes = window.location.search.includes('large') ? 14 : 8;
+      return !!svg && svg.querySelectorAll('image[href*="intern_avatar"]').length > 0;
+    }, { timeout: 30000 }).catch(() => {});
+    await page.waitForTimeout(1500);
+    await page.evaluate(t => document.documentElement.setAttribute('data-theme', t), theme);
+    await page.waitForTimeout(400);
+    await page.evaluate(() => {
+      const heading = [...document.querySelectorAll('h2')].find(h => /Command mesh/i.test(h.textContent || ''));
+      heading?.scrollIntoView({ behavior: 'instant', block: 'start' });
+    });
+    await page.waitForTimeout(800);
+    await page.screenshot({ path: `/tmp/anet-issue-50/topo-brand-${variant}-${theme}.png`, fullPage: false, animations: 'disabled', timeout: 30000 });
+    await ctx.close();
+  }
+}
+await browser.close();
+console.log('done');

package/scripts/topo-cluster-test.mjs

@@ -0,0 +1,41 @@
+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'); localStorage.removeItem('anet-topo-view'); sessionStorage.setItem('anet_v3_auth','1'); } catch {} });
+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(800);
+const ordered = await page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  const cx = 500, cy = 330;
+  // each agent node <g> contains: status-ring circle[r=26|18] + a label <g> with the alias text
+  const nodeGs = [...svg.querySelectorAll('g')].filter(g => {
+    return g.querySelector(':scope > circle[r="26"], :scope > circle[r="18"]') &&
+           g.querySelector(':scope > g > text[font-weight="700"]');
+  });
+  const nodes = nodeGs.map(g => {
+    const ring = g.querySelector(':scope > circle[r="26"], :scope > circle[r="18"]');
+    const label = g.querySelector(':scope > g > text[font-weight="700"]');
+    const x = parseFloat(ring.getAttribute('cx')), y = parseFloat(ring.getAttribute('cy'));
+    return { alias: label.textContent.trim(), ang: Math.atan2(y - cy, x - cx) };
+  });
+  nodes.sort((a, b) => a.ang - b.ang);
+  return nodes.map(n => n.alias);
+});
+console.log('node count:', ordered.length);
+console.log('ring order (by angle):');
+console.log(ordered.join(' · '));
+// check 通信* contiguity
+const tx = ordered.map((a, i) => a.startsWith('通信') ? i : -1).filter(i => i >= 0);
+const contiguous = tx.length === 0 || tx.every((v, i) => i === 0 || v === tx[i-1] + 1) ||
+  // allow wrap-around contiguity
+  (() => { const n = ordered.length; const set = new Set(tx); for (let s = 0; s < n; s++) { let ok = true; for (let k = 0; k < tx.length; k++) if (!set.has((s + k) % n)) { ok = false; break; } if (ok) return true; } return false; })();
+console.log('通信* indices:', tx.join(','), '→ contiguous:', contiguous);
+await browser.close();
+console.log('done');

package/scripts/topo-controls-shot.mjs

@@ -0,0 +1,24 @@
+import { chromium } from 'playwright';
+const TOKEN = process.env.LOOP_REVIEW_TOKEN;
+const browser = await chromium.launch({ headless: true });
+for (const theme of ['cyber', 'light']) {
+  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(t => { try { localStorage.setItem('anet-theme', t); sessionStorage.setItem('anet_v3_auth','1'); localStorage.removeItem('anet-topo-view'); } catch {} }, theme);
+  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(800);
+  await page.evaluate(t => document.documentElement.setAttribute('data-theme', t), theme);
+  await page.waitForTimeout(300);
+  const sec = page.locator('section:has(h2:text("Command mesh"))');
+  await sec.scrollIntoViewIfNeeded();
+  await page.waitForTimeout(400);
+  await sec.screenshot({ path: `/tmp/anet-issue-50/topo-controls-${theme}.png` });
+  await ctx.close();
+}
+await browser.close();
+console.log('done');

package/scripts/topo-group-test.mjs

@@ -0,0 +1,37 @@
+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'); localStorage.removeItem('anet-topo-view'); sessionStorage.setItem('anet_v3_auth','1'); } catch {} });
+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(800);
+// for each node: alias + avatar bg fill — same prefix should share fill
+const map = await page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  const nodeGs = [...svg.querySelectorAll('g')].filter(g =>
+    g.querySelector(':scope > circle[r="26"], :scope > circle[r="18"]') &&
+    g.querySelector(':scope > g > text[font-weight="700"]'));
+  return nodeGs.map(g => {
+    const label = g.querySelector(':scope > g > text[font-weight="700"]').textContent.trim();
+    // avatar bg circle: the small circle that is NOT the status ring (r 26/18) and NOT inner — it's r=14/10 with a fill
+    const avatarCircle = [...g.querySelectorAll(':scope > circle')].find(c => {
+      const r = parseFloat(c.getAttribute('r'));
+      return (r === 14 || r === 10) && c.getAttribute('fill') && c.getAttribute('fill').startsWith('hsl');
+    });
+    return { alias: label, fill: avatarCircle ? avatarCircle.getAttribute('fill') : null };
+  });
+});
+// group by fill
+const byFill = {};
+map.forEach(({alias, fill}) => { (byFill[fill] ??= []).push(alias); });
+console.log('avatar fill → aliases:');
+Object.entries(byFill).forEach(([fill, aliases]) => console.log('  ' + fill + ': ' + aliases.join(', ')));
+await page.locator('section:has(h2:text("Command mesh"))').screenshot({ path: '/tmp/anet-issue-50/topo-grouped.png' });
+await browser.close();
+console.log('done');