@agentprojectcontext/apx 1.68.0 → 1.70.0

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

@@ -1,21 +1,34 @@
 import { useEffect, useRef, useState } from "react";
 import {
-  forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide,
+  forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide, forceX, forceY,
   type Simulation,
 } from "d3-force";
 import { t } from "../../i18n";
 
-// Animated relational "brain" graph (d3-force + SVG), inspired by panda's
-// AgentBrainGraphCanvas. Center = agent; items are real project data
-// (memory facts, threads, tasks, heartbeats, hierarchy) with semantic edges.
+// 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).
+//
+// 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.
+
+export type BrainKind =
+  | "agent" | "memory" | "thread" | "task" | "routine" | "agentlink" | "hub";
+export type BrainRole = "core" | "hub" | "leaf";
 
 export interface BrainNode {
   id: string;
   label: string;
-  kind: "agent" | "memory" | "thread" | "task" | "routine" | "agentlink";
-  relation: string;
+  kind: BrainKind;
+  role?: BrainRole;       // visual weight; defaults to "leaf"
+  relation?: string;
   detail?: string;
+  emoji?: string;
+  slug?: string;          // for navigation (project map)
 }
+export interface BrainEdge { source: string; target: string; }
 
 interface SimNode extends BrainNode {
   x?: number; y?: number; vx?: number; vy?: number;
@@ -23,20 +36,32 @@ interface SimNode extends BrainNode {
 }
 interface SimLink { source: SimNode; target: SimNode; }
 
-const KIND_COLOR: Record<BrainNode["kind"], string> = {
+const KIND_COLOR: Record<BrainKind, string> = {
   agent: "#a78bfa", memory: "#38bdf8", thread: "#34d399",
-  task: "#fbbf24", routine: "#f472b6", agentlink: "#c084fc",
+  task: "#fbbf24", routine: "#f472b6", agentlink: "#c084fc", hub: "#94a3b8",
 };
-function kindLabels(): Record<BrainNode["kind"], string> {
-  return {
+function kindLabel(k: BrainKind): string {
+  const m: Record<string, string> = {
     agent: t("agents_ui.kind_agent"), memory: t("agents_ui.kind_memory"), thread: t("agents_ui.kind_thread"),
     task: t("agents_ui.kind_task"), routine: t("agents_ui.kind_routine"), agentlink: t("agents_ui.kind_hierarchy"),
   };
+  return m[k] ?? k;
 }
 
-const W = 760, H = 460;
+const RADIUS: Record<BrainRole, number> = { core: 24, hub: 12, leaf: 6 };
+const roleOf = (n: BrainNode): BrainRole => n.role ?? "leaf";
+
+export function BrainGraph({
+  nodes, edges, height = 460, onNodeClick,
+}: {
+  nodes: BrainNode[];
+  edges: BrainEdge[];
+  height?: number;
+  onNodeClick?: (n: BrainNode) => void;
+}) {
+  const W = 760, H = height;
+  const CX = W / 2, CY = H / 2;
 
-export function AgentBrainGraph({ center, nodes }: { center: string; nodes: BrainNode[] }) {
   const svgRef = useRef<SVGSVGElement | null>(null);
   const simRef = useRef<Simulation<SimNode, SimLink> | null>(null);
   const nodesRef = useRef<SimNode[]>([]);
@@ -45,22 +70,56 @@ export function AgentBrainGraph({ center, nodes }: { center: string; nodes: Brai
   const [, setVersion] = useState(0);
   const [selected, setSelected] = useState<BrainNode | null>(null);
 
+  const hideLeafLabels = nodes.length > 44;
+
   useEffect(() => {
-    const centerNode: SimNode = { id: "__center", label: center, kind: "agent", relation: "self", x: W / 2, y: H / 2, fx: W / 2, fy: H / 2 };
-    const simNodes: SimNode[] = [centerNode, ...nodes.map((n) => ({ ...n }))];
-    const links: SimLink[] = simNodes.slice(1).map((n) => ({ source: centerNode, target: n }));
+    // 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>();
+    hubs.forEach((h, i) => hubAngle.set(h.id, (i / Math.max(1, hubs.length)) * Math.PI * 2 - Math.PI / 2));
+
+    const simNodes: SimNode[] = nodes.map((n, i) => {
+      const role = roleOf(n);
+      if (role === "core") return { ...n, x: CX, y: CY, fx: CX, fy: CY };
+      const a = hubAngle.get(n.id) ?? (i / Math.max(1, nodes.length)) * Math.PI * 2;
+      const r = role === "hub" ? coreR : coreR * 1.7;
+      return { ...n, x: CX + Math.cos(a) * r, y: CY + Math.sin(a) * r };
+    });
+    const byId = new Map(simNodes.map((n) => [n.id, n]));
+    const links: SimLink[] = edges
+      .map((e) => ({ source: byId.get(e.source), target: byId.get(e.target) }))
+      .filter((l): l is SimLink => !!l.source && !!l.target);
+
     nodesRef.current = simNodes;
     linksRef.current = links;
+    setVersion((v) => v + 1); // commit the seeded layout even if the tick timer is throttled
+
+    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;
+    };
+    const charge = (n: SimNode) => {
+      const r = roleOf(n);
+      return r === "core" ? -620 : r === "hub" ? -320 : -110;
+    };
 
     const sim = forceSimulation<SimNode>(simNodes)
-      .force("link", forceLink<SimNode, SimLink>(links).distance(120).strength(0.5))
-      .force("charge", forceManyBody().strength(-220))
-      .force("center", forceCenter(W / 2, H / 2).strength(0.05))
-      .force("collide", forceCollide(26))
+      .force("link", forceLink<SimNode, SimLink>(links).distance(linkDist).strength(0.55))
+      .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("collide", forceCollide<SimNode>((n) => RADIUS[roleOf(n)] + 8))
+      .alphaDecay(0.028)
       .on("tick", () => setVersion((v) => v + 1));
     simRef.current = sim;
     return () => { sim.stop(); };
-  }, [center, nodes]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodes, edges, height]);
 
   const toSvg = (e: React.PointerEvent) => {
     const rect = svgRef.current!.getBoundingClientRect();
@@ -70,7 +129,7 @@ export function AgentBrainGraph({ center, nodes }: { center: string; nodes: Brai
     };
   };
   const onDown = (n: SimNode) => (e: React.PointerEvent) => {
-    if (n.id === "__center") return;
+    if (roleOf(n) === "core") return;
     dragRef.current = n;
     (e.target as Element).setPointerCapture?.(e.pointerId);
     simRef.current?.alphaTarget(0.3).restart();
@@ -91,41 +150,106 @@ export function AgentBrainGraph({ center, nodes }: { center: string; nodes: Brai
   const simNodes = nodesRef.current;
   const links = linksRef.current;
 
+  // Legend: the item kinds actually present (exclude the core agent + structural hubs).
+  const legendKinds = [...new Set(nodes.map((n) => n.kind))].filter((k) => k !== "agent" && k !== "hub");
+
+  const pick = (n: SimNode) => { setSelected(n); onNodeClick?.(n); };
+
   return (
     <div className="space-y-3">
-      <div className="overflow-hidden rounded-xl border border-border bg-muted/10">
+      <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}`}
-          className="h-[460px] w-full touch-none select-none"
+          style={{ height }}
+          className="w-full touch-none select-none"
           onPointerMove={onMove}
           onPointerUp={onUp}
           onPointerLeave={onUp}
         >
-          {links.map((l, i) => (
-            <line key={i} x1={l.source.x} y1={l.source.y} x2={l.target.x} y2={l.target.y}
-              stroke={KIND_COLOR[l.target.kind]} strokeOpacity={0.22} strokeWidth={1.5} />
-          ))}
-          {simNodes.map((n) => {
-            if (n.id === "__center") {
+          <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>
+
+          <rect x={0} y={0} width={W} height={H} fill="url(#brain-bg)" />
+
+          {/* 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={22} fill={KIND_COLOR.agent} />
-                  <text textAnchor="middle" y={4} fontSize={11} fontWeight={700} fill="#1a1a1a">
-                    {center.length > 8 ? center.slice(0, 8) : center}
+                  <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={() => setSelected(n)}>
-                <circle r={isSel ? 9 : 6} fill={KIND_COLOR[n.kind]} fillOpacity={isSel ? 1 : 0.9}
-                  stroke={isSel ? "#fff" : "none"} strokeWidth={isSel ? 2 : 0} />
-                <text x={10} y={4} fontSize={10} className="fill-foreground/80">
-                  {n.label.length > 22 ? `${n.label.slice(0, 22)}…` : n.label}
-                </text>
+                 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>
             );
           })}
@@ -133,22 +257,20 @@ export function AgentBrainGraph({ center, nodes }: { center: string; nodes: Brai
       </div>
 
       <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-fg">
-        {(() => {
-          const labels = kindLabels();
-          return (Object.keys(labels) as BrainNode["kind"][]).filter((k) => k !== "agent").map((k) => (
-            <span key={k} className="inline-flex items-center gap-1">
-              <span className="size-2 rounded-full" style={{ background: KIND_COLOR[k] }} /> {labels[k]}
-            </span>
-          ));
-        })()}
+        {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>
       </div>
       {selected && (
         <div className="rounded-lg border border-border bg-card p-3 text-xs">
           <div className="flex items-center gap-2">
             <span className="size-2 rounded-full" style={{ background: KIND_COLOR[selected.kind] }} />
+            {selected.emoji && <span>{selected.emoji}</span>}
             <span className="font-medium">{selected.label}</span>
-            <span className="text-muted-fg">· {selected.relation}</span>
+            {selected.relation && <span className="text-muted-fg">· {selected.relation}</span>}
           </div>
           {selected.detail && <p className="mt-1 whitespace-pre-wrap text-muted-fg">{selected.detail}</p>}
         </div>

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import useSWR from "swr";
 import {
@@ -6,7 +6,7 @@ import {
   Heart, MessagesSquare, Save, Send, Settings, Sparkles, Trash2, Wrench, Activity,
 } from "lucide-react";
 import { Agents, Conversations, Messages, Routines, Tasks, Tools } from "../../lib/api";
-import type { AgentDetail, AgentEntry, MessageEntry, RoutineEntry } from "../../types/daemon";
+import type { AgentDetail, AgentEntry, FileContent, MessageEntry, RoutineEntry } from "../../types/daemon";
 import { Section } from "../../components/Section";
 import { Badge, Button, Field, Input, Loading, Switch, Textarea } from "../../components/ui";
 import { Tip } from "../../components/ui/tip";
@@ -14,10 +14,11 @@ import { UiSelect } from "../../components/UiSelect";
 import { useToast } from "../../components/Toast";
 import { ConfirmDialog } from "../../components/common/ConfirmDialog";
 import { EmojiInput, AutonomyPicker, AreaRoleFields } from "../../components/agents/AgentFormFields";
+import { FileViewer } from "../../components/files/FileViewer";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import type { AgentAutonomy } from "../../types/daemon";
-import { AgentBrainGraph, type BrainNode } from "./AgentBrainGraph";
+import { BrainGraph, type BrainNode, type BrainEdge } from "./AgentBrainGraph";
 
 type TabKey = "overview" | "memories" | "records" | "sleep" | "brain" | "config";
 function buildTabs(): { key: TabKey; label: string; icon: typeof Bot }[] {
@@ -167,7 +168,7 @@ export function AgentDetailScreen({ pid }: { pid: string }) {
         </div>
       )}
 
-      {tab === "memories" && <MemoryEditor pid={pid} slug={slug} initial={a.memory || ""} onSaved={() => detail.mutate()} />}
+      {tab === "memories" && <MemoryEditor pid={pid} slug={slug} onSaved={() => detail.mutate()} />}
 
       {tab === "records" && <RecordsList records={records.data || []} loading={records.isLoading} />}
 
@@ -176,6 +177,7 @@ export function AgentDetailScreen({ pid }: { pid: string }) {
       {tab === "brain" && (
         <BrainTab
           slug={slug}
+          emoji={a.emoji || undefined}
           memory={a.memory || ""}
           threads={(threads.data || []).map((t) => ({ id: t.id, label: t.title || t.filename }))}
           tasks={myTasks.map((t) => ({ id: t.id, label: t.title, detail: t.body || undefined }))}
@@ -311,26 +313,38 @@ function Stat({ label, value, icon: I }: { label: string; value: number; icon: t
   );
 }
 
-function MemoryEditor({ pid, slug, initial, onSaved }: { pid: string; slug: string; initial: string; onSaved: () => void }) {
+// Durable memory for a single agent, using the same docs-style editor as the
+// project /memories surface (markdown edit / split-preview / save) instead of a
+// bare textarea.
+function MemoryEditor({ pid, slug, onSaved }: { pid: string; slug: string; onSaved: () => void }) {
   const toast = useToast();
-  const [value, setValue] = useState(initial);
-  const [busy, setBusy] = useState(false);
-  useEffect(() => { setValue(initial); }, [initial]);
-  const dirty = value !== initial;
-  const save = async () => {
-    setBusy(true);
-    try { await Agents.memory.put(pid, slug, value); toast.success(t("project.agent_detail.memory_saved")); onSaved(); }
-    catch (e) { toast.error((e as Error).message); }
-    finally { setBusy(false); }
+  const body = useSWR(`/memory/${pid}/agent:${slug}`, () => Agents.memory.get(pid, slug).then((r) => r.body));
+
+  const file = useMemo<FileContent | null>(() => {
+    if (body.data === undefined) return null;
+    const content = body.data ?? "";
+    return {
+      path: `agents/${slug}/memory.md`,
+      name: "memory.md",
+      kind: "markdown",
+      size: content.length,
+      modified: "",
+      encoding: "utf8",
+      content,
+    };
+  }, [body.data, slug]);
+
+  const onSave = async (content: string) => {
+    await Agents.memory.put(pid, slug, content);
+    toast.success(t("project.agent_detail.memory_saved"));
+    void body.mutate(content, { revalidate: false });
+    onSaved();
   };
+
   return (
-    <Section title={t("project.agent_detail.memory_title")} description={`~/.apx/projects/<id>/agents/${slug}/memory.md — ${t("agents_ui.memory_durable_desc")}`}>
-      <Textarea rows={16} className="font-mono text-xs" value={value} onChange={(e) => setValue(e.target.value)} placeholder={t("project.agent_detail.memory_empty")} />
-      <div className="mt-2 flex items-center justify-between">
-        <span className="text-[11px] text-muted-fg">{value.length} {t("project.memories.chars")}</span>
-        <Button size="sm" variant="primary" loading={busy} disabled={!dirty} onClick={save}><Save size={12} /> {t("project.memories.save_btn")}</Button>
-      </div>
-    </Section>
+    <div className="flex h-[65vh] min-h-[420px] flex-col overflow-hidden rounded-xl border border-border bg-card">
+      <FileViewer file={file} loading={body.isLoading} onSave={onSave} />
+    </div>
   );
 }
 
@@ -447,10 +461,28 @@ function ToolsPicker({ value, onChange }: { value: string; onChange: (v: string)
   );
 }
 
+// Cross-link heuristic: two items are "related" when their titles share a
+// meaningful word (ignoring short/stop words). Used to wire tasks↔threads so
+// the brain reads as a web, not a wheel.
+const STOP = new Set([
+  "the", "and", "for", "with", "from", "into", "your", "that", "this", "una", "las", "los",
+  "del", "por", "con", "para", "post", "posts", "demo", "week", "weekly",
+]);
+function keywords(s: string): Set<string> {
+  return new Set(
+    s.toLowerCase().split(/[^a-záéíóúñ0-9]+/).filter((w) => w.length > 3 && !STOP.has(w)),
+  );
+}
+function shareKeyword(a: Set<string>, b: Set<string>): boolean {
+  for (const w of a) if (b.has(w)) return true;
+  return false;
+}
+
 function BrainTab({
-  slug, memory, threads, tasks, routines, parent, children,
+  slug, emoji, memory, threads, tasks, routines, parent, children,
 }: {
   slug: string;
+  emoji?: string;
   memory: string;
   threads: { id: string; label: string }[];
   tasks: { id: string; label: string; detail?: string }[];
@@ -458,22 +490,64 @@ function BrainTab({
   parent: string | null;
   children: string[];
 }) {
-  const nodes: BrainNode[] = useMemo(() => {
-    const out: BrainNode[] = [];
-    memoryFacts(memory).forEach((f, i) => out.push({ id: `m${i}`, label: f, kind: "memory", relation: "knows", detail: f }));
-    threads.slice(0, 8).forEach((t) => out.push({ id: `th-${t.id}`, label: t.label, kind: "thread", relation: "in_thread" }));
-    tasks.slice(0, 8).forEach((t) => out.push({ id: `ts-${t.id}`, label: t.label, kind: "task", relation: "handles_task", detail: t.detail }));
-    routines.forEach((r) => out.push({ id: `rt-${r.name}`, label: r.name, kind: "routine", relation: "ticks", detail: `schedule: ${r.schedule}` }));
-    if (parent) out.push({ id: `p-${parent}`, label: parent, kind: "agentlink", relation: "reports_to" });
-    children.forEach((c) => out.push({ id: `c-${c}`, label: c, kind: "agentlink", relation: "orchestrates" }));
-    return out;
-  }, [memory, threads, tasks, routines, parent, children]);
+  const { nodes, edges } = useMemo(() => {
+    const nodes: BrainNode[] = [];
+    const edges: BrainEdge[] = [];
+    const CORE = "__core";
+    nodes.push({ id: CORE, label: slug, kind: "agent", role: "core", emoji, relation: "self" });
+
+    // A category hub groups its items so items hang off the hub (a two-level
+    // tree) instead of all wiring straight to the core.
+    const hub = (id: string, label: string, kind: BrainNode["kind"]) => {
+      nodes.push({ id, label, kind, role: "hub", relation: "cluster" });
+      edges.push({ source: CORE, target: id });
+    };
+
+    const mem = memoryFacts(memory);
+    const th = threads.slice(0, 8);
+    const ts = tasks.slice(0, 8);
+
+    if (mem.length) {
+      hub("hub-mem", t("agents_ui.kind_memory"), "memory");
+      mem.forEach((f, i) => { nodes.push({ id: `m${i}`, label: f, kind: "memory", relation: "knows", detail: f }); edges.push({ source: "hub-mem", target: `m${i}` }); });
+    }
+    if (th.length) {
+      hub("hub-thread", t("agents_ui.kind_thread"), "thread");
+      th.forEach((x) => { nodes.push({ id: `th-${x.id}`, label: x.label, kind: "thread", relation: "in_thread" }); edges.push({ source: "hub-thread", target: `th-${x.id}` }); });
+    }
+    if (ts.length) {
+      hub("hub-task", t("agents_ui.kind_task"), "task");
+      ts.forEach((x) => { nodes.push({ id: `ts-${x.id}`, label: x.label, kind: "task", relation: "handles_task", detail: x.detail }); edges.push({ source: "hub-task", target: `ts-${x.id}` }); });
+    }
+    if (routines.length) {
+      hub("hub-routine", t("agents_ui.kind_routine"), "routine");
+      routines.forEach((r) => { nodes.push({ id: `rt-${r.name}`, label: r.name, kind: "routine", relation: "ticks", detail: `schedule: ${r.schedule}` }); edges.push({ source: "hub-routine", target: `rt-${r.name}` }); });
+    }
+    if (children.length) {
+      hub("hub-team", t("agents_ui.kind_hierarchy"), "agentlink");
+      children.forEach((c) => { nodes.push({ id: `c-${c}`, label: c, kind: "agentlink", role: "hub", relation: "orchestrates", slug: c }); edges.push({ source: "hub-team", target: `c-${c}` }); });
+    }
+    if (parent) {
+      nodes.push({ id: `p-${parent}`, label: parent, kind: "agentlink", role: "hub", relation: "reports_to", slug: parent });
+      edges.push({ source: `p-${parent}`, target: CORE });
+    }
+
+    // Cross-links: wire a task to a thread that shares a keyword (first match).
+    const thKw = th.map((x) => ({ id: `th-${x.id}`, kw: keywords(x.label) }));
+    ts.forEach((x) => {
+      const kw = keywords(x.label);
+      const hit = thKw.find((tk) => shareKeyword(kw, tk.kw));
+      if (hit) edges.push({ source: `ts-${x.id}`, target: hit.id });
+    });
+
+    return { nodes, edges };
+  }, [slug, emoji, memory, threads, tasks, routines, parent, children]);
 
   return (
     <Section title={t("project.agent_detail.brain_title")} description={t("project.agent_detail.brain_desc")}>
-      {nodes.length === 0
+      {nodes.length <= 1
         ? <p className="text-xs text-muted-fg">{t("project.agent_detail.brain_empty")}</p>
-        : <AgentBrainGraph center={slug} nodes={nodes} />}
+        : <BrainGraph nodes={nodes} edges={edges} />}
     </Section>
   );
 }