@oh-my-pi/pi-coding-agent 11.2.3 → 11.4.0

package/src/tools/fetch.ts

@@ -10,7 +10,8 @@ import { renderPromptTemplate } from "../config/prompt-templates";
 import type { RenderResultOptions } from "../extensibility/custom-tools/types";
 import { type Theme, theme } from "../modes/theme/theme";
 import fetchDescription from "../prompts/tools/fetch.md" with { type: "text" };
-import { renderOutputBlock, renderStatusLine } from "../tui";
+import { renderStatusLine } from "../tui";
+import { CachedOutputBlock } from "../tui/output-block";
 import { ensureTool } from "../utils/tools-manager";
 import { specialHandlers } from "../web/scrapers";
 import type { RenderResult } from "../web/scrapers/types";
@@ -980,7 +981,6 @@ export function renderFetchResult(
 	options: RenderResultOptions,
 	uiTheme: Theme = theme,
 ): Component {
-	const { expanded } = options;
 	const details = result.details;
 
 	if (!details) {
@@ -1031,20 +1031,32 @@ export function renderFetchResult(
 		metadataLines.push(`${uiTheme.fg("muted", "Notes:")} ${details.notes.join("; ")}`);
 	}
 
-	const previewLimit = expanded ? 12 : 3;
-	const previewList = applyListLimit(contentLines, { headLimit: previewLimit });
-	const previewLines = previewList.items.map(line => truncate(line.trimEnd(), 120, "…"));
-	const remaining = Math.max(0, contentLines.length - previewLines.length);
-	const contentPreviewLines =
-		previewLines.length > 0 ? previewLines.map(line => uiTheme.fg("dim", line)) : [uiTheme.fg("dim", "(no content)")];
-	if (remaining > 0) {
-		const hint = formatExpandHint(uiTheme, expanded, true);
-		contentPreviewLines.push(uiTheme.fg("muted", `… ${remaining} more lines${hint ? ` ${hint}` : ""}`));
-	}
+	const outputBlock = new CachedOutputBlock();
+	let lastExpanded: boolean | undefined;
+	let contentPreviewLines: string[] | undefined;
 
 	return {
-		render: (width: number) =>
-			renderOutputBlock(
+		render: (width: number) => {
+			const { expanded } = options;
+
+			if (contentPreviewLines === undefined || lastExpanded !== expanded) {
+				const previewLimit = expanded ? 12 : 3;
+				const previewList = applyListLimit(contentLines, { headLimit: previewLimit });
+				const previewLines = previewList.items.map(line => truncate(line.trimEnd(), 120, "…"));
+				const remaining = Math.max(0, contentLines.length - previewLines.length);
+				contentPreviewLines =
+					previewLines.length > 0
+						? previewLines.map(line => uiTheme.fg("dim", line))
+						: [uiTheme.fg("dim", "(no content)")];
+				if (remaining > 0) {
+					const hint = formatExpandHint(uiTheme, expanded, true);
+					contentPreviewLines.push(uiTheme.fg("muted", `… ${remaining} more lines${hint ? ` ${hint}` : ""}`));
+				}
+				lastExpanded = expanded;
+				outputBlock.invalidate();
+			}
+
+			return outputBlock.render(
 				{
 					header,
 					state: truncated ? "warning" : "success",
@@ -1056,8 +1068,13 @@ export function renderFetchResult(
 					applyBg: false,
 				},
 				uiTheme,
-			),
-		invalidate: () => {},
+			);
+		},
+		invalidate: () => {
+			outputBlock.invalidate();
+			contentPreviewLines = undefined;
+			lastExpanded = undefined;
+		},
 	};
 }
 

package/src/tools/find.ts

@@ -11,7 +11,15 @@ import { renderPromptTemplate } from "../config/prompt-templates";
 import type { RenderResultOptions } from "../extensibility/custom-tools/types";
 import type { Theme } from "../modes/theme/theme";
 import findDescription from "../prompts/tools/find.md" with { type: "text" };
-import { renderFileList, renderStatusLine, renderTreeList } from "../tui";
+import {
+	Ellipsis,
+	Hasher,
+	type RenderCache,
+	renderFileList,
+	renderStatusLine,
+	renderTreeList,
+	truncateToWidth,
+} from "../tui";
 import type { ToolSession } from ".";
 import { applyListLimit } from "./list-limit";
 import type { OutputMeta } from "./output-meta";
@@ -27,6 +35,8 @@ const findSchema = Type.Object({
 	limit: Type.Optional(Type.Number({ description: "Max results (default: 1000)" })),
 });
 
+export type FindToolInput = Static<typeof findSchema>;
+
 const DEFAULT_LIMIT = 1000;
 const GLOB_TIMEOUT_MS = 5000;
 
@@ -410,7 +420,7 @@ export const findToolRenderer = {
 
 	renderResult(
 		result: { content: Array<{ type: string; text?: string }>; details?: FindToolDetails; isError?: boolean },
-		{ expanded }: RenderResultOptions,
+		options: RenderResultOptions,
 		uiTheme: Theme,
 		args?: FindRenderArgs,
 	): Component {
@@ -444,17 +454,30 @@ export const findToolRenderer = {
 				},
 				uiTheme,
 			);
-			const listLines = renderTreeList(
-				{
-					items: lines,
-					expanded,
-					maxCollapsed: COLLAPSED_LIST_LIMIT,
-					itemType: "file",
-					renderItem: line => uiTheme.fg("accent", line),
+			let cached: RenderCache | undefined;
+			return {
+				render(width: number): string[] {
+					const { expanded } = options;
+					const key = new Hasher().bool(expanded).u32(width).digest();
+					if (cached?.key === key) return cached.lines;
+					const listLines = renderTreeList(
+						{
+							items: lines,
+							expanded,
+							maxCollapsed: COLLAPSED_LIST_LIMIT,
+							itemType: "file",
+							renderItem: line => uiTheme.fg("accent", line),
+						},
+						uiTheme,
+					);
+					const result = [header, ...listLines].map(l => truncateToWidth(l, width, Ellipsis.Omit));
+					cached = { key, lines: result };
+					return result;
 				},
-				uiTheme,
-			);
-			return new Text([header, ...listLines].join("\n"), 0, 0);
+				invalidate() {
+					cached = undefined;
+				},
+			};
 		}
 
 		const fileCount = details?.fileCount ?? 0;
@@ -478,15 +501,6 @@ export const findToolRenderer = {
 			uiTheme,
 		);
 
-		const fileLines = renderFileList(
-			{
-				files: files.map(entry => ({ path: entry, isDirectory: entry.endsWith("/") })),
-				expanded,
-				maxCollapsed: COLLAPSED_LIST_LIMIT,
-			},
-			uiTheme,
-		);
-
 		const truncationReasons: string[] = [];
 		if (details?.resultLimitReached) truncationReasons.push(`limit ${details.resultLimitReached} results`);
 		if (limits?.resultLimit) truncationReasons.push(`limit ${limits.resultLimit.reached} results`);
@@ -499,7 +513,28 @@ export const findToolRenderer = {
 			extraLines.push(uiTheme.fg("warning", `truncated: ${truncationReasons.join(", ")}`));
 		}
 
-		return new Text([header, ...fileLines, ...extraLines].join("\n"), 0, 0);
+		let cached: RenderCache | undefined;
+		return {
+			render(width: number): string[] {
+				const { expanded } = options;
+				const key = new Hasher().bool(expanded).u32(width).digest();
+				if (cached?.key === key) return cached.lines;
+				const fileLines = renderFileList(
+					{
+						files: files.map(entry => ({ path: entry, isDirectory: entry.endsWith("/") })),
+						expanded,
+						maxCollapsed: COLLAPSED_LIST_LIMIT,
+					},
+					uiTheme,
+				);
+				const result = [header, ...fileLines, ...extraLines].map(l => truncateToWidth(l, width, Ellipsis.Omit));
+				cached = { key, lines: result };
+				return result;
+			},
+			invalidate() {
+				cached = undefined;
+			},
+		};
 	},
 	mergeCallAndResult: true,
 };

package/src/tools/grep.ts

@@ -10,7 +10,7 @@ import { renderPromptTemplate } from "../config/prompt-templates";
 import type { RenderResultOptions } from "../extensibility/custom-tools/types";
 import type { Theme } from "../modes/theme/theme";
 import grepDescription from "../prompts/tools/grep.md" with { type: "text" };
-import { renderStatusLine, renderTreeList } from "../tui";
+import { Ellipsis, Hasher, type RenderCache, renderStatusLine, renderTreeList, truncateToWidth } from "../tui";
 import type { ToolSession } from ".";
 import type { OutputMeta } from "./output-meta";
 import { resolveToCwd } from "./path-utils";
@@ -32,6 +32,8 @@ const grepSchema = Type.Object({
 	offset: Type.Optional(Type.Number({ description: "Skip first N entries before applying limit (default: 0)" })),
 });
 
+export type GrepToolInput = Static<typeof grepSchema>;
+
 const DEFAULT_MATCH_LIMIT = 100;
 
 export interface GrepToolDetails {
@@ -322,7 +324,7 @@ export const grepToolRenderer = {
 
 	renderResult(
 		result: { content: Array<{ type: string; text?: string }>; details?: GrepToolDetails; isError?: boolean },
-		{ expanded }: RenderResultOptions,
+		options: RenderResultOptions,
 		uiTheme: Theme,
 		args?: GrepRenderArgs,
 	): Component {
@@ -346,17 +348,30 @@ export const grepToolRenderer = {
 				{ icon: "success", title: "Grep", description, meta: [formatCount("item", lines.length)] },
 				uiTheme,
 			);
-			const listLines = renderTreeList(
-				{
-					items: lines,
-					expanded,
-					maxCollapsed: COLLAPSED_TEXT_LIMIT,
-					itemType: "item",
-					renderItem: line => uiTheme.fg("toolOutput", line),
+			let cached: RenderCache | undefined;
+			return {
+				render(width: number): string[] {
+					const { expanded } = options;
+					const key = new Hasher().bool(expanded).u32(width).digest();
+					if (cached?.key === key) return cached.lines;
+					const listLines = renderTreeList(
+						{
+							items: lines,
+							expanded,
+							maxCollapsed: COLLAPSED_TEXT_LIMIT,
+							itemType: "item",
+							renderItem: line => uiTheme.fg("toolOutput", line),
+						},
+						uiTheme,
+					);
+					const result = [header, ...listLines].map(l => truncateToWidth(l, width, Ellipsis.Omit));
+					cached = { key, lines: result };
+					return result;
 				},
-				uiTheme,
-			);
-			return new Text([header, ...listLines].join("\n"), 0, 0);
+				invalidate() {
+					cached = undefined;
+				},
+			};
 		}
 
 		const matchCount = details?.matchCount ?? 0;
@@ -422,18 +437,6 @@ export const grepToolRenderer = {
 			return count;
 		};
 
-		const maxCollapsed = expanded ? matchGroups.length : getCollapsedMatchLimit(matchGroups, COLLAPSED_TEXT_LIMIT);
-		const matchLines = renderTreeList(
-			{
-				items: matchGroups,
-				expanded,
-				maxCollapsed,
-				itemType: "match",
-				renderItem: group => group.map(line => uiTheme.fg("toolOutput", line)),
-			},
-			uiTheme,
-		);
-
 		const truncationReasons: string[] = [];
 		if (limits?.matchLimit) truncationReasons.push(`limit ${limits.matchLimit.reached} matches`);
 		if (limits?.resultLimit) truncationReasons.push(`limit ${limits.resultLimit.reached} results`);
@@ -444,7 +447,33 @@ export const grepToolRenderer = {
 		const extraLines =
 			truncationReasons.length > 0 ? [uiTheme.fg("warning", `truncated: ${truncationReasons.join(", ")}`)] : [];
 
-		return new Text([header, ...matchLines, ...extraLines].join("\n"), 0, 0);
+		let cached: RenderCache | undefined;
+		return {
+			render(width: number): string[] {
+				const { expanded } = options;
+				const key = new Hasher().bool(expanded).u32(width).digest();
+				if (cached?.key === key) return cached.lines;
+				const maxCollapsed = expanded
+					? matchGroups.length
+					: getCollapsedMatchLimit(matchGroups, COLLAPSED_TEXT_LIMIT);
+				const matchLines = renderTreeList(
+					{
+						items: matchGroups,
+						expanded,
+						maxCollapsed,
+						itemType: "match",
+						renderItem: group => group.map(line => uiTheme.fg("toolOutput", line)),
+					},
+					uiTheme,
+				);
+				const result = [header, ...matchLines, ...extraLines].map(l => truncateToWidth(l, width, Ellipsis.Omit));
+				cached = { key, lines: result };
+				return result;
+			},
+			invalidate() {
+				cached = undefined;
+			},
+		};
 	},
 	mergeCallAndResult: true,
 };

package/src/tools/index.ts

@@ -67,17 +67,17 @@ export {
 	webSearchLinkedinTool,
 } from "../web/search";
 export { AskTool, type AskToolDetails } from "./ask";
-export { BashTool, type BashToolDetails, type BashToolOptions } from "./bash";
+export { BashTool, type BashToolDetails, type BashToolInput, type BashToolOptions } from "./bash";
 export { BrowserTool, type BrowserToolDetails } from "./browser";
 export { CalculatorTool, type CalculatorToolDetails } from "./calculator";
 export { type ExitPlanModeDetails, ExitPlanModeTool } from "./exit-plan-mode";
 export { FetchTool, type FetchToolDetails } from "./fetch";
-export { type FindOperations, FindTool, type FindToolDetails, type FindToolOptions } from "./find";
+export { type FindOperations, FindTool, type FindToolDetails, type FindToolInput, type FindToolOptions } from "./find";
 export { setPreferredImageProvider } from "./gemini-image";
-export { type GrepOperations, GrepTool, type GrepToolDetails, type GrepToolOptions } from "./grep";
+export { type GrepOperations, GrepTool, type GrepToolDetails, type GrepToolInput, type GrepToolOptions } from "./grep";
 export { NotebookTool, type NotebookToolDetails } from "./notebook";
 export { PythonTool, type PythonToolDetails, type PythonToolOptions } from "./python";
-export { ReadTool, type ReadToolDetails } from "./read";
+export { ReadTool, type ReadToolDetails, type ReadToolInput } from "./read";
 export { reportFindingTool, type SubmitReviewDetails } from "./review";
 export { loadSshTool, type SSHToolDetails, SshTool } from "./ssh";
 export { SubmitResultTool } from "./submit-result";
@@ -92,7 +92,7 @@ export {
 	truncateLine,
 	truncateTail,
 } from "./truncate";
-export { WriteTool, type WriteToolDetails } from "./write";
+export { WriteTool, type WriteToolDetails, type WriteToolInput } from "./write";
 
 /** Tool type (AgentTool from pi-ai) */
 export type Tool = AgentTool<any, any, any>;

package/src/tools/notebook.ts

@@ -7,7 +7,7 @@ import { type Static, Type } from "@sinclair/typebox";
 import type { RenderResultOptions } from "../extensibility/custom-tools/types";
 import type { Theme } from "../modes/theme/theme";
 import type { ToolSession } from "../sdk";
-import { renderCodeCell, renderStatusLine } from "../tui";
+import { Hasher, type RenderCache, renderCodeCell, renderStatusLine } from "../tui";
 import { resolveToCwd } from "./path-utils";
 import { formatCount, formatErrorMessage, PREVIEW_LIMITS } from "./render-utils";
 
@@ -221,7 +221,7 @@ export const notebookToolRenderer = {
 
 	renderResult(
 		result: { content: Array<{ type: string; text?: string }>; details?: NotebookToolDetails },
-		{ expanded }: RenderResultOptions,
+		options: RenderResultOptions,
 		uiTheme: Theme,
 		args?: NotebookRenderArgs,
 	): Component {
@@ -252,9 +252,16 @@ export const notebookToolRenderer = {
 
 		const notebookPath = args?.notebookPath ?? args?.notebook_path;
 		const notebookLabel = notebookPath ? `${actionLabel} ${notebookPath}` : "Notebook";
+		let cached: RenderCache | undefined;
+
 		return {
-			render: (width: number) =>
-				renderCodeCell(
+			render: (width: number): string[] => {
+				// REACTIVE: read mutable options at render time
+				const { expanded } = options;
+				const key = new Hasher().bool(expanded).u32(width).digest();
+				if (cached?.key === key) return cached.lines;
+
+				const lines = renderCodeCell(
 					{
 						code: codeText,
 						language,
@@ -266,8 +273,14 @@ export const notebookToolRenderer = {
 						width,
 					},
 					uiTheme,
-				),
-			invalidate: () => {},
+				);
+
+				cached = { key, lines };
+				return lines;
+			},
+			invalidate: () => {
+				cached = undefined;
+			},
 		};
 	},
 	mergeCallAndResult: true,

package/src/tools/path-utils.ts

@@ -33,8 +33,33 @@ function fileExists(filePath: string): boolean {
 	}
 }
 
+function normalizeAtPrefix(filePath: string): string {
+	if (!filePath.startsWith("@")) return filePath;
+
+	const withoutAt = filePath.slice(1);
+
+	// We only treat a leading "@" as a shorthand for a small set of well-known
+	// syntaxes. This avoids mangling literal paths like "@my-file.txt".
+	if (
+		withoutAt.startsWith("/") ||
+		withoutAt === "~" ||
+		withoutAt.startsWith("~/") ||
+		// Windows absolute paths (drive letters / UNC / root-relative)
+		path.win32.isAbsolute(withoutAt) ||
+		// Internal URL shorthands
+		withoutAt.startsWith("agent://") ||
+		withoutAt.startsWith("artifact://") ||
+		withoutAt.startsWith("skill://") ||
+		withoutAt.startsWith("rule://")
+	) {
+		return withoutAt;
+	}
+
+	return filePath;
+}
+
 export function expandPath(filePath: string): string {
-	const normalized = normalizeUnicodeSpaces(filePath);
+	const normalized = normalizeUnicodeSpaces(normalizeAtPrefix(filePath));
 	if (normalized === "~") {
 		return os.homedir();
 	}

package/src/tools/python.ts

@@ -832,22 +832,20 @@ export const pythonToolRenderer = {
 		uiTheme: Theme,
 	): Component {
 		const ui = new ToolUIKit(uiTheme);
-		const { renderContext } = options;
 		const details = result.details;
 
-		const expanded = renderContext?.expanded ?? options.expanded;
-		const previewLines = renderContext?.previewLines ?? PYTHON_DEFAULT_PREVIEW_LINES;
-		const output = renderContext?.output ?? (result.content?.find(c => c.type === "text")?.text ?? "").trimEnd();
+		const output =
+			options.renderContext?.output ?? (result.content?.find(c => c.type === "text")?.text ?? "").trimEnd();
 
 		const jsonOutputs = details?.jsonOutputs ?? [];
 		const jsonLines = jsonOutputs.flatMap((value, index) => {
 			const header = `JSON output ${index + 1}`;
-			const treeLines = renderJsonTree(value, uiTheme, expanded);
+			const treeLines = renderJsonTree(value, uiTheme, options.renderContext?.expanded ?? options.expanded);
 			return [header, ...treeLines];
 		});
 
 		const truncation = details?.meta?.truncation;
-		const timeoutSeconds = renderContext?.timeout;
+		const timeoutSeconds = options.renderContext?.timeout;
 		const timeoutLine =
 			typeof timeoutSeconds === "number"
 				? uiTheme.fg("dim", ui.wrapBrackets(`Timeout: ${timeoutSeconds}s`))
@@ -875,13 +873,12 @@ export const pythonToolRenderer = {
 			// Cache state following Box pattern
 			let cached: { key: string; width: number; result: string[] } | undefined;
 
-			const buildCacheKey = (spinnerFrame: number | undefined): string => {
-				return `${expanded}|${previewLines}|${spinnerFrame}`;
-			};
-
 			return {
 				render: (width: number): string[] => {
-					const key = buildCacheKey(options.spinnerFrame);
+					// Read mutable state at render time
+					const expanded = options.renderContext?.expanded ?? options.expanded;
+					const previewLines = options.renderContext?.previewLines ?? PYTHON_DEFAULT_PREVIEW_LINES;
+					const key = `${expanded}|${previewLines}|${options.spinnerFrame}`;
 					if (cached && cached.key === key && cached.width === width) {
 						return cached.result;
 					}
@@ -951,7 +948,11 @@ export const pythonToolRenderer = {
 		const combinedOutput = [displayOutput, ...jsonLines].filter(Boolean).join("\n");
 
 		const statusEvents = details?.statusEvents ?? [];
-		const statusLines = renderStatusEvents(statusEvents, uiTheme, expanded);
+		const statusLines = renderStatusEvents(
+			statusEvents,
+			uiTheme,
+			options.renderContext?.expanded ?? options.expanded,
+		);
 
 		if (!combinedOutput && statusLines.length === 0) {
 			const lines = [timeoutLine, warningLine].filter(Boolean) as string[];
@@ -965,7 +966,7 @@ export const pythonToolRenderer = {
 			return new Text(lines.join("\n"), 0, 0);
 		}
 
-		if (expanded) {
+		if (options.renderContext?.expanded ?? options.expanded) {
 			const styledOutput = combinedOutput
 				.split("\n")
 				.map(line => uiTheme.fg("toolOutput", line))
@@ -988,14 +989,18 @@ export const pythonToolRenderer = {
 		let cachedWidth: number | undefined;
 		let cachedLines: string[] | undefined;
 		let cachedSkipped: number | undefined;
+		let cachedPreviewLines: number | undefined;
 
 		return {
 			render: (width: number): string[] => {
-				if (cachedLines === undefined || cachedWidth !== width) {
+				// Read mutable state at render time
+				const previewLines = options.renderContext?.previewLines ?? PYTHON_DEFAULT_PREVIEW_LINES;
+				if (cachedLines === undefined || cachedWidth !== width || cachedPreviewLines !== previewLines) {
 					const result = truncateToVisualLines(textContent, previewLines, width);
 					cachedLines = result.visualLines;
 					cachedSkipped = result.skippedCount;
 					cachedWidth = width;
+					cachedPreviewLines = previewLines;
 				}
 				const outputLines: string[] = [];
 				if (cachedSkipped && cachedSkipped > 0) {
@@ -1025,6 +1030,7 @@ export const pythonToolRenderer = {
 				cachedWidth = undefined;
 				cachedLines = undefined;
 				cachedSkipped = undefined;
+				cachedPreviewLines = undefined;
 			},
 		};
 	},

package/src/tools/read.ts

@@ -7,14 +7,15 @@ import { FileType, glob } from "@oh-my-pi/pi-natives";
 import type { Component } from "@oh-my-pi/pi-tui";
 import { Text } from "@oh-my-pi/pi-tui";
 import { ptree, untilAborted } from "@oh-my-pi/pi-utils";
-import { Type } from "@sinclair/typebox";
+import { type Static, Type } from "@sinclair/typebox";
 import { CONFIG_DIR_NAME } from "../config";
 import { renderPromptTemplate } from "../config/prompt-templates";
 import type { RenderResultOptions } from "../extensibility/custom-tools/types";
 import { getLanguageFromPath, type Theme } from "../modes/theme/theme";
 import readDescription from "../prompts/tools/read.md" with { type: "text" };
 import type { ToolSession } from "../sdk";
-import { renderCodeCell, renderOutputBlock, renderStatusLine } from "../tui";
+import { renderCodeCell, renderStatusLine } from "../tui";
+import { CachedOutputBlock } from "../tui/output-block";
 import { formatDimensionNote, resizeImage } from "../utils/image-resize";
 import { detectSupportedImageMimeTypeFromFile } from "../utils/mime";
 import { ensureTool } from "../utils/tools-manager";
@@ -516,6 +517,8 @@ const readSchema = Type.Object({
 	lines: Type.Optional(Type.Boolean({ description: "Prepend line numbers to output (default: false)" })),
 });
 
+export type ReadToolInput = Static<typeof readSchema>;
+
 export interface ReadToolDetails {
 	truncation?: TruncationResult;
 	isDirectory?: boolean;
@@ -1113,9 +1116,10 @@ export const readToolRenderer = {
 			);
 			const detailLines = contentText ? contentText.split("\n").map(line => uiTheme.fg("toolOutput", line)) : [];
 			const lines = [...detailLines, ...warningLines];
+			const outputBlock = new CachedOutputBlock();
 			return {
 				render: (width: number) =>
-					renderOutputBlock(
+					outputBlock.render(
 						{
 							header,
 							state: "success",
@@ -1129,7 +1133,7 @@ export const readToolRenderer = {
 						},
 						uiTheme,
 					),
-				invalidate: () => {},
+				invalidate: () => outputBlock.invalidate(),
 			};
 		}
 
@@ -1139,9 +1143,12 @@ export const readToolRenderer = {
 			const endLine = args.limit !== undefined ? startLine + args.limit - 1 : "";
 			title += `:${startLine}${endLine ? `-${endLine}` : ""}`;
 		}
+		let cachedWidth: number | undefined;
+		let cachedLines: string[] | undefined;
 		return {
-			render: (width: number) =>
-				renderCodeCell(
+			render: (width: number) => {
+				if (cachedLines && cachedWidth === width) return cachedLines;
+				cachedLines = renderCodeCell(
 					{
 						code: contentText,
 						language: lang,
@@ -1152,8 +1159,14 @@ export const readToolRenderer = {
 						width,
 					},
 					uiTheme,
-				),
-			invalidate: () => {},
+				);
+				cachedWidth = width;
+				return cachedLines;
+			},
+			invalidate: () => {
+				cachedWidth = undefined;
+				cachedLines = undefined;
+			},
 		};
 	},
 	mergeCallAndResult: true,