@linxiraos/pi-tui 1.1.26 → 1.2.0

package/src/tools/ast-edit.ts

@@ -53,13 +53,19 @@ interface AstEditRenderArgs {
 const COLLAPSED_CHANGE_LIMIT = PREVIEW_LIMITS.COLLAPSED_LINES * 2;
 
 /**
- * Flatten pre-styled change groups into frame body lines. Groups are separated
- * by a blank line and carry no tree guides — the frame border is the container,
- * so nested `├─ │` gutters would just be noise. Collapsed mode always shows at
- * least the first group, then fills up to `budget` lines before summarizing the
- * rest as `… N more changes`.
+ * Flatten change groups (line indices, styled on demand) into frame body
+ * lines. Groups are separated by a blank line and carry no tree guides — the
+ * frame border is the container, so nested `├─ │` gutters would just be
+ * noise. Collapsed mode always shows at least the first group, then fills up
+ * to `budget` lines before summarizing the rest as `… N more changes`.
  */
-function buildChangeBody(groups: string[][], expanded: boolean, budget: number, theme: Theme): string[] {
+function buildChangeBody(
+	groups: readonly (readonly number[])[],
+	styleLine: (index: number) => string,
+	expanded: boolean,
+	budget: number,
+	theme: Theme,
+): string[] {
 	const lines: string[] = [];
 	let shown = 0;
 	for (let i = 0; i < groups.length; i++) {
@@ -70,7 +76,7 @@ function buildChangeBody(groups: string[][], expanded: boolean, budget: number,
 		// Always emit the first group; budget only gates subsequent ones.
 		if (!expanded && shown > 0 && lines.length + separator + group.length + reserved > budget) break;
 		if (separator) lines.push("");
-		lines.push(...group);
+		for (const index of group) lines.push(styleLine(index));
 		shown++;
 	}
 	const remaining = groups.length - shown;
@@ -239,29 +245,36 @@ export const astEditToolRenderer = {
 		// Resolve hyperlinks over the whole output so nested directory headers
 		// reconstruct across the blank-line groups the tree list collapses by.
 		const contexts = classifyGroupedLines(allLines, details?.cwd ?? details?.searchPath, details?.searchPath);
-		const styledLines = allLines.map((line, index) => {
+		// Style lazily: collapsed bodies show only the first groups.
+		const styledLines: (string | undefined)[] = Array.from({ length: allLines.length }, () => undefined);
+		const styleLine = (index: number): string => {
+			const cached = styledLines[index];
+			if (cached !== undefined) return cached;
 			const ctx = contexts[index]!;
 			// Swap the inner code-frame gutter `│` for a space so it does not nest a
 			// second vertical bar inside the frame border.
-			const display = replaceTabs(line.replace("│", " "));
+			const display = replaceTabs(allLines[index]!.replace("│", " "));
+			let styled: string;
 			if (ctx.kind === "dir") {
-				const styled = uiTheme.fg("accent", display);
-				return ctx.headerPath ? fileHyperlink(ctx.headerPath, styled) : styled;
+				const accent = uiTheme.fg("accent", display);
+				styled = ctx.headerPath ? fileHyperlink(ctx.headerPath, accent) : accent;
+			} else if (ctx.kind === "file") {
+				const tinted = uiTheme.fg(ctx.depth === 1 ? "accent" : "dim", display);
+				styled = ctx.headerPath ? fileHyperlink(ctx.headerPath, tinted) : tinted;
+			} else if (display.startsWith("+")) {
+				styled = uiTheme.fg("toolDiffAdded", display);
+			} else if (display.startsWith("-")) {
+				styled = uiTheme.fg("toolDiffRemoved", display);
+			} else {
+				styled = uiTheme.fg("toolOutput", display);
 			}
-			if (ctx.kind === "file") {
-				const styled = uiTheme.fg(ctx.depth === 1 ? "accent" : "dim", display);
-				return ctx.headerPath ? fileHyperlink(ctx.headerPath, styled) : styled;
-			}
-			if (display.startsWith("+")) return uiTheme.fg("toolDiffAdded", display);
-			if (display.startsWith("-")) return uiTheme.fg("toolDiffRemoved", display);
-			return uiTheme.fg("toolOutput", display);
+			styledLines[index] = styled;
+			return styled;
+		};
+		const changeGroups = groupLineIndicesByBlank(allLines).filter(indices => {
+			const first = allLines[indices[0]!]!;
+			return !first.startsWith("Safety cap reached") && !first.startsWith("Parse issues:");
 		});
-		const changeGroups = groupLineIndicesByBlank(allLines)
-			.filter(indices => {
-				const first = allLines[indices[0]!]!;
-				return !first.startsWith("Safety cap reached") && !first.startsWith("Parse issues:");
-			})
-			.map(indices => indices.map(index => styledLines[index]!));
 
 		const badge = { label: "proposed", color: "warning" as const };
 		const header = renderStatusLine(
@@ -278,17 +291,28 @@ export const astEditToolRenderer = {
 				uiTheme.fg("warning", formatParseErrorsCountLabel(details.parseErrors, details.parseErrorsTotal)),
 			);
 		}
-		return framedToolCard(uiTheme, ({ contentWidth }) => {
-			const changeLines = buildChangeBody(changeGroups, Boolean(options.expanded), COLLAPSED_CHANGE_LIMIT, uiTheme);
-			const bodyLines = [...changeLines, ...extraLines].map(l => truncateToWidth(l, contentWidth, Ellipsis.Omit));
-			while (bodyLines.length > 0 && bodyLines[0].trim() === "") bodyLines.shift();
-			return {
-				header,
-				sections: bodyLines.length > 0 ? [{ content: bodyLines }] : [],
-				phase: options.isPartial ? "partial" : "success",
-				borderColor: "borderMuted",
-			};
-		});
+		// The body is spinner-invariant: rebuild it only on expansion/width change.
+		let bodyMemo: { expanded: boolean; width: number; lines: readonly string[] } | undefined;
+		return framedToolCard(
+			uiTheme,
+			({ contentWidth }) => {
+				const expanded = Boolean(options.expanded);
+				if (bodyMemo === undefined || bodyMemo.expanded !== expanded || bodyMemo.width !== contentWidth) {
+					const changeLines = buildChangeBody(changeGroups, styleLine, expanded, COLLAPSED_CHANGE_LIMIT, uiTheme);
+					const lines = [...changeLines, ...extraLines].map(l => truncateToWidth(l, contentWidth, Ellipsis.Omit));
+					while (lines.length > 0 && lines[0].trim() === "") lines.shift();
+					bodyMemo = { expanded, width: contentWidth, lines };
+				}
+				const bodyLines = bodyMemo.lines;
+				return {
+					header,
+					sections: bodyLines.length > 0 ? [{ content: bodyLines }] : [],
+					phase: options.isPartial ? "partial" : "success",
+					borderColor: "borderMuted",
+				};
+			},
+			{ onInvalidate: () => (bodyMemo = undefined) },
+		);
 	},
 	describeCall(args: AstEditRenderArgs): NativeToolView {
 		return {

package/src/tools/ast-grep.ts

@@ -136,25 +136,41 @@ export const astGrepToolRenderer = {
 		// Resolve hyperlinks over the whole output so nested directory headers
 		// reconstruct across the blank-line groups the tree list collapses by.
 		const contexts = classifyGroupedLines(allLines, details?.cwd ?? details?.searchPath, details?.searchPath);
-		const styledLines = allLines.map((line, index) => {
+		// Style lazily: the collapsed tree list only renders the first few groups,
+		// so a large result never styles/hyperlinks rows nobody sees.
+		const styledLines: (string | undefined)[] = Array.from({ length: allLines.length }, () => undefined);
+		const styleLine = (index: number): string => {
+			const cached = styledLines[index];
+			if (cached !== undefined) return cached;
+			const line = allLines[index]!;
 			const ctx = contexts[index]!;
+			let styled: string;
 			if (ctx.kind === "dir") {
-				const styled = uiTheme.fg("accent", line);
-				return ctx.headerPath ? fileHyperlink(ctx.headerPath, styled) : styled;
+				const accent = uiTheme.fg("accent", line);
+				styled = ctx.headerPath ? fileHyperlink(ctx.headerPath, accent) : accent;
+			} else if (ctx.kind === "file") {
+				const tinted = uiTheme.fg(ctx.depth === 1 ? "accent" : "dim", line);
+				styled = ctx.headerPath ? fileHyperlink(ctx.headerPath, tinted) : tinted;
+			} else {
+				styled = uiTheme.fg(line.startsWith("  meta:") ? "dim" : "toolOutput", line);
 			}
-			if (ctx.kind === "file") {
-				const styled = uiTheme.fg(ctx.depth === 1 ? "accent" : "dim", line);
-				return ctx.headerPath ? fileHyperlink(ctx.headerPath, styled) : styled;
-			}
-			if (line.startsWith("  meta:")) return uiTheme.fg("dim", line);
-			return uiTheme.fg("toolOutput", line);
+			styledLines[index] = styled;
+			return styled;
+		};
+		const matchGroups = groupLineIndicesByBlank(allLines).filter(indices => {
+			const first = allLines[indices[0]!]!;
+			return !first.startsWith("Result limit reached") && !first.startsWith("Parse issues:");
 		});
-		const matchGroups = groupLineIndicesByBlank(allLines)
-			.filter(indices => {
-				const first = allLines[indices[0]!]!;
-				return !first.startsWith("Result limit reached") && !first.startsWith("Parse issues:");
-			})
-			.map(indices => indices.map(index => styledLines[index]!));
+		// Line offset at which each group starts. A collapsed tree list stops at the
+		// first group that overflows its line budget, so groups starting at or past
+		// the budget are never shown — hand it same-length placeholders instead of
+		// styling them (renderTreeList only needs their line counts).
+		const groupStarts: number[] = [];
+		let groupStart = 0;
+		for (const group of matchGroups) {
+			groupStarts.push(groupStart);
+			groupStart += group.length;
+		}
 
 		const extraLines: string[] = [];
 		if (limitReached) {
@@ -178,7 +194,10 @@ export const astGrepToolRenderer = {
 						maxCollapsed: matchGroups.length,
 						maxCollapsedLines: COLLAPSED_MATCH_LIMIT,
 						itemType: "match",
-						renderItem: group => group,
+						renderItem: (group, context) =>
+							!options.expanded && groupStarts[context.index]! >= COLLAPSED_MATCH_LIMIT
+								? Array.from({ length: group.length }, () => "")
+								: group.map(styleLine),
 					},
 					uiTheme,
 				);

package/src/tools/bash.d.ts

@@ -4,8 +4,13 @@ import { type OutputMeta } from "./output-meta";
 import type { NativeToolView, RenderResultContextOptions, RenderResultOptions } from "./renderer";
 /** Default collapsed shell output preview height. */
 export declare const BASH_DEFAULT_PREVIEW_LINES = 10;
-/** LLM-facing footer appended when a tool call becomes a background job. */
-export declare function formatBackgroundNotice(jobId: string): string;
+/**
+ * LLM-facing footer appended when a tool call becomes a background job. It states the job's kill
+ * deadline (`timeoutSec`, `undefined` when disabled) so the model knows the job will die at it before
+ * it waits on the result. The deadline counts the job's whole run time, not time left from now: an
+ * auto-backgrounded call has already spent its foreground wait.
+ */
+export declare function formatBackgroundNotice(jobId: string, timeoutSec: number | undefined): string;
 /** Shell execution metadata used by transcript rendering. */
 export interface BashToolDetails {
     meta?: OutputMeta;

package/src/tools/bash.ts

@@ -25,16 +25,34 @@ import type {
 	RenderResultOptions,
 	ToolRenderer,
 } from "./renderer";
-import { ansi, compact, keyed } from "../native/describe";
-import type { NativeChild } from "../native/node";
-import { footnoteText, resultText } from "./native-view";
+import { INTENT_FIELD, type TspTone } from "@linxiraos/pi-wire";
+import { plainText } from "../native/spans";
+import { resultText, runBox, runFoot, runInput, runOutput, type RunState } from "./native-view";
 
 /** Default collapsed shell output preview height. */
 export const BASH_DEFAULT_PREVIEW_LINES = DEFAULT_TERMINAL_PREVIEW_LINES;
 
-/** LLM-facing footer appended when a tool call becomes a background job. */
-export function formatBackgroundNotice(jobId: string): string {
-	return `Backgrounded as job ${jobId}; its output is injected into the conversation as a follow-up the moment it finishes. Do NOT poll for it (no \`sleep\`, \`ps\`, \`pgrep\`, \`top\`, \`pidwait\`, log tailing): every poll is a wasted turn. Do other work, or end your reply and wait to be woken.`;
+/**
+ * LLM-facing footer appended when a tool call becomes a background job. It states the job's kill
+ * deadline (`timeoutSec`, `undefined` when disabled) so the model knows the job will die at it before
+ * it waits on the result. The deadline counts the job's whole run time, not time left from now: an
+ * auto-backgrounded call has already spent its foreground wait.
+ */
+export function formatBackgroundNotice(jobId: string, timeoutSec: number | undefined): string {
+	const deadline =
+		timeoutSec === undefined
+			? " (no deadline)"
+			: ` (killed once it has run ${timeoutSec}s in total; \`timeout: 0\` disables the deadline)`;
+	return `Backgrounded as job ${jobId}${deadline}; its output is injected into the conversation as a follow-up the moment it finishes. Do NOT poll for it (no \`sleep\`, \`ps\`, \`pgrep\`, \`top\`, \`pidwait\`, log tailing): every poll is a wasted turn. Do other work, or end your reply and wait to be woken.`;
+}
+
+/**
+ * Whether `line` is `formatBackgroundNotice(jobId, …)` for any deadline, including the deadline-less
+ * `Backgrounded as job <id>; …` form persisted in older transcripts.
+ */
+function isBackgroundNotice(line: string, jobId: string): boolean {
+	const prefix = `Backgrounded as job ${jobId}`;
+	return line.startsWith(prefix) && (line[prefix.length] === ";" || line[prefix.length] === " ");
 }
 
 /** Shell execution metadata used by transcript rendering. */
@@ -289,9 +307,10 @@ function stripBashNotices(
 	rawOutput: string,
 	details: BashToolDetails | undefined,
 ): { text: string; artifactId?: string } {
+	const job = details?.async;
 	const withoutBackground =
-		details?.async?.state === "running"
-			? stripTrailingNotice(rawOutput, formatBackgroundNotice(details.async.jobId))
+		job?.state === "running"
+			? stripTrailingNotice(rawOutput, line => isBackgroundNotice(line, job.jobId))
 			: rawOutput;
 	const strippedOutput = stripOutputNotice(withoutBackground, details?.meta);
 	const withoutExit =
@@ -348,34 +367,41 @@ function bashStatsParts(
 }
 
 /**
- * Native head facts of a shell call: title, the command once (`cd`/env
- * prefix included), a `background` badge for a backgrounded job, the
- * `exit N` chip and a `timed out` note only when the deadline hit.
+ * Native head facts of a shell call: title, the model's intent as the target
+ * (none without one), the command line for Copy command, the `exit N` chip
+ * and a `timed out` note only when the deadline hit. The command itself and a
+ * backgrounded job's state draw in the run box.
  */
 function shellToolHead(
 	title: string,
 	command: string,
+	intent: string | undefined,
 	details: BashToolDetails | undefined,
 	settled: boolean,
 ): NativeToolHead {
 	const exit = settled && details?.exitCode !== undefined && details.exitCode !== 0 ? details.exitCode : undefined;
 	return {
 		title,
-		target: command,
-		targetKind: "command",
-		lang: "bash",
-		badges:
-			details?.async?.state === "running"
-				? [{ text: "background", title: `Backgrounded as job ${details.async.jobId}` }]
-				: undefined,
+		target: intent,
+		targetKind: intent ? "text" : undefined,
+		command,
 		exit,
 		note: settled && details?.timedOut === true ? "timed out" : undefined,
 	};
 }
 
-/** The quiet final line's facts under shell output: service state and the full-output artifact. */
+/** The model's intent line (`i` arg) as plain head text, or undefined when absent. */
+function callIntent(args: unknown): string | undefined {
+	if (!args || typeof args !== "object" || !(INTENT_FIELD in args)) return undefined;
+	const value = args[INTENT_FIELD];
+	if (typeof value !== "string") return undefined;
+	return plainText(value).trim() || undefined;
+}
+
+/** The run foot's facts under shell output: background job, service state and the full-output artifact. */
 function shellFootParts(details: BashToolDetails | undefined, artifactId: string | undefined): string[] {
 	const parts: string[] = [];
+	if (details?.async?.state === "running") parts.push(`Job ${details.async.jobId}`);
 	const service = details?.service;
 	if (service) {
 		parts.push(`Service ${service.name}`, service.state);
@@ -386,6 +412,27 @@ function shellFootParts(details: BashToolDetails | undefined, artifactId: string
 	return parts;
 }
 
+/** The command line as a run's input: wrapped shell source. */
+const SHELL_INPUT = { role: "zeta.tool.bash.command", lang: "bash", wrap: true } as const;
+
+/** Box tint per run state: failed runs read as errors, timed-out ones as warnings. */
+const RUN_BOX_TONE: Partial<Record<RunState, TspTone>> = { failed: "error", "timed-out": "warning" };
+
+/** The foot state of a shell call from its result. */
+function shellRunState(
+	details: BashToolDetails | undefined,
+	isError: boolean,
+	isPartial: boolean,
+	cancelled: boolean,
+): RunState {
+	if (cancelled) return "cancelled";
+	if (isPartial) return "running";
+	if (details?.timedOut === true) return "timed-out";
+	if (details?.async?.state === "running") return "background";
+	if (isError || (details?.exitCode !== undefined && details.exitCode !== 0)) return "failed";
+	return "done";
+}
+
 function toBashRenderArgs<TArgs>(args: TArgs | undefined, config: ShellRendererConfig<TArgs>): BashRenderArgs {
 	return {
 		command: config.resolveCommand?.(args),
@@ -475,6 +522,15 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 			let cachedIsPartial: boolean | undefined;
 			let cachedPreviewWindow: number | undefined;
 			let cachedSnapshot: ToolCardSnapshot | undefined;
+			const dropSnapshot = () => {
+				cachedSnapshot = undefined;
+				cachedWidth = undefined;
+				cachedPreviewLines = undefined;
+				cachedExpanded = undefined;
+				cachedRawOutput = undefined;
+				cachedIsPartial = undefined;
+				cachedPreviewWindow = undefined;
+			};
 
 			return framedToolCard(
 				uiTheme,
@@ -577,25 +633,26 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 					cachedSnapshot = snapshot;
 					return snapshot;
 				},
-				{
-					onInvalidate: () => {
-						cachedSnapshot = undefined;
-						cachedWidth = undefined;
-						cachedPreviewLines = undefined;
-						cachedExpanded = undefined;
-						cachedRawOutput = undefined;
-						cachedIsPartial = undefined;
-						cachedPreviewWindow = undefined;
-					},
-				},
+				{ onInvalidate: dropSnapshot, onReleaseRenderCaches: dropSnapshot },
 			);
 		},
 		describeCall(args: TArgs, options: RenderResultOptions): NativeToolView {
 			const command = formatBashCommandText(toBashRenderArgs(args, config));
-			// The command shows once, in the head; the body is only the output.
+			// No foot until the command starts; once it runs (before any output) the clock shows.
+			const started = options.executionStarted === true;
 			return {
-				tool: shellToolHead(config.resolveTitle(args, options), command, undefined, false),
-				preview: { tail: BASH_DEFAULT_PREVIEW_LINES },
+				tool: shellToolHead(config.resolveTitle(args, options), command, callIntent(args), undefined, false),
+				body: [
+					runBox(
+						[
+							runInput(command, SHELL_INPUT),
+							started &&
+								runFoot({ state: options.cancelled ? "cancelled" : "running", elapsedMs: options.elapsedMs }),
+						],
+						{ key: "run" },
+					),
+				],
+				preview: "children",
 			};
 		},
 
@@ -619,22 +676,34 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 			const showingFullOutput = expanded && renderContext?.isFullOutput === true;
 			const command = formatBashCommandText(toBashRenderArgs(args, config));
 			const previewLines = renderContext?.previewLines ?? BASH_DEFAULT_PREVIEW_LINES;
-			// Wall time is the head timer, the timeout a note only when hit, the exit a head chip:
-			// what is left (service state, artifact, truncation) is one quiet final line.
+			const state = shellRunState(details, isError, isPartial, options.cancelled === true);
+			// Settled: the measured wall time wins. A background job outlives the call: its run time is unknown here.
+			const elapsedMs =
+				state === "background"
+					? undefined
+					: isPartial
+						? options.elapsedMs
+						: (details?.wallTimeMs ?? options.elapsedMs);
 			const meta = details?.meta;
-			const body: NativeChild[] = compact([
-				output.trim().length > 0 &&
-					keyed(ansi(output, { follow: isPartial, role: "zeta.tool.bash.output" }), "output"),
-				footnoteText(shellFootParts(details, stripped.artifactId), {
-					...meta,
-					truncation: showingFullOutput ? undefined : meta?.truncation,
-				}),
-			]);
+			const box = runBox(
+				[
+					runInput(command, SHELL_INPUT),
+					output.trim().length > 0 && runOutput(output, { role: "zeta.tool.bash.output", previewLines }),
+					runFoot({
+						state,
+						exitCode: details?.exitCode,
+						elapsedMs,
+						facts: shellFootParts(details, stripped.artifactId),
+						meta: { ...meta, truncation: showingFullOutput ? undefined : meta?.truncation },
+					}),
+				],
+				{ key: "run", tone: RUN_BOX_TONE[state] },
+			);
 			return {
-				tool: shellToolHead(config.resolveTitle(args, options), command, details, !isPartial),
-				body,
-				tone: !isPartial && isError && details?.timedOut === true ? "warning" : undefined,
-				preview: { tail: previewLines },
+				tool: shellToolHead(config.resolveTitle(args, options), command, callIntent(args), details, !isPartial),
+				body: [box],
+				tone: state === "timed-out" ? "warning" : undefined,
+				preview: "children",
 			};
 		},
 		mergeCallAndResult: true,

package/src/tools/daemon.d.ts

@@ -1,4 +1,4 @@
-/** Launch-broker daemon types shared by services, `proc://`, and `omp ps`. */
+/** Launch-broker daemon types shared by services, `proc://`, and `zetacode ps`. */
 /** Stable lifecycle states exposed by the launch broker. */
 export type DaemonState = "starting" | "running" | "ready" | "restarting" | "stopping" | "exited" | "failed";
 /** Restart behavior applied after an unexpected daemon exit. */

package/src/tools/daemon.ts

@@ -1,4 +1,4 @@
-/** Launch-broker daemon types shared by services, `proc://`, and `omp ps`. */
+/** Launch-broker daemon types shared by services, `proc://`, and `zetacode ps`. */
 
 /** Stable lifecycle states exposed by the launch broker. */
 export type DaemonState = "starting" | "running" | "ready" | "restarting" | "stopping" | "exited" | "failed";

package/src/tools/default-renderer.ts

@@ -39,19 +39,8 @@ export interface DefaultToolRenderInput {
 	options: RenderResultOptions;
 }
 
-/** Header/body assembly shared by the string and Component APIs. */
-interface DefaultToolSnapshot {
-	status: StatusLineOptions;
-	phase: ToolCardPhase;
-	body: readonly string[];
-}
-
-/** Compute the single header/body assembly behind both default-tool entry points. */
-function buildDefaultToolSnapshot(
-	input: DefaultToolRenderInput,
-	uiTheme: Theme,
-	contentWidth: number,
-): DefaultToolSnapshot {
+/** Spinner-dependent header state; cheap, recomputed every frame. */
+function buildDefaultToolStatus(input: DefaultToolRenderInput): { status: StatusLineOptions; phase: ToolCardPhase } {
 	const { options, result } = input;
 	const status: StatusLineOptions = {
 		icon: options.isPartial
@@ -76,7 +65,12 @@ function buildDefaultToolSnapshot(
 			: result?.isError
 				? "error"
 				: "success";
+	return { status, phase };
+}
 
+/** Args preview plus JSON-tree/raw output body; depends only on args, output, expansion and width. */
+function buildDefaultToolBody(input: DefaultToolRenderInput, uiTheme: Theme, contentWidth: number): string[] {
+	const { options, result } = input;
 	const body: string[] = [];
 	const args = isRecord(input.args) ? input.args : undefined;
 	if (!options.expanded && args && Object.keys(args).length > 0) {
@@ -149,7 +143,7 @@ function buildDefaultToolSnapshot(
 		}
 	}
 
-	return { status, phase, body };
+	return body;
 }
 
 /** Format one generic tool call/result card at the available content width. */
@@ -158,8 +152,8 @@ export function formatDefaultToolExecution(
 	contentWidth: number,
 	uiTheme: Theme,
 ): string {
-	const snapshot = buildDefaultToolSnapshot(input, uiTheme, contentWidth);
-	return [renderStatusLine(snapshot.status, uiTheme), ...snapshot.body].join("\n");
+	const { status } = buildDefaultToolStatus(input);
+	return [renderStatusLine(status, uiTheme), ...buildDefaultToolBody(input, uiTheme, contentWidth)].join("\n");
 }
 
 /** Inline args summary budget in characters (a data cap, not a width). */
@@ -195,12 +189,34 @@ export function describeDefaultToolExecution(input: DefaultToolRenderInput): Nat
 
 /** Render the generic fallback as the state-tinted card used by direct custom tools. */
 export function renderDefaultToolExecution(input: DefaultToolRenderInput, uiTheme: Theme): Component {
+	// The body (JSON parse + tree walk or output styling) is spinner-invariant;
+	// rebuild it only when its inputs change instead of on every animated frame.
+	let memo:
+		| { args: unknown; output: string | undefined; expanded: boolean; contentWidth: number; body: readonly string[] }
+		| undefined;
 	return plainToolCard(
 		uiTheme,
 		({ contentWidth }) => {
-			const snapshot = buildDefaultToolSnapshot(input, uiTheme, contentWidth);
-			return { status: snapshot.status, phase: snapshot.phase, body: snapshot.body };
+			const { status, phase } = buildDefaultToolStatus(input);
+			const output = input.result?.output;
+			const expanded = input.options.expanded;
+			if (
+				memo === undefined ||
+				memo.args !== input.args ||
+				memo.output !== output ||
+				memo.expanded !== expanded ||
+				memo.contentWidth !== contentWidth
+			) {
+				memo = {
+					args: input.args,
+					output,
+					expanded,
+					contentWidth,
+					body: buildDefaultToolBody(input, uiTheme, contentWidth),
+				};
+			}
+			return { status, phase, body: memo.body };
 		},
-		{ paddingX: 1, paddingY: 1, ignoreTight: true },
+		{ paddingX: 1, paddingY: 1, ignoreTight: true, onInvalidate: () => (memo = undefined) },
 	);
 }