@agentprojectcontext/apx 1.67.0 → 1.69.0

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

@@ -1,11 +1,12 @@
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
-import { Bot, Crown, Eye, GitBranch, List, Plus, Send, Sparkles, Upload, Wrench } from "lucide-react";
+import { Activity, Bot, Crown, Eye, GitBranch, Heart, List, MessagesSquare, Plus, Send, Sparkles, Upload, Wrench, Zap } from "lucide-react";
 import { Agents } from "../../lib/api";
-import type { AgentEntry } from "../../types/daemon";
+import type { AgentEntry, AgentStats } from "../../types/daemon";
 import { Section } from "../../components/Section";
 import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch, Textarea } from "../../components/ui";
+import { Tip } from "../../components/ui/tip";
 import { UiSelect } from "../../components/UiSelect";
 import { useToast } from "../../components/Toast";
 import { EmojiInput, AutonomyPicker, AreaRoleFields } from "../../components/agents/AgentFormFields";
@@ -23,6 +24,44 @@ function agentVisual(a: AgentEntry) {
     : { gradient: "from-slate-600 to-gray-600", Icon: Bot };
 }
 
+// Icon + count summary (threads / records / tasks / heartbeats) mirroring the
+// agent Explorer, with an i18n tooltip on each so the icons are self-describing.
+const STAT_META: { key: keyof AgentStats; icon: typeof Bot; i18n: Parameters<typeof t>[0] }[] = [
+  { key: "threads",    icon: MessagesSquare, i18n: "agents_ui.stat_threads" },
+  { key: "records",    icon: Activity,       i18n: "agents_ui.stat_records" },
+  { key: "tasks",      icon: Zap,            i18n: "agents_ui.stat_tasks" },
+  { key: "heartbeats", icon: Heart,          i18n: "agents_ui.stat_heartbeats" },
+];
+
+function AgentStatRow({ stats, className }: { stats?: AgentStats; className?: string }) {
+  if (!stats) return null;
+  return (
+    <div className={cn("flex items-center gap-3 text-[11px] text-muted-fg", className)}>
+      {STAT_META.map(({ key, icon: I, i18n }) => (
+        <Tip key={key} content={t(i18n)}>
+          <span className="inline-flex items-center gap-1 tabular-nums">
+            <I size={12} /> {stats[key]}
+          </span>
+        </Tip>
+      ))}
+    </div>
+  );
+}
+
+// Group agents by their area (category). Named areas sort alphabetically;
+// uncategorized agents fall to the end.
+function groupByArea(agents: AgentEntry[]): { area: string | null; agents: AgentEntry[] }[] {
+  const map = new Map<string | null, AgentEntry[]>();
+  for (const a of agents) {
+    const k = a.area || null;
+    if (!map.has(k)) map.set(k, []);
+    map.get(k)!.push(a);
+  }
+  return [...map.entries()]
+    .sort(([a], [b]) => (a === null ? 1 : b === null ? -1 : a.localeCompare(b)))
+    .map(([area, agents]) => ({ area, agents }));
+}
+
 // Build parent→children map with panda's single-orchestrator fallback: if there
 // is exactly one master and an agent has no explicit parent, treat it as a child.
 function buildTree(agents: AgentEntry[]) {
@@ -50,7 +89,7 @@ function buildTree(agents: AgentEntry[]) {
 export function AgentsTab({ pid }: { pid: string }) {
   const navigate = useNavigate();
   const toast = useToast();
-  const list = useSWR(`/projects/${pid}/agents`, () => Agents.list(pid));
+  const list = useSWR(`/projects/${pid}/agents?stats=1`, () => Agents.list(pid, { stats: true }));
   const [view, setView] = useState<"hierarchy" | "list">("hierarchy");
   const [creating, setCreating] = useState(false);
 
@@ -174,26 +213,41 @@ function HierarchyView({
     <div className="space-y-8">
       {roots.map((root) => {
         const kids = childrenByParent.get(root.slug) || [];
+        const groups = groupByArea(kids);
+        const categorized = groups.some((g) => g.area);
         return (
           <div key={root.slug} className="flex flex-col items-center">
             <AgentCard agent={root} onOpen={onOpen} onChat={onChat} wide />
             {kids.length > 0 && (
               <>
                 <div className="h-5 w-px bg-border" />
-                <div className="flex flex-wrap items-start justify-center gap-4 border-t border-border pt-5">
-                  {kids.map((k) => (
-                    <div key={k.slug} className="flex flex-col items-center">
-                      <AgentCard agent={k} onOpen={onOpen} onChat={onChat} />
-                      {(childrenByParent.get(k.slug) || []).length > 0 && (
-                        <>
-                          <div className="h-4 w-px bg-border" />
-                          <div className="flex flex-wrap justify-center gap-3 border-t border-border pt-4">
-                            {(childrenByParent.get(k.slug) || []).map((g) => (
-                              <AgentCard key={g.slug} agent={g} onOpen={onOpen} onChat={onChat} compact />
-                            ))}
-                          </div>
-                        </>
+                {/* When children carry a category (area), lay them out grouped
+                    under a heading per category; otherwise keep the flat row. */}
+                <div className="flex flex-col gap-6 border-t border-border pt-5">
+                  {groups.map((g) => (
+                    <div key={g.area ?? "__none"} className="flex flex-col items-center gap-3">
+                      {categorized && (
+                        <span className="rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-fg">
+                          {g.area || t("agents_ui.uncategorized")} · {g.agents.length}
+                        </span>
                       )}
+                      <div className="flex flex-wrap items-start justify-center gap-4">
+                        {g.agents.map((k) => (
+                          <div key={k.slug} className="flex flex-col items-center">
+                            <AgentCard agent={k} onOpen={onOpen} onChat={onChat} />
+                            {(childrenByParent.get(k.slug) || []).length > 0 && (
+                              <>
+                                <div className="h-4 w-px bg-border" />
+                                <div className="flex flex-wrap justify-center gap-3 border-t border-border pt-4">
+                                  {(childrenByParent.get(k.slug) || []).map((gc) => (
+                                    <AgentCard key={gc.slug} agent={gc} onOpen={onOpen} onChat={onChat} compact />
+                                  ))}
+                                </div>
+                              </>
+                            )}
+                          </div>
+                        ))}
+                      </div>
                     </div>
                   ))}
                 </div>
@@ -236,6 +290,7 @@ function AgentCard({
         {agent.role && <Badge>{agent.role}</Badge>}
         {agent.model && !compact && <Badge tone="info">{agent.model}</Badge>}
       </div>
+      <AgentStatRow stats={agent.stats} className="mt-2" />
       <div className="mt-2 flex items-center gap-3 border-t border-border pt-2 text-xs text-muted-fg" onClick={(e) => e.stopPropagation()}>
         <button onClick={() => onOpen(agent.slug)} className="flex items-center gap-1 hover:text-foreground"><Eye size={12} /> {t("project.agents.view")}</button>
         <button onClick={() => onChat(agent.slug)} className="flex items-center gap-1 text-emerald-500 hover:text-emerald-400"><Send size={12} /> {t("project.agents.chat")}</button>
@@ -269,6 +324,7 @@ function ListView({ agents, onOpen, onChat }: { agents: AgentEntry[]; onOpen: (s
                 {a.tools?.map((tl) => <span key={tl} className="inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] text-muted-fg"><Wrench size={9} /> {tl}</span>)}
               </div>
             </div>
+            <AgentStatRow stats={a.stats} className="hidden shrink-0 sm:flex" />
             <div className="flex shrink-0 items-center gap-3 text-xs text-muted-fg" onClick={(e) => e.stopPropagation()}>
               <button onClick={() => onOpen(a.slug)} className="flex items-center gap-1 hover:text-foreground"><Eye size={12} /> {t("project.agents.view")}</button>
               <button onClick={() => onChat(a.slug)} className="flex items-center gap-1 text-emerald-500 hover:text-emerald-400"><Send size={12} /> {t("project.agents.chat")}</button>

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

@@ -1,16 +1,17 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { RefreshCw, Trash2 } from "lucide-react";
 import { Projects } from "../../lib/api";
 import { Section } from "../../components/Section";
-import { Button, Dialog, Empty, Loading } from "../../components/ui";
+import { Button, Dialog, Empty, Loading, Textarea } from "../../components/ui";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs";
 import { ConfigTabsEditor } from "../../components/config/ConfigTabsEditor";
-import { apcProjectSections, projectOverrideSections } from "../../components/config/project-config-sections";
+import { apcProjectSections, projectSettingsSections, projectEnginesSections } from "../../components/config/project-config-sections";
+import { TelegramTab } from "./TelegramTab";
 import { useToast } from "../../components/Toast";
 import { useProject } from "../../hooks/useProjects";
-import { flattenObject } from "../../lib/config-values";
+import { flattenObject, parseConfigJson } from "../../lib/config-values";
 import { isSecretMarker } from "../../lib/secrets";
 import { t } from "../../i18n";
 
@@ -36,54 +37,91 @@ export function ConfigTab({ pid }: { pid: string }) {
     cfg.mutate();
   };
 
+  const saveOverrideFields = async (set: Record<string, unknown>, unset: string[]) => {
+    await Projects.config.set(pid, set);
+    if (unset.length) await Projects.config.unset(pid, unset);
+    toast.success(t("project.config.save_fields_success"));
+    cfg.mutate();
+  };
+
   return (
     <div className="space-y-6">
       <Section title={t("project.config.section_title")} description={t("project.config.section_desc")}>
-        <Tabs defaultValue="override" className="space-y-4">
-          <TabsList>
-            <TabsTrigger value="override">Override</TabsTrigger>
-            <TabsTrigger value="project">APC project</TabsTrigger>
-            <TabsTrigger value="effective">Effective</TabsTrigger>
+        {/* Organized by concept: Settings · Engines · Telegram · Project · JSON. */}
+        <Tabs defaultValue="settings" className="space-y-4">
+          <TabsList className="flex flex-wrap">
+            <TabsTrigger value="settings">{t("project.config.tab_settings")}</TabsTrigger>
+            <TabsTrigger value="engines">{t("settings_ui.cfg_engines_label")}</TabsTrigger>
+            {!isBase && <TabsTrigger value="telegram">{t("project.nav.telegram")}</TabsTrigger>}
+            <TabsTrigger value="project">{t("project.config.tab_project")}</TabsTrigger>
+            <TabsTrigger value="json">JSON</TabsTrigger>
           </TabsList>
 
-          <TabsContent value="override">
+          <TabsContent value="settings">
             <ConfigTabsEditor
-              sections={projectOverrideSections()}
+              sections={projectSettingsSections()}
               source={cfg.data.project_only}
               placeholderSource={cfg.data.effective}
               jsonTitle={cfg.data.project_config_path}
-              jsonDescription=".apc/config.json. Overrides del proyecto."
-              onSaveFields={async (set, unset) => {
-                await Projects.config.set(pid, set);
-                if (unset.length) await Projects.config.unset(pid, unset);
-                toast.success(t("project.config.save_fields_success"));
-                cfg.mutate();
-              }}
+              onSaveFields={saveOverrideFields}
               onSaveJson={saveOverrideJson}
+              hideJson
             />
           </TabsContent>
 
+          <TabsContent value="engines">
+            <ConfigTabsEditor
+              sections={projectEnginesSections()}
+              source={cfg.data.project_only}
+              placeholderSource={cfg.data.effective}
+              jsonTitle={cfg.data.project_config_path}
+              onSaveFields={saveOverrideFields}
+              onSaveJson={saveOverrideJson}
+              hideJson
+            />
+          </TabsContent>
+
+          {!isBase && (
+            <TabsContent value="telegram">
+              <TelegramTab pid={pid} />
+            </TabsContent>
+          )}
+
           <TabsContent value="project">
             <ConfigTabsEditor
               sections={apcProjectSections()}
               source={cfg.data.apc_project || {}}
               jsonTitle={cfg.data.project_json_path}
-              jsonDescription=".apc/project.json. Metadata APC portable."
               onSaveFields={async (set, unset) => {
                 await Projects.apcProject.set(pid, cleanSet(set), unset);
                 toast.success(t("project.config.save_meta_success"));
                 cfg.mutate();
               }}
               onSaveJson={saveProjectJson}
+              hideJson
             />
           </TabsContent>
 
-          <TabsContent value="effective">
-            <div className="space-y-2">
-              <p className="text-xs text-muted-fg">{t("project.config.effective_read")}</p>
-              <pre className="max-h-96 overflow-auto rounded-lg border border-border bg-muted/40 p-3 text-xs">
-                {JSON.stringify(cfg.data.effective, null, 2)}
-              </pre>
+          <TabsContent value="json">
+            <div className="space-y-6">
+              <JsonEditor
+                title={cfg.data.project_config_path}
+                description=".apc/config.json — overrides del proyecto."
+                source={cfg.data.project_only}
+                onSave={saveOverrideJson}
+              />
+              <JsonEditor
+                title={cfg.data.project_json_path}
+                description=".apc/project.json — metadata APC portable."
+                source={cfg.data.apc_project || {}}
+                onSave={saveProjectJson}
+              />
+              <div className="space-y-2">
+                <p className="text-xs text-muted-fg">{t("project.config.effective_read")}</p>
+                <pre className="max-h-96 overflow-auto rounded-lg border border-border bg-muted/40 p-3 text-xs">
+                  {JSON.stringify(cfg.data.effective, null, 2)}
+                </pre>
+              </div>
             </div>
           </TabsContent>
         </Tabs>
@@ -216,6 +254,53 @@ function DangerZone({
   );
 }
 
+// Raw JSON editor for one config file (redacted secrets echo back untouched —
+// the daemon restores real values on save).
+function JsonEditor({
+  title,
+  description,
+  source,
+  onSave,
+}: {
+  title: string;
+  description?: string;
+  source: Record<string, unknown>;
+  onSave: (next: Record<string, unknown>) => Promise<void>;
+}) {
+  const [raw, setRaw] = useState("");
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    setRaw(JSON.stringify(source || {}, null, 2));
+    setError("");
+  }, [source]);
+
+  const save = async () => {
+    setError("");
+    setBusy(true);
+    try {
+      await onSave(parseConfigJson(raw));
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <div>
+        <h3 className="text-sm font-medium">{title}</h3>
+        {description && <p className="text-xs text-muted-fg">{description}</p>}
+      </div>
+      <Textarea rows={14} className="font-mono text-xs" value={raw} onChange={(e) => setRaw(e.target.value)} />
+      {error && <p className="text-xs text-destructive">{error}</p>}
+      <Button variant="primary" loading={busy} onClick={save}>{t("settings_ui.save_json")}</Button>
+    </div>
+  );
+}
+
 function cleanSet(set: Record<string, unknown>) {
   const out: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(flattenObject(set))) {

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

@@ -1,134 +1,13 @@
-import { useEffect, useState } from "react";
-import useSWR from "swr";
-import { Bot, Brain, ChevronDown, ChevronRight, Crown, Save } from "lucide-react";
-import { Agents, Projects } from "../../lib/api";
-import type { AgentEntry } from "../../types/daemon";
-import { Section } from "../../components/Section";
-import { Button, Empty, Loading, Textarea } from "../../components/ui";
-import { useToast } from "../../components/Toast";
-import { t } from "../../i18n";
-
-// Editable markdown memory block with dirty-tracking + save.
-function MemoryEditor({
-  load,
-  save,
-  rows = 10,
-  placeholder,
-}: {
-  load: () => Promise<string>;
-  save: (body: string) => Promise<void>;
-  rows?: number;
-  placeholder?: string;
-}) {
-  const toast = useToast();
-  const [original, setOriginal] = useState<string | null>(null);
-  const [value, setValue] = useState("");
-  const [busy, setBusy] = useState(false);
-
-  useEffect(() => {
-    let live = true;
-    load().then((b) => { if (live) { setOriginal(b); setValue(b); } }).catch(() => { if (live) { setOriginal(""); setValue(""); } });
-    return () => { live = false; };
-  }, [load]);
-
-  if (original === null) return <Loading />;
-  const dirty = value !== original;
-
-  const onSave = async () => {
-    setBusy(true);
-    try {
-      await save(value);
-      setOriginal(value);
-      toast.success(t("project.memories.saved"));
-    } catch (e) { toast.error((e as Error).message); }
-    finally { setBusy(false); }
-  };
-
-  return (
-    <div className="space-y-2">
-      <Textarea
-        rows={rows}
-        className="font-mono text-xs"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        placeholder={placeholder}
-      />
-      <div className="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={onSave}>
-          <Save size={12} /> {t("project.memories.save_btn")}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function AgentMemoryRow({ pid, agent }: { pid: string; agent: AgentEntry }) {
-  const [open, setOpen] = useState(false);
-  const Icon = agent.is_master ? Crown : Bot;
-  return (
-    <li className="rounded-xl border border-border bg-muted/30">
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        className="flex w-full items-center gap-3 px-3 py-2 text-left"
-      >
-        {open ? <ChevronDown size={14} className="text-muted-fg" /> : <ChevronRight size={14} className="text-muted-fg" />}
-        <Icon size={14} className={agent.is_master ? "text-violet-400" : "text-muted-fg"} />
-        <span className="text-sm font-medium">{agent.slug}</span>
-        {agent.role && <span className="text-xs text-muted-fg">· {agent.role}</span>}
-      </button>
-      {open && (
-        <div className="border-t border-border p-3">
-          <MemoryEditor
-            rows={8}
-            load={() => Agents.memory.get(pid, agent.slug).then((r) => r.body)}
-            save={(body) => Agents.memory.put(pid, agent.slug, body).then(() => {})}
-          />
-        </div>
-      )}
-    </li>
-  );
-}
+import { MemoryBrowser } from "../../components/memory/MemoryBrowser";
 
+// Durable memory surface. Same docs-style two-pane browser as /docs: a sidebar
+// listing the project ("General") memory plus every agent's memory, and a shared
+// markdown editor (edit / split-preview / save) on the right. Project memory is
+// .apc/memory.md; agent memory is ~/.apx/projects/<id>/agents/<slug>/memory.md.
 export function MemoriesTab({ pid }: { pid: string }) {
-  const agents = useSWR(`/projects/${pid}/agents`, () => Agents.list(pid));
-
   return (
-    <div className="space-y-6">
-      <Section
-        title={t("project.memories.project_title")}
-        description={t("project.memories.project_desc")}
-      >
-        <div className="flex items-start gap-3">
-          <div className="mt-1 flex size-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-sky-600 to-indigo-600">
-            <Brain className="size-4 text-white" />
-          </div>
-          <div className="min-w-0 flex-1">
-            <MemoryEditor
-              rows={12}
-              load={() => Projects.memory.get(pid).then((r) => r.body)}
-              save={(body) => Projects.memory.put(pid, body).then(() => {})}
-              placeholder={t("project.memories.project_ph")}
-            />
-          </div>
-        </div>
-      </Section>
-
-      <Section
-        title={t("project.memories.agents_title")}
-        description={t("project.memories.agents_desc")}
-      >
-        {agents.isLoading && <Loading />}
-        {!agents.isLoading && (agents.data?.length ?? 0) === 0 && (
-          <Empty>{t("project.memories.no_agents")}</Empty>
-        )}
-        <ul className="space-y-2">
-          {(agents.data || []).map((a) => (
-            <AgentMemoryRow key={a.slug} pid={pid} agent={a} />
-          ))}
-        </ul>
-      </Section>
+    <div className="h-full">
+      <MemoryBrowser pid={pid} />
     </div>
   );
 }

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

@@ -1,9 +1,11 @@
+import { useMemo } from "react";
 import useSWR from "swr";
 import { NavLink, useNavigate } from "react-router-dom";
-import { Bot, FileCode2, Heart, MessagesSquare, Puzzle, Zap, Crown, Activity } from "lucide-react";
+import { Bot, Briefcase, FileCode2, Heart, MessagesSquare, Puzzle, Zap, Crown, Activity } from "lucide-react";
 import { Agents, Artifacts, Mcps, Routines, Tasks } from "../../lib/api";
 import { Section } from "../../components/Section";
 import { StatusIcon, StatusBadge, effectiveStatus, statusLabel, TASK_STATUS_ORDER } from "../../components/tasks/taskStatus";
+import { BrainGraph, type BrainNode, type BrainEdge } from "./AgentBrainGraph";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import type { AgentEntry } from "../../types/daemon";
@@ -22,6 +24,10 @@ export function Overview({ pid }: { pid: string }) {
   const agentList = agents.data ?? [];
   const orchestrators = agentList.filter((a) => a.is_master || a.type === "orchestrator");
   const specialists = agentList.filter((a) => !(a.is_master || a.type === "orchestrator"));
+  // When agents carry an area, the project reads as a company: group the roster
+  // by area instead of the flat orchestrator/specialist split.
+  const areaGroups = groupByArea(agentList);
+  const hasAreas = areaGroups.some((g) => g.area);
   const activeRoutines = (routines.data ?? []).filter((r) => r.enabled).length;
   const openTasks = [...(tasks.data ?? [])].sort((a, b) => (b.created_at || "").localeCompare(a.created_at || "")).slice(0, 6);
 
@@ -35,8 +41,9 @@ export function Overview({ pid }: { pid: string }) {
         <Card title={t("project.overview.artifacts")}   value={artifacts.data?.length ?? "…"} href={`/p/${pid}/artifacts`} icon={FileCode2} />
       </div>
 
-      {/* Task workflow strip */}
-      {summary.data && summary.data.open > 0 && (
+      {/* Task workflow strip — always shown once the summary loads, so every
+          status reads at least 0 (parity with the base dashboard). */}
+      {summary.data && (
         <div className="flex flex-wrap gap-2">
           {TASK_STATUS_ORDER.map((s) => (
             <NavLink
@@ -52,11 +59,32 @@ export function Overview({ pid }: { pid: string }) {
         </div>
       )}
 
+      {/* Team brain — the whole agent map: orchestrators at the core, their
+          specialists clustered around them as satellites, all connected. */}
+      {agentList.length > 0 && (
+        <Section title={t("project.overview.brain_title")} description={t("project.overview.brain_desc")} className="!p-4">
+          <TeamBrain pid={pid} agents={agentList} navigate={navigate} />
+        </Section>
+      )}
+
       <div className="grid gap-4 lg:grid-cols-2">
         {/* Agent roster */}
         <Section title={t("project.overview.roster")} className="!p-4">
           {agentList.length === 0 ? (
             <p className="text-sm text-muted-fg">{t("project.overview.no_agents")}</p>
+          ) : hasAreas ? (
+            <div className="space-y-3">
+              {areaGroups.map((g) => (
+                <RosterRow
+                  key={g.area ?? "__none"}
+                  label={g.area || t("agents_ui.uncategorized")}
+                  icon={Briefcase}
+                  agents={g.agents}
+                  pid={pid}
+                  navigate={navigate}
+                />
+              ))}
+            </div>
           ) : (
             <div className="space-y-3">
               {orchestrators.length > 0 && (
@@ -105,6 +133,67 @@ export function Overview({ pid }: { pid: string }) {
   );
 }
 
+// Group agents by area (category); named areas first (alphabetical), the
+// uncategorized bucket last.
+function groupByArea(agents: AgentEntry[]): { area: string | null; agents: AgentEntry[] }[] {
+  const map = new Map<string | null, AgentEntry[]>();
+  for (const a of agents) {
+    const k = a.area || null;
+    if (!map.has(k)) map.set(k, []);
+    map.get(k)!.push(a);
+  }
+  return [...map.entries()]
+    .sort(([a], [b]) => (a === null ? 1 : b === null ? -1 : a.localeCompare(b)))
+    .map(([area, agents]) => ({ area, agents }));
+}
+
+// Whole-project agent map. The core is the team; orchestrators hang off it as
+// hubs, and each specialist connects to its parent orchestrator (or the core if
+// unparented) — so teams read as satellite clusters. Click a node to open it.
+function TeamBrain({
+  pid, agents, navigate,
+}: {
+  pid: string; agents: AgentEntry[]; navigate: (to: string) => void;
+}) {
+  const { nodes, edges } = useMemo(() => {
+    const nodes: BrainNode[] = [];
+    const edges: BrainEdge[] = [];
+    const ROOT = "__root";
+    nodes.push({ id: ROOT, label: t("project.overview.brain_core"), kind: "agent", role: "core", emoji: "🧠" });
+
+    const slugs = new Set(agents.map((a) => a.slug));
+    const hasKids = (slug: string) => agents.some((x) => x.parent === slug);
+
+    for (const a of agents) {
+      const isOrch = !!a.is_master || a.type === "orchestrator";
+      nodes.push({
+        id: a.slug,
+        label: a.slug,
+        slug: a.slug,
+        kind: isOrch ? "agent" : "agentlink",
+        role: isOrch || hasKids(a.slug) ? "hub" : "leaf",
+        emoji: a.emoji || undefined,
+        relation: a.role || (isOrch ? t("project.agents.orchestrator") : t("project.overview.specialists")),
+        detail: a.description || undefined,
+      });
+    }
+    for (const a of agents) {
+      const parent = a.parent && slugs.has(a.parent) ? a.parent : ROOT;
+      edges.push({ source: parent, target: a.slug });
+    }
+    return { nodes, edges };
+  }, [agents]);
+
+  return (
+    <BrainGraph
+      nodes={nodes}
+      edges={edges}
+      height={520}
+      onNodeClick={(n) => { if (n.slug) navigate(`/p/${pid}/agents/${n.slug}`); }}
+    />
+  );
+}
+
 function RosterRow({
   label, icon: Icon, agents, pid, navigate,
 }: {
@@ -127,6 +216,7 @@ function RosterRow({
           >
             <span className="text-sm leading-none">{a.emoji || "🤖"}</span>
             <span className="truncate">{a.slug}</span>
+            {a.role && <span className="truncate text-[10px] text-muted-fg">· {a.role}</span>}
           </button>
         ))}
       </div>

package/src/interfaces/web/src/types/daemon.ts

@@ -35,6 +35,16 @@ export interface AgentEntry {
   autonomy?: AgentAutonomy | null;
   skills: string[];
   tools: string[];
+  // Optional per-agent activity summary; only present when the list is
+  // requested with `?stats=1` (see AgentsTab).
+  stats?: AgentStats;
+}
+
+export interface AgentStats {
+  threads: number;
+  records: number;
+  tasks: number;
+  heartbeats: number;
 }
 
 export interface AgentDetail extends AgentEntry {