@agentprojectcontext/apx 1.68.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/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);
 
@@ -53,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 && (
@@ -106,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,
 }: {
@@ -128,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 {