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

packages/coding-agent/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed TUI performance regression caused by Box component lacking render caching. Built-in tools now use Text directly (like v0.22.5), and Box has proper caching for custom tool rendering.
+
 ## [0.23.0] - 2025-12-17
 
 ### Added

packages/coding-agent/docs/custom-tools.md

@@ -7,7 +7,7 @@ Custom tools extend pi with new capabilities beyond the built-in read/write/edit
 Create a file `~/.pi/agent/tools/hello.ts`:
 
 ```typescript
-import { Type } from "@mariozechner/pi-coding-agent";
+import { Type } from "@sinclair/typebox";
 import type { CustomToolFactory } from "@mariozechner/pi-coding-agent";
 
 const factory: CustomToolFactory = (pi) => ({
@@ -47,7 +47,7 @@ The tool is automatically discovered and available in your next pi session.
 ## Tool Definition
 
 ```typescript
-import { Type } from "@mariozechner/pi-coding-agent";
+import { Type } from "@sinclair/typebox";
 import { StringEnum } from "@mariozechner/pi-ai";
 import { Text } from "@mariozechner/pi-tui";
 import type { CustomToolFactory, ToolSessionEvent } from "@mariozechner/pi-coding-agent";

packages/coding-agent/examples/custom-tools/README.md

@@ -43,7 +43,7 @@ See [docs/custom-tools.md](../../docs/custom-tools.md) for full documentation.
 
 **Factory pattern:**
 ```typescript
-import { Type } from "@mariozechner/pi-coding-agent";
+import { Type } from "@sinclair/typebox";
 import { StringEnum } from "@mariozechner/pi-ai";
 import { Text } from "@mariozechner/pi-tui";
 import type { CustomToolFactory } from "@mariozechner/pi-coding-agent";

packages/coding-agent/examples/custom-tools/hello.ts

@@ -1,4 +1,4 @@
-import { Type } from "@mariozechner/pi-coding-agent";
+import { Type } from "@sinclair/typebox";
 import type { CustomToolFactory } from "@mariozechner/pi-coding-agent";
 
 const factory: CustomToolFactory = (pi) => ({

packages/coding-agent/examples/custom-tools/question.ts

@@ -2,7 +2,7 @@
  * Question Tool - Let the LLM ask the user a question with options
  */
 
-import { Type } from "@mariozechner/pi-coding-agent";
+import { Type } from "@sinclair/typebox";
 import { Text } from "@mariozechner/pi-tui";
 import type { CustomAgentTool, CustomToolFactory } from "@mariozechner/pi-coding-agent";
 

packages/coding-agent/examples/custom-tools/todo.ts

@@ -8,7 +8,7 @@
  * The onSession callback reconstructs state by scanning past tool results.
  */
 
-import { Type } from "@mariozechner/pi-coding-agent";
+import { Type } from "@sinclair/typebox";
 import { StringEnum } from "@mariozechner/pi-ai";
 import { Text } from "@mariozechner/pi-tui";
 import type { CustomAgentTool, CustomToolFactory, ToolSessionEvent } from "@mariozechner/pi-coding-agent";

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)

packages/coding-agent/tsconfig.examples.json

@@ -5,7 +5,10 @@
 		"baseUrl": ".",
 		"paths": {
 			"@mariozechner/pi-coding-agent": ["./src/index.ts"],
-			"@mariozechner/pi-coding-agent/hooks": ["./src/core/hooks/index.ts"]
+			"@mariozechner/pi-coding-agent/hooks": ["./src/core/hooks/index.ts"],
+			"@mariozechner/pi-tui": ["../tui/src/index.ts"],
+			"@mariozechner/pi-ai": ["../ai/src/index.ts"],
+			"@sinclair/typebox": ["../../node_modules/@sinclair/typebox"]
 		},
 		"skipLibCheck": true
 	},