tool-execution.ts

import { Container, Spacer, type TUI } from "@earendil-works/pi-tui";
import type { ToolDef } from "../../../core/tools/index.ts";
import { GrokToolRow } from "../grok/tool-row.ts";
import { readToolProgress } from "../tool-progress.ts";
import { createBoundedRenderSignature } from "./render-signature.ts";
import { hasCompletedTodoTasks, TODO_STRIKE_FRAME_INTERVAL_MS, TODO_STRIKE_TOTAL_FRAMES } from "./todo-strike.ts";
import { ToolExecutionImages } from "./tool-execution-images.ts";
import { ToolExecutionRenderer } from "./tool-execution-renderer.ts";
import type { ToolExecutionIdentity, ToolExecutionRenderState, ToolExecutionResult } from "./tool-execution-types.ts";

export interface ToolExecutionOptions {
	showImages?: boolean;
	imageWidthCells?: number;
}

/** Visual shell chosen by interactive chrome; classic remains the default. */
export type ToolExecutionPresentation = "classic" | "grok";

const PENDING_RENDER_FRAME_INTERVAL_MS = 80;

export class ToolExecutionComponent extends Container {
	private readonly identity: ToolExecutionIdentity;
	private readonly ui: TUI;
	private readonly renderer: ToolExecutionRenderer | undefined;
	private readonly images: ToolExecutionImages | undefined;
	private readonly grokRow: GrokToolRow | undefined;
	private readonly presentation: ToolExecutionPresentation;
	private args: unknown;
	private expanded = false;
	private showImages: boolean;
	private imageWidthCells: number;
	private isPartial = true;
	private executionStarted = false;
	private argsComplete = false;
	private spinnerFrame?: number;
	private spinnerInterval?: NodeJS.Timeout;
	private todoStrikeInterval?: NodeJS.Timeout;
	private result?: ToolExecutionResult;
	private cachedLines?: string[];
	private cachedRevision?: number;
	private cachedSignature?: string;
	private cachedWidth?: number;
	private lastDisplaySignature?: string;

	constructor(
		toolName: string,
		toolCallId: string,
		args: unknown,
		options: ToolExecutionOptions = {},
		toolDefinition: ToolDef | undefined,
		ui: TUI,
		cwd: string,
		presentation: ToolExecutionPresentation = "classic",
	) {
		super();
		this.identity = { toolName, toolCallId, cwd, toolDefinition };
		this.args = args;
		this.showImages = options.showImages ?? true;
		this.imageWidthCells = options.imageWidthCells ?? 60;
		this.ui = ui;
		this.presentation = presentation;
		const initialState = this.createRenderState();
		if (this.presentation === "grok") {
			this.grokRow = new GrokToolRow({
				toolName: this.identity.toolName,
				isPartial: initialState.isPartial,
				result: initialState.result,
			});
			this.addChild(new Spacer(1));
			this.addChild(this.grokRow);
		} else {
			this.renderer = new ToolExecutionRenderer(this.identity, initialState, () => {
				this.invalidate();
				this.ui.requestRender();
			});
			this.images = new ToolExecutionImages(() => {
				this.invalidateRenderCache();
				this.ui.requestRender();
			});
			this.addChild(new Spacer(1));
			this.addChild(this.renderer);
			this.addChild(this.images);
		}
		this.updateSpinnerAnimation();
		this.updateDisplay();
	}

	updateArgs(args: unknown): void {
		this.args = args;
		this.lastDisplaySignature = undefined;
		this.updateSpinnerAnimation();
		this.updateDisplay();
	}

	markExecutionStarted(): void {
		this.executionStarted = true;
		this.updateSpinnerAnimation();
		this.updateDisplay();
		this.ui.requestRender();
	}

	setArgsComplete(): void {
		this.argsComplete = true;
		this.updateSpinnerAnimation();
		this.updateDisplay();
		this.ui.requestRender();
	}

	updateResult(result: ToolExecutionResult, isPartial = false): void {
		this.result = result;
		this.isPartial = isPartial;
		if (!isPartial) this.argsComplete = true;
		this.lastDisplaySignature = undefined;
		this.updateSpinnerAnimation();
		this.updateTodoStrikeAnimation();
		this.updateDisplay();
		this.images?.updateResult(result);
		this.invalidateRenderCache();
	}

	stopAnimation(): void {
		this.stopSpinnerAnimation();
		this.stopTodoStrikeAnimation();
	}

	override dispose(): void {
		this.stopAnimation();
		super.dispose();
	}

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

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

	setImageWidthCells(width: number): void {
		this.imageWidthCells = Math.max(1, Math.floor(width));
		this.updateDisplay();
	}

	override invalidate(): void {
		this.invalidateRenderCache(false);
		super.invalidate();
		this.lastDisplaySignature = undefined;
		this.updateDisplay();
	}

	override render(width: number): string[] {
		if (this.presentation === "grok") return super.render(width);

		const signature = this.createRenderSignature();
		const revision = this.getRenderRevision();
		if (
			this.cachedLines &&
			this.cachedWidth === width &&
			this.cachedSignature === signature &&
			this.cachedRevision === revision
		) {
			return this.cachedLines;
		}

		let lines: string[];
		const renderer = this.renderer!;
		const images = this.images!;
		if (renderer.hasRendererDefinition && renderer.renderShell === "self") {
			const contentLines = renderer.render(width);
			const imageLines = images.render(width);
			if (contentLines.length === 0 && imageLines.length === 0) return [];
			lines = contentLines.length > 0 ? ["", ...contentLines, ...imageLines] : imageLines;
		} else {
			lines = super.render(width);
		}

		this.cachedWidth = width;
		this.cachedSignature = signature;
		this.cachedRevision = this.getRenderRevision();
		this.cachedLines = lines;
		return lines;
	}

	private updateDisplay(): void {
		const displaySignature = this.createRenderSignature();
		if (this.lastDisplaySignature === displaySignature) return;
		this.lastDisplaySignature = displaySignature;
		this.invalidateRenderCache();
		const state = this.createRenderState();
		if (this.grokRow) {
			this.grokRow.update({
				toolName: this.identity.toolName,
				isPartial: state.isPartial,
				result: state.result,
			});
			return;
		}
		const renderer = this.renderer!;
		this.renderer!.update(state);
		this.images!.updateOptions({
			showImages: state.showImages,
			maxWidthCells: this.imageWidthCells,
			showRendererFallback: renderer.hasResultRenderer,
		});
	}

	private createRenderState(): ToolExecutionRenderState {
		return {
			args: this.args,
			executionStarted: this.executionStarted,
			argsComplete: this.argsComplete,
			isPartial: this.isPartial,
			expanded: this.expanded,
			showImages: this.showImages,
			spinnerFrame: this.spinnerFrame,
			result: this.result,
		};
	}

	private createRenderSignature(): string {
		return createBoundedRenderSignature({
			...this.createRenderState(),
			imageWidthCells: this.imageWidthCells,
			toolCallId: this.identity.toolCallId,
			toolName: this.identity.toolName,
		});
	}

	private updateSpinnerAnimation(): void {
		const isStreamingArgs = !this.argsComplete && ["edit", "write", "apply_patch"].includes(this.identity.toolName);
		const isPartialTask = this.isPartial && this.identity.toolName === "task" && this.result !== undefined;
		const isPartialProgress =
			this.isPartial && this.result !== undefined && readToolProgress(this.result.details) !== undefined;
		if (isStreamingArgs || isPartialTask || isPartialProgress) this.startSpinnerAnimation();
		else this.stopSpinnerAnimation();
	}

	private updateTodoStrikeAnimation(): void {
		const shouldAnimate =
			this.identity.toolName === "todo" &&
			this.executionStarted &&
			!this.isPartial &&
			this.result !== undefined &&
			!this.result.isError &&
			hasCompletedTodoTasks(this.result.details);
		if (!shouldAnimate) {
			this.stopTodoStrikeAnimation();
			return;
		}
		if (this.todoStrikeInterval) return;

		this.spinnerFrame = 0;
		this.todoStrikeInterval = setInterval(() => {
			const next = (this.spinnerFrame ?? 0) + 1;
			if (next > TODO_STRIKE_TOTAL_FRAMES) {
				this.stopTodoStrikeAnimation();
				return;
			}
			this.spinnerFrame = next;
			this.invalidateRenderCache();
			this.updateDisplay();
			this.ui.requestRender();
		}, TODO_STRIKE_FRAME_INTERVAL_MS);
		this.todoStrikeInterval.unref?.();
	}

	private stopTodoStrikeAnimation(): void {
		if (this.todoStrikeInterval) {
			clearInterval(this.todoStrikeInterval);
			this.todoStrikeInterval = undefined;
		}
		if (!this.spinnerInterval && this.spinnerFrame !== undefined) {
			this.spinnerFrame = undefined;
			this.invalidateRenderCache();
			this.updateDisplay();
			this.ui.requestRender();
		}
	}

	private startSpinnerAnimation(): void {
		if (this.spinnerInterval) return;
		this.spinnerInterval = setInterval(() => {
			this.spinnerFrame = ((this.spinnerFrame ?? -1) + 1) % 10;
			this.invalidateRenderCache();
			this.updateDisplay();
			this.ui.requestRender();
		}, PENDING_RENDER_FRAME_INTERVAL_MS);
		this.spinnerInterval.unref?.();
	}

	private stopSpinnerAnimation(): void {
		if (!this.spinnerInterval) return;
		clearInterval(this.spinnerInterval);
		this.spinnerInterval = undefined;
		if (!this.todoStrikeInterval) this.spinnerFrame = undefined;
		this.invalidateRenderCache();
	}

	override isRenderCacheTrackable(): boolean {
		// Renderer components receive state changes only through this shell. Async
		// renderers use the supplied invalidate callback, so the shell is a safe
		// revision boundary even when an extension component is not trackable.
		return true;
	}

	private invalidateRenderCache(notifyParent = true): void {
		this.cachedLines = undefined;
		this.cachedRevision = undefined;
		this.cachedSignature = undefined;
		this.cachedWidth = undefined;
		if (notifyParent) this.markRenderInvalidated();
	}
}