pi-open-tui 0.3.14 → 0.4.1

package/extensions/open-tui/tool-preview.ts

@@ -0,0 +1,167 @@
+import { getLanguageFromPath, highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
+import { backgroundAnsi, rgbColor, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { diffWordsWithSpace } from "diff";
+import { stripAnsi } from "./utils.ts";
+
+const MAX_PREVIEW_LINES = 16;
+const MAX_HIGHLIGHT_CHARS = 16_384;
+const MAX_WORD_CHARS = 4_096;
+const SGR = /\x1b\[([\d;]*)m/g;
+
+type Span = { start: number; end: number };
+type PreviewLine = {
+	kind: " " | "+" | "-" | "gap";
+	number: string;
+	text: string;
+	highlighted?: string;
+	spans?: Span[];
+};
+
+/** Code keeps its indentation and blank lines; raw terminal controls never reach highlighting. */
+export function codeLines(source: string): string[] {
+	if (!source) return [];
+	const clean = stripAnsi(source).replace(/\r\n?/g, "\n")
+		.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x9F\uFFF9-\uFFFB]/g, "")
+		.replace(/\t/g, "   ");
+	return clean.replace(/\n$/, "").split("\n");
+}
+
+function parseDiff(source: string): PreviewLine[] {
+	const rows: PreviewLine[] = [];
+	for (const line of codeLines(source)) {
+		if (/^ +\.\.\.$/.test(line)) {
+			rows.push({ kind: "gap", number: "", text: "…" });
+			continue;
+		}
+		const match = /^([ +\-]) *(\d+) (.*)$/.exec(line);
+		// A malformed result gets no guessed preview.
+		if (!match) return [];
+		rows.push({ kind: match[1] as PreviewLine["kind"], number: match[2]!, text: match[3]! });
+	}
+	return rows.some((line) => line.kind === "+" || line.kind === "-") ? rows : [];
+}
+
+function changedWords(oldLine: PreviewLine, newLine: PreviewLine): void {
+	if (Math.max(oldLine.text.length, newLine.text.length) > MAX_WORD_CHARS) return;
+	const changes = diffWordsWithSpace(oldLine.text, newLine.text, { timeout: 5, maxEditLength: 256 });
+	if (!changes) return;
+	const shared = changes.filter((part) => !part.added && !part.removed)
+		.reduce((count, part) => count + part.value.replace(/\s/g, "").length, 0);
+	if (shared < 0.3 * Math.max(oldLine.text.trim().length, newLine.text.trim().length) || shared === 0) return;
+	let oldOffset = 0;
+	let newOffset = 0;
+	oldLine.spans = [];
+	newLine.spans = [];
+	for (const part of changes) {
+		if (part.removed) oldLine.spans.push({ start: oldOffset, end: oldOffset + part.value.length });
+		if (part.added) newLine.spans.push({ start: newOffset, end: newOffset + part.value.length });
+		if (!part.added) oldOffset += part.value.length;
+		if (!part.removed) newOffset += part.value.length;
+	}
+}
+
+function pairChanges(rows: PreviewLine[], shown: number): void {
+	for (let i = 0; i < shown; i++) {
+		if (rows[i]!.kind !== "-") continue;
+		const start = i;
+		while (rows[i]?.kind === "-") i++;
+		const added = i;
+		while (rows[i]?.kind === "+") i++;
+		for (let n = 0; n < Math.min(added - start, i - added); n++) {
+			if (start + n >= shown && added + n >= shown) break;
+			changedWords(rows[start + n]!, rows[added + n]!);
+		}
+		i--;
+	}
+}
+
+function highlight(rows: PreviewLine[], path: string, theme: Theme): void {
+	const language = getLanguageFromPath(path);
+	for (let start = 0; start < rows.length;) {
+		let end = start;
+		while (end < rows.length && rows[end]!.kind !== "gap") end++;
+		const segment = rows.slice(start, end);
+		// Highlight the two file versions independently, never as one mixed diff document.
+		for (const side of ["old", "new"] as const) {
+			if (side === "old" && !segment.some((line) => line.kind === "-")) continue;
+			const selected = segment.filter((line) => line.kind !== (side === "old" ? "+" : "-"));
+			const source = selected.map((line) => line.text).join("\n");
+			// shortcut: oversized snippets use plain foreground; raise the budget only with bounded highlighting.
+			const colored = language && source.length <= MAX_HIGHLIGHT_CHARS ? highlightCode(source, language) : undefined;
+			const unsupported = colored?.every((line, index) => line === theme.fg("mdCodeBlock", selected[index]?.text ?? ""));
+			selected.forEach((line, index) => {
+				if (side === "new" || line.kind === "-") line.highlighted = !unsupported && colored?.[index] !== undefined
+					? colored[index]!
+					: theme.fg("toolOutput", line.text);
+			});
+		}
+		start = end + 1;
+	}
+}
+
+/** Insert word bands by UTF-16 source offsets, leaving syntax ANSI outside the offset count. */
+function withBands(code: string, spans: Span[], base: string, word: string): string {
+	if (spans.length === 0) return base + code.replace(SGR, (sgr, values: string) =>
+		values === "" || values.split(";").some((value) => value === "0" || value === "49") ? sgr + base : sgr);
+	let output = base;
+	let offset = 0;
+	let spanIndex = 0;
+	let active = base;
+	let from = 0;
+	const append = (text: string) => {
+		for (const char of text) {
+			while (spans[spanIndex] && spans[spanIndex]!.end <= offset) spanIndex++;
+			const span = spans[spanIndex];
+			const next = span && span.start < offset + char.length && span.end > offset ? word : base;
+			if (next !== active) output += next;
+			active = next;
+			output += char;
+			offset += char.length;
+		}
+	};
+	for (const match of code.matchAll(SGR)) {
+		append(code.slice(from, match.index));
+		output += match[0];
+		// Syntax resets must restore the current band, including a word band.
+		if (match[1] === "" || match[1]!.split(";").some((value) => value === "0" || value === "49")) output += active;
+		from = match.index + match[0].length;
+	}
+	append(code.slice(from));
+	return output;
+}
+
+export function prepareToolPreview(kind: "edit" | "write", source: string, path: string, theme: Theme): (width: number, indent: string) => string[] {
+	const rows: PreviewLine[] = kind === "edit" ? parseDiff(source) : codeLines(source)
+		.map((text, index) => ({ kind: " ", number: String(index + 1), text }));
+	const shown = Math.min(rows.length, MAX_PREVIEW_LINES);
+	if (kind === "edit") pairChanges(rows, shown);
+	const preview = rows.slice(0, shown);
+	highlight(preview, path, theme);
+	const digits = preview.reduce((max, line) => Math.max(max, line.number.length), 1);
+	const palette = theme.appearance === "light"
+		? { "+": [[229, 245, 232], [174, 226, 185]], "-": [[255, 230, 230], [255, 188, 188]] }
+		: { "+": [[26, 55, 40], [32, 96, 59]], "-": [[70, 30, 32], [124, 42, 48]] };
+	const prepared = preview.map((line) => {
+		const marker = kind === "edit" ? (line.kind === "gap" ? " " : line.kind) : "";
+		const prefix = `${marker}${line.number.padStart(digits)} `;
+		const code = theme.fg("dim", prefix) + (line.highlighted ?? theme.fg("dim", line.text));
+		if (line.kind !== "+" && line.kind !== "-") return { code };
+		const [normal, strong] = palette[line.kind].map(([r, g, b]) => backgroundAnsi(rgbColor(r!, g!, b!), theme.getColorMode()));
+		const spans = (line.spans ?? []).map(({ start, end }) => ({ start: start + prefix.length, end: end + prefix.length }));
+		return { code: withBands(code, spans, normal!, strong!), band: normal };
+	});
+	const hidden = rows.length - shown;
+	return (width, indent) => {
+		const pad = truncateToWidth(indent, Math.max(0, width), "");
+		const available = Math.max(0, width - visibleWidth(pad));
+		const result = prepared.map(({ code, band }) => {
+			const columns = Math.max(0, available - (band ? 2 : 0));
+			const clipped = truncateToWidth(code, columns, band ? `${band}…` : "…");
+			return pad + (band && columns > 0
+				? clipped + band + " ".repeat(Math.max(0, columns - visibleWidth(clipped))) + "\x1b[49m"
+				: clipped);
+		});
+		if (hidden > 0) result.push(pad + theme.fg("dim", truncateToWidth(`… +${hidden} lines (ctrl+o to expand)`, available, "…")));
+		return result;
+	};
+}

package/extensions/open-tui/tool-view.ts

@@ -0,0 +1,418 @@
+import { homedir } from "node:os";
+import { isAbsolute, relative, sep } from "node:path";
+import type { ExtensionAPI, Theme, ThemeColor, ToolRenderers } from "@earendil-works/pi-coding-agent";
+import { Box, type Component, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { ToolViewMode } from "./config.ts";
+import type { IconGlyphs } from "./icons.ts";
+import { codeLines, prepareToolPreview } from "./tool-preview.ts";
+import { sanitizeStatus, stripAnsi } from "./utils.ts";
+
+type RenderCall = NonNullable<ToolRenderers["renderCall"]>;
+type RenderResult = NonNullable<ToolRenderers["renderResult"]>;
+type RenderContext = Parameters<RenderCall>[2];
+type ToolResult = Parameters<RenderResult>[0];
+type Args = Record<string, unknown>;
+
+const TOOL_LABELS: Record<string, string> = {
+	read: "Read",
+	bash: "Bash",
+	powershell: "PowerShell",
+	edit: "Edit",
+	write: "Write",
+	grep: "Grep",
+	find: "Find",
+	ls: "LS",
+};
+const LIVE_TAIL_LINES = 3;
+
+/** Per-row slots: Pi's native renderers keep their own state and components here. */
+interface RowState {
+	nativeState: Record<string, unknown>;
+	nativeCall?: Component;
+	nativeResult?: Component;
+	callCard?: Box;
+	callCardBottom?: Spacer;
+	resultCard?: Box;
+	startedAt?: number;
+	pulse?: ReturnType<typeof setInterval>;
+	pulseBright?: boolean;
+	preview?: {
+		source: string;
+		path: string;
+		colors: Theme["colors"];
+		render: ReturnType<typeof prepareToolPreview>;
+	};
+}
+
+const str = (value: unknown): string => (typeof value === "string" ? value : "");
+
+function plural(count: number, one: string, many = `${one}s`): string {
+	return `${count} ${count === 1 ? one : many}`;
+}
+
+/**
+ * Streaming shell output arrives raw: drop escape sequences and control characters as Pi does,
+ * and keep only the text after a lone `\r` so progress bars show their latest frame.
+ */
+function cleanOutput(text: string): string {
+	return stripAnsi(text)
+		.replace(/\r\n/g, "\n")
+		.split("\n")
+		.map((line) => {
+			const frames = line.replace(/\r+$/, "");
+			return frames.slice(frames.lastIndexOf("\r") + 1);
+		})
+		.join("\n")
+		.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\uFFF9-\uFFFB]/g, "");
+}
+
+export function textOutput(result: ToolResult): string {
+	return cleanOutput(result.content.map((block) => (block.type === "text" ? block.text : "")).join("\n"));
+}
+
+const NOTICE_SIZE = String.raw`\d+(?:\.\d+)?(?:B|KB|MB)`;
+const BYTE_LIMIT_NOTICE = `${NOTICE_SIZE} limit reached`;
+const GREP_LINES_NOTICE = String.raw`Some lines truncated to \d+ chars\. Use read tool to see full lines`;
+const SHOWN_LINES_NOTICE = String.raw`Showing lines \d+-\d+ of \d+(?: \(${NOTICE_SIZE} limit\))?`;
+// Pi 1.2–1.4 appends these tool-specific notices, not arbitrary bracketed output.
+const TOOL_NOTICES: Record<string, RegExp> = {
+	read: new RegExp(String.raw`^(?:${SHOWN_LINES_NOTICE}\. Use offset=\d+ to continue\.|\d+ more lines in file\. Use offset=\d+ to continue\.)$`),
+	bash: new RegExp(String.raw`^(?:${SHOWN_LINES_NOTICE}|Showing last ${NOTICE_SIZE} of line \d+ \(line is ${NOTICE_SIZE}\))\. Full output: [^\n]+$`),
+	grep: new RegExp(String.raw`^(?:\d+ matches limit reached\. Use limit=\d+ for more, or refine pattern(?:\. ${BYTE_LIMIT_NOTICE})?(?:\. ${GREP_LINES_NOTICE})?|${BYTE_LIMIT_NOTICE}(?:\. ${GREP_LINES_NOTICE})?|${GREP_LINES_NOTICE})$`),
+	find: new RegExp(String.raw`^(?:\d+ results limit reached(?:\. Use limit=\d+ for more, or refine pattern)?(?:\. ${BYTE_LIMIT_NOTICE})?|${BYTE_LIMIT_NOTICE})$`),
+	ls: new RegExp(String.raw`^(?:\d+ entries limit reached\. Use limit=\d+ for more(?:\. ${BYTE_LIMIT_NOTICE})?|${BYTE_LIMIT_NOTICE})$`),
+};
+
+/** Drop only a recognized notice for this tool, preserving bracketed content and errors. */
+export function stripNotice(toolName: string, text: string): string {
+	const notice = /\n\n\[([^\n]+)\]\s*$/.exec(text);
+	if (notice && TOOL_NOTICES[toolName === "powershell" ? "bash" : toolName]?.test(notice[1]!)) {
+		text = text.slice(0, notice.index);
+	}
+	return text.replace(/\n+$/, "");
+}
+
+function countLines(text: string): number {
+	return text ? text.split("\n").length : 0;
+}
+
+export function diffStats(diff: string): { added: number; removed: number } {
+	let added = 0;
+	let removed = 0;
+	for (const line of diff.split("\n")) {
+		if (line.startsWith("+")) added++;
+		else if (line.startsWith("-")) removed++;
+	}
+	return { added, removed };
+}
+
+/** First command line, with a `… (+N lines)` hint for multi-line commands. */
+export function firstLine(text: string): string {
+	const lines = text.replace(/\r\n?/g, "\n").trim().split("\n");
+	const head = lines[0] ?? "";
+	return lines.length > 1 ? `${head} … (+${lines.length - 1} lines)` : head;
+}
+
+export function tailLines(text: string, count: number): string[] {
+	const lines = cleanOutput(text).split("\n").filter((line) => line.trim() !== "");
+	return lines.slice(-count);
+}
+
+/** `rel` when `path` is `base` or inside it; undefined for siblings such as `/home/sam-old`. */
+function inside(base: string, path: string): string | undefined {
+	const rel = relative(base, path);
+	return rel !== ".." && !rel.startsWith(`..${sep}`) && !isAbsolute(rel) ? rel.split(sep).join("/") : undefined;
+}
+
+export function displayPath(path: string, cwd: string, home = homedir()): string {
+	if (!path || !isAbsolute(path)) return path;
+	const inCwd = inside(cwd, path);
+	if (inCwd) return inCwd;
+	const inHome = inside(home, path);
+	return inHome === undefined ? path : inHome ? `~/${inHome}` : "~";
+}
+
+function lineRange(offset: unknown, limit: unknown): string {
+	if (typeof offset !== "number" && typeof limit !== "number") return "";
+	const start = typeof offset === "number" ? offset : 1;
+	return typeof limit === "number" ? `:${start}-${start + limit - 1}` : `:${start}`;
+}
+
+/** The single key argument shown inside `Tool(...)`. */
+export function callDetail(toolName: string, args: Args, cwd: string): string {
+	const path = displayPath(str(args.file_path ?? args.path), cwd);
+	switch (toolName) {
+		case "read":
+			return path + lineRange(args.offset, args.limit);
+		case "edit":
+		case "write":
+			return path;
+		case "bash":
+		case "powershell":
+			return firstLine(str(args.command));
+		case "grep": {
+			const pattern = str(args.pattern);
+			return pattern ? `/${pattern}/${path ? ` in ${path}` : ""}` : path;
+		}
+		case "find": {
+			const pattern = str(args.pattern);
+			return pattern && path ? `${pattern} in ${path}` : pattern || path;
+		}
+		case "ls":
+			return path || ".";
+		default:
+			return "";
+	}
+}
+
+function details(result: ToolResult): Record<string, unknown> {
+	const value: unknown = result.details;
+	return typeof value === "object" && value !== null ? (value as Record<string, unknown>) : {};
+}
+
+function truncation(result: ToolResult): { truncated: boolean; totalLines?: number } {
+	const value = details(result).truncation;
+	if (typeof value !== "object" || value === null) return { truncated: false };
+	const { truncated, totalLines } = value as { truncated?: unknown; totalLines?: unknown };
+	return { truncated: truncated === true, totalLines: typeof totalLines === "number" ? totalLines : undefined };
+}
+
+/** Keeps the hint that a result is incomplete, which stripNotice drops from the text. */
+function incomplete(result: ToolResult): string {
+	const info = details(result);
+	const limit = ["matchLimitReached", "resultLimitReached", "entryLimitReached"].some((key) => info[key] !== undefined);
+	return (limit ? " · limit reached" : "")
+		+ (truncation(result).truncated || info.linesTruncated === true ? " · truncated" : "");
+}
+
+/** Line count of shell output plus any incomplete-result hint. */
+function shellLines(output: string, result: ToolResult): string {
+	const text = output.trim();
+	const lines = text === "(no output)" ? 0 : truncation(result).totalLines ?? countLines(text);
+	return (lines === 0 ? "no output" : plural(lines, "line")) + incomplete(result);
+}
+
+/** One-line result summary for a finished, successful call. */
+export function summarizeResult(toolName: string, result: ToolResult, args: Args): string {
+	const raw = textOutput(result);
+	const text = stripNotice(toolName, raw);
+	switch (toolName) {
+		case "read": {
+			if (result.content.some((block) => block.type === "image")) return "image";
+			// An explicit `limit` that stops early adds this notice without setting details.truncation.
+			const more = /\n\n\[\d+ more lines in file\. Use offset=\d+ to continue\.\]\s*$/.test(raw) ? " · more" : "";
+			return plural(countLines(text), "line") + incomplete(result) + more;
+		}
+		case "bash":
+		case "powershell":
+			return `Done · ${shellLines(text, result)}`;
+		case "edit": {
+			const diff = details(result).diff;
+			if (typeof diff !== "string") return "Edited";
+			const { added, removed } = diffStats(diff);
+			return `+${added} −${removed}`;
+		}
+		case "write":
+			return `${plural(codeLines(str(args.content)).length, "line")} written`;
+		case "grep": {
+			if (text === "No matches found") return "No matches";
+			const files = new Set<string>();
+			let matches = 0;
+			for (const line of text.split("\n")) {
+				const match = /^(.+?):\d+: /.exec(line);
+				if (!match) continue;
+				matches++;
+				files.add(match[1]!);
+			}
+			return `${plural(matches, "match", "matches")} in ${plural(files.size, "file")}${incomplete(result)}`;
+		}
+		case "find":
+			return text === "No files found matching pattern" ? "No files" : plural(countLines(text), "file") + incomplete(result);
+		case "ls":
+			return text === "(empty directory)" ? "Empty" : plural(countLines(text), "entry", "entries") + incomplete(result);
+		default:
+			return "";
+	}
+}
+
+/**
+ * One-line summary for a failed call: the shell's closing status plus its last output line,
+ * otherwise the error's first line.
+ */
+export function summarizeError(toolName: string, result: ToolResult, duration = ""): string {
+	const text = textOutput(result).trim();
+	// Pi ends failed shell output with "Command exited with code N", "Command aborted", etc.
+	const status = toolName === "bash" || toolName === "powershell" ? /(?:^|\n\n)Command ([^\n]+)$/.exec(text) : null;
+	if (status) {
+		const reason = status[1]!;
+		const output = stripNotice(toolName, text.slice(0, status.index));
+		// The last output line usually names the failure; it goes last so narrow rows cut it first.
+		const last = tailLines(output, 1)[0]?.trim();
+		const tail = last && last !== "(no output)" ? ` · ${last}` : "";
+		return `${reason[0]!.toUpperCase()}${reason.slice(1)} · ${shellLines(output, result)}${duration}${tail}`;
+	}
+	return text.split("\n").find((line) => line.trim())?.trim() ?? "Failed";
+}
+
+function formatElapsed(ms: number): string {
+	return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
+/** Lines truncated to the render width; rebuilt on every render call. */
+function lines(build: (width: number) => string[]): Component {
+	return {
+		render: (width) => build(width).map((line) => truncateToWidth(line, Math.max(0, width), "…")),
+		invalidate() {},
+	};
+}
+
+function rowState(context: RenderContext): RowState {
+	const state = context.state as Partial<RowState>;
+	state.nativeState ??= {};
+	return state as RowState;
+}
+
+function nativeContext(context: RenderContext, row: RowState, lastComponent: Component | undefined): RenderContext {
+	return { ...context, state: row.nativeState, lastComponent };
+}
+
+function statusBg(theme: Theme, context: RenderContext): (text: string) => string {
+	const bg = context.isPartial ? "toolPendingBg" : context.isError ? "toolErrorBg" : "toolSuccessBg";
+	return (text) => theme.bg(bg, text);
+}
+
+function stopPulse(row: RowState): void {
+	if (row.pulse) clearInterval(row.pulse);
+	row.pulse = undefined;
+}
+
+export function createCompactRenderers(
+	toolName: string,
+	native: ToolRenderers,
+	glyphs: () => IconGlyphs,
+	running?: Map<string, RowState | undefined>,
+): ToolRenderers {
+	const label = TOOL_LABELS[toolName] ?? toolName;
+	const isShell = toolName === "bash" || toolName === "powershell";
+	// Expanded rows hand off to Pi's own card so nothing is hidden.
+	const showNative = (context: RenderContext) => context.expanded;
+
+	return {
+		renderShell: "self",
+		renderCall(args, theme, context) {
+			const row = rowState(context);
+			// Keep native timers/edit state current; write rebuilds its full highlight cache only on expansion.
+			if (toolName !== "write" || context.expanded) {
+				row.nativeCall = native.renderCall?.(args, theme, nativeContext(context, row, row.nativeCall));
+			}
+			if (context.executionStarted) row.startedAt ??= Date.now();
+			const live = context.executionStarted && context.isPartial && !context.isError;
+			// Actual execution events exclude history rebuilding and HTML export's partial call context.
+			if (live && !context.expanded && running?.has(context.toolCallId)) {
+				running.set(context.toolCallId, row);
+				if (!row.pulse) {
+					row.pulseBright = true;
+					row.pulse = setInterval(() => {
+						row.pulseBright = !row.pulseBright;
+						context.invalidate();
+					}, 1000);
+					row.pulse.unref();
+				}
+			} else {
+				stopPulse(row);
+			}
+			if (showNative(context) && row.nativeCall) {
+				if (native.renderShell === "self") return row.nativeCall;
+				// Recreate Pi's default card: top padding, call, then result (or bottom padding while pending).
+				row.callCard ??= new Box(context.outputPad, 0);
+				row.callCardBottom ??= new Spacer(1);
+				row.callCard.setBgFn(statusBg(theme, context));
+				row.callCard.setPaddingX(context.outputPad);
+				row.callCard.clear();
+				row.callCard.addChild(new Spacer(1));
+				row.callCard.addChild(row.nativeCall);
+				row.callCard.addChild(row.callCardBottom);
+				return row.callCard;
+			}
+			const color: ThemeColor = context.isError ? "error" : context.isPartial
+				? live && row.pulseBright !== false ? "accent" : "dim"
+				: "success";
+			const titleColor = context.isPartial || context.isError ? "toolTitle" : "dim";
+			const detail = sanitizeStatus(callDetail(toolName, (args ?? {}) as Args, context.cwd));
+			const pad = " ".repeat(context.outputPad);
+			return lines(() => [
+				pad + theme.fg(color, glyphs().toolCall) + " " + theme.fg(titleColor, titleColor === "dim" ? label : theme.bold(label))
+					+ (detail ? theme.fg(context.isPartial || context.isError ? "muted" : "dim", `(${detail})`) : ""),
+			]);
+		},
+
+		renderResult(result, options, theme, context) {
+			const row = rowState(context);
+			if (!options.isPartial || context.isError) stopPulse(row);
+			row.nativeResult = native.renderResult?.(result, options, theme, nativeContext(context, row, row.nativeResult));
+			if (showNative(context) && row.nativeResult) {
+				if (native.renderShell === "self") return row.nativeResult;
+				// The result now closes the card, so the call card drops its pending bottom padding.
+				if (row.callCard && row.callCardBottom) row.callCard.removeChild(row.callCardBottom);
+				row.resultCard ??= new Box(context.outputPad, 0);
+				row.resultCard.setBgFn(statusBg(theme, context));
+				row.resultCard.setPaddingX(context.outputPad);
+				row.resultCard.clear();
+				row.resultCard.addChild(row.nativeResult);
+				row.resultCard.addChild(new Spacer(1));
+				return row.resultCard;
+			}
+			const pad = " ".repeat(context.outputPad);
+			const args = (context.args ?? {}) as Args;
+			if (!options.isPartial && !context.isError && (toolName === "edit" || toolName === "write")) {
+				const source = toolName === "edit" ? str(details(result).diff) : str(args.content);
+				const path = str(args.file_path ?? args.path);
+				if (!row.preview || row.preview.source !== source || row.preview.path !== path || row.preview.colors !== theme.colors) {
+					row.preview = { source, path, colors: theme.colors, render: prepareToolPreview(toolName, source, path, theme) };
+				}
+			}
+			return lines((width) => {
+				const { toolResult } = glyphs();
+				const gutter = `${pad}  ${theme.fg("dim", toolResult)}  `;
+				const indent = `${pad}  ${" ".repeat(visibleWidth(toolResult))}  `;
+				if (options.isPartial) {
+					if (!isShell) return [gutter + theme.fg("warning", "Running…")];
+					const tail = tailLines(textOutput(result), LIVE_TAIL_LINES).map((line) => theme.fg("toolOutput", line));
+					const elapsed = row.startedAt === undefined ? "" : ` ${formatElapsed(Date.now() - row.startedAt)}`;
+					return [...tail, theme.fg("warning", `Running…${elapsed}`)]
+						.map((line, index) => (index === 0 ? gutter : indent) + line);
+				}
+				const duration = isShell && context.durationMs !== undefined ? ` · ${formatElapsed(context.durationMs)}` : "";
+				if (context.isError) return [gutter + theme.fg("error", summarizeError(toolName, result, duration))];
+				const summary = summarizeResult(toolName, result, args);
+				return [gutter + theme.fg("dim", summary + duration), ...(row.preview?.render(width, indent) ?? [])];
+			});
+		},
+	};
+}
+
+const OWNED_TOOLS = new Set(Object.keys(TOOL_LABELS));
+
+/**
+ * Display-only: Pi's tools, execution, arguments and results are untouched. The mode is read
+ * when Pi builds a row, so switching it affects new rows only.
+ */
+export function registerToolView(pi: ExtensionAPI, getMode: () => ToolViewMode, glyphs: () => IconGlyphs): void {
+	const running = new Map<string, RowState | undefined>();
+	pi.on("tool_execution_start", (event) => { running.set(event.toolCallId, undefined); });
+	pi.on("tool_execution_end", (event) => {
+		const row = running.get(event.toolCallId);
+		if (row) stopPulse(row);
+		running.delete(event.toolCallId);
+	});
+	pi.on("session_shutdown", () => {
+		for (const row of running.values()) if (row) stopPulse(row);
+		running.clear();
+	});
+	pi.registerToolRenderer((toolName, next) => {
+		const native = next();
+		if (!native || !OWNED_TOOLS.has(toolName) || getMode() !== "compact") return native;
+		if (pi.getAllTools().find((tool) => tool.name === toolName)?.sourceInfo?.source !== "builtin") return native;
+		return createCompactRenderers(toolName, native, glyphs, running);
+	});
+}

package/extensions/open-tui/utils.ts

@@ -135,8 +135,8 @@ export type PrioritizedSegment = {
 
 /**
  * Pack segments into maxWidth: compact segments first, then shrink/drop the
- * lowest-priority segments (higher priority = survives longer). Returns the
- * surviving segment texts in original order, space-joined.
+ * lowest-priority segments (higher priority = survives longer). Returns one
+ * text per input segment, preserving positions with empty strings for dropped items.
  */
 export function fitSegmentsByPriority(
 	segs: readonly PrioritizedSegment[],
@@ -205,7 +205,7 @@ export function fitSegmentsByPriority(
 			break;
 		}
 	}
-	return items.filter((it) => it.text !== "").map((it) => it.text);
+	return items.map((it) => it.text);
 }
 
 export function stressColor(value: number, warn = 70, danger = 90): ThemeColor {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-open-tui",
-  "version": "0.3.14",
-  "description": "A polished TUI for Pi coding agent: animated logo header, Starship-style footer, rounded editor with model metadata, and prompt-box user messages.",
+  "version": "0.4.1",
+  "description": "A polished TUI for Pi coding agent: branded header, responsive footer, framed editor, thinking preview, and compact tool views.",
   "type": "module",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "node --test tests/settings-command.test.ts tests/footer.test.ts tests/editor.test.ts tests/telemetry.test.ts tests/peek.test.ts",
+    "test": "node --test tests/settings-command.test.ts tests/footer.test.ts tests/editor.test.ts tests/telemetry.test.ts tests/peek.test.ts tests/tool-view.test.ts tests/copy-buttons.test.ts",
     "typecheck": "tsc --noEmit"
   },
   "pi": {
@@ -35,9 +35,9 @@
     "image": "https://raw.githubusercontent.com/OldSuns/pi-open-tui/main/assets/preview_dashboard_1.png"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": ">=1.0.0",
-    "@earendil-works/pi-ai": ">=1.0.0",
-    "@earendil-works/pi-tui": ">=1.0.0"
+    "@earendil-works/pi-ai": ">=1.2.0",
+    "@earendil-works/pi-coding-agent": ">=1.2.0",
+    "@earendil-works/pi-tui": ">=1.2.0"
   },
   "peerDependenciesMeta": {
     "@earendil-works/pi-coding-agent": {
@@ -51,17 +51,13 @@
     }
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "^1.0.0",
-    "@earendil-works/pi-ai": "^1.0.0",
-    "@earendil-works/pi-tui": "^1.0.0",
+    "@earendil-works/pi-ai": "^1.2.0",
+    "@earendil-works/pi-coding-agent": "^1.2.0",
+    "@earendil-works/pi-tui": "^1.2.0",
     "@types/node": "^22.0.0",
     "typescript": "^5.5.0"
   },
-  "allowScripts": {
-    "protobufjs@7.6.5": true,
-    "protobufjs@7.6.4": true,
-    "@google/genai@1.52.0": true,
-    "koffi@2.16.2": true,
-    "tree-sitter-bash@0.25.1": true
+  "dependencies": {
+    "diff": "^9.0.0"
   }
 }