@oh-my-pi/pi-coding-agent 17.1.0 → 17.1.1

package/src/live/visualizer.ts

@@ -1,22 +1,34 @@
-import { type Component, matchesKey, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import {
+	type Component,
+	matchesKey,
+	replaceTabs,
+	sliceWithWidth,
+	truncateToWidth,
+	visibleWidth,
+} from "@oh-my-pi/pi-tui";
 import { sanitizeText } from "@oh-my-pi/pi-utils";
 import { type ThemeColor, theme } from "../modes/theme/theme";
 
 /** Distinct states of a realtime call connection. */
 export type LivePhase = "connecting" | "listening" | "working" | "speaking" | "muted" | "error";
-
-/** A transcribed turn in the realtime call. */
-export interface LiveTranscript {
-	role: "user" | "assistant";
-	text: string;
-}
-
 /** Configuration callbacks for user interactions in the visualizer. */
 export interface LiveVisualizerOptions {
 	onStop(): void;
 	onToggleMute(): void;
 }
 
+function normalizeTranscript(text: string): string {
+	return replaceTabs(sanitizeText(text)).replace(/\s+/g, " ").trim();
+}
+
+function truncateFromStart(text: string, width: number): string {
+	if (width <= 0) return "";
+	const textWidth = visibleWidth(text);
+	if (textWidth <= width) return text;
+	if (width === 1) return "…";
+	return `…${sliceWithWidth(text, textWidth - width + 1, width - 1, true).text}`;
+}
+
 /** A compact, fixed-height terminal component for displaying a realtime call. */
 export class LiveVisualizer implements Component {
 	readonly wantsKeyRelease = false;
@@ -25,19 +37,17 @@ export class LiveVisualizer implements Component {
 
 	#phase: LivePhase = "connecting";
 	#inputLevel = 0;
-	#outputLevel = 0;
-	#transcript: LiveTranscript | undefined;
+	#displayLevel = 0;
 	#frame = 0;
+	#userTranscript = "";
 
 	#cache:
 		| {
 				width: number;
 				phase: LivePhase;
-				inputLevel: number;
-				outputLevel: number;
-				transcriptRole: string | undefined;
-				transcriptText: string | undefined;
+				displayLevel: number;
 				frame: number;
+				userTranscript: string;
 				lines: readonly string[];
 		  }
 		| undefined;
@@ -54,34 +64,43 @@ export class LiveVisualizer implements Component {
 		}
 	}
 
-	/** Updates the current input and output volume levels (0..1). */
-	setLevels(input: number, output: number): void {
-		if (this.#inputLevel !== input || this.#outputLevel !== output) {
-			this.#inputLevel = input;
-			this.#outputLevel = output;
-			this.invalidate();
-		}
-	}
-
-	/** Updates the latest transcript fragment. */
-	setTranscript(transcript: LiveTranscript | undefined): void {
-		if (this.#transcript?.role !== transcript?.role || this.#transcript?.text !== transcript?.text) {
-			this.#transcript = transcript ? { ...transcript } : undefined;
-			this.invalidate();
-		}
+	/** Updates the microphone volume level (0..1). */
+	setInputLevel(level: number): void {
+		const next = Number.isFinite(level) ? Math.min(1, Math.max(0, level)) : 0;
+		if (this.#inputLevel === next) return;
+		this.#inputLevel = next;
+		if (next > this.#displayLevel) this.#displayLevel = next;
+		this.invalidate();
 	}
 
-	/** Updates the animation frame for spinners and waveforms. */
+	/** Advances the spectrum animation and its peak decay. */
 	setFrame(frame: number): void {
-		if (this.#frame !== frame) {
+		const nextLevel = Math.max(this.#inputLevel, this.#displayLevel * 0.84);
+		if (this.#frame !== frame || this.#displayLevel !== nextLevel) {
 			this.#frame = frame;
+			this.#displayLevel = nextLevel;
 			this.invalidate();
 		}
 	}
 
+	/** Updates the user's streaming voice transcript. */
+	setTranscript(text: string): void {
+		const normalized = normalizeTranscript(text);
+		if (this.#userTranscript === normalized) return;
+		this.#userTranscript = normalized;
+		this.invalidate();
+	}
+
+	/** Clears the user's voice transcript row. */
+	clearTranscript(): void {
+		if (!this.#userTranscript) return;
+		this.#userTranscript = "";
+		this.invalidate();
+	}
+
 	/** Processes user keypresses. */
 	handleInput(data: string): void {
-		if (matchesKey(data, "escape")) {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
 			this.#options.onStop();
 		} else if (matchesKey(data, "space")) {
 			this.#options.onToggleMute();
@@ -93,67 +112,61 @@ export class LiveVisualizer implements Component {
 		this.#cache = undefined;
 	}
 
-	/** Renders the visualizer into a fixed array of rows at the given width. */
+	/** Renders the microphone spectrum into a compact fixed-height panel. */
 	render(width: number): readonly string[] {
 		if (
 			this.#cache &&
 			this.#cache.width === width &&
 			this.#cache.phase === this.#phase &&
-			this.#cache.inputLevel === this.#inputLevel &&
-			this.#cache.outputLevel === this.#outputLevel &&
+			this.#cache.displayLevel === this.#displayLevel &&
 			this.#cache.frame === this.#frame &&
-			this.#cache.transcriptRole === this.#transcript?.role &&
-			this.#cache.transcriptText === this.#transcript?.text
+			this.#cache.userTranscript === this.#userTranscript
 		) {
 			return this.#cache.lines;
 		}
 
 		const lines = this.#renderLines(width);
-
 		this.#cache = {
 			width,
 			phase: this.#phase,
-			inputLevel: this.#inputLevel,
-			outputLevel: this.#outputLevel,
+			displayLevel: this.#displayLevel,
 			frame: this.#frame,
-			transcriptRole: this.#transcript?.role,
-			transcriptText: this.#transcript?.text,
+			userTranscript: this.#userTranscript,
 			lines,
 		};
-
 		return lines;
 	}
 
 	#renderLines(maxWidth: number): readonly string[] {
-		const w = Math.max(2, Math.min(maxWidth, 120));
-		const innerW = w - 2;
-
-		const topBorder = theme.fg("border", `┌${"─".repeat(innerW)}${w > 1 ? "┐" : ""}`);
-
-		const maxWaveW = Math.min(40, Math.max(0, w - 4));
-		const sideW = Math.max(0, Math.floor((maxWaveW - 3) / 2));
-
-		const inWave = this.#generateWaveform(this.#inputLevel, sideW, true);
-		const outWave = this.#generateWaveform(this.#outputLevel, sideW, false);
-
-		const inColor: ThemeColor = this.#phase === "muted" ? "dim" : "success";
-		const outColor: ThemeColor = this.#phase === "error" ? "error" : "accent";
-
-		const waveContent = truncateToWidth(
-			theme.fg(inColor, inWave) + theme.fg("dim", " │ ") + theme.fg(outColor, outWave),
-			innerW,
-		);
-		const waveLen = visibleWidth(waveContent);
+		const width = Math.max(2, maxWidth);
+		const innerWidth = width - 2;
+		const border = (content: string): string =>
+			theme.fg("border", "│") + content + (width > 1 ? theme.fg("border", "│") : "");
+		const top = theme.fg("border", `┌${"─".repeat(innerWidth)}${width > 1 ? "┐" : ""}`);
+		const spectrumColor: ThemeColor = this.#phase === "muted" ? "dim" : this.#phase === "error" ? "error" : "success";
+		const spectrum = this.#generateSpectrum(innerWidth, 2);
+		const spectrumRows = spectrum.map(row => border(theme.fg(spectrumColor, row)));
+		const transcript = this.#renderTranscript(this.#userTranscript, innerWidth, border);
+		return [top, ...spectrumRows, transcript, this.#renderFooter(width, innerWidth)];
+	}
 
-		const wavePadL = Math.floor((innerW - waveLen) / 2);
-		const wavePadR = innerW - waveLen - wavePadL;
-		const row1 =
-			theme.fg("border", "│") +
-			" ".repeat(Math.max(0, wavePadL)) +
-			waveContent +
-			" ".repeat(Math.max(0, wavePadR)) +
-			(w > 1 ? theme.fg("border", "│") : "");
+	#renderTranscript(transcript: string, innerWidth: number, border: (content: string) => string): string {
+		const content = truncateFromStart(transcript, innerWidth);
+		const padding = " ".repeat(Math.max(0, innerWidth - visibleWidth(content)));
+		return border(theme.fg("accent", content) + padding);
+	}
 
+	#renderFooter(width: number, innerWidth: number): string {
+		const spinners = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+		const staticIcons: Record<LivePhase, string> = {
+			connecting: "○",
+			listening: "●",
+			working: "○",
+			speaking: "»",
+			muted: "×",
+			error: "!",
+		};
+		const icon = this.#phase === "working" ? spinners[this.#frame % spinners.length] : staticIcons[this.#phase];
 		const phaseColors: Record<LivePhase, ThemeColor> = {
 			connecting: "dim",
 			listening: "success",
@@ -162,73 +175,40 @@ export class LiveVisualizer implements Component {
 			muted: "dim",
 			error: "error",
 		};
-
-		const spinners = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-		let phaseIcon: string;
-		if (this.#phase === "working") {
-			phaseIcon = spinners[this.#frame % spinners.length];
-		} else {
-			const staticIcons: Record<LivePhase, string> = {
-				connecting: "○",
-				listening: "●",
-				working: "○",
-				speaking: "»",
-				muted: "×",
-				error: "!",
-			};
-			phaseIcon = staticIcons[this.#phase];
+		const status = `${icon} ${this.#phase}`;
+		const fullLabel = ` ${status} · space mute · esc end `;
+		const shortLabel = ` ${status} `;
+		const label =
+			innerWidth >= visibleWidth(fullLabel) + 1
+				? fullLabel
+				: innerWidth >= visibleWidth(shortLabel) + 1
+					? shortLabel
+					: "";
+		if (!label) {
+			return theme.fg("border", `└${"─".repeat(innerWidth)}${width > 1 ? "┘" : ""}`);
 		}
-
-		const phaseText = truncateToWidth(` ${phaseIcon} ${this.#phase.toUpperCase()} `, innerW);
-		const coloredPhase = theme.fg(phaseColors[this.#phase], phaseText);
-
-		const pLen = visibleWidth(coloredPhase);
-		const pPadL = Math.floor((innerW - pLen) / 2);
-		const pPadR = innerW - pLen - pPadL;
-		const row2 =
-			theme.fg("border", "│") +
-			" ".repeat(Math.max(0, pPadL)) +
-			coloredPhase +
-			" ".repeat(Math.max(0, pPadR)) +
-			(w > 1 ? theme.fg("border", "│") : "");
-
-		const row3 = theme.fg("border", "│") + " ".repeat(Math.max(0, innerW)) + (w > 1 ? theme.fg("border", "│") : "");
-
-		let transcriptText = "";
-		if (this.#transcript) {
-			const cleanText = sanitizeText(this.#transcript.text).replace(/[\r\n\t]+/g, " ");
-			const roleStr = this.#transcript.role === "user" ? "User: " : "Assistant: ";
-			transcriptText = theme.fg("dim", roleStr + cleanText);
-		}
-		const row4Content = truncateToWidth(`  ${transcriptText}`, Math.max(0, innerW - 2)) || "";
-		const r4Pad = Math.max(0, innerW - visibleWidth(row4Content));
-		const row4 = theme.fg("border", "│") + row4Content + " ".repeat(r4Pad) + (w > 1 ? theme.fg("border", "│") : "");
-
-		const footerContent = truncateToWidth(" space mute · esc end ", innerW);
-		const dashCount = Math.max(0, innerW - visibleWidth(footerContent));
-		let bottomBorder: string;
-		if (innerW >= visibleWidth(footerContent) + 2) {
-			bottomBorder =
-				theme.fg("border", "└─") +
-				theme.fg("dim", footerContent) +
-				theme.fg("border", "─".repeat(dashCount - 2) + (w > 1 ? "┘" : ""));
-		} else {
-			bottomBorder = theme.fg("border", `└${"─".repeat(Math.max(0, innerW))}${w > 1 ? "┘" : ""}`);
-		}
-
-		return [topBorder, row1, row2, row3, row4, bottomBorder];
+		const remaining = Math.max(0, innerWidth - visibleWidth(label) - 1);
+		return (
+			theme.fg("border", "└─") +
+			theme.fg(phaseColors[this.#phase], truncateToWidth(label, innerWidth - 1)) +
+			theme.fg("border", `${"─".repeat(remaining)}${width > 1 ? "┘" : ""}`)
+		);
 	}
 
-	#generateWaveform(level: number, width: number, reverse: boolean): string {
-		const chars = [" ", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
-		let out = "";
-		for (let i = 0; i < width; i++) {
-			const dist = reverse ? width - 1 - i : i;
-			const decay = Math.max(0, 1 - (dist / width) * 1.5);
-			const val = level * decay * (0.5 + 0.5 * Math.sin(this.#frame * 0.5 + dist * 0.8));
-			const charIdx = Math.max(0, Math.min(chars.length - 1, Math.floor(val * chars.length)));
-			out += chars[charIdx];
+	#generateSpectrum(width: number, rows: number): string[] {
+		const blocks = [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+		const output = Array.from({ length: rows }, () => "");
+		const energy = this.#phase === "muted" ? 0 : Math.min(1, Math.sqrt(this.#displayLevel * 5));
+		const maxHeight = rows * (blocks.length - 1);
+		for (let column = 0; column < width; column += 1) {
+			const carrier = 0.5 + 0.5 * Math.sin(this.#frame * 0.43 + column * 0.71);
+			const shimmer = 0.5 + 0.5 * Math.sin(this.#frame * 0.19 - column * 1.17);
+			const height = Math.round(energy * (0.3 + carrier * 0.5 + shimmer * 0.2) * maxHeight);
+			for (let row = 0; row < rows; row += 1) {
+				const units = Math.max(0, Math.min(blocks.length - 1, height - (rows - row - 1) * 8));
+				output[row] += blocks[units];
+			}
 		}
-		return out;
+		return output;
 	}
 }

package/src/modes/components/assistant-message.ts

@@ -235,6 +235,11 @@ export class AssistantMessageComponent extends Container {
 	 *  on a fresh block that has no live token throughput of its own. */
 	#thinkingRateLive = false;
 
+	#textColorTransform?: (text: string) => string;
+
+	setTextColorTransform(transform?: (text: string) => string): void {
+		this.#textColorTransform = transform;
+	}
 	constructor(
 		message?: AssistantMessage,
 		private hideThinkingBlock = false,
@@ -796,8 +801,8 @@ export class AssistantMessageComponent extends Container {
 			if (content.type === "text" && canonicalizeMessage(content.text)) {
 				// Set paddingY=0 to avoid extra spacing before tool executions
 				const trimmed = content.text.trim();
-				const md = new Markdown(trimmed, 1, 0, getMarkdownTheme());
-				md.transientRenderCache = this.#lastUpdateTransient;
+				const mdOptions = this.#textColorTransform ? { color: this.#textColorTransform } : undefined;
+				const md = new Markdown(trimmed, 1, 0, getMarkdownTheme(), mdOptions);
 				this.#contentContainer.addChild(md);
 				captureItems?.push({ md, contentIndex: i, blockType: "text", lastText: trimmed });
 				hasRenderedContent = true;

package/src/modes/components/custom-message.ts

@@ -2,7 +2,7 @@ import type { Component } from "@oh-my-pi/pi-tui";
 import { Box, Container } from "@oh-my-pi/pi-tui";
 import type { MessageRenderer } from "../../extensibility/extensions/types";
 import { theme } from "../../modes/theme/theme";
-import type { CustomMessage } from "../../session/messages";
+import { type CustomMessage, LIVE_DELEGATION_MESSAGE_TYPE } from "../../session/messages";
 import { renderFramedMessage } from "./message-frame";
 
 /**
@@ -49,12 +49,15 @@ export class CustomMessageComponent extends Container {
 		// The transcript dispatch routes both `custom` and legacy `hookMessage` roles here:
 		// tag hooks with the hook glyph, other injected messages with a neutral package.
 		const isHook = (this.message.role as string) === "hookMessage";
+		const isLiveDelegation = this.message.customType === LIVE_DELEGATION_MESSAGE_TYPE;
 		const custom = renderFramedMessage({
 			message: this.message,
 			box: this.#box,
 			expanded: this.#expanded,
 			customRenderer: this.customRenderer,
 			icon: isHook ? theme.icon.extensionHook : theme.icon.package,
+			hideHeader: isLiveDelegation,
+			borderColor: isLiveDelegation ? "borderAccent" : undefined,
 		});
 
 		if (custom) {

package/src/modes/components/message-frame.ts

@@ -11,7 +11,7 @@
 import type { TextContent } from "@oh-my-pi/pi-ai";
 import type { Box, Component } from "@oh-my-pi/pi-tui";
 import { Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
-import { getMarkdownTheme, type Theme, theme } from "../../modes/theme/theme";
+import { getMarkdownTheme, type Theme, type ThemeColor, theme } from "../../modes/theme/theme";
 
 /** Message shape consumed by the shared frame. */
 export interface FramedMessage {
@@ -36,6 +36,10 @@ export interface RebuildFrameOptions<M extends FramedMessage> {
 	expanded: boolean;
 	/** Icon glyph shown before the customType in the default header (e.g. a hook/extension icon). */
 	icon?: string;
+	/** Hide the default type header while retaining the message body. */
+	hideHeader?: boolean;
+	/** Semantic color for the outline, defaulting to the muted border. */
+	borderColor?: ThemeColor;
 	/** Collapse the markdown body to this many lines when `expanded` is false. Omit to never collapse. */
 	collapseAfterLines?: number;
 	customRenderer?: FramedRenderer<M>;
@@ -43,9 +47,9 @@ export interface RebuildFrameOptions<M extends FramedMessage> {
 
 /**
  * Attempt the custom renderer; on failure or undefined return, populate `box`
- * with the default outlined card — an `icon customType` header + markdown body —
- * and return undefined. When the custom renderer succeeds, return its Component
- * so the caller can mount it and skip the default box.
+ * with the configured outline, optional type header, and markdown body. When
+ * the custom renderer succeeds, return its Component so the caller can mount
+ * it and skip the default box.
  */
 export function renderFramedMessage<M extends FramedMessage>(opts: RebuildFrameOptions<M>): Component | undefined {
 	if (opts.customRenderer) {
@@ -59,11 +63,13 @@ export function renderFramedMessage<M extends FramedMessage>(opts: RebuildFrameO
 
 	opts.box.clear();
 	// Match the skill card: a subtle rounded outline so injected messages read as cards.
-	opts.box.setBorder({ chars: theme.boxRound, color: t => theme.fg("borderMuted", t) });
+	opts.box.setBorder({ chars: theme.boxRound, color: t => theme.fg(opts.borderColor ?? "borderMuted", t) });
 
-	const tag = opts.icon ? `${opts.icon} ${opts.message.customType}` : opts.message.customType;
-	opts.box.addChild(new Text(theme.fg("customMessageLabel", theme.bold(tag)), 0, 0));
-	opts.box.addChild(new Spacer(1));
+	if (!opts.hideHeader) {
+		const tag = opts.icon ? `${opts.icon} ${opts.message.customType}` : opts.message.customType;
+		opts.box.addChild(new Text(theme.fg("customMessageLabel", theme.bold(tag)), 0, 0));
+		opts.box.addChild(new Spacer(1));
+	}
 
 	let text: string;
 	if (typeof opts.message.content === "string") {

package/src/modes/components/session-account-selector.ts

@@ -0,0 +1,62 @@
+import { Container, type SelectItem, SelectList, type SgrMouseEvent, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
+import { getSelectListTheme, theme } from "../../modes/theme/theme";
+import type { SessionPinAccount } from "../../slash-commands/helpers/session-pin";
+import { DynamicBorder } from "./dynamic-border";
+
+const ACCOUNT_SELECTOR_MAX_VISIBLE = 10;
+const ACCOUNT_LIST_ROW_OFFSET = 4;
+
+/** Account picker opened by `/session pin` for the current model provider. */
+export class SessionAccountSelectorComponent extends Container {
+	#selectList: SelectList;
+
+	constructor(
+		providerName: string,
+		accounts: readonly SessionPinAccount[],
+		onSelect: (account: SessionPinAccount) => void,
+		onCancel: () => void,
+	) {
+		super();
+		const accountsByValue = new Map<string, SessionPinAccount>();
+		const items: SelectItem[] = accounts.map(account => {
+			const value = String(account.credentialId);
+			accountsByValue.set(value, account);
+			return {
+				value,
+				label: account.label,
+				description: account.active ? "active for this session" : undefined,
+			};
+		});
+
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+		this.addChild(new TruncatedText(theme.bold(`Select a ${providerName} account for this session:`)));
+		this.addChild(new Spacer(1));
+
+		this.#selectList = new SelectList(
+			items,
+			Math.min(Math.max(items.length, 1), ACCOUNT_SELECTOR_MAX_VISIBLE),
+			getSelectListTheme(),
+		);
+		const activeIndex = accounts.findIndex(account => account.active);
+		if (activeIndex >= 0) this.#selectList.setSelectedIndex(activeIndex);
+		this.#selectList.onSelect = item => {
+			const account = accountsByValue.get(item.value);
+			if (account) onSelect(account);
+		};
+		this.#selectList.onCancel = onCancel;
+		this.addChild(this.#selectList);
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+	}
+
+	/** Forward keyboard navigation and cancellation when the wrapper owns focus. */
+	handleInput(keyData: string): void {
+		this.#selectList.handleInput(keyData);
+	}
+
+	/** Route mouse selection through the title rows into the account list. */
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		this.#selectList.routeMouse(event, line - ACCOUNT_LIST_ROW_OFFSET, col);
+	}
+}

package/src/modes/components/tool-execution.ts

@@ -19,25 +19,10 @@ import { EDIT_MODE_STRATEGIES, type EditMode, type PerFileDiffPreview } from "..
 import type { Theme } from "../../modes/theme/theme";
 import { getThemeEpoch, theme } from "../../modes/theme/theme";
 import { BASH_DEFAULT_PREVIEW_LINES } from "../../tools/bash";
+import { formatDefaultToolExecution } from "../../tools/default-renderer";
 import { EVAL_DEFAULT_PREVIEW_LINES } from "../../tools/eval";
 import { isWaitingPollDetails } from "../../tools/hub";
-import {
-	formatArgsInline,
-	JSON_TREE_MAX_DEPTH_COLLAPSED,
-	JSON_TREE_MAX_DEPTH_EXPANDED,
-	JSON_TREE_MAX_LINES_COLLAPSED,
-	JSON_TREE_MAX_LINES_EXPANDED,
-	JSON_TREE_SCALAR_LEN_COLLAPSED,
-	JSON_TREE_SCALAR_LEN_EXPANDED,
-	renderJsonTreeLines,
-} from "../../tools/json-tree";
-import {
-	formatExpandHint,
-	formatStatusIcon,
-	replaceTabs,
-	resolveImageOptions,
-	truncateToWidth,
-} from "../../tools/render-utils";
+import { formatStatusIcon, replaceTabs, resolveImageOptions } from "../../tools/render-utils";
 import { type FirstResultViewportRepaint, toolRenderers } from "../../tools/renderers";
 import { TODO_STRIKE_TOTAL_FRAMES, type TodoToolDetails } from "../../tools/todo";
 import { isFramedBlockComponent, markFramedBlockComponent, renderStatusLine, WidthAwareText } from "../../tui";
@@ -402,7 +387,21 @@ export class ToolExecutionComponent extends Container implements NativeScrollbac
 		// strips PLAIN-blank edges, so framed/minimal blocks (no bg set) drop these
 		// lines and keep their tight spacing — only tinted lines survive.
 		this.#contentBox = new Box(0, 1);
-		this.#contentText = new WidthAwareText(contentWidth => this.#formatToolExecution(contentWidth), 1, 1);
+		this.#contentText = new WidthAwareText(
+			contentWidth =>
+				formatDefaultToolExecution(
+					{
+						label: this.#toolLabel,
+						args: this.#args,
+						result: this.#result ? { output: this.#getTextOutput(), isError: this.#result.isError } : undefined,
+						options: this.#renderState,
+					},
+					contentWidth,
+					theme,
+				),
+			1,
+			1,
+		);
 
 		// Use Box for custom tools or built-in tools that have renderers
 		const hasRenderer = toolName in toolRenderers;
@@ -1353,96 +1352,4 @@ export class ToolExecutionComponent extends Container implements NativeScrollbac
 
 		return output;
 	}
-
-	/**
-	 * Format a generic tool execution (fallback for tools without custom renderers)
-	 */
-	#formatToolExecution(contentWidth: number): string {
-		const lines: string[] = [];
-		const icon = this.#isPartial
-			? this.#spinnerFrame !== undefined
-				? "running"
-				: "pending"
-			: this.#result?.isError
-				? "error"
-				: "done";
-		lines.push(renderStatusLine({ icon, spinnerFrame: this.#spinnerFrame, title: this.#toolLabel }, theme));
-
-		const argsObject = this.#args && typeof this.#args === "object" ? (this.#args as Record<string, unknown>) : null;
-		if (!this.#expanded && argsObject && Object.keys(argsObject).length > 0) {
-			// Budget the inline preview against the render width, leaving room for
-			// the ` └─ ` connector prefix instead of a fixed cap.
-			const inlineBudget = Math.max(20, contentWidth - Bun.stringWidth(theme.tree.last) - 2);
-			const preview = formatArgsInline(argsObject, inlineBudget);
-			if (preview) {
-				lines.push(` ${theme.fg("dim", theme.tree.last)} ${theme.fg("dim", preview)}`);
-			}
-		}
-
-		if (this.#expanded && this.#args !== undefined) {
-			lines.push("");
-			lines.push(theme.fg("dim", "Args"));
-			const tree = renderJsonTreeLines(
-				this.#args,
-				theme,
-				JSON_TREE_MAX_DEPTH_EXPANDED,
-				JSON_TREE_MAX_LINES_EXPANDED,
-				JSON_TREE_SCALAR_LEN_EXPANDED,
-			);
-			lines.push(...tree.lines);
-			if (tree.truncated) {
-				lines.push(theme.fg("dim", "…"));
-			}
-			lines.push("");
-		}
-
-		if (!this.#result) {
-			return lines.join("\n");
-		}
-
-		const textContent = this.#getTextOutput().trimEnd();
-		if (!textContent) {
-			lines.push(theme.fg("dim", "(no output)"));
-			return lines.join("\n");
-		}
-
-		if (textContent.startsWith("{") || textContent.startsWith("[")) {
-			try {
-				const parsed = JSON.parse(textContent);
-				const maxDepth = this.#expanded ? JSON_TREE_MAX_DEPTH_EXPANDED : JSON_TREE_MAX_DEPTH_COLLAPSED;
-				const maxLines = this.#expanded ? JSON_TREE_MAX_LINES_EXPANDED : JSON_TREE_MAX_LINES_COLLAPSED;
-				const maxScalarLen = this.#expanded ? JSON_TREE_SCALAR_LEN_EXPANDED : JSON_TREE_SCALAR_LEN_COLLAPSED;
-				const tree = renderJsonTreeLines(parsed, theme, maxDepth, maxLines, maxScalarLen);
-
-				if (tree.lines.length > 0) {
-					lines.push(...tree.lines);
-					if (!this.#expanded) {
-						lines.push(formatExpandHint(theme, this.#expanded, true));
-					} else if (tree.truncated) {
-						lines.push(theme.fg("dim", "…"));
-					}
-					return lines.join("\n");
-				}
-			} catch {
-				// Fall through to raw output
-			}
-		}
-
-		const outputLines = textContent.split("\n");
-		const maxOutputLines = this.#expanded ? 12 : 4;
-		const displayLines = outputLines.slice(0, maxOutputLines);
-
-		for (const line of displayLines) {
-			lines.push(theme.fg("toolOutput", truncateToWidth(replaceTabs(line), contentWidth)));
-		}
-
-		if (outputLines.length > maxOutputLines) {
-			const remaining = outputLines.length - maxOutputLines;
-			lines.push(`${theme.fg("dim", `… ${remaining} more lines`)} ${formatExpandHint(theme, this.#expanded, true)}`);
-		} else if (!this.#expanded) {
-			lines.push(formatExpandHint(theme, this.#expanded, true));
-		}
-
-		return lines.join("\n");
-	}
 }