@brainpilot/web 0.0.5 → 0.0.7

package/src/components/demo/DemoView.tsx

@@ -4,6 +4,7 @@ import { FileUp, MessageSquare, Pause, Play, RotateCcw, SkipBack, SkipForward, U
 import type { ChatMessage, TraceNode, WebSocketEvent } from "../../contracts/backend";
 import { normalizeWebSocketEvent } from "../../contracts/backend";
 import { DemoBundle, DemoFile } from "../../contracts/demoBundle";
+import { applyMessageFilters, defaultFilterRules } from "../../contexts/messageFilters";
 import { reduceMessagesForEvent } from "../../contexts/messageReducer";
 import { useSandbox } from "../../contexts/SandboxContext";
 import { useSessions } from "../../contexts/SessionContext";
@@ -14,8 +15,10 @@ import { FilePreviewView, PreviewSource } from "../files/FilePreviewView";
 import { getPreviewKind, isMarkdown } from "../files/filePreview";
 import { IconButton } from "../primitives/IconButton";
 import { TraceGraphView } from "../session/TraceGraphView";
+import { getNodeKindLabelKey } from "../session/traceLayout";
 import { buildDemoBundle, parseDemoBundle } from "./demoBundle";
 import { getCachedBundle, setCachedBundle } from "./demoCache";
+import { shouldResetDemo } from "./demoReset";
 import { DemoFileTree } from "./DemoFileTree";
 import { TraceNodeModal } from "./TraceNodeModal";
 
@@ -40,32 +43,47 @@ function basename(path: string): string {
 }
 
 /**
- * Keep only the user-facing dialogue backbone for the demo's left panel.
+ * Keep the user-facing dialogue backbone for the demo's left panel.
  *
- * This is a multi-agent system: the live EventRouter
- * (agent_runtime/event_router.py) forwards only the principal (PI) agent's
- * messages to the frontend, while worker agents (engineer / trace /
- * experimentalist) run internally. The demo bundle, however, captures *all*
- * raw events, so a naive "any assistant text" filter floods the panel with
- * internal worker narration ("Recorded as T001…", engineer step notes).
+ * This is a multi-agent system. The demo bundle captures *all* raw events, and
+ * the live Chat (PromptComposer) does NOT collapse the transcript to the
+ * principal — it renders every agent's substantive replies, plus error and
+ * system_message bubbles, with per-agent attribution. The demo must mirror that
+ * so the replay faithfully represents what the user saw: a librarian's progress
+ * reply or an expert's error alert is first-class conversation, not internal
+ * noise (issue #98).
  *
- * Mirror the live behavior: keep the user's prompts and the principal's
- * substantive text replies — the seed prompt, the key exchanges, and the final
- * result — and drop everything else (worker narration, reasoning, tool
- * calls/results, hook diagnostics, NO-RENDER placeholders, empties). The
- * reasoning graph on the right tells the internal story.
+ * Keep: user prompts; assistant/system plain-text replies from ANY agent;
+ * error and system_message bubbles (the agent-attributed warnings/alerts the
+ * live Chat shows), plus answered ask_user cards (the question + the user's
+ * answer are a user-facing decision point, issue #132 — rendered read-only by
+ * AskUserCard since DemoView passes no onAskUserSubmit). Drop: reasoning, tool
+ * calls/results, hook diagnostics, the auto_retry card and UNANSWERED ask_user
+ * prompts (no meaning in a read-only replay), plus NO-RENDER placeholders and
+ * empties.
  */
-function isConversationalMessage(m: ChatMessage): boolean {
+export function isDemoConversational(m: ChatMessage): boolean {
   if (m.role === "user") {
     return !!m.content?.trim();
   }
-  const isPlainText = m.kind === "text" || m.kind === undefined;
-  if (!isPlainText || !m.content?.trim()) {
-    return false;
+  // Answered ask_user: keep as a read-only Q&A step. Unanswered prompts have no
+  // meaning in a replay and are dropped.
+  if (m.kind === "ask_user") {
+    return m.askUser?.answer !== undefined;
+  }
+  // Agent-attributed warnings/errors the live Chat surfaces as standalone
+  // bubbles. system_message carries its own payload; error carries content.
+  if (m.kind === "system_message") {
+    return !!m.systemMessage;
+  }
+  if (m.kind === "error") {
+    return !!m.content?.trim();
   }
-  // Only the principal agent is user-facing. Missing agent → treat as principal
-  // for resilience against older bundles where attribution was not recorded.
-  return m.agent === undefined || m.agent === "principal";
+  // Substantive text replies from ANY agent (principal or expert). MessageStream
+  // attributes each row by `agent`, so non-principal messages render with their
+  // own avatar/name. Missing agent → treated as principal downstream.
+  const isPlainText = m.kind === "text" || m.kind === undefined;
+  return isPlainText && !!m.content?.trim();
 }
 
 const REPORT_NAME = /report|summary|总结|conclusion|readme/i;
@@ -89,7 +107,19 @@ function pickDefaultFile(files: DemoFile[]): string | null {
 }
 
 
-export function DemoView() {
+export interface DemoViewProps {
+  /**
+   * Monotonic counter bumped by the shell each time the sidebar "Live Demo"
+   * entry is clicked. A *change* (not the initial value) returns the player to
+   * the session-selection / import landing — the same effect as the header
+   * "Reselect" button — so re-clicking the nav item while a demo is already
+   * open isn't a dead no-op (issue #111). Optional so standalone/test mounts
+   * work without it.
+   */
+  resetSignal?: number;
+}
+
+export function DemoView({ resetSignal }: DemoViewProps = {}) {
   const t = useT();
   const { sessions, currentSession, messages } = useSessions();
   const { currentSandbox } = useSandbox();
@@ -107,6 +137,10 @@ export function DemoView() {
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [pinnedFile, setPinnedFile] = useState<string | null>(null);
   const [modalNodeId, setModalNodeId] = useState<string | null>(null);
+  const formatNodeKind = (kind: string) => {
+    const key = getNodeKindLabelKey(kind);
+    return key ? t(key) : kind;
+  };
 
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const decodedRef = useRef<Map<string, DecodedFile>>(new Map());
@@ -189,6 +223,21 @@ export function DemoView() {
     return { t0: 0, t1, sorted: [], nodeMs, ordered };
   }, [bundle, nodes]);
 
+  // Return to the landing when the shell signals a sidebar "Live Demo" re-click
+  // (issue #111). Fires only on a *change* of resetSignal, never on the initial
+  // mount, so importing/packing a bundle isn't immediately undone. Clearing the
+  // bundle is enough — the "reset transport on new bundle" effect below re-inits
+  // cursor/zoom/etc. the next time a bundle is selected. The module-level
+  // demoCache keeps re-opening the same session instant.
+  const prevResetSignal = useRef(resetSignal);
+  useEffect(() => {
+    if (shouldResetDemo(prevResetSignal.current, resetSignal)) {
+      prevResetSignal.current = resetSignal;
+      setBundle(null);
+      setError(null);
+    }
+  }, [resetSignal]);
+
   // Reset transport on new bundle (start fully revealed, paused, default file).
   useEffect(() => {
     if (!bundle) {
@@ -240,15 +289,19 @@ export function DemoView() {
     return timeline.ordered.slice(0, count);
   }, [bundle, timeline, cursor]);
 
-  // The left panel shows the conversation backbone — the actual dialogue: the
-  // seed prompt and every substantive text reply. Reasoning, tool calls, tool
-  // results, hook notes and empty placeholders are dropped (the reasoning graph
-  // on the right tells that story). This is deliberately a content predicate,
-  // not a pin-to-two-messages filter: the latter relied on exact id-matching
-  // across two independent event folds and silently emptied the panel whenever a
-  // MESSAGES_SNAPSHOT reshuffled ids or no clean seed/summary message existed.
+  // The left panel shows the conversation backbone — the actual dialogue across
+  // every agent: the seed prompt, each agent's substantive text replies, and the
+  // error/system_message bubbles the live Chat surfaces. Reasoning, tool calls,
+  // tool results, hook notes and empty placeholders are dropped (the reasoning
+  // graph on the right tells that story). `applyMessageFilters` mirrors the live
+  // Chat's default rules (e.g. hiding spurious single-dot messages) so the
+  // replay matches what the user actually saw. This is deliberately a content
+  // predicate, not a pin-to-two-messages filter: the latter relied on exact
+  // id-matching across two independent event folds and silently emptied the
+  // panel whenever a MESSAGES_SNAPSHOT reshuffled ids or no clean seed/summary
+  // message existed.
   const condensedMessages = useMemo<ChatMessage[]>(
-    () => revealedMessages.filter(isConversationalMessage),
+    () => applyMessageFilters(revealedMessages.filter(isDemoConversational), defaultFilterRules),
     [revealedMessages],
   );
 
@@ -525,12 +578,19 @@ export function DemoView() {
   }
 
   // ----- Player -----
+  // Prefer the authoritative title from the live session list (it tracks
+  // backend `session_title` updates) over the snapshot captured into the bundle
+  // at pack time, which can be stale (e.g. "Session f8f35032" before a reload).
+  // Falls back to the bundle title for imported bundles whose source session is
+  // not in this client's list.
+  const liveSession = sessions.find((s) => s.id === bundle.session.id);
+  const displayTitle = liveSession?.title || bundle.session.title;
   return (
     <main className="demo-view" aria-label={t("demo.title")}>
       <header className="demo-header">
         <div className="demo-header__title">
           <span className="workspace-panel__eyebrow">{t("demo.eyebrow")}</span>
-          <h1>{bundle.session.title}</h1>
+          <h1>{displayTitle}</h1>
           <span className="demo-header__meta">
             {t("demo.meta.exported", { time: new Date(bundle.exportedAt).toLocaleString() })}
           </span>
@@ -596,6 +656,13 @@ export function DemoView() {
                 zoom={zoom}
                 onZoomChange={setZoom}
                 fitToken={revealedNodes.length}
+                formatKind={formatNodeKind}
+                zoomLabels={{
+                  controls: t("trace.aria.zoomControls"),
+                  zoomIn: t("trace.aria.zoomIn"),
+                  zoomOut: t("trace.aria.zoomOut"),
+                  reset: t("trace.aria.resetZoom"),
+                }}
               />
             </div>
             <div className="demo-transport">
@@ -658,9 +725,11 @@ export function DemoView() {
         node={modalNode}
         onClose={() => setModalNodeId(null)}
         onSelectNode={(id) => { setSelectedNodeId(id); setModalNodeId(id); }}
+        nodes={nodes}
         onSelectArtifact={selectFile}
         activeArtifactPath={currentArtifactPath}
         closeLabel={t("demo.node.modalClose")}
+        formatKind={formatNodeKind}
         t={t}
       />
     </main>

package/src/components/demo/TraceNodeModal.tsx

@@ -7,12 +7,14 @@ import { TraceNodeDetail } from "../session/TraceNodeDetail";
 
 interface TraceNodeModalProps {
   node: TraceNode | null;
+  nodes?: TraceNode[];
   onClose: () => void;
   onSelectNode: (id: string) => void;
   /** Focus a produced file in the preview (closes the modal). */
   onSelectArtifact: (path: string) => void;
   activeArtifactPath: string | null;
   closeLabel: string;
+  formatKind?: (kind: string) => string;
   t: (key: string, vars?: TranslateVars) => string;
 }
 
@@ -22,7 +24,7 @@ interface TraceNodeModalProps {
  * (fixed backdrop + centered panel, click-outside / Escape to close) and the
  * shared TraceNodeDetail body.
  */
-export function TraceNodeModal({ node, onClose, onSelectNode, onSelectArtifact, activeArtifactPath, closeLabel, t }: TraceNodeModalProps) {
+export function TraceNodeModal({ node, nodes, onClose, onSelectNode, onSelectArtifact, activeArtifactPath, closeLabel, formatKind, t }: TraceNodeModalProps) {
   useEffect(() => {
     if (!node) {
       return;
@@ -52,7 +54,7 @@ export function TraceNodeModal({ node, onClose, onSelectNode, onSelectArtifact,
         <div className="trace-node-modal__head">
           <span className="trace-node-modal__eyebrow">
             <GitBranch size={13} style={{ marginRight: 5, verticalAlign: "-2px" }} />
-            {node.id}
+            {node.agent || node.nodeType || node.type}
           </span>
           <IconButton label={closeLabel} onClick={onClose}>
             <X size={16} />
@@ -61,7 +63,9 @@ export function TraceNodeModal({ node, onClose, onSelectNode, onSelectArtifact,
         <div className="trace-node-modal__body trace-detail">
           <TraceNodeDetail
             node={node}
+            nodes={nodes}
             onSelectNode={onSelectNode}
+            formatKind={formatKind}
             onSelectArtifact={(path) => {
               onSelectArtifact(path);
               onClose();

package/src/components/demo/demoBundle.ts

@@ -157,11 +157,16 @@ export async function buildDemoBundle(opts: BuildDemoOptions): Promise<DemoBundl
 
   onProgress?.("reading conversation timeline…");
   let timeline: DemoBundle["timeline"] = "timestamped";
-  let events = await api.sessions.getEvents(session.id);
+  // Pull the persisted event timeline from the new history endpoint (the
+  // legacy `/sessions/:id/events` path is an SSE alias and returns no JSON).
+  // Cap at 5000 — the endpoint enforces the same cap, but stating it here
+  // documents the bundle's max footprint.
+  const historyEnvelope = await api.sessions.getHistory(session.id, { limit: 5000 });
+  let events: typeof historyEnvelope.events | undefined = historyEnvelope.events;
   let messages: ChatMessage[] | undefined;
   if (!events || events.length === 0) {
     timeline = "ordered";
-    events = undefined as never;
+    events = undefined;
     messages = fallbackMessages ?? [];
   }
 

package/src/components/demo/demoReset.ts

@@ -0,0 +1,16 @@
+/**
+ * Pure reset-signal logic for the Live Demo player (issue #111).
+ *
+ * The shell bumps a monotonic `resetSignal` every time the sidebar "Live Demo"
+ * entry is clicked. DemoView must return to its session-selection landing on a
+ * *change* of that signal — but NOT on the initial mount, or importing/packing
+ * a freshly-selected bundle would be undone immediately. Extracted as a pure
+ * function so this guard is unit-testable without rendering the component (the
+ * monorepo has no jsdom/@testing-library).
+ */
+export function shouldResetDemo(
+  previous: number | undefined,
+  next: number | undefined,
+): boolean {
+  return next !== previous;
+}

package/src/components/session/AgentNetwork.tsx

@@ -31,9 +31,7 @@ import {
 import {
   computeAgentActivity,
   computeAllAgentActivities,
-  computeAgentActivityPercentages,
   type AgentActivity,
-  type AgentActivityPercentages,
 } from "./agentAnalytics";
 import { NodeTooltip, NodeTooltipData } from "./NodeTooltip";
 import { GlobalOverview } from "./GlobalOverview";
@@ -70,6 +68,26 @@ function statusLabelKey(status: "running" | "idle" | "error" | "stopped"): strin
   return `network.status.${status}`;
 }
 
+function looksIdleTask(task?: string): boolean {
+  const normalized = (task ?? "").trim().toLowerCase();
+  return (
+    !normalized ||
+    normalized === "ready" ||
+    normalized === "idle" ||
+    normalized.includes("waiting for instructions") ||
+    normalized.includes("空闲") ||
+    normalized.includes("等待指令")
+  );
+}
+
+function taskLabelFor(agent: AgentStatus, status: "running" | "idle" | "error" | "stopped", t: (key: string) => string): string {
+  const task = agent.task?.trim();
+  if (status === "running" && looksIdleTask(task)) {
+    return t("network.detail.runningTask");
+  }
+  return task || t("network.detail.idleWaiting");
+}
+
 /* --------------------------------------------------------------------------
  * Layout: deterministic concentric ring placement (no force layout, no jitter).
  * ------------------------------------------------------------------------ */
@@ -283,26 +301,30 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
 
   const edges = useMemo(() => buildEdges(messages), [messages]);
 
-  // Live agents from the session — anything sandboxed has spawned this entry.
-  const liveNames = useMemo(() => new Set(agents.map((a) => a.name)), [agents]);
-
-  // All node names: built-ins (always shown as dormant placeholders) ∪ live
-  // agents ∪ any names referenced in edges (defensive). Order is stable so
-  // the layout doesn't reflow when an agent comes/goes.
-  const nodeNames = useMemo(() => {
+  // Default view: only agents that actually participated in this session.
+  // Built-in agents that were not used are listed below as available, rather
+  // than drawn as equally important dormant graph nodes.
+  const activeNames = useMemo(() => {
     const set = new Set<string>();
-    BUILTIN_AGENT_NAMES.forEach((n) => set.add(n));
     agents.forEach((a) => set.add(a.name));
     edges.forEach((e) => {
       set.add(e.from);
       set.add(e.to);
     });
-    // Stable ordering: builtins first (in declared order), then custom names sorted.
+    return set;
+  }, [agents, edges]);
+
+  const nodeNames = useMemo(() => {
     const builtinSet = new Set<string>(BUILTIN_AGENT_NAMES);
-    const builtins = BUILTIN_AGENT_NAMES.filter((n) => set.has(n));
-    const customs = Array.from(set).filter((n) => !builtinSet.has(n)).sort();
+    const builtins = BUILTIN_AGENT_NAMES.filter((n) => activeNames.has(n));
+    const customs = Array.from(activeNames).filter((n) => !builtinSet.has(n)).sort();
     return [...builtins, ...customs];
-  }, [agents, edges]);
+  }, [activeNames]);
+
+  const availableNames = useMemo(
+    () => BUILTIN_AGENT_NAMES.filter((name) => !activeNames.has(name)),
+    [activeNames],
+  );
 
   const positioned = useMemo(() => layoutNodes(nodeNames), [nodeNames]);
   const positionByName = useMemo(() => {
@@ -340,7 +362,7 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
 
   const now = Date.now();
   const totalMessages = edges.reduce((sum, edge) => sum + edge.messages.length, 0);
-  const liveCount = agents.length;
+  const liveCount = nodeNames.length;
   const runningCount = agents.filter((a) => statusKind(a.status) === "running").length;
 
   // Keep relative times / the Timeline "now" marker moving. Only tick while a
@@ -389,11 +411,6 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
     return allActivities.get(selectedAgent.name) ?? null;
   }, [selectedAgent, allActivities]);
 
-  const selectedAgentPercentages = useMemo<AgentActivityPercentages | null>(() => {
-    if (!selectedAgentActivity) return null;
-    return computeAgentActivityPercentages(selectedAgentActivity, allActivities);
-  }, [selectedAgentActivity, allActivities]);
-
   if (nodeNames.length === 0) {
     return (
       <div className="agent-network agent-network--empty">
@@ -411,7 +428,7 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
   const hoveredData: NodeTooltipData | null = hovered
     ? (() => {
         const agent = agentByName.get(hovered.name);
-        const isLive = liveNames.has(hovered.name);
+        const isLive = activeNames.has(hovered.name);
         const counts = countMessagesFor(hovered.name, edges);
         return {
           name: hovered.name,
@@ -435,9 +452,6 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
           <span className="agent-network__legend-item">
             <i className="agent-network__legend-dot agent-network__legend-dot--idle" /> {t("network.legend.live")}
           </span>
-          <span className="agent-network__legend-item">
-            <i className="agent-network__legend-dot agent-network__legend-dot--dormant" /> {t("network.legend.dormant")}
-          </span>
           <span className="agent-network__legend-item">
             <i className="agent-network__legend-dot agent-network__legend-dot--error" /> {t("network.legend.error")}
           </span>
@@ -452,6 +466,16 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
             {t("network.legend.counter", { live: liveCount, total: nodeNames.length, running: runningCount, edges: edges.length, msgs: totalMessages })}
           </span>
         </div>
+        {availableNames.length > 0 ? (
+          <details className="agent-network__available">
+            <summary>{t("network.available.summary", { count: availableNames.length })}</summary>
+            <ul>
+              {availableNames.map((name) => (
+                <li key={name}>{name}</li>
+              ))}
+            </ul>
+          </details>
+        ) : null}
 
         <div className="agent-network__viewport" aria-label={t("network.aria.viewport")} ref={viewportRef}>
           <svg
@@ -558,7 +582,7 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
                     const y1 = principal.y + uy * NODE_RADIUS;
                     const x2 = node.x - ux * NODE_RADIUS;
                     const y2 = node.y - uy * NODE_RADIUS;
-                    const isLive = liveNames.has(node.name);
+                    const isLive = activeNames.has(node.name);
                     return (
                       <line
                         className={`agent-network__scaffold-line ${
@@ -634,13 +658,15 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
             <g className="agent-network__nodes">
               {positioned.map((node) => {
                 const agent = agentByName.get(node.name);
-                const isLive = liveNames.has(node.name);
+                const isLive = activeNames.has(node.name);
                 const status = agent ? statusKind(agent.status) : "idle";
                 const presence = isLive ? "live" : "dormant";
                 const isSelected = selection?.kind === "node" && selection.id === node.name;
                 const Icon = getAgentIcon(node.name);
                 const accent = getAgentAccentVar(node.name);
                 const isPrincipal = node.name === "principal";
+                const fallbackAgent = agent ?? { name: node.name, status: "idle", task: "" };
+                const taskLabel = taskLabelFor(fallbackAgent, status, t);
                 return (
                   <g
                     aria-label={t("network.aria.node", { name: node.name, status: t(isLive ? statusLabelKey(status) : "network.status.dormant") })}
@@ -704,9 +730,9 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
                     <text className="agent-network__node-label" textAnchor="middle" y={NODE_RADIUS + 18}>
                       {node.name}
                     </text>
-                    {agent?.task ? (
+                    {isLive && (agent?.task || status === "running") ? (
                       <text className="agent-network__node-sublabel" textAnchor="middle" y={NODE_RADIUS + 32}>
-                        {agent.task.length > 32 ? `${agent.task.slice(0, 30)}…` : agent.task}
+                        {taskLabel.length > 32 ? `${taskLabel.slice(0, 30)}…` : taskLabel}
                       </text>
                     ) : !isLive ? (
                       <text className="agent-network__node-sublabel agent-network__node-sublabel--dormant" textAnchor="middle" y={NODE_RADIUS + 32}>
@@ -766,7 +792,7 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
             ) : selectedAgent ? (
               <AgentDetail
                 agent={selectedAgent}
-                isLive={liveNames.has(selectedAgent.name)}
+                isLive={activeNames.has(selectedAgent.name)}
                 filter={
                   agentFilters[selectedAgent.name] ?? {
                     hideMessages: false,
@@ -779,7 +805,6 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
                 received={messagesForAgent.received}
                 sent={messagesForAgent.sent}
                 activity={selectedAgentActivity}
-                activityPercentages={selectedAgentPercentages}
               />
             ) : (
               <GlobalOverview
@@ -819,7 +844,6 @@ function AgentDetail({
   sent,
   received,
   activity,
-  activityPercentages,
 }: {
   agent: AgentStatus;
   isLive: boolean;
@@ -834,7 +858,6 @@ function AgentDetail({
   sent: AgentEdgeMessage[];
   received: AgentEdgeMessage[];
   activity: AgentActivity | null;
-  activityPercentages: AgentActivityPercentages | null;
 }) {
   const Icon = getAgentIcon(agent.name);
   const status = statusKind(agent.status);
@@ -842,6 +865,7 @@ function AgentDetail({
   const presence = isLive ? "live" : "dormant";
   const t = useT();
   const statusLabel = isLive ? t(statusLabelKey(status)) : t("network.status.dormant");
+  const currentTask = isLive ? taskLabelFor(agent, status, t) : t("network.detail.notSpawnedByPrincipal");
 
   return (
     <>
@@ -881,12 +905,12 @@ function AgentDetail({
               </span>
             </dd>
           </div>
-          <div>
-            <dt>{t("network.detail.currentTask")}</dt>
-            <dd className="agent-network__keyvals-wrap">
-              {isLive ? (agent.task || t("network.detail.idleWaiting")) : t("network.detail.notSpawnedByPrincipal")}
-            </dd>
-          </div>
+            <div>
+              <dt>{t("network.detail.currentTask")}</dt>
+              <dd className="agent-network__keyvals-wrap">
+                {currentTask}
+              </dd>
+            </div>
           <div>
             <dt>{t("network.detail.updated")}</dt>
             <dd>{agent.updatedAt ? relativeTime(agent.updatedAt, now) : "—"}</dd>
@@ -899,18 +923,13 @@ function AgentDetail({
       </section>
 
       {/* ---- Activity Statistics ---- */}
-      {activity && activityPercentages ? (
+      {activity ? (
         <section className="agent-network__detail-section">
           <h4><MessageSquare size={13} /> {t("network.detail.activityStats")}</h4>
           <dl className="agent-network__keyvals">
             <div>
               <dt>{t("network.detail.totalMessages")}</dt>
-              <dd>
-                {activity.totalMessages}
-                <span style={{ fontSize: 11, opacity: 0.7, marginLeft: 6 }}>
-                  {t("network.detail.pctOfSession", { pct: activityPercentages.messagePercent.toFixed(1) })}
-                </span>
-              </dd>
+              <dd>{activity.totalMessages}</dd>
             </div>
             <div>
               <dt>{t("network.detail.messageBreakdown")}</dt>
@@ -918,38 +937,12 @@ function AgentDetail({
                 {t("network.detail.breakdownValue", { assistant: activity.assistantMessages, reasoning: activity.reasoningMessages, tool: activity.toolMessages })}
               </dd>
             </div>
-            <div>
-              <dt>{t("network.detail.toolCalls")}</dt>
-              <dd>
-                {activity.toolCalls}
-                {activity.toolCalls > 0 && (
-                  <span style={{ fontSize: 11, opacity: 0.7, marginLeft: 6 }}>
-                    {t("network.detail.pctOfSession", { pct: activityPercentages.toolCallPercent.toFixed(1) })}
-                  </span>
-                )}
-              </dd>
-            </div>
-            {activity.topTools.length > 0 && (
+            {activity.toolCalls > 0 ? (
               <div>
-                <dt>{t("network.detail.topTools")}</dt>
-                <dd className="agent-network__keyvals-wrap">
-                  {activity.topTools.map((t2, i) => (
-                    <span key={t2.name}>
-                      {t2.name} ({t2.count}){i < activity.topTools.length - 1 ? " · " : ""}
-                    </span>
-                  ))}
-                </dd>
+                <dt>{t("network.detail.toolCalls")}</dt>
+                <dd>{activity.toolCalls}</dd>
               </div>
-            )}
-            <div>
-              <dt>{t("network.detail.contentVolume")}</dt>
-              <dd>
-                {t("network.detail.volumeValue", { chars: activity.totalChars.toLocaleString(), tokens: activity.estimatedTokens.toLocaleString() })}
-                <span style={{ fontSize: 11, opacity: 0.7, marginLeft: 6 }}>
-                  {t("network.detail.pctOfSession", { pct: activityPercentages.tokenPercent.toFixed(1) })}
-                </span>
-              </dd>
-            </div>
+            ) : null}
             {activity.communicationPartners.length > 0 && (
               <div>
                 <dt>{t("network.detail.communicationPartners")}</dt>