@sleep2agi/agent-network-dashboard 0.4.6-preview.1 → 0.4.6-preview.11

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 {
@@ -236,22 +240,59 @@ function commonPrefix(a: string, b: string): string {
   return a.slice(0, i);
 }
 
-function computeGroupKeys(aliases: string[]): Record<string, string> {
-  const sorted = [...aliases].sort((a, b) => a.localeCompare(b));
+/** #83 + #111: group nodes that share a ≥2-char alias prefix OR a project_dir
+ *  ("either criterion → same group", Vincent 4724). Union-find over the
+ *  sessions; the component label prefers the shared project_dir's basename,
+ *  else the common alias prefix. Returns alias → groupKey. */
+function computeGroups(sessions: { alias: string; project_dir?: string | null }[]): Record<string, string> {
+  const n = sessions.length;
+  const parent = sessions.map((_, i) => i);
+  const find = (i: number): number => {
+    while (parent[i] !== i) { parent[i] = parent[parent[i]]; i = parent[i]; }
+    return i;
+  };
+  const union = (a: number, b: number) => {
+    const ra = find(a), rb = find(b);
+    if (ra !== rb) parent[ra] = rb;
+  };
+
+  // union by shared project_dir
+  const byDir: Record<string, number[]> = {};
+  sessions.forEach((s, i) => {
+    const d = s.project_dir?.trim();
+    if (d) (byDir[d] ||= []).push(i);
+  });
+  for (const idxs of Object.values(byDir)) {
+    for (let k = 1; k < idxs.length; k++) union(idxs[0], idxs[k]);
+  }
+
+  // union by shared ≥2-char alias prefix — sort, link adjacent pairs
+  const order = sessions.map((_, i) => i).sort((a, b) => sessions[a].alias.localeCompare(sessions[b].alias));
+  for (let k = 0; k + 1 < order.length; k++) {
+    if (commonPrefix(sessions[order[k]].alias, sessions[order[k + 1]].alias).length >= 2) {
+      union(order[k], order[k + 1]);
+    }
+  }
+
+  // label each connected component
+  const comps: Record<number, number[]> = {};
+  for (let i = 0; i < n; i++) (comps[find(i)] ||= []).push(i);
   const keys: Record<string, string> = {};
-  let i = 0;
-  while (i < sorted.length) {
-    let j = i;
-    let prefix = sorted[i];
-    while (j + 1 < sorted.length) {
-      const lcp = commonPrefix(prefix, sorted[j + 1]);
-      if (lcp.length < 2) break;
-      prefix = lcp;
-      j++;
+  for (const members of Object.values(comps)) {
+    let label: string;
+    if (members.length === 1) {
+      label = sessions[members[0]].alias;
+    } else {
+      const dirs = new Set(members.map(i => sessions[i].project_dir?.trim()).filter(Boolean) as string[]);
+      if (dirs.size === 1) {
+        const d = [...dirs][0];
+        label = d.split('/').filter(Boolean).pop() || d;
+      } else {
+        label = members.map(i => sessions[i].alias).reduce((a, b) => commonPrefix(a, b));
+        if (label.length < 2) label = sessions[members[0]].alias;
+      }
     }
-    const key = j > i ? prefix : sorted[i];
-    for (let k = i; k <= j; k++) keys[sorted[k]] = key;
-    i = j + 1;
+    for (const i of members) keys[sessions[i].alias] = label;
   }
   return keys;
 }
@@ -283,13 +324,43 @@ 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;
   const brand = useBrand();
   const isIntern = brand === 'intern';
   const [messages, setMessages] = useState<MessageFlow[]>([]);
+  // Issue #87: ring | grid layout toggle. Ring is the tiered-radial default;
+  // grid arranges nodes in an N×M grid (better for 30+ nodes). Persisted to
+  // localStorage like the zoom/pan view state. Declared above nodePositions
+  // since that useMemo branches on it.
+  const [layout, setLayout] = useState<'ring' | 'grid'>('ring');
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem('anet-topo-layout');
+      if (saved === 'grid' || saved === 'ring') setLayout(saved);
+    } catch {}
+  }, []);
+  const toggleLayout = () => setLayout(prev => {
+    const next = prev === 'ring' ? 'grid' : 'ring';
+    try { localStorage.setItem('anet-topo-layout', next); } catch {}
+    return next;
+  });
+  // Issue #113: node size scale (Vincent 4727 — nodes too big / crowded at
+  // ~22 nodes). S/M/L → 0.7/0.84/1.0; default M (one notch down from the old
+  // fixed size). Persisted like the layout toggle.
+  const [nodeScale, setNodeScale] = useState(0.84);
+  useEffect(() => {
+    try {
+      const saved = parseFloat(localStorage.getItem('anet-topo-nodescale') || '');
+      if (saved === 0.7 || saved === 0.84 || saved === 1) setNodeScale(saved);
+    } catch {}
+  }, []);
+  const pickNodeScale = (v: number) => {
+    setNodeScale(v);
+    try { localStorage.setItem('anet-topo-nodescale', String(v)); } catch {}
+  };
 
   useEffect(() => {
     const fetchMessages = async () => {
@@ -316,6 +387,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
     flowLinks,
     activeAliases,
     groupKeys,
+    groupBoxes,
   } = useMemo(() => {
     const sseCount = (s: { alias: string; network_id?: string }) =>
       (s.network_id ? sseSessions[`${s.network_id}:${s.alias}`] : undefined) ?? sseSessions[s.alias];
@@ -325,10 +397,133 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
     // index, so contiguous-in-array becomes contiguous-in-ring, i.e.
     // each team visually clusters. localeCompare keeps CJK ordering sane.
     const byAlias = (a: Session, b: Session) => a.alias.localeCompare(b.alias);
+    // #112 umbrella: ghost age-out — an offline node not seen for over a day
+    // is almost certainly a deleted node the server `/api/status` still
+    // returns (#74 root cause is server-side; this is the dashboard-side
+    // fallback so stale ghosts stop cluttering the topology). A missing
+    // last_seen_at is kept (conservative — could be a legitimately new node).
+    const GHOST_MS = 24 * 60 * 60 * 1000;
+    const now = Date.now();
+    const isGhost = (s: Session) => {
+      if (s.status !== 'offline' || sseCount(s) || !s.last_seen_at) return false;
+      const t = Date.parse(s.last_seen_at);
+      return !Number.isNaN(t) && now - t > GHOST_MS;
+    };
     const online = sessions.filter(s => s.status !== 'offline' || sseCount(s)).sort(byAlias);
-    const offline = sessions.filter(s => s.status === 'offline' && !sseCount(s)).sort(byAlias);
+    const offline = sessions.filter(s => s.status === 'offline' && !sseCount(s) && !isGhost(s)).sort(byAlias);
     const positions: Record<string, Point> = {};
 
+    if (layout === 'grid') {
+      // Issue #87 + #111: group-banded grid. Nodes are sorted by alias so
+      // same-prefix aliases are adjacent; each multi-member prefix group then
+      // gets its OWN row(s) starting at column 0, while singletons pack into
+      // shared rows. Group-banded placement keeps every group's bounding box
+      // (#111) a clean rectangle — no box ever overlaps another group's.
+      const all = [...online, ...offline];
+      const groupKeys = computeGroups(all);
+      const cols = Math.max(1, Math.ceil(Math.sqrt(all.length)));
+      // #112: gy0 starts below the (now compact) recent-signal / legend
+      // overlay panels — their max bottom edge is y≈112 — so grid row 0 is
+      // never occluded; gy1 extends near the canvas bottom for breathing room.
+      const gx0 = 150, gx1 = 850, gy0 = 126, gy1 = 652;
+      const cellW = (gx1 - gx0) / cols;
+      // largest node radius at the current size scale — drives the group
+      // label band + the row-height floor so nothing ever overlaps.
+      const nodeR = Math.round(26 * nodeScale);
+
+      // ordered runs of consecutive same-group-key nodes (≥2 = real group)
+      const runs: { key: string; members: Session[] }[] = [];
+      for (const s of all) {
+        const gk = groupKeys[s.alias];
+        const last = runs[runs.length - 1];
+        if (last && last.key === gk) last.members.push(s);
+        else runs.push({ key: gk, members: [s] });
+      }
+
+      // Pass 1 — assign each run to a band: a multi-member group owns its
+      // rows (left-aligned, so its bounding box is a tidy rect); contiguous
+      // singletons pack into shared rows (centred). Collect total row count.
+      type Band = { members: Session[]; startRow: number; centred: boolean; isGroup: boolean };
+      const bands: Band[] = [];
+      let row = 0;
+      let i = 0;
+      while (i < runs.length) {
+        if (runs[i].members.length >= 2) {
+          bands.push({ members: runs[i].members, startRow: row, centred: false, isGroup: true });
+          row += Math.ceil(runs[i].members.length / cols);
+          i++;
+        } else {
+          const singles: Session[] = [];
+          while (i < runs.length && runs[i].members.length < 2) {
+            singles.push(runs[i].members[0]);
+            i++;
+          }
+          bands.push({ members: singles, startRow: row, centred: true, isGroup: false });
+          row += Math.ceil(singles.length / cols);
+        }
+      }
+      const totalRows = Math.max(1, row);
+      // #112: the group label sits in a band ABOVE the topmost node, so the
+      // band must clear the node radius — GROUP_TOP is node-relative, never
+      // cellH-derived (cellH-derived was the label↔node overlap bug Vincent
+      // hit). cellH then floors at GROUP_TOP + 30 so the label band + bottom
+      // padding always fit and stacked group boxes never touch; past the
+      // floor the grid overflows and zoom/pan handles it.
+      const GROUP_TOP = nodeR + 20;
+      // Row-height floor = the tightest of: a node + its label below it
+      // (2·nodeR + ~22), and the label band + min box padding (GROUP_TOP + 12).
+      // Below this, rows would overlap; past it the grid overflows and
+      // zoom/pan covers the rest.
+      const cellH = Math.max(2 * nodeR + 22, GROUP_TOP + 12, Math.min(100, (gy1 - gy0) / totalRows));
+
+      // Pass 2 — place each band's members.
+      for (const band of bands) {
+        band.members.forEach((s, idx) => {
+          const rowInBand = Math.floor(idx / cols);
+          const c = idx % cols;
+          const inRow = Math.min(cols, band.members.length - rowInBand * cols);
+          const inset = band.centred ? ((cols - inRow) * cellW) / 2 : 0;
+          positions[s.alias] = {
+            x: gx0 + inset + (c + 0.5) * cellW,
+            y: gy0 + (band.startRow + rowInBand + 0.5) * cellH,
+          };
+        });
+      }
+
+      const links = buildFlowLinks(messages, positions);
+      const active = new Set<string>();
+      links.forEach(link => { active.add(link.from); active.add(link.to); });
+      // #111: one bounding box per multi-member group (Vincent 4722). Each
+      // group owns its rows; GROUP_PAD fills the row space left below the
+      // nodes after the label band, so stacked group boxes always have a
+      // gap between them (GROUP_TOP is defined above, with cellH).
+      const GROUP_PAD = Math.max(8, Math.min(26, cellH - GROUP_TOP - 8)); // side/bottom
+      const groupBoxes = bands
+        .filter(b => b.isGroup)
+        .map(band => {
+          const pts = band.members.map(s => positions[s.alias]).filter(Boolean);
+          const xs = pts.map(p => p.x);
+          const ys = pts.map(p => p.y);
+          const minX = Math.min(...xs), minY = Math.min(...ys);
+          return {
+            key: band.members.length ? groupKeys[band.members[0].alias] : '',
+            x: minX - GROUP_PAD,
+            y: minY - GROUP_TOP,
+            w: Math.max(...xs) - minX + GROUP_PAD * 2,
+            h: Math.max(...ys) - minY + GROUP_TOP + GROUP_PAD,
+          };
+        });
+      return {
+        onlineNodes: online,
+        offlineNodes: offline,
+        nodePositions: positions,
+        flowLinks: links,
+        activeAliases: active,
+        groupKeys,
+        groupBoxes,
+      };
+    }
+
     // Round 97 (issue #50) + 98 (issue #61): three layout modes by N.
     //   N ≤ 8         → single ring (r=220)
     //   8 < N ≤ 14    → two rings (inner r=175, outer r=260, half-step rot)
@@ -396,7 +591,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
     });
 
     // Round 106 (issue #83): group key per alias → shared hue per team.
-    const groupKeys = computeGroupKeys([...online, ...offline].map(s => s.alias));
+    const groupKeys = computeGroups([...online, ...offline]);
 
     return {
       onlineNodes: online,
@@ -405,8 +600,11 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
       flowLinks: links,
       activeAliases: active,
       groupKeys,
+      // #111: group boxes are a grid-layout feature only — radially scattered
+      // ring nodes can't be cleanly boxed. Ring keeps the #83 prefix hue.
+      groupBoxes: [] as { key: string; x: number; y: number; w: number; h: number }[],
     };
-  }, [messages, sessions, sseSessions]);
+  }, [messages, sessions, sseSessions, layout, nodeScale]);
 
   const workingCount = onlineNodes.filter(s => s.status === 'working').length;
   // Round 109 (Vincent 4582 P0): hover-gated labels above this node count
@@ -433,6 +631,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]);
 
@@ -555,7 +763,25 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
           <div className="text-xs uppercase text-gray-600 tracking-wider">Network Topology</div>
           <h2 className="text-lg text-white font-semibold">Command mesh</h2>
         </div>
-        <div className="flex flex-wrap gap-2 text-xs">
+        <div className="flex flex-wrap items-center gap-2 text-xs">
+          {/* Issue #87: ring | grid layout toggle — segmented control,
+              persisted to localStorage anet-topo-layout. */}
+          <div className="inline-flex rounded-md border border-gray-500/25 overflow-hidden" role="group" aria-label="Topology layout">
+            <button
+              onClick={() => { if (layout !== 'ring') toggleLayout(); }}
+              aria-pressed={layout === 'ring'}
+              className={`px-2.5 py-1 transition-colors ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300' : 'text-gray-500 hover:text-gray-400'}`}
+            >
+              Ring
+            </button>
+            <button
+              onClick={() => { if (layout !== 'grid') toggleLayout(); }}
+              aria-pressed={layout === 'grid'}
+              className={`px-2.5 py-1 border-l border-gray-500/25 transition-colors ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300' : 'text-gray-500 hover:text-gray-400'}`}
+            >
+              Grid
+            </button>
+          </div>
           <span className="px-2.5 py-1 rounded-md bg-green-500/10 text-green-300 border border-green-500/20">
             {workingCount} working
           </span>
@@ -624,6 +850,10 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
           {/* Round 103 (issue #81): everything inside this <g> zooms + pans
               together. transform order = translate then scale. */}
           <g transform={`translate(${view.x} ${view.y}) scale(${view.zoom})`}>
+          {/* Issue #87: radar/ring ambiance renders only in ring layout —
+              grid mode drops it so the concentric rings don't sit behind a
+              rectangular grid. */}
+          {layout === 'ring' && (<>
           <circle cx={cx} cy={cy} r="330" fill="url(#topo-radar)" />
 
           {/* Round 45: subtle star field — 24 deterministic dots scattered
@@ -705,12 +935,13 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
               opacity={isLight ? 0.35 : 0.18}
             />
           ))}
+          </>)}
 
           {/* hub links — round 46: idle spokes now have animated
               stroke-dashoffset so dashes flow outward from the hub
               ("command relay" feel). Active spokes carrying live message
               flow stay as solid bright strokes. */}
-          {onlineNodes.map((session, idx) => {
+          {layout === 'ring' && onlineNodes.map((session, idx) => {
             const pos = nodePositions[session.alias];
             if (!pos) return null;
             const path = curvePath({ x: cx, y: cy }, pos, 0);
@@ -731,6 +962,37 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             );
           })}
 
+          {/* #111: prefix-group boundary boxes (Vincent 4722). Grid layout
+              only — groupBoxes is empty in ring mode. Rendered behind the
+              flow links + nodes; pointer-events off so they never intercept
+              a node click. Restrained dashed container + group-name label. */}
+          {groupBoxes.map(box => (
+            <g key={`grp-${box.key}`} data-group={box.key} style={{ pointerEvents: 'none' }}>
+              <rect
+                x={box.x}
+                y={box.y}
+                width={box.w}
+                height={box.h}
+                rx="14"
+                fill={isLight ? '#0f172a' : '#a5b4fc'}
+                fillOpacity={isLight ? 0.025 : 0.045}
+                stroke={pal.ringStroke}
+                strokeWidth="1.5"
+                strokeDasharray="6 6"
+              />
+              <text
+                x={box.x + 12}
+                y={box.y + 14}
+                fill={pal.legendText}
+                fontSize="13"
+                fontFamily="monospace"
+                fontWeight="700"
+              >
+                {box.key}
+              </text>
+            </g>
+          ))}
+
           {/* directed message flows */}
           {flowLinks.map((link, index) => {
             const from = nodePositions[link.from];
@@ -775,7 +1037,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
               visually; two outward pulses keep the "signal source" idea
               from r17. Light theme gets a paler core to avoid hot-spotting
               the bg. */}
-          <g>
+          {layout === 'ring' && (<g>
             {/* static grounding halo — sits underneath, low opacity */}
             <circle
               cx={cx} cy={cy} r="18"
@@ -795,7 +1057,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             {/* core — 20px diameter, larger inner highlight reads as a "lit lamp" */}
             <circle cx={cx} cy={cy} r="10" fill={isLight ? '#059669' : '#10b981'} />
             <circle cx={cx} cy={cy} r="5" fill="#d1fae5" opacity="0.9" />
-          </g>
+          </g>)}
 
           {/* agent nodes */}
           {[...onlineNodes, ...offlineNodes].map(session => {
@@ -806,7 +1068,9 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             const isOnline = session.status !== 'offline' || !!sseCountFor;
             const status = nodeStatus(session, isOnline, isLight);
             const isActive = activeAliases.has(session.alias);
-            const radius = isOnline ? 26 : 18;
+            // #113: node size scales with the S/M/L control; halos, labels,
+            // badge and avatar all derive from `radius` so they follow.
+            const radius = Math.round((isOnline ? 26 : 18) * nodeScale);
             // Round 109/110 (Vincent 4582 + 4583 P0): at high node counts
             // the 100px opaque label cards overlapped each other and
             // covered neighbouring avatars. But hiding text entirely went
@@ -820,7 +1084,14 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             return (
               <g
                 key={session.alias}
-                className="transition-opacity"
+                data-node={session.alias}
+                // Round 3 / Loop: `anet-fade-in` runs once when the <g>
+                // mounts — a new session entering the fleet (or the topology
+                // first rendering) eases in instead of popping. Re-renders of
+                // an existing node don't re-trigger (React preserves the <g>
+                // via the alias key), so status changes don't flicker. The
+                // global prefers-reduced-motion sweep already neutralises it.
+                className="group transition-opacity anet-fade-in"
                 style={{ cursor: 'pointer' }}
                 // Stop the pointerdown from reaching the SVG pan handler: the
                 // SVG calls setPointerCapture, and a captured pointer makes
@@ -833,6 +1104,29 @@ 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>
+                {/* Round 2 / Loop: hover ring — a thin outer stroke that fades
+                    in when the cursor enters the node, signalling clickability
+                    (real-user feedback for the chat-popover open). Pure CSS via
+                    Tailwind group-hover, so it costs nothing per frame and
+                    respects prefers-reduced-motion via the global media query. */}
+                <circle
+                  cx={pos.x}
+                  cy={pos.y}
+                  r={radius + 12}
+                  fill="none"
+                  stroke={status.primary}
+                  // strokeWidth must NOT be 1.5 (offline status ring) or 3
+                  // (online status ring) — the overlap test selects by those
+                  // exact widths and would mis-count this invisible hover
+                  // ring as a node footprint.
+                  strokeWidth="2"
+                  className="opacity-0 group-hover:opacity-70 transition-opacity duration-150"
+                  style={{ pointerEvents: 'none' }}
+                />
                 {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" />
@@ -850,33 +1144,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 ar = Math.round((isOnline ? 14 : 10) * nodeScale);
+                  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}
@@ -885,12 +1172,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={ar}
+                          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" />
@@ -900,7 +1200,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                         dy="0.34em"
                         textAnchor="middle"
                         fill={c.text}
-                        fontSize={fs}
+                        fontSize={ar}
                         fontFamily="monospace"
                         fontWeight="700"
                       >
@@ -909,12 +1209,32 @@ 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
                   // y+11 which now collides with the avatar; the dot reads
                   // as the same "active" cue without occluding the initial.
-                  <circle cx={pos.x} cy={pos.y - (isOnline ? 18 : 13)} r="2.5" fill={pal.flowParticle}>
+                  <circle cx={pos.x} cy={pos.y - (radius - 6)} r="2.5" fill={pal.flowParticle}>
                     <animate attributeName="opacity" values="1;0.25;1" dur="1.1s" repeatCount="indefinite" />
                   </circle>
                 )}
@@ -955,29 +1275,37 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             );
           })}
 
+          </g>
+
+          {/* #112: overlay panels (recent-signal + legend) render OUTSIDE the
+              zoom/pan <g> so they stay fixed while the topology pans/zooms.
+              They're sized + tucked into the top corners so every corner of
+              each panel is >325px from the canvas centre — i.e. fully outside
+              the outermost (offline) ring. No node on any ring can reach the
+              corner triangles, so the panels never overlap a node, in ring
+              OR grid layout (Vincent 4727 zero-overlap criterion). */}
           {/* latest flow labels */}
-          <g transform="translate(28, 34)">
-            <rect x="0" y="0" width="285" height={60 + Math.min(flowLinks.length, 4) * 20} rx="8" fill={pal.legendBox.fill} stroke={pal.legendBox.stroke} opacity={isLight ? 1 : 0.94} />
-            <text x="16" y="26" fill={pal.legendHeadline} fontSize="13" fontFamily="monospace" fontWeight="700">recent signal</text>
-            <text x="178" y="26" fill={pal.legendAccent} fontSize="11" fontFamily="monospace">{messages.length} messages</text>
-            {flowLinks.slice(0, 4).map((link, index) => (
-              <text key={link.key} x="16" y={54 + index * 20} fill={pal.legendText} fontSize="10" fontFamily="monospace">
-                {truncate(link.from, 8)} {'->'} {truncate(link.to, 8)} / {link.count} / {truncate(link.content, 18)}
+          <g transform="translate(16, 16)">
+            <rect x="0" y="0" width="230" height="84" rx="10" fill={pal.legendBox.fill} stroke={pal.legendBox.stroke} opacity={isLight ? 0.97 : 0.92} />
+            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight="700">recent signal</text>
+            <text x="150" y="21" fill={pal.legendAccent} fontSize="10" fontFamily="monospace">{messages.length} msgs</text>
+            {flowLinks.slice(0, 3).map((link, index) => (
+              <text key={link.key} x="13" y={38 + index * 16} fill={pal.legendText} fontSize="9" fontFamily="monospace">
+                {truncate(link.from, 6)} {'->'} {truncate(link.to, 6)} / {link.count} / {truncate(link.content, 12)}
               </text>
             ))}
           </g>
 
           {/* legend */}
-          <g transform="translate(720, 34)">
-            <rect x="0" y="0" width="250" height="112" rx="8" fill={pal.legendBox.fill} stroke={pal.legendBox.stroke} opacity={isLight ? 1 : 0.94} />
-            <circle cx="18" cy="26" r="6" fill={isLight ? '#059669' : '#22c55e'} />
-            <text x="34" y="30" fill={pal.legendText} fontSize="11" fontFamily="monospace">working node</text>
-            <circle cx="18" cy="52" r="6" fill={isLight ? '#0d9488' : '#2dd4bf'} />
-            <text x="34" y="56" fill={pal.legendText} fontSize="11" fontFamily="monospace">online idle</text>
-            <circle cx="18" cy="78" r="6" fill={isLight ? '#94a3b8' : '#6b7280'} />
-            <text x="34" y="82" fill={pal.legendText} fontSize="11" fontFamily="monospace">offline / no SSE</text>
-            <path d="M150,78 Q176,52 210,78" fill="none" stroke={pal.flowEdge} strokeWidth="3" markerEnd="url(#topo-arrow)" />
-          </g>
+          <g transform="translate(760, 16)">
+            <rect x="0" y="0" width="224" height="96" rx="10" fill={pal.legendBox.fill} stroke={pal.legendBox.stroke} opacity={isLight ? 0.97 : 0.92} />
+            <circle cx="16" cy="24" r="5.5" fill={isLight ? '#059669' : '#22c55e'} />
+            <text x="30" y="28" fill={pal.legendText} fontSize="11" fontFamily="monospace">working node</text>
+            <circle cx="16" cy="48" r="5.5" fill={isLight ? '#0d9488' : '#2dd4bf'} />
+            <text x="30" y="52" fill={pal.legendText} fontSize="11" fontFamily="monospace">online idle</text>
+            <circle cx="16" cy="72" r="5.5" fill={isLight ? '#94a3b8' : '#6b7280'} />
+            <text x="30" y="76" fill={pal.legendText} fontSize="11" fontFamily="monospace">offline / no SSE</text>
+            <path d="M140,72 Q164,48 196,72" fill="none" stroke={pal.flowEdge} strokeWidth="3" markerEnd="url(#topo-arrow)" />
           </g>
         </svg>
 
@@ -988,6 +1316,26 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             Split into a plain % readout + an explicit reset button with
             its own icon + tooltip. */}
         <div className="absolute bottom-3 right-3 flex items-center gap-1.5 text-xs select-none">
+          {/* #113: node size — S / M / L segmented control (Vincent 4727). */}
+          <div
+            className="flex items-center rounded-md border overflow-hidden"
+            style={{ background: pal.legendBox.fill, borderColor: pal.containerBorder }}
+            role="group"
+            aria-label="Node size"
+          >
+            {([['S', 0.7], ['M', 0.84], ['L', 1]] as const).map(([lbl, v], idx) => (
+              <button
+                key={lbl}
+                onClick={() => pickNodeScale(v)}
+                aria-pressed={nodeScale === v}
+                title={`Node size: ${lbl === 'S' ? 'small' : lbl === 'M' ? 'medium' : 'large'}`}
+                className={`px-2 py-1 transition-colors ${idx > 0 ? 'border-l' : ''} ${nodeScale === v ? 'bg-cyan-500/15 text-cyan-300' : 'hover:bg-white/5'}`}
+                style={{ color: nodeScale === v ? undefined : pal.legendText, borderColor: pal.containerBorder }}
+              >
+                {lbl}
+              </button>
+            ))}
+          </div>
           <div
             className="flex items-center rounded-md border overflow-hidden"
             style={{ background: pal.legendBox.fill, borderColor: pal.containerBorder }}
@@ -1046,14 +1394,17 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             )}
           </button>
         </div>
-      </div>
 
-      {/* Issue #100: draggable singleton chat popover. position:fixed, so it
-          floats above the page and isn't clipped by the graph container's
-          overflow-hidden. */}
-      {chatAlias && (
-        <ChatPopover alias={chatAlias} onClose={() => setChatAlias(null)} />
-      )}
+        {/* Issue #100/#106: draggable, resizable singleton chat popover.
+            position:fixed so it floats above the page (overflow-hidden here
+            doesn't clip fixed children). Rendered *inside* the container so
+            that when the graph goes fullscreen (#81) the popover joins the
+            fullscreen subtree and stays visible — a sibling render would be
+            outside the fullscreened element and disappear. */}
+        {chatAlias && (
+          <ChatPopover alias={chatAlias} onClose={() => setChatAlias(null)} />
+        )}
+      </div>
     </section>
   );
 }