@sleep2agi/agent-network-dashboard 0.4.6-preview.9 → 0.4.6

package/app/components/TopoGraph.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, 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';
+import { parseHubTime, relativeAgo } from '../lib/time';
 
 interface MessageFlow {
   from_alias: string;
@@ -32,6 +33,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;
@@ -85,36 +89,118 @@ function truncate(value: string, max: number) {
   return value.length > max ? `${value.slice(0, max - 1)}...` : value;
 }
 
+/** Round 46 / Loop: SWR-freshness chip.
+ *
+ *  TopoGraph's data refreshes every 5 s via SWR but the user has no
+ *  visible signal that the canvas they're looking at is current. The
+ *  flow particles and chips (R42 active-links, R43 hub) tell you when
+ *  the FLEET last did something, not when the DATA last syncing. This
+ *  chip ticks `live · Ns` against a 1-second interval so the operator
+ *  can trust freshness without doing internal math.
+ *
+ *  Owns its own setInterval so the parent topology doesn't re-render
+ *  every second (only this small chip does). lastSyncRef is updated
+ *  whenever the `sessions` prop reference changes — that's the SWR
+ *  refresh signal. */
+function FreshnessChip({ sessions }: { sessions: unknown }) {
+  const lastSyncRef = useRef<number>(Date.now());
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    // sessions reference changed → SWR just delivered a new payload.
+    lastSyncRef.current = Date.now();
+  }, [sessions]);
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  const sec = Math.max(0, Math.floor((now - lastSyncRef.current) / 1000));
+  // Tint the chip warmer when the data goes stale (>10s since last sync).
+  // SWR's default refreshInterval here is 5s, so anything past ~10s is
+  // either a poll miss or a network hiccup.
+  const stale = sec > 10;
+  return (
+    <span
+      className={stale
+        ? "hidden sm:inline px-2.5 py-1 rounded-md bg-amber-500/10 text-amber-300 border border-amber-500/20 font-mono"
+        : "hidden sm:inline px-2.5 py-1 rounded-md bg-gray-500/10 text-gray-400 border border-gray-500/20 font-mono"}
+      title={stale ? `Last sync ${sec}s ago — SWR refresh may be lagging` : `Live data · refreshes every 5s · last sync ${sec}s ago`}
+      data-freshness-chip
+    >
+      live · {sec}s
+    </span>
+  );
+}
+
+/** Round 36 / Loop: prefers-reduced-motion hook.
+ *
+ *  Round 29's a11y sweep zeroed CSS animations via media query, but SVG
+ *  SMIL `<animate>` / `<animateMotion>` elements aren't reachable from CSS
+ *  — they need JS to opt out. This hook reads the media query and listens
+ *  for changes so the topology's flow particles, pulses, click ripple
+ *  and hub breath honour the OS-level preference. */
+function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReduced(mq.matches);
+    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, []);
+  return reduced;
+}
+
+// Round 38 / Loop: parseHubTime + relativeAgo factored to app/lib/time.ts
+// — the Round 35 fix lives there now alongside the Round 37 mirror so
+// any future TZ-safe parse update happens in one place.
+
+/** 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
   };
 }
 
@@ -312,12 +398,20 @@ 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,
     });
   });
 
@@ -327,6 +421,7 @@ function buildFlowLinks(messages: MessageFlow[], positions: Record<string, Point
 export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProps) {
   const theme = useTheme();
   const isLight = theme === 'light';
+  const reducedMotion = useReducedMotion();
   const pal = isLight ? LIGHT_PALETTE : DARK_PALETTE;
   const brand = useBrand();
   const isIntern = brand === 'intern';
@@ -388,6 +483,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     activeAliases,
     groupKeys,
     groupBoxes,
+    gridContentBottom,
   } = useMemo(() => {
     const sseCount = (s: { alias: string; network_id?: string }) =>
       (s.network_id ? sseSessions[`${s.network_id}:${s.alias}`] : undefined) ?? sseSessions[s.alias];
@@ -397,17 +493,25 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     // 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
+    // #112 umbrella: ghost age-out — an offline node not seen recently 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;
+    // Round 27 / P0: the 24h threshold was too lenient — Vincent's preview.29
+    // screenshot showed B站马 nodes deleted ~4 h earlier still visible. A
+    // healthy agent heartbeats every few seconds; if it's been silent for
+    // an hour it's effectively gone. 1 h gives a fresh disconnect time to
+    // come back while removing dead nodes well within an operator session.
+    const GHOST_MS = 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;
+      // Round 35 / Loop: parseHubTime normalises SQL-style timestamps to UTC
+      // before parsing so non-UTC browsers don't see a phantom 8-hour skew
+      // and ghost freshly-disconnected nodes.
+      const t = parseHubTime(s.last_seen_at);
+      return t !== null && 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) && !isGhost(s)).sort(byAlias);
@@ -470,11 +574,25 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       // 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));
+      // Round 27 / P0 (Vincent screenshot preview.29): dense plain-text
+      // node labels (`pos.y + radius + denseDrop`, with a 3 px containerBg
+      // stroke halo for readability) at the BOTTOM row of band N would
+      // paint OVER the start of band N+1's group label, creating the
+      // "blueleap → eleap", "agent-network-dashboard → t-network / board"
+      // visual chopping. Geometry of the collision:
+      //   dense label visual bottom  = node_N.y + radius + denseDrop + halo
+      //   group label glyph top      = boxY + 4   (text y=boxY+14, ~10px ascent)
+      //                              = node_N+1.y - GROUP_TOP + 4
+      // node_N+1.y - node_N.y = cellH for consecutive rows, so no-collide:
+      //   cellH ≥ radius + denseDrop + halo + GROUP_TOP - 4 + buffer
+      // With halo=3 buffer=4: cellH ≥ nodeR + denseDrop + GROUP_TOP + 3.
+      const denseDrop = nodeScale < 0.8 ? 12 : 14;
+      const cellH = Math.max(
+        2 * nodeR + 22,                         // node + dense label within band
+        GROUP_TOP + 12,                         // group-label band + box padding
+        nodeR + denseDrop + GROUP_TOP + 3,      // round-27 dense↔group label clearance
+        Math.min(100, (gy1 - gy0) / totalRows),
+      );
 
       // Pass 2 — place each band's members.
       for (const band of bands) {
@@ -507,12 +625,19 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           const minX = Math.min(...xs), minY = Math.min(...ys);
           return {
             key: band.members.length ? groupKeys[band.members[0].alias] : '',
+            count: band.members.length,
             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,
           };
         });
+      // Round 28 / Loop: surface the grid's natural content bottom so the
+      // mount effect can auto-fit zoom when the layout would overflow the
+      // viewBox. = bottom of the last node row + its label drop + a small
+      // breathing buffer. Round 27's cellH bump makes this overflow more
+      // common (30-node fleets reach ~774 px, viewBox is 680).
+      const gridContentBottom = gy0 + totalRows * cellH + 8;
       return {
         onlineNodes: online,
         offlineNodes: offline,
@@ -521,6 +646,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
         activeAliases: active,
         groupKeys,
         groupBoxes,
+        gridContentBottom,
       };
     }
 
@@ -602,16 +728,36 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       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 }[],
+      groupBoxes: [] as { key: string; count: number; x: number; y: number; w: number; h: number }[],
+      // ring fits within VIEWBOX_H by construction (offlineRadius=325 + centre at y=330)
+      gridContentBottom: 0,
     };
   }, [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
@@ -631,6 +777,15 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // 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);
+  // Round 14 / Loop: one-shot click ripple — fades outward from the clicked
+  // node so the click registers physically before the popover snaps in.
+  // Pairs with the Round 11 chat-focus ring: ripple expands, ring locks on.
+  // Keyed by ts so re-clicking the same node remounts the <circle> and the
+  // SMIL <animate> replays. Cleared 600ms after click (longer than the
+  // 500ms animation so a final frame at opacity 0 is still in the tree).
+  const [clickRipple, setClickRipple] = useState<{
+    ts: number; x: number; y: number; r0: number; color: 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(() => {
@@ -661,6 +816,42 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     } catch {}
   }, []);
 
+  // Round 28 / Loop: first-paint auto-fit. Round 27's cellH bump means
+  // dense grids (≥6-7 rows) overflow the 680-px viewBox at the natural
+  // 100% zoom — a new user sees the topology with its bottom rows
+  // clipped and no hint that there's more below. Auto-fit on first
+  // paint (and only if the user has no persisted view) sets the
+  // initial zoom so all content fits. Subsequent zoom changes persist
+  // and override the auto-fit on reload; explicit reset (0 key) still
+  // goes back to 100% so the gesture's "reset to natural size" semantic
+  // is preserved.
+  //
+  // Capture pre-mount persistence in a useState initializer — the
+  // existing `persist` effect (declared below) runs on first render
+  // with the default {1,0,0} view and writes it to localStorage before
+  // the auto-fit effect (deps on async-arriving sessions) gets a turn.
+  // Reading localStorage from the effect would see that write and
+  // skip the fit. The useState snapshot fires once, before any effects.
+  const [hadPersistedViewOnMount] = useState<boolean>(
+    () => typeof window !== 'undefined' && !!localStorage.getItem('anet-topo-view'),
+  );
+  const autoFitDoneRef = useRef(false);
+  useEffect(() => {
+    if (autoFitDoneRef.current) return;
+    if (hadPersistedViewOnMount) {
+      autoFitDoneRef.current = true;
+      return;
+    }
+    if (layout !== 'grid' || sessions.length === 0 || !gridContentBottom) return;
+    if (gridContentBottom <= VIEWBOX_H) {
+      autoFitDoneRef.current = true; // no overflow → no fit needed
+      return;
+    }
+    const fitZoom = Math.max(ZOOM_MIN, Math.min(1, VIEWBOX_H / gridContentBottom));
+    setView({ zoom: fitZoom, x: 0, y: 0 });
+    autoFitDoneRef.current = true;
+  }, [layout, sessions.length, gridContentBottom, hadPersistedViewOnMount]);
+
   // persist view
   useEffect(() => {
     try { localStorage.setItem('anet-topo-view', JSON.stringify(view)); } catch {}
@@ -680,6 +871,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     const svg = svgRef.current;
     if (!svg) return;
     const onWheel = (e: WheelEvent) => {
+      // Round 23 / Loop: only zoom on Ctrl/Meta+wheel when inline; plain
+      // wheel over the canvas keeps scrolling the page (the topo sits at
+      // the top of /; trapping page scroll mid-page is the classic
+      // "scroll-jail" anti-pattern). In fullscreen the canvas owns the
+      // viewport so any wheel zooms — no page scroll to preserve. Pinch-
+      // zoom on a trackpad surfaces as ctrlKey=true natively, which is
+      // also what we want (zoom the canvas, not the browser).
+      if (!isFullscreen && !e.ctrlKey && !e.metaKey) return;
       e.preventDefault();
       const rect = svg.getBoundingClientRect();
       const mx = ((e.clientX - rect.left) / rect.width) * VIEWBOX_W;
@@ -700,8 +899,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     };
     svg.addEventListener('wheel', onWheel, { passive: false });
     return () => svg.removeEventListener('wheel', onWheel);
-  }, []);
-
+    // Re-attach when the fullscreen flag toggles so the handler's
+    // closure picks up the new value (capture-by-closure means we'd
+    // otherwise read the stale boolean forever).
+  }, [isFullscreen]);
+
+  // Round 21 / Loop: pan-aware cursor. Static `grab` gave no tactile cue
+  // that the canvas was actually being dragged — "grabbing" while
+  // dragRef.current.active = true tells the hand it's moving the
+  // viewport. Mirroring dragRef.active into state is the only way to
+  // re-render the SVG style; the ref itself doesn't trigger renders.
+  const [isPanning, setIsPanning] = useState(false);
   const onPointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
     if (e.button !== 0) return;
     (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
@@ -712,6 +920,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       baseX: viewRef.current.x,
       baseY: viewRef.current.y,
     };
+    setIsPanning(true);
   };
   const onPointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
     const d = dragRef.current;
@@ -726,6 +935,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   const onPointerUp = (e: React.PointerEvent<SVGSVGElement>) => {
     if (!dragRef.current.active) return;
     dragRef.current.active = false;
+    setIsPanning(false);
     try {
       (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
     } catch {}
@@ -743,6 +953,48 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   };
   const resetView = () => setView({ zoom: 1, x: 0, y: 0 });
 
+  // Round 29 / Loop: `f` = fit-to-content. Shared by the Round 28
+  // first-paint auto-fit effect and the keyboard handler so the math is
+  // in one place. When content already fits at natural zoom, this is
+  // effectively a "recenter" — `f` always lands on a known good view.
+  const fitView = useCallback(() => {
+    const zoom = !gridContentBottom || gridContentBottom <= VIEWBOX_H
+      ? 1
+      : Math.max(ZOOM_MIN, Math.min(1, VIEWBOX_H / gridContentBottom));
+    setView({ zoom, x: 0, y: 0 });
+  }, [gridContentBottom]);
+
+  // Round 22 / Loop: keyboard zoom — +/= zoom in, - zoom out, 0 reset.
+  // Round 29 / Loop: +f to fit content.
+  // Listen on window so the user doesn't need to focus the SVG first,
+  // but only act when no text input has focus (otherwise typing "-" in
+  // a chat would zoom the topology — surprising and bad). Modifier keys
+  // pass through so Cmd/Ctrl combos still hit their owners. The button
+  // titles below document these shortcuts so users discover them.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      const ae = document.activeElement as HTMLElement | null;
+      if (ae) {
+        const tag = ae.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || ae.isContentEditable) return;
+      }
+      if (e.key === '+' || e.key === '=') { zoomBy(1.2); e.preventDefault(); }
+      else if (e.key === '-' || e.key === '_') { zoomBy(1 / 1.2); e.preventDefault(); }
+      else if (e.key === '0') { resetView(); e.preventDefault(); }
+      else if (e.key === 'f' || e.key === 'F') { fitView(); e.preventDefault(); }
+      // Round 32 / Loop: `l` toggles ring|grid. The vim-style `g l` route
+      // (Audit Log) requires a preceding `g` within 1500ms; a bare `l`
+      // outside that window is free for topology use.
+      else if (e.key === 'l' || e.key === 'L') { toggleLayout(); e.preventDefault(); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+    // zoomBy / resetView are stable wrt setView callback; fitView changes
+    // with gridContentBottom so deps list catches it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fitView]);
+
   const toggleFullscreen = () => {
     const el = containerRef.current;
     if (!el) return;
@@ -770,6 +1022,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             <button
               onClick={() => { if (layout !== 'ring') toggleLayout(); }}
               aria-pressed={layout === 'ring'}
+              title="Ring layout (l to toggle)"
               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
@@ -777,6 +1030,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             <button
               onClick={() => { if (layout !== 'grid') toggleLayout(); }}
               aria-pressed={layout === 'grid'}
+              title="Grid layout (l to toggle)"
               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
@@ -788,9 +1042,74 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           <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>
-          <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>
+          {/* Round 31 / Loop: fleet-health pressure bar. The "X working /
+              Y online" chips already carry the raw counts; the bar lets
+              the eye get the working/idle/offline RATIO in one glance
+              without mental math. Stacked 3-segment chip, ~64 px wide. */}
+          {(() => {
+            const w = workingCount;
+            const i = onlineNodes.length - workingCount; // idle = online - working
+            const o = offlineNodes.length;
+            const total = w + i + o;
+            if (total === 0) return null;
+            const seg = (n: number, color: string, key: string) => {
+              if (n === 0) return null;
+              return <span key={key} style={{ width: `${(n / total) * 100}%`, background: color, height: '100%' }} />;
+            };
+            // Round 47 / Loop: hidden on mobile — at <640px the chip row
+            // wraps to multiple lines and crowds the topology header;
+            // pressure ratio is best read with the working+online raw
+            // counts (kept visible) anyway.
+            return (
+              <span
+                className="hidden sm: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={`${w} working · ${i} idle · ${o} offline`}
+                data-fleet-pressure
+              >
+                <span className="text-[10px] tracking-wide">pressure</span>
+                <span className="inline-flex h-1.5 w-16 rounded-full overflow-hidden" style={{ background: 'rgb(75 85 99 / 0.25)' }}>
+                  {seg(w, isLight ? '#059669' : '#22c55e', 'w')}
+                  {seg(i, isLight ? '#0d9488' : '#2dd4bf', 'i')}
+                  {seg(o, isLight ? '#94a3b8' : '#6b7280', 'o')}
+                </span>
+              </span>
+            );
+          })()}
+          {vendorDist.length > 1 && (
+            <span
+              className="hidden sm: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>
+          )}
+          {/* Round 42 / Loop: extend active-links chip with the timestamp
+              of the most-recent flow event. Tells the operator at a glance
+              whether the topology is currently humming (last 30s) or has
+              been quiet for a while — the visual flow particles and
+              edge brightness only show that there IS traffic, not when
+              the last one was. Reuses Round 38's relativeAgo. */}
+          {(() => {
+            const recent = flowLinks.reduce<number | null>((acc, l) => {
+              if (!l.last_at) return acc;
+              const t = parseHubTime(l.last_at);
+              if (t === null) return acc;
+              return acc === null || t > acc ? t : acc;
+            }, null);
+            const rel = recent !== null ? relativeAgo(new Date(recent).toISOString()) : null;
+            return (
+              <span className="hidden sm:inline px-2.5 py-1 rounded-md bg-gray-500/10 text-gray-400 border border-gray-500/20">
+                {flowLinks.length} active link{flowLinks.length === 1 ? '' : 's'}
+                {rel ? <span className="text-gray-500"> · last {rel}</span> : null}
+              </span>
+            );
+          })()}
+          <FreshnessChip sessions={sessions} />
         </div>
       </div>
 
@@ -810,7 +1129,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           onPointerMove={onPointerMove}
           onPointerUp={onPointerUp}
           onPointerLeave={onPointerUp}
-          style={{ cursor: 'grab', touchAction: 'none' }}
+          // Round 41 / Loop: the reset-button title (R22) and the Help
+          // overlay (R25) both advertise "double-click the canvas to
+          // reset", but the handler was never actually wired. The text
+          // was lying. Wire it here, guarded so dbl-clicking a node
+          // (which would also trigger the SVG-level handler via event
+          // bubbling) doesn't unexpectedly reset the view on the user.
+          onDoubleClick={(e) => {
+            const t = e.target as Element | null;
+            if (t?.closest('g[data-node]')) return;
+            resetView();
+          }}
+          style={{ cursor: isPanning ? 'grabbing' : 'grab', touchAction: 'none' }}
         >
           <defs>
             <linearGradient id="topo-panel" x1="0" x2="1" y1="0" y2="1">
@@ -832,9 +1162,37 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 </feMerge>
               </filter>
             )}
-            <marker id="topo-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
-              <path d="M 0 0 L 10 5 L 0 10 z" fill={pal.arrowFill} />
-            </marker>
+            {/* Round 16 / Loop: 3-tier flow-link arrow markers.
+                The single marker had `markerUnits` defaulting to
+                `strokeWidth`, so heavy edges (stroke=7) rendered 35-user-
+                unit arrowheads — visually dominant, the head outweighed
+                the line. Switching to `userSpaceOnUse` decouples arrow
+                size from stroke; binning by count gives a clearer
+                hierarchy than continuous linear scaling:
+                  s (count 1-2) →  12 user units
+                  m (count 3-4) →  16 user units  (alias for `topo-arrow`)
+                  l (count 5+)  →  22 user units
+                `topo-arrow` stays bound to the medium tier so the legend
+                swatch (line ~1500) renders without change. */}
+            {[
+              { id: 'topo-arrow-s', size: 12 },
+              { id: 'topo-arrow',   size: 16 },
+              { id: 'topo-arrow-l', size: 22 },
+            ].map(m => (
+              <marker
+                key={m.id}
+                id={m.id}
+                viewBox="0 0 10 10"
+                refX="8"
+                refY="5"
+                markerWidth={m.size}
+                markerHeight={m.size}
+                markerUnits="userSpaceOnUse"
+                orient="auto-start-reverse"
+              >
+                <path d="M 0 0 L 10 5 L 0 10 z" fill={pal.arrowFill} />
+              </marker>
+            ))}
             {/* Round 45: radial radar sweep gradient — bright at center
                 (where it meets the hub) fading to leading edge. */}
             <radialGradient id="topo-sweep" cx="0%" cy="50%" r="100%">
@@ -966,32 +1324,55 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               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"
+          {groupBoxes.map(box => {
+            const isHovered = hoveredGroup === box.key;
+            // Round 18 / Loop: group-box hover linkage. The Round 8 fade
+            // already dropped OUT-of-focus groups to 0.28, but the IN-focus
+            // group sat at its baseline appearance — no positive emphasis.
+            // Hovering now upgrades the box to an "accent" treatment:
+            // solid stroke (not dashed), thicker, accent-coloured; brighter
+            // text and slightly stronger fill. Label and box read as one
+            // selected unit. Geometry unchanged → overlap test untouched.
+            return (
+              <g
+                key={`grp-${box.key}`}
+                data-group={box.key}
+                className="transition-opacity"
+                style={{ pointerEvents: 'none', opacity: !hoveredGroup || isHovered ? 1 : 0.28 }}
               >
-                {box.key}
-              </text>
-            </g>
-          ))}
+                <rect
+                  x={box.x}
+                  y={box.y}
+                  width={box.w}
+                  height={box.h}
+                  rx="14"
+                  fill={isLight ? '#0f172a' : '#a5b4fc'}
+                  fillOpacity={isHovered ? (isLight ? 0.05 : 0.09) : (isLight ? 0.025 : 0.045)}
+                  stroke={isHovered ? pal.legendAccent : pal.ringStroke}
+                  strokeWidth={isHovered ? 2 : 1.5}
+                  strokeDasharray={isHovered ? 'none' : '6 6'}
+                  style={{ transition: 'stroke 200ms ease-out, stroke-width 200ms ease-out, fill-opacity 200ms ease-out' }}
+                />
+                <text
+                  x={box.x + 12}
+                  y={box.y + 14}
+                  fill={isHovered ? pal.legendHeadline : pal.legendText}
+                  fontSize="13"
+                  fontFamily="monospace"
+                  fontWeight="700"
+                  style={{ transition: 'fill 200ms ease-out' }}
+                >
+                  {box.key}
+                  {/* Round 19 / Loop: member-count chip. Inline tspan stays
+                      in the single <text> bbox the overlap test reads, so
+                      the node↔label guard still catches if the chip ever
+                      pushes the label far enough right to clip a node.
+                      Smaller + lighter weight reads as metadata, not name. */}
+                  <tspan dx="6" fill={pal.legendText} fontSize="11" fontWeight="400">· {box.count}</tspan>
+                </text>
+              </g>
+            );
+          })}
 
           {/* directed message flows */}
           {flowLinks.map((link, index) => {
@@ -999,11 +1380,47 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             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));
+            // Round 16 arrow-tier binning — keep `topo-arrow` as the
+            // medium tier id so the legend swatch picks it up unchanged.
+            const arrowId = link.count <= 2 ? 'topo-arrow-s'
+                          : link.count <= 4 ? 'topo-arrow'
+                          : 'topo-arrow-l';
+
+            // Round 39 / Loop: edge hover tooltip — surface the same
+            // last_at + count info the freshness fade and arrow tier
+            // already encode visually, in plain text. The stroke is the
+            // hover target; SVG `<title>` honours newlines on every
+            // browser the dashboard targets.
+            const lastAt = relativeAgo(link.last_at);
+            const tooltip = `${link.from} → ${link.to}\n${link.count} message${link.count === 1 ? '' : 's'}${lastAt ? ` · last ${lastAt}` : ''}`;
+            // Round 40 / Loop: edges follow node hover — when an alias is
+            // hovered, every edge touching it brightens, the rest fade.
+            // Pairs with the Round 8 group-focus fade on nodes: hover a
+            // node to find "who is this agent talking to" at a glance.
+            // No hover → multiplier is 1.0 (current behaviour preserved).
+            const edgeOpacityMul = !hoveredAlias
+              ? 1
+              : (link.from === hoveredAlias || link.to === hoveredAlias)
+                ? 1.7   // boost the touching edge
+                : 0.35; // dim the rest
             return (
               <g key={link.key}>
                 <path
@@ -1011,10 +1428,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   fill="none"
                   stroke={pal.flowEdge}
                   strokeWidth={width}
-                  opacity={isLight ? 0.22 : 0.28}
+                  opacity={Math.min(1, (isLight ? 0.22 : 0.28) * fresh * edgeOpacityMul)}
                   filter={isLight ? undefined : 'url(#topo-glow)'}
-                  markerEnd="url(#topo-arrow)"
-                />
+                  markerEnd={`url(#${arrowId})`}
+                  className="transition-opacity duration-300"
+                  style={{ pointerEvents: 'stroke' }}
+                >
+                  <title>{tooltip}</title>
+                </path>
                 <path
                   id={`flow-path-${index}`}
                   d={path}
@@ -1022,37 +1443,56 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   stroke={pal.flowPath}
                   strokeWidth="1"
                   strokeDasharray="2 12"
-                  opacity={isLight ? 0.4 : 0.75}
+                  opacity={Math.min(1, (isLight ? 0.4 : 0.75) * fresh * edgeOpacityMul)}
+                  className="transition-opacity duration-300"
                 />
-                <circle r="4" fill={pal.flowParticle} filter={isLight ? undefined : 'url(#topo-glow)'}>
-                  <animateMotion dur={`${duration}s`} repeatCount="indefinite" path={path} />
-                </circle>
+                {!reducedMotion && (
+                  <circle r="4" fill={pal.flowParticle} filter={isLight ? undefined : 'url(#topo-glow)'} opacity={Math.min(1, fresh * edgeOpacityMul)}>
+                    <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. */}
-          {layout === 'ring' && (<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 data-topo-hub>
+            {/* Round 43 / Loop: hub `<title>` summary — hovering the
+                central glow now answers "what is this?" with a one-line
+                fleet snapshot. Duplicates the header chips by design;
+                hovering the most visually prominent element is the
+                most natural impulse, so satisfy it where the cursor
+                already is. Falls clean: omits sub-clauses when their
+                counts are zero. */}
+            <title>{(() => {
+              const total = sessions.length;
+              const parts = [`Network hub`, `${total} session${total === 1 ? '' : 's'}`];
+              if (onlineNodes.length > 0) parts.push(`${onlineNodes.length} online`);
+              if (workingCount > 0) parts.push(`${workingCount} working`);
+              if (flowLinks.length > 0) parts.push(`${flowLinks.length} active link${flowLinks.length === 1 ? '' : 's'}`);
+              return parts.join(' · ');
+            })()}</title>
+            {/* 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}
+            >
+              {!reducedMotion && (
+                <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'} />
@@ -1060,7 +1500,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           </g>)}
 
           {/* agent nodes */}
-          {[...onlineNodes, ...offlineNodes].map(session => {
+          {[...onlineNodes, ...offlineNodes].map((session, nodeIdx) => {
             const pos = nodePositions[session.alias];
             if (!pos) return null;
 
@@ -1080,13 +1520,48 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // 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}
                 data-node={session.alias}
-                className="transition-opacity"
-                style={{ cursor: 'pointer' }}
+                // 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',
+                  // Round 17 / Loop: offline nodes drop to 0.6 at rest so
+                  // online nodes pop without losing the offline-as-ghost
+                  // information. The dashed stroke + smaller radius already
+                  // say "offline"; dimming the whole group strengthens the
+                  // online-vs-offline hierarchy at first glance. Exempt the
+                  // chat-focused node — if the user explicitly opened a
+                  // popover targeting an offline alias, that node stays
+                  // full-brightness so the focus ring + popover read as one
+                  // selected thing rather than a dimmed selection. Group-
+                  // hover fade (Round 8) still wins when inFocus is false.
+                  opacity: !inFocus
+                    ? 0.32
+                    : chatAlias === session.alias
+                      ? 1
+                      : isOnline ? 1 : 0.6,
+                  // 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
@@ -1094,21 +1569,106 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 // 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))}
-                onClick={() => setChatAlias(session.alias)}
+                // 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);
+                  // Round 14 ripple — capture position, radius and status
+                  // colour at click time so the one-shot circle is self-
+                  // contained (no re-render-time recomputation needed).
+                  setClickRipple({
+                    ts: Date.now(),
+                    x: pos.x, y: pos.y, r0: radius,
+                    color: status.primary,
+                  });
+                  setTimeout(() => setClickRipple(prev =>
+                    prev && Date.now() - prev.ts >= 590 ? null : prev), 600);
+                }}
               >
                 {/* 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 && (
+                    model/runtime.
+                    Round 33 / Loop: cwd line answers "what is this agent on?".
+                    Round 34 / Loop: for offline nodes, append "last seen: 6m ago"
+                    so the operator knows whether to wait or chase. Online nodes
+                    skip the line (Round 27's 1 h ghost age-out means anything
+                    still online has heartbeated recently — the line would just
+                    be noise). Accepts both ISO ("…T06:00:28Z") and SQL-style
+                    ("… 06:00:28" assumed UTC) formats. */}
+                {(() => {
+                  // Round 35 / Loop: TZ-safe parsing via the shared lib helper
+                  // — same parseHubTime is used by isGhost above (Round 38
+                  // factored it to app/lib/time.ts so both paths interpret SQL
+                  // bare timestamps as UTC on every browser).
+                  const lastSeen = !isOnline && session.last_seen_at ? relativeAgo(session.last_seen_at) : null;
+                  return (
+                    <title>{[
+                      identityLine(session.model, session.runtime) || session.alias,
+                      session.project_dir ? `cwd: ${session.project_dir}` : null,
+                      lastSeen ? `last seen: ${lastSeen}` : null,
+                    ].filter(Boolean).join('\n')}</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 && !reducedMotion && (
                   <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}
@@ -1118,6 +1678,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   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"
                 />
                 {/* Issue #96: node "avatar" is now driven by the model
                     vendor. Decision order:
@@ -1204,52 +1765,115 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     </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 - (radius - 6)} r="2.5" fill={pal.flowParticle}>
-                    <animate attributeName="opacity" values="1;0.25;1" dur="1.1s" repeatCount="indefinite" />
-                  </circle>
-                )}
+                {session.status === 'working' && (() => {
+                  // Round 24 / Loop: pulse rate ↔ traffic. The dot's dur
+                  // was a flat 1.1s — every working node looked equally
+                  // busy. Mapping it to sse:N lets the eye land on what's
+                  // actually hot. 3 discrete tiers read cleaner than
+                  // continuous easing at a glance; thresholds picked so
+                  // typical 1-2-SSE Claude/Codex sessions stay in the
+                  // "active" tier and only multi-pane orchestrators pop
+                  // into the "busy" tier. Geometry unchanged (r=2.5).
+                  const sse = sseCountFor ?? 0;
+                  const dur = sse >= 4 ? '0.7s' : sse >= 2 ? '0.9s' : '1.2s';
+                  return (
+                    <circle cx={pos.x} cy={pos.y - (radius - 6)} r="2.5" fill={pal.flowParticle} data-pulse-dur={dur} opacity={reducedMotion ? 0.6 : undefined}>
+                      {!reducedMotion && (
+                        <animate attributeName="opacity" values="1;0.25;1" dur={dur} repeatCount="indefinite" />
+                      )}
+                    </circle>
+                  );
+                })()}
 
                 {/* Round 98 (issue #61): label rect 124px → 100px.
                     Round 109/110 (Vincent P0): full opaque card below the
                     density threshold / on hover / when zoomed; otherwise a
                     lightweight plain-text alias that keeps every node
-                    labelled without an opaque box covering its neighbours. */}
-                {showFullLabel ? (
-                  <g transform={`translate(${pos.x}, ${pos.y + radius + 22})`} style={{ pointerEvents: 'none' }}>
-                    <rect x="-50" y="-14" width="100" height="42" rx="6" fill={pal.labelBox.fill} stroke={pal.labelBox.stroke} opacity={isLight ? 1 : 0.94} />
-                    <text x="0" y="1" textAnchor="middle" fill={status.text} fontSize="12" fontFamily="monospace" fontWeight="700">
-                      {truncate(session.alias, 12)}
-                    </text>
-                    <text x="0" y="17" textAnchor="middle" fill={status.primary} fontSize="9" fontFamily="monospace">
-                      {status.label}{isOnline && sseCountFor != null ? ` sse:${sseCountFor}` : ''}
+                    labelled without an opaque box covering its neighbours.
+                    Round 15 / Loop: when nodeScale=S the node shrinks 30%
+                    but the label card was staying full-size, so the label
+                    visually outweighed the small node. Tighten the card
+                    frame, alias / sub fontSize, drop-offset and truncate
+                    length specifically for S; M and L keep their existing
+                    sizes (M ≈ L for labels by design — the S user is the
+                    one who explicitly asked for a denser view). */}
+                {(() => {
+                  const isSmall = nodeScale < 0.8;
+                  const cardW = isSmall ? 88 : 100;
+                  const cardH = isSmall ? 36 : 42;
+                  const cardTopY = isSmall ? -12 : -14;
+                  const aliasFs = isSmall ? 11 : 12;
+                  const subFs = isSmall ? 8 : 9;
+                  const subY = isSmall ? 15 : 17;
+                  const dropY = isSmall ? 18 : 22;
+                  const fullMax = isSmall ? 11 : 12;
+                  const denseFs = isSmall ? 9 : 10;
+                  const denseDrop = isSmall ? 12 : 14;
+                  // Round 26 / Loop: micro-lift the label group on hover —
+                  // 1.5 px upward, 200 ms ease. Pairs with the Round 18
+                  // group-box hover-accent treatment to give the same
+                  // "this is the focused element" feedback at the per-
+                  // node level. CSS transform stacks onto the SVG
+                  // positioning transform attribute (SVG 2 cascade);
+                  // bbox is unchanged at rest, so the overlap-test gate
+                  // continues to see the geometric layout it expects.
+                  return showFullLabel ? (
+                    <g transform={`translate(${pos.x}, ${pos.y + radius + dropY})`} style={{ pointerEvents: 'none' }}
+                       className="transition-transform duration-200 group-hover:-translate-y-[1.5px]">
+                      <rect x={-cardW / 2} y={cardTopY} width={cardW} height={cardH} rx="6" fill={pal.labelBox.fill} stroke={pal.labelBox.stroke} opacity={isLight ? 1 : 0.94} />
+                      <text x="0" y="1" textAnchor="middle" fill={status.text} fontSize={aliasFs} fontFamily="monospace" fontWeight="700">
+                        {truncate(session.alias, fullMax)}
+                      </text>
+                      <text x="0" y={subY} textAnchor="middle" fill={status.primary} fontSize={subFs} fontFamily="monospace">
+                        {status.label}{isOnline && sseCountFor != null ? ` sse:${sseCountFor}` : ''}
+                      </text>
+                    </g>
+                  ) : (
+                    <text
+                      x={pos.x}
+                      y={pos.y + radius + denseDrop}
+                      textAnchor="middle"
+                      fill={status.text}
+                      fontSize={denseFs}
+                      fontFamily="monospace"
+                      fontWeight="700"
+                      opacity={0.9}
+                      className="transition-transform duration-200 group-hover:-translate-y-[1.5px]"
+                      style={{ pointerEvents: 'none', paintOrder: 'stroke' }}
+                      stroke={pal.containerBg}
+                      strokeWidth="3"
+                    >
+                      {truncate(session.alias, isSmall ? 9 : 10)}
                     </text>
-                  </g>
-                ) : (
-                  <text
-                    x={pos.x}
-                    y={pos.y + radius + 14}
-                    textAnchor="middle"
-                    fill={status.text}
-                    fontSize="10"
-                    fontFamily="monospace"
-                    fontWeight="700"
-                    opacity={0.9}
-                    style={{ pointerEvents: 'none', paintOrder: 'stroke' }}
-                    stroke={pal.containerBg}
-                    strokeWidth="3"
-                  >
-                    {truncate(session.alias, 10)}
-                  </text>
-                )}
+                  );
+                })()}
               </g>
             );
           })}
 
+          {/* Round 14 / Loop: click ripple — one-shot expanding ring from
+              the clicked node, ~500ms, status-coloured. Sits inside the
+              zoom/pan <g> so it scales / pans with the topology. Keyed by
+              ts so a re-click on any node (same or different) remounts the
+              <circle> and the SMIL <animate> elements replay from t=0.
+              strokeWidth=2 doesn't match the overlap-test selectors. */}
+          {clickRipple && !reducedMotion && (
+            <circle
+              key={clickRipple.ts}
+              cx={clickRipple.x}
+              cy={clickRipple.y}
+              r={clickRipple.r0 + 4}
+              fill="none"
+              stroke={clickRipple.color}
+              strokeWidth="2"
+              opacity="0"
+              style={{ pointerEvents: 'none' }}
+            >
+              <animate attributeName="r" values={`${clickRipple.r0 + 4};${clickRipple.r0 + 30}`} dur="0.5s" fill="freeze" />
+              <animate attributeName="opacity" values="0.7;0" dur="0.5s" fill="freeze" />
+            </circle>
+          )}
+
           </g>
 
           {/* #112: overlay panels (recent-signal + legend) render OUTSIDE the
@@ -1264,11 +1888,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             <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)}
+            {/* Round 45 / Loop: empty state. The panel used to render
+                "recent signal" + "0 msgs" with three blank slots below
+                when no flow yet — read as "broken" rather than "quiet".
+                A muted centred placeholder makes the empty state
+                deliberate. Messages count CAN diverge from flowLinks
+                count (raw count vs. deduped pairs), so the placeholder
+                fires on flowLinks.length=0 specifically. */}
+            {flowLinks.length === 0 ? (
+              <text x="115" y="60" textAnchor="middle" fill={pal.legendText} fontSize="10" fontFamily="monospace" fontStyle="italic" opacity={0.65} data-recent-signal-empty>
+                no flow yet
               </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 */}
@@ -1284,6 +1921,62 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           </g>
         </svg>
 
+        {/* Round 30 / Loop: minimap. Big fleets in fullscreen mode at high
+            zoom let users lose their position — the minimap shows the
+            whole topology miniaturised plus a viewport rectangle so the
+            user always knows where they are. Click anywhere to recenter
+            the canvas there. Only mounted when the view is non-default
+            (zoomed or panned) since at 1× centered the minimap and the
+            canvas show the same thing. HTML overlay so it stays fixed
+            while the SVG transforms. */}
+        {(() => {
+          const isDefaultView = Math.abs(view.zoom - 1) < 0.01 && Math.abs(view.x) < 1 && Math.abs(view.y) < 1;
+          if (isDefaultView || (onlineNodes.length + offlineNodes.length) === 0) return null;
+          const MW = 120, MH = 82;
+          const sx = MW / VIEWBOX_W, sy = MH / VIEWBOX_H;
+          const rectX = (-view.x / view.zoom) * sx;
+          const rectY = (-view.y / view.zoom) * sy;
+          const rectW = (VIEWBOX_W / view.zoom) * sx;
+          const rectH = (VIEWBOX_H / view.zoom) * sy;
+          return (
+            <div
+              className="absolute right-3 rounded-md border shadow-lg shadow-black/30 overflow-hidden anet-fade-in"
+              style={{ bottom: 56, background: pal.legendBox.fill, borderColor: pal.containerBorder, cursor: 'crosshair' }}
+              role="img"
+              aria-label="Topology minimap — click to recenter"
+              title="Minimap · click to recenter"
+              onClick={(e) => {
+                const r = e.currentTarget.getBoundingClientRect();
+                const fx = (e.clientX - r.left) / r.width;
+                const fy = (e.clientY - r.top) / r.height;
+                setView(prev => ({
+                  ...prev,
+                  x: VIEWBOX_W / 2 - fx * VIEWBOX_W * prev.zoom,
+                  y: VIEWBOX_H / 2 - fy * VIEWBOX_H * prev.zoom,
+                }));
+              }}
+              data-topo-minimap
+            >
+              <svg width={MW} height={MH} viewBox={`0 0 ${MW} ${MH}`} style={{ display: 'block' }}>
+                {[...onlineNodes, ...offlineNodes].map(s => {
+                  const p = nodePositions[s.alias];
+                  if (!p) return null;
+                  const sseN = (s.network_id ? sseSessions[`${s.network_id}:${s.alias}`] : undefined) ?? sseSessions[s.alias];
+                  const isOn = s.status !== 'offline' || !!sseN;
+                  const st = nodeStatus(s, isOn, isLight);
+                  return <circle key={s.alias} cx={p.x * sx} cy={p.y * sy} r={isOn ? 1.7 : 1.2} fill={st.primary} opacity={isOn ? 0.9 : 0.5} />;
+                })}
+                {/* viewport rectangle */}
+                <rect
+                  x={Math.max(0, rectX)} y={Math.max(0, rectY)}
+                  width={Math.max(0, Math.min(MW - Math.max(0, rectX), rectW))}
+                  height={Math.max(0, Math.min(MH - Math.max(0, rectY), rectH))}
+                  fill="none" stroke={pal.legendAccent} strokeWidth="1" opacity="0.9"
+                />
+              </svg>
+            </div>
+          );
+        })()}
         {/* Round 103 (issue #81): zoom / pan / fullscreen controls — HTML
             overlay so they stay fixed while the SVG content transforms.
             Round 104: Vincent 实测 — the reset action used to be hidden
@@ -1320,6 +2013,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               className="px-2 py-1 hover:bg-white/5 transition-colors"
               style={{ color: pal.legendText }}
               aria-label="Zoom out"
+              title="Zoom out (−)"
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden><path d="M5 12h14" /></svg>
             </button>
@@ -1335,6 +2029,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               className="px-2 py-1 hover:bg-white/5 transition-colors"
               style={{ color: pal.legendText }}
               aria-label="Zoom in"
+              title="Zoom in (+)"
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden><path d="M12 5v14M5 12h14" /></svg>
             </button>
@@ -1344,7 +2039,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             className="p-1.5 rounded-md border hover:bg-white/5 transition-colors"
             style={{ background: pal.legendBox.fill, borderColor: pal.containerBorder, color: pal.legendText }}
             aria-label="Reset view"
-            title="Reset zoom + pan (or double-click the canvas)"
+            title="Reset zoom + pan (0, or double-click the canvas)"
           >
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
               <path d="M3 12a9 9 0 1 0 9-9 9 9 0 0 0-6.4 2.6L3 8" />