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

package/src/tools/todo-write.ts

@@ -2,16 +2,18 @@ import { randomUUID } from "node:crypto";
 import path from "node:path";
 import type { AgentTool, AgentToolContext, AgentToolResult, AgentToolUpdateCallback } from "@oh-my-pi/pi-agent-core";
 import { StringEnum } from "@oh-my-pi/pi-ai";
-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 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 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 { renderPromptTemplate } from "../config/prompt-templates";
+import type { RenderResultOptions } from "../extensibility/custom-tools/types";
+import type { Theme } from "../modes/theme/theme";
+import todoWriteDescription from "../prompts/tools/todo-write.md" with { type: "text" };
+import type { ToolSession } from "../sdk";
+import { renderStatusLine, renderTreeList } from "../tui";
+import { PREVIEW_LIMITS } from "./render-utils";
 
 const todoWriteSchema = Type.Object({
 	todos: Type.Array(
@@ -61,7 +63,7 @@ function normalizeTodoStatus(status?: string): TodoStatus {
 }
 
 function normalizeTodos(items: Array<{ id?: string; content?: string; status?: string }>): TodoItem[] {
-	return items.map((item) => {
+	return items.map(item => {
 		if (!item.content) {
 			throw new Error("Todo content is required.");
 		}
@@ -80,7 +82,7 @@ function normalizeTodos(items: Array<{ id?: string; content?: string; status?: s
 function validateSequentialTodos(todos: TodoItem[]): { valid: boolean; error?: string } {
 	if (todos.length === 0) return { valid: true };
 
-	const firstIncompleteIndex = todos.findIndex((todo) => todo.status !== "completed");
+	const firstIncompleteIndex = todos.findIndex(todo => todo.status !== "completed");
 	if (firstIncompleteIndex >= 0) {
 		for (let i = firstIncompleteIndex + 1; i < todos.length; i++) {
 			if (todos[i].status === "completed") {
@@ -126,9 +128,9 @@ async function loadTodoFile(filePath: string): Promise<TodoFile | null> {
 
 function formatTodoSummary(todos: TodoItem[]): string {
 	if (todos.length === 0) return "Todo list cleared.";
-	const completed = todos.filter((t) => t.status === "completed").length;
-	const inProgress = todos.filter((t) => t.status === "in_progress").length;
-	const pending = todos.filter((t) => t.status === "pending").length;
+	const completed = todos.filter(t => t.status === "completed").length;
+	const inProgress = todos.filter(t => t.status === "in_progress").length;
+	const pending = todos.filter(t => t.status === "pending").length;
 	return `Saved ${todos.length} todos (${pending} pending, ${inProgress} in progress, ${completed} completed).`;
 }
 
@@ -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/tool-errors.ts

@@ -39,7 +39,7 @@ export class MultiError extends ToolError {
 	readonly errors: ErrorEntry[];
 
 	constructor(errors: ErrorEntry[]) {
-		super(errors.map((e) => e.message).join("; "));
+		super(errors.map(e => e.message).join("; "));
 		this.name = "MultiError";
 		this.errors = errors;
 	}
@@ -49,11 +49,11 @@ export class MultiError extends ToolError {
 			const e = this.errors[0];
 			return e.context ? `${e.context}: ${e.message}` : e.message;
 		}
-		return this.errors.map((e) => (e.context ? `${e.context}: ${e.message}` : e.message)).join("\n");
+		return this.errors.map(e => (e.context ? `${e.context}: ${e.message}` : e.message)).join("\n");
 	}
 
 	static from(errors: Array<string | ErrorEntry>): MultiError {
-		return new MultiError(errors.map((e) => (typeof e === "string" ? { message: e } : e)));
+		return new MultiError(errors.map(e => (typeof e === "string" ? { message: e } : e)));
 	}
 }
 

package/src/tools/tool-result.ts

@@ -1,13 +1,8 @@
 import type { AgentToolResult } from "@oh-my-pi/pi-agent-core";
 import type { ImageContent, TextContent } from "@oh-my-pi/pi-ai";
-import type { OutputSummary } from "@oh-my-pi/pi-coding-agent/session/streaming-output";
-import type {
-	OutputMeta,
-	TruncationOptions,
-	TruncationSummaryOptions,
-	TruncationTextOptions,
-} from "@oh-my-pi/pi-coding-agent/tools/output-meta";
-import { outputMeta } from "@oh-my-pi/pi-coding-agent/tools/output-meta";
+import type { OutputSummary } from "../session/streaming-output";
+import type { OutputMeta, TruncationOptions, TruncationSummaryOptions, TruncationTextOptions } from "./output-meta";
+import { outputMeta } from "./output-meta";
 import type { TruncationResult } from "./truncate";
 
 type ToolContent = Array<TextContent | ImageContent>;

package/src/tools/write.ts

@@ -5,24 +5,20 @@ import type {
 	AgentToolUpdateCallback,
 	ToolCallContext,
 } from "@oh-my-pi/pi-agent-core";
-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 {
-	createLspWritethrough,
-	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";
-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 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 { renderPromptTemplate } from "../config/prompt-templates";
+import type { RenderResultOptions } from "../extensibility/custom-tools/types";
+import { createLspWritethrough, type FileDiagnosticsResult, type WritethroughCallback, writethroughNoop } from "../lsp";
+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 { type OutputMeta, outputMeta } from "./output-meta";
 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({
@@ -48,7 +44,7 @@ function getLspBatchRequest(toolCall: ToolCallContext | undefined): { id: string
 	if (!hasOtherWrites) {
 		return undefined;
 	}
-	const hasLaterWrites = toolCall.toolCalls.slice(toolCall.index + 1).some((call) => LSP_BATCH_TOOLS.has(call.name));
+	const hasLaterWrites = toolCall.toolCalls.slice(toolCall.index + 1).some(call => LSP_BATCH_TOOLS.has(call.name));
 	return { id: toolCall.batchId, flush: !hasLaterWrites };
 }
 
@@ -134,27 +130,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 +142,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,
 };

package/src/tui/code-cell.ts

@@ -0,0 +1,109 @@
+/**
+ * Render a code cell with optional output section.
+ */
+import { highlightCode, type Theme } from "../modes/theme/theme";
+import { formatDuration, formatExpandHint, formatMoreItems, replaceTabs } from "../tools/render-utils";
+import { renderOutputBlock } from "./output-block";
+import type { State } from "./types";
+import { getStateIcon } from "./utils";
+
+export interface CodeCellOptions {
+	code: string;
+	language?: string;
+	index?: number;
+	total?: number;
+	title?: string;
+	status?: "pending" | "running" | "complete" | "error";
+	spinnerFrame?: number;
+	duration?: number;
+	output?: string;
+	outputMaxLines?: number;
+	codeMaxLines?: number;
+	expanded?: boolean;
+	width: number;
+}
+
+function getState(status?: CodeCellOptions["status"]): State | undefined {
+	if (!status) return undefined;
+	if (status === "complete") return "success";
+	if (status === "error") return "error";
+	if (status === "running") return "running";
+	return "pending";
+}
+
+function formatHeader(options: CodeCellOptions, theme: Theme): { title: string; meta?: string } {
+	const { index, total, title, status, spinnerFrame, duration } = options;
+	const parts: string[] = [];
+	if (index !== undefined && total !== undefined) {
+		parts.push(theme.fg("accent", `[${index + 1}/${total}]`));
+	}
+	if (title) {
+		parts.push(theme.fg("toolTitle", title));
+	}
+	const headerTitle = parts.length > 0 ? parts.join(" ") : theme.fg("toolTitle", "Code");
+
+	const metaParts: string[] = [];
+	if (duration !== undefined) {
+		metaParts.push(theme.fg("dim", `(${formatDuration(duration)})`));
+	}
+	if (status) {
+		const icon = getStateIcon(
+			status === "complete"
+				? "success"
+				: status === "error"
+					? "error"
+					: status === "running"
+						? "running"
+						: "pending",
+			theme,
+			spinnerFrame,
+		);
+		if (status === "pending" || status === "running") {
+			metaParts.push(`${icon} ${theme.fg("muted", status)}`);
+		} else {
+			metaParts.push(icon);
+		}
+	}
+
+	if (metaParts.length === 0) return { title: headerTitle };
+	return { title: headerTitle, meta: metaParts.join(theme.fg("dim", theme.sep.dot)) };
+}
+
+export function renderCodeCell(options: CodeCellOptions, theme: Theme): string[] {
+	const { code, language, output, expanded = false, outputMaxLines = 6, codeMaxLines = 12, width } = options;
+	const { title, meta } = formatHeader(options, theme);
+	const state = getState(options.status);
+
+	const rawCodeLines = highlightCode(replaceTabs(code ?? ""), language);
+	const maxCodeLines = expanded ? rawCodeLines.length : Math.min(rawCodeLines.length, codeMaxLines);
+	const codeLines = rawCodeLines.slice(0, maxCodeLines);
+	const hiddenCodeLines = rawCodeLines.length - codeLines.length;
+	if (hiddenCodeLines > 0) {
+		const hint = formatExpandHint(theme, expanded, hiddenCodeLines > 0);
+		const moreLine = `${formatMoreItems(hiddenCodeLines, "line", theme)}${hint ? ` ${hint}` : ""}`;
+		codeLines.push(theme.fg("dim", moreLine));
+	}
+
+	const outputLines: string[] = [];
+	if (output?.trim()) {
+		const rawLines = output.split("\n");
+		const maxLines = expanded ? rawLines.length : Math.min(rawLines.length, outputMaxLines);
+		const displayLines = rawLines
+			.slice(0, maxLines)
+			.map(line => (line.includes("\x1b[") ? line : theme.fg("toolOutput", line)));
+		outputLines.push(...displayLines);
+		const remaining = rawLines.length - maxLines;
+		if (remaining > 0) {
+			const hint = formatExpandHint(theme, expanded, remaining > 0);
+			const moreLine = `${formatMoreItems(remaining, "line", theme)}${hint ? ` ${hint}` : ""}`;
+			outputLines.push(theme.fg("dim", moreLine));
+		}
+	}
+
+	const sections: Array<{ label?: string; lines: string[] }> = [{ lines: codeLines }];
+	if (outputLines.length > 0) {
+		sections.push({ label: theme.fg("toolTitle", "Output"), lines: outputLines });
+	}
+
+	return renderOutputBlock({ header: title, headerMeta: meta, state, sections, width }, theme);
+}

package/src/tui/file-list.ts

@@ -0,0 +1,47 @@
+/**
+ * Render file listings with optional icons and metadata.
+ */
+import type { Theme } from "../modes/theme/theme";
+import { getLanguageFromPath } from "../modes/theme/theme";
+import { renderTreeList } from "./tree-list";
+
+export interface FileEntry {
+	path: string;
+	isDirectory?: boolean;
+	meta?: string;
+}
+
+export interface FileListOptions {
+	files: FileEntry[];
+	expanded?: boolean;
+	maxCollapsed?: number;
+	showIcons?: boolean;
+}
+
+export function renderFileList(options: FileListOptions, theme: Theme): string[] {
+	const { files, expanded = false, maxCollapsed = 8, showIcons = true } = options;
+
+	return renderTreeList(
+		{
+			items: files,
+			expanded,
+			maxCollapsed,
+			itemType: "file",
+			renderItem: entry => {
+				const isDirectory = entry.isDirectory ?? entry.path.endsWith("/");
+				const displayPath = isDirectory && entry.path.endsWith("/") ? entry.path : entry.path;
+				const lang = isDirectory ? undefined : getLanguageFromPath(displayPath);
+				const icon = !showIcons
+					? ""
+					: isDirectory
+						? theme.fg("accent", theme.icon.folder)
+						: theme.fg("muted", theme.getLangIcon(lang));
+				const labelColor = isDirectory ? "accent" : "toolOutput";
+				const meta = entry.meta ? ` ${theme.fg("dim", entry.meta)}` : "";
+				const iconPrefix = icon ? `${icon} ` : "";
+				return `${iconPrefix}${theme.fg(labelColor, displayPath)}${meta}`;
+			},
+		},
+		theme,
+	);
+}

package/src/tui/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Public exports for shared TUI components.
+ */
+
+export * from "./code-cell";
+export * from "./file-list";
+export * from "./output-block";
+export * from "./status-line";
+export * from "./tree-list";
+export * from "./types";
+export * from "./utils";

package/src/tui/output-block.ts

@@ -0,0 +1,72 @@
+/**
+ * Bordered output container with optional header and sections.
+ */
+import { visibleWidth } from "@oh-my-pi/pi-tui";
+import type { Theme } from "../modes/theme/theme";
+import type { State } from "./types";
+import { getStateBgColor, padToWidth, truncateToWidth } from "./utils";
+
+export interface OutputBlockOptions {
+	header?: string;
+	headerMeta?: string;
+	state?: State;
+	sections?: Array<{ label?: string; lines: string[] }>;
+	width: number;
+}
+
+export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): string[] {
+	const { header, headerMeta, state, sections = [], width } = options;
+	const h = theme.boxSharp.horizontal;
+	const v = theme.boxSharp.vertical;
+	const cap = h.repeat(3);
+	const lineWidth = Math.max(0, width);
+	// Border colors: running/pending use accent, success uses dim (gray), error/warning keep their colors
+	const borderColor: "error" | "warning" | "accent" | "dim" =
+		state === "error"
+			? "error"
+			: state === "warning"
+				? "warning"
+				: state === "running" || state === "pending"
+					? "accent"
+					: "dim";
+	const border = (text: string) => theme.fg(borderColor, text);
+	const bgFn = state ? (text: string) => theme.bg(getStateBgColor(state), text) : undefined;
+
+	const buildBarLine = (leftChar: string, label?: string, meta?: string): string => {
+		const left = border(`${leftChar}${cap}`);
+		if (lineWidth <= 0) return left;
+		const labelText = [label, meta].filter(Boolean).join(theme.sep.dot);
+		const rawLabel = labelText ? ` ${labelText} ` : " ";
+		const maxLabelWidth = Math.max(0, lineWidth - visibleWidth(left));
+		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 contentPrefix = border(`${v} `);
+	const contentWidth = Math.max(0, lineWidth - visibleWidth(contentPrefix));
+	const lines: string[] = [];
+
+	lines.push(padToWidth(buildBarLine(theme.boxSharp.topLeft, header, headerMeta), lineWidth, bgFn));
+
+	const hasSections = sections.length > 0;
+	const normalizedSections = hasSections ? sections : [{ lines: [] }];
+
+	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));
+		}
+		for (const line of section.lines) {
+			const text = truncateToWidth(line, contentWidth, theme.format.ellipsis);
+			lines.push(padToWidth(`${contentPrefix}${text}`, lineWidth, bgFn));
+		}
+	}
+
+	const bottomLeft = border(`${theme.boxSharp.bottomLeft}${cap}`);
+	const bottomFillCount = Math.max(0, lineWidth - visibleWidth(bottomLeft));
+	const bottomLine = `${bottomLeft}${border(h.repeat(bottomFillCount))}`;
+	lines.push(padToWidth(bottomLine, lineWidth, bgFn));
+
+	return lines;
+}

package/src/tui/status-line.ts

@@ -0,0 +1,39 @@
+/**
+ * Standardized status header rendering for tool output.
+ */
+import type { Theme, ThemeColor } from "../modes/theme/theme";
+import type { IconType } from "./types";
+import { getStateIcon } from "./utils";
+
+export interface StatusLineOptions {
+	icon?: IconType;
+	spinnerFrame?: number;
+	title: string;
+	titleColor?: ThemeColor;
+	description?: string;
+	badge?: { label: string; color: ThemeColor };
+	meta?: string[];
+}
+
+export function renderStatusLine(options: StatusLineOptions, theme: Theme): string {
+	const icon = options.icon ? getStateIcon(options.icon, theme, options.spinnerFrame) : "";
+	const titleColor = options.titleColor ?? "accent";
+	const title = theme.fg(titleColor, options.title);
+	let line = icon ? `${icon} ${title}` : title;
+
+	if (options.description) {
+		line += `: ${theme.fg("muted", options.description)}`;
+	}
+
+	if (options.badge) {
+		const { label, color } = options.badge;
+		line += ` ${theme.fg(color, `${theme.format.bracketLeft}${label}${theme.format.bracketRight}`)}`;
+	}
+
+	const meta = options.meta?.filter(value => value.trim().length > 0) ?? [];
+	if (meta.length > 0) {
+		line += ` ${theme.fg("dim", meta.join(theme.sep.dot))}`;
+	}
+
+	return line;
+}