@pi-spice/minimal-subagents 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @pi-spice/minimal-subagents
+
+## 0.2.0
+
+### Minor Changes
+
+- 349aa7f: Restyle the `spawn_agents` transcript display: a one-line call header, then one block per agent — status, duration, tool count, and the first line of the task as a stable identifier, with a third line for live activity while running. Call totals (tokens/cost) sit on a summary line after completion; the hint line is running-only. Expanded view shows final outputs only. Transcript lines are truncated by display width — long commands and CJK text no longer break the layout.
+
+## 0.1.1
+
+### Patch Changes
+
+- 245d41f: Details panel: alt+a now toggles (also closes an open panel); panel data is seeded the moment spawn_agents starts, so alt+a works during the child-startup window and after an interrupt instead of reporting "no data"; alt+a with no run at all shows pi's notify; panel content gets inner padding and footer hints that fit narrow panels.

package/README.md

@@ -24,14 +24,15 @@ Quick test from this repo: `pi -e ./extensions/minimal-subagents`
 | `name` | — | `agent-<index>` |
 
 - **Failures don't cancel siblings** — every agent runs to completion; each result is a `### [name] completed/failed` section with the agent's final output (50 KB cap; full transcripts stay in the tool details). `isError` only when all fail.
-- **Live progress** — a one-line-per-agent scoreboard in the transcript (status, turns, latest activity); `alt+a` for the live detail panel, `Ctrl+O` after completion for the full archive.
+- **Live progress** — a one-line call header (`spawn_agents (3 agents)`), then one block per agent: glyph + name + duration/tools, then the first line of the task (always — so agents stay distinguishable even when names are opaque). Running agents grow a third line with the latest tool call; failed agents put the error on the header. A dim summary line (multi-agent, finished) carries the call totals (wall-clock, tools, tokens, cost); `alt+a live details` is shown only while something is still running. `alt+a` opens the live detail panel; `Ctrl+O` after completion expands to each agent's final output.
 - **Abort** returns partial results — finished agents keep their output, the rest are marked `aborted`; the whole child process group is killed (`SIGTERM`, then `SIGKILL` after 5 s).
 
 ## Details panel (`alt+a`)
 
-- One tab per sub-agent (`←`/`→` or `1`-`8`; the tab bar compacts automatically on narrow panels), labeled with name and live status (⏳/✓/✗).
+- One tab per sub-agent (`←`/`→` or `1`-`8`; the tab bar compacts automatically on narrow panels), labeled with name and live status (`✻`/`·`/`✓`/`✗`).
 - Each tab is the agent's full timeline: task, tool calls, tool-result previews (first 10 lines), assistant output rendered as markdown, usage. Thinking is not shown.
-- Terminal-style scrolling: `↑/↓`, `PgUp/PgDn`, `Home`/`g`, `End`/`G`, mouse wheel — pinned to the bottom while following new output, scrolling up pauses, `End` resumes. `Esc` closes.
+- Terminal-style scrolling: `↑/↓`, `PgUp/PgDn`, `Home`/`g`, `End`/`G`, mouse wheel — pinned to the bottom while following new output, scrolling up pauses, `End` resumes. `alt+a` toggles (same key opens and closes); `Esc` also closes.
+- Pressing `alt+a` before any `spawn_agents` run shows pi's notify message above the input instead of opening an empty panel.
 - Shows the latest call only. Two platform limits: it is an overlay (the transcript is covered, not reflowed), and mouse wheel works only under `--tui-mode fullscreen` — the only mode where pi enables terminal mouse reporting.
 
 ## No nesting

package/index.ts

@@ -28,7 +28,7 @@ import {
 	type SubagentDetails,
 } from "./spawn.ts";
 import { renderSpawnCall, renderSpawnResult } from "./render.ts";
-import { openAgentPanel, setPanelDetails } from "./panel.ts";
+import { hasPanelDetails, openAgentPanel, setPanelDetails } from "./panel.ts";
 
 const MAX_AGENTS = 8;
 const MAX_CONCURRENCY = 4;
@@ -118,6 +118,7 @@ export default function (pi: ExtensionAPI) {
 					name: params.agents[i].name ?? `agent-${i + 1}`,
 					task: params.agents[i].task,
 					exitCode: -1, // -1 = still running
+					startedAt: Date.now(),
 					messages: [],
 					stderr: "",
 					usage: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0, contextTokens: 0, turns: 0 },
@@ -138,12 +139,20 @@ export default function (pi: ExtensionAPI) {
 				}
 			};
 
+			// Seed the panel the moment the tool starts: alt+a can then open it and
+			// show "running" placeholders. Without this, the panel would stay
+			// "no data" until the first child event arrives — child boot plus the
+			// child's first model turn can take 5-20s, and interrupting (or just
+			// peeking) inside that window would claim there is nothing to show.
+			emitParallelUpdate();
+
 			const results = await mapWithConcurrencyLimit(params.agents, MAX_CONCURRENCY, async (spec, index) => {
 				// On abort, return what exists instead of throwing finished work away.
 				const abortPlaceholder = (): SingleResult => {
 					const partial = allResults[index];
 					partial.exitCode = 1;
 					partial.stopReason = "aborted";
+					partial.endedAt = Date.now();
 					return partial;
 				};
 				if (signal?.aborted) return abortPlaceholder();
@@ -202,7 +211,15 @@ export default function (pi: ExtensionAPI) {
 	});
 
 	pi.registerShortcut("alt+a", {
-		description: "Open the sub-agent details panel (tabs per agent, full timeline)",
-		handler: (ctx) => openAgentPanel(ctx),
+		description: "Toggle the sub-agent details panel (tabs per agent, full timeline); alt+a or Esc closes it",
+		handler: (ctx) => {
+			// No run yet → pi's notify message, not an empty overlay stuck in the
+			// corner.
+			if (!hasPanelDetails()) {
+				ctx.ui.notify("No sub-agent data yet — run spawn_agents first", "info");
+				return;
+			}
+			openAgentPanel(ctx);
+		},
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pi-spice/minimal-subagents",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Create sub-agents dynamically and run them in parallel; single blocking tool, no orchestration, nesting prevented",
   "keywords": ["pi-package"],
   "license": "MIT",

package/panel.ts

@@ -1,10 +1,15 @@
 /**
  * panel.ts — sub-agent details panel (overlay) for minimal-subagents
  *
- * Opened with alt+a (registered in index.ts). Shows the latest spawn_agents
- * call: one tab per sub-agent, a full scrollable timeline per tab (task,
- * tool calls, tool-result previews, assistant output rendered as markdown,
- * usage), live-updating while agents run.
+ * Opened with alt+a (registered in index.ts), closed with alt+a or Esc —
+ * while the panel is focused the host routes all input here, so the open
+ * shortcut never fires; the panel must recognize alt+a itself to toggle.
+ * With no spawn_agents data yet, the shortcut shows a notify message
+ * instead of opening an empty overlay (guarded in index.ts via
+ * hasPanelDetails).
+ * Shows the latest spawn_agents call: one tab per sub-agent, a full scrollable
+ * timeline per tab (task, tool calls, tool-result previews, assistant output
+ * rendered as markdown, usage), live-updating while agents run.
  *
  * Rendering is line-based: the timeline is flattened into styled lines and
  * windowed by a hand-rolled viewport (offset math) — the overlay contract is
@@ -13,7 +18,7 @@
  * while the overlay is focused.
  */
 
-import { Markdown, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { Markdown, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
 import { type Message } from "@earendil-works/pi-ai";
 import { formatToolCall, formatUsageStats, type RenderTheme } from "./render.ts";
@@ -32,6 +37,11 @@ export function setPanelDetails(details: SubagentDetails): void {
 	for (const listener of listeners) listener();
 }
 
+/** True once at least one spawn_agents result (even still running) exists. */
+export function hasPanelDetails(): boolean {
+	return currentDetails !== null && currentDetails.results.length > 0;
+}
+
 // ---------------------------------------------------------------------------
 // Panel opening
 // ---------------------------------------------------------------------------
@@ -39,7 +49,7 @@ export function setPanelDetails(details: SubagentDetails): void {
 let opening: Promise<unknown> | null = null;
 
 export function openAgentPanel(ctx: { ui: any; hasUI?: boolean }): void {
-	if (opening) return; // already open; Esc closes
+	if (opening) return; // already open; alt+a or Esc closes
 	if (ctx.hasUI === false) return;
 	opening = ctx.ui
 		.custom(
@@ -76,7 +86,8 @@ function isAgentRunning(result: SingleResult): boolean {
 }
 
 function statusIcon(result: SingleResult, theme: RenderTheme): string {
-	if (isAgentRunning(result)) return theme.fg("warning", "⏳");
+	if (isAgentRunning(result))
+		return result.messages.length === 0 ? theme.fg("muted", "·") : theme.fg("warning", "✻");
 	return isFailedResult(result) ? theme.fg("error", "✗") : theme.fg("success", "✓");
 }
 
@@ -187,6 +198,12 @@ class AgentPanel {
 		// A newer spawn_agents call may have fewer agents — clamp the tab.
 		this.activeTab = Math.min(this.activeTab, details.results.length - 1);
 
+		// Inner padding: 1 column each side and 1 blank line above/below the
+		// body, so content breathes away from the rules and panel edges. The
+		// rules span the full width; content wraps at width - 2.
+		const innerWidth = Math.max(10, width - 2);
+		const pad = (line: string) => (line.length === 0 ? "" : ` ${line}`);
+
 		// --- header: tab bar ------------------------------------------------
 		// Full labels (index + name + status) when they fit the panel width;
 		// otherwise degrade to compact slots (index + status) which always fit
@@ -200,35 +217,47 @@ class AgentPanel {
 			return `${i + 1} ${name} ${statusIcon(r, theme)}`;
 		});
 		const fullFits =
-			7 + fullLabels.reduce((sum, l) => sum + visibleWidth(l) + 2, 0) + (fullLabels.length - 1) <= width;
+			7 + fullLabels.reduce((sum, l) => sum + visibleWidth(l) + 2, 0) + (fullLabels.length - 1) <= innerWidth;
 		const tabs = fullFits
 			? renderSlots(fullLabels)
 			: renderSlots(details.results.map((r, i) => `${i + 1}${statusIcon(r, theme)}`));
-		const header = [theme.fg("toolTitle", theme.bold("agents ")) + tabs, theme.fg("muted", "─".repeat(width))];
+		const header = [pad(theme.fg("toolTitle", theme.bold("agents ")) + tabs), theme.fg("muted", "─".repeat(width))];
 
 		// --- body: windowed timeline ----------------------------------------
 		const rows = this.tui?.terminal?.rows ?? process.stdout.rows ?? 24;
-		const headerH = header.length; // tab bar + rule
-		const footerH = 2; // rule + status line
+		const headerH = header.length + 1; // blank pad + tab bar + rule
+		const footerH = 2 + 1; // rule + status line + blank pad above the rule
 		this.bodyHeight = Math.max(4, rows - headerH - footerH);
 
-		const lines = buildTimeline(details.results[this.activeTab], theme, width);
+		const lines = buildTimeline(details.results[this.activeTab], theme, innerWidth);
 		this.lineCount = lines.length;
 
 		const maxOffset = Math.max(0, this.lineCount - this.bodyHeight);
 		if (this.follow) this.offset = maxOffset;
 		this.offset = Math.min(Math.max(0, this.offset), maxOffset);
-		const body = lines.slice(this.offset, this.offset + this.bodyHeight);
+		const body = lines.slice(this.offset, this.offset + this.bodyHeight).map(pad);
 		while (body.length < this.bodyHeight) body.push(""); // stable panel height
 
 		// --- footer: scroll position + hints ---------------------------------
 		const pos = this.lineCount > 0 ? `${this.offset + 1}-${Math.min(this.offset + this.bodyHeight, this.lineCount)}/${this.lineCount}` : "0";
 		const mode = this.follow ? "following" : "paused";
-		const footer =
-			theme.fg("dim", `${pos} ${mode}`) +
-			theme.fg("muted", " · ←/→ tab · ↑/↓ wheel scroll · End follow · Esc close");
+		const statusText = theme.fg("dim", `${pos} ${mode}`);
+		// Hint set degrades as the panel narrows; truncate is only a backstop.
+		const hintVariants = [
+			" · ←/→ tab · ↑/↓ scroll · End follow · alt+a/Esc close",
+			" · ←/→ tab · End follow · alt+a/Esc close",
+			" · alt+a/Esc close",
+		];
+		let hints = "";
+		for (const hint of hintVariants) {
+			if (visibleWidth(statusText) + hint.length <= innerWidth) {
+				hints = theme.fg("muted", hint);
+				break;
+			}
+		}
+		const footer = truncateToWidth(pad(statusText + hints), width);
 
-		return [...header, ...body, theme.fg("muted", "─".repeat(width)), footer];
+		return ["", ...header, ...body, "", theme.fg("muted", "─".repeat(width)), footer];
 	}
 
 	handleInput(data: string): void {
@@ -241,6 +270,14 @@ class AgentPanel {
 	}
 
 	private handleInputInner(data: string): void {
+		// alt+a toggles: while we hold focus the host shortcut cannot fire, so
+		// the panel closes on the same key that opened it (matchesKey covers
+		// legacy ESC+a and kitty/CSI-u encodings alike).
+		if (matchesKey(data, "alt+a")) {
+			this.close();
+			return;
+		}
+
 		const details = currentDetails;
 		if (!details || details.results.length === 0) {
 			if (data === "\x1b") this.close();

package/render.ts

@@ -11,7 +11,7 @@ import * as os from "node:os";
 import type { AgentToolResult } from "@earendil-works/pi-agent-core";
 import type { Message } from "@earendil-works/pi-ai";
 import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
-import { Container, Markdown, Spacer, Text } from "@earendil-works/pi-tui";
+import { Container, Markdown, Spacer, Text, truncateToWidth } from "@earendil-works/pi-tui";
 import {
 	getFinalOutput,
 	isFailedResult,
@@ -62,6 +62,22 @@ export function formatUsageStats(
 	return parts.join(" ");
 }
 
+/** Terminal width for transcript lines — the render hooks get no width from the host. */
+function terminalColumns(): number {
+	return process.stdout.columns ?? 80;
+}
+
+/**
+ * Width-aware truncation for possibly ANSI-styled text: `truncateToWidth`
+ * measures display columns (CJK = 2, escapes = 0) and never slices an escape
+ * sequence or grapheme cluster in half. Hand-assembled transcript lines must
+ * go through this — never `String.slice`, which counts UTF-16 units and
+ * overflows on CJK text or styled strings.
+ */
+function truncateVisual(text: string, maxCols: number): string {
+	return truncateToWidth(text, maxCols, "…");
+}
+
 export function formatToolCall(
 	toolName: string,
 	args: Record<string, unknown>,
@@ -75,7 +91,7 @@ export function formatToolCall(
 	switch (toolName) {
 		case "bash": {
 			const command = (args.command as string) || "...";
-			const preview = command.length > 60 ? `${command.slice(0, 60)}...` : command;
+			const preview = truncateVisual(command, 60);
 			return themeFg("muted", "$ ") + themeFg("toolOutput", preview);
 		}
 		case "read": {
@@ -123,9 +139,11 @@ export function formatToolCall(
 			);
 		}
 		default: {
-			const argsStr = JSON.stringify(args);
-			const preview = argsStr.length > 50 ? `${argsStr.slice(0, 50)}...` : argsStr;
-			return themeFg("accent", toolName) + themeFg("dim", ` ${preview}`);
+			// Unknown tools: preview the first string argument (a path, pattern,
+			// command — whatever it is) instead of dumping raw JSON.
+			const firstString = Object.values(args).find((v): v is string => typeof v === "string" && v.length > 0);
+			const preview = firstString ? ` ${truncateVisual(firstString, 50)}` : "";
+			return themeFg("accent", toolName) + themeFg("dim", preview);
 		}
 	}
 }
@@ -146,56 +164,168 @@ function getDisplayItems(messages: Message[]): DisplayItem[] {
 }
 
 export function renderSpawnCall(args: SpawnAgentsArgs, theme: RenderTheme): Text {
-	if (args.agents?.length) {
-		let text =
+	// One line only: agent names and task previews live in the result blocks
+	// (seeded the moment the tool starts), so repeating them here would just
+	// duplicate the list below.
+	const count = args.agents?.length;
+	if (count) {
+		const text =
 			theme.fg("toolTitle", theme.bold("spawn_agents ")) +
-			theme.fg("accent", `(${args.agents.length} agent${args.agents.length > 1 ? "s" : ""})`);
-		for (const a of args.agents.slice(0, 3)) {
-			const preview = a.task.length > 40 ? `${a.task.slice(0, 40)}...` : a.task;
-			const model = a.model ? theme.fg("dim", ` [${a.model}]`) : "";
-			text += `\n  ${theme.fg("accent", a.name || "agent")}${model}${theme.fg("dim", ` ${preview}`)}`;
-		}
-		if (args.agents.length > 3) text += `\n  ${theme.fg("muted", `... +${args.agents.length - 3} more`)}`;
+			theme.fg("accent", `(${count} agent${count > 1 ? "s" : ""})`);
 		return new Text(text, 0, 0);
 	}
 	return new Text(theme.fg("toolTitle", theme.bold("spawn_agents")), 0, 0);
 }
 
-function truncatePlain(text: string, max: number): string {
-	return text.length > max ? `${text.slice(0, max - 1)}…` : text;
-}
-
 function isAgentRunning(details: SubagentDetails): boolean {
 	return details.results.some((r) => r.exitCode === -1);
 }
 
-/** One glanceable scoreboard line: icon, name, turns, latest activity. */
-function scoreboardLine(r: SingleResult, theme: RenderTheme): string {
-	const icon =
-		r.exitCode === -1 && r.messages.length === 0
-			? theme.fg("muted", "▢")
-			: r.exitCode === -1
-				? theme.fg("warning", "⏳")
-				: isFailedResult(r)
-					? theme.fg("error", "✗")
-					: theme.fg("success", "✓");
-
-	let activity: string;
-	if (r.exitCode === -1 && r.messages.length === 0) {
-		activity = theme.fg("muted", "queued");
-	} else if (isFailedResult(r)) {
-		const reason = (r.errorMessage || r.stderr || r.stopReason || "error").split("\n")[0];
-		activity = theme.fg("error", truncatePlain(reason, 60));
-	} else {
-		const items = getDisplayItems(r.messages);
-		const last = items[items.length - 1];
-		if (!last) activity = theme.fg("muted", r.exitCode === -1 ? "starting…" : "(no output)");
-		else if (last.type === "toolCall") activity = formatToolCall(last.name, last.args, theme.fg.bind(theme));
-		else activity = theme.fg("toolOutput", truncatePlain(last.text.split("\n")[0], 60));
+// --- glyph system ------------------------------------------------------------
+// Single-width glyphs only (⏳ renders emoji-wide on many terminals and breaks
+// column alignment): ✻ running · queued ✓ done ✗ failed.
+
+function statusGlyph(r: SingleResult, theme: RenderTheme): string {
+	if (r.exitCode === -1) return r.messages.length === 0 ? theme.fg("muted", "·") : theme.fg("warning", "✻");
+	return isFailedResult(r) ? theme.fg("error", "✗") : theme.fg("success", "✓");
+}
+
+function toolUseCount(messages: Message[]): number {
+	let n = 0;
+	for (const msg of messages) {
+		if (msg.role !== "assistant") continue;
+		for (const part of msg.content as any[]) if (part.type === "toolCall") n++;
+	}
+	return n;
+}
+
+export function formatDuration(ms: number): string {
+	const s = Math.max(0, Math.round(ms / 1000));
+	if (s < 60) return `${s}s`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m ${String(s % 60).padStart(2, "0")}s`;
+	return `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`;
+}
+
+/** Agent wall time; while running, elapsed since start (recomputed each render). */
+function agentDuration(r: SingleResult): number {
+	return Math.max(0, (r.endedAt ?? Date.now()) - r.startedAt);
+}
+
+/** Whole-call wall time: earliest start to latest end. */
+function callDuration(details: SubagentDetails): number {
+	const start = Math.min(...details.results.map((r) => r.startedAt));
+	const end = Math.max(...details.results.map((r) => r.endedAt ?? Date.now()));
+	return Math.max(0, end - start);
+}
+
+function aggregateUsage(results: SingleResult[]) {
+	const total = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0, turns: 0 };
+	for (const r of results) {
+		total.input += r.usage.input;
+		total.output += r.usage.output;
+		total.cacheRead += r.usage.cacheRead;
+		total.cacheWrite += r.usage.cacheWrite;
+		total.cost += r.usage.cost;
+		total.turns += r.usage.turns;
+	}
+	return total;
+}
+
+/** Duration + tool count + (once finished) tokens and cost — expanded headers. */
+function headerStats(r: SingleResult): string {
+	const parts = [formatDuration(agentDuration(r))];
+	const tools = toolUseCount(r.messages);
+	if (tools) parts.push(`${tools} tool${tools > 1 ? "s" : ""}`);
+	if (r.exitCode !== -1) {
+		if (r.usage.output) parts.push(`↓${formatTokens(r.usage.output)}`);
+		if (r.usage.cost) parts.push(`$${r.usage.cost.toFixed(4)}`);
+	}
+	return parts.join(" · ");
+}
+
+/** Duration + tool count only — collapsed headers; tokens/cost live on the summary line. */
+function collapsedStats(r: SingleResult): string {
+	const parts = [formatDuration(agentDuration(r))];
+	const tools = toolUseCount(r.messages);
+	if (tools) parts.push(`${tools} tool${tools > 1 ? "s" : ""}`);
+	return parts.join(" · ");
+}
+
+function failReason(r: SingleResult): string {
+	return (r.errorMessage || r.stderr || r.stopReason || "error").split("\n")[0];
+}
+
+function taskFirstLine(task: string): string {
+	return task.split("\n").find((l) => l.trim().length > 0) ?? "";
+}
+
+/** Latest tool call or assistant text; only meaningful while the agent is in flight. */
+function runningActivity(r: SingleResult, theme: RenderTheme): string | null {
+	if (r.exitCode !== -1 || isQueued(r)) return null;
+	const items = getDisplayItems(r.messages);
+	const last = items[items.length - 1];
+	if (!last) return theme.fg("muted", "starting…");
+	if (last.type === "toolCall") return formatToolCall(last.name, last.args, theme.fg.bind(theme));
+	return theme.fg("toolOutput", last.text.split("\n")[0]);
+}
+
+function isQueued(r: SingleResult): boolean {
+	return r.exitCode === -1 && r.messages.length === 0;
+}
+
+/**
+ * The collapsed transcript block under the one-line call header
+ * (`spawn_agents (N agents)`). Every agent is a 2-line block — glyph + name
+ * + stats, then the first line of its task (the stable identifier, even
+ * when names are opaque). Running agents grow a third line with the latest
+ * tool call. Failed agents put the error on the header; tokens/cost live
+ * only on the call-total summary (multi-agent, finished). The hint line is
+ * running-only. The panel (alt+a) is the live timeline; this stays a summary.
+ */
+function scoreboardView(details: SubagentDetails, theme: RenderTheme): Text {
+	const results = details.results;
+	const running = results.filter((r) => r.exitCode === -1).length;
+	const successCount = results.filter((r) => r.exitCode !== -1 && !isFailedResult(r)).length;
+	const failCount = results.length - running - successCount;
+	const isRunning = running > 0;
+
+	let summary = "";
+	if (!isRunning && results.length > 1) {
+		const parts = [`${successCount}/${results.length}`];
+		if (failCount > 0) parts.push(`${failCount} failed`);
+		parts.push(formatDuration(callDuration(details)));
+		const total = aggregateUsage(results);
+		const totalTools = results.reduce((n, r) => n + toolUseCount(r.messages), 0);
+		if (totalTools > 0) parts.push(`${totalTools} tools`);
+		if (total.output) parts.push(`↓${formatTokens(total.output)}`);
+		if (total.cost) parts.push(`$${total.cost.toFixed(4)}`);
+		summary = parts.join(" · ");
 	}
 
-	const turns = r.usage.turns > 0 ? theme.fg("dim", ` ${r.usage.turns}t`) : "";
-	return `  ${icon} ${theme.fg("accent", r.name)}${turns}  ${activity}`;
+	// Label models only when the call mixes them — a uniform call would
+	// just repeat the parent's model on every block.
+	const models = new Set(results.map((r) => r.model).filter(Boolean));
+	const showModels = models.size > 1;
+	const cols = terminalColumns();
+
+	const lines: string[] = [];
+	for (const r of results) {
+		let header = `${statusGlyph(r, theme)} ${theme.fg("toolTitle", theme.bold(r.name))}`;
+		if (!isQueued(r)) header += ` ${theme.fg("dim", collapsedStats(r))}`;
+		if (showModels && r.model) header += ` ${theme.fg("dim", r.model.split("/").pop() ?? r.model)}`;
+		if (isFailedResult(r)) header += `  ${theme.fg("error", failReason(r))}`;
+		lines.push(truncateVisual(header, cols));
+
+		const task = taskFirstLine(r.task);
+		if (task) lines.push(`  ${truncateVisual(theme.fg("dim", task), cols - 2)}`);
+
+		const activity = runningActivity(r, theme);
+		if (activity) lines.push(`  ${truncateVisual(activity, cols - 2)}`);
+	}
+	if (summary) lines.push(theme.fg("dim", summary));
+	if (isRunning) lines.push(theme.fg("muted", "alt+a live details"));
+	return new Text(lines.join("\n"), 0, 0);
 }
 
 export function renderSpawnResult(
@@ -211,129 +341,42 @@ export function renderSpawnResult(
 
 	const mdTheme = getMarkdownTheme();
 
-	if (expanded && !isAgentRunning(details) && details.results.length === 1) {
-		const r = details.results[0];
-		const isError = isFailedResult(r);
-		const icon = isError ? theme.fg("error", "✗") : theme.fg("success", "✓");
-		const displayItems = getDisplayItems(r.messages);
-		const finalOutput = getFinalOutput(r.messages);
-
+	if (expanded && !isAgentRunning(details)) {
+		// Expanded (ctrl+o, after completion): final outputs only — one block
+		// per agent with a quantified header and the answer rendered as
+		// markdown. The per-tool timeline is the panel's job (alt+a); the
+		// transcript archive does not duplicate it.
 		const container = new Container();
-		let header = `${icon} ${theme.fg("toolTitle", theme.bold(r.name))}`;
-		if (isError && r.stopReason) header += ` ${theme.fg("error", `[${r.stopReason}]`)}`;
-		container.addChild(new Text(header, 0, 0));
-		if (isError && r.errorMessage)
-			container.addChild(new Text(theme.fg("error", `Error: ${r.errorMessage}`), 0, 0));
-		container.addChild(new Spacer(1));
-		container.addChild(new Text(theme.fg("muted", "─── Task ───"), 0, 0));
-		container.addChild(new Text(theme.fg("dim", r.task), 0, 0));
-		container.addChild(new Spacer(1));
-		container.addChild(new Text(theme.fg("muted", "─── Output ───"), 0, 0));
-		if (displayItems.length === 0 && !finalOutput) {
-			container.addChild(new Text(theme.fg("muted", "(no output)"), 0, 0));
-		} else {
-			for (const item of displayItems) {
-				if (item.type === "toolCall")
-					container.addChild(
-						new Text(
-							theme.fg("muted", "→ ") + formatToolCall(item.name, item.args, theme.fg.bind(theme)),
-							0, 0,
-						),
-					);
-			}
-			if (finalOutput) {
-				container.addChild(new Spacer(1));
-				container.addChild(new Markdown(finalOutput.trim(), 0, 0, mdTheme));
-			}
-		}
-		const usageStr = formatUsageStats(r.usage, r.model);
-		if (usageStr) {
-			container.addChild(new Spacer(1));
-			container.addChild(new Text(theme.fg("dim", usageStr), 0, 0));
-		}
-		return container;
-	}
-
-	const aggregateUsage = (results: SingleResult[]) => {
-		const total = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0, turns: 0 };
-		for (const r of results) {
-			total.input += r.usage.input;
-			total.output += r.usage.output;
-			total.cacheRead += r.usage.cacheRead;
-			total.cacheWrite += r.usage.cacheWrite;
-			total.cost += r.usage.cost;
-			total.turns += r.usage.turns;
-		}
-		return total;
-	};
-
-	const running = details.results.filter((r) => r.exitCode === -1).length;
-	const successCount = details.results.filter((r) => r.exitCode !== -1 && !isFailedResult(r)).length;
-	const failCount = details.results.filter((r) => r.exitCode !== -1 && isFailedResult(r)).length;
-	const isRunning = running > 0;
-	const icon = isRunning
-		? theme.fg("warning", "⏳")
-		: failCount > 0
-			? theme.fg("warning", "◐")
-			: theme.fg("success", "✓");
-	const status = isRunning
-		? `${successCount + failCount}/${details.results.length} done, ${running} running`
-		: `${successCount}/${details.results.length} succeeded${failCount > 0 ? `, ${failCount} failed` : ""}`;
-
-	if (expanded && !isRunning) {
-		const container = new Container();
-		container.addChild(
-			new Text(`${icon} ${theme.fg("toolTitle", theme.bold("spawn_agents "))}${theme.fg("accent", status)}`, 0, 0),
-		);
-
-		for (const r of details.results) {
-			const rIcon = isFailedResult(r) ? theme.fg("error", "✗") : theme.fg("success", "✓");
-			const displayItems = getDisplayItems(r.messages);
-			const finalOutput = getFinalOutput(r.messages);
-
-			container.addChild(new Spacer(1));
-			container.addChild(new Text(`${theme.fg("muted", "─── ") + theme.fg("accent", r.name)} ${rIcon}`, 0, 0));
+		details.results.forEach((r, i) => {
+			if (i > 0) container.addChild(new Spacer(1));
+			const isError = isFailedResult(r);
+			let header = `${statusGlyph(r, theme)} ${theme.fg("toolTitle", theme.bold(r.name))} ${theme.fg("dim", headerStats(r))}`;
+			if (isError && r.stopReason) header += ` ${theme.fg("error", `[${r.stopReason}]`)}`;
+			container.addChild(new Text(header, 0, 0));
+			if (isError && r.errorMessage)
+				container.addChild(new Text(theme.fg("error", `Error: ${r.errorMessage}`), 0, 0));
 			container.addChild(new Text(theme.fg("muted", "Task: ") + theme.fg("dim", r.task), 0, 0));
-
-			// Show tool calls
-			for (const item of displayItems) {
-				if (item.type === "toolCall") {
-					container.addChild(
-						new Text(theme.fg("muted", "→ ") + formatToolCall(item.name, item.args, theme.fg.bind(theme)), 0, 0),
-					);
-				}
-			}
-
-			// Show final output as markdown
-			if (finalOutput) {
+			const finalOutput = getFinalOutput(r.messages);
+			if (finalOutput.trim()) {
 				container.addChild(new Spacer(1));
 				container.addChild(new Markdown(finalOutput.trim(), 0, 0, mdTheme));
+			} else {
+				container.addChild(new Text(theme.fg("muted", "(no output)"), 0, 0));
 			}
-
-			const taskUsage = formatUsageStats(r.usage, r.model);
-			if (taskUsage) container.addChild(new Text(theme.fg("dim", taskUsage), 0, 0));
-		}
-
-		const usageStr = formatUsageStats(aggregateUsage(details.results));
-		if (usageStr) {
+		});
+		if (details.results.length > 1) {
+			// Same shape as the collapsed header, prefixed with Total.
+			const total = aggregateUsage(details.results);
+			const totalTools = toolUseCount(details.results.flatMap((r) => r.messages));
+			const headParts = [formatDuration(callDuration(details))];
+			if (totalTools > 0) headParts.push(`${totalTools} tools`);
+			if (total.output) headParts.push(`↓${formatTokens(total.output)}`);
+			if (total.cost) headParts.push(`$${total.cost.toFixed(4)}`);
 			container.addChild(new Spacer(1));
-			container.addChild(new Text(theme.fg("dim", `Total: ${usageStr}`), 0, 0));
+			container.addChild(new Text(theme.fg("dim", `Total: ${headParts.join(" · ")}`), 0, 0));
 		}
 		return container;
 	}
 
-	// --- scoreboard: one glanceable line per agent -----------------------
-	// The panel (alt+a) is the live view; the collapsed transcript block is a
-	// summary, not a competing log. Expanded (Ctrl+O, after completion) is the
-	// archive.
-	let text = `${icon} ${theme.fg("toolTitle", theme.bold("spawn_agents "))}${theme.fg("accent", status)}`;
-	for (const r of details.results) text += `\n${scoreboardLine(r, theme)}`;
-	if (!isRunning) {
-		const usageStr = formatUsageStats(aggregateUsage(details.results));
-		if (usageStr) text += `\n${theme.fg("dim", `Total: ${usageStr}`)}`;
-		text += `\n${theme.fg("muted", "(alt+a · Ctrl+O)")}`;
-	} else {
-		text += `\n${theme.fg("muted", "(alt+a · live details)")}`;
-	}
-	return new Text(text, 0, 0);
+	return scoreboardView(details, theme);
 }

package/spawn.ts

@@ -30,6 +30,9 @@ export interface SingleResult {
 	task: string;
 	/** -1 while the agent is still running */
 	exitCode: number;
+	/** Wall-clock timestamps: call time to agent end (unset while running). */
+	startedAt: number;
+	endedAt?: number;
 	messages: Message[];
 	stderr: string;
 	usage: UsageStats;
@@ -162,6 +165,7 @@ export async function runSpec(
 		name: displayName,
 		task: spec.task,
 		exitCode: -1, // -1 = still running; real exit code set on close
+		startedAt: Date.now(),
 		messages: [],
 		stderr: "",
 		usage: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0, contextTokens: 0, turns: 0 },
@@ -281,6 +285,7 @@ export async function runSpec(
 	});
 
 	currentResult.exitCode = exitCode;
+	currentResult.endedAt = Date.now();
 	if (wasAborted) throw new Error("Subagent was aborted");
 	return currentResult;
 }