@quandev104/pi-style 0.1.1 → 0.1.2

package/extension-src/pi-style/features/messages/boxed-block.ts

@@ -5,7 +5,7 @@
 
 import type { Component } from "@earendil-works/pi-tui";
 import type { BoxTheme } from "../../shared/box.js";
-import { boxBorder, boxInnerWidth, boxInsetDivider, boxLine, boxLineWithRight, boxWidth } from "../../shared/box.js";
+import { boxBlankLine, boxBorder, boxInnerWidth, boxLabeledBorder, boxLine, boxWidth } from "../../shared/box.js";
 
 export type MessageBlockOptions = {
 	kind: string;
@@ -18,7 +18,7 @@ export type MessageBlockOptions = {
 };
 
 function formatMessageBlockTitle(theme: BoxTheme, kind: string, title?: string, icon = "➔"): string {
-	const rawTitle = title ? `${icon} ${kind} | ${title}` : `${icon} ${kind}`;
+	const rawTitle = title ? `${icon} ${kind} · ${title}` : `${icon} ${kind}`;
 	const coloredTitle = theme.fg("accent", rawTitle);
 	return typeof theme?.bold === "function" ? theme.bold(coloredTitle) : coloredTitle;
 }
@@ -26,13 +26,17 @@ function formatMessageBlockTitle(theme: BoxTheme, kind: string, title?: string,
 /**
  * Render a boxed message block.
  *
+ * The title is embedded in the rounded top border, the body sits between
+ * blank padding rows, and the expand hint (when present) is embedded at the
+ * right end of the bottom border — no inset dividers.
+ *
  * Returns only border/content lines with foreground styling. Background is
  * applied by the parent Box (all patched components extend Box with a
  * customMessageBg bgFn), so this helper must NOT apply background itself —
  * that would create a double-background conflict.
  */
 export function renderBoxedMessageBlock(theme: BoxTheme, options: MessageBlockOptions): Component {
-	const { kind, title, right, body, icon = "➔", hasDivider = true, cache: shouldCache = true } = options;
+	const { kind, title, right, body, icon = "➔", cache: shouldCache = true } = options;
 	let cache: { width: number; lines: string[] } | null = null;
 
 	return {
@@ -45,27 +49,19 @@ export function renderBoxedMessageBlock(theme: BoxTheme, options: MessageBlockOp
 			const renderedWidth = boxWidth(width);
 			const contentWidth = boxInnerWidth(renderedWidth);
 			const titleLine = formatMessageBlockTitle(theme, kind, title, icon);
+			const bodyLines = body(contentWidth);
 
-			const lines: string[] = [];
-			lines.push(boxBorder(theme, "┌", "┐", renderedWidth));
-
+			const lines: string[] = [
+				boxLabeledBorder(theme, "╭", "╮", titleLine, undefined, renderedWidth),
+				boxBlankLine(theme, renderedWidth),
+				...bodyLines.map((line) => boxLine(theme, line, renderedWidth)),
+			];
+			if (bodyLines.length > 0) lines.push(boxBlankLine(theme, renderedWidth));
 			if (right) {
-				const rightStyled = theme.fg("dim", right);
-				lines.push(boxLineWithRight(theme, titleLine, rightStyled, renderedWidth));
+				lines.push(boxLabeledBorder(theme, "╰", "╯", "", theme.fg("dim", right), renderedWidth));
 			} else {
-				lines.push(boxLine(theme, titleLine, renderedWidth));
-			}
-
-			const bodyLines = body(contentWidth);
-			const showDivider = hasDivider === "auto" ? bodyLines.length > 0 : hasDivider;
-			if (showDivider) {
-				lines.push(boxInsetDivider(theme, renderedWidth));
+				lines.push(boxBorder(theme, "╰", "╯", renderedWidth));
 			}
-			for (const line of bodyLines) {
-				lines.push(boxLine(theme, line, renderedWidth));
-			}
-
-			lines.push(boxBorder(theme, "└", "┘", renderedWidth));
 
 			if (shouldCache) cache = { width, lines };
 			return lines;

package/extension-src/pi-style/features/messages/index.ts

@@ -12,22 +12,66 @@ function extractOscEnvelope(line: string): OscParts | undefined {
 	return { start: OSC133_ZONE_START, body: line.slice(OSC133_ZONE_START.length, bodyEnd), end: line.slice(bodyEnd) };
 }
 
-function prefixAtFirstContent(line: string, prefix: string): string {
+const BG_RESET = "\x1b[49m";
+
+/** Leading zero-width OSC sequences (e.g. OSC133 markers) of a line. */
+function splitLeadingMarkers(line: string): { head: string; rest: string } {
 	let index = 0;
+	while (line.startsWith("\x1b]", index)) {
+		const bel = line.indexOf("\x07", index + 2);
+		const st = line.indexOf("\x1b\\", index + 2);
+		const end = bel === -1 ? st : st === -1 ? bel : Math.min(bel, st);
+		if (end === -1) break;
+		index = end + 1;
+	}
+	return { head: line.slice(0, index), rest: line.slice(index) };
+}
+
+/** Leading SGR escape sequence of a line ("" when none). */
+function leadingSgr(line: string): string {
+	if (!line.startsWith("\x1b[")) return "";
+	let index = 2;
 	while (index < line.length) {
-		if (line[index] === "\x1b" && line[index + 1] === "[") {
-			index += 2;
-			while (index < line.length && (line.charCodeAt(index) < 64 || line.charCodeAt(index) > 126)) index++;
-			if (index < line.length) index++;
-			continue;
-		}
-		if (/\s/u.test(line[index] ?? "")) {
-			index++;
-			continue;
-		}
-		break;
+		const code = line.charCodeAt(index);
+		if (code >= 64 && code <= 126) return line.slice(0, index + 1);
+		index++;
 	}
-	return `${line.slice(0, index)}${prefix}${line.slice(index)}`;
+	return "";
+}
+
+/** Whether an SGR sequence sets/resets the terminal background color. */
+function isBackgroundSgr(sequence: string): boolean {
+	if (!sequence.startsWith("\x1b[") || !sequence.endsWith("m")) return false;
+	for (const code of sequence.slice(2, -1).split(";")) {
+		const value = Number(code);
+		if (value === 48 || value === 49) return true;
+		if (value >= 40 && value <= 47) return true;
+		if (value >= 100 && value <= 107) return true;
+	}
+	return false;
+}
+
+/**
+ * Rebuild a native line so `lead` (prompt prefix / continuation indent) and the
+ * full target width are covered by the line's background.
+ *
+ * Native Box lines (user messages) are `bgAnsi + body + \x1b[49m`; prepending the
+ * prefix outside that wrap shifted the input row's background right by the
+ * prefix width while keeping the full container width, producing a staircase
+ * box (indented left, overflowing right). Rebuilding inside the wrap keeps the
+ * background flush across every row; plain (unwrapped) lines are padded to the
+ * target width instead so left/right edges stay aligned.
+ */
+function rebuildAtWidth(line: string, width: number, lead: string): string {
+	const { head, rest } = splitLeadingMarkers(line);
+	const bgAnsi = leadingSgr(rest);
+	if (bgAnsi && isBackgroundSgr(bgAnsi) && rest.endsWith(BG_RESET)) {
+		const body = rest.slice(bgAnsi.length, rest.length - BG_RESET.length);
+		const pad = " ".repeat(Math.max(0, width - visibleWidth(lead) - visibleWidth(body)));
+		return `${head}${bgAnsi}${lead}${body}${pad}${BG_RESET}`;
+	}
+	const padded = `${lead}${line}`;
+	return `${padded}${" ".repeat(Math.max(0, width - visibleWidth(padded)))}`;
 }
 
 function decorateMessageLine(
@@ -35,6 +79,7 @@ function decorateMessageLine(
 	index: number,
 	lastIndex: number,
 	contentIndex: number,
+	width: number,
 	options: {
 		firstEnvelope: OscParts | undefined;
 		firstHasStart: boolean;
@@ -44,14 +89,29 @@ function decorateMessageLine(
 ): string {
 	const { firstEnvelope, firstHasStart, multilineEnvelope, prefix } = options;
 	const prefixWidth = visibleWidth(prefix);
+	const lead = index === contentIndex ? prefix : index > contentIndex ? " ".repeat(prefixWidth) : "";
 	if (index === contentIndex && firstEnvelope)
-		return `${firstEnvelope.start}${prefixAtFirstContent(firstEnvelope.body, prefix)}${firstEnvelope.end}`;
+		return `${firstEnvelope.start}${rebuildAtWidth(firstEnvelope.body, width, prefix)}${firstEnvelope.end}`;
 	if (index === contentIndex && firstHasStart)
-		return `${OSC133_ZONE_START}${prefix}${line.slice(OSC133_ZONE_START.length)}`;
+		return `${OSC133_ZONE_START}${rebuildAtWidth(line.slice(OSC133_ZONE_START.length), width, prefix)}`;
 	if (index === lastIndex && multilineEnvelope && index !== contentIndex)
-		return `${OSC133_ZONE_END}${OSC133_ZONE_FINAL}${line.slice((OSC133_ZONE_END + OSC133_ZONE_FINAL).length)}`;
-	if (index === contentIndex) return `${prefix}${line}`;
-	return index > contentIndex ? `${" ".repeat(prefixWidth)}${line}` : line;
+		return `${OSC133_ZONE_END}${OSC133_ZONE_FINAL}${rebuildAtWidth(
+			line.slice((OSC133_ZONE_END + OSC133_ZONE_FINAL).length),
+			width,
+			lead,
+		)}`;
+	if (
+		index === contentIndex &&
+		index === lastIndex &&
+		multilineEnvelope &&
+		line.startsWith(OSC133_ZONE_END + OSC133_ZONE_FINAL)
+	)
+		return `${OSC133_ZONE_END}${OSC133_ZONE_FINAL}${rebuildAtWidth(
+			line.slice((OSC133_ZONE_END + OSC133_ZONE_FINAL).length),
+			width,
+			prefix,
+		)}`;
+	return rebuildAtWidth(line, width, lead);
 }
 
 function contentText(line: string): string {
@@ -88,23 +148,26 @@ function prefixNative(lines: unknown, width: number, prefix: string): string[] |
 	const first = nativeLines[0] ?? "";
 	const last = nativeLines.at(-1) ?? "";
 	const multilineEnvelope = nativeLines.length > 1 && last.startsWith(OSC133_ZONE_END + OSC133_ZONE_FINAL);
-	const firstContentIndex = nativeLines.findIndex((line, index) =>
-		index !== nativeLines.length - 1 || !multilineEnvelope ? hasContent(line) : false,
-	);
+	// The last line is a content-start candidate only when the envelope is
+	// single-line, or when no earlier line carries content. Assistant messages
+	// with a single content line render as a multiline envelope whose only body
+	// sits on the final line ([OSC133_A, OSC133_END+FINAL+body]); excluding it
+	// would drop the prefix for every short assistant reply.
+	const firstContentIndex = nativeLines.findIndex((line, index) => {
+		if (index !== nativeLines.length - 1 || !multilineEnvelope) return hasContent(line);
+		return !nativeLines.slice(0, index).some((earlier) => hasContent(earlier)) && hasContent(line);
+	});
 	if (firstContentIndex < 0) return nativeLines;
 	const firstEnvelope = firstContentIndex === 0 ? extractOscEnvelope(first) : undefined;
 	const firstHasStart = firstContentIndex === 0 && first.startsWith(OSC133_ZONE_START);
-	const decorated = nativeLines.map((line, index) => {
-		if (index === firstContentIndex)
-			return decorateMessageLine(line, index, nativeLines.length - 1, firstContentIndex, {
-				firstEnvelope,
-				firstHasStart,
-				multilineEnvelope,
-				prefix,
-			});
-		if (index > firstContentIndex && hasContent(line)) return `${" ".repeat(prefixWidth)}${line}`;
-		return line;
-	});
+	const decorated = nativeLines.map((line, index) =>
+		decorateMessageLine(line, index, nativeLines.length - 1, firstContentIndex, width, {
+			firstEnvelope,
+			firstHasStart,
+			multilineEnvelope,
+			prefix,
+		}),
+	);
 	if (!decorated.every((line) => visibleWidth(line) <= width)) return undefined;
 	if (!nativeLines.every((line) => visibleWidth(line) <= bodyWidth)) return undefined;
 	return decorated;

package/extension-src/pi-style/features/messages/special-blocks.ts

@@ -106,7 +106,7 @@ function patchCompaction(instance: MessageBlockInstance, _original: () => void,
 	const block = renderBoxedMessageBlock(theme, {
 		kind: "Compaction",
 		title: `${tokenStr} tokens`,
-		...(expanded ? {} : { right: `(${expandHint()})` }),
+		...(expanded ? {} : { right: expandHint() }),
 		body,
 		icon: "⊟",
 		hasDivider: expanded,
@@ -132,7 +132,7 @@ function patchSkill(instance: MessageBlockInstance, _original: () => void, theme
 	const block = renderBoxedMessageBlock(theme, {
 		kind: "Skill",
 		title: skillName,
-		...(expanded ? {} : { right: `(${expandHint()})` }),
+		...(expanded ? {} : { right: expandHint() }),
 		body,
 		icon: "⊟",
 		hasDivider: expanded,
@@ -156,7 +156,7 @@ function patchBranch(instance: MessageBlockInstance, _original: () => void, them
 
 	const block = renderBoxedMessageBlock(theme, {
 		kind: "Branch",
-		...(expanded ? {} : { right: `(${expandHint()})` }),
+		...(expanded ? {} : { right: expandHint() }),
 		body,
 		icon: "⊟",
 		hasDivider: expanded,

package/extension-src/pi-style/features/startup/index.ts

@@ -193,7 +193,7 @@ function renderSystemContextPanel(
 		"─".repeat(pathWidth),
 	)}${divider}${resolved.apply("dim", "─".repeat(metricWidth))}`;
 	const lines = [
-		renderPanelBorder(resolved, "┌", "┐", panelWidth),
+		renderPanelBorder(resolved, "╭", "╮", panelWidth),
 		renderPanelLine(resolved, titleLine, panelWidth),
 		renderPanelLine(resolved, header, panelWidth),
 		renderPanelLine(resolved, separator, panelWidth),
@@ -215,7 +215,7 @@ function renderSystemContextPanel(
 			),
 		);
 	}
-	lines.push(renderPanelBorder(resolved, "└", "┘", panelWidth));
+	lines.push(renderPanelBorder(resolved, "╰", "╯", panelWidth));
 	return lines;
 }
 
@@ -269,7 +269,7 @@ function renderToolsPanel(resolved: ResolvedTheme, tools: readonly StartupToolIt
 		"─".repeat(countWidth),
 	)}${divider}${resolved.apply("dim", "─".repeat(toolsWidth))}`;
 	const lines = [
-		renderPanelBorder(resolved, "┌", "┐", panelWidth),
+		renderPanelBorder(resolved, "╭", "╮", panelWidth),
 		renderPanelLine(resolved, titleLine, panelWidth),
 		renderPanelLine(resolved, header, panelWidth),
 		renderPanelLine(resolved, separator, panelWidth),
@@ -291,7 +291,7 @@ function renderToolsPanel(resolved: ResolvedTheme, tools: readonly StartupToolIt
 			),
 		);
 	}
-	lines.push(renderPanelBorder(resolved, "└", "┘", panelWidth));
+	lines.push(renderPanelBorder(resolved, "╰", "╯", panelWidth));
 	return lines;
 }
 

package/extension-src/pi-style/features/tools/boxed/bash.ts

@@ -18,7 +18,6 @@ import { safeTruncateToWidth, truncateAtCodePointBoundary } from "../../../share
 import { getStateElapsedMs, getToolsRenderConfig } from "./session-config.js";
 import { type BoxedToolContext, type BoxedToolDefinition, noteExecutionStart } from "./shared.js";
 
-const MAX_BASH_PREVIEW_LINES = 5;
 const MAX_LINE_CHARS = 2000;
 const ESC = "\x1b";
 const BASH_TOOL_NOTICE_PATTERN = /^\[Showing (?:last|lines)\b.*\. Full output: .+\]$/;
@@ -186,13 +185,17 @@ function renderBoxedBashResult(
 	inner: Component,
 	result: unknown,
 	context: BoxedToolContext,
+	expandHint?: string,
 ): Component {
 	const rawCommand = String(context?.args?.command ?? "...");
 	const referenceLines = rawCommand.split("\n").map((line, index) => `${index === 0 ? "$ " : "> "}${line}`);
 	return renderBoxedToolResult(theme, inner, {
 		widthKey: bashWidthKey(rawCommand, context?.args?.timeout),
 		referenceLines,
-		footerLines: [formatBoxedFooter(theme, result as never, [`⏹ ${formatTimeout(context)}`], getElapsed(context))],
+		footerLines: [
+			formatBoxedFooter(theme, result as never, [`timeout ${formatTimeout(context)}`], getElapsed(context)),
+		],
+		...(expandHint ? { expandHint } : {}),
 		isError: context.isError,
 		isPartial: Boolean(context.isPartial),
 	});
@@ -207,7 +210,6 @@ function createBashResultPreview(
 	text: string,
 	options: { expanded: boolean },
 	color: "toolOutput" | "error",
-	extraLinesBefore: number = 0,
 ): Component {
 	let cacheKey = "";
 	let cacheLines: string[] | null = null;
@@ -226,7 +228,7 @@ function createBashResultPreview(
 
 			if (!expanded) {
 				// Collapsed: only process the tail of the output
-				const needed = MAX_BASH_PREVIEW_LINES;
+				const needed = cfg.maxCollapsedLines;
 				let totalNewlines = 0;
 				let scanFrom = 0; // default: take full text if fewer than needed newlines
 				for (let i = text.length - 1; i >= 0; i--) {
@@ -262,18 +264,8 @@ function createBashResultPreview(
 						: formatToolOutputLine(theme, truncated, "text");
 				});
 
-				// Count remaining lines (lines before scanFrom)
-				const remaining = extraLinesBefore + (scanFrom > 0 ? countNewlines(text, 0, scanFrom) : 0);
-
-				if (remaining <= 0) {
-					cacheKey = cacheId;
-					cacheLines = truncatedShown;
-					return cacheLines;
-				}
-
-				const hint = safeTruncateToWidth(`... ${remaining} more lines, press Ctrl+o to expand`, bodyWidth, "…");
 				cacheKey = cacheId;
-				cacheLines = [...truncatedShown, "", theme.fg("muted", hint)];
+				cacheLines = truncatedShown;
 				return cacheLines;
 			}
 
@@ -323,7 +315,7 @@ export const bashTool: BoxedToolDefinition = {
 		const outputColor = context.isError ? "error" : "toolOutput";
 
 		if (!options.expanded) {
-			const scanLines = MAX_BASH_PREVIEW_LINES + 10;
+			const scanLines = getToolsRenderConfig().maxCollapsedLines + 10;
 			let nlCount = 0;
 			let tailStart = 0;
 			for (let i = raw.length - 1; i >= 0; i--) {
@@ -337,11 +329,11 @@ export const bashTool: BoxedToolDefinition = {
 			}
 			const tail = stripBashToolNoticeLines(stripAnsi(raw.slice(tailStart)));
 			const totalLinesBefore = tailStart > 0 ? countNewlines(raw, 0, tailStart) : 0;
-			const inner = createBashResultPreview(theme, tail, options, outputColor, totalLinesBefore);
-			return renderBoxedBashResult(theme, inner, result, context);
+			const inner = createBashResultPreview(theme, tail, options, outputColor);
+			return renderBoxedBashResult(theme, inner, result, context, totalLinesBefore > 0 ? "Ctrl+O for more" : undefined);
 		}
 		const output = stripBashToolNoticeLines(stripAnsi(raw));
-		const inner = createBashResultPreview(theme, output, options, outputColor, 0);
+		const inner = createBashResultPreview(theme, output, options, outputColor);
 		return renderBoxedBashResult(theme, inner, result, context);
 	},
 };

package/extension-src/pi-style/features/tools/boxed/edit.ts

@@ -2,16 +2,15 @@
 // (renderCall/renderResult only; no edit-core re-registration).
 
 import { getLanguageFromPath } from "@earendil-works/pi-coding-agent";
-import { Text } from "@earendil-works/pi-tui";
 import { stripAnsi } from "../../../shared/ansi.js";
-import { getTextOutput, renderBoxedToolCall, renderBoxedToolResult } from "../../../shared/box.js";
+import { type BoxTheme, getTextOutput, renderBoxedToolCall, renderBoxedToolResult } from "../../../shared/box.js";
+import { formatElapsedMs, getElapsedMs } from "../../../shared/elapsed.js";
 import {
+	AdaptiveDiffComponent,
 	buildSplitRows,
 	countDiffStats,
 	extractEditedPath,
 	firstText,
-	renderDiffMeter,
-	SplitDiffComponent,
 } from "../../../shared/split-diff.js";
 import {
 	type BoxedToolContext,
@@ -19,6 +18,7 @@ import {
 	displayPath,
 	noteExecutionStart,
 	resultFooterLines,
+	stateElapsedMs,
 } from "./shared.js";
 
 const MAX_HIGHLIGHT_DIFF_CHARS = 12000;
@@ -26,11 +26,35 @@ const MAX_HIGHLIGHT_DIFF_ROWS = 120;
 
 type EditResultDetails = { diff?: string; path?: string } | undefined;
 
+/** `Diff · +3 -0` divider label. */
+function diffDividerLabel(theme: BoxTheme, stats: { additions: number; removals: number }): string {
+	const plus = stats.additions > 0 ? theme.fg("toolDiffAdded", `+${stats.additions}`) : theme.fg("dim", "+0");
+	const minus = stats.removals > 0 ? theme.fg("toolDiffRemoved", `-${stats.removals}`) : theme.fg("dim", "-0");
+	return `Diff · ${plus} ${minus}`;
+}
+
+/** Edit footer: `1 file · +3 -0`, prefixed with elapsed time when known. */
+function editDiffFooter(
+	theme: BoxTheme,
+	result: { content?: readonly unknown[]; details?: unknown },
+	context: BoxedToolContext,
+	stats: { additions: number; removals: number },
+): string {
+	const elapsedMs = getElapsedMs(result) ?? stateElapsedMs(context);
+	const parts: string[] = [];
+	if (elapsedMs !== undefined) parts.push(theme.fg("text", formatElapsedMs(elapsedMs)));
+	const plus = stats.additions > 0 ? theme.fg("toolDiffAdded", `+${stats.additions}`) : theme.fg("dim", "+0");
+	const minus = stats.removals > 0 ? theme.fg("toolDiffRemoved", `-${stats.removals}`) : theme.fg("dim", "-0");
+	parts.push(theme.fg("dim", "1 file"), `${plus} ${minus}`);
+	return parts.join(theme.fg("dim", " · "));
+}
+
 export const editTool: BoxedToolDefinition = {
 	call(args, theme, context) {
 		noteExecutionStart(context);
 		const detail = displayPath(String(args?.path ?? args?.file_path ?? ""), context);
-		return renderBoxedToolCall(theme, "Edit", [`${theme.fg("dim", "Path: ")}${detail}`], {
+		return renderBoxedToolCall(theme, "Edit", [], {
+			headerDetail: detail,
 			isError: Boolean(context.isError),
 			isPartial: Boolean(context.isPartial),
 			isPending: Boolean(context.isPartial),
@@ -71,40 +95,32 @@ export const editTool: BoxedToolDefinition = {
 		const sourcePath = details?.path ?? (argPath || extractEditedPath(message));
 		const language = sourcePath ? getLanguageFromPath(sourcePath) : undefined;
 
-		// Build split-diff rows
+		// Build diff rows + adaptive layout
 		const rows = buildSplitRows(diff);
 		const expanded = options.expanded;
 		const shouldHighlight =
 			Boolean(language) && diff.length <= MAX_HIGHLIGHT_DIFF_CHARS && rows.length <= MAX_HIGHLIGHT_DIFF_ROWS;
+		const stats = countDiffStats(diff);
 
-		// Build summary header with diff stats and meter
-		const { additions, removals } = countDiffStats(diff);
-		const meter = renderDiffMeter(theme, additions, removals);
-		const summary =
-			`${theme.fg("dim", "↳")} ${theme.fg("muted", "diff")}` +
-			` ${theme.fg("toolDiffAdded", `+${additions}`)}` +
-			` ${theme.fg("toolDiffRemoved", `-${removals}`)}` +
-			` ${theme.fg("muted", "split")}` +
-			(meter ? ` ${meter}` : "");
-
-		// Render split-diff with syntax colors for small outputs.
+		// Render adaptive diff (unified/split per width) with syntax colors for small outputs.
 		const maxRows = expanded ? 160 : 36;
-		const split = new SplitDiffComponent(theme, rows, maxRows, shouldHighlight ? language : undefined);
+		const diffView = new AdaptiveDiffComponent(theme, rows, maxRows, shouldHighlight ? language : undefined);
+		const expandHint = !expanded && diffView.hasCollapsed() ? "Ctrl+O more" : undefined;
 
 		return renderBoxedToolResult(
 			theme,
 			{
 				render(width: number): string[] {
-					const safeWidth = Math.max(20, width);
-					const headerLines = new Text(summary, 0, 0).render(safeWidth);
-					return [...headerLines, ...split.render(safeWidth)];
+					return diffView.render(width);
 				},
 				invalidate(): void {
-					split.invalidate();
+					diffView.invalidate();
 				},
 			},
 			{
-				footerLines: resultFooterLines(theme, result, context),
+				dividerLabel: diffDividerLabel(theme, stats),
+				...(expandHint ? { dividerRightLabel: expandHint } : {}),
+				footerLines: [editDiffFooter(theme, result, context, stats)],
 			},
 		);
 	},

package/extension-src/pi-style/features/tools/boxed/fallback.ts

@@ -6,11 +6,12 @@ import type { BoxTheme, MetricResultLike } from "../../../shared/box.js";
 import {
 	formatBoxedFooter,
 	formatToolName,
+	formatToolOutputLine,
 	formatToolParamLines,
 	getTextOutput,
 	renderBoxedToolCall,
 	renderBoxedToolResult,
-	renderLines,
+	selectRenderLines,
 } from "../../../shared/box.js";
 import { getStateElapsedMs, getToolsRenderConfig } from "./session-config.js";
 import { type BoxedToolContext, noteExecutionStart } from "./shared.js";
@@ -43,20 +44,21 @@ export function renderFallbackResult(
 	const maxLines = expanded ? getToolsRenderConfig().maxExpandedLines : MAX_FALLBACK_PREVIEW_LINES;
 	const output = getTextOutput(result);
 	const elapsedMs = getStateElapsedMs(context.state);
+	const { lines, omitted } = selectRenderLines(output, maxLines);
 
 	return renderBoxedToolResult(
 		theme,
-		(contentWidth) => {
-			const body = renderLines(theme, output, options, {
-				maxLines,
-				color: isError ? "error" : "toolOutput",
-				width: contentWidth,
-			});
-			return body ? body.split("\n") : [];
+		() => {
+			const body = lines.map((line) => formatToolOutputLine(theme, line, isError ? "error" : "toolOutput"));
+			if (expanded && omitted > 0) {
+				body.push(theme.fg("muted", `… ${omitted} more lines omitted by render budget`));
+			}
+			return body;
 		},
 		{
 			footerLines: [formatBoxedFooter(theme, result, [], elapsedMs)],
 			renderLineBudget: maxLines,
+			...(expanded || omitted <= 0 ? {} : { expandHint: "Ctrl+O for more" }),
 			isError,
 			isPartial: Boolean(options.isPartial),
 		},