Fix TUI performance regression: add caching to Box, use Text directly for built-in tools

packages/coding-agent/src/core/custom-tools/loader.ts

@@ -4,13 +4,35 @@
 
 import { spawn } from "node:child_process";
 import * as fs from "node:fs";
+import { createRequire } from "node:module";
 import * as os from "node:os";
 import * as path from "node:path";
+import { fileURLToPath } from "node:url";
 import { createJiti } from "jiti";
 import { getAgentDir } from "../../config.js";
 import type { HookUIContext } from "../hooks/types.js";
 import type { CustomToolFactory, CustomToolsLoadResult, ExecResult, LoadedCustomTool, ToolAPI } from "./types.js";
 
+// Create require function to resolve module paths at runtime
+const require = createRequire(import.meta.url);
+
+// Lazily computed aliases - resolved at runtime to handle global installs
+let _aliases: Record<string, string> | null = null;
+function getAliases(): Record<string, string> {
+	if (_aliases) return _aliases;
+
+	const __dirname = path.dirname(fileURLToPath(import.meta.url));
+	const packageIndex = path.resolve(__dirname, "../..", "index.js");
+
+	_aliases = {
+		"@mariozechner/pi-coding-agent": packageIndex,
+		"@mariozechner/pi-tui": require.resolve("@mariozechner/pi-tui"),
+		"@mariozechner/pi-ai": require.resolve("@mariozechner/pi-ai"),
+		"@sinclair/typebox": require.resolve("@sinclair/typebox"),
+	};
+	return _aliases;
+}
+
 const UNICODE_SPACES = /[\u00A0\u2000-\u200A\u202F\u205F\u3000]/g;
 
 function normalizeUnicodeSpaces(str: string): string {
@@ -109,7 +131,11 @@ async function loadTool(
 
 	try {
 		// Create jiti instance for TypeScript/ESM loading
-		const jiti = createJiti(import.meta.url);
+		// Use aliases to resolve package imports since tools are loaded from user directories
+		// (e.g. ~/.pi/agent/tools) but import from packages installed with pi-coding-agent
+		const jiti = createJiti(import.meta.url, {
+			alias: getAliases(),
+		});
 
 		// Import the module
 		const module = await jiti.import(resolvedPath, { default: true });

packages/coding-agent/src/index.ts

@@ -1,7 +1,4 @@
 // Core session management
-
-// Re-export Type from typebox for custom tools
-export { Type } from "@sinclair/typebox";
 export {
 	AgentSession,
 	type AgentSessionConfig,

packages/coding-agent/src/modes/interactive/components/tool-execution.ts

@@ -40,8 +40,8 @@ export interface ToolExecutionOptions {
  * Component that renders a tool call with its result (updateable)
  */
 export class ToolExecutionComponent extends Container {
-	private contentBox: Box;
-	private contentText: Text; // For built-in tools
+	private contentBox?: Box; // Only used for custom tools
+	private contentText: Text; // For built-in tools (with its own padding/bg)
 	private imageComponents: Image[] = [];
 	private toolName: string;
 	private args: any;
@@ -64,12 +64,16 @@ export class ToolExecutionComponent extends Container {
 
 		this.addChild(new Spacer(1));
 
-		// Box wraps content with padding and background
-		this.contentBox = new Box(1, 1, (text: string) => theme.bg("toolPendingBg", text));
-		this.addChild(this.contentBox);
-
-		// Text component for built-in tool rendering
-		this.contentText = new Text("", 0, 0);
+		if (customTool) {
+			// Custom tools use Box for flexible component rendering
+			this.contentBox = new Box(1, 1, (text: string) => theme.bg("toolPendingBg", text));
+			this.addChild(this.contentBox);
+			this.contentText = new Text("", 0, 0); // Fallback only
+		} else {
+			// Built-in tools use Text directly (has caching, better perf)
+			this.contentText = new Text("", 1, 1, (text: string) => theme.bg("toolPendingBg", text));
+			this.addChild(this.contentText);
+		}
 
 		this.updateDisplay();
 	}
@@ -110,11 +114,12 @@ export class ToolExecutionComponent extends Container {
 				? (text: string) => theme.bg("toolErrorBg", text)
 				: (text: string) => theme.bg("toolSuccessBg", text);
 
-		this.contentBox.setBgFn(bgFn);
-		this.contentBox.clear();
-
 		// Check for custom tool rendering
-		if (this.customTool) {
+		if (this.customTool && this.contentBox) {
+			// Custom tools use Box for flexible component rendering
+			this.contentBox.setBgFn(bgFn);
+			this.contentBox.clear();
+
 			// Render call component
 			if (this.customTool.renderCall) {
 				try {
@@ -157,9 +162,9 @@ export class ToolExecutionComponent extends Container {
 				}
 			}
 		} else {
-			// Built-in tool: use existing formatToolExecution
+			// Built-in tools: use Text directly with caching
+			this.contentText.setCustomBgFn(bgFn);
 			this.contentText.setText(this.formatToolExecution());
-			this.contentBox.addChild(this.contentText);
 		}
 
 		// Handle images (same for both custom and built-in)