pi-compact-tools 0.13.1 → 0.14.0

package/extensions/compact-tools-grouping.ts

@@ -5,8 +5,24 @@ import {
 	type ExtensionContext,
 	type Theme,
 } from "@earendil-works/pi-coding-agent";
-import { Container, Spacer, Text, truncateToWidth, type Component } from "@earendil-works/pi-tui";
-import { claudeFailure, lookHint, lookKind, pathOf, type LookKind } from "./compact-tools-claude.ts";
+import { Container, Spacer, Text, truncateToWidth, visibleWidth, type Component } from "@earendil-works/pi-tui";
+import { CLAUDE_RESULT_PREFIX, claudeFailure, lookHint, lookKind, pathOf, type LookKind } from "./compact-tools-claude.ts";
+import {
+	CODEX_BULLET,
+	CODEX_INDENT,
+	CODEX_MARGIN,
+	CODEX_PREVIEW_ROWS,
+	CODEX_RESULT_PREFIX,
+	codexDisclosure,
+	exploreActions,
+	exploreFailure,
+	exploreLines,
+	openExplorations,
+	paintSegments,
+	wrapSegments,
+	type ExploreAction,
+	type Segment,
+} from "./compact-tools-codex.ts";
 import { formatDurationMs, type RowStatus } from "./compact-tools-core.ts";
 import { hookMethod } from "./compact-tools-hook.ts";
 import { getTextResult } from "./compact-tools-invocation.ts";
@@ -25,7 +41,8 @@ const PHRASES: ReadonlyArray<{ kind: LookKind; running: string; done: string; si
 	{ kind: "list", running: "listing", done: "listed", singular: "directory", plural: "directories" },
 ];
 
-export const EXPAND_HINT = "(ctrl+o to expand)";
+/** A click opens one group; Ctrl+O opens every row and its output, which is rarely what a reader wants here. */
+export const EXPAND_HINT = "(click to expand)";
 
 /** The fields of Pi's tool row a group summary reads. */
 export interface ToolRowLike {
@@ -38,6 +55,7 @@ export interface ToolRowLike {
 	render(width: number): string[];
 	handleMouse?(event: unknown): unknown;
 	invalidate(): void;
+	setExpanded?(expanded: boolean): void;
 }
 
 /** Whether a call without its result can still get one; the row itself answers the same way. */
@@ -71,6 +89,17 @@ function kindOf(row: ToolRowLike): LookKind | undefined {
 	return kind;
 }
 
+// Codex parses a command into what it does, once for each set of arguments as they stream in.
+const explorations = new WeakMap<object, { args: unknown; actions: ExploreAction[] | undefined }>();
+
+function exploreOf(row: ToolRowLike): ExploreAction[] | undefined {
+	const cached = explorations.get(row);
+	if (cached && cached.args === row.args) return cached.actions;
+	const actions = exploreActions(row.toolName, argsOf(row));
+	explorations.set(row, { args: row.args, actions });
+	return actions;
+}
+
 function lastRunning(rows: readonly ToolRowLike[], canRun: CanRun): ToolRowLike | undefined {
 	for (let index = rows.length - 1; index >= 0; index--) {
 		if (memberStatus(rows[index]!, canRun) === "running") return rows[index];
@@ -149,7 +178,7 @@ type GroupState = { expanded: boolean; lastHostExpanded: boolean; header?: Heade
 type Paint = { theme: Theme; chrome: (text: string) => string; key: string };
 
 /** Theme colors a group line uses; a theme that changes any of them draws the lines anew. */
-const PAINT_COLORS = ["toolTitle", "error", "success", "muted", "dim", "text", "borderMuted"] as const;
+const PAINT_COLORS = ["toolTitle", "error", "success", "muted", "dim", "text", "borderMuted", "accent"] as const;
 
 function headerStill(cache: HeaderCache, rows: readonly ToolRowLike[], paint: string, width: number, expanded: boolean): boolean {
 	if (cache.paint !== paint || cache.width !== width || cache.expanded !== expanded || cache.rows.length !== rows.length) return false;
@@ -165,7 +194,9 @@ export class ToolGroupComponent extends Container {
 		members: readonly unknown[],
 		private readonly state: GroupState,
 		private readonly draw: (rows: readonly ToolRowLike[], width: number, expanded: boolean) => string[],
-		private readonly onToggle: () => void,
+		private readonly onToggle: (expanded: boolean) => void,
+		/** Lines beneath an opened group's members, which a click closes too. */
+		footer?: (width: number) => string[],
 	) {
 		super();
 		// Ctrl+O expands every tool row in Pi; the group follows it both ways.
@@ -174,24 +205,26 @@ export class ToolGroupComponent extends Container {
 			state.lastHostExpanded = hostExpanded;
 			state.expanded = hostExpanded;
 		}
-		const header: Component = {
-			render: (width) => this.draw(this.rows, width, this.state.expanded),
-			invalidate() {},
-			handleMouse: (event: { type?: string; button?: string }) => {
-				if (event.type !== "click" || event.button !== "left") return undefined;
-				captureViewport();
-				this.state.expanded = !this.state.expanded;
-				this.onToggle();
-				return { handled: true };
-			},
-		} as Component;
-		this.addChild(header);
-		if (state.expanded) for (const member of members) this.addChild(member as Component);
+		const handleMouse = (event: { type?: string; button?: string }) => {
+			if (event.type !== "click" || event.button !== "left") return undefined;
+			captureViewport();
+			this.state.expanded = !this.state.expanded;
+			this.onToggle(this.state.expanded);
+			return { handled: true };
+		};
+		this.addChild({ render: (width) => this.draw(this.rows, width, this.state.expanded), invalidate() {}, handleMouse } as Component);
+		if (!state.expanded) return;
+		for (const member of members) this.addChild(member as Component);
+		if (footer) this.addChild({ render: footer, invalidate() {}, handleMouse } as Component);
 	}
 }
 
-function isGroupable(child: unknown): child is ToolRowLike {
-	return isKind(child, ToolExecutionComponent) && kindOf(child as ToolRowLike) !== undefined;
+/** Which rows fold into a group: what Claude Code counts as looking around, or what Codex parses as exploring. */
+export type GroupStyle = "claude" | "codex";
+
+function isGroupable(child: unknown, style: GroupStyle = "claude"): child is ToolRowLike {
+	if (!isKind(child, ToolExecutionComponent)) return false;
+	return style === "codex" ? exploreOf(child as ToolRowLike) !== undefined : kindOf(child as ToolRowLike) !== undefined;
 }
 
 type AssistantLike = { lastMessage?: { content?: Array<{ type: string; text?: string }> } };
@@ -219,6 +252,7 @@ function isFoldable(child: unknown): boolean {
 export function groupChildren(
 	children: readonly unknown[],
 	makeGroup: (rows: ToolRowLike[], members: unknown[]) => Component,
+	style: GroupStyle = "claude",
 ): unknown[] {
 	const grouped: unknown[] = [];
 	let rows: ToolRowLike[] = [];
@@ -230,7 +264,7 @@ export function groupChildren(
 		members = [];
 	};
 	for (const child of children) {
-		if (isGroupable(child)) {
+		if (isGroupable(child, style)) {
 			rows.push(child);
 			members.push(...pending, child);
 			pending = [];
@@ -249,7 +283,7 @@ export function groupChildren(
 	return grouped;
 }
 
-/** Claude style: runs of reads, searches, and listings fold into one line each. */
+/** Claude and Codex styles: runs of reads, searches, and listings fold into one group each. */
 export class ToolGroupController {
 	private context: ExtensionContext | undefined;
 	private readonly states = new WeakMap<object, GroupState>();
@@ -268,10 +302,12 @@ export class ToolGroupController {
 			const chat = findChat(tui);
 			if (chat) {
 				hookMethod(chat, "render", "claude.groups", (self, args, original) => {
-					if (!this.context || isSilent() || this.runtime.config.style !== "claude") return original.apply(self, args);
+					const style = this.runtime.config.style;
+					if (!this.context || isSilent() || (style !== "claude" && style !== "codex")) return original.apply(self, args);
 					const children = self.children as unknown[];
 					this.paint = this.resolvePaint();
-					self.children = groupChildren(children, (rows, members) => this.makeGroup(rows, members, tui));
+					openExplorations.clear();
+					self.children = groupChildren(children, (rows, members) => this.makeGroup(rows, members, tui), style);
 					try {
 						return original.apply(self, args);
 					} finally {
@@ -297,15 +333,35 @@ export class ToolGroupController {
 			this.states.set(key, state);
 		}
 		const groupState = state;
-		return new ToolGroupComponent(rows, members, state,
-			(group, width, expanded) => this.drawCached(group, width, expanded, groupState), () => tui.requestRender());
+		const draw = (group: readonly ToolRowLike[], width: number, expanded: boolean) => this.drawCached(group, width, expanded, groupState);
+		if (this.runtime.config.style !== "codex") return new ToolGroupComponent(rows, members, state, draw, () => tui.requestRender());
+		// Codex opens a group to the whole of each call, and closes it from one "− Show less" beneath them.
+		const toggle = (expanded: boolean) => {
+			for (const row of rows) row.setExpanded?.(expanded);
+			tui.requestRender();
+		};
+		const footer = (width: number) => {
+			const theme = this.paint?.theme ?? this.context?.ui.theme;
+			return theme ? [truncateToWidth(theme.fg("dim", codexDisclosure(width, true)), Math.max(1, width), "…")] : [];
+		};
+		const group = new ToolGroupComponent(rows, members, state, draw, toggle, footer);
+		// Read once the group has followed Ctrl+O, which it does as it is made. A call that joins an
+		// opened group opens with it, as every call in an opened Codex group shows whole.
+		if (state.expanded) {
+			for (const row of rows) {
+				openExplorations.add(row.toolCallId);
+				if (!row.expanded) row.setExpanded?.(true);
+			}
+		}
+		return group;
 	}
 
 	private resolvePaint(): Paint | undefined {
 		const theme = this.context?.ui.theme;
 		if (!theme) return undefined;
 		const chrome = chromePainter(theme);
-		const key = PAINT_COLORS.map((color) => theme.fg(color, "x")).join("") + theme.bold("x") + chrome("x");
+		// The style is part of the key: a group drawn in one style is never reused in another.
+		const key = this.runtime.config.style + PAINT_COLORS.map((color) => theme.fg(color, "x")).join("") + theme.bold("x") + chrome("x");
 		return { theme, chrome, key };
 	}
 
@@ -338,6 +394,7 @@ export class ToolGroupController {
 	 * looks at.
 	 */
 	private draw(rows: readonly ToolRowLike[], width: number, expanded: boolean, paint: Paint): string[] {
+		if (this.runtime.config.style === "codex") return this.drawCodex(rows, width, expanded, paint);
 		const { theme, chrome } = paint;
 		const fit = (line: string) => truncateToWidth(line, Math.max(1, width), "…");
 		const running = lastRunning(rows, this.canRun);
@@ -346,7 +403,7 @@ export class ToolGroupController {
 		const status: RowStatus = running ? "running" : statuses.includes("error") ? "error"
 			: statuses.includes("pending") ? "pending" : "success";
 		const summary = summarizeGroup(rows, undefined, this.canRun);
-		let title = `${paintIndicator(theme, status, this.runtime.frame)} ${theme.fg("toolTitle", theme.bold(summary))}`;
+		let title = ` ${paintIndicator(theme, status, this.runtime.frame)} ${theme.fg("toolTitle", theme.bold(summary))}`;
 		if (running) {
 			// The folded row is not drawn, so the line that pulses for it keeps the clock going.
 			this.runtime.keepAnimating(running.toolCallId);
@@ -355,10 +412,52 @@ export class ToolGroupController {
 			title += `${elapsed >= 2000 ? chrome(` · ${formatDurationMs(elapsed)}`) : ""}…`;
 		}
 		if (!expanded) title += chrome(` ${EXPAND_HINT}`);
-		const lines = ["", fit(` ${title}`)];
+		const lines = ["", fit(title)];
 		const hintText = groupHint(rows, this.canRun);
-		if (hintText) lines.push(fit(chrome(` └ ${hintText}`)));
-		if (!expanded) for (const failure of groupFailures(rows)) lines.push(fit(chrome(" └ ") + theme.fg("error", failure)));
+		if (hintText) lines.push(fit(chrome(`${CLAUDE_RESULT_PREFIX}${hintText}`)));
+		if (!expanded) for (const failure of groupFailures(rows)) lines.push(fit(chrome(CLAUDE_RESULT_PREFIX) + theme.fg("error", failure)));
+		return lines;
+	}
+
+	/**
+	 * Codex's exploration: `• Exploring` while a call runs and `• Explored` after,
+	 * then a line for what each call did, three rows of them until the group opens.
+	 * A failed call says so at the end of its line and in the head's count.
+	 */
+	private drawCodex(rows: readonly ToolRowLike[], width: number, expanded: boolean, paint: Paint): string[] {
+		const { theme } = paint;
+		const fit = (line: string) => truncateToWidth(line, Math.max(1, width), "…");
+		const running = lastRunning(rows, this.canRun);
+		const statuses = rows.map((row) => memberStatus(row, this.canRun));
+		if (running) this.runtime.keepAnimating(running.toolCallId);
+		const bullet = running ? paintIndicator(theme, "running", this.runtime.frame, CODEX_BULLET)
+			: statuses.includes("pending") ? paintIndicator(theme, "pending", 0, CODEX_BULLET) : theme.fg("dim", CODEX_BULLET);
+		const failed = statuses.filter((status) => status === "error").length;
+		let head = `${CODEX_MARGIN}${bullet} ${theme.bold(running ? "Exploring" : "Explored")}`;
+		if (failed > 0) head += theme.bold(theme.fg("error", ` · ${failed} failed`));
+		// Opened, Codex lists the calls themselves in place of the summary; each brings its own blank line.
+		if (expanded) return [];
+		const lines = ["", fit(head)];
+		const calls = rows.map((row) => {
+			const actions = exploreOf(row) ?? [];
+			const failure = row.result && !row.isPartial
+				? exploreFailure(row.toolName, getTextResult(row.result), row.result.isError === true, actions) : undefined;
+			return { actions, failure };
+		});
+		const details: string[] = [];
+		for (const line of exploreLines(calls)) {
+			const verb = `${line.verb} `;
+			const segments: Segment[] = line.parts.map((part) => ({ text: part.text, color: part.dim ? "dim" : undefined }));
+			if (line.failure) segments.push({ text: line.failure.text, color: line.failure.quiet ? "dim" : "error" });
+			const available = Math.max(1, width - visibleWidth(CODEX_INDENT) - verb.length);
+			wrapSegments(segments, available, available).forEach((row, index) => {
+				details.push((index === 0 ? theme.fg("accent", verb) : " ".repeat(verb.length)) + paintSegments(row, theme));
+			});
+		}
+		details.slice(0, CODEX_PREVIEW_ROWS).forEach((row, index) => {
+			lines.push(fit(theme.fg("dim", index === 0 ? CODEX_RESULT_PREFIX : CODEX_INDENT) + row));
+		});
+		lines.push(fit(theme.fg("dim", codexDisclosure(width, false))));
 		return lines;
 	}
 }

package/extensions/compact-tools-invocation.ts

@@ -290,9 +290,38 @@ function summarizeFileOperation(executable: string, words: string[]): string | u
 	return undefined;
 }
 
+/** One step split at its unquoted pipes: `cat a | tee b` is two commands, the second writing a file. */
+function pipelineStages(segment: string): string[] {
+	const stages: string[] = [];
+	let current = "";
+	let quote: string | undefined;
+	for (let index = 0; index < segment.length; index++) {
+		const character = segment[index]!;
+		if (quote) {
+			if (character === "\\" && quote === '"' && index + 1 < segment.length) {
+				current += character + segment[++index];
+				continue;
+			}
+			if (character === quote) quote = undefined;
+		} else if (character === "'" || character === '"' || character === "`") {
+			quote = character;
+		} else if (character === "\\" && index + 1 < segment.length) {
+			current += character + segment[++index];
+			continue;
+		} else if (character === "|") {
+			if (current.trim()) stages.push(current.trim());
+			current = "";
+			continue;
+		}
+		current += character;
+	}
+	if (current.trim()) stages.push(current.trim());
+	return stages;
+}
+
 /** A calm collapsed label that describes intent while retaining primary command targets. */
 export function summarizeShellCommand(name: string, command: string): string {
-	const allSegments = shellSegments(normalizeLineEndings(command));
+	const allSegments = shellSegments(normalizeLineEndings(command)).flatMap(pipelineStages);
 	const segments = allSegments.filter((segment) => !/^\s*(?:cd|pushd|popd)\b/iu.test(segment));
 	const primary = segments[0] ?? allSegments[0] ?? "";
 	if (!primary) return name === "powershell" ? "Prepare PowerShell command" : "Prepare shell command";

package/extensions/compact-tools-layout.ts

@@ -15,7 +15,7 @@ import { highlightMarkdown } from "./compact-tools-markdown.ts";
 import { paintChrome } from "./compact-tools-palette.ts";
 import type { ToolArgs } from "./compact-tools-types.ts";
 
-class CachedComponent implements Component {
+export class CachedComponent implements Component {
 	private cachedWidth?: number;
 	private cachedLines?: string[];
 
@@ -160,6 +160,20 @@ export function prefixedLines(text: string, firstPrefix: string, continuationPre
 	});
 }
 
+/**
+ * A sentence under a tree prefix, wrapped at words as a terminal UI wraps prose:
+ * a word moves to the next row whole, and only a word longer than a row is split.
+ */
+export function prefixedSentence(text: string, firstPrefix: string, continuationPrefix: string): Component {
+	const prefixWidth = Math.max(visibleWidth(firstPrefix), visibleWidth(continuationPrefix));
+	const lines = text.replace(/\t/g, "   ").split("\n");
+	return new CachedComponent((width) => {
+		const available = Math.max(1, width - prefixWidth);
+		return lines.flatMap((line) => wrapTextWithAnsi(line, available).map((row) => truncateToWidth(row, available, "")))
+			.map((row, index) => `${index === 0 ? firstPrefix : continuationPrefix}${row}`);
+	});
+}
+
 /**
  * Output as Claude Code previews it. Each line is wrapped to the width, and rows
  * rather than lines are counted: collapsed, `maxRows` show, all of them when only
@@ -179,7 +193,7 @@ export function claudeRows(
 		const wrapWidth = maxRows === undefined ? available : Math.min(available, Math.max(width - 10, 10));
 		let rows = lines.flatMap((line) => hardWrapTextWithAnsi(line, wrapWidth).map((row) => row.trimEnd()));
 		if (maxRows !== undefined && rows.length > maxRows + 1) {
-			rows = [...rows.slice(0, maxRows), more(rows.length - maxRows)];
+			rows = [...rows.slice(0, maxRows), truncateToWidth(more(rows.length - maxRows), available, "…")];
 		}
 		return rows.map((row, index) => `${index === 0 ? firstPrefix : continuationPrefix}${row}`);
 	});
@@ -209,10 +223,14 @@ export function hardWrapTextWithAnsi(text: string, width: number): string[] {
 	return wrapped;
 }
 
-export function renderToolCall(title: string, details: string | undefined, theme: Theme): Component {
+export function renderToolCall(
+	title: string,
+	details: string | undefined,
+	theme: Theme,
+	continuationPrefix = paintChrome(theme, " │ "),
+): Component {
 	const text = details ? `${title} ${details}` : title;
 	const firstPrefix = " ";
-	const continuationPrefix = paintChrome(theme, " │ ");
 	const prefixWidth = visibleWidth(continuationPrefix);
 	return new CachedComponent((width) => {
 		const lines = hardWrapTextWithAnsi(text, width - prefixWidth);
@@ -224,12 +242,12 @@ export function styleMultiline(text: string, style: (line: string) => string): s
 	return normalizeLineEndings(text).split("\n").map(style).join("\n");
 }
 
-export function renderOutput(output: string, theme: Theme, isError: boolean): Component | undefined {
+export function renderOutput(output: string, theme: Theme, isError: boolean, rail = paintChrome(theme, " │ ")): Component | undefined {
 	const normalized = normalizeLineEndings(output).trimEnd();
 	if (!normalized) return undefined;
 	const color = isError ? "error" : "toolOutput";
 	const styled = normalized.split("\n").map((line) => theme.fg(color, line)).join("\n");
-	return prefixedText(styled, paintChrome(theme, " │ "));
+	return prefixedText(styled, rail);
 }
 
 export type CodeDiffLineKind = "context" | "add" | "remove" | "separator";
@@ -249,7 +267,7 @@ export type CodeDiffOptions = {
 
 const DIFF_SEPARATOR = "\u22ee";
 
-function parseUnifiedPatch(patch: string): CodeDiffLine[] {
+function parseUnifiedPatch(patch: string, tab: string): CodeDiffLine[] {
 	const result: CodeDiffLine[] = [];
 	let oldLine = 0;
 	let newLine = 0;
@@ -265,7 +283,7 @@ function parseUnifiedPatch(patch: string): CodeDiffLine[] {
 		}
 		if (hunk < 0 || line.startsWith("\")) continue;
 		const prefix = line[0];
-		const content = line.slice(1).replace(/\t/gu, "   ");
+		const content = line.slice(1).replace(/\t/gu, tab);
 		if (prefix === "+") {
 			result.push({ kind: "add", lineNumber: newLine++, content, hunk });
 		} else if (prefix === "-") {
@@ -278,7 +296,7 @@ function parseUnifiedPatch(patch: string): CodeDiffLine[] {
 	return result;
 }
 
-function parseDisplayDiff(diff: string): CodeDiffLine[] {
+function parseDisplayDiff(diff: string, tab: string): CodeDiffLine[] {
 	const result: CodeDiffLine[] = [];
 	let hunk = 0;
 	for (const line of normalizeLineEndings(diff).split("\n")) {
@@ -291,17 +309,20 @@ function parseDisplayDiff(diff: string): CodeDiffLine[] {
 		result.push({
 			kind: match[1] === "+" ? "add" : match[1] === "-" ? "remove" : "context",
 			lineNumber: Number(match[2]),
-			content: match[3]!.replace(/\t/gu, "   "),
+			content: match[3]!.replace(/\t/gu, tab),
 			hunk,
 		});
 	}
 	return result;
 }
 
-/** Parse a standard patch, falling back to Pi's display-oriented numbered diff. */
-export function parseCodeDiff(patch: string, displayDiff = ""): CodeDiffLine[] {
-	const parsedPatch = patch ? parseUnifiedPatch(patch) : [];
-	return parsedPatch.length > 0 ? parsedPatch : parseDisplayDiff(displayDiff);
+/**
+ * Parse a standard patch, falling back to Pi's display-oriented numbered diff. A tab
+ * becomes `tab`: three columns as Pi draws code, four as Codex does.
+ */
+export function parseCodeDiff(patch: string, displayDiff = "", tab = "   "): CodeDiffLine[] {
+	const parsedPatch = patch ? parseUnifiedPatch(patch, tab) : [];
+	return parsedPatch.length > 0 ? parsedPatch : parseDisplayDiff(displayDiff, tab);
 }
 
 /** Drop context that sits far from any change so a collapsed preview still reaches the edit. */
@@ -358,14 +379,11 @@ function highlightCodeLines(lines: CodeDiffLine[], language: string | undefined,
 		}
 		let end = index;
 		while (end < lines.length && lines[end]!.kind !== "separator") end++;
-		const block = lines.slice(index, end);
-		const contents = block.map((line) => line.content);
+		const contents = lines.slice(index, end).map((line) => line.content);
 		const highlighted = language === "markdown"
 			? highlightMarkdown(contents, theme)
 			: highlightCode(contents.join("\n"), language);
-		block.forEach((line, offset) => {
-			rendered[index + offset] = highlighted[offset] ?? line.content;
-		});
+		for (let offset = 0; offset < contents.length; offset++) rendered[index + offset] = highlighted[offset] ?? contents[offset]!;
 		index = end;
 	}
 	return rendered;
@@ -411,14 +429,18 @@ function renderCodeRows(lines: CodeDiffLine[], path: string, theme: Theme, optio
 	// read at an offset or a diff hunk never reads one out of a comment.
 	const first = lines[0];
 	const shebangLine = first?.lineNumber === 1 && first.kind !== "separator" ? first.content : undefined;
-	const highlighted = highlightCodeLines(lines, resolveLanguage(path, shebangLine), theme);
-	const numberWidth = Math.max(1, ...lines.map((line) => String(line.lineNumber ?? "").length));
+	// ToolExecutionComponent builds result components even when silent mode hides
+	// the row. Defer syntax work until the code is actually drawn, and keep it
+	// across width changes so resize does not highlight the same source again.
+	let highlighted: string[] | undefined;
+	const numberWidth = lines.reduce((maximum, line) => Math.max(maximum, String(line.lineNumber ?? "").length), 1);
 	const prefix = options.rail ?? paintChrome(theme, " \u2502 ");
 	const prefixWidth = visibleWidth(prefix);
 	const gutterWidth = numberWidth + (options.signs ? 3 : 2);
 	const addedTint = options.signs ? diffTintRgb(theme, "toolDiffAdded") : undefined;
 	const removedTint = options.signs ? diffTintRgb(theme, "toolDiffRemoved") : undefined;
 	return new CachedComponent((width) => {
+		highlighted ??= highlightCodeLines(lines, resolveLanguage(path, shebangLine), theme);
 		const bodyWidth = Math.max(1, width - prefixWidth);
 		const codeWidth = Math.max(1, bodyWidth - gutterWidth);
 		const output: string[] = [];
@@ -428,7 +450,7 @@ function renderCodeRows(lines: CodeDiffLine[], path: string, theme: Theme, optio
 				return;
 			}
 			const tint = line.kind === "add" ? addedTint : line.kind === "remove" ? removedTint : undefined;
-			for (const [chunkIndex, chunk] of hardSliceAnsi(highlighted[index] ?? line.content, codeWidth).entries()) {
+			for (const [chunkIndex, chunk] of hardSliceAnsi(highlighted![index] ?? line.content, codeWidth).entries()) {
 				const gutter = codeGutter(
 					line.kind,
 					chunkIndex === 0 ? line.lineNumber : undefined,
@@ -487,6 +509,82 @@ export function renderCodeView(code: string, path: string, theme: Theme, options
 	return renderCodeRows(lines, path, theme, { signs: false, footer: options.footer, rail: options.rail });
 }
 
+/**
+ * Diff rows the way Codex draws them: `{line} {sign}{code}` after `indent`, the
+ * number dim and the sign in its change color, and an added or removed row tinted
+ * across the whole width. A wrapped row continues under the code; `⋮` marks a gap
+ * between hunks. `maxRows` keeps the first rows, as Codex's collapsed preview does.
+ */
+export function renderCodexDiff(
+	lines: readonly CodeDiffLine[],
+	path: string,
+	theme: Theme,
+	indent: string,
+	maxRows?: number,
+): Component | undefined {
+	if (lines.length === 0) return undefined;
+	const first = lines[0];
+	const shebangLine = first?.lineNumber === 1 && first.kind !== "separator" ? first.content : undefined;
+	let highlighted: string[] | undefined;
+	const numberWidth = lines.reduce((maximum, line) => Math.max(maximum, String(line.lineNumber ?? "").length), 1);
+	const indentWidth = visibleWidth(indent);
+	const addedTint = diffTintRgb(theme, "toolDiffAdded");
+	const removedTint = diffTintRgb(theme, "toolDiffRemoved");
+	return new CachedComponent((width) => {
+		highlighted ??= highlightCodeLines([...lines], resolveLanguage(path, shebangLine), theme);
+		const codeWidth = Math.max(1, width - indentWidth - numberWidth - 2);
+		const output: string[] = [];
+		for (const [index, line] of lines.entries()) {
+			if (maxRows !== undefined && output.length >= maxRows) break;
+			if (line.kind === "separator") {
+				output.push(indent + " ".repeat(numberWidth + 1) + theme.fg("dim", line.content));
+				continue;
+			}
+			const tint = line.kind === "add" ? addedTint : line.kind === "remove" ? removedTint : undefined;
+			const sign = line.kind === "add" ? theme.fg("toolDiffAdded", "+") : line.kind === "remove" ? theme.fg("toolDiffRemoved", "-") : " ";
+			for (const [chunkIndex, chunk] of hardSliceAnsi(highlighted[index] ?? line.content, codeWidth).entries()) {
+				const gutter = chunkIndex === 0
+					? theme.fg("dim", `${String(line.lineNumber ?? "").padStart(numberWidth)} `) + sign
+					: " ".repeat(numberWidth + 2);
+				// Narrower than the gutter itself, a row is cut rather than drawn past the edge.
+				const row = truncateToWidth(indent + gutter + chunk, Math.max(1, width), "");
+				output.push(tint ? fillRgb(theme, tint, row + " ".repeat(Math.max(0, width - visibleWidth(row)))) : row);
+			}
+		}
+		return maxRows === undefined ? output : output.slice(0, maxRows);
+	});
+}
+
+/**
+ * A row that never draws past the pane's edge. Chrome has a width of its own, so in
+ * a pane narrower than a prefix the lines are cut to it. Lines are checked again only
+ * when the component draws new ones.
+ */
+export class WithinWidth implements Component {
+	private source: string[] | undefined;
+	private width: number | undefined;
+	private lines: string[] = [];
+
+	constructor(private readonly inner: Component) {}
+
+	render(width: number): string[] {
+		const lines = this.inner.render(width);
+		if (lines !== this.source || width !== this.width) {
+			this.source = lines;
+			this.width = width;
+			this.lines = lines.some((line) => visibleWidth(line) > width)
+				? lines.map((line) => visibleWidth(line) > width ? truncateToWidth(line, Math.max(1, width), "") : line)
+				: lines;
+		}
+		return this.lines;
+	}
+
+	invalidate(): void {
+		this.inner.invalidate?.();
+		this.source = undefined;
+	}
+}
+
 /** Limit a result preview by rendered rows while preserving the full source component for expansion. */
 export function limitComponentLines(
 	component: Component,
@@ -498,13 +596,12 @@ export function limitComponentLines(
 	return new CachedComponent((width) => {
 		const lines = component.render(width);
 		if (lines.length <= maximumLines) return lines;
-		return [...lines.slice(0, maximumLines), footer(lines.length - maximumLines)];
+		return [...lines.slice(0, maximumLines), truncateToWidth(footer(lines.length - maximumLines), Math.max(1, width), "…")];
 	}, () => component.invalidate?.());
 }
 
 /** Indent another renderer's component under the result rail so it reads as part of the row. */
-export function railComponent(component: Component, theme: Theme): Component {
-	const rail = paintChrome(theme, " │ ");
+export function railComponent(component: Component, theme: Theme, rail = paintChrome(theme, " │ ")): Component {
 	const railWidth = visibleWidth(rail);
 	return new CachedComponent(
 		(width) => component.render(Math.max(1, width - railWidth)).map((line) => rail + line),
@@ -512,8 +609,8 @@ export function railComponent(component: Component, theme: Theme): Component {
 	);
 }
 
-export function renderArguments(args: ToolArgs, theme: Theme): Component {
+export function renderArguments(args: ToolArgs, theme: Theme, rail = paintChrome(theme, " │ ")): Component {
 	const json = JSON.stringify(args, null, 2) ?? "{}";
 	const styled = styleMultiline(json, (line) => theme.fg("toolOutput", line));
-	return prefixedText(styled, paintChrome(theme, " │ "));
+	return prefixedText(styled, rail);
 }

package/extensions/compact-tools-palette.ts

@@ -122,18 +122,17 @@ function ramp(theme: Theme, low: ContrastBand, high: ContrastBand): ColorRamp |
  * A row's status dot; a running one pulses between the theme's endpoints as frames advance.
  * Every running row repaints its dot on every frame, so the pulse is painted once per palette.
  */
-export function paintIndicator(theme: Theme, status: RowStatus, frame: number): string {
-	if (status !== "running") return theme.fg(indicatorTone(status), indicatorGlyph(status));
-	const pulse = runningPulse(theme);
+export function paintIndicator(theme: Theme, status: RowStatus, frame: number, glyph = indicatorGlyph(status)): string {
+	if (status !== "running") return theme.fg(indicatorTone(status), glyph);
+	const pulse = runningPulse(theme, glyph);
 	return pulse[((frame % pulse.length) + pulse.length) % pulse.length]!;
 }
 
-/** Every step of the running dot's pulse, painted once per palette. */
-function runningPulse(theme: Theme): readonly string[] {
-	return perPalette(theme, "running-pulse", () => {
+/** Every step of the running dot's pulse, painted once per palette and glyph. */
+function runningPulse(theme: Theme, glyph: string): readonly string[] {
+	return perPalette(theme, `running-pulse:${glyph}`, () => {
 		const pulse = ramp(theme, PULSE_LOW, PULSE_HIGH);
 		return Array.from({ length: RUNNING_INDICATOR_FRAME_COUNT }, (_, step) => {
-			const glyph = indicatorGlyph("running", step);
 			return pulse
 				? colorizeRgb(theme, interpolateRgb(pulse.from, pulse.to, indicatorStrength("running", step)), glyph)
 				: theme.fg(indicatorTone("running", step), glyph);