@sleep2agi/agent-network-dashboard 0.5.3-preview.260 → 0.5.3-preview.262

package/app/lib/vendorIdentity.ts

@@ -33,70 +33,88 @@ const UNKNOWN_VENDOR: VendorIdentity = {
   logo: null,
 };
 
+// Vendor identities, named so both the model-prefix rules and the
+// runtime fallback map below can reference the same object.
+const INTERN_VENDOR: VendorIdentity = {
+  id: 'intern',
+  label: '书生 · 上海 AI 实验室',
+  mono: { bg: 'hsl(28 38% 24%)', ring: 'hsl(32 45% 52%)', text: 'hsl(34 60% 82%)' },
+  initial: '书',
+  // #79 shipped this asset — reuse it as the 书生 vendor logo.
+  logo: '/intern_avatar.png',
+};
+const MINIMAX_VENDOR: VendorIdentity = {
+  id: 'minimax',
+  label: 'MiniMax',
+  mono: { bg: 'hsl(18 50% 26%)', ring: 'hsl(18 65% 52%)', text: 'hsl(20 80% 82%)' },
+  initial: 'M',
+  // Official MiniMax mark (simple-icons set, CC0) on a warm-red tinted
+  // badge. Vincent-authorized 2026-05-21 to use real vendor marks.
+  logo: '/vendors/minimax.svg',
+};
+const ANTHROPIC_VENDOR: VendorIdentity = {
+  id: 'anthropic',
+  label: 'Anthropic',
+  mono: { bg: 'hsl(16 32% 26%)', ring: 'hsl(16 48% 54%)', text: 'hsl(18 60% 84%)' },
+  initial: 'A',
+  // Official Anthropic mark (simple-icons set, CC0) on a warm-orange
+  // tinted badge. Vincent-authorized 2026-05-21 to use real vendor marks.
+  logo: '/vendors/claude.svg',
+};
+const OPENAI_VENDOR: VendorIdentity = {
+  id: 'openai',
+  label: 'OpenAI',
+  mono: { bg: 'hsl(165 26% 22%)', ring: 'hsl(165 40% 44%)', text: 'hsl(165 45% 80%)' },
+  initial: 'O',
+  // Official OpenAI mark (simple-icons set, CC0) on a teal tinted
+  // badge. Vincent-authorized 2026-05-21 to use real vendor marks.
+  logo: '/vendors/openai.svg',
+};
+
 // Ordered prefix rules — first match wins. `test` runs against a lowercased
 // model id. Keep the most specific prefixes first.
 const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity }> = [
-  {
-    test: (m) => m.startsWith('intern'),
-    vendor: {
-      id: 'intern',
-      label: '书生 · 上海 AI 实验室',
-      mono: { bg: 'hsl(28 38% 24%)', ring: 'hsl(32 45% 52%)', text: 'hsl(34 60% 82%)' },
-      initial: '书',
-      // #79 shipped this asset — reuse it as the 书生 vendor logo.
-      logo: '/intern_avatar.png',
-    },
-  },
-  {
-    test: (m) => m.startsWith('minimax'),
-    vendor: {
-      id: 'minimax',
-      label: 'MiniMax',
-      mono: { bg: 'hsl(18 50% 26%)', ring: 'hsl(18 65% 52%)', text: 'hsl(20 80% 82%)' },
-      initial: 'M',
-      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
-      // the MiniMax trademark; geometric min/max zigzag in their warm-
-      // red palette. Replaces plain-letter "M" fallback.
-      logo: '/vendors/minimax.svg',
-    },
-  },
-  {
-    test: (m) => m.startsWith('claude'),
-    vendor: {
-      id: 'anthropic',
-      label: 'Anthropic',
-      mono: { bg: 'hsl(16 32% 26%)', ring: 'hsl(16 48% 54%)', text: 'hsl(18 60% 84%)' },
-      initial: 'A',
-      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
-      // the Anthropic trademark; 4-pointed sparkle in their warm-orange
-      // palette evokes AI/Claude without imitating the official mark.
-      // Real Anthropic logo still pending Vincent-direct asset OK.
-      logo: '/vendors/claude.svg',
-    },
-  },
+  { test: (m) => m.startsWith('intern'), vendor: INTERN_VENDOR },
+  { test: (m) => m.startsWith('minimax'), vendor: MINIMAX_VENDOR },
+  { test: (m) => m.startsWith('claude'), vendor: ANTHROPIC_VENDOR },
   {
     test: (m) => m.startsWith('gpt') || m.startsWith('codex') || m.startsWith('o1') || m.startsWith('o3') || m.startsWith('o4'),
-    vendor: {
-      id: 'openai',
-      label: 'OpenAI',
-      mono: { bg: 'hsl(165 26% 22%)', ring: 'hsl(165 40% 44%)', text: 'hsl(165 45% 80%)' },
-      initial: 'O',
-      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
-      // the OpenAI trademark; hexagonal frame + center dot in their
-      // teal palette evokes geometric AI lattice without imitating the
-      // knot. Real OpenAI logo still pending Vincent-direct asset OK.
-      logo: '/vendors/openai.svg',
-    },
+    vendor: OPENAI_VENDOR,
   },
 ];
 
-/** Resolve a model id to its vendor identity. `null` / unmatched → UNKNOWN. */
-export function vendorForModel(model: string | null | undefined): VendorIdentity {
-  if (!model) return UNKNOWN_VENDOR;
-  const m = model.toLowerCase();
-  for (const rule of VENDOR_RULES) {
-    if (rule.test(m)) return rule.vendor;
+/* Runtime → vendor fallback. Used only when the `model` field can't
+ * resolve a vendor (null or unmatched).
+ *
+ * Why this exists: live hub /api/status probe (2026-05-21) showed 62%
+ * of sessions report `model: null` — including ALL claude-code-cli
+ * nodes — so the avatar fell back to the dark "unknown vendor"
+ * monogram for most of the fleet. The `runtime` field, by contrast,
+ * is reliably populated. A claude-code-cli / claude-agent-sdk node is
+ * an Anthropic shell; codex-sdk is OpenAI's. Deriving the vendor from
+ * runtime when the model is silent lights up the vendor logo for the
+ * whole fleet instead of leaving it grey. The model still wins when
+ * present — runtime is strictly the fallback. */
+const RUNTIME_VENDOR: Record<string, VendorIdentity> = {
+  'claude-code-cli': ANTHROPIC_VENDOR,
+  'claude-agent-sdk': ANTHROPIC_VENDOR,
+  'codex-sdk': OPENAI_VENDOR,
+};
+
+/** Resolve a node's vendor identity. Model id wins; when the model is
+ *  null or unmatched, fall back to the execution runtime. Both silent
+ *  → UNKNOWN. */
+export function vendorForModel(
+  model: string | null | undefined,
+  runtime?: string | null | undefined,
+): VendorIdentity {
+  if (model) {
+    const m = model.toLowerCase();
+    for (const rule of VENDOR_RULES) {
+      if (rule.test(m)) return rule.vendor;
+    }
   }
+  if (runtime && RUNTIME_VENDOR[runtime]) return RUNTIME_VENDOR[runtime];
   return UNKNOWN_VENDOR;
 }
 
@@ -146,7 +164,7 @@ export function runtimeIdentity(runtime: string | null | undefined): RuntimeIden
 /** Compact one-line identity for hover / detail surfaces:
  *  "Anthropic · claude-opus-4 · Claude Code CLI". Pieces with no data drop. */
 export function identityLine(model: string | null | undefined, runtime: string | null | undefined): string {
-  const v = vendorForModel(model);
+  const v = vendorForModel(model, runtime);
   const r = runtimeIdentity(runtime);
   const parts: string[] = [];
   if (v.id !== 'unknown') parts.push(v.label);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.5.3-preview.260",
+  "version": "0.5.3-preview.262",
   "description": "Agent Network Dashboard \u2014 Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/public/vendors/claude.svg

@@ -1,11 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <!-- Anthropic / Claude vendor mark.
-       NOT a copy of the Anthropic trademark — custom designed badge
-       in warm-orange palette. 4-rayed sparkle = "AI spark of insight".
-       Real Anthropic logo asset still gated on Vincent-direct. -->
-  <circle cx="32" cy="32" r="32" fill="hsl(16 32% 22%)" />
-  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(16 48% 54%)" stroke-width="2" />
-  <g fill="hsl(20 80% 78%)" transform="translate(32 32)">
-    <path d="M 0 -18 L 4 -4 L 18 0 L 4 4 L 0 18 L -4 4 L -18 0 L -4 -4 Z" />
+  <!-- Anthropic vendor mark — official Anthropic logo (simple-icons set, CC0).
+       Vincent-authorized 2026-05-21 to use real vendor marks. Tinted circular
+       badge frames the official mark for the dashboard node-avatar context. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(16 32% 22%)"/>
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(16 48% 54%)" stroke-width="2"/>
+  <g transform="translate(16 16) scale(1.333)" fill="hsl(20 80% 82%)">
+    <path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/>
   </g>
 </svg>

package/public/vendors/minimax.svg

@@ -1,11 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <!-- MiniMax vendor mark. NOT a copy of the MiniMax trademark —
-       custom designed badge: angular min/max zigzag in warm-red
-       palette evokes the function-shape without imitating the official
-       mark. Real MiniMax logo asset still gated on Vincent-direct. -->
-  <circle cx="32" cy="32" r="32" fill="hsl(18 50% 22%)" />
-  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(18 65% 52%)" stroke-width="2" />
-  <polyline points="14,42 22,22 32,42 42,22 50,42"
-            fill="none" stroke="hsl(20 80% 80%)" stroke-width="4"
-            stroke-linecap="round" stroke-linejoin="round" />
+  <!-- MiniMax vendor mark — official MiniMax logo (simple-icons set, CC0).
+       Vincent-authorized 2026-05-21 to use real vendor marks. Tinted circular
+       badge frames the official mark for the dashboard node-avatar context. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(18 50% 22%)"/>
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(18 65% 52%)" stroke-width="2"/>
+  <g transform="translate(16 16) scale(1.333)" fill="hsl(20 80% 84%)">
+    <path d="M11.43 3.92a.86.86 0 1 0-1.718 0v14.236a1.999 1.999 0 0 1-3.997 0V9.022a.86.86 0 1 0-1.718 0v3.87a1.999 1.999 0 0 1-3.997 0V11.49a.57.57 0 0 1 1.139 0v1.404a.86.86 0 0 0 1.719 0V9.022a1.999 1.999 0 0 1 3.997 0v9.134a.86.86 0 0 0 1.719 0V3.92a1.998 1.998 0 1 1 3.996 0v11.788a.57.57 0 1 1-1.139 0zm10.572 3.105a2 2 0 0 0-1.999 1.997v7.63a.86.86 0 0 1-1.718 0V3.923a1.999 1.999 0 0 0-3.997 0v16.16a.86.86 0 0 1-1.719 0V18.08a.57.57 0 1 0-1.138 0v2a1.998 1.998 0 0 0 3.996 0V3.92a.86.86 0 0 1 1.719 0v12.73a1.999 1.999 0 0 0 3.996 0V9.023a.86.86 0 1 1 1.72 0v6.686a.57.57 0 0 0 1.138 0V9.022a2 2 0 0 0-1.998-1.997"/>
+  </g>
 </svg>

package/public/vendors/openai.svg

@@ -1,12 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <!-- OpenAI / GPT / Codex vendor mark. NOT a copy of the OpenAI
-       trademark — custom designed badge: hexagonal frame + center dot
-       in teal palette evokes "geometric AI lattice" without imitating
-       the OpenAI knot. Real OpenAI logo asset still gated on Vincent-
-       direct. -->
-  <circle cx="32" cy="32" r="32" fill="hsl(165 26% 20%)" />
-  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(165 40% 44%)" stroke-width="2" />
-  <polygon points="32,12 47,21 47,43 32,52 17,43 17,21"
-           fill="none" stroke="hsl(165 50% 78%)" stroke-width="3" stroke-linejoin="round" />
-  <circle cx="32" cy="32" r="4" fill="hsl(165 50% 78%)" />
+  <!-- OpenAI vendor mark — official OpenAI logo (simple-icons set, CC0).
+       Vincent-authorized 2026-05-21 to use real vendor marks. Tinted circular
+       badge frames the official mark for the dashboard node-avatar context. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(165 26% 20%)"/>
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(165 40% 44%)" stroke-width="2"/>
+  <g transform="translate(16 16) scale(1.333)" fill="hsl(165 50% 82%)">
+    <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/>
+  </g>
 </svg>

package/scripts/topo-overlap-test.mjs

@@ -14,15 +14,26 @@ const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8'))
 mkdirSync('/tmp/anet-issue-112', { recursive: true });
 const browser = await chromium.launch({ headless: true });
 
-// ~30 nodes: 4 prefix groups + a workdir group + singletons
+// ~30 nodes: 4 prefix groups + a workdir group + singletons.
+// #170 tree-view MVP — the fleet now also carries `runtime` so the org-
+// chart layout can derive team leads (claude-code-cli) and deputies
+// (codex-sdk). The first node in each prefix group is the cli lead, the
+// second is the codex deputy; the rest are plain members. ring/grid
+// ignore `runtime` so their overlap geometry is unchanged.
+const lead = (a) => ({ alias: a, runtime: 'claude-code-cli' });
+const dep = (a) => ({ alias: a, runtime: 'codex-sdk' });
+const mem = (a) => ({ alias: a, runtime: 'claude-agent-sdk' });
 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 })),
-];
+  // commander roots — exercise the layer-0 / layer-1 derivation
+  lead('总指挥'), lead('副指挥A'), lead('副指挥B'),
+  [lead, dep, mem, mem, mem, mem].map((f, i) => f(['A站内容', 'A站评测', 'A站数据', 'A站设计', 'A站运营', 'A站工程'][i])),
+  [lead, dep, mem, mem, mem].map((f, i) => f(['B站产品', 'B站工程', 'B站测试', 'B站运维', 'B站运营'][i])),
+  [lead, dep, mem, mem].map((f, i) => f(['P站产品', 'P站工程', 'P站测试', 'P站运维'][i])),
+  [lead, dep, mem, mem].map((f, i) => f(['通信龙', '通信牛', '通信马', '通信SDK马'][i])),
+  ['srv-a', 'srv-b', 'srv-c'].map(a => ({ alias: a, runtime: 'http-api', project_dir: '/home/v/agent-orchestra' })),
+  // orphan singletons — collected into the 未分组 bucket in tree mode
+  ['群星马', '书生1号', '微信马', '飞书马', '独立节点', '研究员1号', '研究员2号', '游侠马'].map(a => mem(a)),
+].flat();
 
 const overlaps1D = (a0, a1, b0, b1, tol) => a0 < b1 - tol && b0 < a1 - tol;
 
@@ -46,6 +57,7 @@ async function check(layout) {
     const sessions = FLEET.map((f, i) => ({
       alias: f.alias, status: i % 5 === 0 ? 'working' : 'idle', network_id: nid,
       project_dir: f.project_dir ?? null,
+      runtime: f.runtime ?? 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 } });
@@ -189,6 +201,8 @@ async function check(layout) {
 const all = [];
 all.push(await check('grid'));
 all.push(await check('ring'));
+// #170 tree-view MVP — the org-chart layout must be zero-overlap too.
+all.push(await check('tree'));
 await browser.close();
 // R463: any non-boolean return is a sentinel (e.g. { stale: true }
 // from the zombie-build guard). Treat as a hard fail — collision

package/scripts/topo-tree-diag.mjs

@@ -0,0 +1,95 @@
+/* Diagnostic: compare grid vs tree node frontend presentation.
+ * Vincent UX complaint — tree view "没有像 grid 视图那样的前端展示".
+ * Screenshots both layouts + dumps per-node visual element counts. */
+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-tree-diag', { recursive: true });
+
+const lead = (a) => ({ alias: a, runtime: 'claude-code-cli' });
+const dep = (a) => ({ alias: a, runtime: 'codex-sdk' });
+const mem = (a) => ({ alias: a, runtime: 'claude-agent-sdk' });
+const FLEET = [
+  lead('总指挥'), lead('副指挥A'), lead('副指挥B'),
+  [lead, dep, mem, mem, mem, mem].map((f, i) => f(['A站内容', 'A站评测', 'A站数据', 'A站设计', 'A站运营', 'A站工程'][i])),
+  [lead, dep, mem, mem, mem].map((f, i) => f(['B站产品', 'B站工程', 'B站测试', 'B站运维', 'B站运营'][i])),
+  [lead, dep, mem, mem].map((f, i) => f(['P站产品', 'P站工程', 'P站测试', 'P站运维'][i])),
+  [lead, dep, mem, mem].map((f, i) => f(['通信龙', '通信牛', '通信马', '通信SDK马'][i])),
+  ['srv-a', 'srv-b', 'srv-c'].map(a => ({ alias: a, runtime: 'http-api', project_dir: '/home/v/agent-orchestra' })),
+  ['群星马', '书生1号', '微信马', '飞书马', '独立节点', '研究员1号', '研究员2号', '游侠马'].map(a => mem(a)),
+].flat();
+
+const browser = await chromium.launch({ headless: true });
+
+async function shot(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');
+      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, runtime: f.runtime ?? 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(1200);
+  await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    svg?.scrollIntoView({ behavior: 'instant', block: 'center' });
+  });
+  await page.waitForTimeout(500);
+
+  const facts = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    const nodes = [...svg.querySelectorAll('g[data-node]')];
+    const sample = nodes.slice(0, 3).map(g => ({
+      alias: g.getAttribute('data-node'),
+      circles: g.querySelectorAll('circle').length,
+      images: g.querySelectorAll('image').length,
+      texts: g.querySelectorAll('text').length,
+      paths: g.querySelectorAll('path').length,
+    }));
+    const viewG = svg.querySelector('g[data-topo-viewport], g[transform*="scale"]');
+    const groups = svg.querySelectorAll('g[data-group]').length;
+    return {
+      nodeCount: nodes.length,
+      groupBoxes: groups,
+      viewportTransform: viewG ? viewG.getAttribute('transform') : null,
+      sample,
+    };
+  });
+  const svgEl = await page.$('svg[viewBox="0 0 1000 680"]');
+  await svgEl.screenshot({ path: `/tmp/anet-tree-diag/${layout}.png`, animations: 'disabled' });
+  await ctx.close();
+  return facts;
+}
+
+for (const lay of ['grid', 'tree']) {
+  const f = await shot(lay);
+  console.log(`\n=== ${lay} ===`);
+  console.log(JSON.stringify(f, null, 2));
+}
+await browser.close();
+console.log('\nscreenshots: /tmp/anet-tree-diag/{grid,tree}.png');