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

package/src/tools/browser.ts

@@ -10,6 +10,7 @@ import puppeteer from "puppeteer";
 import { renderPromptTemplate } from "../config/prompt-templates";
 import browserDescription from "../prompts/tools/browser.md" with { type: "text" };
 import type { ToolSession } from "../sdk";
+import { formatDimensionNote, resizeImage } from "../utils/image-resize";
 import { htmlToBasicMarkdown } from "../web/scrapers/types";
 import type { OutputMeta } from "./output-meta";
 import { resolveToCwd } from "./path-utils";
@@ -60,6 +61,172 @@ const INTERACTIVE_AX_ROLES = new Set([
 	"treeitem",
 ]);
 
+const LEGACY_SELECTOR_PREFIXES = ["p-aria/", "p-text/", "p-xpath/", "p-pierce/"] as const;
+
+function normalizeSelector(selector: string): string {
+	if (!selector) return selector;
+	if (selector.startsWith("p-") && !LEGACY_SELECTOR_PREFIXES.some(prefix => selector.startsWith(prefix))) {
+		throw new ToolError(
+			`Unsupported selector prefix. Use CSS or puppeteer query handlers (aria/, text/, xpath/, pierce/). Got: ${selector}`,
+		);
+	}
+	if (selector.startsWith("p-text/")) {
+		return `text/${selector.slice("p-text/".length)}`;
+	}
+	if (selector.startsWith("p-xpath/")) {
+		return `xpath/${selector.slice("p-xpath/".length)}`;
+	}
+	if (selector.startsWith("p-pierce/")) {
+		return `pierce/${selector.slice("p-pierce/".length)}`;
+	}
+	if (selector.startsWith("p-aria/")) {
+		const rest = selector.slice("p-aria/".length);
+		// Playwright-style: p-aria/[name="Sign in"] → aria/Sign in
+		const nameMatch = rest.match(/\[\s*name\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\]]+))\s*\]/);
+		const name = nameMatch?.[1] ?? nameMatch?.[2] ?? nameMatch?.[3];
+		if (name) return `aria/${name.trim()}`;
+		return `aria/${rest}`;
+	}
+	return selector;
+}
+
+type ActionabilityResult = { ok: true; x: number; y: number } | { ok: false; reason: string };
+
+async function resolveActionableQueryHandlerClickTarget(handles: ElementHandle[]): Promise<ElementHandle | null> {
+	const candidates: Array<{ handle: ElementHandle; rect: { x: number; y: number; w: number; h: number } }> = [];
+
+	for (const handle of handles) {
+		let clickable: ElementHandle = handle;
+		let clickableProxy: ElementHandle | null = null;
+		try {
+			const proxy = await handle.evaluateHandle(el => {
+				const target =
+					(el as Element).closest(
+						'a,button,[role="button"],[role="link"],input[type="button"],input[type="submit"]',
+					) ?? el;
+				return target;
+			});
+			const nodeHandle = proxy.asElement();
+			clickableProxy = nodeHandle ? (nodeHandle as unknown as ElementHandle) : null;
+			if (clickableProxy) {
+				clickable = clickableProxy;
+			}
+		} catch {
+			// ignore
+		}
+
+		try {
+			const intersecting = await clickable.isIntersectingViewport();
+			if (!intersecting) continue;
+			const rect = (await clickable.evaluate(el => {
+				const r = (el as Element).getBoundingClientRect();
+				return { x: r.left, y: r.top, w: r.width, h: r.height };
+			})) as { x: number; y: number; w: number; h: number };
+			if (rect.w < 1 || rect.h < 1) continue;
+			candidates.push({ handle: clickable, rect });
+		} catch {
+			// ignore
+		} finally {
+			if (clickableProxy && clickableProxy !== handle) {
+				try {
+					await clickableProxy.dispose();
+				} catch {}
+			}
+		}
+	}
+
+	if (!candidates.length) return null;
+
+	// Prefer top-most visible element (nav/header usually wins), tie-break by left-most.
+	candidates.sort((a, b) => a.rect.y - b.rect.y || a.rect.x - b.rect.x);
+	return candidates[0]?.handle ?? null;
+}
+
+async function isClickActionable(handle: ElementHandle): Promise<ActionabilityResult> {
+	return (await handle.evaluate(el => {
+		const element = el as HTMLElement;
+		const style = globalThis.getComputedStyle(element);
+		if (style.display === "none") return { ok: false as const, reason: "display:none" };
+		if (style.visibility === "hidden") return { ok: false as const, reason: "visibility:hidden" };
+		if (style.pointerEvents === "none") return { ok: false as const, reason: "pointer-events:none" };
+		if (Number(style.opacity) === 0) return { ok: false as const, reason: "opacity:0" };
+
+		const r = element.getBoundingClientRect();
+		if (r.width < 1 || r.height < 1) return { ok: false as const, reason: "zero-size" };
+
+		const vw = globalThis.innerWidth;
+		const vh = globalThis.innerHeight;
+		const left = Math.max(0, Math.min(vw, r.left));
+		const right = Math.max(0, Math.min(vw, r.right));
+		const top = Math.max(0, Math.min(vh, r.top));
+		const bottom = Math.max(0, Math.min(vh, r.bottom));
+		if (right - left < 1 || bottom - top < 1) return { ok: false as const, reason: "off-viewport" };
+
+		const x = Math.floor((left + right) / 2);
+		const y = Math.floor((top + bottom) / 2);
+		const topEl = globalThis.document.elementFromPoint(x, y);
+		if (!topEl) return { ok: false as const, reason: "elementFromPoint-null" };
+		if (topEl === element || element.contains(topEl) || (topEl as Element).contains(element)) {
+			return { ok: true as const, x, y };
+		}
+		return { ok: false as const, reason: "obscured" };
+	})) as ActionabilityResult;
+}
+
+async function clickQueryHandlerText(
+	page: Page,
+	selector: string,
+	timeoutMs: number,
+	signal?: AbortSignal,
+): Promise<void> {
+	const timeoutSignal = AbortSignal.timeout(timeoutMs);
+	const clickSignal = signal ? AbortSignal.any([signal, timeoutSignal]) : timeoutSignal;
+	const start = Date.now();
+	let lastSeen = 0;
+	let lastReason: string | null = null;
+
+	while (Date.now() - start < timeoutMs) {
+		throwIfAborted(clickSignal);
+		const handles = (await untilAborted(clickSignal, () => page.$$(selector))) as ElementHandle[];
+		try {
+			lastSeen = handles.length;
+			const target = await resolveActionableQueryHandlerClickTarget(handles);
+			if (!target) {
+				lastReason = handles.length ? "no-visible-candidate" : "no-matches";
+				await Bun.sleep(100);
+				continue;
+			}
+			const actionability = await isClickActionable(target);
+			if (!actionability.ok) {
+				lastReason = actionability.reason;
+				await Bun.sleep(100);
+				continue;
+			}
+
+			try {
+				await untilAborted(clickSignal, () => target.click());
+				return;
+			} catch (err) {
+				lastReason = err instanceof Error ? err.message : String(err);
+				await Bun.sleep(100);
+			}
+		} finally {
+			await Promise.all(
+				handles.map(async h => {
+					try {
+						await h.dispose();
+					} catch {}
+				}),
+			);
+		}
+	}
+
+	throw new ToolError(
+		`Timed out clicking ${selector} (seen ${lastSeen} matches; last reason: ${lastReason ?? "unknown"}). ` +
+			"If there are multiple matching elements, use observe+click_id or a more specific selector.",
+	);
+}
+
 /**
  * Stealth init scripts for Puppeteer.
  */
@@ -93,7 +260,10 @@ function resolvePageClient(page: Page): PuppeteerCdpClient | null {
 
 const puppeteerGetArgsSchema = Type.Array(
 	Type.Object({
-		selector: Type.String({ description: "CSS selector for the target element" }),
+		selector: Type.String({
+			description:
+				"Selector for the target element (CSS, or puppeteer query handler like aria/, text/, xpath/, pierce/; also accepts legacy p- prefixes)",
+		}),
 		attribute: Type.Optional(Type.String({ description: "Attribute name (get_attribute)" })),
 	}),
 	{ description: "Batch arguments for get_* actions", minItems: 1 },
@@ -126,7 +296,12 @@ const browserSchema = Type.Object({
 		{ description: "Action to perform" },
 	),
 	url: Type.Optional(Type.String({ description: "URL to navigate to (goto)" })),
-	selector: Type.Optional(Type.String({ description: "CSS selector for the target element" })),
+	selector: Type.Optional(
+		Type.String({
+			description:
+				"Selector for the target element (CSS, or puppeteer query handler like aria/, text/, xpath/, pierce/; also accepts legacy p- prefixes)",
+		}),
+	),
 	element_id: Type.Optional(Type.Number({ description: "Element ID from observe" })),
 	include_all: Type.Optional(Type.Boolean({ description: "Include non-interactive nodes in observe" })),
 	viewport_only: Type.Optional(Type.Boolean({ description: "Limit observe output to elements in the viewport" })),
@@ -159,8 +334,18 @@ const browserSchema = Type.Object({
 	),
 	delta_x: Type.Optional(Type.Number({ description: "Scroll delta X (scroll)" })),
 	delta_y: Type.Optional(Type.Number({ description: "Scroll delta Y (scroll)" })),
-	from_selector: Type.Optional(Type.String({ description: "Drag start selector (drag)" })),
-	to_selector: Type.Optional(Type.String({ description: "Drag end selector (drag)" })),
+	from_selector: Type.Optional(
+		Type.String({
+			description:
+				"Drag start selector (CSS, or puppeteer query handler like aria/, text/, xpath/, pierce/; also accepts legacy p- prefixes)",
+		}),
+	),
+	to_selector: Type.Optional(
+		Type.String({
+			description:
+				"Drag end selector (CSS, or puppeteer query handler like aria/, text/, xpath/, pierce/; also accepts legacy p- prefixes)",
+		}),
+	),
 });
 
 /** Input schema for the Puppeteer tool. */
@@ -287,20 +472,23 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 	private async resetBrowser(params?: BrowserParams): Promise<Page> {
 		await this.closeBrowser();
 		this.currentHeadless = this.session.settings.get("browser.headless");
+		const initialViewport = params?.viewport ?? DEFAULT_VIEWPORT;
 		this.browser = await puppeteer.launch({
 			headless: this.currentHeadless,
-			defaultViewport: DEFAULT_VIEWPORT,
+			defaultViewport: this.currentHeadless ? initialViewport : null,
 			args: [
 				"--no-sandbox",
 				"--disable-setuid-sandbox",
 				"--disable-blink-features=AutomationControlled",
-				`--window-size=${DEFAULT_VIEWPORT.width},${DEFAULT_VIEWPORT.height}`,
+				`--window-size=${initialViewport.width},${initialViewport.height}`,
 			],
 			ignoreDefaultArgs: [...STEALTH_IGNORE_DEFAULT_ARGS],
 		});
 		this.page = await this.browser.newPage();
 		await this.applyStealthPatches(this.page);
-		await this.applyViewport(this.page, params?.viewport);
+		if (this.currentHeadless || params?.viewport) {
+			await this.applyViewport(this.page, params?.viewport);
+		}
 		return this.page;
 	}
 
@@ -317,7 +505,9 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 		}
 		this.page = await this.browser.newPage();
 		await this.applyStealthPatches(this.page);
-		await this.applyViewport(this.page, params?.viewport);
+		if (this.currentHeadless || params?.viewport) {
+			await this.applyViewport(this.page, params?.viewport);
+		}
 		return this.page;
 	}
 
@@ -795,8 +985,13 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					const selector = ensureParam(params.selector, "selector", params.action);
 					details.selector = selector;
 					const page = await this.ensurePage(params);
-					const locator = page.locator(selector).setTimeout(timeoutMs);
-					await untilAborted(signal, () => locator.click());
+					const resolvedSelector = normalizeSelector(selector);
+					if (resolvedSelector.startsWith("text/")) {
+						await clickQueryHandlerText(page, resolvedSelector, timeoutMs, signal);
+					} else {
+						const locator = page.locator(resolvedSelector).setTimeout(timeoutMs);
+						await untilAborted(signal, () => locator.click());
+					}
 					return toolResult(details).text(`Clicked ${selector}`).done();
 				}
 				case "click_id": {
@@ -816,7 +1011,8 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					const text = ensureParam(params.text, "text", params.action);
 					details.selector = selector;
 					const page = await this.ensurePage(params);
-					const locator = page.locator(selector).setTimeout(timeoutMs);
+					const resolvedSelector = normalizeSelector(selector);
+					const locator = page.locator(resolvedSelector).setTimeout(timeoutMs);
 					const handle = (await untilAborted(signal, () => locator.waitHandle())) as ElementHandle;
 					await untilAborted(signal, () => handle.type(text, { delay: 0 }));
 					await handle.dispose();
@@ -842,7 +1038,8 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					const value = ensureParam(params.value, "value", params.action);
 					details.selector = selector;
 					const page = await this.ensurePage(params);
-					const locator = page.locator(selector).setTimeout(timeoutMs);
+					const resolvedSelector = normalizeSelector(selector);
+					const locator = page.locator(resolvedSelector).setTimeout(timeoutMs);
 					await untilAborted(signal, () => locator.fill(value));
 					return toolResult(details).text(`Filled ${selector}`).done();
 				}
@@ -873,7 +1070,8 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					const key = ensureParam(params.key, "key", params.action) as KeyInput;
 					const page = await this.ensurePage(params);
 					if (params.selector) {
-						await untilAborted(signal, () => page.focus(params.selector as string));
+						const resolvedSelector = normalizeSelector(params.selector as string);
+						await untilAborted(signal, () => page.focus(resolvedSelector));
 					}
 					await untilAborted(signal, () => page.keyboard.press(key));
 					return toolResult(details).text(`Pressed ${key}`).done();
@@ -889,8 +1087,12 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					const fromSelector = ensureParam(params.from_selector, "from_selector", params.action);
 					const toSelector = ensureParam(params.to_selector, "to_selector", params.action);
 					const page = await this.ensurePage(params);
-					const fromHandle = (await untilAborted(signal, () => page.$(fromSelector))) as ElementHandle | null;
-					const toHandle = (await untilAborted(signal, () => page.$(toSelector))) as ElementHandle | null;
+					const resolvedFromSelector = normalizeSelector(fromSelector);
+					const resolvedToSelector = normalizeSelector(toSelector);
+					const fromHandle = (await untilAborted(signal, () =>
+						page.$(resolvedFromSelector),
+					)) as ElementHandle | null;
+					const toHandle = (await untilAborted(signal, () => page.$(resolvedToSelector))) as ElementHandle | null;
 					if (!fromHandle || !toHandle) {
 						throw new ToolError("Drag selectors did not resolve to elements");
 					}
@@ -925,7 +1127,8 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					const selector = ensureParam(params.selector, "selector", params.action);
 					details.selector = selector;
 					const page = await this.ensurePage(params);
-					const locator = page.locator(selector).setTimeout(timeoutMs);
+					const resolvedSelector = normalizeSelector(selector);
+					const locator = page.locator(resolvedSelector).setTimeout(timeoutMs);
 					await untilAborted(signal, () => locator.wait());
 					return toolResult(details).text(`Selector ready: ${selector}`).done();
 				}
@@ -948,8 +1151,9 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 						const values = (await Promise.all(
 							params.args.map((arg, index) => {
 								const selector = ensureParam(arg.selector, `args[${index}].selector`, params.action);
+								const resolvedSelector = normalizeSelector(selector);
 								return untilAborted(signal, () =>
-									page.$eval(selector, (el: Element) => (el as HTMLElement).innerText),
+									page.$eval(resolvedSelector, (el: Element) => (el as HTMLElement).innerText),
 								);
 							}),
 						)) as string[];
@@ -960,8 +1164,9 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					}
 					const selector = ensureParam(params.selector, "selector", params.action);
 					details.selector = selector;
+					const resolvedSelector = normalizeSelector(selector);
 					const value = (await untilAborted(signal, () =>
-						page.$eval(selector, (el: Element) => (el as HTMLElement).innerText),
+						page.$eval(resolvedSelector, (el: Element) => (el as HTMLElement).innerText),
 					)) as string;
 					details.result = value;
 					return toolResult(details).text(value).done();
@@ -972,8 +1177,9 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 						const values = (await Promise.all(
 							params.args.map((arg, index) => {
 								const selector = ensureParam(arg.selector, `args[${index}].selector`, params.action);
+								const resolvedSelector = normalizeSelector(selector);
 								return untilAborted(signal, () =>
-									page.$eval(selector, (el: Element) => (el as HTMLElement).innerHTML),
+									page.$eval(resolvedSelector, (el: Element) => (el as HTMLElement).innerHTML),
 								);
 							}),
 						)) as string[];
@@ -984,8 +1190,9 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					}
 					const selector = ensureParam(params.selector, "selector", params.action);
 					details.selector = selector;
+					const resolvedSelector = normalizeSelector(selector);
 					const value = (await untilAborted(signal, () =>
-						page.$eval(selector, (el: Element) => (el as HTMLElement).innerHTML),
+						page.$eval(resolvedSelector, (el: Element) => (el as HTMLElement).innerHTML),
 					)) as string;
 					details.result = value;
 					return toolResult(details).text(value).done();
@@ -997,8 +1204,13 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 							params.args.map((arg, index) => {
 								const selector = ensureParam(arg.selector, `args[${index}].selector`, params.action);
 								const attribute = ensureParam(arg.attribute, `args[${index}].attribute`, params.action);
+								const resolvedSelector = normalizeSelector(selector);
 								return untilAborted(signal, () =>
-									page.$eval(selector, (el: Element) => (el as HTMLElement).getAttribute(String(attribute))),
+									page.$eval(
+										resolvedSelector,
+										(el: Element, attr: string) => (el as HTMLElement).getAttribute(String(attr)),
+										attribute,
+									),
 								);
 							}),
 						)) as string[];
@@ -1010,9 +1222,10 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					const selector = ensureParam(params.selector, "selector", params.action);
 					const attribute = ensureParam(params.attribute, "attribute", params.action);
 					details.selector = selector;
+					const resolvedSelector = normalizeSelector(selector);
 					const value = (await untilAborted(signal, () =>
 						page.$eval(
-							selector,
+							resolvedSelector,
 							(el: { getAttribute: (name: string) => string | null }, attr: string) =>
 								el.getAttribute(String(attr)),
 							attribute,
@@ -1074,9 +1287,8 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					let buffer: Buffer;
 
 					if (params.selector) {
-						const handle = (await untilAborted(signal, () =>
-							page.$(params.selector as string),
-						)) as ElementHandle | null;
+						const resolvedSelector = normalizeSelector(params.selector as string);
+						const handle = (await untilAborted(signal, () => page.$(resolvedSelector))) as ElementHandle | null;
 						if (!handle) {
 							throw new ToolError("Screenshot selector did not resolve to an element");
 						}
@@ -1110,15 +1322,25 @@ export class BrowserTool implements AgentTool<typeof browserSchema, BrowserToolD
 					details.mimeType = mimeType;
 					details.bytes = buffer.length;
 
+					// Compress for API content (same as pasted images)
+					const resized = await resizeImage({ type: "image", data: base64, mimeType });
+					const dimensionNote = formatDimensionNote(resized);
+
 					const lines = ["Screenshot captured", `Format: ${format}`, `Bytes: ${buffer.length}`];
+					if (resized.wasResized) {
+						lines.push(`Compressed: ${resized.width}x${resized.height} (${resized.mimeType})`);
+					}
 					if (savedPath) {
 						lines.push(`Saved: ${savedPath}`);
 					}
+					if (dimensionNote) {
+						lines.push(dimensionNote);
+					}
 
 					return toolResult(details)
 						.content([
 							{ type: "text", text: lines.join("\n") },
-							{ type: "image", data: base64, mimeType },
+							{ type: "image", data: resized.data, mimeType: resized.mimeType },
 						])
 						.done();
 				}

package/src/tools/calculator.ts

@@ -7,16 +7,9 @@ import { renderPromptTemplate } from "../config/prompt-templates";
 import type { RenderResultOptions } from "../extensibility/custom-tools/types";
 import type { Theme } from "../modes/theme/theme";
 import calculatorDescription from "../prompts/tools/calculator.md" with { type: "text" };
-import { renderStatusLine, renderTreeList } from "../tui";
+import { Ellipsis, Hasher, type RenderCache, renderStatusLine, renderTreeList, truncateToWidth } from "../tui";
 import type { ToolSession } from ".";
-import {
-	formatCount,
-	formatEmptyMessage,
-	formatErrorMessage,
-	PREVIEW_LIMITS,
-	TRUNCATE_LENGTHS,
-	truncateToWidth,
-} from "./render-utils";
+import { formatCount, formatEmptyMessage, formatErrorMessage, PREVIEW_LIMITS, TRUNCATE_LENGTHS } from "./render-utils";
 
 // =============================================================================
 // Token Types
@@ -466,7 +459,7 @@ export const calculatorToolRenderer = {
 	 */
 	renderResult(
 		result: { content: Array<{ type: string; text?: string }>; details?: CalculatorToolDetails; isError?: boolean },
-		{ expanded }: RenderResultOptions,
+		options: RenderResultOptions,
 		uiTheme: Theme,
 		args?: CalculatorRenderArgs,
 	): Component {
@@ -474,7 +467,13 @@ export const calculatorToolRenderer = {
 		const textContent = result.content?.find(c => c.type === "text")?.text ?? "";
 		if (result.isError) {
 			const header = renderStatusLine({ icon: "error", title: "Calc" }, uiTheme);
-			return new Text([header, formatErrorMessage(textContent, uiTheme)].join("\n"), 0, 0);
+			const renderedLines = [header, formatErrorMessage(textContent, uiTheme)];
+			return {
+				render() {
+					return renderedLines;
+				},
+				invalidate() {},
+			};
 		}
 
 		// Prefer structured details; fall back to parsing text content
@@ -491,7 +490,13 @@ export const calculatorToolRenderer = {
 
 		if (outputs.length === 0) {
 			const header = renderStatusLine({ icon: "warning", title: "Calc" }, uiTheme);
-			return new Text([header, formatEmptyMessage("No results", uiTheme)].join("\n"), 0, 0);
+			const renderedLines = [header, formatEmptyMessage("No results", uiTheme)];
+			return {
+				render() {
+					return renderedLines;
+				},
+				invalidate() {},
+			};
 		}
 
 		const description = args?.calculations?.[0]?.expression
@@ -501,18 +506,32 @@ export const calculatorToolRenderer = {
 			{ icon: "success", title: "Calc", description, meta: [formatCount("result", outputs.length)] },
 			uiTheme,
 		);
-		const lines = renderTreeList(
-			{
-				items: outputs,
-				expanded,
-				maxCollapsed: COLLAPSED_LIST_LIMIT,
-				itemType: "result",
-				renderItem: output => uiTheme.fg("toolOutput", output),
-			},
-			uiTheme,
-		);
 
-		return new Text([header, ...lines].join("\n"), 0, 0);
+		let cached: RenderCache | undefined;
+
+		return {
+			render(width) {
+				const { expanded } = options;
+				const key = new Hasher().bool(expanded).u32(width).digest();
+				if (cached?.key === key) return cached.lines;
+				const treeLines = renderTreeList(
+					{
+						items: outputs,
+						expanded,
+						maxCollapsed: COLLAPSED_LIST_LIMIT,
+						itemType: "result",
+						renderItem: output => uiTheme.fg("toolOutput", output),
+					},
+					uiTheme,
+				);
+				const lines = [header, ...treeLines].map(l => truncateToWidth(l, width, Ellipsis.Omit));
+				cached = { key, lines };
+				return lines;
+			},
+			invalidate() {
+				cached = undefined;
+			},
+		};
 	},
 	mergeCallAndResult: true,
 };

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;
+		},
 	};
 }