import {
	Box,
	Container,
	getCapabilities,
	Image,
	type ImageDimensions,
	imageFallback,
	Spacer,
	Text,
	type TUI,
	truncateToWidth,
	visibleWidth,
} from "@singularity-forge/tui";
import stripAnsi from "strip-ansi";
import type { ToolDefinition } from "../../../core/extensions/types.js";
import {
	computeEditDiff,
	type EditDiffError,
	type EditDiffResult,
} from "../../../core/tools/edit-diff.js";
import { allTools } from "../../../core/tools/index.js";
import {
	DEFAULT_MAX_BYTES,
	DEFAULT_MAX_LINES,
	formatSize,
} from "../../../core/tools/truncate.js";
import { convertToPng } from "../../../utils/image-convert.js";
import { sanitizeBinaryOutput } from "../../../utils/shell.js";
import { getLanguageFromPath, highlightCode, theme } from "../theme/theme.js";
import { shortenPath } from "../utils/shorten-path.js";
import { renderDiff } from "./diff.js";
import { keyHint } from "./keybinding-hints.js";
import { formatTimestamp } from "./timestamp.js";
import { truncateToVisualLines } from "./visual-truncate.js";

// Preview line limit for bash when not expanded
const BASH_PREVIEW_LINES = 5;
// During partial write tool-call streaming, re-highlight the first N lines fully
// to keep multiline tokenization mostly correct without re-highlighting the full file.
const WRITE_PARTIAL_FULL_HIGHLIGHT_LINES = 50;

/**
 * Replace tabs with spaces for consistent rendering
 */
function replaceTabs(text: string): string {
	return text.replace(/\t/g, "    ");
}

/**
 * Normalize control characters for terminal preview rendering.
 * Keep tool arguments unchanged, sanitize only display text.
 */
function normalizeDisplayText(text: string): string {
	return text.replace(/\r/g, "");
}

/** Safely coerce value to string for display. Returns null if invalid type. */
function str(value: unknown): string | null {
	if (typeof value === "string") return value;
	if (value == null) return "";
	return null; // Invalid type
}

/**
 * Split an adapter-surfaced MCP tool name (`mcp__<server>__<tool>`) into its parts.
 * Returns null for non-prefixed names. Duplicated from the claude-code-cli
 * extension (parseMcpToolName) so this package doesn't have to import across
 * the resources/extensions boundary.
 */
function parseMcpToolName(
	name: string,
): { server: string; tool: string } | null {
	if (!name.startsWith("mcp__")) return null;
	const rest = name.slice("mcp__".length);
	const delim = rest.indexOf("__");
	if (delim <= 0 || delim === rest.length - 2) return null;
	return { server: rest.slice(0, delim), tool: rest.slice(delim + 2) };
}

/**
 * Prettify a raw tool name for display. Prefers the registered `label`
 * ("Complete Slice") when available; otherwise strips a leading `sf_`
 * prefix and converts snake_case to Title Case.
 */
function prettifyToolName(name: string, label?: string): string {
	if (label && label.trim().length > 0) return label;
	const stripped = name.replace(/^sf_/, "");
	if (stripped.length === 0) return name;
	return stripped
		.split("_")
		.map((word) =>
			word.length === 0 ? word : word[0].toUpperCase() + word.slice(1),
		)
		.join(" ");
}

type ToolFrameTone = "pending" | "success" | "error";

function trimOuterBlankLines(lines: string[]): string[] {
	let start = 0;
	let end = lines.length;
	while (start < end && lines[start].trim().length === 0) start++;
	while (end > start && lines[end - 1].trim().length === 0) end--;
	return lines.slice(start, end);
}

function renderToolFrame(
	contentLines: string[],
	width: number,
	opts: {
		label: string;
		status: string;
		tone: ToolFrameTone;
		modelLabel?: string;
		startedAt?: number;
	},
): string[] {
	const outerWidth = Math.max(20, width);
	const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content

	const borderColor = opts.tone === "error" ? "error" : "toolTitle";
	const topColor = opts.tone === "error" ? "error" : "toolTitle";
	const labelColor = opts.tone === "error" ? "error" : "toolTitle";
	const statusColor =
		opts.tone === "error"
			? "error"
			: opts.tone === "pending"
				? "warning"
				: "success";
	const border = (s: string) => theme.fg(borderColor, s);

	const leftStyled = theme.fg(labelColor, theme.bold(`• ${opts.label}`));
	const statusStyled = theme.fg(statusColor, opts.status);
	let rightStyled = statusStyled;
	if (opts.startedAt !== undefined) {
		rightStyled = `${theme.fg("dim", formatTimestamp(opts.startedAt, "date-time-iso"))}${theme.fg("dim", " · ")}${rightStyled}`;
	}
	if (opts.modelLabel) {
		const separatorStyled = theme.fg("dim", " · ");
		const modelWidth =
			outerWidth -
			visibleWidth(leftStyled) -
			visibleWidth(separatorStyled) -
			visibleWidth(statusStyled) -
			2;
		if (modelWidth >= 8) {
			const modelStyled = truncateToWidth(
				theme.fg("dim", `model ${opts.modelLabel}`),
				modelWidth,
				theme.fg("dim", "…"),
			);
			rightStyled = `${modelStyled}${separatorStyled}${statusStyled}`;
		}
	}
	const gap = Math.max(
		1,
		outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled),
	);
	const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
	const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));

	const sourceLines = trimOuterBlankLines(contentLines);
	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map(
		(line) => {
			const clipped = truncateToWidth(line, contentWidth, "");
			return border("│ ") + clipped;
		},
	);

	return [
		theme.fg(topColor, "─".repeat(outerWidth)),
		headerRow + " ".repeat(headerPad),
		...bodyLines,
	];
}
const COMPACT_ARG_VALUE_LIMIT = 60;
const GENERIC_OUTPUT_PREVIEW_LINES = 10;
const GENERIC_ARGS_JSON_PREVIEW_LINES = 10;

/**
 * Format tool args for the generic-renderer fallback. Produces a one-line
 * `k=v, k=v` summary when every value is a primitive that fits inline; falls
 * back to a truncated JSON dump for structurally complex args.
 */
function formatCompactArgs(args: unknown, expanded: boolean): string {
	if (args == null) return "";
	if (typeof args !== "object") return String(args);

	const entries = Object.entries(args as Record<string, unknown>);
	if (entries.length === 0) return "";

	const allPrimitive = entries.every(([, value]) => {
		const t = typeof value;
		return t === "number" || t === "boolean" || t === "string" || value == null;
	});

	if (allPrimitive) {
		return entries
			.map(([key, value]) => {
				if (typeof value === "string") {
					const truncated =
						!expanded && value.length > COMPACT_ARG_VALUE_LIMIT
							? `${value.slice(0, COMPACT_ARG_VALUE_LIMIT - 1)}…`
							: value;
					return `${key}=${JSON.stringify(truncated)}`;
				}
				if (value == null) return `${key}=null`;
				return `${key}=${String(value)}`;
			})
			.join(", ");
	}

	// Complex args: show truncated JSON.
	const lines = JSON.stringify(args, null, 2).split("\n");
	const maxLines = expanded ? lines.length : GENERIC_ARGS_JSON_PREVIEW_LINES;
	if (lines.length <= maxLines) return lines.join("\n");
	return lines.slice(0, maxLines).join("\n") + "\n...";
}

export interface ToolExecutionOptions {
	showImages?: boolean; // default: true (only used if terminal supports images)
	modelLabel?: string;
	startedAt?: number;
}

type WriteHighlightCache = {
	rawPath: string | null;
	lang: string;
	rawContent: string;
	normalizedLines: string[];
	highlightedLines: string[];
};

/**
 * Component that renders a tool call with its result (updateable)
 */
export class ToolExecutionComponent extends Container {
	private contentBox: Box; // Used for custom tools and bash visual truncation
	private contentText: Text; // For built-in tools (with its own padding/bg)
	private imageComponents: Image[] = [];
	private imageSpacers: Spacer[] = [];
	private toolName: string;
	private args: any;
	private expanded = false;
	private showImages: boolean;
	private modelLabel?: string;
	private startedAt: number;
	private isPartial = true;
	private toolDefinition?: ToolDefinition;
	private ui: TUI;
	private cwd: string;
	private result?: {
		content: Array<{
			type: string;
			text?: string;
			data?: string;
			mimeType?: string;
		}>;
		isError: boolean;
		details?: any;
	};
	// Cached edit diff preview (computed when args arrive, before tool executes)
	private editDiffPreview?: EditDiffResult | EditDiffError;
	private editDiffArgsKey?: string; // Track which args the preview is for
	// Cached converted images for Kitty protocol (which requires PNG), keyed by index
	private convertedImages: Map<number, { data: string; mimeType: string }> =
		new Map();
	// Cached resolved image dimensions to avoid re-triggering async parsing
	// when updateDisplay() recreates Image components (#3455).
	private resolvedImageDimensions: Map<number, ImageDimensions> = new Map();
	// Incremental syntax highlighting cache for write tool call args
	private writeHighlightCache?: WriteHighlightCache;
	// When true, this component intentionally renders no lines
	private hideComponent = false;

	private get normalizedToolName(): string {
		return typeof this.toolName === "string" ? this.toolName.toLowerCase() : "";
	}

	constructor(
		toolName: string,
		args: any,
		options: ToolExecutionOptions = {},
		toolDefinition: ToolDefinition | undefined,
		ui: TUI,
		cwd: string = process.cwd(),
	) {
		super();
		this.toolName = toolName;
		this.args = args;
		this.showImages = options.showImages ?? true;
		this.modelLabel = options.modelLabel?.trim() || undefined;
		this.startedAt = options.startedAt ?? Date.now();
		this.toolDefinition = toolDefinition;
		this.ui = ui;
		this.cwd = cwd;

		this.addChild(new Spacer(1));

		// Always create both - contentBox for custom tools/bash, contentText for other built-ins
		this.contentBox = new Box(1, 1, (text: string) =>
			theme.bg("toolPendingBg", text),
		);
		this.contentText = new Text("", 1, 1, (text: string) =>
			theme.bg("toolPendingBg", text),
		);

		// Use contentBox for bash (visual truncation) or custom tools with custom renderers
		// Use contentText for built-in tools (including overrides without custom renderers)
		if (
			this.normalizedToolName === "bash" ||
			(toolDefinition && !this.shouldUseBuiltInRenderer())
		) {
			this.addChild(this.contentBox);
		} else {
			this.addChild(this.contentText);
		}

		this.updateDisplay();
	}

	/**
	 * Check if we should use built-in rendering for this tool.
	 * Returns true if the tool name is a built-in AND either there's no toolDefinition
	 * or the toolDefinition doesn't provide custom renderers.
	 */
	private shouldUseBuiltInRenderer(): boolean {
		const normalizedToolName = this.normalizedToolName;
		const isBuiltInName = normalizedToolName in allTools;
		const hasCustomRenderers =
			this.toolDefinition?.renderCall || this.toolDefinition?.renderResult;
		return isBuiltInName && !hasCustomRenderers;
	}

	dispose(): void {
		this.convertedImages.clear();
		this.imageComponents = [];
		this.imageSpacers = [];
		this.editDiffPreview = undefined;
		this.writeHighlightCache = undefined;
		this.result = undefined;
	}

	updateArgs(args: any): void {
		this.args = args;
		if (this.normalizedToolName === "write" && this.isPartial) {
			this.updateWriteHighlightCacheIncremental();
		}
		this.updateDisplay();
	}

	private highlightSingleLine(line: string, lang: string): string {
		const highlighted = highlightCode(line, lang);
		return highlighted[0] ?? "";
	}

	private refreshWriteHighlightPrefix(cache: WriteHighlightCache): void {
		const prefixCount = Math.min(
			WRITE_PARTIAL_FULL_HIGHLIGHT_LINES,
			cache.normalizedLines.length,
		);
		if (prefixCount === 0) return;

		const prefixSource = cache.normalizedLines.slice(0, prefixCount).join("\n");
		const prefixHighlighted = highlightCode(prefixSource, cache.lang);
		for (let i = 0; i < prefixCount; i++) {
			cache.highlightedLines[i] =
				prefixHighlighted[i] ??
				this.highlightSingleLine(cache.normalizedLines[i] ?? "", cache.lang);
		}
	}

	private rebuildWriteHighlightCacheFull(
		rawPath: string | null,
		fileContent: string,
	): void {
		const lang = rawPath ? getLanguageFromPath(rawPath) : undefined;
		if (!lang) {
			this.writeHighlightCache = undefined;
			return;
		}

		const displayContent = normalizeDisplayText(fileContent);
		const normalized = replaceTabs(displayContent);
		this.writeHighlightCache = {
			rawPath,
			lang,
			rawContent: fileContent,
			normalizedLines: normalized.split("\n"),
			highlightedLines: highlightCode(normalized, lang),
		};
	}

	private updateWriteHighlightCacheIncremental(): void {
		const rawPath = str(this.args?.file_path ?? this.args?.path);
		const fileContent = str(this.args?.content);
		if (rawPath === null || fileContent === null) {
			this.writeHighlightCache = undefined;
			return;
		}

		const lang = rawPath ? getLanguageFromPath(rawPath) : undefined;
		if (!lang) {
			this.writeHighlightCache = undefined;
			return;
		}

		if (!this.writeHighlightCache) {
			this.rebuildWriteHighlightCacheFull(rawPath, fileContent);
			return;
		}

		const cache = this.writeHighlightCache;
		if (cache.lang !== lang || cache.rawPath !== rawPath) {
			this.rebuildWriteHighlightCacheFull(rawPath, fileContent);
			return;
		}

		if (!fileContent.startsWith(cache.rawContent)) {
			this.rebuildWriteHighlightCacheFull(rawPath, fileContent);
			return;
		}

		if (fileContent.length === cache.rawContent.length) {
			return;
		}

		const deltaRaw = fileContent.slice(cache.rawContent.length);
		const deltaDisplay = normalizeDisplayText(deltaRaw);
		const deltaNormalized = replaceTabs(deltaDisplay);
		cache.rawContent = fileContent;

		if (cache.normalizedLines.length === 0) {
			cache.normalizedLines.push("");
			cache.highlightedLines.push("");
		}

		const segments = deltaNormalized.split("\n");
		const lastIndex = cache.normalizedLines.length - 1;
		cache.normalizedLines[lastIndex] += segments[0];
		cache.highlightedLines[lastIndex] = this.highlightSingleLine(
			cache.normalizedLines[lastIndex],
			cache.lang,
		);

		for (let i = 1; i < segments.length; i++) {
			cache.normalizedLines.push(segments[i]);
			cache.highlightedLines.push(
				this.highlightSingleLine(segments[i], cache.lang),
			);
		}

		this.refreshWriteHighlightPrefix(cache);
	}

	/**
	 * Signal that args are complete (tool is about to execute).
	 * This triggers diff computation for edit tool.
	 */
	setArgsComplete(): void {
		if (this.toolName === "Write") {
			const rawPath = str(this.args?.file_path ?? this.args?.path);
			const fileContent = str(this.args?.content);
			if (rawPath !== null && fileContent !== null) {
				this.rebuildWriteHighlightCacheFull(rawPath, fileContent);
			}
		}
		this.maybeComputeEditDiff();
	}

	/**
	 * Compute edit diff preview when we have complete args.
	 * This runs async and updates display when done.
	 */
	private maybeComputeEditDiff(): void {
		if (this.toolName !== "Edit") return;

		const path = this.args?.path;
		const oldText = this.args?.oldText;
		const newText = this.args?.newText;

		// 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 });

		// 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).then((result) => {
			// Only update if args haven't changed since we started
			if (this.editDiffArgsKey === argsKey) {
				this.editDiffPreview = result;
				this.updateDisplay();
				this.ui.requestRender();
			}
		});
	}

	updateResult(
		result: {
			content: Array<{
				type: string;
				text?: string;
				data?: string;
				mimeType?: string;
			}>;
			details?: any;
			isError: boolean;
		},
		isPartial = false,
	): void {
		this.result = result;
		this.isPartial = isPartial;
		if (this.normalizedToolName === "write" && !isPartial) {
			const rawPath = str(this.args?.file_path ?? this.args?.path);
			const fileContent = str(this.args?.content);
			if (rawPath !== null && fileContent !== null) {
				this.rebuildWriteHighlightCacheFull(rawPath, fileContent);
			}
		}
		this.updateDisplay();
		// Convert non-PNG images to PNG for Kitty protocol (async)
		this.maybeConvertImagesForKitty();
	}

	/**
	 * Finalize a pending tool call as failed/interrupted while preserving any streamed partial output.
	 */
	completeWithError(message?: string): void {
		this.isPartial = false;
		if (this.result) {
			let content = this.result.content;
			if (message) {
				const alreadyHasMessage = content.some(
					(block) => block.type === "text" && block.text === message,
				);
				if (!alreadyHasMessage) {
					content = [...content, { type: "text", text: message }];
				}
			}
			this.result = { ...this.result, content, isError: true };
		} else {
			this.result = {
				content: message ? [{ type: "text", text: message }] : [],
				isError: true,
			};
		}
		this.updateDisplay();
	}

	/**
	 * Convert non-PNG images to PNG for Kitty graphics protocol.
	 * Kitty requires PNG format (f=100), so JPEG/GIF/WebP won't display.
	 */
	private maybeConvertImagesForKitty(): void {
		const caps = getCapabilities();
		// Only needed for Kitty protocol
		if (caps.images !== "kitty") return;
		if (!this.result) return;

		const imageBlocks =
			this.result.content?.filter((c: any) => c.type === "image") || [];

		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
			const index = i;
			convertToPng(img.data, img.mimeType).then((converted) => {
				if (converted) {
					this.convertedImages.set(index, converted);
					this.updateDisplay();
					this.ui.requestRender();
				}
			});
		}
	}

	setExpanded(expanded: boolean): void {
		this.expanded = expanded;
		this.updateDisplay();
	}

	setShowImages(show: boolean): void {
		this.showImages = show;
		this.updateDisplay();
	}

	override invalidate(): void {
		super.invalidate();
		this.updateDisplay();
	}

	override render(width: number): string[] {
		if (this.hideComponent) {
			return [];
		}
		const frameWidth = Math.max(20, width);
		const contentWidth = Math.max(1, frameWidth - 4);
		const lines = super.render(contentWidth);
		const frameTone: ToolFrameTone = this.result?.isError
			? "error"
			: this.isPartial || !this.result
				? "pending"
				: "success";
		const frameStatus =
			this.isPartial || !this.result
				? "Running"
				: this.result.isError
					? "Error"
					: "Done";
		const parsed = parseMcpToolName(this.toolName);
		const frameLabel = parsed
			? `Tool ${parsed.server}·${parsed.tool}`
			: `Tool ${prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown"}`;
		const framed = renderToolFrame(lines, frameWidth, {
			label: frameLabel,
			status: frameStatus,
			tone: frameTone,
			modelLabel: this.modelLabel,
			startedAt: this.startedAt,
		});
		return framed.length > 0 ? ["", ...framed] : framed;
	}

	private updateDisplay(): void {
		// Set background based on state
		const bgFn = this.isPartial
			? (text: string) => theme.bg("toolPendingBg", text)
			: this.result?.isError
				? (text: string) => theme.bg("toolErrorBg", text)
				: (text: string) => theme.bg("toolSuccessBg", text);

		const useBuiltInRenderer = this.shouldUseBuiltInRenderer();
		let customRendererHasContent = false;
		this.hideComponent = false;

		// Use built-in rendering for built-in tools (or overrides without custom renderers)
		if (useBuiltInRenderer) {
			if (this.normalizedToolName === "bash") {
				// Bash uses Box with visual line truncation
				this.contentBox.setBgFn(bgFn);
				this.contentBox.clear();
				this.renderBashContent();
			} else {
				// Other built-in tools: use Text directly with caching
				this.contentText.setCustomBgFn(bgFn);
				this.contentText.setText(this.formatToolExecution());
			}
		} else if (this.toolDefinition) {
			// Custom tools use Box for flexible component rendering
			this.contentBox.setBgFn(bgFn);
			this.contentBox.clear();

			// Render call component
			if (this.toolDefinition.renderCall) {
				try {
					const callComponent = this.toolDefinition.renderCall(
						this.args,
						theme,
					);
					if (callComponent !== undefined) {
						this.contentBox.addChild(callComponent);
						customRendererHasContent = true;
					}
				} catch {
					// Fall back to default on error
					this.contentBox.addChild(
						new Text(theme.fg("toolTitle", theme.bold(this.toolName)), 0, 0),
					);
					customRendererHasContent = true;
				}
			} else {
				// No custom renderCall, show tool name
				this.contentBox.addChild(
					new Text(
						theme.fg(
							"toolTitle",
							theme.bold(
								prettifyToolName(this.toolName, this.toolDefinition.label),
							),
						),
						0,
						0,
					),
				);
				customRendererHasContent = true;
			}

			// Render result component if we have a result
			if (this.result && this.toolDefinition.renderResult) {
				try {
					const resultComponent = this.toolDefinition.renderResult(
						{
							content: this.result.content as any,
							details: this.result.details,
						},
						{ expanded: this.expanded, isPartial: this.isPartial },
						theme,
					);
					if (resultComponent !== undefined) {
						this.contentBox.addChild(resultComponent);
						customRendererHasContent = true;
					}
				} catch {
					// 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),
						);
						customRendererHasContent = true;
					}
				}
			} 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),
					);
					customRendererHasContent = true;
				}
			}
		} else {
			// Unknown tool with no registered definition - show generic fallback
			this.contentText.setCustomBgFn(bgFn);
			this.contentText.setText(this.formatToolExecution());
		}

		// 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 = [];

		if (this.result) {
			const imageBlocks =
				this.result.content?.filter((c: any) => c.type === "image") || [];
			const caps = getCapabilities();

			for (let i = 0; i < imageBlocks.length; i++) {
				const img = imageBlocks[i];
				if (caps.images && 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 (caps.images === "kitty" && imageMimeType !== "image/png") {
						continue;
					}

					const spacer = new Spacer(1);
					this.addChild(spacer);
					this.imageSpacers.push(spacer);
					// Pass cached dimensions to avoid re-triggering async parsing
					// when updateDisplay() recreates Image components (#3455).
					const cachedDims = this.resolvedImageDimensions.get(i);
					const imageComponent = new Image(
						imageData,
						imageMimeType,
						{ fallbackColor: (s: string) => theme.fg("toolOutput", s) },
						{ maxWidthCells: 60 },
						cachedDims,
					);
					if (!cachedDims) {
						const imgIdx = i;
						imageComponent.setOnDimensionsResolved(() => {
							// Cache resolved dimensions so future updateDisplay() calls
							// don't re-trigger async parsing → infinite loop (#3455).
							const dims = imageComponent.getDimensions?.();
							if (dims) this.resolvedImageDimensions.set(imgIdx, dims);
							// Just re-render — don't call updateDisplay() which would
							// destroy and recreate all Image components.
							this.ui.requestRender();
						});
					}
					this.imageComponents.push(imageComponent);
					this.addChild(imageComponent);
				}
			}
		}

		if (!useBuiltInRenderer && this.toolDefinition) {
			this.hideComponent =
				!customRendererHasContent && this.imageComponents.length === 0;
		}
	}

	/**
	 * Render bash content using visual line truncation (like bash-execution.ts)
	 */
	private renderBashContent(): void {
		const command = str(this.args?.command);
		const timeout = this.args?.timeout as number | undefined;

		// Header
		const timeoutSuffix = timeout
			? theme.fg("muted", ` (timeout ${timeout}s)`)
			: "";
		const commandDisplay =
			command === null
				? theme.fg("error", "[invalid arg]")
				: command
					? command
					: theme.fg("toolOutput", "...");
		this.contentBox.addChild(
			new Text(
				theme.fg("toolTitle", theme.bold(`$ ${commandDisplay}`)) +
					timeoutSuffix,
				0,
				0,
			),
		);

		if (this.result) {
			const output = this.getTextOutput().trim();

			if (output) {
				// Style each line for the output
				const styledOutput = output
					.split("\n")
					.map((line) => theme.fg("toolOutput", line))
					.join("\n");

				if (this.expanded) {
					// Show all lines when expanded
					this.contentBox.addChild(new Text(`\n${styledOutput}`, 0, 0));
				} else {
					// Use visual line truncation when collapsed with width-aware caching
					let cachedWidth: number | undefined;
					let cachedLines: string[] | undefined;
					let cachedSkipped: number | undefined;

					this.contentBox.addChild({
						render: (width: number) => {
							if (cachedLines === undefined || cachedWidth !== width) {
								const result = truncateToVisualLines(
									styledOutput,
									BASH_PREVIEW_LINES,
									width,
								);
								cachedLines = result.visualLines;
								cachedSkipped = result.skippedCount;
								cachedWidth = width;
							}
							if (cachedSkipped && cachedSkipped > 0) {
								const hint =
									theme.fg("muted", `... (${cachedSkipped} earlier lines,`) +
									` ${keyHint("expandTools", "to expand")})`;
								return [
									"",
									truncateToWidth(hint, width, "..."),
									...cachedLines,
								];
							}
							// Add blank line for spacing (matches expanded case)
							return ["", ...cachedLines];
						},
						invalidate: () => {
							cachedWidth = undefined;
							cachedLines = undefined;
							cachedSkipped = undefined;
						},
					});
				}
			}

			// Truncation warnings
			const truncation = this.result.details?.truncation;
			const fullOutputPath = this.result.details?.fullOutputPath;
			if (truncation?.truncated || fullOutputPath) {
				const warnings: string[] = [];
				if (fullOutputPath) {
					warnings.push(`Full output: ${fullOutputPath}`);
				}
				if (truncation?.truncated) {
					if (truncation.truncatedBy === "lines") {
						warnings.push(
							`Truncated: showing ${truncation.outputLines} of ${truncation.totalLines} lines`,
						);
					} else {
						warnings.push(
							`Truncated: ${truncation.outputLines} lines shown (${formatSize(truncation.maxBytes ?? DEFAULT_MAX_BYTES)} limit)`,
						);
					}
				}
				this.contentBox.addChild(
					new Text(
						`\n${theme.fg("warning", `[${warnings.join(". ")}]`)}`,
						0,
						0,
					),
				);
			}
		}
	}

	private getTextOutput(): string {
		if (!this.result) return "";

		const textBlocks =
			this.result.content?.filter((c: any) => c.type === "text") || [];
		const imageBlocks =
			this.result.content?.filter((c: any) => c.type === "image") || [];

		let output = textBlocks
			.map((c: any) => {
				// Use sanitizeBinaryOutput to handle binary data that crashes string-width
				return sanitizeBinaryOutput(stripAnsi(c.text || "")).replace(/\r/g, "");
			})
			.join("\n");

		const caps = getCapabilities();
		if (imageBlocks.length > 0 && (!caps.images || !this.showImages)) {
			const imageIndicators = imageBlocks
				.map((img: any) => {
					return imageFallback(img.mimeType);
				})
				.join("\n");
			output = output ? `${output}\n${imageIndicators}` : imageIndicators;
		}

		return output;
	}

	private formatToolExecution(): string {
		let text = "";
		const invalidArg = theme.fg("error", "[invalid arg]");
		const normalizedToolName = this.normalizedToolName;

		if (normalizedToolName === "read") {
			const rawPath = str(this.args?.file_path ?? this.args?.path);
			const path = rawPath !== null ? shortenPath(rawPath) : null;
			const offset = this.args?.offset;
			const limit = this.args?.limit;

			let pathDisplay =
				path === null
					? invalidArg
					: path
						? theme.fg("accent", path)
						: theme.fg("toolOutput", "...");
			if (offset !== undefined || limit !== undefined) {
				const startLine = offset ?? 1;
				const endLine = limit !== undefined ? startLine + limit - 1 : "";
				pathDisplay += theme.fg(
					"warning",
					`:${startLine}${endLine ? `-${endLine}` : ""}`,
				);
			}

			text = `${theme.fg("toolTitle", theme.bold("read"))} ${pathDisplay}`;

			if (this.result) {
				if (this.result.isError) {
					const errorText = this.getTextOutput().trim() || "read failed";
					text += `\n\n${theme.fg("error", errorText)}`;
					return text;
				}

				const rawOutput = this.getTextOutput();
				// Strip hashline prefixes (e.g. "1#BQ:content") for TUI display
				const output = rawOutput.replace(
					/^(\s*)\d+#[ZPMQVRWSNKTXJBYH]{2}:/gm,
					"$1",
				);
				const rawPath = str(this.args?.file_path ?? this.args?.path);
				const lang = rawPath ? getLanguageFromPath(rawPath) : undefined;
				const lines = lang
					? highlightCode(replaceTabs(output), lang)
					: output.split("\n");

				const maxLines = this.expanded ? lines.length : 10;
				const displayLines = lines.slice(0, maxLines);
				const remaining = lines.length - maxLines;

				text +=
					"\n\n" +
					displayLines
						.map((line: string) =>
							lang
								? replaceTabs(line)
								: theme.fg("toolOutput", replaceTabs(line)),
						)
						.join("\n");
				if (remaining > 0) {
					text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
				}

				const truncation = this.result.details?.truncation;
				if (truncation?.truncated) {
					if (truncation.firstLineExceedsLimit) {
						text +=
							"\n" +
							theme.fg(
								"warning",
								`[First line exceeds ${formatSize(truncation.maxBytes ?? DEFAULT_MAX_BYTES)} limit]`,
							);
					} else if (truncation.truncatedBy === "lines") {
						text +=
							"\n" +
							theme.fg(
								"warning",
								`[Truncated: showing ${truncation.outputLines} of ${truncation.totalLines} lines (${truncation.maxLines ?? DEFAULT_MAX_LINES} line limit)]`,
							);
					} else {
						text +=
							"\n" +
							theme.fg(
								"warning",
								`[Truncated: ${truncation.outputLines} lines shown (${formatSize(truncation.maxBytes ?? DEFAULT_MAX_BYTES)} limit)]`,
							);
					}
				}
			}
		} else if (normalizedToolName === "write") {
			const rawPath = str(this.args?.file_path ?? this.args?.path);
			const fileContent = str(this.args?.content);
			const path = rawPath !== null ? shortenPath(rawPath) : null;

			text =
				theme.fg("toolTitle", theme.bold("write")) +
				" " +
				(path === null
					? invalidArg
					: path
						? theme.fg("accent", path)
						: theme.fg("toolOutput", "..."));

			if (fileContent === null) {
				text += `\n\n${theme.fg("error", "[invalid content arg - expected string]")}`;
			} else if (fileContent) {
				const lang = rawPath ? getLanguageFromPath(rawPath) : undefined;

				let lines: string[];
				if (lang) {
					const cache = this.writeHighlightCache;
					if (
						cache &&
						cache.lang === lang &&
						cache.rawPath === rawPath &&
						cache.rawContent === fileContent
					) {
						lines = cache.highlightedLines;
					} else {
						const displayContent = normalizeDisplayText(fileContent);
						const normalized = replaceTabs(displayContent);
						lines = highlightCode(normalized, lang);
						this.writeHighlightCache = {
							rawPath,
							lang,
							rawContent: fileContent,
							normalizedLines: normalized.split("\n"),
							highlightedLines: lines,
						};
					}
				} else {
					lines = normalizeDisplayText(fileContent).split("\n");
					this.writeHighlightCache = undefined;
				}

				const totalLines = lines.length;
				const maxLines = this.expanded ? lines.length : 10;
				const displayLines = lines.slice(0, maxLines);
				const remaining = lines.length - maxLines;

				text +=
					"\n\n" +
					displayLines
						.map((line: string) =>
							lang ? line : theme.fg("toolOutput", replaceTabs(line)),
						)
						.join("\n");
				if (remaining > 0) {
					text +=
						theme.fg(
							"muted",
							`\n... (${remaining} more lines, ${totalLines} total,`,
						) + ` ${keyHint("expandTools", "to expand")})`;
				}
			}

			// Show error if tool execution failed
			if (this.result?.isError) {
				const errorText = this.getTextOutput();
				if (errorText) {
					text += `\n\n${theme.fg("error", errorText)}`;
				}
			}
		} else if (normalizedToolName === "edit") {
			const rawPath = str(this.args?.file_path ?? this.args?.path);
			const path = rawPath !== null ? shortenPath(rawPath) : null;

			// Build path display, appending :line if we have diff info
			let pathDisplay =
				path === null
					? invalidArg
					: path
						? theme.fg("accent", path)
						: theme.fg("toolOutput", "...");
			const firstChangedLine =
				(this.editDiffPreview && "firstChangedLine" in this.editDiffPreview
					? this.editDiffPreview.firstChangedLine
					: undefined) ||
				(this.result && !this.result.isError
					? this.result.details?.firstChangedLine
					: undefined);
			if (firstChangedLine) {
				pathDisplay += theme.fg("warning", `:${firstChangedLine}`);
			}

			text = `${theme.fg("toolTitle", theme.bold("edit"))} ${pathDisplay}`;

			if (this.result?.isError) {
				// Show error from result
				const errorText = this.getTextOutput();
				if (errorText) {
					text += `\n\n${theme.fg("error", errorText)}`;
				}
			} else if (this.result?.details?.diff) {
				// Tool executed successfully - use the diff from result
				// This takes priority over editDiffPreview which may have a stale error
				// due to race condition (async preview computed after file was modified)
				text += `\n\n${renderDiff(this.result.details.diff, { filePath: rawPath ?? undefined })}`;
			} else if (this.editDiffPreview) {
				// Use cached diff preview (before tool executes)
				if ("error" in this.editDiffPreview) {
					text += `\n\n${theme.fg("error", this.editDiffPreview.error)}`;
				} else if (this.editDiffPreview.diff) {
					text += `\n\n${renderDiff(this.editDiffPreview.diff, { filePath: rawPath ?? undefined })}`;
				}
			}
		} else if (normalizedToolName === "ls") {
			const rawPath = str(this.args?.path);
			const path = rawPath !== null ? shortenPath(rawPath || ".") : null;
			const limit = this.args?.limit;

			text = `${theme.fg("toolTitle", theme.bold("ls"))} ${path === null ? invalidArg : theme.fg("accent", path)}`;
			if (limit !== undefined) {
				text += theme.fg("toolOutput", ` (limit ${limit})`);
			}

			if (this.result) {
				if (this.result.isError) {
					const errorText = this.getTextOutput().trim() || "ls failed";
					text += `\n\n${theme.fg("error", errorText)}`;
					return text;
				}

				const output = this.getTextOutput().trim();
				if (output) {
					const lines = output.split("\n");
					const maxLines = this.expanded ? lines.length : 20;
					const displayLines = lines.slice(0, maxLines);
					const remaining = lines.length - maxLines;

					text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
					if (remaining > 0) {
						text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
					}
				}

				const entryLimit = this.result.details?.entryLimitReached;
				const truncation = this.result.details?.truncation;
				if (entryLimit || truncation?.truncated) {
					const warnings: string[] = [];
					if (entryLimit) {
						warnings.push(`${entryLimit} entries limit`);
					}
					if (truncation?.truncated) {
						warnings.push(
							`${formatSize(truncation.maxBytes ?? DEFAULT_MAX_BYTES)} limit`,
						);
					}
					text += `\n${theme.fg("warning", `[Truncated: ${warnings.join(", ")}]`)}`;
				}
			}
		} else if (normalizedToolName === "find") {
			const pattern = str(this.args?.pattern);
			const rawPath = str(this.args?.path);
			const path = rawPath !== null ? shortenPath(rawPath || ".") : null;
			const limit = this.args?.limit;

			text =
				theme.fg("toolTitle", theme.bold("find")) +
				" " +
				(pattern === null ? invalidArg : theme.fg("accent", pattern || "")) +
				theme.fg("toolOutput", ` in ${path === null ? invalidArg : path}`);
			if (limit !== undefined) {
				text += theme.fg("toolOutput", ` (limit ${limit})`);
			}

			if (this.result) {
				if (this.result.isError) {
					const errorText = this.getTextOutput().trim() || "find failed";
					text += `\n\n${theme.fg("error", errorText)}`;
					return text;
				}

				const output = this.getTextOutput().trim();
				if (output) {
					const lines = output.split("\n");
					const maxLines = this.expanded ? lines.length : 20;
					const displayLines = lines.slice(0, maxLines);
					const remaining = lines.length - maxLines;

					text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
					if (remaining > 0) {
						text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
					}
				}

				const resultLimit = this.result.details?.resultLimitReached;
				const truncation = this.result.details?.truncation;
				if (resultLimit || truncation?.truncated) {
					const warnings: string[] = [];
					if (resultLimit) {
						warnings.push(`${resultLimit} results limit`);
					}
					if (truncation?.truncated) {
						warnings.push(
							`${formatSize(truncation.maxBytes ?? DEFAULT_MAX_BYTES)} limit`,
						);
					}
					text += `\n${theme.fg("warning", `[Truncated: ${warnings.join(", ")}]`)}`;
				}
			}
		} else if (normalizedToolName === "grep") {
			const pattern = str(this.args?.pattern);
			const rawPath = str(this.args?.path);
			const path = rawPath !== null ? shortenPath(rawPath || ".") : null;
			const glob = str(this.args?.glob);
			const limit = this.args?.limit;

			text =
				theme.fg("toolTitle", theme.bold("grep")) +
				" " +
				(pattern === null
					? invalidArg
					: theme.fg("accent", `/${pattern || ""}/`)) +
				theme.fg("toolOutput", ` in ${path === null ? invalidArg : path}`);
			if (glob) {
				text += theme.fg("toolOutput", ` (${glob})`);
			}
			if (limit !== undefined) {
				text += theme.fg("toolOutput", ` limit ${limit}`);
			}

			if (this.result) {
				if (this.result.isError) {
					const errorText = this.getTextOutput().trim() || "grep failed";
					text += `\n\n${theme.fg("error", errorText)}`;
					return text;
				}

				const output = this.getTextOutput().trim();
				if (output) {
					const lines = output.split("\n");
					const maxLines = this.expanded ? lines.length : 15;
					const displayLines = lines.slice(0, maxLines);
					const remaining = lines.length - maxLines;

					text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
					if (remaining > 0) {
						text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
					}
				}

				const matchLimit = this.result.details?.matchLimitReached;
				const truncation = this.result.details?.truncation;
				const linesTruncated = this.result.details?.linesTruncated;
				if (matchLimit || truncation?.truncated || linesTruncated) {
					const warnings: string[] = [];
					if (matchLimit) {
						warnings.push(`${matchLimit} matches limit`);
					}
					if (truncation?.truncated) {
						warnings.push(
							`${formatSize(truncation.maxBytes ?? DEFAULT_MAX_BYTES)} limit`,
						);
					}
					if (linesTruncated) {
						warnings.push("some lines truncated");
					}
					text += `\n${theme.fg("warning", `[Truncated: ${warnings.join(", ")}]`)}`;
				}
			}
		} else if (normalizedToolName === "web_search") {
			// Server-side Anthropic web search
			text = theme.fg("toolTitle", theme.bold("web search"));

			if (process.env.PI_OFFLINE === "1") {
				text +=
					"\n\n" +
					theme.fg(
						"muted",
						"\u{1F50C} Offline \u{2014} web search unavailable",
					);
			} else if (this.result) {
				const output = this.getTextOutput().trim();
				if (output) {
					const lines = output.split("\n");
					const maxLines = this.expanded ? lines.length : 10;
					const displayLines = lines.slice(0, maxLines);
					const remaining = lines.length - maxLines;

					text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
					if (remaining > 0) {
						text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
					}
				}
			}
		} else {
			// Generic tool / MCP tool without a registered renderer.
			// Adapter-surfaced MCP tool names arrive as `mcp__<server>__<tool>`;
			// render the server prefix in muted style so the tool name reads
			// cleanly. SF-registered MCP tools have already had their prefix
			// stripped upstream in partial-builder.ts and won't reach this branch.
			const parsed = parseMcpToolName(this.toolName);
			const displayName = parsed
				? parsed.tool
				: prettifyToolName(this.toolName, this.toolDefinition?.label);
			const serverPrefix = parsed
				? theme.fg("muted", `${parsed.server}\u00b7`)
				: "";
			text = serverPrefix + theme.fg("toolTitle", theme.bold(displayName));

			const argsText = formatCompactArgs(this.args, this.expanded);
			if (argsText) {
				if (argsText.includes("\n")) {
					text += `\n\n${theme.fg("toolOutput", argsText)}`;
				} else {
					text += " " + theme.fg("toolOutput", argsText);
				}
			}

			if (this.result) {
				const output = this.getTextOutput().trim();
				if (output) {
					const lines = output.split("\n");
					const maxLines = this.expanded
						? lines.length
						: GENERIC_OUTPUT_PREVIEW_LINES;
					const displayLines = lines.slice(0, maxLines);
					const remaining = lines.length - maxLines;
					text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
					if (remaining > 0) {
						text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
					}
				}
			}
		}

		return text;
	}
}
