@hansjm10/volt-coding-agent 0.0.0-bootstrap.0 → 0.1.0

package/dist/modes/interactive/components/thinking-selector.js

@@ -0,0 +1,52 @@
+import { Container, SelectList } from "@hansjm10/volt-tui";
+import { getSelectListTheme } from "../../../core/theme/runtime.js";
+import { DynamicBorder } from "./dynamic-border.js";
+const THINKING_SELECT_LIST_LAYOUT = {
+    minPrimaryColumnWidth: 12,
+    maxPrimaryColumnWidth: 32,
+};
+const LEVEL_DESCRIPTIONS = {
+    off: "No reasoning",
+    minimal: "Very brief reasoning (~1k tokens)",
+    low: "Light reasoning (~2k tokens)",
+    medium: "Moderate reasoning (~8k tokens)",
+    high: "Deep reasoning (~16k tokens)",
+    xhigh: "Extra-high reasoning",
+    max: "Maximum available reasoning",
+};
+/**
+ * Component that renders a thinking level selector with borders
+ */
+export class ThinkingSelectorComponent extends Container {
+    selectList;
+    constructor(currentLevel, availableLevels, onSelect, onCancel) {
+        super();
+        const thinkingLevels = availableLevels.map((level) => ({
+            value: level,
+            label: level,
+            description: LEVEL_DESCRIPTIONS[level],
+        }));
+        // Add top border
+        this.addChild(new DynamicBorder());
+        // Create selector
+        this.selectList = new SelectList(thinkingLevels, thinkingLevels.length, getSelectListTheme(), THINKING_SELECT_LIST_LAYOUT);
+        // Preselect current level
+        const currentIndex = thinkingLevels.findIndex((item) => item.value === currentLevel);
+        if (currentIndex !== -1) {
+            this.selectList.setSelectedIndex(currentIndex);
+        }
+        this.selectList.onSelect = (item) => {
+            onSelect(item.value);
+        };
+        this.selectList.onCancel = () => {
+            onCancel();
+        };
+        this.addChild(this.selectList);
+        // Add bottom border
+        this.addChild(new DynamicBorder());
+    }
+    getSelectList() {
+        return this.selectList;
+    }
+}
+//# sourceMappingURL=thinking-selector.js.map

package/dist/modes/interactive/components/thinking-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinking-selector.js","sourceRoot":"","sources":["../../../../src/modes/interactive/components/thinking-selector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAmB,UAAU,EAAgC,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,2BAA2B,GAA4B;IAC5D,qBAAqB,EAAE,EAAE;IACzB,qBAAqB,EAAE,EAAE;CACzB,CAAC;AAEF,MAAM,kBAAkB,GAAkC;IACzD,GAAG,EAAE,cAAc;IACnB,OAAO,EAAE,mCAAmC;IAC5C,GAAG,EAAE,8BAA8B;IACnC,MAAM,EAAE,iCAAiC;IACzC,IAAI,EAAE,8BAA8B;IACpC,KAAK,EAAE,sBAAsB;IAC7B,GAAG,EAAE,6BAA6B;CAClC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,SAAS;IAC/C,UAAU,CAAa;IAE/B,YACC,YAA2B,EAC3B,eAAgC,EAChC,QAAwC,EACxC,QAAoB,EACnB;QACD,KAAK,EAAE,CAAC;QAER,MAAM,cAAc,GAAiB,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACpE,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,KAAK;YACZ,WAAW,EAAE,kBAAkB,CAAC,KAAK,CAAC;SACtC,CAAC,CAAC,CAAC;QAEJ,iBAAiB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC;QAEnC,kBAAkB;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAC/B,cAAc,EACd,cAAc,CAAC,MAAM,EACrB,kBAAkB,EAAE,EACpB,2BAA2B,CAC3B,CAAC;QAEF,0BAA0B;QAC1B,MAAM,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC;QACrF,IAAI,YAAY,KAAK,CAAC,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC;YACpC,QAAQ,CAAC,IAAI,CAAC,KAAsB,CAAC,CAAC;QAAA,CACtC,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC;YAChC,QAAQ,EAAE,CAAC;QAAA,CACX,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAE/B,oBAAoB;QACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC;IAAA,CACnC;IAED,aAAa,GAAe;QAC3B,OAAO,IAAI,CAAC,UAAU,CAAC;IAAA,CACvB;CACD","sourcesContent":["import type { ThinkingLevel } from \"@hansjm10/volt-agent-core\";\nimport { Container, type SelectItem, SelectList, type SelectListLayoutOptions } from \"@hansjm10/volt-tui\";\nimport { getSelectListTheme } from \"../../../core/theme/runtime.ts\";\nimport { DynamicBorder } from \"./dynamic-border.ts\";\n\nconst THINKING_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {\n\tminPrimaryColumnWidth: 12,\n\tmaxPrimaryColumnWidth: 32,\n};\n\nconst LEVEL_DESCRIPTIONS: Record<ThinkingLevel, string> = {\n\toff: \"No reasoning\",\n\tminimal: \"Very brief reasoning (~1k tokens)\",\n\tlow: \"Light reasoning (~2k tokens)\",\n\tmedium: \"Moderate reasoning (~8k tokens)\",\n\thigh: \"Deep reasoning (~16k tokens)\",\n\txhigh: \"Extra-high reasoning\",\n\tmax: \"Maximum available reasoning\",\n};\n\n/**\n * Component that renders a thinking level selector with borders\n */\nexport class ThinkingSelectorComponent extends Container {\n\tprivate selectList: SelectList;\n\n\tconstructor(\n\t\tcurrentLevel: ThinkingLevel,\n\t\tavailableLevels: ThinkingLevel[],\n\t\tonSelect: (level: ThinkingLevel) => void,\n\t\tonCancel: () => void,\n\t) {\n\t\tsuper();\n\n\t\tconst thinkingLevels: SelectItem[] = availableLevels.map((level) => ({\n\t\t\tvalue: level,\n\t\t\tlabel: level,\n\t\t\tdescription: LEVEL_DESCRIPTIONS[level],\n\t\t}));\n\n\t\t// Add top border\n\t\tthis.addChild(new DynamicBorder());\n\n\t\t// Create selector\n\t\tthis.selectList = new SelectList(\n\t\t\tthinkingLevels,\n\t\t\tthinkingLevels.length,\n\t\t\tgetSelectListTheme(),\n\t\t\tTHINKING_SELECT_LIST_LAYOUT,\n\t\t);\n\n\t\t// Preselect current level\n\t\tconst currentIndex = thinkingLevels.findIndex((item) => item.value === currentLevel);\n\t\tif (currentIndex !== -1) {\n\t\t\tthis.selectList.setSelectedIndex(currentIndex);\n\t\t}\n\n\t\tthis.selectList.onSelect = (item) => {\n\t\t\tonSelect(item.value as ThinkingLevel);\n\t\t};\n\n\t\tthis.selectList.onCancel = () => {\n\t\t\tonCancel();\n\t\t};\n\n\t\tthis.addChild(this.selectList);\n\n\t\t// Add bottom border\n\t\tthis.addChild(new DynamicBorder());\n\t}\n\n\tgetSelectList(): SelectList {\n\t\treturn this.selectList;\n\t}\n}\n"]}

package/dist/modes/interactive/components/tool-execution.d.ts

@@ -0,0 +1,83 @@
+import { Container, type TUI } from "@hansjm10/volt-tui";
+import type { ToolDefinition } from "../../../core/extensions/types.ts";
+export interface ToolExecutionOptions {
+    showImages?: boolean;
+    imageWidthCells?: number;
+}
+export declare class ToolExecutionComponent extends Container {
+    private contentBox;
+    private contentText;
+    private selfRenderContainer;
+    private callRendererComponent?;
+    private resultRendererComponent?;
+    private rendererState;
+    private imageComponents;
+    private imageSpacers;
+    private toolName;
+    private toolCallId;
+    private args;
+    private expanded;
+    private showImages;
+    private imageWidthCells;
+    private isPartial;
+    private toolDefinition?;
+    private builtInToolDefinition?;
+    private ui;
+    private cwd;
+    private executionStarted;
+    private executionStartedAt?;
+    private executionDurationMs?;
+    private argsComplete;
+    private result?;
+    private convertedImages;
+    private hideComponent;
+    constructor(toolName: string, toolCallId: string, args: any, options: ToolExecutionOptions | undefined, toolDefinition: ToolDefinition<any, any> | undefined, ui: TUI, cwd: string);
+    private getCallRenderer;
+    private getResultRenderer;
+    private hasRendererDefinition;
+    private getRenderShell;
+    private getRenderContext;
+    private createCallFallback;
+    /** Collapsed line budget for tools without their own result renderer. */
+    private static readonly FALLBACK_COLLAPSED_LINES;
+    /**
+     * Collapse fallback output to a line budget when not expanded, appending the
+     * standard "... (N more lines, ctrl+o to expand)" hint used by built-in tools.
+     */
+    private collapseFallbackOutput;
+    private createResultFallback;
+    updateArgs(args: any): void;
+    markExecutionStarted(): void;
+    setArgsComplete(): void;
+    updateResult(result: {
+        content: Array<{
+            type: string;
+            text?: string;
+            data?: string;
+            mimeType?: string;
+        }>;
+        details?: any;
+        isError: boolean;
+    }, isPartial?: boolean): void;
+    private maybeConvertImagesForKitty;
+    setExpanded(expanded: boolean): void;
+    setShowImages(show: boolean): void;
+    setImageWidthCells(width: number): void;
+    invalidate(): void;
+    render(width: number): string[];
+    private updateDisplay;
+    private getTextOutput;
+    /** Minimum completed duration before the tool header shows a duration suffix. */
+    private static readonly DURATION_DISPLAY_THRESHOLD_MS;
+    private withHeaderMetadata;
+    private getHeaderMetadata;
+    private getDurationSuffix;
+    /**
+     * Whether the active result renderer already displays its own duration
+     * (e.g. the built-in bash tool's "Elapsed/Took" line), indicated by the
+     * rendersDuration flag on the definition that provides the renderer.
+     */
+    private rendersOwnDuration;
+    private formatToolExecution;
+}
+//# sourceMappingURL=tool-execution.d.ts.map

package/dist/modes/interactive/components/tool-execution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-execution.d.ts","sourceRoot":"","sources":["../../../../src/modes/interactive/components/tool-execution.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tBox,\n\ttype Component,\n\tContainer,\n\tgetCapabilities,\n\tImage,\n\tSpacer,\n\tText,\n\ttype TUI,\n\tvisibleWidth,\n} from \"@hansjm10/volt-tui\";\nimport type { ToolDefinition, ToolRenderContext } from \"../../../core/extensions/types.ts\";\nimport { theme } from \"../../../core/theme/runtime.ts\";\nimport { createAllToolDefinitions, type ToolName } from \"../../../core/tools/index.ts\";\nimport { formatDuration, getTextOutput as getRenderedTextOutput } from \"../../../core/tools/render-utils.ts\";\nimport { convertToPng } from \"../../../utils/image-convert.ts\";\nimport { keyHint } from \"./keybinding-hints.ts\";\n\nexport interface ToolExecutionOptions {\n\tshowImages?: boolean;\n\timageWidthCells?: number;\n}\n\n/**\n * Wraps a tool call renderer and appends explicit lifecycle metadata to its\n * first non-empty line. If the metadata does not fit, it gets its own line so\n * state is never communicated by color alone.\n */\nclass ToolHeaderMetadata implements Component {\n\tprivate component: Component;\n\tprivate getMetadata: () => string;\n\n\tconstructor(component: Component, getMetadata: () => string) {\n\t\tthis.component = component;\n\t\tthis.getMetadata = getMetadata;\n\t}\n\n\trender(width: number): string[] {\n\t\tconst lines = this.component.render(width);\n\t\tif (lines.length === 0) return lines;\n\t\t// Components like Text pad lines to full width with trailing spaces;\n\t\t// strip that padding before measuring (the parent Box re-pads).\n\t\tconst index = lines.findIndex((line) => visibleWidth(line.replace(/ +$/, \"\")) > 0);\n\t\tif (index === -1) return lines;\n\t\tconst line = lines[index]!.replace(/ +$/, \"\");\n\t\tconst metadata = this.getMetadata();\n\t\tconst result = lines.slice();\n\t\tif (visibleWidth(line) + visibleWidth(metadata) + 1 <= width) {\n\t\t\tresult[index] = `${line} ${metadata}`;\n\t\t} else {\n\t\t\tresult.splice(index + 1, 0, metadata);\n\t\t}\n\t\treturn result;\n\t}\n\n\tinvalidate(): void {\n\t\tthis.component.invalidate?.();\n\t}\n}\n\nexport class ToolExecutionComponent extends Container {\n\tprivate contentBox: Box;\n\tprivate contentText: Text;\n\tprivate selfRenderContainer: Container;\n\tprivate callRendererComponent?: Component;\n\tprivate resultRendererComponent?: Component;\n\tprivate rendererState: any = {};\n\tprivate imageComponents: Image[] = [];\n\tprivate imageSpacers: Spacer[] = [];\n\tprivate toolName: string;\n\tprivate toolCallId: string;\n\tprivate args: any;\n\tprivate expanded = false;\n\tprivate showImages: boolean;\n\tprivate imageWidthCells: number;\n\tprivate isPartial = true;\n\tprivate toolDefinition?: ToolDefinition<any, any>;\n\tprivate builtInToolDefinition?: ToolDefinition<any, any>;\n\tprivate ui: TUI;\n\tprivate cwd: string;\n\tprivate executionStarted = false;\n\tprivate executionStartedAt?: number;\n\tprivate executionDurationMs?: number;\n\tprivate argsComplete = false;\n\tprivate result?: {\n\t\tcontent: Array<{ type: string; text?: string; data?: string; mimeType?: string }>;\n\t\tisError: boolean;\n\t\tdetails?: any;\n\t};\n\tprivate convertedImages: Map<number, { data: string; mimeType: string }> = new Map();\n\tprivate hideComponent = false;\n\n\tconstructor(\n\t\ttoolName: string,\n\t\ttoolCallId: string,\n\t\targs: any,\n\t\toptions: ToolExecutionOptions = {},\n\t\ttoolDefinition: ToolDefinition<any, any> | undefined,\n\t\tui: TUI,\n\t\tcwd: string,\n\t) {\n\t\tsuper();\n\t\tthis.toolName = toolName;\n\t\tthis.toolCallId = toolCallId;\n\t\tthis.args = args;\n\t\tthis.toolDefinition = toolDefinition;\n\t\tthis.builtInToolDefinition = createAllToolDefinitions(cwd)[toolName as ToolName];\n\t\tthis.showImages = options.showImages ?? true;\n\t\tthis.imageWidthCells = options.imageWidthCells ?? 60;\n\t\tthis.ui = ui;\n\t\tthis.cwd = cwd;\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Always create all shell variants. contentBox is used for default renderer-based composition.\n\t\t// selfRenderContainer is used when the tool renders its own framing.\n\t\t// contentText is reserved for generic fallback rendering when no tool definition exists.\n\t\tthis.contentBox = new Box(1, 0);\n\t\tthis.contentText = new Text(\"\", 1, 0);\n\t\tthis.selfRenderContainer = new Container();\n\n\t\tif (this.hasRendererDefinition()) {\n\t\t\tthis.addChild(this.getRenderShell() === \"self\" ? this.selfRenderContainer : this.contentBox);\n\t\t} else {\n\t\t\tthis.addChild(this.contentText);\n\t\t}\n\n\t\tthis.updateDisplay();\n\t}\n\n\tprivate getCallRenderer(): ToolDefinition<any, any>[\"renderCall\"] | undefined {\n\t\tif (!this.builtInToolDefinition) {\n\t\t\treturn this.toolDefinition?.renderCall;\n\t\t}\n\t\tif (!this.toolDefinition) {\n\t\t\treturn this.builtInToolDefinition.renderCall;\n\t\t}\n\t\treturn this.toolDefinition.renderCall ?? this.builtInToolDefinition.renderCall;\n\t}\n\n\tprivate getResultRenderer(): ToolDefinition<any, any>[\"renderResult\"] | undefined {\n\t\tif (!this.builtInToolDefinition) {\n\t\t\treturn this.toolDefinition?.renderResult;\n\t\t}\n\t\tif (!this.toolDefinition) {\n\t\t\treturn this.builtInToolDefinition.renderResult;\n\t\t}\n\t\treturn this.toolDefinition.renderResult ?? this.builtInToolDefinition.renderResult;\n\t}\n\n\tprivate hasRendererDefinition(): boolean {\n\t\treturn this.builtInToolDefinition !== undefined || this.toolDefinition !== undefined;\n\t}\n\n\tprivate getRenderShell(): \"default\" | \"self\" {\n\t\tif (!this.builtInToolDefinition) {\n\t\t\treturn this.toolDefinition?.renderShell ?? \"default\";\n\t\t}\n\t\tif (!this.toolDefinition) {\n\t\t\treturn this.builtInToolDefinition.renderShell ?? \"default\";\n\t\t}\n\t\treturn this.toolDefinition.renderShell ?? this.builtInToolDefinition.renderShell ?? \"default\";\n\t}\n\n\tprivate getRenderContext(lastComponent: Component | undefined): ToolRenderContext {\n\t\treturn {\n\t\t\targs: this.args,\n\t\t\ttoolCallId: this.toolCallId,\n\t\t\tinvalidate: () => {\n\t\t\t\tthis.invalidate();\n\t\t\t\tthis.ui.requestRender();\n\t\t\t},\n\t\t\tlastComponent,\n\t\t\tstate: this.rendererState,\n\t\t\tcwd: this.cwd,\n\t\t\texecutionStarted: this.executionStarted,\n\t\t\targsComplete: this.argsComplete,\n\t\t\tisPartial: this.isPartial,\n\t\t\texpanded: this.expanded,\n\t\t\tshowImages: this.showImages,\n\t\t\tisError: this.result?.isError ?? false,\n\t\t};\n\t}\n\n\tprivate createCallFallback(): Component {\n\t\treturn new Text(theme.fg(\"toolTitle\", theme.bold(this.toolName)), 0, 0);\n\t}\n\n\t/** Collapsed line budget for tools without their own result renderer. */\n\tprivate static readonly FALLBACK_COLLAPSED_LINES = 10;\n\n\t/**\n\t * Collapse fallback output to a line budget when not expanded, appending the\n\t * standard \"... (N more lines, ctrl+o to expand)\" hint used by built-in tools.\n\t */\n\tprivate collapseFallbackOutput(output: string, colorFn?: (line: string) => string): string {\n\t\tconst lines = output.split(\"\\n\");\n\t\tconst maxLines = this.expanded ? lines.length : ToolExecutionComponent.FALLBACK_COLLAPSED_LINES;\n\t\tconst displayLines = lines.slice(0, maxLines);\n\t\tconst rendered = colorFn ? displayLines.map(colorFn).join(\"\\n\") : displayLines.join(\"\\n\");\n\t\tconst remaining = lines.length - displayLines.length;\n\t\tif (remaining <= 0) {\n\t\t\treturn rendered;\n\t\t}\n\t\treturn `${rendered}\\n${theme.fg(\"muted\", `... (${remaining} more lines,`)} ${keyHint(\"app.tools.expand\", \"to expand\")}${theme.fg(\"muted\", \")\")}`;\n\t}\n\n\tprivate createResultFallback(): Component | undefined {\n\t\tconst output = this.getTextOutput();\n\t\tif (!output) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn new Text(\n\t\t\tthis.collapseFallbackOutput(output, (line) => theme.fg(\"toolOutput\", line)),\n\t\t\t0,\n\t\t\t0,\n\t\t);\n\t}\n\n\tupdateArgs(args: any): void {\n\t\tthis.args = args;\n\t\tthis.updateDisplay();\n\t}\n\n\tmarkExecutionStarted(): void {\n\t\tthis.executionStartedAt ??= Date.now();\n\t\tthis.executionStarted = true;\n\t\tthis.updateDisplay();\n\t\tthis.ui.requestRender();\n\t}\n\n\tsetArgsComplete(): void {\n\t\tthis.argsComplete = true;\n\t\tthis.updateDisplay();\n\t\tthis.ui.requestRender();\n\t}\n\n\tupdateResult(\n\t\tresult: {\n\t\t\tcontent: Array<{ type: string; text?: string; data?: string; mimeType?: string }>;\n\t\t\tdetails?: any;\n\t\t\tisError: boolean;\n\t\t},\n\t\tisPartial = false,\n\t): void {\n\t\tif (!isPartial && this.executionStartedAt !== undefined && this.executionDurationMs === undefined) {\n\t\t\tthis.executionDurationMs = Date.now() - this.executionStartedAt;\n\t\t}\n\t\tthis.result = result;\n\t\tthis.isPartial = isPartial;\n\t\tthis.updateDisplay();\n\t\tthis.maybeConvertImagesForKitty();\n\t}\n\n\tprivate maybeConvertImagesForKitty(): void {\n\t\tconst caps = getCapabilities();\n\t\tif (caps.images !== \"kitty\") return;\n\t\tif (!this.result) return;\n\n\t\tconst imageBlocks = this.result.content.filter((c) => c.type === \"image\");\n\t\tfor (let i = 0; i < imageBlocks.length; i++) {\n\t\t\tconst img = imageBlocks[i];\n\t\t\tif (!img.data || !img.mimeType) continue;\n\t\t\tif (img.mimeType === \"image/png\") continue;\n\t\t\tif (this.convertedImages.has(i)) continue;\n\n\t\t\tconst index = i;\n\t\t\tconvertToPng(img.data, img.mimeType).then((converted) => {\n\t\t\t\tif (converted) {\n\t\t\t\t\tthis.convertedImages.set(index, converted);\n\t\t\t\t\tthis.updateDisplay();\n\t\t\t\t\tthis.ui.requestRender();\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tsetExpanded(expanded: boolean): void {\n\t\tthis.expanded = expanded;\n\t\tthis.updateDisplay();\n\t}\n\n\tsetShowImages(show: boolean): void {\n\t\tthis.showImages = show;\n\t\tthis.updateDisplay();\n\t}\n\n\tsetImageWidthCells(width: number): void {\n\t\tthis.imageWidthCells = Math.max(1, Math.floor(width));\n\t\tthis.updateDisplay();\n\t}\n\n\toverride invalidate(): void {\n\t\tsuper.invalidate();\n\t\tthis.updateDisplay();\n\t}\n\n\toverride render(width: number): string[] {\n\t\tif (this.hideComponent) {\n\t\t\treturn [];\n\t\t}\n\n\t\tif (this.hasRendererDefinition() && this.getRenderShell() === \"self\") {\n\t\t\tconst contentLines = this.selfRenderContainer.render(width);\n\t\t\tif (contentLines.length === 0 && this.imageComponents.length === 0) {\n\t\t\t\treturn [];\n\t\t\t}\n\n\t\t\tconst lines: string[] = [];\n\t\t\tif (contentLines.length > 0) {\n\t\t\t\tlines.push(\"\");\n\t\t\t\tlines.push(...contentLines);\n\t\t\t}\n\t\t\tfor (let i = 0; i < this.imageComponents.length; i++) {\n\t\t\t\tconst spacer = this.imageSpacers[i];\n\t\t\t\tif (spacer) {\n\t\t\t\t\tlines.push(...spacer.render(width));\n\t\t\t\t}\n\t\t\t\tconst imageComponent = this.imageComponents[i];\n\t\t\t\tif (imageComponent) {\n\t\t\t\t\tlines.push(...imageComponent.render(width));\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn lines;\n\t\t}\n\n\t\treturn super.render(width);\n\t}\n\n\tprivate updateDisplay(): void {\n\t\tlet hasContent = false;\n\t\tthis.hideComponent = false;\n\t\tif (this.hasRendererDefinition()) {\n\t\t\tconst renderContainer = this.getRenderShell() === \"self\" ? this.selfRenderContainer : this.contentBox;\n\t\t\trenderContainer.clear();\n\n\t\t\tconst callRenderer = this.getCallRenderer();\n\t\t\tif (!callRenderer) {\n\t\t\t\trenderContainer.addChild(this.withHeaderMetadata(this.createCallFallback()));\n\t\t\t\thasContent = true;\n\t\t\t} else {\n\t\t\t\ttry {\n\t\t\t\t\tconst component = callRenderer(this.args, theme, this.getRenderContext(this.callRendererComponent));\n\t\t\t\t\tthis.callRendererComponent = component;\n\t\t\t\t\trenderContainer.addChild(this.withHeaderMetadata(component));\n\t\t\t\t\thasContent = true;\n\t\t\t\t} catch {\n\t\t\t\t\tthis.callRendererComponent = undefined;\n\t\t\t\t\trenderContainer.addChild(this.withHeaderMetadata(this.createCallFallback()));\n\t\t\t\t\thasContent = true;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.result) {\n\t\t\t\tconst resultRenderer = this.getResultRenderer();\n\t\t\t\tif (!resultRenderer) {\n\t\t\t\t\tconst component = this.createResultFallback();\n\t\t\t\t\tif (component) {\n\t\t\t\t\t\trenderContainer.addChild(component);\n\t\t\t\t\t\thasContent = true;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst component = resultRenderer(\n\t\t\t\t\t\t\t{ content: this.result.content as any, details: this.result.details },\n\t\t\t\t\t\t\t{ expanded: this.expanded, isPartial: this.isPartial },\n\t\t\t\t\t\t\ttheme,\n\t\t\t\t\t\t\tthis.getRenderContext(this.resultRendererComponent),\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.resultRendererComponent = component;\n\t\t\t\t\t\trenderContainer.addChild(component);\n\t\t\t\t\t\thasContent = true;\n\t\t\t\t\t} catch {\n\t\t\t\t\t\tthis.resultRendererComponent = undefined;\n\t\t\t\t\t\tconst component = this.createResultFallback();\n\t\t\t\t\t\tif (component) {\n\t\t\t\t\t\t\trenderContainer.addChild(component);\n\t\t\t\t\t\t\thasContent = true;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (this.toolName === \"subagent\") {\n\t\t\t\tconst outputs = keyHint(\"app.tools.expand\", this.expanded ? \"collapse outputs\" : \"outputs\");\n\t\t\t\trenderContainer.addChild(new Text(`${keyHint(\"app.subagents.open\", \"inspect\")}  ${outputs}`, 0, 0));\n\t\t\t\thasContent = true;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.contentText.setText(this.formatToolExecution());\n\t\t\thasContent = true;\n\t\t}\n\n\t\tfor (const img of this.imageComponents) {\n\t\t\tthis.removeChild(img);\n\t\t}\n\t\tthis.imageComponents = [];\n\t\tfor (const spacer of this.imageSpacers) {\n\t\t\tthis.removeChild(spacer);\n\t\t}\n\t\tthis.imageSpacers = [];\n\n\t\tif (this.result) {\n\t\t\tconst imageBlocks = this.result.content.filter((c) => c.type === \"image\");\n\t\t\tconst caps = getCapabilities();\n\t\t\tfor (let i = 0; i < imageBlocks.length; i++) {\n\t\t\t\tconst img = imageBlocks[i];\n\t\t\t\tif (caps.images && this.showImages && img.data && img.mimeType) {\n\t\t\t\t\tconst converted = this.convertedImages.get(i);\n\t\t\t\t\tconst imageData = converted?.data ?? img.data;\n\t\t\t\t\tconst imageMimeType = converted?.mimeType ?? img.mimeType;\n\t\t\t\t\tif (caps.images === \"kitty\" && imageMimeType !== \"image/png\") continue;\n\n\t\t\t\t\tconst spacer = new Spacer(1);\n\t\t\t\t\tthis.addChild(spacer);\n\t\t\t\t\tthis.imageSpacers.push(spacer);\n\t\t\t\t\tconst imageComponent = new Image(\n\t\t\t\t\t\timageData,\n\t\t\t\t\t\timageMimeType,\n\t\t\t\t\t\t{ fallbackColor: (s: string) => theme.fg(\"toolOutput\", s) },\n\t\t\t\t\t\t{ maxWidthCells: this.imageWidthCells },\n\t\t\t\t\t);\n\t\t\t\t\tthis.imageComponents.push(imageComponent);\n\t\t\t\t\tthis.addChild(imageComponent);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (this.hasRendererDefinition() && !hasContent && this.imageComponents.length === 0) {\n\t\t\tthis.hideComponent = true;\n\t\t}\n\t}\n\n\tprivate getTextOutput(): string {\n\t\treturn getRenderedTextOutput(this.result, this.showImages);\n\t}\n\n\t/** Minimum completed duration before the tool header shows a duration suffix. */\n\tprivate static readonly DURATION_DISPLAY_THRESHOLD_MS = 1000;\n\n\tprivate withHeaderMetadata(component: Component): Component {\n\t\t// Subagents render as conversation participants with their own explicit\n\t\t// lifecycle state instead of as a generic tool card.\n\t\tif (this.toolName === \"subagent\") return component;\n\t\treturn new ToolHeaderMetadata(component, () => this.getHeaderMetadata());\n\t}\n\n\tprivate getHeaderMetadata(): string {\n\t\tlet state: string;\n\t\tif (this.result?.isError) {\n\t\t\tstate = theme.fg(\"error\", \"[failure]\");\n\t\t} else if (this.result && this.isPartial) {\n\t\t\tstate = theme.fg(\"warning\", \"[partial]\");\n\t\t} else if (this.result) {\n\t\t\tstate = theme.fg(\"success\", \"[success]\");\n\t\t} else if (this.executionStarted) {\n\t\t\tstate = theme.fg(\"warning\", \"[running]\");\n\t\t} else {\n\t\t\tstate = theme.fg(\"muted\", \"[pending]\");\n\t\t}\n\n\t\tconst duration = this.getDurationSuffix();\n\t\treturn duration ? `${state} ${duration}` : state;\n\t}\n\n\tprivate getDurationSuffix(): string | undefined {\n\t\tif (\n\t\t\tthis.executionDurationMs === undefined ||\n\t\t\tthis.executionDurationMs < ToolExecutionComponent.DURATION_DISPLAY_THRESHOLD_MS ||\n\t\t\tthis.rendersOwnDuration()\n\t\t) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn theme.fg(\"dim\", `(${formatDuration(this.executionDurationMs)})`);\n\t}\n\n\t/**\n\t * Whether the active result renderer already displays its own duration\n\t * (e.g. the built-in bash tool's \"Elapsed/Took\" line), indicated by the\n\t * rendersDuration flag on the definition that provides the renderer.\n\t */\n\tprivate rendersOwnDuration(): boolean {\n\t\tif (this.toolDefinition?.renderResult) {\n\t\t\treturn this.toolDefinition.rendersDuration === true;\n\t\t}\n\t\treturn this.builtInToolDefinition?.rendersDuration === true;\n\t}\n\n\tprivate formatToolExecution(): string {\n\t\tlet text = `${theme.fg(\"toolTitle\", theme.bold(this.toolName))} ${this.getHeaderMetadata()}`;\n\t\tconst content = JSON.stringify(this.args, null, 2);\n\t\tif (content) {\n\t\t\ttext += `\\n\\n${content}`;\n\t\t}\n\t\tconst output = this.getTextOutput();\n\t\tif (output) {\n\t\t\ttext += `\\n${this.collapseFallbackOutput(output)}`;\n\t\t}\n\t\treturn text;\n\t}\n}\n"]}

package/dist/modes/interactive/components/tool-execution.js

@@ -0,0 +1,421 @@
+import { Box, Container, getCapabilities, Image, Spacer, Text, visibleWidth, } from "@hansjm10/volt-tui";
+import { theme } from "../../../core/theme/runtime.js";
+import { createAllToolDefinitions } from "../../../core/tools/index.js";
+import { formatDuration, getTextOutput as getRenderedTextOutput } from "../../../core/tools/render-utils.js";
+import { convertToPng } from "../../../utils/image-convert.js";
+import { keyHint } from "./keybinding-hints.js";
+/**
+ * Wraps a tool call renderer and appends explicit lifecycle metadata to its
+ * first non-empty line. If the metadata does not fit, it gets its own line so
+ * state is never communicated by color alone.
+ */
+class ToolHeaderMetadata {
+    component;
+    getMetadata;
+    constructor(component, getMetadata) {
+        this.component = component;
+        this.getMetadata = getMetadata;
+    }
+    render(width) {
+        const lines = this.component.render(width);
+        if (lines.length === 0)
+            return lines;
+        // Components like Text pad lines to full width with trailing spaces;
+        // strip that padding before measuring (the parent Box re-pads).
+        const index = lines.findIndex((line) => visibleWidth(line.replace(/ +$/, "")) > 0);
+        if (index === -1)
+            return lines;
+        const line = lines[index].replace(/ +$/, "");
+        const metadata = this.getMetadata();
+        const result = lines.slice();
+        if (visibleWidth(line) + visibleWidth(metadata) + 1 <= width) {
+            result[index] = `${line} ${metadata}`;
+        }
+        else {
+            result.splice(index + 1, 0, metadata);
+        }
+        return result;
+    }
+    invalidate() {
+        this.component.invalidate?.();
+    }
+}
+export class ToolExecutionComponent extends Container {
+    contentBox;
+    contentText;
+    selfRenderContainer;
+    callRendererComponent;
+    resultRendererComponent;
+    rendererState = {};
+    imageComponents = [];
+    imageSpacers = [];
+    toolName;
+    toolCallId;
+    args;
+    expanded = false;
+    showImages;
+    imageWidthCells;
+    isPartial = true;
+    toolDefinition;
+    builtInToolDefinition;
+    ui;
+    cwd;
+    executionStarted = false;
+    executionStartedAt;
+    executionDurationMs;
+    argsComplete = false;
+    result;
+    convertedImages = new Map();
+    hideComponent = false;
+    constructor(toolName, toolCallId, args, options = {}, toolDefinition, ui, cwd) {
+        super();
+        this.toolName = toolName;
+        this.toolCallId = toolCallId;
+        this.args = args;
+        this.toolDefinition = toolDefinition;
+        this.builtInToolDefinition = createAllToolDefinitions(cwd)[toolName];
+        this.showImages = options.showImages ?? true;
+        this.imageWidthCells = options.imageWidthCells ?? 60;
+        this.ui = ui;
+        this.cwd = cwd;
+        this.addChild(new Spacer(1));
+        // Always create all shell variants. contentBox is used for default renderer-based composition.
+        // selfRenderContainer is used when the tool renders its own framing.
+        // contentText is reserved for generic fallback rendering when no tool definition exists.
+        this.contentBox = new Box(1, 0);
+        this.contentText = new Text("", 1, 0);
+        this.selfRenderContainer = new Container();
+        if (this.hasRendererDefinition()) {
+            this.addChild(this.getRenderShell() === "self" ? this.selfRenderContainer : this.contentBox);
+        }
+        else {
+            this.addChild(this.contentText);
+        }
+        this.updateDisplay();
+    }
+    getCallRenderer() {
+        if (!this.builtInToolDefinition) {
+            return this.toolDefinition?.renderCall;
+        }
+        if (!this.toolDefinition) {
+            return this.builtInToolDefinition.renderCall;
+        }
+        return this.toolDefinition.renderCall ?? this.builtInToolDefinition.renderCall;
+    }
+    getResultRenderer() {
+        if (!this.builtInToolDefinition) {
+            return this.toolDefinition?.renderResult;
+        }
+        if (!this.toolDefinition) {
+            return this.builtInToolDefinition.renderResult;
+        }
+        return this.toolDefinition.renderResult ?? this.builtInToolDefinition.renderResult;
+    }
+    hasRendererDefinition() {
+        return this.builtInToolDefinition !== undefined || this.toolDefinition !== undefined;
+    }
+    getRenderShell() {
+        if (!this.builtInToolDefinition) {
+            return this.toolDefinition?.renderShell ?? "default";
+        }
+        if (!this.toolDefinition) {
+            return this.builtInToolDefinition.renderShell ?? "default";
+        }
+        return this.toolDefinition.renderShell ?? this.builtInToolDefinition.renderShell ?? "default";
+    }
+    getRenderContext(lastComponent) {
+        return {
+            args: this.args,
+            toolCallId: this.toolCallId,
+            invalidate: () => {
+                this.invalidate();
+                this.ui.requestRender();
+            },
+            lastComponent,
+            state: this.rendererState,
+            cwd: this.cwd,
+            executionStarted: this.executionStarted,
+            argsComplete: this.argsComplete,
+            isPartial: this.isPartial,
+            expanded: this.expanded,
+            showImages: this.showImages,
+            isError: this.result?.isError ?? false,
+        };
+    }
+    createCallFallback() {
+        return new Text(theme.fg("toolTitle", theme.bold(this.toolName)), 0, 0);
+    }
+    /** Collapsed line budget for tools without their own result renderer. */
+    static FALLBACK_COLLAPSED_LINES = 10;
+    /**
+     * Collapse fallback output to a line budget when not expanded, appending the
+     * standard "... (N more lines, ctrl+o to expand)" hint used by built-in tools.
+     */
+    collapseFallbackOutput(output, colorFn) {
+        const lines = output.split("\n");
+        const maxLines = this.expanded ? lines.length : ToolExecutionComponent.FALLBACK_COLLAPSED_LINES;
+        const displayLines = lines.slice(0, maxLines);
+        const rendered = colorFn ? displayLines.map(colorFn).join("\n") : displayLines.join("\n");
+        const remaining = lines.length - displayLines.length;
+        if (remaining <= 0) {
+            return rendered;
+        }
+        return `${rendered}\n${theme.fg("muted", `... (${remaining} more lines,`)} ${keyHint("app.tools.expand", "to expand")}${theme.fg("muted", ")")}`;
+    }
+    createResultFallback() {
+        const output = this.getTextOutput();
+        if (!output) {
+            return undefined;
+        }
+        return new Text(this.collapseFallbackOutput(output, (line) => theme.fg("toolOutput", line)), 0, 0);
+    }
+    updateArgs(args) {
+        this.args = args;
+        this.updateDisplay();
+    }
+    markExecutionStarted() {
+        this.executionStartedAt ??= Date.now();
+        this.executionStarted = true;
+        this.updateDisplay();
+        this.ui.requestRender();
+    }
+    setArgsComplete() {
+        this.argsComplete = true;
+        this.updateDisplay();
+        this.ui.requestRender();
+    }
+    updateResult(result, isPartial = false) {
+        if (!isPartial && this.executionStartedAt !== undefined && this.executionDurationMs === undefined) {
+            this.executionDurationMs = Date.now() - this.executionStartedAt;
+        }
+        this.result = result;
+        this.isPartial = isPartial;
+        this.updateDisplay();
+        this.maybeConvertImagesForKitty();
+    }
+    maybeConvertImagesForKitty() {
+        const caps = getCapabilities();
+        if (caps.images !== "kitty")
+            return;
+        if (!this.result)
+            return;
+        const imageBlocks = this.result.content.filter((c) => c.type === "image");
+        for (let i = 0; i < imageBlocks.length; i++) {
+            const img = imageBlocks[i];
+            if (!img.data || !img.mimeType)
+                continue;
+            if (img.mimeType === "image/png")
+                continue;
+            if (this.convertedImages.has(i))
+                continue;
+            const index = i;
+            convertToPng(img.data, img.mimeType).then((converted) => {
+                if (converted) {
+                    this.convertedImages.set(index, converted);
+                    this.updateDisplay();
+                    this.ui.requestRender();
+                }
+            });
+        }
+    }
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        this.updateDisplay();
+    }
+    setShowImages(show) {
+        this.showImages = show;
+        this.updateDisplay();
+    }
+    setImageWidthCells(width) {
+        this.imageWidthCells = Math.max(1, Math.floor(width));
+        this.updateDisplay();
+    }
+    invalidate() {
+        super.invalidate();
+        this.updateDisplay();
+    }
+    render(width) {
+        if (this.hideComponent) {
+            return [];
+        }
+        if (this.hasRendererDefinition() && this.getRenderShell() === "self") {
+            const contentLines = this.selfRenderContainer.render(width);
+            if (contentLines.length === 0 && this.imageComponents.length === 0) {
+                return [];
+            }
+            const lines = [];
+            if (contentLines.length > 0) {
+                lines.push("");
+                lines.push(...contentLines);
+            }
+            for (let i = 0; i < this.imageComponents.length; i++) {
+                const spacer = this.imageSpacers[i];
+                if (spacer) {
+                    lines.push(...spacer.render(width));
+                }
+                const imageComponent = this.imageComponents[i];
+                if (imageComponent) {
+                    lines.push(...imageComponent.render(width));
+                }
+            }
+            return lines;
+        }
+        return super.render(width);
+    }
+    updateDisplay() {
+        let hasContent = false;
+        this.hideComponent = false;
+        if (this.hasRendererDefinition()) {
+            const renderContainer = this.getRenderShell() === "self" ? this.selfRenderContainer : this.contentBox;
+            renderContainer.clear();
+            const callRenderer = this.getCallRenderer();
+            if (!callRenderer) {
+                renderContainer.addChild(this.withHeaderMetadata(this.createCallFallback()));
+                hasContent = true;
+            }
+            else {
+                try {
+                    const component = callRenderer(this.args, theme, this.getRenderContext(this.callRendererComponent));
+                    this.callRendererComponent = component;
+                    renderContainer.addChild(this.withHeaderMetadata(component));
+                    hasContent = true;
+                }
+                catch {
+                    this.callRendererComponent = undefined;
+                    renderContainer.addChild(this.withHeaderMetadata(this.createCallFallback()));
+                    hasContent = true;
+                }
+            }
+            if (this.result) {
+                const resultRenderer = this.getResultRenderer();
+                if (!resultRenderer) {
+                    const component = this.createResultFallback();
+                    if (component) {
+                        renderContainer.addChild(component);
+                        hasContent = true;
+                    }
+                }
+                else {
+                    try {
+                        const component = resultRenderer({ content: this.result.content, details: this.result.details }, { expanded: this.expanded, isPartial: this.isPartial }, theme, this.getRenderContext(this.resultRendererComponent));
+                        this.resultRendererComponent = component;
+                        renderContainer.addChild(component);
+                        hasContent = true;
+                    }
+                    catch {
+                        this.resultRendererComponent = undefined;
+                        const component = this.createResultFallback();
+                        if (component) {
+                            renderContainer.addChild(component);
+                            hasContent = true;
+                        }
+                    }
+                }
+            }
+            if (this.toolName === "subagent") {
+                const outputs = keyHint("app.tools.expand", this.expanded ? "collapse outputs" : "outputs");
+                renderContainer.addChild(new Text(`${keyHint("app.subagents.open", "inspect")}  ${outputs}`, 0, 0));
+                hasContent = true;
+            }
+        }
+        else {
+            this.contentText.setText(this.formatToolExecution());
+            hasContent = true;
+        }
+        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) => 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) {
+                    const converted = this.convertedImages.get(i);
+                    const imageData = converted?.data ?? img.data;
+                    const imageMimeType = converted?.mimeType ?? img.mimeType;
+                    if (caps.images === "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) => theme.fg("toolOutput", s) }, { maxWidthCells: this.imageWidthCells });
+                    this.imageComponents.push(imageComponent);
+                    this.addChild(imageComponent);
+                }
+            }
+        }
+        if (this.hasRendererDefinition() && !hasContent && this.imageComponents.length === 0) {
+            this.hideComponent = true;
+        }
+    }
+    getTextOutput() {
+        return getRenderedTextOutput(this.result, this.showImages);
+    }
+    /** Minimum completed duration before the tool header shows a duration suffix. */
+    static DURATION_DISPLAY_THRESHOLD_MS = 1000;
+    withHeaderMetadata(component) {
+        // Subagents render as conversation participants with their own explicit
+        // lifecycle state instead of as a generic tool card.
+        if (this.toolName === "subagent")
+            return component;
+        return new ToolHeaderMetadata(component, () => this.getHeaderMetadata());
+    }
+    getHeaderMetadata() {
+        let state;
+        if (this.result?.isError) {
+            state = theme.fg("error", "[failure]");
+        }
+        else if (this.result && this.isPartial) {
+            state = theme.fg("warning", "[partial]");
+        }
+        else if (this.result) {
+            state = theme.fg("success", "[success]");
+        }
+        else if (this.executionStarted) {
+            state = theme.fg("warning", "[running]");
+        }
+        else {
+            state = theme.fg("muted", "[pending]");
+        }
+        const duration = this.getDurationSuffix();
+        return duration ? `${state} ${duration}` : state;
+    }
+    getDurationSuffix() {
+        if (this.executionDurationMs === undefined ||
+            this.executionDurationMs < ToolExecutionComponent.DURATION_DISPLAY_THRESHOLD_MS ||
+            this.rendersOwnDuration()) {
+            return undefined;
+        }
+        return theme.fg("dim", `(${formatDuration(this.executionDurationMs)})`);
+    }
+    /**
+     * Whether the active result renderer already displays its own duration
+     * (e.g. the built-in bash tool's "Elapsed/Took" line), indicated by the
+     * rendersDuration flag on the definition that provides the renderer.
+     */
+    rendersOwnDuration() {
+        if (this.toolDefinition?.renderResult) {
+            return this.toolDefinition.rendersDuration === true;
+        }
+        return this.builtInToolDefinition?.rendersDuration === true;
+    }
+    formatToolExecution() {
+        let text = `${theme.fg("toolTitle", theme.bold(this.toolName))} ${this.getHeaderMetadata()}`;
+        const content = JSON.stringify(this.args, null, 2);
+        if (content) {
+            text += `\n\n${content}`;
+        }
+        const output = this.getTextOutput();
+        if (output) {
+            text += `\n${this.collapseFallbackOutput(output)}`;
+        }
+        return text;
+    }
+}
+//# sourceMappingURL=tool-execution.js.map