lsd-pi 1.3.7 → 1.3.10

package/packages/pi-coding-agent/src/modes/interactive/components/__tests__/tool-summary-line.test.ts

@@ -2,7 +2,7 @@ import { describe, it } from "node:test";
 import assert from "node:assert/strict";
 import stripAnsi from "strip-ansi";
 
-import { ToolSummaryLine } from "../tool-summary-line.js";
+import { ToolSummaryLine, extractToolLabel } from "../tool-summary-line.js";
 import { initTheme } from "../../theme/theme.js";
 
 initTheme("dark");
@@ -17,7 +17,8 @@ describe("ToolSummaryLine", () => {
 		assert.match(rendered, /^ ● /);
 		assert.ok(rendered.includes("reading 2 files · 0.8s"));
 		assert.equal(summary.canGroupWith("read"), true);
-		assert.equal(summary.canGroupWith("find"), false);
+		assert.equal(summary.canGroupWith("find"), true);
+		assert.equal(summary.canGroupWith("bash"), false);
 		assert.equal(rendered.includes("collapsed tools"), false);
 		assert.equal(rendered.includes("⎯"), false);
 	});
@@ -38,4 +39,130 @@ describe("ToolSummaryLine", () => {
 		summary.setHidden(true);
 		assert.deepEqual(summary.render(80), []);
 	});
+
+	it("renders spinner and label line when pending tools exist", () => {
+		const summary = new ToolSummaryLine();
+		summary.addPendingTool("t1", "read", { path: "src/foo/bar.ts" });
+
+		const rendered = stripAnsi(summary.render(160).join("\n"));
+		assert.ok(!rendered.startsWith(" ●"));
+		assert.ok(rendered.includes("  └ bar.ts"));
+		assert.ok(rendered.includes("bar.ts"));
+	});
+
+	it("keeps last tool label after pending tool completes", () => {
+		const summary = new ToolSummaryLine();
+		summary.addPendingTool("t1", "read", { path: "file.ts" });
+		assert.equal(summary.hasPendingTools(), true);
+
+		summary.removePendingTool("t1");
+		summary.addTool("read", 500);
+		assert.equal(summary.hasPendingTools(), false);
+
+		const rendered = stripAnsi(summary.render(160).join("\n"));
+		assert.ok(rendered.includes("●"));
+		assert.ok(rendered.includes("0.5s"));
+		assert.ok(rendered.includes("└ file.ts"));
+	});
+
+	it("aggregates completed and pending tools in summary text", () => {
+		const summary = new ToolSummaryLine();
+		summary.addTool("read", 300);
+		summary.addPendingTool("t1", "grep", { pattern: "TODO" });
+
+		const rendered = stripAnsi(summary.render(160).join("\n"));
+		assert.ok(rendered.includes("1 file"));
+		assert.ok(rendered.includes("1 pattern"));
+		assert.ok(rendered.includes("…"));
+		assert.ok(rendered.includes("TODO"));
+	});
+
+	it("shows expand hint when set and tools are pending", () => {
+		const summary = new ToolSummaryLine();
+		summary.setExpandHint("(ctrl+o to expand)");
+		summary.addPendingTool("t1", "read", { path: "test.ts" });
+
+		const rendered = stripAnsi(summary.render(160).join("\n"));
+		assert.ok(rendered.includes("ctrl+o to expand"));
+	});
+
+	it("does not show expand hint when no pending tools", () => {
+		const summary = new ToolSummaryLine();
+		summary.setExpandHint("(ctrl+o to expand)");
+		summary.addTool("read", 300);
+
+		const rendered = stripAnsi(summary.render(160).join("\n"));
+		assert.ok(!rendered.includes("ctrl+o to expand"));
+	});
+
+	it("updates label when pending tool args change", () => {
+		const summary = new ToolSummaryLine();
+		summary.addPendingTool("t1", "read", { path: "old.ts" });
+
+		let rendered = stripAnsi(summary.render(160).join("\n"));
+		assert.ok(rendered.includes("old.ts"));
+
+		summary.updatePendingToolArgs("t1", { path: "new.ts" });
+		rendered = stripAnsi(summary.render(160).join("\n"));
+		assert.ok(rendered.includes("new.ts"));
+	});
+
+	it("clears pending spinner without removing last label", () => {
+		const summary = new ToolSummaryLine();
+		summary.addPendingTool("t1", "read", { path: "file.ts" });
+
+		summary.clearPendingTools();
+
+		const rendered = stripAnsi(summary.render(160).join("\n"));
+		assert.ok(!rendered.includes("◯"));
+		assert.ok(!rendered.includes("◔"));
+		assert.ok(!rendered.includes("◑"));
+		assert.ok(!rendered.includes("◕"));
+		assert.ok(!rendered.includes("● Listing"));
+		assert.ok(!rendered.includes("…"));
+		assert.ok(rendered === "" || rendered.includes("file.ts"));
+	});
+
+	it("canGroupWith considers pending tools", () => {
+		const summary = new ToolSummaryLine();
+		summary.addPendingTool("t1", "read", { path: "a.ts" });
+
+		assert.equal(summary.canGroupWith("read"), true);
+		assert.equal(summary.canGroupWith("grep"), true);
+		assert.equal(summary.canGroupWith("bash"), false);
+	});
+});
+
+describe("extractToolLabel", () => {
+	it("extracts basename for read tool", () => {
+		assert.equal(extractToolLabel("read", { path: "src/foo/bar.ts" }), "bar.ts");
+		assert.equal(extractToolLabel("read", { file_path: "/abs/path/file.json" }), "file.json");
+		assert.equal(extractToolLabel("read", {}), "read");
+	});
+
+	it("extracts pattern for grep tool", () => {
+		assert.equal(extractToolLabel("grep", { pattern: "TODO" }), "TODO");
+		assert.equal(extractToolLabel("grep", {}), "grep");
+	});
+
+	it("extracts pattern for find tool", () => {
+		assert.equal(extractToolLabel("find", { pattern: "*.ts" }), "*.ts");
+		assert.equal(extractToolLabel("find", {}), "find");
+	});
+
+	it("extracts path for ls tool", () => {
+		assert.equal(extractToolLabel("ls", { path: "src/components" }), "components");
+		assert.equal(extractToolLabel("ls", {}), ".");
+	});
+
+	it("extracts symbol or file for lsp tool", () => {
+		assert.equal(extractToolLabel("lsp", { symbol: "MyClass" }), "MyClass");
+		assert.equal(extractToolLabel("lsp", { file: "src/index.ts" }), "index.ts");
+		assert.equal(extractToolLabel("lsp", { symbol: "foo", file: "bar.ts" }), "foo");
+		assert.equal(extractToolLabel("lsp", {}), "lsp");
+	});
+
+	it("returns tool name for unknown tools", () => {
+		assert.equal(extractToolLabel("custom_tool", { whatever: "value" }), "custom_tool");
+	});
 });

package/packages/pi-coding-agent/src/modes/interactive/components/assistant-message.ts

@@ -1,10 +1,60 @@
 import type { AssistantMessage } from "@gsd/pi-ai";
+import type { Component } from "@gsd/pi-tui";
 import { Container, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
 
 /**
- * Component that renders a complete assistant message
+ * Create the response marker prefixed to the first visible text block.
+ * Lazy to avoid calling theme.fg() at module load time (fails in tests).
+ */
+function getResponseMarker(): string {
+	return `${theme.fg("accent", "●")} `;
+}
+
+/**
+ * Create a Markdown component for an assistant text block.
+ * @param text - Text content (should be trimmed by caller)
+ * @param withMarker - Whether to prefix with the response marker
+ * @param markdownTheme - Markdown theme
+ */
+export function createTextMarkdown(
+	text: string,
+	withMarker: boolean,
+	markdownTheme: MarkdownTheme,
+): Markdown {
+	const withMarker_ = withMarker ? `${getResponseMarker()}${text}` : text;
+	return new Markdown(withMarker_, 1, 0, markdownTheme);
+}
+
+/**
+ * Create a Markdown component for a thinking block.
+ */
+export function createThinkingMarkdown(
+	thinking: string,
+	markdownTheme: MarkdownTheme,
+): Markdown {
+	return new Markdown(thinking.trim(), 1, 0, markdownTheme, {
+		color: (text: string) => theme.fg("thinkingText", text),
+		italic: true,
+	});
+}
+
+/**
+ * Create an error/abort Text component.
+ */
+export function createErrorText(message: string): Text {
+	return new Text(theme.fg("error", message), 1, 0);
+}
+
+/**
+ * Component that renders a complete assistant message.
+ *
+ * Supports two rendering modes:
+ * 1. Legacy: `updateContent(message)` renders all text/thinking into a contentContainer.
+ *    Tool rows are expected to be added as siblings in the parent container.
+ * 2. Interleaved: `updateContentOrdered(message, toolComponents)` renders text/thinking
+ *    AND tool components in content order. Tool components become children of this container.
  */
 export class AssistantMessageComponent extends Container {
 	private contentContainer: Container;
@@ -52,6 +102,12 @@ export class AssistantMessageComponent extends Container {
 		this.thinkingLevel = level;
 	}
 
+	/**
+	 * Legacy rendering: renders text/thinking blocks into contentContainer.
+	 * Stops rendering at the first tool-type block (toolCall/serverToolUse).
+	 * Post-tool text blocks are handled by the chat-controller to preserve
+	 * content ordering relative to tool rows.
+	 */
 	updateContent(message: AssistantMessage): void {
 		this.lastMessage = message;
 
@@ -68,33 +124,34 @@ export class AssistantMessageComponent extends Container {
 			this.contentContainer.addChild(new Spacer(1));
 		}
 
-		// Render content in order
+		// Render content blocks up to (but not including) the first tool block.
+		// Text blocks after tools are rendered by the chat-controller as separate
+		// components to maintain correct visual ordering with tool rows.
 		let markerAdded = false;
-		const responseMarker = `${theme.fg("accent", "●")} `;
 		for (let i = 0; i < message.content.length; i++) {
 			const content = message.content[i];
+
+			// Stop at the first tool-type block — post-tool content is handled externally
+			if (content.type === "toolCall" || content.type === "serverToolUse") {
+				break;
+			}
+
 			if (content.type === "text" && content.text.trim()) {
-				// Assistant text messages with no background - trim the text
-				// Set paddingY=0 to avoid extra spacing before tool executions
 				const text = content.text.trim();
-				const withMarker = markerAdded ? text : `${responseMarker}${text}`;
+				const withMarker = markerAdded ? text : `${getResponseMarker()}${text}`;
 				this.contentContainer.addChild(new Markdown(withMarker, 1, 0, this.markdownTheme));
 				markerAdded = true;
 			} else if (content.type === "thinking" && content.thinking.trim()) {
 				if (this.hideThinkingBlock) {
-					// Hide thinking content entirely when hide-thinking is enabled.
 					continue;
 				}
 
-				// Add spacing only when another visible assistant content block follows.
-				// This avoids a superfluous blank line before separately-rendered tool execution blocks.
 				const hasVisibleContentAfter = message.content.slice(i + 1).some((c) => {
 					if (c.type === "text") return Boolean(c.text.trim());
 					if (c.type === "thinking") return !this.hideThinkingBlock && Boolean(c.thinking.trim());
 					return false;
 				});
 
-				// Thinking traces in thinkingText color, italic
 				this.contentContainer.addChild(
 					new Markdown(content.thinking.trim(), 1, 0, this.markdownTheme, {
 						color: (text: string) => theme.fg("thinkingText", text),
@@ -108,8 +165,7 @@ export class AssistantMessageComponent extends Container {
 		}
 
 		// Check if aborted - show after partial content
-		// But only if there are no tool calls (tool execution components will show the error)
-		const hasToolCalls = message.content.some((c) => c.type === "toolCall");
+		const hasToolCalls = message.content.some((c) => c.type === "toolCall" || c.type === "serverToolUse");
 		if (!hasToolCalls) {
 			if (message.stopReason === "aborted") {
 				const abortMessage =
@@ -128,12 +184,96 @@ export class AssistantMessageComponent extends Container {
 				this.contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), 1, 0));
 			}
 		}
+	}
+
+	/**
+	 * Interleaved rendering: renders text/thinking AND tool components in content order.
+	 * Tool components become children of this container, preserving visual ordering.
+	 *
+	 * @param message - The assistant message
+	 * @param toolComponents - Map of content block ID → pre-created Component (ToolExecutionComponent etc.)
+	 * @returns Map of content block ID → the tool Component that was placed (for pending tool tracking)
+	 */
+	updateContentOrdered(
+		message: AssistantMessage,
+		toolComponents?: Map<string, Component>,
+	): Map<string, Component> {
+		this.lastMessage = message;
+
+		// Clear contentContainer so we can re-render all blocks in order
+		this.contentContainer.clear();
+
+		const placedTools = new Map<string, Component>();
+
+		// Check if there's any visible content at all
+		const hasVisibleContent = message.content.some((c) => {
+			if (c.type === "text") return Boolean(c.text.trim());
+			if (c.type === "thinking") return !this.hideThinkingBlock && Boolean(c.thinking.trim());
+			return false;
+		});
+
+		if (hasVisibleContent) {
+			this.contentContainer.addChild(new Spacer(1));
+		}
+
+		// Render all content blocks in order
+		let markerAdded = false;
+		for (let i = 0; i < message.content.length; i++) {
+			const block = message.content[i];
+
+			if (block.type === "text" && block.text.trim()) {
+				const text = block.text.trim();
+				const withMarker = markerAdded ? text : `${getResponseMarker()}${text}`;
+				this.contentContainer.addChild(new Markdown(withMarker, 1, 0, this.markdownTheme));
+				markerAdded = true;
+			} else if (block.type === "thinking" && block.thinking.trim()) {
+				if (this.hideThinkingBlock) {
+					continue;
+				}
+
+				// Add spacing only when another visible assistant content block follows.
+				const hasVisibleContentAfter = message.content.slice(i + 1).some((c) => {
+					if (c.type === "text") return Boolean(c.text.trim());
+					if (c.type === "thinking") return !this.hideThinkingBlock && Boolean(c.thinking.trim());
+					return false;
+				});
+
+				this.contentContainer.addChild(
+					new Markdown(block.thinking.trim(), 1, 0, this.markdownTheme, {
+						color: (text: string) => theme.fg("thinkingText", text),
+						italic: true,
+					}),
+				);
+				if (hasVisibleContentAfter) {
+					this.contentContainer.addChild(new Spacer(1));
+				}
+			} else if ((block.type === "toolCall" || block.type === "serverToolUse") && toolComponents?.has(block.id)) {
+				// Place the pre-created tool component in content order
+				const toolComponent = toolComponents.get(block.id)!;
+				this.contentContainer.addChild(toolComponent);
+				placedTools.set(block.id, toolComponent);
+			}
+			// webSearchResult blocks don't produce their own component;
+			// they update the matching serverToolUse component via updateResult()
+		}
+
+		// Handle abort/error after content (only if no tool calls)
+		const hasToolCalls = message.content.some((c) => c.type === "toolCall" || c.type === "serverToolUse");
+		if (!hasToolCalls) {
+			if (message.stopReason === "aborted") {
+				const abortMessage =
+					message.errorMessage && message.errorMessage !== "Request was aborted"
+						? message.errorMessage
+						: "Operation aborted";
+				this.contentContainer.addChild(new Spacer(1));
+				this.contentContainer.addChild(new Text(theme.fg("error", abortMessage), 1, 0));
+			} else if (message.stopReason === "error") {
+				const errorMsg = message.errorMessage || "Unknown error";
+				this.contentContainer.addChild(new Spacer(1));
+				this.contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), 1, 0));
+			}
+		}
 
-		// Timestamp display removed
-		// Show timestamp when the message is complete (has a stop reason)
-		// if (message.stopReason && message.timestamp) {
-		// 	const timeStr = formatTimestamp(message.timestamp, this.timestampFormat);
-		// 	this.contentContainer.addChild(new Text(theme.fg("dim", timeStr), 1, 0));
-		// }
+		return placedTools;
 	}
 }

package/packages/pi-coding-agent/src/modes/interactive/components/tool-execution.ts

@@ -134,6 +134,7 @@ export class ToolExecutionComponent extends Container {
     // When true, this component intentionally renders no lines
     private hideComponent = false;
     private manuallyHidden = false;
+    private indented = false;
     private startTime = Date.now();
 
     // Tool status spinner state
@@ -457,6 +458,11 @@ export class ToolExecutionComponent extends Container {
         this.updateDisplay();
     }
 
+    setIndented(indented: boolean): void {
+        this.indented = indented;
+        this.updateDisplay();
+    }
+
     isHidden(): boolean {
         return this.hideComponent;
     }
@@ -502,7 +508,18 @@ export class ToolExecutionComponent extends Container {
         if (this.hideComponent) {
             return [];
         }
-        return [...super.render(width), ""];
+        const lines = super.render(width);
+        if (this.indented) {
+            const gutter = theme.fg("dim", "│");
+            return lines.map((line, i) => {
+                if (i === lines.length - 1 && line === "") {
+                    // Trailing empty spacer line → gutter only
+                    return gutter;
+                }
+                return gutter + " " + theme.fg("dim", line);
+            });
+        }
+        return [...lines, ""];
     }
 
     private updateDisplay(): void {

package/packages/pi-coding-agent/src/modes/interactive/components/tool-summary-line.ts

@@ -1,4 +1,5 @@
-import { Container, Text } from "@gsd/pi-tui";
+import { basename } from "node:path";
+import { Container, Text, type TUI } from "@gsd/pi-tui";
 
 import { theme } from "../theme/theme.js";
 
@@ -7,6 +8,11 @@ interface CollapsedTool {
 	elapsed: number;
 }
 
+interface PendingTool {
+	name: string;
+	label: string;
+}
+
 // Tools that can be mixed together in one summary line
 const MIXED_GROUPABLE_TOOLS = new Set([
 	"read", "find", "ls", "grep", "lsp",
@@ -37,6 +43,9 @@ const TOOL_SUMMARY_DESCRIPTORS: Record<string, SummaryDescriptor> = {
 	google_search: { action: "searching web for", singular: "query", plural: "queries" },
 };
 
+const SPINNER_FRAMES = ["◯", "◔", "◑", "◕", "●"];
+const SPINNER_INTERVAL_MS = 150;
+
 function formatCount(count: number, singular: string, plural: string): string {
 	return `${count} ${count === 1 ? singular : plural}`;
 }
@@ -54,25 +63,146 @@ function summarizeToolGroup(name: string, count: number): string {
 	return `${descriptor.action} ${formatCount(count, descriptor.singular, descriptor.plural)}`;
 }
 
+function capitalize(s: string): string {
+	if (!s) return s;
+	return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+export function extractToolLabel(toolName: string, args: Record<string, unknown>): string {
+	switch (toolName) {
+		case "read": {
+			const path = (args.path ?? args.file_path) as string | undefined;
+			return path ? basename(path) : toolName;
+		}
+		case "grep":
+		case "find": {
+			const pattern = args.pattern as string | undefined;
+			return pattern ?? toolName;
+		}
+		case "ls": {
+			const path = args.path as string | undefined;
+			return path ? basename(path) || path : ".";
+		}
+		case "lsp": {
+			const symbol = args.symbol as string | undefined;
+			const file = args.file as string | undefined;
+			if (symbol) return symbol;
+			if (file) return basename(file);
+			return toolName;
+		}
+		default:
+			return toolName;
+	}
+}
+
 export class ToolSummaryLine extends Container {
 	private tools: CollapsedTool[] = [];
+	private pendingTools: Map<string, PendingTool> = new Map();
 	private hidden = false;
 	private contentText: Text;
+	private labelText: Text;
+	private expandHint = "";
+	private ui?: TUI;
+	private spinnerTimer: NodeJS.Timeout | null = null;
+	private spinnerFrame = 0;
+	private lastToolLabel = "";
 
 	canGroupWith(toolName: string): boolean {
-		if (this.tools.length === 0) return true;
-		// Mixed-groupable tools can share a summary line regardless of order
-		if (MIXED_GROUPABLE_TOOLS.has(toolName) && this.tools.every((t) => MIXED_GROUPABLE_TOOLS.has(t.name))) {
+		if (this.tools.length === 0 && this.pendingTools.size === 0) return true;
+		const allCompletedMixed = this.tools.every((t) => MIXED_GROUPABLE_TOOLS.has(t.name));
+		const allPendingMixed = [...this.pendingTools.values()].every((t) => MIXED_GROUPABLE_TOOLS.has(t.name));
+		if (MIXED_GROUPABLE_TOOLS.has(toolName) && allCompletedMixed && allPendingMixed) {
 			return true;
 		}
-		// Otherwise only same-tool grouping
-		return this.tools.every((tool) => tool.name === toolName);
+		return this.tools.every((tool) => tool.name === toolName)
+			&& [...this.pendingTools.values()].every((tool) => tool.name === toolName);
 	}
 
-	constructor() {
+	constructor(ui?: TUI) {
 		super();
+		this.ui = ui;
 		this.contentText = new Text("", 1, 0);
+		this.labelText = new Text("", 1, 0);
 		this.addChild(this.contentText);
+		this.addChild(this.labelText);
+	}
+
+	setUI(ui: TUI): void {
+		this.ui = ui;
+	}
+
+	setExpandHint(hint: string): void {
+		this.expandHint = hint;
+		this.updateDisplay();
+	}
+
+	addPendingTool(toolCallId: string, name: string, args: Record<string, unknown>): void {
+		const label = extractToolLabel(name, args);
+		this.pendingTools.set(toolCallId, { name, label });
+		this.lastToolLabel = label;
+		this.startSpinner();
+		this.updateDisplay();
+	}
+
+	removePendingTool(toolCallId: string): void {
+		const removed = this.pendingTools.get(toolCallId);
+		this.pendingTools.delete(toolCallId);
+		if (removed) {
+			this.lastToolLabel = removed.label;
+		}
+		if (this.pendingTools.size === 0) {
+			this.stopSpinner();
+		} else {
+			const lastPending = [...this.pendingTools.values()].at(-1);
+			if (lastPending) this.lastToolLabel = lastPending.label;
+		}
+		this.updateDisplay();
+	}
+
+	hasPendingTools(): boolean {
+		return this.pendingTools.size > 0;
+	}
+
+	hasPendingTool(toolCallId: string): boolean {
+		return this.pendingTools.has(toolCallId);
+	}
+
+	clearPendingTools(): void {
+		const lastPending = [...this.pendingTools.values()].at(-1);
+		if (lastPending) {
+			this.lastToolLabel = lastPending.label;
+		}
+		this.pendingTools.clear();
+		this.stopSpinner();
+		this.updateDisplay();
+	}
+
+	updatePendingToolArgs(toolCallId: string, args: Record<string, unknown>): void {
+		const pending = this.pendingTools.get(toolCallId);
+		if (!pending) return;
+		pending.label = extractToolLabel(pending.name, args);
+		this.lastToolLabel = pending.label;
+		this.updateDisplay();
+	}
+
+	private startSpinner(): void {
+		if (this.spinnerTimer) return;
+		this.spinnerTimer = setInterval(() => {
+			this.spinnerFrame = (this.spinnerFrame + 1) % SPINNER_FRAMES.length;
+			this.updateDisplay();
+			this.ui?.requestRender();
+		}, SPINNER_INTERVAL_MS);
+		this.spinnerTimer.unref?.();
+	}
+
+	private stopSpinner(): void {
+		if (!this.spinnerTimer) return;
+		clearInterval(this.spinnerTimer);
+		this.spinnerTimer = null;
+	}
+
+	dispose(): void {
+		this.stopSpinner();
 	}
 
 	addTool(name: string, elapsed: number): void {
@@ -90,18 +220,42 @@ export class ToolSummaryLine extends Container {
 	}
 
 	override render(width: number): string[] {
-		if (this.hidden || this.tools.length === 0) {
+		if (this.hidden || (this.tools.length === 0 && this.pendingTools.size === 0)) {
 			return [];
 		}
 		return super.render(width);
 	}
 
 	private updateDisplay(): void {
-		if (this.tools.length === 0) {
+		if (this.tools.length === 0 && this.pendingTools.size === 0) {
 			this.contentText.setText("");
+			this.labelText.setText("");
+			return;
+		}
+
+		if (this.pendingTools.size > 0) {
+			const counts = new Map<string, number>();
+			for (const tool of this.tools) {
+				counts.set(tool.name, (counts.get(tool.name) ?? 0) + 1);
+			}
+			for (const tool of this.pendingTools.values()) {
+				counts.set(tool.name, (counts.get(tool.name) ?? 0) + 1);
+			}
+
+			const groupedTools = [...counts.entries()]
+				.map(([name, count]) => summarizeToolGroup(name, count))
+				.map((value, index) => index === 0 ? capitalize(value) : value)
+				.join(", ");
+			const spinner = theme.fg("accent", SPINNER_FRAMES[this.spinnerFrame]);
+			const hint = this.expandHint ? theme.fg("muted", ` ${this.expandHint}`) : "";
+			this.contentText.setText(`${spinner} ${theme.fg("text", groupedTools)}${theme.fg("muted", "…")}${hint}`);
+
+			const lastPending = [...this.pendingTools.values()].at(-1);
+			this.labelText.setText(lastPending ? theme.fg("muted", `  └ ${lastPending.label}`) : "");
 			return;
 		}
 
+		this.labelText.setText(this.lastToolLabel ? theme.fg("muted", `  └ ${this.lastToolLabel}`) : "");
 		const counts = new Map<string, number>();
 		let totalElapsed = 0;
 		for (const tool of this.tools) {
@@ -114,7 +268,7 @@ export class ToolSummaryLine extends Container {
 			.join(" · ");
 		const elapsed = (totalElapsed / 1000).toFixed(1);
 		const indicator = theme.fg("success", "●");
-		const details = theme.fg("muted", `${groupedTools} · ${elapsed}s`);
+		const details = theme.fg("text", groupedTools) + theme.fg("muted", ` · ${elapsed}s`);
 		this.contentText.setText(`${indicator} ${details}`);
 	}
 }