@oh-my-pi/pi-coding-agent 8.0.20 → 8.1.0

package/src/tools/read.ts

@@ -5,11 +5,12 @@ import type { ImageContent, TextContent } from "@oh-my-pi/pi-ai";
 import { CONFIG_DIR_NAME } from "@oh-my-pi/pi-coding-agent/config";
 import { renderPromptTemplate } from "@oh-my-pi/pi-coding-agent/config/prompt-templates";
 import type { RenderResultOptions } from "@oh-my-pi/pi-coding-agent/extensibility/custom-tools/types";
-import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import { getLanguageFromPath, type Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import readDescription from "@oh-my-pi/pi-coding-agent/prompts/tools/read.md" with { type: "text" };
 import type { ToolSession } from "@oh-my-pi/pi-coding-agent/sdk";
 import type { OutputMeta } from "@oh-my-pi/pi-coding-agent/tools/output-meta";
 import { ToolAbortError, ToolError, throwIfAborted } from "@oh-my-pi/pi-coding-agent/tools/tool-errors";
+import { renderCodeCell, renderOutputBlock, renderStatusLine } from "@oh-my-pi/pi-coding-agent/tui";
 import { formatDimensionNote, resizeImage } from "@oh-my-pi/pi-coding-agent/utils/image-resize";
 import { detectSupportedImageMimeTypeFromFile } from "@oh-my-pi/pi-coding-agent/utils/mime";
 import { ensureTool } from "@oh-my-pi/pi-coding-agent/utils/tools-manager";
@@ -378,6 +379,7 @@ const readSchema = Type.Object({
 export interface ReadToolDetails {
 	truncation?: TruncationResult;
 	redirectedTo?: "ls";
+	resolvedPath?: string;
 	meta?: OutputMeta;
 }
 
@@ -708,11 +710,11 @@ export class ReadTool implements AgentTool<typeof readSchema, ReadToolDetails> {
 
 		// If extraction was used, return directly (no pagination)
 		if (hasExtraction) {
-			let text = resource.content;
+			const details: ReadToolDetails = {};
 			if (resource.sourcePath) {
-				text += `\n\n[Resolved path: ${resource.sourcePath}]`;
+				details.resolvedPath = resource.sourcePath;
 			}
-			return toolResult<ReadToolDetails>().text(text).sourceInternal(url).done();
+			return toolResult(details).text(resource.content).sourceInternal(url).done();
 		}
 
 		// Apply pagination similar to file reading
@@ -806,9 +808,8 @@ export class ReadTool implements AgentTool<typeof readSchema, ReadToolDetails> {
 			details = {};
 		}
 
-		// Append resolved path notice
 		if (resource.sourcePath) {
-			outputText += `\n\n[Resolved path: ${resource.sourcePath}]`;
+			details.resolvedPath = resource.sourcePath;
 		}
 
 		const resultBuilder = toolResult(details).text(outputText).sourceInternal(url);
@@ -837,14 +838,14 @@ export const readToolRenderer = {
 		const offset = args.offset;
 		const limit = args.limit;
 
-		let pathDisplay = filePath ? uiTheme.fg("accent", filePath) : uiTheme.fg("toolOutput", uiTheme.format.ellipsis);
+		let pathDisplay = filePath || uiTheme.format.ellipsis;
 		if (offset !== undefined || limit !== undefined) {
 			const startLine = offset ?? 1;
 			const endLine = limit !== undefined ? startLine + limit - 1 : "";
-			pathDisplay += uiTheme.fg("warning", `:${startLine}${endLine ? `-${endLine}` : ""}`);
+			pathDisplay += `:${startLine}${endLine ? `-${endLine}` : ""}`;
 		}
 
-		const text = `${uiTheme.fg("toolTitle", uiTheme.bold("Read"))} ${pathDisplay}`;
+		const text = renderStatusLine({ icon: "pending", title: "Read", description: pathDisplay }, uiTheme);
 		return new Text(text, 0, 0);
 	},
 
@@ -852,15 +853,24 @@ export const readToolRenderer = {
 		result: { content: Array<{ type: string; text?: string }>; details?: ReadToolDetails },
 		_options: RenderResultOptions,
 		uiTheme: Theme,
-		_args?: ReadRenderArgs,
+		args?: ReadRenderArgs,
 	): Component {
 		const details = result.details;
-		const lines: string[] = [];
-
-		lines.push(uiTheme.fg("dim", "Content hidden"));
+		const contentText = result.content?.find((c) => c.type === "text")?.text ?? "";
+		const imageContent = result.content?.find((c) => c.type === "image");
+		const rawPath = args?.file_path || args?.path || "";
+		const filePath = shortenPath(rawPath);
+		const lang = getLanguageFromPath(rawPath);
 
+		const warningLines: string[] = [];
 		const truncation = details?.meta?.truncation;
 		const fallback = details?.truncation;
+		if (details?.redirectedTo) {
+			warningLines.push(uiTheme.fg("warning", wrapBrackets(`Redirected to ${details.redirectedTo}`, uiTheme)));
+		}
+		if (details?.resolvedPath) {
+			warningLines.push(uiTheme.fg("dim", wrapBrackets(`Resolved path: ${details.resolvedPath}`, uiTheme)));
+		}
 		if (truncation) {
 			let warning: string;
 			if (fallback?.firstLineExceedsLimit) {
@@ -874,9 +884,58 @@ export const readToolRenderer = {
 			if (truncation.artifactId) {
 				warning += `. Full output: artifact://${truncation.artifactId}`;
 			}
-			lines.push(uiTheme.fg("warning", wrapBrackets(warning, uiTheme)));
+			warningLines.push(uiTheme.fg("warning", wrapBrackets(warning, uiTheme)));
 		}
 
-		return new Text(lines.join("\n"), 0, 0);
+		if (imageContent) {
+			const header = renderStatusLine(
+				{ icon: "success", title: "Read", description: filePath || rawPath || "image" },
+				uiTheme,
+			);
+			const detailLines = contentText ? contentText.split("\n").map((line) => uiTheme.fg("toolOutput", line)) : [];
+			const lines = [...detailLines, ...warningLines];
+			return {
+				render: (width: number) =>
+					renderOutputBlock(
+						{
+							header,
+							state: "success",
+							sections: [
+								{
+									label: uiTheme.fg("toolTitle", "Details"),
+									lines: lines.length > 0 ? lines : [uiTheme.fg("dim", "(image)")],
+								},
+							],
+							width,
+						},
+						uiTheme,
+					),
+				invalidate: () => {},
+			};
+		}
+
+		let title = filePath ? `Read ${filePath}` : "Read";
+		if (args?.offset !== undefined || args?.limit !== undefined) {
+			const startLine = args.offset ?? 1;
+			const endLine = args.limit !== undefined ? startLine + args.limit - 1 : "";
+			title += `:${startLine}${endLine ? `-${endLine}` : ""}`;
+		}
+		return {
+			render: (width: number) =>
+				renderCodeCell(
+					{
+						code: contentText,
+						language: lang,
+						title,
+						status: "complete",
+						output: warningLines.length > 0 ? warningLines.join("\n") : undefined,
+						expanded: true,
+						width,
+					},
+					uiTheme,
+				),
+			invalidate: () => {},
+		};
 	},
+	mergeCallAndResult: true,
 };

package/src/tools/render-utils.ts

@@ -7,6 +7,7 @@
 
 import { homedir } from "node:os";
 import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import { getTreeBranch } from "@oh-my-pi/pi-coding-agent/tui/utils";
 
 // =============================================================================
 // Standardized Display Constants
@@ -667,21 +668,6 @@ function pluralize(label: string, count: number): string {
 // =============================================================================
 // Tree Rendering Utilities
 // =============================================================================
-
-/**
- * Get the branch character for a tree item.
- */
-export function getTreeBranch(isLast: boolean, theme: Theme): string {
-	return isLast ? theme.tree.last : theme.tree.branch;
-}
-
-/**
- * Get the continuation prefix for nested content under a tree item.
- */
-export function getTreeContinuePrefix(isLast: boolean, theme: Theme): string {
-	return isLast ? "   " : `${theme.tree.vertical}  `;
-}
-
 /**
  * Render a list of items with tree branches, handling truncation.
  *

package/src/tools/ssh.ts

@@ -2,7 +2,7 @@ import type { AgentTool, AgentToolContext, AgentToolResult, AgentToolUpdateCallb
 import type { SSHHost } from "@oh-my-pi/pi-coding-agent/capability/ssh";
 import { sshCapability } from "@oh-my-pi/pi-coding-agent/capability/ssh";
 import { renderPromptTemplate } from "@oh-my-pi/pi-coding-agent/config/prompt-templates";
-import { loadCapability } from "@oh-my-pi/pi-coding-agent/discovery/index";
+import { loadCapability } from "@oh-my-pi/pi-coding-agent/discovery";
 import type { RenderResultOptions } from "@oh-my-pi/pi-coding-agent/extensibility/custom-tools/types";
 import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import sshDescriptionBase from "@oh-my-pi/pi-coding-agent/prompts/tools/ssh.md" with { type: "text" };
@@ -11,12 +11,13 @@ import { ensureHostInfo, getHostInfoForHost } from "@oh-my-pi/pi-coding-agent/ss
 import { executeSSH } from "@oh-my-pi/pi-coding-agent/ssh/ssh-executor";
 import type { OutputMeta } from "@oh-my-pi/pi-coding-agent/tools/output-meta";
 import { ToolError } from "@oh-my-pi/pi-coding-agent/tools/tool-errors";
+import { renderOutputBlock, renderStatusLine } from "@oh-my-pi/pi-coding-agent/tui";
 import type { Component } from "@oh-my-pi/pi-tui";
 import { Text } from "@oh-my-pi/pi-tui";
 import { Type } from "@sinclair/typebox";
-import type { ToolSession } from "./index";
+import type { ToolSession } from ".";
 import { allocateOutputArtifact, createTailBuffer } from "./output-utils";
-import { ToolUIKit } from "./render-utils";
+import { formatBytes, wrapBrackets } from "./render-utils";
 import { toolResult } from "./tool-result";
 import { DEFAULT_MAX_BYTES } from "./truncate";
 
@@ -237,10 +238,9 @@ interface SshRenderContext {
 
 export const sshToolRenderer = {
 	renderCall(args: SshRenderArgs, uiTheme: Theme): Component {
-		const ui = new ToolUIKit(uiTheme);
 		const host = args.host || uiTheme.format.ellipsis;
 		const command = args.command || uiTheme.format.ellipsis;
-		const text = ui.title(`[${host}] $ ${command}`);
+		const text = renderStatusLine({ icon: "pending", title: "SSH", description: `[${host}] $ ${command}` }, uiTheme);
 		return new Text(text, 0, 0);
 	},
 
@@ -251,42 +251,48 @@ export const sshToolRenderer = {
 		},
 		options: RenderResultOptions & { renderContext?: SshRenderContext },
 		uiTheme: Theme,
+		args?: SshRenderArgs,
 	): Component {
-		const ui = new ToolUIKit(uiTheme);
 		const { expanded, renderContext } = options;
 		const details = result.details;
-		const lines: string[] = [];
+		const host = args?.host || uiTheme.format.ellipsis;
+		const command = args?.command || uiTheme.format.ellipsis;
+		const header = renderStatusLine(
+			{ icon: "success", title: "SSH", description: `[${host}] $ ${command}` },
+			uiTheme,
+		);
+		const outputLines: string[] = [];
 
 		const textContent = result.content?.find((c) => c.type === "text")?.text ?? "";
-		const output = textContent.trim();
+		const output = textContent.trimEnd();
 
 		if (output) {
 			if (expanded) {
-				const styledOutput = output
-					.split("\n")
-					.map((line) => uiTheme.fg("toolOutput", line))
-					.join("\n");
-				lines.push(styledOutput);
+				outputLines.push(...output.split("\n").map((line) => uiTheme.fg("toolOutput", line)));
 			} else if (renderContext?.visualLines) {
 				const { visualLines, skippedCount = 0, totalVisualLines = visualLines.length } = renderContext;
 				if (skippedCount > 0) {
-					lines.push(
+					outputLines.push(
 						uiTheme.fg(
 							"dim",
 							`${uiTheme.format.ellipsis} (${skippedCount} earlier lines, showing ${visualLines.length} of ${totalVisualLines}) (ctrl+o to expand)`,
 						),
 					);
 				}
-				lines.push(...visualLines);
+				const styledVisual = visualLines.map((line) =>
+					line.includes("\x1b[") ? line : uiTheme.fg("toolOutput", line),
+				);
+				outputLines.push(...styledVisual);
 			} else {
-				const outputLines = output.split("\n");
+				const outputLinesRaw = output.split("\n");
 				const maxLines = 5;
-				const displayLines = outputLines.slice(0, maxLines);
-				const remaining = outputLines.length - maxLines;
-
-				lines.push(...displayLines.map((line) => uiTheme.fg("toolOutput", line)));
+				const displayLines = outputLinesRaw.slice(0, maxLines);
+				const remaining = outputLinesRaw.length - maxLines;
+				outputLines.push(...displayLines.map((line) => uiTheme.fg("toolOutput", line)));
 				if (remaining > 0) {
-					lines.push(uiTheme.fg("dim", `${uiTheme.format.ellipsis} (${remaining} more lines) (ctrl+o to expand)`));
+					outputLines.push(
+						uiTheme.fg("dim", `${uiTheme.format.ellipsis} (${remaining} more lines) (ctrl+o to expand)`),
+					);
 				}
 			}
 		}
@@ -301,12 +307,25 @@ export const sshToolRenderer = {
 				warnings.push(`Truncated: showing ${truncation.outputLines} of ${truncation.totalLines} lines`);
 			} else {
 				warnings.push(
-					`Truncated: ${truncation.outputLines} lines shown (${ui.formatBytes(truncation.outputBytes)} limit)`,
+					`Truncated: ${truncation.outputLines} lines shown (${formatBytes(truncation.outputBytes)} limit)`,
 				);
 			}
-			lines.push(uiTheme.fg("warning", ui.wrapBrackets(warnings.join(". "))));
+			outputLines.push(uiTheme.fg("warning", wrapBrackets(warnings.join(". "), uiTheme)));
 		}
 
-		return new Text(lines.join("\n"), 0, 0);
+		return {
+			render: (width: number) =>
+				renderOutputBlock(
+					{
+						header,
+						state: "success",
+						sections: [{ label: uiTheme.fg("toolTitle", "Output"), lines: outputLines }],
+						width,
+					},
+					uiTheme,
+				),
+			invalidate: () => {},
+		};
 	},
+	mergeCallAndResult: true,
 };

package/src/tools/todo-write.ts

@@ -7,11 +7,13 @@ import type { RenderResultOptions } from "@oh-my-pi/pi-coding-agent/extensibilit
 import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import todoWriteDescription from "@oh-my-pi/pi-coding-agent/prompts/tools/todo-write.md" with { type: "text" };
 import type { ToolSession } from "@oh-my-pi/pi-coding-agent/sdk";
+import { renderStatusLine, renderTreeList } from "@oh-my-pi/pi-coding-agent/tui";
 import type { Component } from "@oh-my-pi/pi-tui";
 import { Text } from "@oh-my-pi/pi-tui";
 import { logger } from "@oh-my-pi/pi-utils";
 import { Type } from "@sinclair/typebox";
 import chalk from "chalk";
+import { PREVIEW_LIMITS } from "./render-utils";
 
 const todoWriteSchema = Type.Object({
 	todos: Type.Array(
@@ -217,29 +219,39 @@ interface TodoWriteRenderArgs {
 export const todoWriteToolRenderer = {
 	renderCall(args: TodoWriteRenderArgs, uiTheme: Theme): Component {
 		const count = args.todos?.length ?? 0;
-		const summary = count > 0 ? uiTheme.fg("accent", `${count} items`) : uiTheme.fg("toolOutput", "empty");
-		return new Text(`${uiTheme.fg("toolTitle", uiTheme.bold("Todo Write"))} ${summary}`, 0, 0);
+		const meta = count > 0 ? [`${count} items`] : ["empty"];
+		const text = renderStatusLine({ icon: "pending", title: "Todo Write", meta }, uiTheme);
+		return new Text(text, 0, 0);
 	},
 
 	renderResult(
 		result: { content: Array<{ type: string; text?: string }>; details?: TodoWriteToolDetails },
-		_options: RenderResultOptions,
+		options: RenderResultOptions,
 		uiTheme: Theme,
 		_args?: TodoWriteRenderArgs,
 	): Component {
+		const { expanded } = options;
 		const todos = result.details?.todos ?? [];
-		const indent = "  ";
-		const hook = uiTheme.tree.hook;
-		const lines = [indent + uiTheme.bold(uiTheme.fg("accent", "Todos"))];
-
-		if (todos.length > 0) {
-			const visibleTodos = todos;
-			visibleTodos.forEach((todo, index) => {
-				const prefix = `${indent}${index === 0 ? hook : " "} `;
-				lines.push(formatTodoLine(todo, uiTheme, prefix));
-			});
+		const header = renderStatusLine(
+			{ icon: "success", title: "Todo Write", meta: [`${todos.length} items`] },
+			uiTheme,
+		);
+		if (todos.length === 0) {
+			const fallback = result.content?.find((c) => c.type === "text")?.text ?? "No todos";
+			return new Text([header, uiTheme.fg("dim", fallback)].join("\n"), 0, 0);
 		}
-
-		return new Text(lines.join("\n"), 0, 0);
+		const lines = renderTreeList(
+			{
+				items: todos,
+				expanded,
+				maxCollapsed: PREVIEW_LIMITS.COLLAPSED_ITEMS,
+				itemType: "todo",
+				renderItem: (todo) => formatTodoLine(todo, uiTheme, ""),
+			},
+			uiTheme,
+		);
+
+		return new Text([header, ...lines].join("\n"), 0, 0);
 	},
+	mergeCallAndResult: true,
 };

package/src/tools/write.ts

@@ -12,17 +12,18 @@ import {
 	type FileDiagnosticsResult,
 	type WritethroughCallback,
 	writethroughNoop,
-} from "@oh-my-pi/pi-coding-agent/lsp/index";
-import { getLanguageFromPath, highlightCode, type Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+} from "@oh-my-pi/pi-coding-agent/lsp";
+import { getLanguageFromPath, type Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import writeDescription from "@oh-my-pi/pi-coding-agent/prompts/tools/write.md" with { type: "text" };
 import type { ToolSession } from "@oh-my-pi/pi-coding-agent/sdk";
 import { type OutputMeta, outputMeta } from "@oh-my-pi/pi-coding-agent/tools/output-meta";
+import { renderCodeCell, renderStatusLine } from "@oh-my-pi/pi-coding-agent/tui";
 import type { Component } from "@oh-my-pi/pi-tui";
 import { Text } from "@oh-my-pi/pi-tui";
 import { untilAborted } from "@oh-my-pi/pi-utils";
 import { Type } from "@sinclair/typebox";
 import { resolveToCwd } from "./path-utils";
-import { formatDiagnostics, formatExpandHint, formatStatusIcon, replaceTabs, shortenPath } from "./render-utils";
+import { formatDiagnostics, shortenPath } from "./render-utils";
 import type { RenderCallOptions } from "./renderers";
 
 const writeSchema = Type.Object({
@@ -134,27 +135,6 @@ function countLines(text: string): number {
 	return text.split("\n").length;
 }
 
-function formatStreamingContent(content: string, rawPath: string, uiTheme: Theme): string {
-	if (!content) return "";
-	const lang = getLanguageFromPath(rawPath);
-	const lines = content.split("\n");
-	const total = lines.length;
-	const displayLines = lines.slice(-WRITE_STREAMING_PREVIEW_LINES);
-	const hidden = total - displayLines.length;
-
-	const formattedLines = lang
-		? highlightCode(replaceTabs(displayLines.join("\n")), lang)
-		: displayLines.map((line: string) => uiTheme.fg("toolOutput", replaceTabs(line)));
-
-	let text = "\n\n";
-	if (hidden > 0) {
-		text += uiTheme.fg("dim", `${uiTheme.format.ellipsis} (${hidden} earlier lines)\n`);
-	}
-	text += formattedLines.join("\n");
-	text += uiTheme.fg("dim", `\n${uiTheme.format.ellipsis} (streaming)`);
-	return text;
-}
-
 function formatMetadataLine(lineCount: number | null, language: string | undefined, uiTheme: Theme): string {
 	const icon = uiTheme.getLangIcon(language);
 	if (lineCount !== null) {
@@ -167,68 +147,117 @@ export const writeToolRenderer = {
 	renderCall(args: WriteRenderArgs, uiTheme: Theme, options?: RenderCallOptions): Component {
 		const rawPath = args.file_path || args.path || "";
 		const filePath = shortenPath(rawPath);
-		const pathDisplay = filePath ? uiTheme.fg("accent", filePath) : uiTheme.fg("toolOutput", uiTheme.format.ellipsis);
-		const spinner =
-			options?.spinnerFrame !== undefined ? formatStatusIcon("running", uiTheme, options.spinnerFrame) : "";
-		let text = `${uiTheme.fg("toolTitle", uiTheme.bold("Write"))} ${spinner ? `${spinner} ` : ""}${pathDisplay}`;
-
-		// Show streaming preview of content
-		if (args.content) {
-			text += formatStreamingContent(args.content, rawPath, uiTheme);
+		const pathDisplay = filePath || uiTheme.format.ellipsis;
+		const status = options?.spinnerFrame !== undefined ? "running" : "pending";
+		const text = renderStatusLine(
+			{ icon: status, title: "Write", description: pathDisplay, spinnerFrame: options?.spinnerFrame },
+			uiTheme,
+		);
+		if (!args.content) {
+			return new Text(text, 0, 0);
 		}
 
-		return new Text(text, 0, 0);
+		const contentLines = args.content.split("\n");
+		const displayLines = contentLines.slice(-WRITE_STREAMING_PREVIEW_LINES);
+		const hidden = contentLines.length - displayLines.length;
+		const outputLines: string[] = [];
+		if (hidden > 0) {
+			outputLines.push(uiTheme.fg("dim", `${uiTheme.format.ellipsis} (${hidden} earlier lines)`));
+		}
+		outputLines.push(uiTheme.fg("dim", `${uiTheme.format.ellipsis} (streaming)`));
+
+		return {
+			render: (width: number) =>
+				renderCodeCell(
+					{
+						code: displayLines.join("\n"),
+						language: getLanguageFromPath(rawPath),
+						title: filePath ? `Write ${filePath}` : "Write",
+						status,
+						spinnerFrame: options?.spinnerFrame,
+						output: outputLines.join("\n"),
+						codeMaxLines: WRITE_STREAMING_PREVIEW_LINES,
+						expanded: true,
+						width,
+					},
+					uiTheme,
+				),
+			invalidate: () => {},
+		};
 	},
 
 	renderResult(
 		result: { content: Array<{ type: string; text?: string }>; details?: WriteToolDetails },
-		{ expanded }: RenderResultOptions,
+		{ expanded, isPartial, spinnerFrame }: RenderResultOptions,
 		uiTheme: Theme,
 		args?: WriteRenderArgs,
 	): Component {
 		const rawPath = args?.file_path || args?.path || "";
+		const filePath = shortenPath(rawPath);
 		const fileContent = args?.content || "";
 		const lang = getLanguageFromPath(rawPath);
-		const contentLines = fileContent
-			? lang
-				? highlightCode(replaceTabs(fileContent), lang)
-				: fileContent.split("\n")
-			: [];
-		const totalLines = contentLines.length;
 		const outputLines: string[] = [];
+		const lineCount = countLines(fileContent);
 
-		outputLines.push(formatMetadataLine(countLines(fileContent), lang ?? "text", uiTheme));
+		outputLines.push(formatMetadataLine(lineCount, lang ?? "text", uiTheme));
 
-		if (fileContent) {
-			const maxLines = expanded ? contentLines.length : 10;
-			const displayLines = contentLines.slice(0, maxLines);
-			const remaining = contentLines.length - maxLines;
+		if (isPartial && fileContent) {
+			const contentLines = fileContent.split("\n");
+			const displayLines = contentLines.slice(-WRITE_STREAMING_PREVIEW_LINES);
+			const hidden = contentLines.length - displayLines.length;
+			if (hidden > 0) {
+				outputLines.push(uiTheme.fg("dim", `${uiTheme.format.ellipsis} (${hidden} earlier lines)`));
+			}
+			outputLines.push(uiTheme.fg("dim", `${uiTheme.format.ellipsis} (streaming)`));
 
-			outputLines.push(
-				"",
-				...displayLines.map((line: string) =>
-					lang ? replaceTabs(line) : uiTheme.fg("toolOutput", replaceTabs(line)),
-				),
-			);
-			if (remaining > 0) {
-				outputLines.push(
-					uiTheme.fg(
-						"toolOutput",
-						`${uiTheme.format.ellipsis} (${remaining} more lines, ${totalLines} total) ${formatExpandHint(uiTheme)}`,
+			return {
+				render: (width: number) =>
+					renderCodeCell(
+						{
+							code: displayLines.join("\n"),
+							language: lang,
+							title: filePath ? `Write ${filePath}` : "Write",
+							status: spinnerFrame !== undefined ? "running" : "pending",
+							spinnerFrame,
+							output: outputLines.join("\n"),
+							codeMaxLines: WRITE_STREAMING_PREVIEW_LINES,
+							expanded: true,
+							width,
+						},
+						uiTheme,
 					),
-				);
-			}
+				invalidate: () => {},
+			};
 		}
 
-		// Show LSP diagnostics if available
 		if (result.details?.diagnostics) {
-			outputLines.push(
-				formatDiagnostics(result.details.diagnostics, expanded, uiTheme, (fp) =>
-					uiTheme.getLangIcon(getLanguageFromPath(fp)),
-				),
+			const diagText = formatDiagnostics(result.details.diagnostics, expanded, uiTheme, (fp) =>
+				uiTheme.getLangIcon(getLanguageFromPath(fp)),
 			);
+			if (diagText.trim()) {
+				const diagLines = diagText.split("\n");
+				const firstNonEmpty = diagLines.findIndex((line) => line.trim());
+				outputLines.push(...(firstNonEmpty >= 0 ? diagLines.slice(firstNonEmpty) : []));
+			}
 		}
 
-		return new Text(outputLines.join("\n"), 0, 0);
+		return {
+			render: (width: number) =>
+				renderCodeCell(
+					{
+						code: fileContent,
+						language: lang,
+						title: filePath ? `Write ${filePath}` : "Write",
+						status: "complete",
+						output: outputLines.join("\n"),
+						codeMaxLines: expanded ? Number.POSITIVE_INFINITY : 10,
+						expanded,
+						width,
+					},
+					uiTheme,
+				),
+			invalidate: () => {},
+		};
 	},
+	mergeCallAndResult: true,
 };