@lenylvt/pi-coding-agent 0.64.0

package/src/core/export-html/tool-renderer.ts

@@ -0,0 +1,156 @@
+/**
+ * Tool HTML renderer for custom tools in HTML export.
+ *
+ * Renders custom tool calls and results to HTML by invoking their TUI renderers
+ * and converting the ANSI output to HTML.
+ */
+
+import type { ImageContent, TextContent } from "@lenylvt/pi-ai";
+import type { Component } from "@lenylvt/pi-tui";
+import type { Theme } from "../../modes/interactive/theme/theme.js";
+import type { ToolDefinition, ToolRenderContext } from "../extensions/types.js";
+import { ansiLinesToHtml } from "./ansi-to-html.js";
+
+export interface ToolHtmlRendererDeps {
+	/** Function to look up tool definition by name */
+	getToolDefinition: (name: string) => ToolDefinition | undefined;
+	/** Theme for styling */
+	theme: Theme;
+	/** Terminal width for rendering (default: 100) */
+	width?: number;
+}
+
+export interface ToolHtmlRenderer {
+	/** Render a tool call to HTML. Returns undefined if tool has no custom renderer. */
+	renderCall(toolCallId: string, toolName: string, args: unknown): string | undefined;
+	/** Render a tool result to collapsed/expanded HTML. Returns undefined if tool has no custom renderer. */
+	renderResult(
+		toolCallId: string,
+		toolName: string,
+		result: Array<{ type: string; text?: string; data?: string; mimeType?: string }>,
+		details: unknown,
+		isError: boolean,
+	): { collapsed?: string; expanded?: string } | undefined;
+}
+
+/**
+ * Create a tool HTML renderer.
+ *
+ * The renderer looks up tool definitions and invokes their renderCall/renderResult
+ * methods, converting the resulting TUI Component output (ANSI) to HTML.
+ */
+export function createToolHtmlRenderer(deps: ToolHtmlRendererDeps): ToolHtmlRenderer {
+	const { getToolDefinition, theme, width = 100 } = deps;
+
+	const renderedCallComponents = new Map<string, Component>();
+	const renderedResultComponents = new Map<string, Component>();
+	const renderedStates = new Map<string, any>();
+	const renderedArgs = new Map<string, unknown>();
+
+	const getState = (toolCallId: string): any => {
+		let state = renderedStates.get(toolCallId);
+		if (!state) {
+			state = {};
+			renderedStates.set(toolCallId, state);
+		}
+		return state;
+	};
+
+	const createRenderContext = (
+		toolCallId: string,
+		lastComponent: Component | undefined,
+		expanded: boolean,
+		isPartial: boolean,
+		isError: boolean,
+	): ToolRenderContext => {
+		return {
+			args: renderedArgs.get(toolCallId),
+			toolCallId,
+			invalidate: () => {},
+			lastComponent,
+			state: getState(toolCallId),
+			cwd: process.cwd(),
+			executionStarted: true,
+			argsComplete: true,
+			isPartial,
+			expanded,
+			showImages: false,
+			isError,
+		};
+	};
+
+	return {
+		renderCall(toolCallId: string, toolName: string, args: unknown): string | undefined {
+			try {
+				renderedArgs.set(toolCallId, args);
+				const toolDef = getToolDefinition(toolName);
+				if (!toolDef?.renderCall) {
+					return undefined;
+				}
+
+				const component = toolDef.renderCall(
+					args,
+					theme,
+					createRenderContext(toolCallId, renderedCallComponents.get(toolCallId), false, true, false),
+				);
+				renderedCallComponents.set(toolCallId, component);
+				const lines = component.render(width);
+				return ansiLinesToHtml(lines);
+			} catch {
+				// On error, return undefined so HTML export can fall back to structured result rendering
+				return undefined;
+			}
+		},
+
+		renderResult(
+			toolCallId: string,
+			toolName: string,
+			result: Array<{ type: string; text?: string; data?: string; mimeType?: string }>,
+			details: unknown,
+			isError: boolean,
+		): { collapsed?: string; expanded?: string } | undefined {
+			try {
+				const toolDef = getToolDefinition(toolName);
+				if (!toolDef?.renderResult) {
+					return undefined;
+				}
+
+				// Build AgentToolResult from content array
+				// Cast content since session storage uses generic object types
+				const agentToolResult = {
+					content: result as (TextContent | ImageContent)[],
+					details,
+					isError,
+				};
+
+				// Render collapsed
+				const collapsedComponent = toolDef.renderResult(
+					agentToolResult,
+					{ expanded: false, isPartial: false },
+					theme,
+					createRenderContext(toolCallId, renderedResultComponents.get(toolCallId), false, false, isError),
+				);
+				renderedResultComponents.set(toolCallId, collapsedComponent);
+				const collapsed = ansiLinesToHtml(collapsedComponent.render(width));
+
+				// Render expanded
+				const expandedComponent = toolDef.renderResult(
+					agentToolResult,
+					{ expanded: true, isPartial: false },
+					theme,
+					createRenderContext(toolCallId, renderedResultComponents.get(toolCallId), true, false, isError),
+				);
+				renderedResultComponents.set(toolCallId, expandedComponent);
+				const expanded = ansiLinesToHtml(expandedComponent.render(width));
+
+				return {
+					...(collapsed && collapsed !== expanded ? { collapsed } : {}),
+					expanded,
+				};
+			} catch {
+				// On error, return undefined so HTML export can fall back to structured result rendering
+				return undefined;
+			}
+		},
+	};
+}