@agentprojectcontext/apx 1.70.0 → 1.72.0

package/src/interfaces/web/src/screens/ProjectScreen.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import useSWR from "swr";
 import { useParams, Routes, Route, Navigate, useLocation, useNavigate } from "react-router-dom";
 import {
   Bot, Heart, Zap, Puzzle, Settings,
@@ -8,6 +9,8 @@ import {
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
+import { Integrations } from "../lib/api";
+import { ObsidianLogo } from "../components/integrations/BrandLogos";
 import { RobyEmpty } from "../components/Roby";
 import { Button } from "../components/ui/button";
 import { useProject } from "../hooks/useProjects";
@@ -50,7 +53,14 @@ export function ProjectScreen() {
   const { collapsed, toggle } = useNavCollapse(STORAGE.sidebarCollapsed + ".project");
 
   const isBase = String(pid) === "0";
+  // Obsidian-backed memory: when the vault integration is active, mark the
+  // Memories nav item so it's clear memory is mirrored through the vault.
+  const { data: catalog } = useSWR(`integrations-catalog-${pid}`, () => Integrations.catalog(pid), { shouldRetryOnError: false });
+  const obsidianEntry = catalog?.find((e) => e.slug === "obsidian");
+  const obsidianActive = obsidianEntry?.status?.status === "active" && !!obsidianEntry?.status?.is_enabled;
+
   const sections: TabSection[] = useMemo(() => {
+    const memoriesMark = obsidianActive ? <ObsidianLogo className="size-3 text-purple-400" /> : undefined;
     // One shared taxonomy for both Base and projects, in the same order, so the
     // two menus mirror each other. Base additionally gets a "General" admin
     // section (workspaces / engines / agent defaults) and drops "Content"
@@ -76,7 +86,7 @@ export function ProjectScreen() {
           { key: "", label: t("project.nav.overview"), icon: LayoutDashboard },
           ...(isCompany ? [{ key: "structure", label: t("project.nav.structure"), icon: Building2 }] : []),
           { key: "agents",    label: t("project.nav.agents"),    icon: Bot },
-          { key: "memories",  label: t("project.nav.memories"),  icon: Brain },
+          { key: "memories",  label: t("project.nav.memories"),  icon: Brain, mark: memoriesMark },
           { key: "skills",    label: t("skills_page.title"),     icon: Sparkles },
           { key: "artifacts", label: t("project.nav.artifacts"), icon: FileCode2 },
         ],
@@ -120,7 +130,7 @@ export function ProjectScreen() {
     ];
 
     return out.filter(Boolean) as TabSection[];
-  }, [isBase, project?.kind]);
+  }, [isBase, project?.kind, obsidianActive]);
 
   // First path segment after /p/:pid — so deep routes like agents/:slug still
   // highlight the "agents" nav item.

package/src/interfaces/web/src/screens/project/AgentBrainGraph.tsx

@@ -3,16 +3,18 @@ import {
   forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide, forceX, forceY,
   type Simulation,
 } from "d3-force";
+import { Maximize2, Minimize2, Plus, Minus, Frame } from "lucide-react";
 import { t } from "../../i18n";
 
 // Generic animated "brain" graph (d3-force + SVG). It takes an explicit node +
 // edge set so callers can model *any* topology — a single agent's hubbed brain
 // (Memory / Threads / Tasks / Routines / Team + cross-links) or the whole
-// project's agent map (orchestrators with their specialists as satellites).
+// project's agent map (each agent expanded into its own connected sub-brain).
 //
 // Motion is SMIL/CSS driven (breathing halos, a pulsing core, energy beads
 // flowing down the edges) so the graph stays alive without React re-renders;
-// d3 only drives layout.
+// d3 only drives layout. The view supports wheel-zoom, background pan, a
+// fit-to-content button and fullscreen.
 
 export type BrainKind =
   | "agent" | "memory" | "thread" | "task" | "routine" | "agentlink" | "hub";
@@ -50,31 +52,38 @@ function kindLabel(k: BrainKind): string {
 
 const RADIUS: Record<BrainRole, number> = { core: 24, hub: 12, leaf: 6 };
 const roleOf = (n: BrainNode): BrainRole => n.role ?? "leaf";
+const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
 
 export function BrainGraph({
-  nodes, edges, height = 460, onNodeClick,
+  nodes, edges, height = 520, onNodeClick, toolbar,
 }: {
   nodes: BrainNode[];
   edges: BrainEdge[];
   height?: number;
   onNodeClick?: (n: BrainNode) => void;
+  toolbar?: React.ReactNode;   // extra controls (e.g. an Expand toggle)
 }) {
-  const W = 760, H = height;
-  const CX = W / 2, CY = H / 2;
+  const W = 1000, H = Math.round((W * height) / 760); // keep a wide-ish canvas
 
+  const wrapRef = useRef<HTMLDivElement | null>(null);
   const svgRef = useRef<SVGSVGElement | null>(null);
   const simRef = useRef<Simulation<SimNode, SimLink> | null>(null);
   const nodesRef = useRef<SimNode[]>([]);
   const linksRef = useRef<SimLink[]>([]);
   const dragRef = useRef<SimNode | null>(null);
+  const panRef = useRef<{ x: number; y: number } | null>(null);
+  const viewRef = useRef({ tx: 0, ty: 0, k: 1 });
+  const fitRef = useRef<() => void>(() => {});
   const [, setVersion] = useState(0);
   const [selected, setSelected] = useState<BrainNode | null>(null);
+  const [fs, setFs] = useState(false);
 
+  const CX = W / 2, CY = H / 2;
+  const bump = () => setVersion((v) => v + 1);
   const hideLeafLabels = nodes.length > 44;
 
+  // ── Layout simulation ──────────────────────────────────────────────────────
   useEffect(() => {
-    // Seed positions so the first paint already looks like a graph (no blank
-    // flash, and a sane starting layout for d3).
     const coreR = Math.min(W, H) * 0.30;
     const hubs = nodes.filter((n) => roleOf(n) === "hub");
     const hubAngle = new Map<string, number>();
@@ -94,176 +103,266 @@ export function BrainGraph({
 
     nodesRef.current = simNodes;
     linksRef.current = links;
-    setVersion((v) => v + 1); // commit the seeded layout even if the tick timer is throttled
+    bump();
 
     const linkDist = (l: SimLink) => {
       const ra = roleOf(l.source), rb = roleOf(l.target);
-      if (ra === "core" || rb === "core") return 150;
-      if (ra === "hub" && rb === "hub") return 120;
-      return 62;
+      if (ra === "core" || rb === "core") return 170;
+      if (ra === "hub" && rb === "hub") return 130;
+      return 58;
     };
     const charge = (n: SimNode) => {
       const r = roleOf(n);
-      return r === "core" ? -620 : r === "hub" ? -320 : -110;
+      return r === "core" ? -700 : r === "hub" ? -360 : -90;
     };
 
     const sim = forceSimulation<SimNode>(simNodes)
-      .force("link", forceLink<SimNode, SimLink>(links).distance(linkDist).strength(0.55))
+      .force("link", forceLink<SimNode, SimLink>(links).distance(linkDist).strength(0.5))
       .force("charge", forceManyBody<SimNode>().strength(charge))
-      .force("center", forceCenter(CX, CY).strength(0.04))
-      .force("x", forceX(CX).strength(0.03))
-      .force("y", forceY(CY).strength(0.03))
+      .force("center", forceCenter(CX, CY).strength(0.03))
+      .force("x", forceX(CX).strength(0.02))
+      .force("y", forceY(CY).strength(0.02))
       .force("collide", forceCollide<SimNode>((n) => RADIUS[roleOf(n)] + 8))
-      .alphaDecay(0.028)
-      .on("tick", () => setVersion((v) => v + 1));
+      .alphaDecay(0.025)
+      .on("tick", bump);
     simRef.current = sim;
-    return () => { sim.stop(); };
+    // Auto-fit once the layout has cooled a little.
+    const fit = setTimeout(() => fitRef.current(), 1400);
+    return () => { clearTimeout(fit); sim.stop(); };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nodes, edges, height]);
 
-  const toSvg = (e: React.PointerEvent) => {
+  // ── View helpers (pan / zoom / fit) ────────────────────────────────────────
+  const svgPoint = (clientX: number, clientY: number) => {
     const rect = svgRef.current!.getBoundingClientRect();
-    return {
-      x: ((e.clientX - rect.left) / rect.width) * W,
-      y: ((e.clientY - rect.top) / rect.height) * H,
+    return { x: ((clientX - rect.left) / rect.width) * W, y: ((clientY - rect.top) / rect.height) * H };
+  };
+  const zoomAround = (sx: number, sy: number, factor: number) => {
+    const v = viewRef.current;
+    const k = clamp(v.k * factor, 0.25, 8);
+    viewRef.current = { k, tx: sx - (sx - v.tx) * (k / v.k), ty: sy - (sy - v.ty) * (k / v.k) };
+    bump();
+  };
+  fitRef.current = () => {
+    const ns = nodesRef.current.filter((n) => n.x != null && n.y != null);
+    if (!ns.length) return;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of ns) { minX = Math.min(minX, n.x!); minY = Math.min(minY, n.y!); maxX = Math.max(maxX, n.x!); maxY = Math.max(maxY, n.y!); }
+    const pad = 60;
+    const bw = Math.max(1, maxX - minX), bh = Math.max(1, maxY - minY);
+    const k = clamp(Math.min((W - pad * 2) / bw, (H - pad * 2) / bh), 0.25, 2.5);
+    const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
+    viewRef.current = { k, tx: W / 2 - cx * k, ty: H / 2 - cy * k };
+    bump();
+  };
+
+  // Native non-passive wheel so we can preventDefault the page scroll.
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const p = svgPoint(e.clientX, e.clientY);
+      zoomAround(p.x, p.y, e.deltaY > 0 ? 0.9 : 1.1);
     };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Escape exits fullscreen.
+  useEffect(() => {
+    if (!fs) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setFs(false); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [fs]);
+
+  // ── Pointer interaction: node drag OR background pan ────────────────────────
+  const worldFromClient = (clientX: number, clientY: number) => {
+    const p = svgPoint(clientX, clientY);
+    const v = viewRef.current;
+    return { x: (p.x - v.tx) / v.k, y: (p.y - v.ty) / v.k };
   };
-  const onDown = (n: SimNode) => (e: React.PointerEvent) => {
+  const onNodeDown = (n: SimNode) => (e: React.PointerEvent) => {
     if (roleOf(n) === "core") return;
+    e.stopPropagation();
     dragRef.current = n;
     (e.target as Element).setPointerCapture?.(e.pointerId);
     simRef.current?.alphaTarget(0.3).restart();
   };
+  const onBgDown = (e: React.PointerEvent) => {
+    panRef.current = { x: e.clientX, y: e.clientY };
+    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+  };
   const onMove = (e: React.PointerEvent) => {
-    const n = dragRef.current;
-    if (!n) return;
-    const { x, y } = toSvg(e);
-    n.fx = x; n.fy = y;
+    if (dragRef.current) {
+      const w = worldFromClient(e.clientX, e.clientY);
+      dragRef.current.fx = w.x; dragRef.current.fy = w.y;
+      return;
+    }
+    if (panRef.current) {
+      const rect = svgRef.current!.getBoundingClientRect();
+      viewRef.current.tx += ((e.clientX - panRef.current.x) / rect.width) * W;
+      viewRef.current.ty += ((e.clientY - panRef.current.y) / rect.height) * H;
+      panRef.current = { x: e.clientX, y: e.clientY };
+      bump();
+    }
   };
   const onUp = () => {
     const n = dragRef.current;
     if (n) { n.fx = null; n.fy = null; }
     dragRef.current = null;
+    panRef.current = null;
     simRef.current?.alphaTarget(0);
   };
 
   const simNodes = nodesRef.current;
   const links = linksRef.current;
-
-  // Legend: the item kinds actually present (exclude the core agent + structural hubs).
+  const v = viewRef.current;
   const legendKinds = [...new Set(nodes.map((n) => n.kind))].filter((k) => k !== "agent" && k !== "hub");
-
   const pick = (n: SimNode) => { setSelected(n); onNodeClick?.(n); };
 
+  const CtrlBtn = ({ onClick, title, children }: { onClick: () => void; title: string; children: React.ReactNode }) => (
+    <button type="button" title={title} onClick={onClick}
+      className="grid size-7 place-items-center rounded-md border border-border bg-card/80 text-muted-fg backdrop-blur hover:text-foreground">
+      {children}
+    </button>
+  );
+
   return (
     <div className="space-y-3">
-      <div className="overflow-hidden rounded-xl border border-border bg-gradient-to-b from-background to-muted/20">
-        <svg
-          ref={svgRef}
-          viewBox={`0 0 ${W} ${H}`}
-          style={{ height }}
-          className="w-full touch-none select-none"
-          onPointerMove={onMove}
-          onPointerUp={onUp}
-          onPointerLeave={onUp}
-        >
-          <defs>
-            <filter id="brain-glow" x="-80%" y="-80%" width="260%" height="260%">
-              <feGaussianBlur stdDeviation="3" result="blur" />
-              <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
-            </filter>
-            <radialGradient id="brain-core" cx="50%" cy="50%" r="50%">
-              <stop offset="0%" stopColor={KIND_COLOR.agent} stopOpacity="0.9" />
-              <stop offset="55%" stopColor={KIND_COLOR.agent} stopOpacity="0.35" />
-              <stop offset="100%" stopColor={KIND_COLOR.agent} stopOpacity="0" />
-            </radialGradient>
-            <radialGradient id="brain-bg" cx="50%" cy="50%" r="60%">
-              <stop offset="0%" stopColor={KIND_COLOR.agent} stopOpacity="0.10" />
-              <stop offset="100%" stopColor={KIND_COLOR.agent} stopOpacity="0" />
-            </radialGradient>
-          </defs>
+      <div
+        ref={wrapRef}
+        className={fs
+          ? "fixed inset-0 z-[60] flex flex-col gap-3 bg-background p-4"
+          : "relative"}
+      >
+        <div className="relative min-h-0 flex-1 overflow-hidden rounded-xl border border-border bg-gradient-to-b from-background to-muted/20">
+          {/* Controls */}
+          <div className="absolute right-2 top-2 z-10 flex items-center gap-1.5">
+            {toolbar}
+            <CtrlBtn onClick={() => zoomAround(CX, CY, 1.2)} title={t("agents_ui.brain_zoom_in")}><Plus size={14} /></CtrlBtn>
+            <CtrlBtn onClick={() => zoomAround(CX, CY, 0.83)} title={t("agents_ui.brain_zoom_out")}><Minus size={14} /></CtrlBtn>
+            <CtrlBtn onClick={() => fitRef.current()} title={t("agents_ui.brain_fit")}><Frame size={14} /></CtrlBtn>
+            <CtrlBtn onClick={() => setFs((f) => !f)} title={t(fs ? "agents_ui.brain_exit_fs" : "agents_ui.brain_fullscreen")}>
+              {fs ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
+            </CtrlBtn>
+          </div>
 
-          <rect x={0} y={0} width={W} height={H} fill="url(#brain-bg)" />
+          <svg
+            ref={svgRef}
+            viewBox={`0 0 ${W} ${H}`}
+            preserveAspectRatio="xMidYMid meet"
+            style={fs ? { height: "100%", width: "100%" } : { height }}
+            className="w-full touch-none select-none"
+            onPointerMove={onMove}
+            onPointerUp={onUp}
+            onPointerLeave={onUp}
+          >
+            <defs>
+              <filter id="brain-glow" x="-80%" y="-80%" width="260%" height="260%">
+                <feGaussianBlur stdDeviation="3" result="blur" />
+                <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
+              </filter>
+              <radialGradient id="brain-core" cx="50%" cy="50%" r="50%">
+                <stop offset="0%" stopColor={KIND_COLOR.agent} stopOpacity="0.9" />
+                <stop offset="55%" stopColor={KIND_COLOR.agent} stopOpacity="0.35" />
+                <stop offset="100%" stopColor={KIND_COLOR.agent} stopOpacity="0" />
+              </radialGradient>
+              <radialGradient id="brain-bg" cx="50%" cy="50%" r="60%">
+                <stop offset="0%" stopColor={KIND_COLOR.agent} stopOpacity="0.10" />
+                <stop offset="100%" stopColor={KIND_COLOR.agent} stopOpacity="0" />
+              </radialGradient>
+            </defs>
 
-          {/* Edges: faint spine + a bead of energy flowing along it */}
-          {links.map((l, i) => {
-            const color = KIND_COLOR[l.target.kind === "hub" ? l.source.kind : l.target.kind];
-            const dur = 1.4 + (i % 5) * 0.35;
-            return (
-              <g key={i}>
-                <line x1={l.source.x} y1={l.source.y} x2={l.target.x} y2={l.target.y}
-                  stroke={color} strokeOpacity={0.16} strokeWidth={1.4} />
-                <line x1={l.target.x} y1={l.target.y} x2={l.source.x} y2={l.source.y}
-                  stroke={color} strokeOpacity={0.5} strokeWidth={2}
-                  strokeLinecap="round" strokeDasharray="1 14">
-                  <animate attributeName="stroke-dashoffset" values="15;0" dur={`${dur}s`} repeatCount="indefinite" />
-                </line>
-              </g>
-            );
-          })}
+            {/* Background — also the pan surface */}
+            <rect x={0} y={0} width={W} height={H} fill="url(#brain-bg)" onPointerDown={onBgDown} className="cursor-grab active:cursor-grabbing" />
 
-          {/* Nodes */}
-          {simNodes.map((n, idx) => {
-            const role = roleOf(n);
-            const color = KIND_COLOR[n.kind];
-            if (role === "core") {
-              const display = (n.emoji && n.emoji.trim()) || n.label.slice(0, 2).toUpperCase();
-              return (
-                <g key={n.id} transform={`translate(${n.x},${n.y})`}>
-                  <circle r={54} fill="url(#brain-core)">
-                    <animate attributeName="r" values="50;58;50" dur="4s" repeatCount="indefinite" />
-                    <animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite" />
-                  </circle>
-                  <circle r={26} fill="none" stroke={KIND_COLOR.agent} strokeWidth={1.5} opacity={0.5}>
-                    <animate attributeName="r" values="26;48" dur="3.2s" repeatCount="indefinite" />
-                    <animate attributeName="opacity" values="0.5;0" dur="3.2s" repeatCount="indefinite" />
-                  </circle>
-                  <circle r={24} fill={KIND_COLOR.agent} filter="url(#brain-glow)" />
-                  <circle r={24} fill="none" stroke="#ffffff" strokeOpacity={0.35} strokeWidth={1} />
-                  <text textAnchor="middle" dominantBaseline="central" fontSize={display.length <= 2 ? 20 : 11} fontWeight={700} fill="#1a1030">
-                    {display.length > 8 ? display.slice(0, 8) : display}
-                  </text>
-                </g>
-              );
-            }
-            const isSel = selected?.id === n.id;
-            const r = RADIUS[role] + (isSel ? 3 : 0);
-            const beat = 2.4 + (idx % 6) * 0.4;
-            const begin = `${(idx % 6) * 0.3}s`;
-            const isHub = role === "hub";
-            const showLabel = isHub || isSel || !hideLeafLabels;
-            return (
-              <g key={n.id} transform={`translate(${n.x},${n.y})`} className="cursor-grab active:cursor-grabbing"
-                 onPointerDown={onDown(n)} onClick={() => pick(n)}>
-                <circle r={r} fill={color} filter="url(#brain-glow)" opacity={0.3}>
-                  <animate attributeName="r" values={`${r};${r + 6};${r}`} dur={`${beat}s`} begin={begin} repeatCount="indefinite" />
-                  <animate attributeName="opacity" values="0.32;0.08;0.32" dur={`${beat}s`} begin={begin} repeatCount="indefinite" />
-                </circle>
-                <circle r={r} fill={color} fillOpacity={isSel ? 1 : 0.95}
-                  stroke={isSel ? "#fff" : "#ffffff"} strokeOpacity={isSel ? 1 : 0.25} strokeWidth={isSel ? 2 : 1} />
-                {n.emoji && isHub && (
-                  <text textAnchor="middle" dominantBaseline="central" fontSize={11} style={{ pointerEvents: "none" }}>{n.emoji}</text>
-                )}
-                {showLabel && (
-                  <text x={r + 4} y={4} fontSize={isHub ? 11 : 10}
-                    className={isHub ? "fill-foreground font-medium" : "fill-foreground/80"} style={{ pointerEvents: "none" }}>
-                    {n.label.length > 22 ? `${n.label.slice(0, 22)}…` : n.label}
-                  </text>
-                )}
-              </g>
-            );
-          })}
-        </svg>
-      </div>
+            <g transform={`translate(${v.tx},${v.ty}) scale(${v.k})`}>
+              {/* Edges: faint spine + a bead of energy flowing along it */}
+              {links.map((l, i) => {
+                const color = KIND_COLOR[l.target.kind === "hub" ? l.source.kind : l.target.kind];
+                const dur = 1.4 + (i % 5) * 0.35;
+                return (
+                  <g key={i}>
+                    <line x1={l.source.x} y1={l.source.y} x2={l.target.x} y2={l.target.y}
+                      stroke={color} strokeOpacity={0.16} strokeWidth={1.4} />
+                    <line x1={l.target.x} y1={l.target.y} x2={l.source.x} y2={l.source.y}
+                      stroke={color} strokeOpacity={0.5} strokeWidth={2}
+                      strokeLinecap="round" strokeDasharray="1 14">
+                      <animate attributeName="stroke-dashoffset" values="15;0" dur={`${dur}s`} repeatCount="indefinite" />
+                    </line>
+                  </g>
+                );
+              })}
+
+              {/* Nodes */}
+              {simNodes.map((n, idx) => {
+                const role = roleOf(n);
+                const color = KIND_COLOR[n.kind];
+                if (role === "core") {
+                  const display = (n.emoji && n.emoji.trim()) || n.label.slice(0, 2).toUpperCase();
+                  return (
+                    <g key={n.id} transform={`translate(${n.x},${n.y})`}>
+                      <circle r={54} fill="url(#brain-core)">
+                        <animate attributeName="r" values="50;58;50" dur="4s" repeatCount="indefinite" />
+                        <animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite" />
+                      </circle>
+                      <circle r={26} fill="none" stroke={KIND_COLOR.agent} strokeWidth={1.5} opacity={0.5}>
+                        <animate attributeName="r" values="26;48" dur="3.2s" repeatCount="indefinite" />
+                        <animate attributeName="opacity" values="0.5;0" dur="3.2s" repeatCount="indefinite" />
+                      </circle>
+                      <circle r={24} fill={KIND_COLOR.agent} filter="url(#brain-glow)" />
+                      <circle r={24} fill="none" stroke="#ffffff" strokeOpacity={0.35} strokeWidth={1} />
+                      <text textAnchor="middle" dominantBaseline="central" fontSize={display.length <= 2 ? 20 : 11} fontWeight={700} fill="#1a1030">
+                        {display.length > 8 ? display.slice(0, 8) : display}
+                      </text>
+                    </g>
+                  );
+                }
+                const isSel = selected?.id === n.id;
+                const r = RADIUS[role] + (isSel ? 3 : 0);
+                const beat = 2.4 + (idx % 6) * 0.4;
+                const begin = `${(idx % 6) * 0.3}s`;
+                const isHub = role === "hub";
+                const showLabel = isHub || isSel || !hideLeafLabels;
+                return (
+                  <g key={n.id} transform={`translate(${n.x},${n.y})`} className="cursor-grab active:cursor-grabbing"
+                     onPointerDown={onNodeDown(n)} onClick={() => pick(n)}>
+                    <circle r={r} fill={color} filter="url(#brain-glow)" opacity={0.3}>
+                      <animate attributeName="r" values={`${r};${r + 6};${r}`} dur={`${beat}s`} begin={begin} repeatCount="indefinite" />
+                      <animate attributeName="opacity" values="0.32;0.08;0.32" dur={`${beat}s`} begin={begin} repeatCount="indefinite" />
+                    </circle>
+                    <circle r={r} fill={color} fillOpacity={isSel ? 1 : 0.95}
+                      stroke={isSel ? "#fff" : "#ffffff"} strokeOpacity={isSel ? 1 : 0.25} strokeWidth={isSel ? 2 : 1} />
+                    {n.emoji && isHub && (
+                      <text textAnchor="middle" dominantBaseline="central" fontSize={11} style={{ pointerEvents: "none" }}>{n.emoji}</text>
+                    )}
+                    {showLabel && (
+                      <text x={r + 4} y={4} fontSize={isHub ? 11 : 10}
+                        className={isHub ? "fill-foreground font-medium" : "fill-foreground/80"} style={{ pointerEvents: "none" }}>
+                        {n.label.length > 22 ? `${n.label.slice(0, 22)}…` : n.label}
+                      </text>
+                    )}
+                  </g>
+                );
+              })}
+            </g>
+          </svg>
+        </div>
 
-      <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-fg">
-        {legendKinds.map((k) => (
-          <span key={k} className="inline-flex items-center gap-1">
-            <span className="size-2 rounded-full" style={{ background: KIND_COLOR[k] }} /> {kindLabel(k)}
-          </span>
-        ))}
-        <span className="ml-auto">{t("agents_ui.nodes_drag_hint", { n: String(nodes.length) })}</span>
+        {/* Legend + hint (kept inside the fullscreen container too) */}
+        <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-fg">
+          {legendKinds.map((k) => (
+            <span key={k} className="inline-flex items-center gap-1">
+              <span className="size-2 rounded-full" style={{ background: KIND_COLOR[k] }} /> {kindLabel(k)}
+            </span>
+          ))}
+          <span className="ml-auto">{t("agents_ui.brain_pan_hint")} · {t("agents_ui.nodes_drag_hint", { n: String(nodes.length) })}</span>
+        </div>
       </div>
+
       {selected && (
         <div className="rounded-lg border border-border bg-card p-3 text-xs">
           <div className="flex items-center gap-2">