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

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 {
@@ -28,6 +32,9 @@ interface FlowLink {
   to: string;
   count: number;
   content: string;
+  /** ISO timestamp of the most recent message on this edge — drives
+   *  the Round 10 freshness fade so dormant links recede visually. */
+  last_at: string;
 }
 
 const cx = 500;
@@ -81,36 +88,52 @@ function truncate(value: string, max: number) {
   return value.length > max ? `${value.slice(0, max - 1)}...` : value;
 }
 
+/** Round 12 / Loop: status trio audit.
+ *
+ *  Each (status × theme) cell returns a {primary, halo, text} trio. The trio
+ *  invariant — keep it when adding states or tweaking shades:
+ *
+ *    light:  primary = <hue>-600   halo = <hue>-100 *   text = <hue>-800/900
+ *    dark:   primary = <hue>-400/500 halo = <hue>-900  text = <hue>-100
+ *
+ *    * offline.halo light deviates intentionally to slate-200 (#e2e8f0):
+ *      slate-100 (#f1f5f9) is too close to the panel bg (#f8fafc) and the
+ *      halo would vanish. The other three rows keep the 100-shade.
+ *
+ *  Audit caught one cross-family drift before this round: online-other halo
+ *  light was #dbeafe (blue-100) while its primary (#0284c7 sky-600) and text
+ *  (#0c4a6e sky-900) were sky-family — now sky-100 (#e0f2fe). Tiny visual
+ *  difference; large hygiene win — every trio is now mono-hue. */
 function nodeStatus(session: Session, isOnline: boolean, isLight: boolean) {
   if (!isOnline) {
     return {
       label: 'offline',
-      primary: isLight ? '#94a3b8' : '#6b7280',
-      halo:    isLight ? '#e2e8f0' : '#111827',
-      text:    isLight ? '#475569' : '#9ca3af',
+      primary: isLight ? '#94a3b8' : '#6b7280', // slate-400 / gray-500
+      halo:    isLight ? '#e2e8f0' : '#111827', // slate-200* / gray-900
+      text:    isLight ? '#475569' : '#9ca3af', // slate-600 / gray-400
     };
   }
   if (session.status === 'working') {
     return {
       label: 'working',
-      primary: isLight ? '#059669' : '#22c55e',
-      halo:    isLight ? '#d1fae5' : '#14532d',
-      text:    isLight ? '#065f46' : '#dcfce7',
+      primary: isLight ? '#059669' : '#22c55e', // emerald-600 / green-500
+      halo:    isLight ? '#d1fae5' : '#14532d', // emerald-100 / green-900
+      text:    isLight ? '#065f46' : '#dcfce7', // emerald-800 / green-100
     };
   }
   if (session.status === 'idle') {
     return {
       label: 'idle',
-      primary: isLight ? '#0d9488' : '#2dd4bf',
-      halo:    isLight ? '#ccfbf1' : '#134e4a',
-      text:    isLight ? '#115e59' : '#ccfbf1',
+      primary: isLight ? '#0d9488' : '#2dd4bf', // teal-600 / teal-400
+      halo:    isLight ? '#ccfbf1' : '#134e4a', // teal-100 / teal-900
+      text:    isLight ? '#115e59' : '#ccfbf1', // teal-800 / teal-100
     };
   }
   return {
     label: session.status || 'online',
-    primary: isLight ? '#0284c7' : '#38bdf8',
-    halo:    isLight ? '#dbeafe' : '#0c4a6e',
-    text:    isLight ? '#0c4a6e' : '#e0f2fe',
+    primary: isLight ? '#0284c7' : '#38bdf8', // sky-600 / sky-400
+    halo:    isLight ? '#e0f2fe' : '#0c4a6e', // sky-100 / sky-900  (was blue-100 — drift fixed Round 12)
+    text:    isLight ? '#0c4a6e' : '#e0f2fe', // sky-900 / sky-100
   };
 }
 
@@ -236,22 +259,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;
 }
@@ -271,25 +331,63 @@ function buildFlowLinks(messages: MessageFlow[], positions: Record<string, Point
     const key = `${message.from_alias}->${message.to_alias}`;
     const current = links.get(key);
 
+    // Keep the most-recent timestamp per pair so the render can fade
+    // dormant edges (Round 10 freshness fade).
+    const incoming = message.created_at || '';
+    const last_at = !current
+      ? incoming
+      : (incoming > current.last_at ? incoming : current.last_at);
+
     links.set(key, {
       key,
       from: message.from_alias,
       to: message.to_alias,
       count: (current?.count || 0) + 1,
       content: current?.content || message.content,
+      last_at,
     });
   });
 
   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 +414,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 +424,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 +618,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,15 +627,36 @@ 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 6 / Loop: vendor distribution for the header chip — at a glance
+  // "what's in the fleet" (A:5 M:2 O:8 书:12 …) without opening a node.
+  // Sorted by count desc; "unknown" vendors collapse into a "?" bucket.
+  const vendorDist = useMemo(() => {
+    const tally = new Map<string, { initial: string; count: number; color: string }>();
+    for (const s of [...onlineNodes, ...offlineNodes]) {
+      const v = vendorForModel(s.model);
+      const key = v.id === 'unknown' ? '?' : v.initial;
+      const cur = tally.get(key);
+      if (cur) cur.count++;
+      else tally.set(key, { initial: key, count: 1, color: v.mono.text });
+    }
+    return [...tally.values()].sort((a, b) => b.count - a.count);
+  }, [onlineNodes, offlineNodes]);
   // Round 109 (Vincent 4582 P0): hover-gated labels above this node count
   // so dense fleets show clean avatars instead of a wall of overlapping
   // label cards. 16 ≈ where the triple-tier rings start to crowd.
   const denseLayout = onlineNodes.length + offlineNodes.length > 16;
   const [hoveredAlias, setHoveredAlias] = useState<string | null>(null);
+  // Round 8 / Loop: which group is currently focused. Nodes outside this
+  // group + other group boxes fade so the eye locks onto the team you're
+  // pointing at. Singletons use their own alias as the group key.
+  const hoveredGroup = hoveredAlias ? (groupKeys[hoveredAlias] ?? hoveredAlias) : null;
 
   // --- Round 103 (issue #81): fullscreen + zoom + pan interaction layer ---
   // DIY native (no d3 / svg-pan-zoom): wrap the topology content in a single
@@ -433,6 +676,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,13 +808,44 @@ 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>
           <span className="px-2.5 py-1 rounded-md bg-cyan-500/10 text-cyan-300 border border-cyan-500/20">
             {onlineNodes.length} online
           </span>
+          {vendorDist.length > 1 && (
+            <span
+              className="inline-flex items-center gap-2 px-2.5 py-1 rounded-md bg-gray-500/10 text-gray-400 border border-gray-500/20 font-mono"
+              title="Fleet by model vendor"
+            >
+              {vendorDist.map(v => (
+                <span key={v.initial} className="inline-flex items-baseline gap-0.5">
+                  <span style={{ color: v.color }}>{v.initial}</span>
+                  <span className="text-gray-500">:{v.count}</span>
+                </span>
+              ))}
+            </span>
+          )}
           <span className="px-2.5 py-1 rounded-md bg-gray-500/10 text-gray-400 border border-gray-500/20">
             {flowLinks.length} active links
           </span>
@@ -624,6 +908,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 +993,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,16 +1020,68 @@ 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}
+              className="transition-opacity"
+              // Round 8: dim group boxes outside the hover focus so the eye
+              // locks on the team being inspected.
+              style={{ pointerEvents: 'none', opacity: !hoveredGroup || box.key === hoveredGroup ? 1 : 0.28 }}
+            >
+              <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];
             const to = nodePositions[link.to];
             if (!from || !to) return null;
 
-            const lift = index % 2 === 0 ? 36 : -36;
+            // Round 7 / Loop: lift now scales with distance so short links
+            // aren't over-bent (long links keep the ~36px hump), and the
+            // particle period shortens with link.count so busier edges
+            // visibly pulse faster — instant info density on top of the
+            // existing stroke-width-by-count chip.
+            const dist = Math.hypot(to.x - from.x, to.y - from.y);
+            const lift = (index % 2 === 0 ? 1 : -1) * Math.min(36, dist * 0.18);
             const path = curvePath(from, to, lift);
             const width = Math.min(2 + link.count, 7);
-            const duration = 2.2 + (index % 5) * 0.32;
+            const duration = Math.max(0.9, 2.6 / Math.sqrt(link.count));
+            // Round 10 / Loop: freshness fade. An edge that fired ≤30s ago
+            // stays at full intensity; over 5 minutes it decays to ~35%.
+            // Surfaces "what's happening now" vs background chatter without
+            // hiding old flow entirely (some context still useful). `now`
+            // captured at useMemo-recompute time (every 5s message refresh)
+            // — accuracy is within the poll interval, plenty.
+            const ageMs = link.last_at ? Math.max(0, Date.now() - Date.parse(link.last_at)) : 0;
+            const fresh = Math.max(0.35, 1 - ageMs / (5 * 60 * 1000));
 
             return (
               <g key={link.key}>
@@ -749,9 +1090,10 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                   fill="none"
                   stroke={pal.flowEdge}
                   strokeWidth={width}
-                  opacity={isLight ? 0.22 : 0.28}
+                  opacity={(isLight ? 0.22 : 0.28) * fresh}
                   filter={isLight ? undefined : 'url(#topo-glow)'}
                   markerEnd="url(#topo-arrow)"
+                  className="transition-opacity duration-500"
                 />
                 <path
                   id={`flow-path-${index}`}
@@ -760,45 +1102,45 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                   stroke={pal.flowPath}
                   strokeWidth="1"
                   strokeDasharray="2 12"
-                  opacity={isLight ? 0.4 : 0.75}
+                  opacity={(isLight ? 0.4 : 0.75) * fresh}
+                  className="transition-opacity duration-500"
                 />
-                <circle r="4" fill={pal.flowParticle} filter={isLight ? undefined : 'url(#topo-glow)'}>
+                <circle r="4" fill={pal.flowParticle} filter={isLight ? undefined : 'url(#topo-glow)'} opacity={fresh}>
                   <animateMotion dur={`${duration}s`} repeatCount="indefinite" path={path} />
                 </circle>
               </g>
             );
           })}
 
-          {/* center hub — round 39: enlarged from r=6 (12px) to r=10 (20px)
-              core so the "control plane" reads as the network's anchor,
-              not a stray particle. Static halo ring at r=18 grounds it
-              visually; two outward pulses keep the "signal source" idea
-              from r17. Light theme gets a paler core to avoid hot-spotting
-              the bg. */}
-          <g>
-            {/* static grounding halo — sits underneath, low opacity */}
+          {/* center hub — round 39 sized + round 13 restraint.
+              The hub is the control-plane anchor. r39 gave it two outward
+              pulses (r 10→38, 2.4s, double-phase) which read as "loudest
+              node in the room" — wrong semantics: anchors don't emit,
+              they hold. r13 swaps the kinetic pulse for a slow opacity
+              breath on the static halo (4s, ±15% from base), so the hub
+              stays alive without throwing kinetic energy outward. The
+              dual-circle "lit lamp" core is unchanged. */}
+          {layout === 'ring' && (<g>
+            {/* grounding halo — now breathes in opacity, no expansion */}
             <circle
               cx={cx} cy={cy} r="18"
               fill={isLight ? '#d1fae5' : '#10b981'}
-              opacity={isLight ? 0.35 : 0.10}
-            />
-            {/* outer pulse 1 */}
-            <circle cx={cx} cy={cy} r="10" fill="none" stroke="#10b981" strokeWidth="1.5">
-              <animate attributeName="r" values="10;38;10" dur="2.4s" repeatCount="indefinite" />
-              <animate attributeName="opacity" values="0.55;0;0.55" dur="2.4s" repeatCount="indefinite" />
-            </circle>
-            {/* outer pulse 2 (delayed 1.2s) */}
-            <circle cx={cx} cy={cy} r="10" fill="none" stroke="#10b981" strokeWidth="1.5" opacity="0">
-              <animate attributeName="r" values="10;38;10" dur="2.4s" begin="1.2s" repeatCount="indefinite" />
-              <animate attributeName="opacity" values="0.45;0;0.45" dur="2.4s" begin="1.2s" repeatCount="indefinite" />
+              opacity={isLight ? 0.42 : 0.12}
+            >
+              <animate
+                attributeName="opacity"
+                values={isLight ? '0.32;0.52;0.32' : '0.08;0.16;0.08'}
+                dur="4s"
+                repeatCount="indefinite"
+              />
             </circle>
             {/* 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 => {
+          {[...onlineNodes, ...offlineNodes].map((session, nodeIdx) => {
             const pos = nodePositions[session.alias];
             if (!pos) return null;
 
@@ -806,7 +1148,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
@@ -816,12 +1160,34 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
             // occlude an avatar), and the full card appears only for the
             // hovered node or once zoomed in past 1.4×.
             const showFullLabel = !denseLayout || hoveredAlias === session.alias || view.zoom >= 1.4;
+            // Round 8: when a node in another group is hovered, fade this
+            // one. Same-group nodes (incl. singletons matching the hovered
+            // alias) stay full. Pure visual focus, geometry unchanged.
+            const inFocus = !hoveredGroup || (groupKeys[session.alias] ?? session.alias) === hoveredGroup;
 
             return (
               <g
                 key={session.alias}
-                className="transition-opacity"
-                style={{ cursor: 'pointer' }}
+                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',
+                  opacity: inFocus ? 1 : 0.32,
+                  // Round 9 / Loop: stagger the anet-fade-in so the topology
+                  // reveals as a wave on first paint instead of one big pop.
+                  // Cap at 24 indices (≈600ms tail) so 50-node fleets still
+                  // finish revealing within a beat. CSS animation-delay only
+                  // applies during the keyframe — re-renders without a new
+                  // mount (same alias key) don't replay, so status changes
+                  // never trigger the stagger again.
+                  animationDelay: `${Math.min(nodeIdx, 24) * 25}ms`,
+                }}
                 // Stop the pointerdown from reaching the SVG pan handler: the
                 // SVG calls setPointerCapture, and a captured pointer makes
                 // Chromium fire the follow-up `click` on the SVG instead of
@@ -829,17 +1195,74 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                 // Side effect (intended): you pan from empty canvas, not by
                 // grabbing a node.
                 onPointerDown={(e) => e.stopPropagation()}
-                onPointerEnter={() => denseLayout && setHoveredAlias(session.alias)}
-                onPointerLeave={() => denseLayout && setHoveredAlias(prev => (prev === session.alias ? null : prev))}
+                // Track hover globally (not just under denseLayout) so the
+                // Round 8 group-focus fade works at any fleet size.
+                onPointerEnter={() => setHoveredAlias(session.alias)}
+                onPointerLeave={() => 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' }}
+                />
+                {/* Round 11 / Loop: chat-focus ring — when the ChatPopover is
+                    open targeting this node, anchor a persistent ring around
+                    it so the floating popover visibly links back to its source
+                    node. Static (not pulsing) so it reads as "selected state"
+                    rather than "this node is active". strokeWidth=2.5 stays
+                    clear of the overlap-test selectors (1.5 / 3). Sits just
+                    outside the halo radius+8 so it never overlaps a neighbour
+                    (halos already pack flush in dense grids). */}
+                {chatAlias === session.alias && (
+                  <circle
+                    cx={pos.x}
+                    cy={pos.y}
+                    r={radius + 14}
+                    fill="none"
+                    stroke={status.primary}
+                    strokeWidth="2.5"
+                    opacity={isLight ? 0.85 : 0.95}
+                    filter={!isLight ? 'url(#topo-glow)' : undefined}
+                    className="transition-opacity duration-200"
+                    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" />
                     <animate attributeName="opacity" values={isLight ? '0.12;0.02;0.12' : '0.18;0.04;0.18'} dur="2.4s" repeatCount="indefinite" />
                   </circle>
                 )}
-                <circle cx={pos.x} cy={pos.y} r={radius + 8} fill={status.halo} opacity={isOnline ? (isLight ? 0.85 : 0.65) : (isLight ? 0.4 : 0.25)} />
+                {/* Round 4 / Loop: transition-[fill,stroke,opacity] smooths
+                    status colour changes so idle↔working↔offline doesn't snap
+                    — task replies / node-rename / SSE updates ease in. */}
+                <circle
+                  cx={pos.x}
+                  cy={pos.y}
+                  r={radius + 8}
+                  fill={status.halo}
+                  opacity={isOnline ? (isLight ? 0.85 : 0.65) : (isLight ? 0.4 : 0.25)}
+                  className="transition-[fill,opacity] duration-300 ease-out"
+                />
                 <circle
                   cx={pos.x}
                   cy={pos.y}
@@ -849,34 +1272,28 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                   strokeWidth={isOnline ? 3 : 1.5}
                   strokeDasharray={isOnline ? 'none' : '5 5'}
                   filter={isOnline && !isLight ? 'url(#topo-glow)' : undefined}
+                  className="transition-[fill,stroke] duration-300 ease-out"
                 />
-                {/* 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 +1302,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 +1330,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 +1339,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 +1405,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 +1446,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 }}