@oh-my-pi/pi-coding-agent 8.2.2 → 8.3.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## [Unreleased]
 
+## [8.3.0] - 2026-01-25
+
+### Changed
+- Added request parameter tracking to LSP tool rendering for better diagnostics visibility
+- Added async diff computation and Kitty protocol support to tool execution rendering
+- Refactored patch applicator with improved fuzzy matching (7-pass sequence matching with Levenshtein distance) and indentation adjustment
+- Added inline rendering flag to bash and fetch tool renderers
+- Extracted constants for preview formatting to improve code maintainability
+- Exposed mergeCallAndResult and inline rendering options from tools to their wrappers
+- Added timeout validation and normalization for tool timeout parameters
+
+### Fixed
+- Fixed output block border rendering (bottom-right corner was missing)
+- Added background control parameter to output block rendering
 ## [8.2.2] - 2026-01-24
 
 ### Removed

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oh-my-pi/pi-coding-agent",
-	"version": "8.2.2",
+	"version": "8.3.0",
 	"description": "Coding agent CLI with read, bash, edit, write tools and session management",
 	"type": "module",
 	"ompConfig": {
@@ -75,11 +75,11 @@
 		"test": "bun test"
 	},
 	"dependencies": {
-		"@oh-my-pi/omp-stats": "8.2.2",
-		"@oh-my-pi/pi-agent-core": "8.2.2",
-		"@oh-my-pi/pi-ai": "8.2.2",
-		"@oh-my-pi/pi-tui": "8.2.2",
-		"@oh-my-pi/pi-utils": "8.2.2",
+		"@oh-my-pi/omp-stats": "8.3.0",
+		"@oh-my-pi/pi-agent-core": "8.3.0",
+		"@oh-my-pi/pi-ai": "8.3.0",
+		"@oh-my-pi/pi-tui": "8.3.0",
+		"@oh-my-pi/pi-utils": "8.3.0",
 		"@openai/agents": "^0.4.3",
 		"@sinclair/typebox": "^0.34.46",
 		"ajv": "^8.17.1",

package/src/extensibility/extensions/wrapper.ts

@@ -79,6 +79,8 @@ export class ExtensionToolWrapper<TParameters extends TSchema = TSchema, TDetail
 	parameters: TParameters;
 	renderCall?: AgentTool<TParameters, TDetails>["renderCall"];
 	renderResult?: AgentTool<TParameters, TDetails>["renderResult"];
+	mergeCallAndResult?: boolean;
+	inline?: boolean;
 
 	constructor(
 		private tool: AgentTool<TParameters, TDetails>,
@@ -90,6 +92,8 @@ export class ExtensionToolWrapper<TParameters extends TSchema = TSchema, TDetail
 		this.parameters = tool.parameters;
 		this.renderCall = tool.renderCall;
 		this.renderResult = tool.renderResult;
+		this.mergeCallAndResult = (tool as { mergeCallAndResult?: boolean }).mergeCallAndResult;
+		this.inline = (tool as { inline?: boolean }).inline;
 	}
 
 	async execute(

package/src/extensibility/hooks/tool-wrapper.ts

@@ -23,6 +23,8 @@ export class HookToolWrapper<TParameters extends TSchema = TSchema, TDetails = u
 	parameters: TParameters;
 	renderCall?: AgentTool<TParameters, TDetails>["renderCall"];
 	renderResult?: AgentTool<TParameters, TDetails>["renderResult"];
+	mergeCallAndResult?: boolean;
+	inline?: boolean;
 
 	constructor(
 		private tool: AgentTool<TParameters, TDetails>,
@@ -34,6 +36,8 @@ export class HookToolWrapper<TParameters extends TSchema = TSchema, TDetails = u
 		this.parameters = tool.parameters;
 		this.renderCall = tool.renderCall;
 		this.renderResult = tool.renderResult;
+		this.mergeCallAndResult = (tool as { mergeCallAndResult?: boolean }).mergeCallAndResult;
+		this.inline = (tool as { inline?: boolean }).inline;
 	}
 
 	async execute(

package/src/lsp/index.ts

@@ -955,6 +955,8 @@ export class LspTool implements AgentTool<typeof lspSchema, LspToolDetails, Them
 	public readonly parameters = lspSchema;
 	public readonly renderCall = renderCall;
 	public readonly renderResult = renderResult;
+	public readonly mergeCallAndResult = true;
+	public readonly inline = true;
 
 	private readonly session: ToolSession;
 
@@ -1011,7 +1013,7 @@ export class LspTool implements AgentTool<typeof lspSchema, LspToolDetails, Them
 			const output = lspmuxStatus ? `${serverStatus}\n${lspmuxStatus}` : serverStatus;
 			return {
 				content: [{ type: "text", text: output }],
-				details: { action, success: true },
+				details: { action, success: true, request: params },
 			};
 		}
 
@@ -1025,7 +1027,7 @@ export class LspTool implements AgentTool<typeof lspSchema, LspToolDetails, Them
 						text: `Workspace diagnostics (${result.projectType.description}):\n${result.output}`,
 					},
 				],
-				details: { action, success: true },
+				details: { action, success: true, request: params },
 			};
 		}
 
@@ -1636,13 +1638,13 @@ export class LspTool implements AgentTool<typeof lspSchema, LspToolDetails, Them
 
 			return {
 				content: [{ type: "text", text: output }],
-				details: { serverName, action, success: true },
+				details: { serverName, action, success: true, request: params },
 			};
 		} catch (err) {
 			const errorMessage = err instanceof Error ? err.message : String(err);
 			return {
 				content: [{ type: "text", text: `LSP error: ${errorMessage}` }],
-				details: { serverName, action, success: false },
+				details: { serverName, action, success: false, request: params },
 			};
 		}
 	}

package/src/lsp/render.ts

@@ -7,11 +7,18 @@
  * - Grouped references and symbols
  * - Collapsible/expandable views
  */
-import type { AgentToolResult, RenderResultOptions } from "@oh-my-pi/pi-agent-core";
+import type { RenderResultOptions } from "@oh-my-pi/pi-agent-core";
 import { type Component, Text } from "@oh-my-pi/pi-tui";
 import { highlight, supportsLanguage } from "cli-highlight";
 import { getLanguageFromPath, type Theme } from "../modes/theme/theme";
-import { formatExpandHint, formatMoreItems, TRUNCATE_LENGTHS, truncate } from "../tools/render-utils";
+import {
+	formatExpandHint,
+	formatMoreItems,
+	formatStatusIcon,
+	shortenPath,
+	TRUNCATE_LENGTHS,
+	truncate,
+} from "../tools/render-utils";
 import { renderOutputBlock, renderStatusLine } from "../tui";
 import type { LspParams, LspToolDetails } from "./types";
 
@@ -23,15 +30,74 @@ import type { LspParams, LspToolDetails } from "./types";
  * Render the LSP tool call in the TUI.
  * Shows: "lsp <operation> <file/filecount>"
  */
-export function renderCall(args: unknown, theme: Theme): Text {
-	const p = args as LspParams & { file?: string; files?: string[] };
+export function renderCall(args: LspParams, theme: Theme): Text {
+	const actionLabel = (args.action ?? "request").replace(/_/g, " ");
+	const queryPreview = args.query ? truncate(args.query, TRUNCATE_LENGTHS.SHORT, theme.format.ellipsis) : undefined;
+	const replacementPreview = args.replacement
+		? truncate(args.replacement, TRUNCATE_LENGTHS.SHORT, theme.format.ellipsis)
+		: undefined;
+
+	let target: string | undefined;
+	let hasFileTarget = false;
+
+	if (args.file) {
+		target = shortenPath(args.file);
+		hasFileTarget = true;
+	} else if (args.files?.length === 1) {
+		target = shortenPath(args.files[0]);
+		hasFileTarget = true;
+	} else if (args.files?.length) {
+		target = `${args.files.length} files`;
+	}
+
+	if (hasFileTarget && args.line !== undefined) {
+		const col = args.column !== undefined ? `:${args.column}` : "";
+		target += `:${args.line}${col}`;
+		if (args.end_line !== undefined) {
+			const endCol = args.end_character !== undefined ? `:${args.end_character}` : "";
+			target += `-${args.end_line}${endCol}`;
+		}
+	} else if (!target && args.line !== undefined) {
+		const col = args.column !== undefined ? `:${args.column}` : "";
+		target = `line ${args.line}${col}`;
+		if (args.end_line !== undefined) {
+			const endCol = args.end_character !== undefined ? `:${args.end_character}` : "";
+			target += `-${args.end_line}${endCol}`;
+		}
+	}
+
 	const meta: string[] = [];
-	if (p.file) {
-		meta.push(p.file);
-	} else if (p.files?.length) {
-		meta.push(`${p.files.length} file(s)`);
+	if (queryPreview && target) meta.push(`query:${queryPreview}`);
+	if (args.new_name) meta.push(`new:${args.new_name}`);
+	if (replacementPreview) meta.push(`replace:${replacementPreview}`);
+	if (args.kind) meta.push(`kind:${args.kind}`);
+	if (args.apply !== undefined) meta.push(`apply:${args.apply ? "true" : "false"}`);
+	if (args.action_index !== undefined) meta.push(`action:${args.action_index}`);
+	if (args.include_declaration !== undefined) {
+		meta.push(`include_decl:${args.include_declaration ? "true" : "false"}`);
+	}
+	if (args.end_line !== undefined && args.line === undefined) {
+		const endCol = args.end_character !== undefined ? `:${args.end_character}` : "";
+		meta.push(`end:${args.end_line}${endCol}`);
+	}
+
+	const descriptionParts = [actionLabel];
+	if (target) {
+		descriptionParts.push(target);
+	} else if (queryPreview) {
+		descriptionParts.push(queryPreview);
 	}
-	const text = renderStatusLine({ icon: "pending", title: "LSP", description: p.action || "?", meta }, theme);
+
+	const text = renderStatusLine(
+		{
+			icon: "pending",
+			title: "LSP",
+			description: descriptionParts.join(" "),
+			meta,
+		},
+		theme,
+	);
+
 	return new Text(text, 0, 0);
 }
 
@@ -44,14 +110,15 @@ export function renderCall(args: unknown, theme: Theme): Text {
  * Detects hover, diagnostics, references, symbols, etc. and formats accordingly.
  */
 export function renderResult(
-	result: AgentToolResult<LspToolDetails>,
+	result: { content: Array<{ type: string; text?: string }>; details?: LspToolDetails; isError?: boolean },
 	options: RenderResultOptions,
 	theme: Theme,
 	args?: LspParams & { file?: string; files?: string[] },
 ): Component {
 	const content = result.content?.[0];
 	if (!content || content.type !== "text" || !("text" in content) || !content.text) {
-		const header = renderStatusLine({ icon: "warning", title: "LSP", description: "No result" }, theme);
+		const icon = formatStatusIcon("warning", theme, options.spinnerFrame);
+		const header = `${icon} LSP`;
 		return new Text([header, theme.fg("dim", "No result")].join("\n"), 0, 0);
 	}
 
@@ -94,22 +161,50 @@ export function renderResult(
 		}
 	}
 
-	const meta: string[] = [];
-	if (args?.action) meta.push(args.action);
-	if (args?.file) {
-		meta.push(args.file);
-	} else if (args?.files?.length) {
-		meta.push(`${args.files.length} file(s)`);
+	const request = args ?? result.details?.request;
+	const requestLines: string[] = [];
+	if (request?.file) {
+		requestLines.push(theme.fg("toolOutput", request.file));
+	} else if (request?.files?.length === 1) {
+		requestLines.push(theme.fg("toolOutput", request.files[0]));
+	} else if (request?.files?.length) {
+		requestLines.push(theme.fg("dim", `${request.files.length} file(s)`));
+	}
+	if (request?.line !== undefined) {
+		const col = request.column !== undefined ? `:${request.column}` : "";
+		requestLines.push(theme.fg("dim", `line ${request.line}${col}`));
 	}
-	const header = renderStatusLine({ icon: state, title: "LSP", description: label, meta }, theme);
+	if (request?.end_line !== undefined) {
+		const endCol = request.end_character !== undefined ? `:${request.end_character}` : "";
+		requestLines.push(theme.fg("dim", `end ${request.end_line}${endCol}`));
+	}
+	if (request?.query) requestLines.push(theme.fg("dim", `query: ${request.query}`));
+	if (request?.new_name) requestLines.push(theme.fg("dim", `new name: ${request.new_name}`));
+	if (request?.replacement) requestLines.push(theme.fg("dim", `replacement: ${request.replacement}`));
+	if (request?.kind) requestLines.push(theme.fg("dim", `kind: ${request.kind}`));
+	if (request?.apply !== undefined) requestLines.push(theme.fg("dim", `apply: ${request.apply ? "true" : "false"}`));
+	if (request?.action_index !== undefined) requestLines.push(theme.fg("dim", `action: ${request.action_index}`));
+	if (request?.include_declaration !== undefined) {
+		requestLines.push(theme.fg("dim", `include declaration: ${request.include_declaration ? "true" : "false"}`));
+	}
+
+	const actionLabel = (request?.action ?? result.details?.action ?? label.toLowerCase()).replace(/_/g, " ");
+	const status = options.isPartial ? "running" : result.isError ? "error" : "success";
+	const icon = formatStatusIcon(status, theme, options.spinnerFrame);
+	const header = `${icon} LSP ${actionLabel}`;
+
 	return {
 		render: (width: number) =>
 			renderOutputBlock(
 				{
 					header,
 					state,
-					sections: [{ label: theme.fg("toolTitle", label), lines: bodyLines }],
+					sections: [
+						...(requestLines.length > 0 ? [{ lines: requestLines }] : []),
+						{ label: theme.fg("toolTitle", "Response"), lines: bodyLines },
+					],
 					width,
+					applyBg: false,
 				},
 				theme,
 			),
@@ -612,4 +707,5 @@ export const lspToolRenderer = {
 	renderCall,
 	renderResult,
 	mergeCallAndResult: true,
+	inline: true,
 };

package/src/lsp/types.ts

@@ -53,6 +53,7 @@ export interface LspToolDetails {
 	serverName?: string;
 	action: string;
 	success: boolean;
+	request?: LspParams;
 }
 
 // =============================================================================

package/src/modes/components/tool-execution.ts

@@ -1,6 +1,7 @@
 import type { AgentTool } from "@oh-my-pi/pi-agent-core";
 import {
 	Box,
+	type Component,
 	Container,
 	getCapabilities,
 	getImageDimensions,
@@ -11,6 +12,7 @@ import {
 	type TUI,
 } from "@oh-my-pi/pi-tui";
 import { sanitizeText } from "@oh-my-pi/pi-utils";
+import type { Theme } from "../../modes/theme/theme";
 import { theme } from "../../modes/theme/theme";
 import { computeEditDiff, computePatchDiff, type EditDiffError, type EditDiffResult } from "../../patch";
 import { BASH_DEFAULT_PREVIEW_LINES } from "../../tools/bash";
@@ -376,7 +378,8 @@ export class ToolExecutionComponent extends Container {
 			const tool = this.tool;
 			const mergeCallAndResult = Boolean((tool as { mergeCallAndResult?: boolean }).mergeCallAndResult);
 			// Custom tools use Box for flexible component rendering
-			this.contentBox.setBgFn(bgFn);
+			const inline = Boolean((tool as { inline?: boolean }).inline);
+			this.contentBox.setBgFn(inline ? undefined : bgFn);
 			this.contentBox.clear();
 
 			// Render call component
@@ -404,10 +407,17 @@ export class ToolExecutionComponent extends Container {
 			// Render result component if we have a result
 			if (this.result && tool.renderResult) {
 				try {
-					const resultComponent = tool.renderResult(
-						{ content: this.result.content as any, details: this.result.details },
+					const renderResult = tool.renderResult as (
+						result: { content: Array<{ type: string; text?: string }>; details?: unknown; isError?: boolean },
+						options: { expanded: boolean; isPartial: boolean; spinnerFrame?: number },
+						theme: Theme,
+						args?: unknown,
+					) => Component;
+					const resultComponent = renderResult(
+						{ content: this.result.content as any, details: this.result.details, isError: this.result.isError },
 						{ expanded: this.expanded, isPartial: this.isPartial, spinnerFrame: this.spinnerFrame },
 						theme,
+						this.args,
 					);
 					if (resultComponent) {
 						// Ensure component has invalidate() method for Component interface
@@ -542,10 +552,16 @@ export class ToolExecutionComponent extends Container {
 	}
 
 	/**
-	 * Build render context for tools that need extra state (bash, edit)
+	 * Build render context for tools that need extra state (bash, python, edit)
 	 */
 	private buildRenderContext(): Record<string, unknown> {
 		const context: Record<string, unknown> = {};
+		const normalizeTimeoutSeconds = (value: unknown, maxSeconds: number): number | undefined => {
+			if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
+			let timeoutSec = value > 1000 ? value / 1000 : value;
+			timeoutSec = Math.max(1, Math.min(maxSeconds, timeoutSec));
+			return timeoutSec;
+		};
 
 		if (this.toolName === "bash" && this.result) {
 			// Pass raw output and expanded state - renderer handles width-aware truncation
@@ -553,13 +569,13 @@ export class ToolExecutionComponent extends Container {
 			context.output = output;
 			context.expanded = this.expanded;
 			context.previewLines = BASH_DEFAULT_PREVIEW_LINES;
-			context.timeout = typeof this.args?.timeout === "number" ? this.args.timeout : undefined;
+			context.timeout = normalizeTimeoutSeconds(this.args?.timeout, 3600);
 		} else if (this.toolName === "python" && this.result) {
 			const output = this.getTextOutput().trimEnd();
 			context.output = output;
 			context.expanded = this.expanded;
 			context.previewLines = PYTHON_DEFAULT_PREVIEW_LINES;
-			context.timeout = typeof this.args?.timeout === "number" ? this.args.timeout : undefined;
+			context.timeout = normalizeTimeoutSeconds(this.args?.timeout, 600);
 		} else if (this.toolName === "edit") {
 			// Edit needs diff preview and renderDiff function
 			context.editDiffPreview = this.editDiffPreview;

package/src/patch/applicator.ts

@@ -957,11 +957,15 @@ function computeReplacements(
 			if (secondMatch.index !== undefined) {
 				// Extract 3-line previews for each match
 				const formatPreview = (startIdx: number) => {
-					const lines = originalLines.slice(startIdx, startIdx + 3);
+					const contextLines = 2;
+					const maxLineLength = 80;
+					const start = Math.max(0, startIdx - contextLines);
+					const end = Math.min(originalLines.length, startIdx + contextLines + 1);
+					const lines = originalLines.slice(start, end);
 					return lines
 						.map((line, i) => {
-							const num = startIdx + i + 1;
-							const truncated = line.length > 60 ? `${line.slice(0, 57)}...` : line;
+							const num = start + i + 1;
+							const truncated = line.length > maxLineLength ? `${line.slice(0, maxLineLength - 3)}...` : line;
 							return `  ${num} | ${truncated}`;
 						})
 						.join("\n");

package/src/patch/fuzzy.ts

@@ -29,6 +29,12 @@ const PARTIAL_MATCH_MIN_LENGTH = 6;
 /** Minimum ratio of pattern to line length for substring match */
 const PARTIAL_MATCH_MIN_RATIO = 0.3;
 
+/** Context lines to show before/after an ambiguous match preview */
+const OCCURRENCE_PREVIEW_CONTEXT = 5;
+
+/** Maximum line length for ambiguous match previews */
+const OCCURRENCE_PREVIEW_MAX_LEN = 80;
+
 // ═══════════════════════════════════════════════════════════════════════════
 // Core Algorithms
 // ═══════════════════════════════════════════════════════════════════════════
@@ -224,10 +230,14 @@ export function findMatch(
 				if (idx === -1) break;
 				const lineNumber = content.slice(0, idx).split("\n").length;
 				occurrenceLines.push(lineNumber);
-				// Extract 3 lines starting from match (0-indexed)
-				const previewLines = contentLines.slice(lineNumber - 1, lineNumber + 2);
+				const start = Math.max(0, lineNumber - 1 - OCCURRENCE_PREVIEW_CONTEXT);
+				const end = Math.min(contentLines.length, lineNumber + OCCURRENCE_PREVIEW_CONTEXT + 1);
+				const previewLines = contentLines.slice(start, end);
 				const preview = previewLines
-					.map((line, i) => `  ${lineNumber + i} | ${line.length > 60 ? `${line.slice(0, 57)}...` : line}`)
+					.map((line, idx) => {
+						const num = start + idx + 1;
+						return `  ${num} | ${line.length > OCCURRENCE_PREVIEW_MAX_LEN ? `${line.slice(0, OCCURRENCE_PREVIEW_MAX_LEN - 3)}...` : line}`;
+					})
 					.join("\n");
 				occurrencePreviews.push(preview);
 				searchStart = idx + 1;

package/src/tools/bash.ts

@@ -288,4 +288,5 @@ export const bashToolRenderer = {
 		};
 	},
 	mergeCallAndResult: true,
+	inline: true,
 };

package/src/tools/fetch.ts

@@ -1082,6 +1082,7 @@ export function renderFetchResult(
 						{ label: uiTheme.fg("toolTitle", "Content Preview"), lines: contentPreviewLines },
 					],
 					width,
+					applyBg: false,
 				},
 				uiTheme,
 			),

package/src/tools/write.ts

@@ -15,10 +15,17 @@ import { createLspWritethrough, type FileDiagnosticsResult, type WritethroughCal
 import { getLanguageFromPath, type Theme } from "../modes/theme/theme";
 import writeDescription from "../prompts/tools/write.md" with { type: "text" };
 import type { ToolSession } from "../sdk";
-import { renderCodeCell, renderStatusLine } from "../tui";
+import { renderStatusLine } from "../tui";
 import { type OutputMeta, outputMeta } from "./output-meta";
 import { resolveToCwd } from "./path-utils";
-import { formatDiagnostics, shortenPath } from "./render-utils";
+import {
+	formatDiagnostics,
+	formatExpandHint,
+	formatMoreItems,
+	formatStatusIcon,
+	shortenPath,
+	ToolUIKit,
+} from "./render-utils";
 import type { RenderCallOptions } from "./renderers";
 
 const writeSchema = Type.Object({
@@ -123,6 +130,7 @@ interface WriteRenderArgs {
 	content?: string;
 }
 
+const WRITE_PREVIEW_LINES = 6;
 const WRITE_STREAMING_PREVIEW_LINES = 12;
 
 function countLines(text: string): number {
@@ -138,93 +146,98 @@ function formatMetadataLine(lineCount: number | null, language: string | undefin
 	return uiTheme.fg("dim", `${icon}`);
 }
 
+function formatStreamingContent(content: string, uiTheme: Theme, ui: ToolUIKit): string {
+	if (!content) return "";
+	const lines = content.split("\n");
+	const displayLines = lines.slice(-WRITE_STREAMING_PREVIEW_LINES);
+	const hidden = lines.length - displayLines.length;
+
+	let text = "\n\n";
+	if (hidden > 0) {
+		text += uiTheme.fg("dim", `${uiTheme.format.ellipsis} (${hidden} earlier lines)\n`);
+	}
+	for (const line of displayLines) {
+		text += `${uiTheme.fg("toolOutput", ui.truncate(line, 80))}\n`;
+	}
+	text += uiTheme.fg("dim", `${uiTheme.format.ellipsis} (streaming)`);
+	return text;
+}
+
+function renderContentPreview(content: string, expanded: boolean, uiTheme: Theme, ui: ToolUIKit): string {
+	if (!content) return "";
+	const lines = content.split("\n");
+	const maxLines = expanded ? lines.length : Math.min(lines.length, WRITE_PREVIEW_LINES);
+	const displayLines = expanded ? lines : lines.slice(-maxLines);
+	const hidden = lines.length - displayLines.length;
+
+	let text = "\n\n";
+	for (const line of displayLines) {
+		text += `${uiTheme.fg("toolOutput", ui.truncate(line, 80))}\n`;
+	}
+	if (!expanded && hidden > 0) {
+		const hint = formatExpandHint(uiTheme, expanded, hidden > 0);
+		const moreLine = `${formatMoreItems(hidden, "line", uiTheme)}${hint ? ` ${hint}` : ""}`;
+		text += uiTheme.fg("dim", moreLine);
+	}
+	return text;
+}
+
 export const writeToolRenderer = {
 	renderCall(args: WriteRenderArgs, uiTheme: Theme, options?: RenderCallOptions): Component {
+		const ui = new ToolUIKit(uiTheme);
 		const rawPath = args.file_path || args.path || "";
 		const filePath = shortenPath(rawPath);
-		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,
-		);
+		const lang = getLanguageFromPath(rawPath) ?? "text";
+		const langIcon = uiTheme.fg("muted", uiTheme.getLangIcon(lang));
+		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 = `${ui.title("Write")} ${spinner ? `${spinner} ` : ""}${langIcon} ${pathDisplay}`;
+
 		if (!args.content) {
 			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: () => {},
-		};
+		// Show streaming preview of content (tail)
+		text += formatStreamingContent(args.content, uiTheme, ui);
+
+		return new Text(text, 0, 0);
 	},
 
 	renderResult(
 		result: { content: Array<{ type: string; text?: string }>; details?: WriteToolDetails },
-		{ expanded, isPartial, spinnerFrame }: RenderResultOptions,
+		{ expanded }: RenderResultOptions,
 		uiTheme: Theme,
 		args?: WriteRenderArgs,
 	): Component {
+		const ui = new ToolUIKit(uiTheme);
 		const rawPath = args?.file_path || args?.path || "";
 		const filePath = shortenPath(rawPath);
 		const fileContent = args?.content || "";
 		const lang = getLanguageFromPath(rawPath);
-		const outputLines: string[] = [];
+		const langIcon = uiTheme.fg("muted", uiTheme.getLangIcon(lang));
+		const pathDisplay = filePath ? uiTheme.fg("accent", filePath) : uiTheme.fg("toolOutput", uiTheme.format.ellipsis);
 		const lineCount = countLines(fileContent);
 
-		outputLines.push(formatMetadataLine(lineCount, lang ?? "text", uiTheme));
+		// Build header with status icon
+		const header = renderStatusLine(
+			{
+				icon: "success",
+				title: "Write",
+				description: `${langIcon} ${pathDisplay}`,
+			},
+			uiTheme,
+		);
+		let text = header;
 
-		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)`));
+		// Add metadata line
+		text += `\n${formatMetadataLine(lineCount, lang ?? "text", 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 content preview (collapsed tail, expandable)
+		text += renderContentPreview(fileContent, expanded, uiTheme, ui);
 
+		// Show diagnostics if available
 		if (result.details?.diagnostics) {
 			const diagText = formatDiagnostics(result.details.diagnostics, expanded, uiTheme, fp =>
 				uiTheme.getLangIcon(getLanguageFromPath(fp)),
@@ -232,27 +245,13 @@ export const writeToolRenderer = {
 			if (diagText.trim()) {
 				const diagLines = diagText.split("\n");
 				const firstNonEmpty = diagLines.findIndex(line => line.trim());
-				outputLines.push(...(firstNonEmpty >= 0 ? diagLines.slice(firstNonEmpty) : []));
+				if (firstNonEmpty >= 0) {
+					text += `\n${diagLines.slice(firstNonEmpty).join("\n")}`;
+				}
 			}
 		}
 
-		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: () => {},
-		};
+		return new Text(text, 0, 0);
 	},
 	mergeCallAndResult: true,
 };

package/src/tui/output-block.ts

@@ -12,10 +12,11 @@ export interface OutputBlockOptions {
 	state?: State;
 	sections?: Array<{ label?: string; lines: string[] }>;
 	width: number;
+	applyBg?: boolean;
 }
 
 export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): string[] {
-	const { header, headerMeta, state, sections = [], width } = options;
+	const { header, headerMeta, state, sections = [], width, applyBg = true } = options;
 	const h = theme.boxSharp.horizontal;
 	const v = theme.boxSharp.vertical;
 	const cap = h.repeat(3);
@@ -30,24 +31,31 @@ export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): st
 					? "accent"
 					: "dim";
 	const border = (text: string) => theme.fg(borderColor, text);
-	const bgFn = state ? (text: string) => theme.bg(getStateBgColor(state), text) : undefined;
+	const bgFn = state && applyBg ? (text: string) => theme.bg(getStateBgColor(state), text) : undefined;
 
-	const buildBarLine = (leftChar: string, label?: string, meta?: string): string => {
+	const buildBarLine = (leftChar: string, rightChar: string, label?: string, meta?: string): string => {
 		const left = border(`${leftChar}${cap}`);
-		if (lineWidth <= 0) return left;
+		const right = border(rightChar);
+		if (lineWidth <= 0) return left + right;
 		const labelText = [label, meta].filter(Boolean).join(theme.sep.dot);
 		const rawLabel = labelText ? ` ${labelText} ` : " ";
-		const maxLabelWidth = Math.max(0, lineWidth - visibleWidth(left));
+		const leftWidth = visibleWidth(left);
+		const rightWidth = visibleWidth(right);
+		const maxLabelWidth = Math.max(0, lineWidth - leftWidth - rightWidth);
 		const trimmedLabel = truncateToWidth(rawLabel, maxLabelWidth, theme.format.ellipsis);
-		const fillCount = Math.max(0, lineWidth - visibleWidth(left + trimmedLabel));
-		return `${left}${trimmedLabel}${border(h.repeat(fillCount))}`;
+		const labelWidth = visibleWidth(trimmedLabel);
+		const fillCount = Math.max(0, lineWidth - leftWidth - labelWidth - rightWidth);
+		return `${left}${trimmedLabel}${border(h.repeat(fillCount))}${right}`;
 	};
 
 	const contentPrefix = border(`${v} `);
-	const contentWidth = Math.max(0, lineWidth - visibleWidth(contentPrefix));
+	const contentSuffix = border(v);
+	const contentWidth = Math.max(0, lineWidth - visibleWidth(contentPrefix) - visibleWidth(contentSuffix));
 	const lines: string[] = [];
 
-	lines.push(padToWidth(buildBarLine(theme.boxSharp.topLeft, header, headerMeta), lineWidth, bgFn));
+	lines.push(
+		padToWidth(buildBarLine(theme.boxSharp.topLeft, theme.boxSharp.topRight, header, headerMeta), lineWidth, bgFn),
+	);
 
 	const hasSections = sections.length > 0;
 	const normalizedSections = hasSections ? sections : [{ lines: [] }];
@@ -55,17 +63,22 @@ export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): st
 	for (let i = 0; i < normalizedSections.length; i++) {
 		const section = normalizedSections[i];
 		if (section.label) {
-			lines.push(padToWidth(buildBarLine(theme.boxSharp.teeRight, section.label), lineWidth, bgFn));
+			lines.push(
+				padToWidth(buildBarLine(theme.boxSharp.teeRight, theme.boxSharp.teeLeft, section.label), lineWidth, bgFn),
+			);
 		}
 		for (const line of section.lines) {
 			const text = truncateToWidth(line, contentWidth, theme.format.ellipsis);
-			lines.push(padToWidth(`${contentPrefix}${text}`, lineWidth, bgFn));
+			const innerPadding = " ".repeat(Math.max(0, contentWidth - visibleWidth(text)));
+			const fullLine = `${contentPrefix}${text}${innerPadding}${contentSuffix}`;
+			lines.push(padToWidth(fullLine, lineWidth, bgFn));
 		}
 	}
 
 	const bottomLeft = border(`${theme.boxSharp.bottomLeft}${cap}`);
-	const bottomFillCount = Math.max(0, lineWidth - visibleWidth(bottomLeft));
-	const bottomLine = `${bottomLeft}${border(h.repeat(bottomFillCount))}`;
+	const bottomRight = border(theme.boxSharp.bottomRight);
+	const bottomFillCount = Math.max(0, lineWidth - visibleWidth(bottomLeft) - visibleWidth(bottomRight));
+	const bottomLine = `${bottomLeft}${border(h.repeat(bottomFillCount))}${bottomRight}`;
 	lines.push(padToWidth(bottomLine, lineWidth, bgFn));
 
 	return lines;