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

package/src/tools/bash.ts

@@ -8,15 +8,15 @@ import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import bashDescription from "@oh-my-pi/pi-coding-agent/prompts/tools/bash.md" with { type: "text" };
 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, truncateToWidth } from "@oh-my-pi/pi-tui";
+import { Text } from "@oh-my-pi/pi-tui";
 import { Type } from "@sinclair/typebox";
-
+import type { ToolSession } from ".";
 import { checkBashInterception, checkSimpleLsInterception } from "./bash-interceptor";
-import type { ToolSession } from "./index";
 import { allocateOutputArtifact, createTailBuffer } from "./output-utils";
 import { resolveToCwd } from "./path-utils";
-import { ToolUIKit } from "./render-utils";
+import { formatBytes, wrapBrackets } from "./render-utils";
 import { toolResult } from "./tool-result";
 import { DEFAULT_MAX_BYTES } from "./truncate";
 
@@ -158,35 +158,36 @@ interface BashRenderContext {
 	timeout?: number;
 }
 
+function formatBashCommand(args: BashRenderArgs, uiTheme: Theme): string {
+	const command = args.command || uiTheme.format.ellipsis;
+	const prompt = "$";
+	const cwd = process.cwd();
+	let displayWorkdir = args.cwd;
+
+	if (displayWorkdir) {
+		const resolvedCwd = resolve(cwd);
+		const resolvedWorkdir = resolve(displayWorkdir);
+		if (resolvedWorkdir === resolvedCwd) {
+			displayWorkdir = undefined;
+		} else {
+			const relativePath = relative(resolvedCwd, resolvedWorkdir);
+			const isWithinCwd = relativePath && !relativePath.startsWith("..") && !relativePath.startsWith(`..${sep}`);
+			if (isWithinCwd) {
+				displayWorkdir = relativePath;
+			}
+		}
+	}
+
+	return displayWorkdir ? `${prompt} cd ${displayWorkdir} && ${command}` : `${prompt} ${command}`;
+}
+
 // Preview line limit when not expanded (matches tool-execution behavior)
 export const BASH_PREVIEW_LINES = 10;
 
 export const bashToolRenderer = {
 	renderCall(args: BashRenderArgs, uiTheme: Theme): Component {
-		const ui = new ToolUIKit(uiTheme);
-		const command = args.command || uiTheme.format.ellipsis;
-		const prompt = uiTheme.fg("accent", "$");
-		const cwd = process.cwd();
-		let displayWorkdir = args.cwd;
-
-		if (displayWorkdir) {
-			const resolvedCwd = resolve(cwd);
-			const resolvedWorkdir = resolve(displayWorkdir);
-			if (resolvedWorkdir === resolvedCwd) {
-				displayWorkdir = undefined;
-			} else {
-				const relativePath = relative(resolvedCwd, resolvedWorkdir);
-				const isWithinCwd = relativePath && !relativePath.startsWith("..") && !relativePath.startsWith(`..${sep}`);
-				if (isWithinCwd) {
-					displayWorkdir = relativePath;
-				}
-			}
-		}
-
-		const cmdText = displayWorkdir
-			? `${prompt} ${uiTheme.fg("dim", `cd ${displayWorkdir} &&`)} ${command}`
-			: `${prompt} ${command}`;
-		const text = ui.title(cmdText);
+		const cmdText = formatBashCommand(args, uiTheme);
+		const text = renderStatusLine({ icon: "pending", title: "Bash", description: cmdText }, uiTheme);
 		return new Text(text, 0, 0);
 	},
 
@@ -194,19 +195,23 @@ export const bashToolRenderer = {
 		result: {
 			content: Array<{ type: string; text?: string }>;
 			details?: BashToolDetails;
+			isError?: boolean;
 		},
 		options: RenderResultOptions & { renderContext?: BashRenderContext },
 		uiTheme: Theme,
+		args?: BashRenderArgs,
 	): Component {
-		const ui = new ToolUIKit(uiTheme);
+		const cmdText = args ? formatBashCommand(args, uiTheme) : undefined;
+		const isError = result.isError === true;
+		const header = renderStatusLine({ icon: isError ? "error" : "success", title: "Bash" }, uiTheme);
 		const { renderContext } = options;
 		const details = result.details;
 		const expanded = renderContext?.expanded ?? options.expanded;
 		const previewLines = renderContext?.previewLines ?? BASH_DEFAULT_PREVIEW_LINES;
 
 		// Get output from context (preferred) or fall back to result content
-		const output = renderContext?.output ?? (result.content?.find((c) => c.type === "text")?.text ?? "").trim();
-		const displayOutput = output;
+		const output = renderContext?.output ?? result.content?.find((c) => c.type === "text")?.text ?? "";
+		const displayOutput = output.trimEnd();
 		const showingFullOutput = expanded && renderContext?.isFullOutput === true;
 
 		// Build truncation warning lines (static, doesn't depend on width)
@@ -214,7 +219,10 @@ export const bashToolRenderer = {
 		const timeoutSeconds = renderContext?.timeout;
 		const timeoutLine =
 			typeof timeoutSeconds === "number"
-				? uiTheme.fg("dim", ui.wrapBrackets(`Timeout: ${timeoutSeconds}s`))
+				? uiTheme.fg(
+						"dim",
+						`${uiTheme.format.bracketLeft}Timeout: ${timeoutSeconds}s${uiTheme.format.bracketRight}`,
+					)
 				: undefined;
 		let warningLine: string | undefined;
 		if (truncation && !showingFullOutput) {
@@ -226,72 +234,57 @@ export const bashToolRenderer = {
 				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)`,
 				);
 			}
 			if (warnings.length > 0) {
-				warningLine = uiTheme.fg("warning", ui.wrapBrackets(warnings.join(". ")));
+				warningLine = uiTheme.fg("warning", wrapBrackets(warnings.join(". "), uiTheme));
 			}
 		}
 
-		if (!displayOutput) {
-			// No output - just show warning if any
-			const lines = [timeoutLine, warningLine].filter(Boolean) as string[];
-			return new Text(lines.join("\n"), 0, 0);
-		}
-
-		if (expanded) {
-			// Show all lines when expanded
-			const styledOutput = displayOutput
-				.split("\n")
-				.map((line) => uiTheme.fg("toolOutput", line))
-				.join("\n");
-			const lines = [styledOutput, timeoutLine, warningLine].filter(Boolean) as string[];
-			return new Text(lines.join("\n"), 0, 0);
-		}
-
-		// Collapsed: use width-aware caching component
-		const styledOutput = displayOutput
-			.split("\n")
-			.map((line) => uiTheme.fg("toolOutput", line))
-			.join("\n");
-		const textContent = `\n${styledOutput}`;
-
-		let cachedWidth: number | undefined;
-		let cachedLines: string[] | undefined;
-		let cachedSkipped: number | undefined;
-
 		return {
 			render: (width: number): string[] => {
-				if (cachedLines === undefined || cachedWidth !== width) {
-					const result = truncateToVisualLines(textContent, previewLines, width);
-					cachedLines = result.visualLines;
-					cachedSkipped = result.skippedCount;
-					cachedWidth = width;
-				}
 				const outputLines: string[] = [];
-				if (cachedSkipped && cachedSkipped > 0) {
-					outputLines.push("");
-					const skippedLine = uiTheme.fg(
-						"dim",
-						`${uiTheme.format.ellipsis} (${cachedSkipped} earlier lines, showing ${cachedLines.length} of ${cachedSkipped + cachedLines.length}) (ctrl+o to expand)`,
-					);
-					outputLines.push(truncateToWidth(skippedLine, width, uiTheme.fg("dim", uiTheme.format.ellipsis)));
-				}
-				outputLines.push(...cachedLines);
-				if (timeoutLine) {
-					outputLines.push(truncateToWidth(timeoutLine, width, uiTheme.fg("dim", uiTheme.format.ellipsis)));
+				const hasOutput = displayOutput.trim().length > 0;
+				if (hasOutput) {
+					if (expanded) {
+						outputLines.push(...displayOutput.split("\n").map((line) => uiTheme.fg("toolOutput", line)));
+					} else {
+						const styledOutput = displayOutput
+							.split("\n")
+							.map((line) => uiTheme.fg("toolOutput", line))
+							.join("\n");
+						const textContent = styledOutput;
+						const result = truncateToVisualLines(textContent, previewLines, width);
+						if (result.skippedCount > 0) {
+							outputLines.push(
+								uiTheme.fg(
+									"dim",
+									`${uiTheme.format.ellipsis} (${result.skippedCount} earlier lines, showing ${result.visualLines.length} of ${result.skippedCount + result.visualLines.length}) (ctrl+o to expand)`,
+								),
+							);
+						}
+						outputLines.push(...result.visualLines);
+					}
 				}
-				if (warningLine) {
-					outputLines.push(truncateToWidth(warningLine, width, uiTheme.fg("warning", uiTheme.format.ellipsis)));
-				}
-				return outputLines;
-			},
-			invalidate: () => {
-				cachedWidth = undefined;
-				cachedLines = undefined;
-				cachedSkipped = undefined;
+				if (timeoutLine) outputLines.push(timeoutLine);
+				if (warningLine) outputLines.push(warningLine);
+
+				return renderOutputBlock(
+					{
+						header,
+						state: isError ? "error" : "success",
+						sections: [
+							{ lines: cmdText ? [uiTheme.fg("dim", cmdText)] : [] },
+							{ label: uiTheme.fg("toolTitle", "Output"), lines: outputLines },
+						],
+						width,
+					},
+					uiTheme,
+				);
 			},
+			invalidate: () => {},
 		};
 	},
+	mergeCallAndResult: true,
 };

package/src/tools/calculator.ts

@@ -3,17 +3,16 @@ import { renderPromptTemplate } from "@oh-my-pi/pi-coding-agent/config/prompt-te
 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 calculatorDescription from "@oh-my-pi/pi-coding-agent/prompts/tools/calculator.md" with { type: "text" };
+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 { untilAborted } from "@oh-my-pi/pi-utils";
 import { Type } from "@sinclair/typebox";
-import type { ToolSession } from "./index";
+import type { ToolSession } from ".";
 import {
 	formatCount,
 	formatEmptyMessage,
-	formatExpandHint,
-	formatMeta,
-	formatMoreItems,
+	formatErrorMessage,
 	PREVIEW_LIMITS,
 	TRUNCATE_LENGTHS,
 	truncate,
@@ -453,16 +452,11 @@ export const calculatorToolRenderer = {
 	 * Format: "Calc <expression> (N calcs)"
 	 */
 	renderCall(args: CalculatorRenderArgs, uiTheme: Theme): Component {
-		const label = uiTheme.fg("toolTitle", uiTheme.bold("Calc"));
 		const count = args.calculations?.length ?? 0;
 		const firstExpression = args.calculations?.[0]?.expression;
-		let text = label;
-		if (firstExpression) {
-			text += ` ${uiTheme.fg("accent", truncate(firstExpression, TRUNCATE_LENGTHS.TITLE, "..."))}`;
-		}
-		const meta: string[] = [];
-		if (count > 0) meta.push(formatCount("calc", count));
-		text += formatMeta(meta, uiTheme);
+		const description = firstExpression ? truncate(firstExpression, TRUNCATE_LENGTHS.TITLE, "...") : undefined;
+		const meta = count > 0 ? [formatCount("calc", count)] : [];
+		const text = renderStatusLine({ icon: "pending", title: "Calc", description, meta }, uiTheme);
 		return new Text(text, 0, 0);
 	},
 
@@ -471,46 +465,54 @@ export const calculatorToolRenderer = {
 	 * Collapsed mode shows first N items with expand hint; expanded shows all.
 	 */
 	renderResult(
-		result: { content: Array<{ type: string; text?: string }>; details?: CalculatorToolDetails },
+		result: { content: Array<{ type: string; text?: string }>; details?: CalculatorToolDetails; isError?: boolean },
 		{ expanded }: RenderResultOptions,
 		uiTheme: Theme,
+		args?: CalculatorRenderArgs,
 	): Component {
 		const details = result.details;
 		const textContent = result.content?.find((c) => c.type === "text")?.text ?? "";
+		if (result.isError) {
+			const header = renderStatusLine({ icon: "error", title: "Calc" }, uiTheme);
+			return new Text([header, formatErrorMessage(textContent, uiTheme)].join("\n"), 0, 0);
+		}
 
 		// Prefer structured details; fall back to parsing text content
-		let outputs = details?.results?.map((entry) => entry.output) ?? [];
+		let outputs = details?.results?.map((entry) => `${entry.expression} = ${entry.output}`) ?? [];
 		if (outputs.length === 0 && textContent.trim()) {
-			outputs = textContent.split("\n").filter((line) => line.trim().length > 0);
+			const rawOutputs = textContent.split("\n").filter((line) => line.trim().length > 0);
+			const expressions = args?.calculations?.map((calc) => calc.expression) ?? [];
+			if (expressions.length === rawOutputs.length && expressions.length > 0) {
+				outputs = rawOutputs.map((output, index) => `${expressions[index]} = ${output}`);
+			} else {
+				outputs = rawOutputs;
+			}
 		}
 
 		if (outputs.length === 0) {
-			return new Text(formatEmptyMessage("No results", uiTheme), 0, 0);
-		}
-
-		// Limit visible items in collapsed mode
-		const maxItems = expanded ? outputs.length : Math.min(outputs.length, COLLAPSED_LIST_LIMIT);
-		const hasMore = outputs.length > maxItems;
-		const icon = uiTheme.styledSymbol("status.success", "success");
-		const summary = uiTheme.fg("dim", formatCount("result", outputs.length));
-		const expandHint = formatExpandHint(uiTheme, expanded, hasMore);
-		let text = `${icon} ${summary}${expandHint}`;
-
-		// Render each result as a tree branch
-		for (let i = 0; i < maxItems; i += 1) {
-			const isLast = i === maxItems - 1 && !hasMore;
-			const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
-			text += `\n ${uiTheme.fg("dim", branch)} ${uiTheme.fg("toolOutput", outputs[i])}`;
-		}
-
-		// Show overflow indicator for collapsed mode
-		if (hasMore) {
-			text += `\n ${uiTheme.fg("dim", uiTheme.tree.last)} ${uiTheme.fg(
-				"muted",
-				formatMoreItems(outputs.length - maxItems, "result", uiTheme),
-			)}`;
+			const header = renderStatusLine({ icon: "warning", title: "Calc" }, uiTheme);
+			return new Text([header, formatEmptyMessage("No results", uiTheme)].join("\n"), 0, 0);
 		}
 
-		return new Text(text, 0, 0);
+		const description = args?.calculations?.[0]?.expression
+			? truncate(args.calculations[0].expression, TRUNCATE_LENGTHS.TITLE, "...")
+			: undefined;
+		const header = renderStatusLine(
+			{ icon: "success", title: "Calc", description, meta: [formatCount("result", outputs.length)] },
+			uiTheme,
+		);
+		const lines = renderTreeList(
+			{
+				items: outputs,
+				expanded,
+				maxCollapsed: COLLAPSED_LIST_LIMIT,
+				itemType: "result",
+				renderItem: (output) => uiTheme.fg("toolOutput", output),
+			},
+			uiTheme,
+		);
+
+		return new Text([header, ...lines].join("\n"), 0, 0);
 	},
+	mergeCallAndResult: true,
 };

package/src/tools/complete.ts

@@ -10,7 +10,7 @@ import { subprocessToolRegistry } from "@oh-my-pi/pi-coding-agent/task/subproces
 import type { Static, TObject } from "@sinclair/typebox";
 import { Type } from "@sinclair/typebox";
 import Ajv, { type ErrorObject, type ValidateFunction } from "ajv";
-import type { ToolSession } from "./index";
+import type { ToolSession } from ".";
 import { jtdToJsonSchema } from "./jtd-to-json-schema";
 
 export interface CompleteDetails {

package/src/tools/fetch.ts

@@ -7,8 +7,9 @@ import { type Theme, theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import fetchDescription from "@oh-my-pi/pi-coding-agent/prompts/tools/fetch.md" with { type: "text" };
 import type { OutputMeta } from "@oh-my-pi/pi-coding-agent/tools/output-meta";
 import { ToolAbortError } from "@oh-my-pi/pi-coding-agent/tools/tool-errors";
+import { renderOutputBlock, renderStatusLine } from "@oh-my-pi/pi-coding-agent/tui";
 import { ensureTool } from "@oh-my-pi/pi-coding-agent/utils/tools-manager";
-import { specialHandlers } from "@oh-my-pi/pi-coding-agent/web/scrapers/index";
+import { specialHandlers } from "@oh-my-pi/pi-coding-agent/web/scrapers";
 import type { RenderResult } from "@oh-my-pi/pi-coding-agent/web/scrapers/types";
 import { finalizeOutput, loadPage, MAX_OUTPUT_CHARS } from "@oh-my-pi/pi-coding-agent/web/scrapers/types";
 import { convertWithMarkitdown, fetchBinary } from "@oh-my-pi/pi-coding-agent/web/scrapers/utils";
@@ -18,7 +19,7 @@ import { ptree } from "@oh-my-pi/pi-utils";
 import { type Static, Type } from "@sinclair/typebox";
 import { nanoid } from "nanoid";
 import { parse as parseHtml } from "node-html-parser";
-import type { ToolSession } from "./index";
+import type { ToolSession } from ".";
 import { applyListLimit } from "./list-limit";
 import { formatExpandHint } from "./render-utils";
 import { toolResult } from "./tool-result";
@@ -993,8 +994,11 @@ export function renderFetchCall(
 ): Component {
 	const domain = getDomain(args.url);
 	const path = truncate(args.url.replace(/^https?:\/\/[^/]+/, ""), 50, uiTheme.format.ellipsis);
-	const icon = uiTheme.styledSymbol("status.pending", "muted");
-	const text = `${icon} ${uiTheme.fg("toolTitle", "Fetch")} ${uiTheme.fg("accent", domain)}${uiTheme.fg("dim", path)}`;
+	const description = `${domain}${path ? ` ${path}` : ""}`.trim();
+	const meta: string[] = [];
+	if (args.raw) meta.push("raw");
+	if (args.timeout !== undefined) meta.push(`timeout:${args.timeout}s`);
+	const text = renderStatusLine({ icon: "pending", title: "Fetch", description, meta }, uiTheme);
 	return new Text(text, 0, 0);
 }
 
@@ -1012,20 +1016,22 @@ export function renderFetchResult(
 	}
 
 	const domain = getDomain(details.finalUrl);
+	const path = truncate(details.finalUrl.replace(/^https?:\/\/[^/]+/, ""), 50, uiTheme.format.ellipsis);
 	const hasRedirect = details.url !== details.finalUrl;
 	const hasNotes = details.notes.length > 0;
 	const truncation = details.meta?.truncation;
 	const truncated = Boolean(details.truncated || truncation);
-	const statusIcon = truncated
-		? uiTheme.styledSymbol("status.warning", "warning")
-		: uiTheme.styledSymbol("status.success", "success");
-	const expandHint = formatExpandHint(uiTheme, expanded);
-	const expandSuffix = expandHint ? ` ${expandHint}` : "";
-	let text = `${statusIcon} ${uiTheme.fg("accent", `(${domain})`)}${uiTheme.sep.dot}${uiTheme.fg("dim", details.method)}${expandSuffix}`;
-
-	// Get content text
+
+	const header = renderStatusLine(
+		{
+			icon: truncated ? "warning" : "success",
+			title: "Fetch",
+			description: `${domain}${path ? ` ${path}` : ""}`,
+		},
+		uiTheme,
+	);
+
 	const contentText = result.content[0]?.text ?? "";
-	// Extract just the content part (after the --- separator)
 	const contentBody = contentText.includes("---\n\n")
 		? contentText.split("---\n\n").slice(1).join("---\n\n")
 		: contentText;
@@ -1033,104 +1039,61 @@ export function renderFetchResult(
 	const charCount = contentBody.trim().length;
 	const contentLines = contentBody.split("\n").filter((l) => l.trim());
 
-	if (!expanded) {
-		// Collapsed view: metadata + preview
-		const metaLines: string[] = [
-			`${uiTheme.fg("muted", "Content-Type:")} ${details.contentType || "unknown"}`,
-			`${uiTheme.fg("muted", "Method:")} ${details.method}`,
-		];
-		if (hasRedirect) {
-			metaLines.push(`${uiTheme.fg("muted", "Final URL:")} ${uiTheme.fg("mdLinkUrl", details.finalUrl)}`);
-		}
-		if (truncated) {
-			metaLines.push(uiTheme.fg("warning", `${uiTheme.status.warning} Output truncated`));
-			if (truncation?.artifactId) {
-				metaLines.push(uiTheme.fg("warning", `Full output: artifact://${truncation.artifactId}`));
-			}
-		}
-		if (hasNotes) {
-			metaLines.push(`${uiTheme.fg("muted", "Notes:")} ${details.notes.join("; ")}`);
-		}
-
-		const previewLimit = 3;
-		const previewList = applyListLimit(contentLines, { headLimit: previewLimit });
-		const previewLines = previewList.items.map((line) => truncate(line.trim(), 100, uiTheme.format.ellipsis));
-		const detailLines: string[] = [...metaLines];
-
-		if (previewLines.length === 0) {
-			detailLines.push(uiTheme.fg("dim", "(no content)"));
-		} else {
-			for (const line of previewLines) {
-				detailLines.push(uiTheme.fg("dim", line));
-			}
-		}
-
-		const remaining = Math.max(0, contentLines.length - previewLines.length);
-		if (remaining > 0) {
-			detailLines.push(uiTheme.fg("muted", `${uiTheme.format.ellipsis} ${remaining} more lines`));
-		} else {
-			const lineLabel = `${lineCount} line${lineCount === 1 ? "" : "s"}`;
-			detailLines.push(uiTheme.fg("muted", `${lineLabel}${uiTheme.sep.dot}${charCount} chars`));
-		}
-
-		for (let i = 0; i < detailLines.length; i++) {
-			const isLast = i === detailLines.length - 1;
-			const branch = isLast ? uiTheme.tree.last : uiTheme.tree.vertical;
-			text += `\n ${uiTheme.fg("dim", branch)}  ${detailLines[i]}`;
-		}
-	} else {
-		// Expanded view: structured metadata + bounded content preview
-		const metaLines: string[] = [
-			`${uiTheme.fg("muted", "Content-Type:")} ${details.contentType || "unknown"}`,
-			`${uiTheme.fg("muted", "Method:")} ${details.method}`,
-		];
-		if (hasRedirect) {
-			metaLines.push(`${uiTheme.fg("muted", "Final URL:")} ${uiTheme.fg("mdLinkUrl", details.finalUrl)}`);
-		}
-		const lineLabel = `${lineCount} line${lineCount === 1 ? "" : "s"}`;
-		metaLines.push(`${uiTheme.fg("muted", "Lines:")} ${lineLabel}`);
-		metaLines.push(`${uiTheme.fg("muted", "Chars:")} ${charCount}`);
-		if (truncated) {
-			metaLines.push(uiTheme.fg("warning", `${uiTheme.status.warning} Output truncated`));
-			if (truncation?.artifactId) {
-				metaLines.push(uiTheme.fg("warning", `Full output: artifact://${truncation.artifactId}`));
-			}
-		}
-		if (hasNotes) {
-			metaLines.push(`${uiTheme.fg("muted", "Notes:")} ${details.notes.join("; ")}`);
-		}
-
-		text += `\n ${uiTheme.fg("dim", uiTheme.tree.branch)} ${uiTheme.fg("accent", "Metadata")}`;
-		for (let i = 0; i < metaLines.length; i++) {
-			const isLast = i === metaLines.length - 1;
-			const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
-			text += `\n ${uiTheme.fg("dim", uiTheme.tree.vertical)}  ${uiTheme.fg("dim", branch)} ${metaLines[i]}`;
-		}
-
-		text += `\n ${uiTheme.fg("dim", uiTheme.tree.last)} ${uiTheme.fg("accent", "Content Preview")}`;
-		const previewLimit = 12;
-		const previewList = applyListLimit(contentLines, { headLimit: previewLimit });
-		const previewLines = previewList.items.map((line) => truncate(line.trim(), 120, uiTheme.format.ellipsis));
-		const remaining = Math.max(0, contentLines.length - previewLines.length);
-		const contentPrefix = uiTheme.fg("dim", " ");
-
-		if (previewLines.length === 0) {
-			text += `\n ${contentPrefix}   ${uiTheme.fg("dim", "(no content)")}`;
-		} else {
-			for (const line of previewLines) {
-				text += `\n ${contentPrefix}   ${uiTheme.fg("dim", line)}`;
-			}
+	const metadataLines: string[] = [
+		`${uiTheme.fg("muted", "Content-Type:")} ${details.contentType || "unknown"}`,
+		`${uiTheme.fg("muted", "Method:")} ${details.method}`,
+	];
+	if (hasRedirect) {
+		metadataLines.push(`${uiTheme.fg("muted", "Final URL:")} ${uiTheme.fg("mdLinkUrl", details.finalUrl)}`);
+	}
+	const lineLabel = `${lineCount} line${lineCount === 1 ? "" : "s"}`;
+	metadataLines.push(`${uiTheme.fg("muted", "Lines:")} ${lineLabel}`);
+	metadataLines.push(`${uiTheme.fg("muted", "Chars:")} ${charCount}`);
+	if (truncated) {
+		metadataLines.push(uiTheme.fg("warning", `${uiTheme.status.warning} Output truncated`));
+		if (truncation?.artifactId) {
+			metadataLines.push(uiTheme.fg("warning", `Full output: artifact://${truncation.artifactId}`));
 		}
+	}
+	if (hasNotes) {
+		metadataLines.push(`${uiTheme.fg("muted", "Notes:")} ${details.notes.join("; ")}`);
+	}
 
-		if (remaining > 0) {
-			text += `\n ${contentPrefix}   ${uiTheme.fg("muted", `${uiTheme.format.ellipsis} ${remaining} more lines`)}`;
-		}
+	const previewLimit = expanded ? 12 : 3;
+	const previewList = applyListLimit(contentLines, { headLimit: previewLimit });
+	const previewLines = previewList.items.map((line) => truncate(line.trimEnd(), 120, uiTheme.format.ellipsis));
+	const remaining = Math.max(0, contentLines.length - previewLines.length);
+	const contentPreviewLines =
+		previewLines.length > 0
+			? previewLines.map((line) => uiTheme.fg("dim", line))
+			: [uiTheme.fg("dim", "(no content)")];
+	if (remaining > 0) {
+		const hint = formatExpandHint(uiTheme, expanded, true);
+		contentPreviewLines.push(
+			uiTheme.fg("muted", `${uiTheme.format.ellipsis} ${remaining} more lines${hint ? ` ${hint}` : ""}`),
+		);
 	}
 
-	return new Text(text, 0, 0);
+	return {
+		render: (width: number) =>
+			renderOutputBlock(
+				{
+					header,
+					state: truncated ? "warning" : "success",
+					sections: [
+						{ label: uiTheme.fg("toolTitle", "Metadata"), lines: metadataLines },
+						{ label: uiTheme.fg("toolTitle", "Content Preview"), lines: contentPreviewLines },
+					],
+					width,
+				},
+				uiTheme,
+			),
+		invalidate: () => {},
+	};
 }
 
 export const fetchToolRenderer = {
 	renderCall: renderFetchCall,
 	renderResult: renderFetchResult,
+	mergeCallAndResult: true,
 };