@oh-my-pi/pi-coding-agent 16.3.6 → 16.3.8

package/src/modes/components/chat-transcript-builder.ts

@@ -29,6 +29,7 @@ import type { SessionMessageEntry } from "../../session/session-entries";
 import { theme } from "../theme/theme";
 import {
 	assistantHasVisibleContent,
+	assistantUsageIsBilled,
 	buildAsyncResultBlock,
 	buildFileMentionBlock,
 	buildIrcMessageCard,
@@ -270,13 +271,15 @@ export class ChatTranscriptBuilder {
 	}
 
 	#appendAssistantMessage(message: Extract<AgentMessage, { role: "assistant" }>): void {
+		const hideThinkingBlock = this.deps.hideThinkingBlock?.() ?? false;
+		const proseOnlyThinking = this.deps.proseOnlyThinking ? this.deps.proseOnlyThinking() : true;
 		const assistantComponent = new AssistantMessageComponent(
 			message,
-			this.deps.hideThinkingBlock?.() ?? false,
+			hideThinkingBlock,
 			() => this.deps.requestRender(),
 			this.deps.getMessageRenderer ? undefined : [], // placeholder for thinkingRenderers
 			undefined, // placeholder for imageBudget
-			this.deps.proseOnlyThinking ? this.deps.proseOnlyThinking() : true,
+			proseOnlyThinking,
 		);
 		this.container.addChild(assistantComponent);
 
@@ -354,7 +357,8 @@ export class ChatTranscriptBuilder {
 			}
 		}
 
-		this.#pendingUsage = settings.get("display.showTokenUsage") ? message.usage : undefined;
+		this.#pendingUsage =
+			settings.get("display.showTokenUsage") && assistantUsageIsBilled(message.usage) ? message.usage : undefined;
 		this.#pendingUsageDuration = message.duration;
 		this.#pendingUsageTtft = message.ttft;
 	}

package/src/modes/components/copy-selector.ts

@@ -53,6 +53,8 @@ function gutterCells(hasNext: boolean): string {
 export class CopySelectorComponent implements Component {
 	#roots: CopyTarget[];
 	#cursorId: string;
+	#lastSourceTarget?: CopyTarget;
+	#lastSource?: string;
 	#treeRows = MIN_TREE_ROWS;
 	// Reused across renders to wrap preview content to the pane width.
 	#previewText = new Text("", 0, 0);
@@ -65,7 +67,10 @@ export class CopySelectorComponent implements Component {
 		this.#cursorId = roots[0]?.id ?? "";
 	}
 
-	invalidate(): void {}
+	invalidate(): void {
+		this.#lastSourceTarget = undefined;
+		this.#lastSource = undefined;
+	}
 
 	#flatten(): FlatNode[] {
 		const out: FlatNode[] = [];
@@ -153,9 +158,16 @@ export class CopySelectorComponent implements Component {
 		// Code/command previews are syntax-highlighted; everything else is shown
 		// as plain text. Both are wrapped (not hard-truncated) to the pane width.
 		const isCode = target.language !== undefined;
-		const source = isCode
-			? highlightCode(replaceTabs(target.preview), target.language).join("\n")
-			: replaceTabs(target.preview);
+		let source: string;
+		if (target === this.#lastSourceTarget && this.#lastSource !== undefined) {
+			source = this.#lastSource;
+		} else {
+			source = isCode
+				? highlightCode(replaceTabs(target.preview), target.language).join("\n")
+				: replaceTabs(target.preview);
+			this.#lastSourceTarget = target;
+			this.#lastSource = source;
+		}
 		this.#previewText.setText(source);
 		const wrapped = this.#previewText.render(Math.max(1, width - 4));
 

package/src/modes/components/model-selector.ts

@@ -704,29 +704,22 @@ export class ModelSelectorComponent extends Container {
 	#filterModels(query: string): void {
 		const activeProviderId = this.#getActiveProviderId();
 
-		let baseModels = this.#allModels;
-		if (activeProviderId) {
-			baseModels = this.#allModels.filter(m => m.provider === activeProviderId);
-		}
+		const baseModels = activeProviderId
+			? this.#allModels.filter(m => m.provider === activeProviderId)
+			: this.#allModels;
 
 		if (query.trim()) {
-			// If user is searching from a provider tab, auto-switch to ALL to show global provider results.
-			if (activeProviderId) {
-				this.#activeTabIndex = 0;
-				if (this.#tabBar && this.#tabBar.getActiveIndex() !== 0) {
-					this.#tabBar.setActiveIndex(0);
-					return;
-				}
-				this.#updateTabBar();
-				baseModels = this.#allModels;
-			}
-
 			// Match against the displayed "provider/id" string so the user can
 			// type what they see: bare names (`mimo`, `kimi`), provider prefixes
 			// (`openrouter`), or scoped queries (`openrouter/mimo`) all flow
 			// through the same fuzzy matcher. The score is biased by provider-
 			// prefix length, so re-sort by MRU/version afterwards; skip role
 			// rank so a weakly matching default doesn't trump a stronger match.
+			//
+			// Search stays scoped to the active provider tab. Auto-escaping to
+			// ALL on non-empty queries used to let the user pick a same-named
+			// model from a different provider and silently persist it under
+			// their default role — see issue #4522.
 			const fuzzyMatches = fuzzyFilter(baseModels, query, ({ id, provider }) => `${provider}/${id}`);
 			this.#sortModels(fuzzyMatches, { skipRoleRank: true });
 			this.#filteredModels = fuzzyMatches;
@@ -891,8 +884,15 @@ export class ModelSelectorComponent extends Container {
 				this.#listContainer.addChild(new Text(theme.fg("error", line), 0, 0));
 			}
 		} else if (visibleItems.length === 0) {
-			const statusMessage = this.#getProviderEmptyStateMessage();
-			this.#listContainer.addChild(new Text(theme.fg("muted", statusMessage ?? "  No matching models"), 0, 0));
+			const providerStatus = this.#getProviderEmptyStateMessage();
+			const activeProviderId = this.#getActiveProviderId();
+			const searching = this.#searchInput.getValue().trim().length > 0;
+			const message =
+				providerStatus ??
+				(searching && activeProviderId
+					? `  No matching models in ${formatProviderTabLabel(activeProviderId)}. Switch to ALL to search every provider.`
+					: "  No matching models");
+			this.#listContainer.addChild(new Text(theme.fg("muted", message), 0, 0));
 		} else {
 			const selected = visibleItems[this.#selectedIndex];
 			if (!selected) {

package/src/modes/components/session-selector.ts

@@ -414,15 +414,23 @@ class SessionList implements Component {
 	}
 
 	handleInput(keyData: string): void {
-		// Delete key - request delete confirmation from parent
-		if (matchesKey(keyData, "delete")) {
+		// Delete key — or Backspace on an empty search query — request delete
+		// confirmation from the parent. macOS laptops have no dedicated Forward
+		// Delete key: Fn+Backspace is the only way to send \e[3~, and many macOS
+		// terminals (Terminal.app, some iTerm2 profiles) deliver \x7f for that
+		// combo instead. Regular Backspace on an empty query means "delete
+		// session"; with a typed query it stays bound to the search Input so users
+		// can still edit their filter text.
+		if (
+			matchesKey(keyData, "delete") ||
+			(matchesKey(keyData, "backspace") && this.#searchInput.getValue().length === 0)
+		) {
 			const selected = this.#filteredSessions[this.#selectedIndex];
 			if (selected && this.onDeleteRequest) {
 				this.onDeleteRequest(selected);
 			}
 			return;
 		}
-
 		// Up arrow
 		if (matchesSelectUp(keyData)) {
 			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
@@ -702,7 +710,7 @@ export class SessionSelectorComponent extends Container {
 	/** Blank · keybinding hint · bottom border. Rendered by {@link render}. */
 	#footerLines(width: number): string[] {
 		const scopeHint = this.#scope === "all" ? "current folder" : "all projects";
-		const hint = theme.fg("muted", `  [Del delete · Enter select · Tab ${scopeHint} · Esc cancel]`);
+		const hint = theme.fg("muted", `  [Del/⌫ delete · Enter select · Tab ${scopeHint} · Esc cancel]`);
 		return ["", hint, "", ...this.#bottomBorder.render(width)];
 	}
 

package/src/modes/components/status-line/component.ts

@@ -998,6 +998,10 @@ export class StatusLineComponent implements Component {
 			output: 0,
 			cacheRead: 0,
 			cacheWrite: 0,
+			totalTokens: 0,
+			orchestrationInput: 0,
+			orchestrationOutput: 0,
+			orchestrationCacheRead: 0,
 			premiumRequests: 0,
 			cost: 0,
 		};

package/src/modes/components/status-line/segments.ts

@@ -362,10 +362,11 @@ const tokenTotalSegment: StatusLineSegment = {
 	id: "token_total",
 	render(ctx) {
 		// Excludes cacheRead: that field re-reads the full cached context every
-		// turn, making the cumulative sum N×context_size. The dedicated cache_read
-		// segment handles cache monitoring; the cost segment handles billing.
-		const { input, output, cacheWrite } = ctx.usageStats;
-		const total = input + output + cacheWrite;
+		// turn, making the cumulative sum N×context_size. Orchestration cache read
+		// follows the same rule; orchestration input/output remain in the total so
+		// provider-side service work is preserved without labeling it prompt input.
+		const { input, output, cacheWrite, orchestrationInput, orchestrationOutput } = ctx.usageStats;
+		const total = input + output + cacheWrite + orchestrationInput + orchestrationOutput;
 		if (!total) return { content: "", visible: false };
 
 		const content = withIcon(theme.icon.tokens, formatNumber(total));
@@ -379,7 +380,7 @@ const tokenRateSegment: StatusLineSegment = {
 		const { tokensPerSecond } = ctx.usageStats;
 		if (!tokensPerSecond) return { content: "", visible: false };
 
-		const content = withIcon(theme.icon.throughput, `${tokensPerSecond.toFixed(1)}/s`);
+		const content = withIcon(theme.icon.throughput, `${tokensPerSecond.toFixed(1)} tok/s`);
 		return { content: theme.fg("statusLineOutput", content), visible: true };
 	},
 };

package/src/modes/components/status-line/types.ts

@@ -74,6 +74,10 @@ export interface SegmentContext {
 		output: number;
 		cacheRead: number;
 		cacheWrite: number;
+		totalTokens: number;
+		orchestrationInput: number;
+		orchestrationOutput: number;
+		orchestrationCacheRead: number;
 		premiumRequests: number;
 		cost: number;
 		tokensPerSecond: number | null;

package/src/modes/components/tool-execution.ts

@@ -167,7 +167,7 @@ export interface ToolExecutionOptions {
 	liveRegion?: TranscriptLiveRegionProbe;
 }
 
-export interface ToolExecutionHandle {
+export interface ToolExecutionHandle extends Component {
 	updateArgs(args: any, toolCallId?: string): void;
 	updateResult(
 		result: {
@@ -622,7 +622,10 @@ export class ToolExecutionComponent extends Container implements NativeScrollbac
 				const frameCount = theme.spinnerFrames.length;
 				this.#spinnerFrame = sharedSpinnerFrame(frameCount, now);
 				this.#renderState.spinnerFrame = this.#spinnerFrame;
-				this.#ui.requestRender();
+				// Component-scoped: a spinner tick only changes this tool block, so
+				// the TUI reuses every other root subtree instead of walking the
+				// whole tree (issue #4377).
+				this.#ui.requestComponentRender(this);
 			}, SPINNER_RENDER_INTERVAL_MS);
 		} else if (!needsSpinner && this.#spinnerInterval) {
 			clearInterval(this.#spinnerInterval);
@@ -679,7 +682,9 @@ export class ToolExecutionComponent extends Container implements NativeScrollbac
 				this.#spinnerFrame = nextFrame;
 				this.#renderState.spinnerFrame = nextFrame;
 			}
-			this.#ui.requestRender();
+			// Component-scoped: strike animation only mutates this tool block's
+			// glyph, so the TUI reuses every other root subtree (issue #4377).
+			this.#ui.requestComponentRender(this);
 		}, 65);
 	}
 

package/src/modes/controllers/command-controller.ts

@@ -1121,6 +1121,7 @@ export class CommandController {
 		customInstructions?: string,
 		mode?: CompactMode,
 		beforeFlush?: (outcome: CompactionOutcome) => void | Promise<void>,
+		internalGuidance?: string,
 	): Promise<CompactionOutcome> {
 		const entries = this.ctx.sessionManager.getEntries();
 		const messageCount = entries.filter(e => e.type === "message").length;
@@ -1130,6 +1131,15 @@ export class CommandController {
 			return "ok";
 		}
 
+		// `internalGuidance` is a private summarizer directive (plan-mode
+		// "Approve and compact context") that MUST stay off the public
+		// `customInstructions` channel of the `session_before_compact` extension
+		// hook — extensions treat that field as user focus and would otherwise
+		// bias the summary toward the plan boilerplate (issue #4359). Ride it
+		// through as a CompactOptions field instead.
+		if (internalGuidance) {
+			return this.executeCompaction({ internalGuidance, ...(mode ? { mode } : {}) }, false, beforeFlush, mode);
+		}
 		return this.executeCompaction(customInstructions, false, beforeFlush, mode);
 	}
 

package/src/modes/controllers/event-controller.ts

@@ -32,6 +32,7 @@ import { vocalizer } from "../../tts/vocalizer";
 import { canonicalizeMessage } from "../../utils/thinking-display";
 import { interruptHint } from "../shared";
 import { createAssistantMessageComponent } from "../utils/interactive-context-helpers";
+import { assistantUsageIsBilled } from "../utils/transcript-render-helpers";
 import { StreamingRevealController } from "./streaming-reveal";
 import { streamingStringKeysForTool, ToolArgsRevealController } from "./tool-args-reveal";
 
@@ -133,11 +134,11 @@ export class EventController {
 			getSmoothStreaming: () => this.ctx.settings.get("display.smoothStreaming"),
 			getHideThinkingBlock: () => this.ctx.effectiveHideThinkingBlock,
 			getProseOnlyThinking: () => this.ctx.proseOnlyThinking,
-			requestRender: () => this.ctx.ui.requestRender(),
+			requestRender: component => this.ctx.ui.requestComponentRender(component),
 		});
 		this.#toolArgsReveal = new ToolArgsRevealController({
 			getSmoothStreaming: () => this.ctx.settings.get("display.smoothStreaming"),
-			requestRender: () => this.ctx.ui.requestRender(),
+			requestRender: component => this.ctx.ui.requestComponentRender(component),
 		});
 		this.#handlers = {
 			agent_start: e => this.#handleAgentStart(e),
@@ -849,7 +850,7 @@ export class EventController {
 			}
 			this.#lastAssistantComponent = this.ctx.streamingComponent;
 			this.#lastAssistantComponent.markTranscriptBlockFinalized();
-			if (settings.get("display.showTokenUsage")) {
+			if (settings.get("display.showTokenUsage") && assistantUsageIsBilled(event.message.usage)) {
 				this.ctx.chatContainer.addChild(
 					createUsageRowBlock(event.message.usage, event.message.duration, event.message.ttft),
 				);

package/src/modes/controllers/extension-ui-controller.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from "bun:test";
+import type { ExtensionUIContext } from "../../extensibility/extensions";
+import { CustomEditor } from "../components/custom-editor";
+import { getEditorTheme } from "../theme/theme";
+import type { InteractiveModeContext } from "../types";
+import { ExtensionUiController } from "./extension-ui-controller";
+
+function makeHarness() {
+	const editor = new CustomEditor(getEditorTheme());
+	const requestRender = vi.fn();
+	let uiContext: ExtensionUIContext | undefined;
+	const ctx = {
+		editor,
+		ui: {
+			requestRender,
+		},
+		session: {
+			extensionRunner: undefined,
+		},
+		setToolUIContext(context: ExtensionUIContext, hasUI: boolean): void {
+			expect(hasUI).toBe(true);
+			uiContext = context;
+		},
+	} as unknown as InteractiveModeContext;
+
+	return {
+		editor,
+		requestRender,
+		async init(): Promise<ExtensionUIContext> {
+			await new ExtensionUiController(ctx).initHooksAndCustomTools();
+			expect(uiContext).toBeDefined();
+			return uiContext!;
+		},
+	};
+}
+
+describe("ExtensionUiController editor UI", () => {
+	it("requests a render after extension pasteToEditor mutates the prompt", async () => {
+		const harness = makeHarness();
+		const ui = await harness.init();
+
+		ui.pasteToEditor("hello");
+		ui.pasteToEditor(" world");
+
+		expect(harness.editor.getText()).toBe("hello world");
+		expect(harness.requestRender).toHaveBeenCalledTimes(2);
+	});
+
+	it("requests a render after extension setEditorText replaces the prompt", async () => {
+		const harness = makeHarness();
+		const ui = await harness.init();
+
+		ui.setEditorText("hello");
+
+		expect(harness.editor.getText()).toBe("hello");
+		expect(harness.requestRender).toHaveBeenCalledTimes(1);
+	});
+});

package/src/modes/controllers/extension-ui-controller.ts

@@ -24,7 +24,7 @@ import { HookInputComponent } from "../../modes/components/hook-input";
 import { HookSelectorComponent, type HookSelectorSlider } from "../../modes/components/hook-selector";
 import { getAvailableThemesWithPaths, getThemeByName, setTheme, type Theme, theme } from "../../modes/theme/theme";
 import type { InteractiveModeContext, InteractiveSelectorDialogOptions } from "../../modes/types";
-import { USER_INTERRUPT_LABEL } from "../../session/messages";
+import { normalizeCustomMessagePayload, USER_INTERRUPT_LABEL } from "../../session/messages";
 import { setSessionTerminalTitle, setTerminalTitle } from "../../utils/title-generator";
 
 const MAX_WIDGET_LINES = 10;
@@ -71,9 +71,13 @@ export class ExtensionUiController {
 			setWidget: (key, content, options) => this.setHookWidget(key, content, options),
 			setTitle: title => setTerminalTitle(title),
 			custom: (factory, options) => this.showHookCustom(factory, options),
-			setEditorText: text => this.ctx.editor.setText(text),
+			setEditorText: text => {
+				this.ctx.editor.setText(text);
+				this.ctx.ui.requestRender();
+			},
 			pasteToEditor: text => {
 				this.ctx.editor.handleInput(`\x1b[200~${text}\x1b[201~`);
+				this.ctx.ui.requestRender();
 			},
 			getEditorText: () => this.ctx.editor.getText(),
 			editor: (title, prefill, dialogOptions, editorOptions) =>
@@ -106,9 +110,10 @@ export class ExtensionUiController {
 		const actions: ExtensionActions = {
 			sendMessage: (message, options) => {
 				const wasStreaming = this.ctx.session.isStreaming;
+				const normalized = normalizeCustomMessagePayload(message);
 				this.ctx.session
-					.sendCustomMessage(message, options)
-					.then(() => this.#applyCustomMessageDisplay(wasStreaming, message.display))
+					.sendCustomMessage(normalized, options)
+					.then(() => this.#applyCustomMessageDisplay(wasStreaming, normalized.display))
 					.catch((err: unknown) => {
 						this.ctx.showError(
 							`Extension sendMessage failed: ${err instanceof Error ? err.message : String(err)}`,
@@ -342,9 +347,10 @@ export class ExtensionUiController {
 		const actions: ExtensionActions = {
 			sendMessage: (message, options) => {
 				const wasStreaming = this.ctx.session.isStreaming;
+				const normalized = normalizeCustomMessagePayload(message);
 				this.ctx.session
-					.sendCustomMessage(message, options)
-					.then(() => this.#applyCustomMessageDisplay(wasStreaming, message.display))
+					.sendCustomMessage(normalized, options)
+					.then(() => this.#applyCustomMessageDisplay(wasStreaming, normalized.display))
 					.catch((err: unknown) => {
 						const errorText = `Extension sendMessage failed: ${err instanceof Error ? err.message : String(err)}`;
 						this.ctx.showError(errorText);

package/src/modes/controllers/input-controller.ts

@@ -23,6 +23,7 @@ import { isLowSignalTitleInput } from "../../tiny/text";
 import { tinyTitleClient } from "../../tiny/title-client";
 import type { TinyTitleProgressEvent } from "../../tiny/title-protocol";
 import { shortenPath, TRUNCATE_LENGTHS, truncateToWidth } from "../../tools/render-utils";
+import { vocalizer } from "../../tts/vocalizer";
 import {
 	copyToClipboard,
 	readImageFromClipboard,
@@ -390,6 +391,13 @@ export class InputController {
 				// Esc must not destroy an in-progress draft; it only disarms a previous empty-editor Esc.
 				this.ctx.lastEscapeTime = 0;
 				this.#clearStreamingEscapeArm();
+			} else if (vocalizer.isSpeaking()) {
+				// TTS buffers seconds of PCM past the streaming abort, so an Esc
+				// arriving after the model stopped would otherwise fall through to
+				// the double-Esc gesture while Kokoro reads on. Silence first;
+				// tree/branch stays reachable via a second Esc.
+				vocalizer.clear();
+				this.ctx.lastEscapeTime = 0;
 			} else {
 				// Double-interrupt with empty editor triggers /tree, /branch, or nothing based on setting
 				const action = settings.get("doubleEscapeAction");

package/src/modes/controllers/selector-controller.ts

@@ -1426,18 +1426,27 @@ export class SelectorController {
 			sessionFile: this.ctx.sessionManager.getSessionFile() ?? null,
 		});
 
-		// The double-← gesture passes requireContent so it stays inert when there
-		// are no subagents to show; the explicit hub/observe keys still open the
-		// empty roster. The freshly built hub already ran the persisted-subagent
-		// scan, so its row count is the authoritative "is there anything to show".
+		const showReadyHub = () => {
+			// The double-← gesture passes requireContent so it stays inert when
+			// neither live nor persisted subagents are available. Persisted rows now
+			// load asynchronously, so defer the gate until that scan has refreshed the
+			// hub instead of treating the initial empty table as authoritative.
+			if (options?.requireContent && hub.isEmpty) {
+				hub.dispose();
+				return;
+			}
+
+			this.ctx.editorContainer.clear();
+			this.ctx.editorContainer.addChild(hub);
+			this.ctx.ui.setFocus(hub);
+			this.ctx.ui.requestRender();
+		};
+
 		if (options?.requireContent && hub.isEmpty) {
-			hub.dispose();
+			void hub.persistedSubagentsReady.then(showReadyHub);
 			return;
 		}
 
-		this.ctx.editorContainer.clear();
-		this.ctx.editorContainer.addChild(hub);
-		this.ctx.ui.setFocus(hub);
-		this.ctx.ui.requestRender();
+		showReadyHub();
 	}
 }

package/src/modes/controllers/streaming-reveal.ts

@@ -1,5 +1,5 @@
 import type { AssistantMessage } from "@oh-my-pi/pi-ai";
-import { getSegmenter } from "@oh-my-pi/pi-tui";
+import { type Component, getSegmenter } from "@oh-my-pi/pi-tui";
 import { LRUCache } from "lru-cache/raw";
 import { formatThinkingForDisplay, hasDisplayableThinking } from "../../utils/thinking-display";
 import type { AssistantMessageComponent } from "../components/assistant-message";
@@ -10,14 +10,21 @@ export const CATCHUP_FRAMES = 8;
 
 type AssistantContentBlock = AssistantMessage["content"][number];
 type DisplayThinkingContentBlock = Extract<AssistantContentBlock, { type: "thinking" }> & { rawThinking?: string };
-type StreamingRevealComponent = Pick<AssistantMessageComponent, "updateContent">;
+/** The concrete streaming-reveal target is an {@link AssistantMessageComponent}; the
+ *  Component intersection is what lets the reveal request component-scoped renders
+ *  through {@link TUI.requestComponentRender} instead of forcing a full-tree walk. */
+type StreamingRevealComponent = Pick<AssistantMessageComponent, "updateContent"> & Component;
 type GraphemeSlicer = (index: number, text: string, units: number) => string;
 
 type StreamingRevealControllerOptions = {
 	getSmoothStreaming(): boolean;
 	getHideThinkingBlock(): boolean;
 	getProseOnlyThinking(): boolean;
-	requestRender(): void;
+	/** Called after each reveal tick with the component whose subtree changed;
+	 *  callers scope the render to that subtree (a full tree walk here at 30fps
+	 *  costs 5% of CPU on its own and drives the Box/Container overhead that
+	 *  cascades into another ~15% — see issue #4377). */
+	requestRender(component: Component): void;
 };
 
 const graphemeCountCache = new LRUCache<string, number>({ max: 128 });
@@ -210,7 +217,7 @@ export class StreamingRevealController {
 	readonly #getSmoothStreaming: () => boolean;
 	readonly #getHideThinkingBlock: () => boolean;
 	readonly #getProseOnlyThinking: () => boolean;
-	readonly #requestRender: () => void;
+	readonly #requestRender: (component: Component) => void;
 	#target: AssistantMessage | undefined;
 	#component: StreamingRevealComponent | undefined;
 	#timer: NodeJS.Timeout | undefined;
@@ -384,7 +391,7 @@ export class StreamingRevealController {
 		component.updateContent(this.#build(target, this.#revealed), {
 			transient: true,
 		});
-		this.#requestRender();
+		this.#requestRender(component);
 		if (this.#revealed >= total) {
 			this.#stopTimer();
 		}

package/src/modes/controllers/tool-args-reveal.ts

@@ -1,8 +1,9 @@
+import type { Component } from "@oh-my-pi/pi-tui";
 import { parseStreamingJson, parseStreamingJsonThrottled, STREAMING_JSON_PARSE_MIN_GROWTH } from "@oh-my-pi/pi-utils";
 import { nextStep, STREAMING_REVEAL_FRAME_MS } from "./streaming-reveal";
 
 /** Minimal component surface the reveal pushes frames into. */
-type ToolArgsRevealComponent = {
+type ToolArgsRevealComponent = Component & {
 	updateArgs(args: unknown, toolCallId?: string): void;
 };
 
@@ -25,7 +26,10 @@ export function streamingStringKeysForTool(toolName: string, rawInput: boolean):
 
 type ToolArgsRevealControllerOptions = {
 	getSmoothStreaming(): boolean;
-	requestRender(): void;
+	/** Called after each reveal tick with the component whose subtree changed;
+	 *  callers scope the render to that subtree instead of forcing a full-tree
+	 *  walk at 30fps (issue #4377). */
+	requestRender(component: Component): void;
 };
 
 type StreamingJsonStringExtractorResult = {
@@ -438,7 +442,7 @@ export function decodeStreamedToolArgs(partialJson: string, source: StreamedTool
  */
 export class ToolArgsRevealController {
 	readonly #getSmoothStreaming: () => boolean;
-	readonly #requestRender: () => void;
+	readonly #requestRender: (component: Component) => void;
 	readonly #entries = new Map<string, RevealEntry>();
 	#timer: NodeJS.Timeout | undefined;
 
@@ -560,7 +564,10 @@ export class ToolArgsRevealController {
 
 	#tick(): void {
 		let advanced = false;
-		let rendered = false;
+		// Collect components with changed display args; render each subtree once
+		// per tick even when multiple entries share a component (they don't
+		// today, but the API contract doesn't prevent it).
+		const rendered = new Set<ToolArgsRevealComponent>();
 		for (const [id, entry] of this.#entries) {
 			const backlog = entry.target.length - entry.revealed;
 			if (backlog <= 0 || !entry.component) continue;
@@ -568,12 +575,12 @@ export class ToolArgsRevealController {
 			const display = displayArgsForPrefix(entry, entry.target.slice(0, entry.revealed));
 			if (display.changed) {
 				entry.component.updateArgs(display.args, id);
-				rendered = true;
+				rendered.add(entry.component);
 			}
 			advanced = true;
 		}
 		if (advanced) {
-			if (rendered) this.#requestRender();
+			for (const component of rendered) this.#requestRender(component);
 		} else {
 			// Every entry caught up (or unbound); setTarget restarts on growth.
 			this.#stopTimer();