gsd-pi 2.80.0-dev.96f4d89d5 → 2.80.0-dev.a947d025c

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

@@ -1,3 +1,4 @@
+// GSD-2 Interactive Tool Execution Rendering
 import {
 	Box,
 	Container,
@@ -106,13 +107,14 @@ function renderToolFrame(
 
 	const borderColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
 	const topColor = borderColor;
-	const labelColor = opts.tone === "error" ? "toolError" : "surfaceTitle";
+	const labelColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
 	const statusColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
-	const leftStyled = theme.fg(labelColor, theme.bold(`• ${opts.label}`));
+	const leftStyled = theme.fg(labelColor, theme.bold(opts.label));
 	const rightStyled = theme.fg(statusColor, opts.status);
-	const gap = Math.max(1, outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled));
+	const titleWidth = Math.max(1, outerWidth - 4);
+	const gap = Math.max(1, titleWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled));
 	const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
-	const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
+	const headerPad = Math.max(0, titleWidth - visibleWidth(headerRow));
 
 	const sourceLines = trimOuterBlankLines(contentLines);
 	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
@@ -121,21 +123,162 @@ function renderToolFrame(
 	});
 
 	return style()
-		.border("rule")
+		.border("rounded")
 		.borderColor((line) => theme.fg(line.startsWith("─") ? topColor : borderColor, line))
 		.title(headerRow + " ".repeat(headerPad))
 		.render(bodyLines, outerWidth);
 }
 
+function renderCollapsedToolRow(
+	label: string,
+	status: string,
+	width: number,
+	tone: Extract<ToolFrameTone, "success">,
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const contentWidth = Math.max(1, outerWidth - 2);
+	const statusColor = tone === "success" ? "toolSuccess" : "toolMuted";
+	const labelStyled = theme.fg(statusColor, label);
+	const statusStyled = theme.fg(statusColor, status);
+	const labelWidth = Math.max(1, contentWidth - visibleWidth(statusStyled) - 1);
+	const clippedLabel = truncateToWidth(labelStyled, labelWidth, "");
+	const gap = Math.max(1, contentWidth - visibleWidth(clippedLabel) - visibleWidth(statusStyled));
+	const line = `${clippedLabel}${" ".repeat(gap)}${statusStyled}`;
+	return style()
+		.border("minimal")
+		.borderColor((text) => theme.fg(statusColor, text))
+		.render([line], outerWidth);
+}
+
 const COMPACT_ARG_VALUE_LIMIT = 60;
 const GENERIC_OUTPUT_PREVIEW_LINES = 10;
 const GENERIC_ARGS_JSON_PREVIEW_LINES = 10;
 
+export type ToolExecutionPhase = {
+	label: string;
+	count: number;
+	durationMs: number;
+	targets?: string[];
+	actionLabel?: string;
+};
+
+type ToolTargetMetadata = {
+	kind?: string;
+	action?: string;
+	inputPath?: string;
+	resolvedPath?: string;
+	pattern?: string;
+	glob?: string;
+	line?: number;
+	range?: {
+		start?: number;
+		end?: number;
+	};
+};
+
 function formatElapsed(ms: number): string {
 	if (ms < 1000) return `${ms}ms`;
 	return `${Math.max(1, Math.round(ms / 1000))}s`;
 }
 
+function formatCommandPreview(command: string): string {
+	return truncateToWidth(command.replace(/\s+/g, " ").trim(), 64, "");
+}
+
+function appendLineOrRange(displayPath: string | undefined, target: ToolTargetMetadata): string | undefined {
+	if (!displayPath) return undefined;
+	if (typeof target.line === "number" && Number.isFinite(target.line)) {
+		return `${displayPath}:${target.line}`;
+	}
+	const start = target.range?.start;
+	if (typeof start === "number" && Number.isFinite(start)) {
+		const end = target.range?.end;
+		const suffix =
+			typeof end === "number" && Number.isFinite(end) && end !== start
+				? `${start}-${end}`
+				: `${start}`;
+		return `${displayPath}:${suffix}`;
+	}
+	return displayPath;
+}
+
+function formatToolTarget(target: ToolTargetMetadata): string | undefined {
+	const path = target.resolvedPath || target.inputPath;
+	const displayPath = path ? shortenPath(path) : undefined;
+	if (target.kind === "search") {
+		const searchTarget = displayPath ?? target.inputPath ?? ".";
+		const label = target.pattern ? `${target.pattern} in ${searchTarget}` : searchTarget;
+		return target.glob ? `${label} (${target.glob})` : label;
+	}
+	return appendLineOrRange(displayPath, target);
+}
+
+function formatArgsPathTarget(path: string | null, args: Record<string, unknown>): string | undefined {
+	if (!path) return undefined;
+	const start = typeof args.offset === "number" ? args.offset : undefined;
+	const limit = typeof args.limit === "number" ? args.limit : undefined;
+	const range =
+		start !== undefined || limit !== undefined
+			? {
+					start: start ?? 1,
+					end: limit !== undefined ? (start ?? 1) + Math.max(0, limit - 1) : undefined,
+				}
+			: undefined;
+	return appendLineOrRange(shortenPath(path), { range });
+}
+
+function stripLineSuffix(target: string): string {
+	return target.replace(/:\d+(?:-\d+)?$/, "");
+}
+
+function uniqueTargets(targets: string[] | undefined): string[] {
+	const seen = new Set<string>();
+	const unique: string[] = [];
+	for (const target of targets ?? []) {
+		if (!target || seen.has(target)) continue;
+		seen.add(target);
+		unique.push(target);
+	}
+	return unique;
+}
+
+function summarizePhaseLabel(phase: ToolExecutionPhase): string {
+	const phaseTargets = uniqueTargets(phase.targets);
+	const baseTargets = uniqueTargets(phaseTargets.map(stripLineSuffix));
+	if (phase.label === "File changes" && baseTargets.length > 0) {
+		const fileWord = baseTargets.length === 1 ? "file" : "files";
+		const actionWord =
+			phase.actionLabel === "write"
+				? phase.count === 1
+					? "write"
+					: "writes"
+				: phase.actionLabel === undefined
+					? phase.count === 1
+						? "action"
+						: "actions"
+					: phase.count === 1
+						? "edit"
+						: "edits";
+		return `${phase.label} · ${baseTargets.length} ${fileWord}, ${phase.count} ${actionWord}`;
+	}
+	if (phase.label === "Context reads" && baseTargets.length > 0) {
+		const fileWord = baseTargets.length === 1 ? "file" : "files";
+		return `${phase.label} · ${baseTargets.length} ${fileWord}`;
+	}
+	if (phase.label === "Setup / shell" && phaseTargets.length > 0) {
+		return `${phase.label} · ${phase.count} ${phase.count === 1 ? "command" : "commands"}`;
+	}
+	return `${phase.label} ${phase.count} ${phase.count === 1 ? "action" : "actions"}`;
+}
+
+function summarizePhaseTargets(phase: ToolExecutionPhase, width: number): string | undefined {
+	const phaseTargets = uniqueTargets(phase.targets);
+	if (phaseTargets.length === 0) return undefined;
+	const shown = phaseTargets.slice(0, 3);
+	const suffix = phaseTargets.length > shown.length ? ` +${phaseTargets.length - shown.length} more` : "";
+	return truncateToWidth(shown.join(" · ") + suffix, width, "");
+}
+
 /**
  * Format tool args for the generic-renderer fallback. Produces a one-line
  * `k=v, k=v` summary when every value is a primitive that fits inline; falls
@@ -552,18 +695,13 @@ export class ToolExecutionComponent extends Container {
 		const frameTone: ToolFrameTone =
 			this.result?.isError ? "error" : this.isPartial || !this.result ? "pending" : "success";
 		const elapsed = formatElapsed((this.endedAt ?? Date.now()) - this.startedAt);
-		const frameStatus = `${this.isPartial || !this.result ? "Running" : this.result.isError ? "Error" : "Done"} · ${elapsed}`;
+		const frameStatus = `${this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success"} · ${elapsed}`;
 		const parsed = parseMcpToolName(this.toolName);
 		const frameLabel = parsed
-			? `Tool ${parsed.server}·${parsed.tool}`
-			: `Tool ${prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown"}`;
+			? `${parsed.server}·${parsed.tool}`
+			: prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown";
 		if (this.shouldRenderCompactSuccess()) {
-			const availableWidth = Math.max(1, frameWidth - 2);
-			const summaryWidth = Math.max(1, availableWidth - visibleWidth(frameStatus) - 1);
-			const summary = truncateToWidth(this.getCompactSummary(frameLabel), summaryWidth, "");
-			const gap = Math.max(1, availableWidth - visibleWidth(summary) - visibleWidth(frameStatus));
-			const line = `${theme.fg("toolSuccess", summary)}${" ".repeat(gap)}${theme.fg("toolSuccess", frameStatus)}`;
-			return ["", ...style().border("minimal").borderColor((text) => theme.fg("toolSuccess", text)).render([line], frameWidth)];
+			return ["", ...renderCollapsedToolRow(this.getCompactSummary(frameLabel), frameStatus, frameWidth, "success")];
 		}
 		const lines = super.render(contentWidth);
 		const framed = renderToolFrame(lines, frameWidth, {
@@ -577,11 +715,86 @@ export class ToolExecutionComponent extends Container {
 	private shouldRenderCompactSuccess(): boolean {
 		if (this.expanded || this.isPartial || !this.result || this.result.isError) return false;
 		const hasImages = this.result.content?.some((block) => block.type === "image") ?? false;
-		return !hasImages && this.getTextOutput().trim().length === 0;
+		return !hasImages;
+	}
+
+	getRollupPhase(): ToolExecutionPhase | null {
+		if (!this.shouldRenderCompactSuccess()) return null;
+		const label = this.getPhaseLabel();
+		const endedAt = this.endedAt ?? Date.now();
+		const target = this.getCompactTarget();
+		return {
+			label,
+			count: 1,
+			durationMs: Math.max(0, endedAt - this.startedAt),
+			targets: target ? [target] : undefined,
+			actionLabel: this.getCompactAction(),
+		};
+	}
+
+	private getPhaseLabel(): string {
+		const name = this.normalizedToolName;
+		const displayName = prettifyToolName(this.toolName, this.toolDefinition?.label);
+
+		if (name === "bash") return "Setup / shell";
+		if (name === "read" || name === "ls" || name === "find" || name === "grep") return "Context reads";
+		if (name === "write" || name === "edit") return "File changes";
+		if (name === "web_search" || displayName === "ToolSearch") return "Discovery";
+		if (displayName === "Memory Query" || displayName === "Memory Capture" || displayName === "Gsd Graph") {
+			return "Memory lookups";
+		}
+		if (displayName === "Update Requirement" || displayName === "Save Requirement") return "Requirement writes";
+		if (displayName.startsWith("Complete ")) return "Finalization";
+		return "Other tool actions";
 	}
 
 	private getCompactSummary(frameLabel: string): string {
-		return `${frameLabel} Completed`;
+		if (this.normalizedToolName === "bash") {
+			const command = str(this.args?.command);
+			return command ? `bash ${formatCommandPreview(command)}` : frameLabel;
+		}
+		const target = this.getCompactTarget();
+		return target ? `${this.getCompactAction()} ${target}` : frameLabel;
+	}
+
+	private getCompactAction(): string {
+		const target = this.getTargetMetadata();
+		if (target?.action) return target.action === "list" ? "ls" : target.action;
+		return this.normalizedToolName;
+	}
+
+	private getTargetMetadata(): ToolTargetMetadata | undefined {
+		const target = this.result?.details?.target;
+		return target && typeof target === "object" ? target : undefined;
+	}
+
+	private getCompactTarget(): string | undefined {
+		const metadata = this.getTargetMetadata();
+		const metadataTarget = metadata ? formatToolTarget(metadata) : undefined;
+		if (metadataTarget) return metadataTarget;
+
+		const path = str(this.args?.file_path ?? this.args?.path);
+		if (path === null) return undefined;
+		if (this.normalizedToolName === "read" || this.normalizedToolName === "hashline_read") {
+			return formatArgsPathTarget(path, this.args);
+		}
+		if (this.normalizedToolName === "write" || this.normalizedToolName === "edit") {
+			return path ? shortenPath(path) : undefined;
+		}
+		if (this.normalizedToolName === "ls") {
+			return shortenPath(path || ".");
+		}
+		if (this.normalizedToolName === "find") {
+			const pattern = str(this.args?.pattern);
+			return pattern ? `${pattern} in ${shortenPath(path || ".")}` : shortenPath(path || ".");
+		}
+		if (this.normalizedToolName === "grep") {
+			const pattern = str(this.args?.pattern);
+			const glob = str(this.args?.glob);
+			const label = pattern ? `${pattern} in ${shortenPath(path || ".")}` : shortenPath(path || ".");
+			return glob ? `${label} (${glob})` : label;
+		}
+		return undefined;
 	}
 
 	private updateDisplay(): void {
@@ -811,6 +1024,10 @@ export class ToolExecutionComponent extends Container {
 			// Truncation warnings
 			const truncation = this.result.details?.truncation;
 			const fullOutputPath = this.result.details?.fullOutputPath;
+			const cwd = this.result.details?.cwd;
+			if (this.expanded && typeof cwd === "string" && cwd.length > 0) {
+				this.contentBox.addChild(new Text(`\n${theme.fg("muted", `cwd ${shortenPath(cwd)}`)}`, 0, 0));
+			}
 			if (truncation?.truncated || fullOutputPath) {
 				const warnings: string[] = [];
 				if (fullOutputPath) {
@@ -1231,3 +1448,30 @@ export class ToolExecutionComponent extends Container {
 		return text;
 	}
 }
+
+export class ToolPhaseSummaryComponent extends Container {
+	constructor(private readonly phases: ToolExecutionPhase[]) {
+		super();
+	}
+
+	getPhases(): ToolExecutionPhase[] {
+		return this.phases.map((phase) => ({ ...phase, targets: phase.targets ? [...phase.targets] : undefined }));
+	}
+
+	override render(width: number): string[] {
+		const frameWidth = Math.max(20, width);
+		const rows = this.phases.flatMap((phase) => {
+			const left = summarizePhaseLabel(phase);
+			const right = `success · ${formatElapsed(phase.durationMs)}`;
+			const contentWidth = Math.max(1, frameWidth - 2);
+			const leftWidth = Math.max(1, contentWidth - visibleWidth(right) - 1);
+			const leftText = truncateToWidth(left, leftWidth, "");
+			const gap = Math.max(1, contentWidth - visibleWidth(leftText) - visibleWidth(right));
+			const summaryRow = `${theme.fg("toolSuccess", leftText)}${" ".repeat(gap)}${theme.fg("toolSuccess", right)}`;
+			const targetRow = summarizePhaseTargets(phase, contentWidth);
+			return targetRow ? [summaryRow, theme.fg("muted", targetRow)] : [summaryRow];
+		});
+
+		return ["", ...style().border("minimal").borderColor((text) => theme.fg("toolSuccess", text)).render(rows, frameWidth)];
+	}
+}

package/packages/pi-coding-agent/src/modes/interactive/controllers/chat-controller.test.ts

@@ -1,5 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
+import { Container } from "@gsd/pi-tui";
+import stripAnsi from "strip-ansi";
 
 import { findLatestPinnableText, handleAgentEvent } from "./chat-controller.js";
 import { initTheme } from "../theme/theme.js";
@@ -111,3 +113,76 @@ test("handleAgentEvent: agent_start clears stale adaptive blocking error", async
 	assert.equal(cleared, true);
 	assert.equal(requestedRender, true);
 });
+
+test("handleAgentEvent: standalone completed tool events roll up incrementally", async () => {
+	initTheme("dark", false);
+	const chatContainer = new Container();
+	let renderCount = 0;
+	const host = {
+		isInitialized: true,
+		footer: { invalidate() {} },
+		settingsManager: {
+			getTimestampFormat() {
+				return "date-time-iso";
+			},
+			getShowImages() {
+				return false;
+			},
+		},
+		getRegisteredToolDefinition() {
+			return undefined;
+		},
+		chatContainer,
+		pendingTools: new Map(),
+		ui: {
+			requestRender() {
+				renderCount++;
+			},
+		},
+	} as any;
+
+	for (const [toolCallId, toolName] of [
+		["read-1", "read"],
+		["read-2", "read"],
+		["edit-1", "edit"],
+	] as const) {
+		const target =
+			toolName === "edit"
+				? {
+						kind: "file",
+						action: "edit",
+						inputPath: `src/${toolCallId}.txt`,
+						resolvedPath: `/tmp/project/src/${toolCallId}.txt`,
+						line: 10,
+					}
+				: {
+						kind: "file",
+						action: "read",
+						inputPath: `src/${toolCallId}.txt`,
+						resolvedPath: `/tmp/project/src/${toolCallId}.txt`,
+					};
+		await handleAgentEvent(host, {
+			type: "tool_execution_start",
+			toolCallId,
+			toolName,
+			args: { path: `src/${toolCallId}.txt` },
+		} as any);
+		await handleAgentEvent(host, {
+			type: "tool_execution_end",
+			toolCallId,
+			toolName,
+			result: { content: [], details: { target }, isError: false },
+			isError: false,
+		} as any);
+	}
+
+	const rendered = stripAnsi(chatContainer.render(100).join("\n"));
+	assert.match(rendered, /Context reads · 2 files\s+success · \d+(ms|s)/);
+	assert.match(rendered, /src\/read-1\.txt/);
+	assert.match(rendered, /src\/read-2\.txt/);
+	assert.match(rendered, /File changes · 1 file, 1 edit\s+success · \d+(ms|s)/);
+	assert.match(rendered, /src\/edit-1\.txt:10/);
+	assert.doesNotMatch(rendered, /^\s*│?\s*read\s+success ·/m);
+	assert.doesNotMatch(rendered, /^\s*│?\s*edit\s+success ·/m);
+	assert.ok(renderCount > 0);
+});

package/packages/pi-coding-agent/src/modes/interactive/controllers/chat-controller.ts

@@ -1,9 +1,14 @@
+// GSD-2 Interactive Chat Controller
 import { Loader, Markdown, Spacer, Text } from "@gsd/pi-tui";
 
 import type { InteractiveModeEvent, InteractiveModeStateHost } from "../interactive-mode-state.js";
 import { theme } from "../theme/theme.js";
 import { AssistantMessageComponent } from "../components/assistant-message.js";
-import { ToolExecutionComponent } from "../components/tool-execution.js";
+import {
+	ToolExecutionComponent,
+	ToolPhaseSummaryComponent,
+	type ToolExecutionPhase,
+} from "../components/tool-execution.js";
 import { DynamicBorder } from "../components/dynamic-border.js";
 import { appKey } from "../components/keybinding-hints.js";
 
@@ -23,7 +28,8 @@ type RenderedSegment =
 		contentType: "text" | "thinking";
 		component: AssistantMessageComponent;
 	}
-	| { kind: "tool"; contentIndex: number; component: ToolExecutionComponent };
+	| { kind: "tool"; contentIndex: number; component: ToolExecutionComponent }
+	| { kind: "tool-summary"; component: ToolPhaseSummaryComponent; phases: ToolExecutionPhase[] };
 
 let renderedSegments: RenderedSegment[] = [];
 // When providers reuse one assistant lifecycle across internal sub-turns,
@@ -100,6 +106,100 @@ let pinnedBorder: DynamicBorder | undefined;
 // Reference to the pinned markdown component below the border
 let pinnedTextComponent: Markdown | undefined;
 
+function mergeToolPhases(phases: ToolExecutionPhase[]): ToolExecutionPhase[] {
+	const merged: ToolExecutionPhase[] = [];
+	for (const phase of phases) {
+		const previous = merged[merged.length - 1];
+		if (previous?.label === phase.label) {
+			previous.count += phase.count;
+			previous.durationMs += phase.durationMs;
+			previous.targets = mergeTargets(previous.targets, phase.targets);
+			if (previous.actionLabel !== phase.actionLabel) {
+				previous.actionLabel = undefined;
+			}
+		} else {
+			merged.push({ ...phase, targets: phase.targets ? [...phase.targets] : undefined });
+		}
+	}
+	return merged;
+}
+
+function mergeTargets(existing: string[] | undefined, incoming: string[] | undefined): string[] | undefined {
+	if (!existing && !incoming) return undefined;
+	const seen = new Set<string>();
+	const merged: string[] = [];
+	for (const target of [...(existing ?? []), ...(incoming ?? [])]) {
+		if (!target || seen.has(target)) continue;
+		seen.add(target);
+		merged.push(target);
+	}
+	return merged;
+}
+
+function replaceCompactToolRowsWithPhaseSummary(
+	host: InteractiveModeStateHost & { ui: { requestRender: () => void } },
+): void {
+	let changed = false;
+	const nextRenderedSegments: RenderedSegment[] = [];
+	let rollupRun: Array<{
+		seg: Extract<RenderedSegment, { kind: "tool" | "tool-summary" }>;
+		phases: ToolExecutionPhase[];
+	}> = [];
+
+	const flushRollupRun = () => {
+		const actionCount = rollupRun.reduce(
+			(total, item) => total + item.phases.reduce((sum, phase) => sum + phase.count, 0),
+			0,
+		);
+		if (actionCount < 2) {
+			nextRenderedSegments.push(...rollupRun.map((item) => item.seg));
+			rollupRun = [];
+			return;
+		}
+
+		const firstIndex = Math.max(0, host.chatContainer.children.indexOf(rollupRun[0].seg.component));
+		const phases = mergeToolPhases(rollupRun.flatMap((item) => item.phases));
+		const summary = new ToolPhaseSummaryComponent(phases);
+
+		for (const { seg } of rollupRun) {
+			host.chatContainer.removeChild(seg.component);
+		}
+
+		host.chatContainer.addChild(summary);
+		const summaryIndex = host.chatContainer.children.indexOf(summary);
+		if (summaryIndex !== -1 && summaryIndex !== firstIndex) {
+			host.chatContainer.children.splice(summaryIndex, 1);
+			host.chatContainer.children.splice(firstIndex, 0, summary);
+			(host.chatContainer as unknown as { _prevRender: string[] | null })._prevRender = null;
+		}
+
+		changed = true;
+		nextRenderedSegments.push({ kind: "tool-summary", component: summary, phases });
+		rollupRun = [];
+	};
+
+	for (const seg of renderedSegments) {
+		const phase = seg.kind === "tool" ? seg.component.getRollupPhase() : null;
+		if (seg.kind === "tool" && phase) {
+			rollupRun.push({ seg, phases: [phase] });
+			continue;
+		}
+		if (seg.kind === "tool-summary") {
+			rollupRun.push({ seg, phases: seg.component.getPhases() });
+			continue;
+		}
+
+		flushRollupRun();
+		nextRenderedSegments.push(seg);
+	}
+	flushRollupRun();
+
+	if (changed) {
+		renderedSegments = nextRenderedSegments;
+		host.ui.requestRender();
+	}
+}
+
 export async function handleAgentEvent(host: InteractiveModeStateHost & {
 	init: () => Promise<void>;
 	getMarkdownThemeWithSettings: () => any;
@@ -339,6 +439,7 @@ export async function handleAgentEvent(host: InteractiveModeStateHost & {
 							details: externalToolResult.details,
 							isError: externalToolResult.isError,
 						});
+						replaceCompactToolRowsWithPhaseSummary(host);
 					}
 				}
 
@@ -791,6 +892,7 @@ export async function handleAgentEvent(host: InteractiveModeStateHost & {
 					for (const [, component] of host.pendingTools.entries()) {
 						component.setArgsComplete();
 					}
+					replaceCompactToolRowsWithPhaseSummary(host);
 				}
 				host.streamingComponent = undefined;
 				host.streamingMessage = undefined;
@@ -823,6 +925,7 @@ export async function handleAgentEvent(host: InteractiveModeStateHost & {
 				component.setExpanded(host.toolOutputExpanded);
 				host.chatContainer.addChild(component);
 				host.pendingTools.set(event.toolCallId, component);
+				renderedSegments.push({ kind: "tool", contentIndex: Number.MAX_SAFE_INTEGER, component });
 				host.ui.requestRender();
 			}
 			break;
@@ -840,7 +943,7 @@ export async function handleAgentEvent(host: InteractiveModeStateHost & {
 			const component = host.pendingTools.get(event.toolCallId);
 			if (component) {
 				component.updateResult({ ...event.result, isError: event.isError });
-				host.pendingTools.delete(event.toolCallId);
+				replaceCompactToolRowsWithPhaseSummary(host);
 				host.ui.requestRender();
 			}
 			break;
@@ -856,6 +959,7 @@ export async function handleAgentEvent(host: InteractiveModeStateHost & {
 				host.streamingComponent.setShowMetadata(true);
 				host.streamingComponent.updateContent(host.streamingMessage);
 			}
+			replaceCompactToolRowsWithPhaseSummary(host);
 			host.streamingComponent = undefined;
 			host.streamingMessage = undefined;
 			renderedSegments = [];