@nghyane/arcane 0.1.13 → 0.1.15

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

@@ -1,46 +1,12 @@
 import type { AgentTool } from "@nghyane/arcane-agent";
 import { sanitizeText } from "@nghyane/arcane-natives";
-import {
-	Box,
-	type Component,
-	Container,
-	getImageDimensions,
-	Image,
-	ImageProtocol,
-	imageFallback,
-	Spacer,
-	TERMINAL,
-	Text,
-	type TUI,
-} from "@nghyane/arcane-tui";
+import { Box, type Component, Container, Spacer, TERMINAL, Text, type TUI } from "@nghyane/arcane-tui";
 import { logger } from "@nghyane/arcane-utils";
 import { getProjectDir } from "@nghyane/arcane-utils/dirs";
-import type { Theme } from "../../modes/theme/theme";
-import { theme } from "../../modes/theme/theme";
-import {
-	computeEditDiff,
-	computeHashlineDiff,
-	computePatchDiff,
-	type EditDiffError,
-	type EditDiffResult,
-} from "../../patch";
-import { BASH_DEFAULT_PREVIEW_LINES } from "../../tools/bash";
-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 { PYTHON_DEFAULT_PREVIEW_LINES } from "../../tools/python";
-import { formatExpandHint, truncateToWidth } from "../../tools/render-utils";
-import { toolRenderers } from "../../tools/renderers";
-import { renderStatusLine } from "../../tui";
-import { convertToPng } from "../../utils/image-convert";
-import { renderDiff } from "./diff";
+import { theme } from "../../theme/theme";
+import { defaultRenderer } from "../../tools/default-renderer";
+import type { ToolTier } from "../../ui/render-utils";
+import { ToolImageDisplay } from "./tool-image-display";
 
 function ensureInvalidate(component: unknown): Component {
 	const c = component as { render: Component["render"]; invalidate?: () => void };
@@ -61,8 +27,7 @@ function cloneToolArgs<T>(args: T): T {
 
 export interface ToolExecutionOptions {
 	showImages?: boolean; // default: true (only used if terminal supports images)
-	editFuzzyThreshold?: number;
-	editAllowFuzzy?: boolean;
+	tier?: ToolTier;
 }
 
 export interface ToolExecutionHandle {
@@ -84,20 +49,17 @@ export interface ToolExecutionHandle {
  * Component that renders a tool call with its result (updateable)
  */
 export class ToolExecutionComponent extends Container {
-	#contentBox: Box; // Used for custom tools and bash visual truncation
-	#contentText: Text; // For built-in tools (with its own padding/bg)
-	#imageComponents: Image[] = [];
-	#imageSpacers: Spacer[] = [];
+	#contentBox: Box;
+	#topSpacer?: Spacer;
+	#tier: ToolTier;
+	#imageDisplay: ToolImageDisplay;
 	#toolName: string;
 	#toolLabel: string;
+	#tool: AgentTool | undefined;
 	#args: any;
 	#expanded = false;
 	#showImages: boolean;
-	#editFuzzyThreshold: number | undefined;
-	#editAllowFuzzy: boolean | undefined;
 	#isPartial = true;
-	#compact: boolean;
-	#tool?: AgentTool;
 	#ui: TUI;
 	#cwd: string;
 	#result?: {
@@ -105,11 +67,9 @@ export class ToolExecutionComponent extends Container {
 		isError?: boolean;
 		details?: any;
 	};
-	// Cached edit diff preview (computed when args arrive, before tool executes)
-	#editDiffPreview?: EditDiffResult | EditDiffError;
-	#editDiffArgsKey?: string; // Track which args the preview is for
-	// Cached converted images for Kitty protocol (which requires PNG), keyed by index
-	#convertedImages: Map<number, { data: string; mimeType: string }> = new Map();
+	// Tool-specific state from onArgsComplete (e.g. edit diff preview)
+	#toolState?: unknown;
+	#toolStateKey?: string;
 	// Spinner animation for partial task results
 	#spinnerFrame = 0;
 	#spinnerInterval?: NodeJS.Timeout;
@@ -119,12 +79,23 @@ export class ToolExecutionComponent extends Container {
 		spinnerFrame: number;
 		expanded: boolean;
 		isPartial: boolean;
+		label?: string;
 		renderContext?: Record<string, unknown>;
 	} = {
 		spinnerFrame: 0,
 		expanded: false,
 		isPartial: true,
 	};
+	// Cached components to avoid clear+rebuild flicker
+	#structureKey = "";
+	#cachedCallComponent?: Component;
+	#cachedResultComponent?: Component;
+	// Mutable result ref for subagent closures to read fresh data
+	#resultRef: {
+		content: Array<{ type: string; text?: string; data?: string; mimeType?: string }>;
+		details?: any;
+		isError?: boolean;
+	} = { content: [] };
 
 	constructor(
 		toolName: string,
@@ -133,45 +104,46 @@ export class ToolExecutionComponent extends Container {
 		tool: AgentTool | undefined,
 		ui: TUI,
 		cwd: string = getProjectDir(),
-		{ compact = false }: { compact?: boolean } = {},
 	) {
 		super();
 		this.#toolName = toolName;
 		this.#toolLabel = tool?.label ?? toolName;
+		this.#tool = tool;
 		this.#args = cloneToolArgs(args);
 		this.#showImages = options.showImages ?? true;
-		this.#editFuzzyThreshold = options.editFuzzyThreshold;
-		this.#editAllowFuzzy = options.editAllowFuzzy;
-		this.#compact = compact;
-		this.#tool = tool;
 		this.#ui = ui;
 		this.#cwd = cwd;
+		this.#imageDisplay = new ToolImageDisplay(this, () => {
+			this.#updateDisplay();
+			this.#ui.requestRender();
+		});
 
-		if (!compact) {
-			this.addChild(new Spacer(1));
-		}
-
-		// Always create both - contentBox for custom tools/bash/tools with renderers, contentText for other built-ins
-		const px = compact ? 0 : 1;
-		const py = compact ? 0 : 1;
-		const initialBg = compact ? undefined : (text: string) => theme.bg("toolPendingBg", text);
-		this.#contentBox = new Box(px, py, initialBg);
-		this.#contentText = new Text("", px, py, initialBg);
-
-		// Use Box for custom tools or built-in tools that have renderers
-		const hasRenderer = toolName in toolRenderers;
-		const hasCustomRenderer = !!(tool?.renderCall || tool?.renderResult);
-		if (hasCustomRenderer || hasRenderer) {
+		this.#tier = options.tier ?? "default";
+		const tier = this.#tier;
+		if (tier === "quiet") {
+			this.#contentBox = new Box(0, 0);
 			this.addChild(this.#contentBox);
 		} else {
-			this.addChild(this.#contentText);
+			this.#topSpacer = new Spacer(1);
+			this.addChild(this.#topSpacer);
+			this.#contentBox = new Box(2, 0);
+			this.addChild(this.#contentBox);
 		}
 
 		this.#updateDisplay();
 	}
 
+	setMarginTop(lines: number): void {
+		if (this.#topSpacer) {
+			this.#topSpacer.setLines(lines);
+		}
+	}
+
 	updateArgs(args: any, _toolCallId?: string): void {
 		this.#args = cloneToolArgs(args);
+		// Force call component rebuild — renderCall returns static content
+		// that won't update on invalidate alone
+		this.#structureKey = "";
 		this.#updateSpinnerAnimation();
 		this.#updateDisplay();
 	}
@@ -183,76 +155,22 @@ export class ToolExecutionComponent extends Container {
 	setArgsComplete(_toolCallId?: string): void {
 		this.#argsComplete = true;
 		this.#updateSpinnerAnimation();
-		this.#maybeComputeEditDiff();
+		this.#callOnArgsComplete();
 	}
 
 	/**
-	 * Compute edit diff preview when we have complete args.
-	 * This runs async and updates display when done.
+	 * Delegate to tool.onArgsComplete when args are fully streamed.
+	 * Stores result in #toolState for use by buildRenderContext.
 	 */
-	#maybeComputeEditDiff(): void {
-		if (this.#toolName !== "edit") return;
-
-		const path = this.#args?.path;
-		const op = this.#args?.op;
-
-		if (op) {
-			const diff = this.#args?.diff;
-			const rename = this.#args?.rename;
-			if (!path) return;
-
-			const argsKey = JSON.stringify({ path, op, rename, diff });
-			if (this.#editDiffArgsKey === argsKey) return;
-			this.#editDiffArgsKey = argsKey;
-
-			computePatchDiff({ path, op, rename, diff }, this.#cwd, {
-				fuzzyThreshold: this.#editFuzzyThreshold,
-				allowFuzzy: this.#editAllowFuzzy,
-			}).then(result => {
-				if (this.#editDiffArgsKey === argsKey) {
-					this.#editDiffPreview = result;
-					this.#updateDisplay();
-					this.#ui.requestRender();
-				}
-			});
-			return;
-		}
-		const edits = this.#args?.edits;
-		if (path && Array.isArray(edits)) {
-			const argsKey = JSON.stringify({ path, edits });
-			if (this.#editDiffArgsKey === argsKey) return;
-			this.#editDiffArgsKey = argsKey;
-
-			computeHashlineDiff({ path, edits }, this.#cwd).then(result => {
-				if (this.#editDiffArgsKey === argsKey) {
-					this.#editDiffPreview = result;
-					this.#updateDisplay();
-					this.#ui.requestRender();
-				}
-			});
-			return;
-		}
-
-		const oldText = this.#args?.old_text;
-		const newText = this.#args?.new_text;
-		const all = this.#args?.all;
-
-		// Need all three params to compute diff
-		if (!path || oldText === undefined || newText === undefined) return;
-
-		// Create a key to track which args this computation is for
-		const argsKey = JSON.stringify({ path, oldText, newText, all });
-
-		// Skip if we already computed for these exact args
-		if (this.#editDiffArgsKey === argsKey) return;
-
-		this.#editDiffArgsKey = argsKey;
-
-		// Compute diff async
-		computeEditDiff(path, oldText, newText, this.#cwd, true, all, this.#editFuzzyThreshold).then(result => {
-			// Only update if args haven't changed since we started
-			if (this.#editDiffArgsKey === argsKey) {
-				this.#editDiffPreview = result;
+	#callOnArgsComplete(): void {
+		if (!this.#tool?.onArgsComplete) return;
+		const argsKey = JSON.stringify(this.#args);
+		if (this.#toolStateKey === argsKey) return;
+		this.#toolStateKey = argsKey;
+
+		this.#tool.onArgsComplete(this.#args, this.#cwd).then(state => {
+			if (this.#toolStateKey === argsKey) {
+				this.#toolState = state;
 				this.#updateDisplay();
 				this.#ui.requestRender();
 			}
@@ -276,8 +194,7 @@ export class ToolExecutionComponent extends Container {
 		}
 		this.#updateSpinnerAnimation();
 		this.#updateDisplay();
-		// Convert non-PNG images to PNG for Kitty protocol (async)
-		this.#maybeConvertImagesForKitty();
+		this.#imageDisplay.convertForKitty(this.#getAllImageBlocks());
 	}
 
 	/**
@@ -291,47 +208,13 @@ export class ToolExecutionComponent extends Container {
 		return [...contentImages, ...detailImages];
 	}
 
-	/**
-	 * Convert non-PNG images to PNG for Kitty graphics protocol.
-	 * Kitty requires PNG format (f=100), so JPEG/GIF/WebP won't display.
-	 */
-	#maybeConvertImagesForKitty(): void {
-		// Only needed for Kitty protocol
-		if (TERMINAL.imageProtocol !== ImageProtocol.Kitty) return;
-		if (!this.#result) return;
-
-		const imageBlocks = this.#getAllImageBlocks();
-
-		for (let i = 0; i < imageBlocks.length; i++) {
-			const img = imageBlocks[i];
-			if (!img.data || !img.mimeType) continue;
-			// Skip if already PNG or already converted
-			if (img.mimeType === "image/png") continue;
-			if (this.#convertedImages.has(i)) continue;
-
-			// Convert async - catch errors from processing
-			const index = i;
-			convertToPng(img.data, img.mimeType)
-				.then(converted => {
-					if (converted) {
-						this.#convertedImages.set(index, converted);
-						this.#updateDisplay();
-						this.#ui.requestRender();
-					}
-				})
-				.catch(() => {
-					// Ignore conversion failures - display will use original image format
-				});
-		}
-	}
-
 	/**
 	 * Start or stop spinner animation based on whether this is a partial task result.
 	 */
 	#updateSpinnerAnimation(): void {
 		// Spinner for: task tool with partial result, or edit/write while args streaming
 		const isStreamingArgs = !this.#argsComplete && (this.#toolName === "edit" || this.#toolName === "write");
-		const isPartialTask = this.#isPartial && this.#toolName === "task";
+		const isPartialTask = this.#isPartial && this.#tool?.mergeCallAndResult === true;
 		const needsSpinner = isStreamingArgs || isPartialTask;
 		if (needsSpinner && !this.#spinnerInterval) {
 			this.#spinnerInterval = setInterval(() => {
@@ -359,6 +242,7 @@ export class ToolExecutionComponent extends Container {
 	}
 
 	setExpanded(expanded: boolean): void {
+		if (this.#expanded === expanded) return;
 		this.#expanded = expanded;
 		this.#updateDisplay();
 	}
@@ -373,130 +257,67 @@ export class ToolExecutionComponent extends Container {
 		this.#updateDisplay();
 	}
 
-	#getBgFn(): ((text: string) => string) | undefined {
-		if (this.#compact) return undefined;
-		if (this.#isPartial) return (text: string) => theme.bg("toolPendingBg", text);
-		if (this.#result?.isError) return (text: string) => theme.bg("toolErrorBg", text);
-		return (text: string) => theme.bg("toolSuccessBg", text);
-	}
-
 	#updateDisplay(): void {
-		const bgFn = this.#getBgFn();
-
 		// Sync shared mutable render state for component closures
 		this.#renderState.expanded = this.#expanded;
 		this.#renderState.isPartial = this.#isPartial;
 		this.#renderState.spinnerFrame = this.#spinnerFrame;
+		this.#renderState.label = this.#toolLabel;
 
-		// Check for custom tool rendering
-		if (this.#tool && (this.#tool.renderCall || this.#tool.renderResult)) {
-			const tool = this.#tool;
-			const mergeCallAndResult = Boolean((tool as { mergeCallAndResult?: boolean }).mergeCallAndResult);
-			// Custom tools use Box for flexible component rendering
-			const inline = Boolean((tool as { inline?: boolean }).inline);
-			this.#contentBox.setBgFn(inline ? undefined : bgFn);
-			this.#contentBox.clear();
+		const mergeCallAndResult = this.#tool?.mergeCallAndResult ?? true;
 
-			// Render call component
-			const shouldRenderCall = !this.#result || !mergeCallAndResult;
-			if (shouldRenderCall && tool.renderCall) {
-				try {
-					const callComponent = tool.renderCall(this.#getCallArgsForRender(), this.#renderState, theme);
-					if (callComponent) {
-						this.#contentBox.addChild(ensureInvalidate(callComponent));
-					}
-				} catch (err) {
-					logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
-					// Fall back to default on error
-					this.#contentBox.addChild(new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
-				}
-			} else {
-				// No custom renderCall, show tool name
-				this.#contentBox.addChild(new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
-			}
+		// Determine which components are needed
+		const needsCall = !this.#result || !mergeCallAndResult;
+		const needsResult = !!this.#result;
+		const structureKey = `${needsCall}|${needsResult}|${!!this.#toolState}`;
+
+		// Update mutable result ref so existing closures read fresh data
+		if (this.#result) {
+			this.#resultRef.content = this.#result.content as any;
+			this.#resultRef.details = this.#result.details;
+			this.#resultRef.isError = this.#result.isError;
+		}
+
+		if (structureKey !== this.#structureKey) {
+			// Structure changed — rebuild components
+			this.#structureKey = structureKey;
+			this.#contentBox.clear();
+			this.#cachedCallComponent = undefined;
+			this.#cachedResultComponent = undefined;
 
-			// Render result component if we have a result
-			if (this.#result && tool.renderResult) {
+			if (needsCall) {
 				try {
-					const renderResult = tool.renderResult as (
-						result: { content: Array<{ type: string; text?: string }>; details?: unknown; isError?: boolean },
-						options: { expanded: boolean; isPartial: boolean; spinnerFrame?: number },
-						theme: Theme,
-						args?: unknown,
-					) => Component;
-					const resultComponent = renderResult(
-						{
-							content: this.#result.content as any,
-							details: this.#result.details,
-							isError: this.#result.isError,
-						},
+					const comp = (this.#tool?.renderCall ?? defaultRenderer.renderCall)(
+						this.#getCallArgsForRender(),
 						this.#renderState,
 						theme,
-						this.#args,
 					);
-					if (resultComponent) {
-						this.#contentBox.addChild(ensureInvalidate(resultComponent));
+					if (comp) {
+						this.#cachedCallComponent = ensureInvalidate(comp);
+						this.#contentBox.addChild(this.#cachedCallComponent);
 					}
 				} catch (err) {
 					logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
-					// Fall back to showing raw output on error
-					const output = this.#getTextOutput();
-					if (output) {
-						this.#contentBox.addChild(new Text(theme.fg("toolOutput", output), 0, 0));
-					}
-				}
-			} else if (this.#result) {
-				// Has result but no custom renderResult
-				const output = this.#getTextOutput();
-				if (output) {
-					this.#contentBox.addChild(new Text(theme.fg("toolOutput", output), 0, 0));
+					this.#cachedCallComponent = new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0);
+					this.#contentBox.addChild(this.#cachedCallComponent);
 				}
 			}
-		} else if (this.#toolName in toolRenderers) {
-			// Built-in tools with renderers
-			const renderer = toolRenderers[this.#toolName];
-			// Inline renderers skip background styling
-			this.#contentBox.setBgFn(renderer.inline ? undefined : bgFn);
-			this.#contentBox.clear();
 
-			const shouldRenderCall = !this.#result || !renderer.mergeCallAndResult;
-			if (shouldRenderCall) {
-				// Render call component
+			if (needsResult) {
 				try {
-					const callComponent = renderer.renderCall(this.#getCallArgsForRender(), this.#renderState, theme);
-					if (callComponent) {
-						this.#contentBox.addChild(ensureInvalidate(callComponent));
-					}
-				} catch (err) {
-					logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
-					// Fall back to default on error
-					this.#contentBox.addChild(new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
-				}
-			}
-
-			// Render result component if we have a result
-			if (this.#result) {
-				try {
-					// Build render context for tools that need extra state
-					const renderContext = this.#buildRenderContext();
-					this.#renderState.renderContext = renderContext;
-
-					const resultComponent = renderer.renderResult(
-						{
-							content: this.#result.content as any,
-							details: this.#result.details,
-							isError: this.#result.isError,
-						},
+					this.#renderState.renderContext = this.#buildRenderContext();
+					const comp = (this.#tool?.renderResult ?? defaultRenderer.renderResult)(
+						this.#resultRef as any,
 						this.#renderState,
 						theme,
-						this.#args, // Pass args for tools that need them
+						this.#args,
 					);
-					if (resultComponent) {
-						this.#contentBox.addChild(ensureInvalidate(resultComponent));
+					if (comp) {
+						this.#cachedResultComponent = ensureInvalidate(comp);
+						this.#contentBox.addChild(this.#cachedResultComponent);
 					}
 				} catch (err) {
 					logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
-					// Fall back to showing raw output on error
 					const output = this.#getTextOutput();
 					if (output) {
 						this.#contentBox.addChild(new Text(theme.fg("toolOutput", output), 0, 0));
@@ -504,93 +325,38 @@ export class ToolExecutionComponent extends Container {
 				}
 			}
 		} else {
-			// Other built-in tools: use Text directly with caching
-			this.#contentText.setCustomBgFn(bgFn);
-			this.#contentText.setText(this.#formatToolExecution());
+			// Structure unchanged — invalidate existing components so they re-render
+			this.#renderState.renderContext = this.#buildRenderContext();
+			this.#cachedCallComponent?.invalidate();
+			this.#cachedResultComponent?.invalidate();
 		}
 
-		// Handle images (same for both custom and built-in)
-		for (const img of this.#imageComponents) {
-			this.removeChild(img);
-		}
-		this.#imageComponents = [];
-		for (const spacer of this.#imageSpacers) {
-			this.removeChild(spacer);
-		}
-		this.#imageSpacers = [];
-
+		// Handle images
 		if (this.#result) {
-			const imageBlocks = this.#getAllImageBlocks();
-
-			for (let i = 0; i < imageBlocks.length; i++) {
-				const img = imageBlocks[i];
-				if (TERMINAL.imageProtocol && this.#showImages && img.data && img.mimeType) {
-					// Use converted PNG for Kitty protocol if available
-					const converted = this.#convertedImages.get(i);
-					const imageData = converted?.data ?? img.data;
-					const imageMimeType = converted?.mimeType ?? img.mimeType;
-
-					// For Kitty, skip non-PNG images that haven't been converted yet
-					if (TERMINAL.imageProtocol === ImageProtocol.Kitty && imageMimeType !== "image/png") {
-						continue;
-					}
-
-					const spacer = new Spacer(1);
-					this.addChild(spacer);
-					this.#imageSpacers.push(spacer);
-					const imageComponent = new Image(
-						imageData,
-						imageMimeType,
-						{ fallbackColor: (s: string) => theme.fg("toolOutput", s) },
-						{ maxWidthCells: 60 },
-					);
-					this.#imageComponents.push(imageComponent);
-					this.addChild(imageComponent);
-				}
-			}
+			this.#imageDisplay.update(this.#getAllImageBlocks(), this.#showImages, (s: string) =>
+				theme.fg("toolOutput", s),
+			);
 		}
 	}
 
 	#getCallArgsForRender(): any {
-		if (this.#toolName !== "edit") {
-			return this.#args;
-		}
-		if (!this.#editDiffPreview || !("diff" in this.#editDiffPreview) || !this.#editDiffPreview.diff) {
-			return this.#args;
-		}
-		return { ...(this.#args as Record<string, unknown>), previewDiff: this.#editDiffPreview.diff };
+		return this.#args;
 	}
 
 	/**
-	 * Build render context for tools that need extra state (bash, python, edit)
+	 * Build render context. Delegates to tool.buildRenderContext if defined.
 	 */
 	#buildRenderContext(): Record<string, unknown> {
-		const context: Record<string, unknown> = {};
-		const normalizeTimeoutSeconds = (value: unknown, maxSeconds: number): number | undefined => {
-			if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
-			return Math.max(1, Math.min(maxSeconds, value));
-		};
-
-		if (this.#toolName === "bash" && this.#result) {
-			// Pass raw output and expanded state - renderer handles width-aware truncation
-			const output = this.#getTextOutput().trimEnd();
-			context.output = output;
-			context.expanded = this.#expanded;
-			context.previewLines = BASH_DEFAULT_PREVIEW_LINES;
-			context.timeout = normalizeTimeoutSeconds(this.#args?.timeout, 3600);
-		} else if (this.#toolName === "python" && this.#result) {
-			const output = this.#getTextOutput().trimEnd();
-			context.output = output;
-			context.expanded = this.#expanded;
-			context.previewLines = PYTHON_DEFAULT_PREVIEW_LINES;
-			context.timeout = normalizeTimeoutSeconds(this.#args?.timeout, 600);
-		} else if (this.#toolName === "edit") {
-			// Edit needs diff preview and renderDiff function
-			context.editDiffPreview = this.#editDiffPreview;
-			context.renderDiff = renderDiff;
+		if (this.#tool?.buildRenderContext) {
+			return this.#tool.buildRenderContext({
+				args: this.#args,
+				result: this.#result as any,
+				toolState: this.#toolState,
+				expanded: this.#expanded,
+				getTextOutput: () => this.#getTextOutput(),
+			});
 		}
-
-		return context;
+		return {};
 	}
 
 	#getTextOutput(): string {
@@ -606,98 +372,10 @@ export class ToolExecutionComponent extends Container {
 			.join("\n");
 
 		if (imageBlocks.length > 0 && (!TERMINAL.imageProtocol || !this.#showImages)) {
-			const imageIndicators = imageBlocks
-				.map((img: any) => {
-					const dims = img.data ? (getImageDimensions(img.data, img.mimeType) ?? undefined) : undefined;
-					return imageFallback(img.mimeType, dims);
-				})
-				.join("\n");
+			const imageIndicators = ToolImageDisplay.fallbackText(imageBlocks);
 			output = output ? `${output}\n${imageIndicators}` : imageIndicators;
 		}
 
 		return output;
 	}
-
-	/**
-	 * Format a generic tool execution (fallback for tools without custom renderers)
-	 */
-	#formatToolExecution(): string {
-		const lines: string[] = [];
-		const icon = this.#isPartial ? "pending" : this.#result?.isError ? "error" : "success";
-		lines.push(renderStatusLine({ icon, 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) {
-			const preview = formatArgsInline(argsObject, 70);
-			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(line, 80)));
-		}
-
-		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");
-	}
 }