@sleep2agi/agent-network-dashboard 0.4.6-preview.2 → 0.4.6-preview.21

package/scripts/topo-overlap-test.mjs

@@ -0,0 +1,137 @@
+/* Issue #112 acceptance: ZERO overlap in the topology (Vincent's hard
+ * done-criterion). At ~30 nodes, in both ring and grid layouts, asserts:
+ *   - node ↔ node       — status rings don't intersect
+ *   - node ↔ panel      — no node circle intersects an overlay panel rect
+ *   - node ↔ group-label — no group-box label text covers a node
+ *   - group-box ↔ box   — no two group boxes overlap */
+import { chromium } from 'playwright';
+import { readFileSync, mkdirSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+mkdirSync('/tmp/anet-issue-112', { recursive: true });
+const browser = await chromium.launch({ headless: true });
+
+// ~30 nodes: 4 prefix groups + a workdir group + singletons
+const FLEET = [
+  ...['A站内容', 'A站评测', 'A站数据', 'A站设计', 'A站运营', 'A站工程'].map(a => ({ alias: a })),
+  ...['B站产品', 'B站工程', 'B站测试', 'B站运维', 'B站运营'].map(a => ({ alias: a })),
+  ...['P站产品', 'P站工程', 'P站测试', 'P站运维'].map(a => ({ alias: a })),
+  ...['通信龙', '通信牛', '通信马', '通信SDK马'].map(a => ({ alias: a })),
+  ...['srv-a', 'srv-b', 'srv-c'].map(a => ({ alias: a, project_dir: '/home/v/agent-orchestra' })),
+  ...['群星马', '书生1号', '微信马', '飞书马', '独立节点', '研究员1号', '研究员2号', '游侠马'].map(a => ({ alias: a })),
+];
+
+const overlaps1D = (a0, a1, b0, b1, tol) => a0 < b1 - tol && b0 < a1 - tol;
+
+async function check(layout) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 920 } });
+  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.removeItem('anet-brand');
+      localStorage.removeItem('anet-topo-view');
+      localStorage.removeItem('anet-topo-nodescale'); // default M
+      localStorage.setItem('anet-topo-layout', lay);
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, layout);
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const sessions = FLEET.map((f, i) => ({
+      alias: f.alias, status: i % 5 === 0 ? 'working' : 'idle', network_id: nid,
+      project_dir: f.project_dir ?? null,
+      created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z', last_seen_at: new Date().toISOString(),
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('g[data-node]').length > 20;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(800);
+
+  const data = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    // node status rings: stroke-width 3 (online) / 1.5 (offline), centred on the node
+    const nodes = [...svg.querySelectorAll('g[data-node]')].map(g => {
+      const ring = g.querySelector('circle[stroke-width="3"], circle[stroke-width="1.5"]');
+      if (!ring) return null;
+      return { alias: g.getAttribute('data-node'), cx: +ring.getAttribute('cx'), cy: +ring.getAttribute('cy'), r: +ring.getAttribute('r') };
+    }).filter(Boolean);
+    // overlay panels (direct svg children, fixed)
+    const panels = [...svg.querySelectorAll(':scope > g[transform^="translate(28, 34)"], :scope > g[transform^="translate(720, 34)"]')].map(g => {
+      const m = g.getAttribute('transform').match(/translate\(([\d.]+),\s*([\d.]+)\)/);
+      const rect = g.querySelector('rect');
+      return { x: +m[1], y: +m[2], w: +rect.getAttribute('width'), h: +rect.getAttribute('height') };
+    });
+    // group boxes + their label text bounding boxes
+    const groups = [...svg.querySelectorAll('g[data-group]')].map(g => {
+      const rect = g.querySelector('rect');
+      const text = g.querySelector('text');
+      const bb = text.getBBox();
+      return {
+        box: { x: +rect.getAttribute('x'), y: +rect.getAttribute('y'), w: +rect.getAttribute('width'), h: +rect.getAttribute('height') },
+        label: { x: bb.x, y: bb.y, w: bb.width, h: bb.height },
+      };
+    });
+    return { nodes, panels, groups };
+  });
+
+  const TOL = 2; // px slack — touching edges is fine, real overlap is not
+  let nodeNode = 0, nodePanel = 0, nodeLabel = 0, boxBox = 0;
+
+  // node ↔ node
+  for (let i = 0; i < data.nodes.length; i++) {
+    for (let j = i + 1; j < data.nodes.length; j++) {
+      const a = data.nodes[i], b = data.nodes[j];
+      const d = Math.hypot(a.cx - b.cx, a.cy - b.cy);
+      if (d < a.r + b.r - TOL) nodeNode++;
+    }
+  }
+  // node ↔ panel  (circle vs rect)
+  for (const n of data.nodes) {
+    for (const p of data.panels) {
+      const qx = Math.max(p.x, Math.min(n.cx, p.x + p.w));
+      const qy = Math.max(p.y, Math.min(n.cy, p.y + p.h));
+      if (Math.hypot(n.cx - qx, n.cy - qy) < n.r - TOL) nodePanel++;
+    }
+  }
+  // node ↔ group label  (circle vs label text bbox)
+  for (const n of data.nodes) {
+    for (const g of data.groups) {
+      const L = g.label;
+      const qx = Math.max(L.x, Math.min(n.cx, L.x + L.w));
+      const qy = Math.max(L.y, Math.min(n.cy, L.y + L.h));
+      if (Math.hypot(n.cx - qx, n.cy - qy) < n.r - TOL) nodeLabel++;
+    }
+  }
+  // group box ↔ group box
+  for (let i = 0; i < data.groups.length; i++) {
+    for (let j = i + 1; j < data.groups.length; j++) {
+      const a = data.groups[i].box, b = data.groups[j].box;
+      if (overlaps1D(a.x, a.x + a.w, b.x, b.x + b.w, TOL) &&
+          overlaps1D(a.y, a.y + a.h, b.y, b.y + b.h, TOL)) boxBox++;
+    }
+  }
+
+  await page.screenshot({ path: `/tmp/anet-issue-112/overlap-${layout}.png` });
+  await ctx.close();
+  const ok = nodeNode === 0 && nodePanel === 0 && nodeLabel === 0 && boxBox === 0;
+  console.log(`${ok ? '✅' : '❌'} [${layout}] nodes=${data.nodes.length} groups=${data.groups.length} — ` +
+    `node↔node:${nodeNode} node↔panel:${nodePanel} node↔label:${nodeLabel} box↔box:${boxBox}`);
+  return ok;
+}
+
+const all = [];
+all.push(await check('grid'));
+all.push(await check('ring'));
+await browser.close();
+const pass = all.every(Boolean);
+console.log(pass ? '\n✅ ZERO OVERLAP' : '\n❌ OVERLAP DETECTED');
+process.exit(pass ? 0 : 1);

package/scripts/topo-p0round-test.mjs

@@ -0,0 +1,166 @@
+/* Combined verification for the #112 + #113 + #111-workdir round:
+ *  #111-workdir — nodes sharing a project_dir group together (diff prefix)
+ *  #112         — grid nodes are never occluded by the overlay panels
+ *  #113         — S/M/L node-size control resizes nodes + persists */
+import { chromium } from 'playwright';
+import { readFileSync, mkdirSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+mkdirSync('/tmp/anet-issue-112', { recursive: true });
+const browser = await chromium.launch({ headless: true });
+
+async function load(theme, layout, fleet, pinScale) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(({ th, lay, pin }) => {
+    try {
+      localStorage.setItem('anet-theme', th);
+      localStorage.removeItem('anet-brand');
+      localStorage.removeItem('anet-topo-view');
+      localStorage.setItem('anet-topo-layout', lay);
+      if (pin) localStorage.setItem('anet-topo-nodescale', pin);
+      else localStorage.removeItem('anet-topo-nodescale');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, { th: theme, lay: layout, pin: pinScale });
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const sessions = fleet.map(f => ({
+      alias: f.alias, status: 'idle', network_id: nid, project_dir: f.project_dir ?? null,
+      created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z', last_seen_at: '2026-05-15T00:00:00Z',
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('g[data-node]').length > 0;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(700);
+  return { ctx, page };
+}
+
+const results = {};
+
+// --- #111-workdir: same project_dir, different prefixes → one group ---
+{
+  const fleet = [
+    { alias: 'aaa', project_dir: '/home/v/ai-insight' },
+    { alias: 'mmm', project_dir: '/home/v/ai-insight' },
+    { alias: 'zzz', project_dir: '/home/v/ai-insight' },
+    { alias: 'solo', project_dir: '/home/v/other-proj' }, // singleton dir
+  ];
+  const { ctx, page } = await load('cyber', 'grid', fleet);
+  const groups = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-group]', els => els.map(e => e.getAttribute('data-group')));
+  // aaa/mmm/zzz share ai-insight → one group labelled 'ai-insight'; solo alone → no box
+  results.workdirGroups = groups.length === 1 && groups[0] === 'ai-insight';
+  await ctx.close();
+}
+
+// --- #112: grid nodes never occluded by the overlay panels ---
+{
+  const fleet = Array.from({ length: 22 }, (_, i) => ({ alias: `A站${i + 1}号` }));
+  const { ctx, page } = await load('cyber', 'grid', fleet, '1');
+  results.panelOcclusion = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    // overlay panels: <g transform="translate(28, 34)"> and translate(720, 34)
+    const panels = [...svg.querySelectorAll(':scope > g[transform^="translate(16, 16)"], :scope > g[transform^="translate(760, 16)"]')]
+      .map(g => {
+        const m = g.getAttribute('transform').match(/translate\(([\d.]+),\s*([\d.]+)\)/);
+        const rect = g.querySelector('rect');
+        const tx = +m[1], ty = +m[2];
+        return { x: tx, y: ty, w: +rect.getAttribute('width'), h: +rect.getAttribute('height') };
+      });
+    if (panels.length !== 2) return false;
+    // node centres (any circle in the node <g> shares the node centre)
+    let clear = true;
+    for (const g of svg.querySelectorAll('g[data-node]')) {
+      const c = g.querySelector('circle');
+      if (!c) continue;
+      const cx = +c.getAttribute('cx'), cy = +c.getAttribute('cy');
+      for (const p of panels) {
+        // occluded if the centre is inside the panel rect expanded by ~28px
+        if (cx > p.x - 28 && cx < p.x + p.w + 28 && cy > p.y - 28 && cy < p.y + p.h + 28) clear = false;
+      }
+    }
+    return clear;
+  });
+  // panels exist and are OUTSIDE the zoom/pan transform group (direct svg children)
+  results.panelsOutsideTransform = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    const panels = [...svg.querySelectorAll(':scope > g[transform^="translate(16, 16)"], :scope > g[transform^="translate(760, 16)"]')];
+    return panels.length === 2; // :scope > = direct children, not inside the view <g>
+  });
+  await page.screenshot({ path: '/tmp/anet-issue-112/grid-occlusion.png' });
+  await ctx.close();
+}
+
+// --- #113: S/M/L node-size control resizes + persists ---
+{
+  const fleet = Array.from({ length: 8 }, (_, i) => ({ alias: `node${i + 1}` }));
+  const { ctx, page } = await load('cyber', 'grid', fleet); // no pin → default M
+  const onlineR = () => page.$$eval('svg[viewBox="0 0 1000 680"] g[data-node] circle[stroke-width="3"]',
+    els => els.length ? +els[0].getAttribute('r') : null);
+  const rM = await onlineR();                       // default M = round(26*0.84)=22
+  await page.locator('button[title="Node size: small"]').click();
+  await page.waitForTimeout(300);
+  const rS = await onlineR();                       // S = round(26*0.7)=18
+  await page.locator('button[title="Node size: large"]').click();
+  await page.waitForTimeout(300);
+  const rL = await onlineR();                       // L = 26
+  results.sizeMDefault = rM === 22;
+  results.sizeShrinks = rS === 18 && rS < rM;
+  results.sizeGrows = rL === 26 && rL > rM;
+  results.sizePersists = (await page.evaluate(() => localStorage.getItem('anet-topo-nodescale'))) === '1';
+  await ctx.close();
+}
+
+// --- #112 umbrella: ghost age-out — offline >24h is dropped from the topo ---
+{
+  const dayAgo = new Date(Date.now() - 26 * 60 * 60 * 1000).toISOString();
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  const ctx = await browser.newContext({ viewport: { width: 1280, 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 {}
+  });
+  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';
+    await route.fulfill({ response: r, json: { ...b, sessions: [
+      { alias: 'alive-1', status: 'idle', network_id: nid, last_seen_at: fresh, created_at: fresh, updated_at: fresh },
+      { alias: 'recently-offline', status: 'offline', network_id: nid, last_seen_at: fresh, created_at: fresh, updated_at: fresh },
+      { alias: 'ghost-deleted', status: 'offline', network_id: nid, last_seen_at: dayAgo, created_at: dayAgo, updated_at: dayAgo },
+    ] } });
+  });
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('g[data-node]').length > 0;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(600);
+  const nodes = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-node]', els => els.map(e => e.getAttribute('data-node')));
+  results.ghostAgedOut = nodes.includes('alive-1') && nodes.includes('recently-offline') && !nodes.includes('ghost-deleted');
+  await ctx.close();
+}
+
+await browser.close();
+const ok = results.workdirGroups && results.panelOcclusion && results.panelsOutsideTransform &&
+  results.sizeMDefault && results.sizeShrinks && results.sizeGrows && results.sizePersists &&
+  results.ghostAgedOut;
+console.log(`${ok ? '✅' : '❌'} #112+#113+#111-workdir:`, JSON.stringify(results));
+process.exit(ok ? 0 : 1);

package/scripts/topo-rename-test.mjs

@@ -0,0 +1,107 @@
+/* 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-vendor-test.mjs

@@ -0,0 +1,97 @@
+/* Issue #96 verification: node visual identity — vendor avatar + runtime
+ * badge. Mocks /api/hub/status with model/runtime fields and checks the
+ * TopoGraph node rendering picks the right avatar + badge + tooltip. */
+import { chromium } from 'playwright';
+import { readFileSync, mkdirSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+mkdirSync('/tmp/anet-issue-96', { recursive: true });
+const browser = await chromium.launch({ headless: true });
+
+// alias → { model, runtime } — one node per vendor + runtime + a null-model node
+const FLEET = [
+  { alias: 'intern-1',  model: 'intern-s1-pro',   runtime: 'claude-code-cli' },
+  { alias: 'minimax-1', model: 'MiniMax-Text-01', runtime: 'codex-sdk' },
+  { alias: 'claude-1',  model: 'claude-opus-4',   runtime: 'claude-agent-sdk' },
+  { alias: 'openai-1',  model: 'gpt-4o',          runtime: 'http-api' },
+  { alias: 'legacy-1',  model: null,              runtime: null },
+];
+
+async function run(theme) {
+  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((th) => {
+    try {
+      localStorage.setItem('anet-theme', th);
+localStorage.setItem('anet-topo-nodescale', '1');
+      localStorage.removeItem('anet-brand');
+      localStorage.removeItem('anet-topo-view');
+      localStorage.setItem('anet-topo-layout', 'grid');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, theme);
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const sessions = FLEET.map(f => ({
+      alias: f.alias, status: 'idle', network_id: nid, model: f.model, runtime: f.runtime,
+      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 } });
+  });
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('circle[r="26"]').length > 0;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(700);
+
+  const results = {};
+  const svg = 'svg[viewBox="0 0 1000 680"]';
+
+  // intern model → <image> avatar (intern_avatar.png)
+  results.internUsesImage = await page.locator(`${svg} image[href="/intern_avatar.png"]`).count() >= 1;
+
+  // vendor monograms — minimax 'M' / anthropic 'A' / openai 'O' present as avatar text
+  const texts = await page.$$eval(`${svg} text`, els => els.map(e => (e.textContent || '').trim()));
+  results.minimaxMonogram = texts.includes('M');
+  results.anthropicMonogram = texts.includes('A');
+  results.openaiMonogram = texts.includes('O');
+  // legacy null-model node → alias-hue initial 'L' (not a vendor monogram)
+  results.legacyAliasInitial = texts.includes('L');
+
+  // runtime badges: 4 nodes have a runtime → 4 badge groups. Badge = a small
+  // circle stroked in a runtime colour. Count distinct runtime stroke colours.
+  const badgeColors = await page.$$eval(`${svg} circle`, els =>
+    els.map(e => e.getAttribute('stroke'))
+       .filter(s => ['#a78bfa', '#38bdf8', '#34d399', '#fbbf24'].includes(s)));
+  results.runtimeBadges = new Set(badgeColors).size === 4;
+
+  // <title> tooltip carries the identity line for a vendor node
+  results.tooltipHasIdentity = await page.evaluate(() => {
+    const titles = [...document.querySelectorAll('svg[viewBox="0 0 1000 680"] g > title')]
+      .map(t => t.textContent || '');
+    return titles.some(t => /Anthropic · claude-opus-4 · Claude Agent SDK/.test(t));
+  });
+
+  await page.screenshot({ path: `/tmp/anet-issue-96/vendor-${theme}.png` });
+  await ctx.close();
+
+  const ok = results.internUsesImage && results.minimaxMonogram && results.anthropicMonogram &&
+    results.openaiMonogram && results.legacyAliasInitial && results.runtimeBadges &&
+    results.tooltipHasIdentity;
+  console.log(`${ok ? '✅' : '❌'} [${theme}]:`, JSON.stringify(results));
+  return ok;
+}
+
+const all = [];
+all.push(await run('cyber'));
+all.push(await run('light'));
+await browser.close();
+const pass = all.every(Boolean);
+console.log(pass ? '\n✅ ALL PASS' : '\n❌ FAIL');
+process.exit(pass ? 0 : 1);

package/.next/build/chunks/[turbopack-node]_transforms_postcss_ts_06e.r3r._.js

@@ -1,13 +0,0 @@
-module.exports = [
-"[turbopack-node]/transforms/postcss.ts { CONFIG => \"[project]/postcss.config.mjs [postcss] (ecmascript)\" } [postcss] (ecmascript, async loader)", ((__turbopack_context__) => {
-
-__turbopack_context__.v((parentImport) => {
-    return Promise.all([
-  "chunks/node_modules_13sb.px._.js",
-  "chunks/[root-of-the-server]__0d-m0h0._.js"
-].map((chunk) => __turbopack_context__.l(chunk))).then(() => {
-        return parentImport("[turbopack-node]/transforms/postcss.ts { CONFIG => \"[project]/postcss.config.mjs [postcss] (ecmascript)\" } [postcss] (ecmascript)");
-    });
-});
-}),
-];