@sleep2agi/agent-network-dashboard 0.4.6-preview.3 → 0.4.6-preview.5

package/app/components/TopoGraph.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Session } from './types';
 import { aliasAvatarColors, aliasInitial } from './AliasAvatar';
 import { ChatPopover } from './ChatPopover';
+import { vendorForModel, runtimeIdentity, identityLine } from '../lib/vendorIdentity';
 
 interface MessageFlow {
   from_alias: string;
@@ -15,6 +16,9 @@ interface MessageFlow {
 interface TopoGraphProps {
   sessions: Session[];
   sseSessions: Record<string, number>;
+  // #84: a node.renamed event from the Overview's SSE listener. When the
+  // currently open chat popover targets `from`, it follows the rename to `to`.
+  renameSignal?: { from: string; to: string; ts: number } | null;
 }
 
 interface Point {
@@ -283,7 +287,7 @@ function buildFlowLinks(messages: MessageFlow[], positions: Record<string, Point
   return [...links.values()].slice(0, 18);
 }
 
-export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
+export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProps) {
   const theme = useTheme();
   const isLight = theme === 'light';
   const pal = isLight ? LIGHT_PALETTE : DARK_PALETTE;
@@ -485,6 +489,16 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
   // Issue #100: singleton chat popover. One alias at a time — clicking
   // another node swaps the target and the conversation switches in place.
   const [chatAlias, setChatAlias] = useState<string | null>(null);
+  // #84: when a node is renamed while its chat popover is open, follow the
+  // rename so the conversation keeps targeting a live alias.
+  useEffect(() => {
+    if (renameSignal && renameSignal.from === chatAlias) {
+      setChatAlias(renameSignal.to);
+    }
+    // chatAlias intentionally omitted — only react to a new rename signal,
+    // not to the user opening/closing the popover.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [renameSignal]);
 
   useEffect(() => { viewRef.current = view; }, [view]);
 
@@ -908,6 +922,10 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                 onPointerLeave={() => denseLayout && setHoveredAlias(prev => (prev === session.alias ? null : prev))}
                 onClick={() => setChatAlias(session.alias)}
               >
+                {/* Issue #96: native hover tooltip — "Vendor · model · Runtime".
+                    Falls back to just the alias when the node reports no
+                    model/runtime. */}
+                <title>{identityLine(session.model, session.runtime) || session.alias}</title>
                 {isActive && (
                   <circle cx={pos.x} cy={pos.y} r={radius + 14} fill={status.primary} opacity={isLight ? 0.08 : 0.12}>
                     <animate attributeName="r" values={`${radius + 8};${radius + 22};${radius + 8}`} dur="2.4s" repeatCount="indefinite" />
@@ -925,33 +943,26 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                   strokeDasharray={isOnline ? 'none' : '5 5'}
                   filter={isOnline && !isLight ? 'url(#topo-glow)' : undefined}
                 />
-                {/* Round 99 (issue #79): node "avatar" — hue-hashed
-                    initials circle inside the status ring. Round 100:
-                    when brand=intern, swap the initials for the 书小生
-                    mascot image (asset from 群星马 task 51dd0d1d). The
-                    image already has a transparent bg so it sits cleanly
-                    on the node's dark/light fill; the outer status ring
-                    still carries working/idle/etc. */}
+                {/* Issue #96: node "avatar" is now driven by the model
+                    vendor. Decision order:
+                      1. ?brand=intern flag, or an intern-aliased node with
+                         no model field → 书生 coin (preserves #79).
+                      2. vendor has a packaged logo asset → that logo image
+                         (intern-s1-* models land here via vendorForModel).
+                      3. known vendor, logo asset not shipped yet → a
+                         vendor-tinted monogram (spec-mandated fallback).
+                      4. unknown vendor / null model → the prefix-group
+                         hue-hashed initial (#83/#99 behaviour, unchanged). */}
                 {(() => {
                   const ar = isOnline ? 14 : 10;
-                  // Round 108 (issue #79 reopened): show the 书小生 avatar
-                  // coin for any agent whose alias marks it as an Intern /
-                  // 书生 runtime — not only under the global ?brand=intern
-                  // flag. Vincent 4565: a fleet of 书生N号 nodes should SHOW
-                  // 书生, not a generic "书" initial. ?brand=intern still
-                  // forces the coin on every node (full brand showcase).
-                  const isInternNode = isIntern || /书生|书小生|intern/i.test(session.alias);
-                  if (isInternNode) {
-                    // Round 102: self-contained "avatar coin" — 书小生 figure
-                    // keyed off its white background and composited onto a
-                    // cream circular backplate. The cream coin gives the
-                    // dark-haired figure consistent contrast on BOTH the
-                    // dark cyber theme and light theme. Render at the node
-                    // diameter so the coin fills inside the status ring.
-                    const size = radius * 2;
+                  const size = radius * 2;
+                  const vendor = vendorForModel(session.model);
+                  const internByAlias = /书生|书小生|intern/i.test(session.alias);
+
+                  if (isIntern || internByAlias || vendor.logo) {
                     return (
                       <image
-                        href="/intern_avatar.png"
+                        href={vendor.logo ?? '/intern_avatar.png'}
                         x={pos.x - size / 2}
                         y={pos.y - size / 2}
                         width={size}
@@ -960,12 +971,25 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                       />
                     );
                   }
+                  if (vendor.id !== 'unknown') {
+                    // Known model house, logo asset not in public/vendors/
+                    // yet — vendor-tinted monogram stands in.
+                    return (
+                      <>
+                        <circle cx={pos.x} cy={pos.y} r={ar} fill={vendor.mono.bg} stroke={vendor.mono.ring} strokeWidth="1" />
+                        <text
+                          x={pos.x} y={pos.y} dy="0.34em" textAnchor="middle"
+                          fill={vendor.mono.text} fontSize={isOnline ? 14 : 10}
+                          fontFamily="monospace" fontWeight="700"
+                        >
+                          {vendor.initial}
+                        </text>
+                      </>
+                    );
+                  }
                   // Round 106 (issue #83): hue keyed to the prefix group,
-                  // not the full alias — every 通信* node shares one color,
-                  // every 研究员* another, so teams cluster visually even
-                  // when the tier layout spreads them across rings.
+                  // not the full alias — every 通信* node shares one color.
                   const c = aliasAvatarColors(groupKeys[session.alias] || session.alias);
-                  const fs = isOnline ? 14 : 10;
                   return (
                     <>
                       <circle cx={pos.x} cy={pos.y} r={ar} fill={c.bg} stroke={c.ring} strokeWidth="1" />
@@ -975,7 +999,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                         dy="0.34em"
                         textAnchor="middle"
                         fill={c.text}
-                        fontSize={fs}
+                        fontSize={isOnline ? 14 : 10}
                         fontFamily="monospace"
                         fontWeight="700"
                       >
@@ -984,6 +1008,26 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                     </>
                   );
                 })()}
+                {/* Issue #96: runtime badge — small corner glyph marking the
+                    execution shell (CLI / SDK / HTTP API). Sits bottom-right
+                    of the avatar; colours kept off the working/idle/offline
+                    status hues. Absent when the node reports no runtime. */}
+                {(() => {
+                  const rt = runtimeIdentity(session.runtime);
+                  if (!rt) return null;
+                  const br = isOnline ? 7 : 5.5;
+                  const bx = pos.x + radius * 0.72;
+                  const by = pos.y + radius * 0.72;
+                  const icon = br * 2 * 0.62;
+                  return (
+                    <g style={{ pointerEvents: 'none' }}>
+                      <circle cx={bx} cy={by} r={br} fill={pal.containerBg} stroke={rt.color} strokeWidth="1.5" />
+                      <g transform={`translate(${bx - icon / 2} ${by - icon / 2}) scale(${icon / 24})`}>
+                        <path d={rt.iconPath} fill="none" stroke={rt.color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
+                      </g>
+                    </g>
+                  );
+                })()}
                 {session.status === 'working' && (
                   // working pulse — small dot just inside the status ring,
                   // above the avatar text. Was a 18px horizontal bar at

package/app/components/types.ts

@@ -12,6 +12,10 @@ export interface Session {
   last_seen_at?: string;
   config_path?: string;
   network_id?: string;
+  // #96: model vendor + execution runtime. Added to /api/status sessions in
+  // commhub-server 0.8.1-preview.0; null on older nodes / older hubs.
+  model?: string | null;
+  runtime?: string | null;
 }
 
 export interface Health {

package/app/lib/vendorIdentity.ts

@@ -0,0 +1,145 @@
+/** Issue #96: node visual identity — model vendor + runtime.
+ *
+ * Single source for two orthogonal node dimensions:
+ *   - vendor : which model house powers the node (avatar body)
+ *   - runtime: which execution shell it runs in (corner badge)
+ *
+ * Both are driven by the server `model` / `runtime` fields added in
+ * commhub-server 0.8.1-preview.0 (#96 Phase 1, commit 08482ef). Old nodes
+ * report `model: null` / `runtime: null` and fall back gracefully — never a
+ * broken image or blank avatar.
+ *
+ * Adding a vendor = one entry in VENDOR_RULES. Dropping a real logo file into
+ * public/vendors/ + setting `logo` lights it up with zero render-code change;
+ * until then a vendor-tinted monogram stands in (not a fake official logo).
+ */
+
+export interface VendorIdentity {
+  id: string;
+  label: string;
+  /** Monogram fallback colours, used when `logo` is null. */
+  mono: { bg: string; ring: string; text: string };
+  /** 1-char monogram shown when there's no logo asset. */
+  initial: string;
+  /** Packaged logo asset path, or null → render the monogram instead. */
+  logo: string | null;
+}
+
+const UNKNOWN_VENDOR: VendorIdentity = {
+  id: 'unknown',
+  label: 'Unknown vendor',
+  mono: { bg: 'hsl(220 10% 26%)', ring: 'hsl(220 10% 46%)', text: 'hsl(220 14% 82%)' },
+  initial: '?',
+  logo: null,
+};
+
+// 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',
+      logo: null, // → public/vendors/minimax.* when assets land
+    },
+  },
+  {
+    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',
+      logo: null,
+    },
+  },
+  {
+    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',
+      logo: null,
+    },
+  },
+];
+
+/** 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;
+  }
+  return UNKNOWN_VENDOR;
+}
+
+export type Runtime = 'claude-code-cli' | 'codex-sdk' | 'claude-agent-sdk' | 'http-api';
+
+export interface RuntimeIdentity {
+  label: string;
+  /** SVG path(s) drawn inside a 0..24 viewBox for the corner badge. */
+  iconPath: string;
+  /** Badge accent colour — kept clear of working/idle/offline status hues. */
+  color: string;
+}
+
+const RUNTIME_MAP: Record<Runtime, RuntimeIdentity> = {
+  // terminal / CLI
+  'claude-code-cli': {
+    label: 'Claude Code CLI',
+    iconPath: 'M4 5h16v14H4z M7 9l3 3-3 3 M13 15h4',
+    color: '#a78bfa',
+  },
+  // code-block / SDK
+  'codex-sdk': {
+    label: 'Codex SDK',
+    iconPath: 'M9 7l-5 5 5 5 M15 7l5 5-5 5',
+    color: '#38bdf8',
+  },
+  // SDK, distinct hue from codex
+  'claude-agent-sdk': {
+    label: 'Claude Agent SDK',
+    iconPath: 'M4 7h16v10H4z M8 11h8 M8 14h5',
+    color: '#34d399',
+  },
+  // cloud / API — non-resident process
+  'http-api': {
+    label: 'HTTP API',
+    iconPath: 'M7 18a4 4 0 010-8 5 5 0 019.6-1.3A3.5 3.5 0 0118 18z',
+    color: '#fbbf24',
+  },
+};
+
+/** Resolve a server runtime string to badge identity. Unknown → null. */
+export function runtimeIdentity(runtime: string | null | undefined): RuntimeIdentity | null {
+  if (!runtime) return null;
+  return RUNTIME_MAP[runtime as Runtime] ?? null;
+}
+
+/** 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 r = runtimeIdentity(runtime);
+  const parts: string[] = [];
+  if (v.id !== 'unknown') parts.push(v.label);
+  if (model) parts.push(model);
+  if (r) parts.push(r.label);
+  return parts.join(' · ');
+}

package/app/page.tsx

@@ -42,6 +42,10 @@ export default function Dashboard() {
   const [showDispatch, setShowDispatch] = useState(false);
   const [inbox, setInbox] = useState<InboxMessage[]>([]);
   const [agentFilter, setAgentFilter] = useState<'all' | 'working' | 'idle' | 'offline'>('all');
+  // #84: last node.renamed event — passed to TopoGraph so an open chat
+  // popover follows the rename instead of pointing at a dead alias. `ts`
+  // makes the effect re-fire even when the same from/to repeats.
+  const [renameSignal, setRenameSignal] = useState<{ from: string; to: string; ts: number } | null>(null);
   const { mutate } = useSWRConfig();
 
   // SSE: instant revalidation on CommHub events
@@ -51,6 +55,19 @@ export default function Dashboard() {
     url: '/api/hub/events',
     enabled: sseEnabled,
     onEvent: (event) => {
+      // #84 (RFC-010 §3.4): node.renamed — revalidate the session list so the
+      // new alias propagates instantly (TopoGraph + node grid re-render, the
+      // avatar hue recomputes as a pure fn of alias) instead of waiting for
+      // the next 5s poll. The renamed node's history keeps the old alias
+      // server-side, so the task list needs no revalidation here.
+      if (event.type === 'node.renamed') {
+        mutate('/api/hub/status');
+        const d = event.data as { old_alias?: string; new_alias?: string } | undefined;
+        if (d?.old_alias && d?.new_alias) {
+          setRenameSignal({ from: d.old_alias, to: d.new_alias, ts: Date.now() });
+        }
+        return;
+      }
       if (['new_task', 'new_message', 'new_reply', 'node_status_changed', 'broadcast'].includes(event.type)) {
         mutate('/api/hub/status');
         mutate((key: string) => typeof key === 'string' && key.startsWith('/api/hub/tasks'), undefined, { revalidate: true });
@@ -368,7 +385,7 @@ export default function Dashboard() {
         </div>
       )}
 
-      {showTopo && sessions.length > 0 && <TopoGraph sessions={sessions} sseSessions={sseSessions} />}
+      {showTopo && sessions.length > 0 && <TopoGraph sessions={sessions} sseSessions={sseSessions} renameSignal={renameSignal} />}
 
       {sessions.length === 0 && !sessError ? (
         <EmptyState

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.6-preview.3",
+  "version": "0.4.6-preview.5",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/scripts/topo-rename-test.mjs

@@ -0,0 +1,106 @@
+/* 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.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,96 @@
+/* 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.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);