@oh-my-pi/pi-tui 18.4.2 → 18.4.4

package/src/chat/assistant-message.ts

@@ -5,11 +5,17 @@ import { ImageProtocol, TERMINAL } from "../terminal-capabilities";
 import { Markdown, type MarkdownTheme } from "../components/markdown";
 import { Spacer } from "../components/spacer";
 import { Text } from "../components/text";
-import { formatNumber } from "@oh-my-pi/pi-utils";
+import { formatDuration, formatNumber } from "@oh-my-pi/pi-utils";
 import chalk from "@oh-my-pi/pi-utils/chalk";
 import { LRUCache } from "@oh-my-pi/pi-utils/lru";
 import type { AssistantThinkingRenderer } from "./extension-types";
-import { ensureThemeSync, getMarkdownTheme, theme } from "../theme";
+import { ensureThemeSync, getMarkdownTheme, getThemeEpoch, theme } from "../theme";
+import { card, col, elapsed, node, span, text } from "../native/describe";
+import { hasTranscriptActions, runTranscriptAction } from "./transcript-actions";
+import type { NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { isNativeRendering } from "../native/state";
+import { NativeImageCache } from "../native/blobs";
+import { Memo } from "../native/memo";
 import { EMPTY_LINK_TARGETS, resolveImageOptions } from "../render/render-utils";
 import { WidthAwareText } from "../render";
 import { cachedPngConversion, convertImageToPngShared, imagePayloadKey } from "./image-loading";
@@ -20,6 +26,7 @@ import { formatErrorBlock } from "../chrome/error-block";
 import { type ServedModelMismatch, ServedModelMarkerComponent } from "./served-model-marker";
 import { isReactionTarget, type ReactionSplit, type ReactionTarget, splitReaction } from "./reaction";
 import { isRowPrefix, type TranscriptStableRow, trimBlankEdges } from "../chrome/transcript-container";
+import { formatTurnUsage, type TurnUsageSummary } from "../overlays/usage-row";
 
 /**
  * Max wrapped rows of a turn-ending provider error rendered inline in the
@@ -31,9 +38,17 @@ import { isRowPrefix, type TranscriptStableRow, trimBlankEdges } from "../chrome
 const MAX_TRANSCRIPT_ERROR_ROWS = 8;
 const EMPTY_STABLE_RENDER: readonly string[] = [];
 
+/** The native head of a finished thinking block: "Thought for 12s", or "Thought" when it was never seen streaming. */
+function thoughtLabel(clock: { start: number; end?: number } | undefined): string {
+	if (clock?.end === undefined) return "Thought";
+	const ms = clock.end - clock.start;
+	return `Thought for ${ms < 60_000 ? `${Math.max(1, Math.round(ms / 1000))}s` : formatDuration(ms)}`;
+}
+
 type ThinkingContentBlock = Extract<AssistantMessage["content"][number], { type: "thinking" }>;
 type DisplayThinkingContentBlock = ThinkingContentBlock & { rawThinking?: string };
-type StablePart = { kind: "thinking" | "text"; text: string } | { kind: "spacer" };
+type StablePartKind = "thinking" | "text";
+type StablePart = { kind: StablePartKind; text: string } | { kind: "spacer" };
 
 /**
  * One published prefix of the block's finished content. Later snapshots extend
@@ -47,6 +62,37 @@ interface StableSnapshot {
 	readonly lastTextLength: number;
 }
 
+/**
+ * Stable-row renders at one width. `rows` renders snapshot `newest`; every
+ * count in `ends` renders byte-identically to `rows.slice(0, end)` — checked
+ * against `rows` when recorded — so an earlier prefix is a slice of the newest
+ * render instead of a re-render, and one row array stays resident per width.
+ */
+interface StableRowLedger {
+	newest: number;
+	rows: readonly string[];
+	readonly ends: Map<number, number>;
+	/** Rendered rows of parts a snapshot has closed (full text final), by part index. */
+	readonly parts: (
+		| { readonly kind: StablePartKind; readonly text: string; readonly rows: readonly string[] }
+		| undefined
+	)[];
+}
+
+/** One Markdown instance reused while a stable part's text grows between renders. */
+interface StablePartRenderer {
+	readonly index: number;
+	readonly kind: StablePartKind;
+	readonly md: Markdown;
+}
+
+/** Theme inputs cached stable renders were produced with; any change drops them. */
+interface StableRenderInputs {
+	readonly prose: MarkdownTheme;
+	readonly markdown: MarkdownTheme;
+	readonly color: ((text: string) => string) | undefined;
+}
+
 function isSnapshotExtension(previous: readonly StablePart[], current: readonly StablePart[]): boolean {
 	if (previous.length > current.length) return false;
 	for (let index = 0; index < previous.length; index++) {
@@ -219,6 +265,12 @@ export class AssistantMessageComponent extends Container {
 	 * provider error whose tail would otherwise be unreachable in the live TUI.
 	 */
 	#errorExpanded = false;
+	/** The deduplicated message the native error frame shows (its "Copy error" copies it). */
+	#errorText: string | undefined;
+	/** A TTSR rule aborted this text; the turn re-streams below it. */
+	#rewound = false;
+	/** The turn's totals when this answer ends it; a TSP terminal shows them under the answer. */
+	#turnUsage: TurnUsageSummary | undefined;
 	/**
 	 * True when the current {@link updateContent} message carries a truncatable
 	 * inline provider error (the `#appendErrorBlock` path) — set whether or not
@@ -260,13 +312,20 @@ export class AssistantMessageComponent extends Container {
 	#nextStableRowId = 0;
 	#transcriptStableRows: TranscriptStableRow[] = [];
 	/**
-	 * Rendered rows per published snapshot index and width. The container asks
-	 * for several different counts in one frame (emitted, offered end,
-	 * projected, pressure-loop +1s); a 2-entry LRU thrashes across those and
-	 * re-renders the whole prefix per miss. Sized generously so the live prefix
-	 * stays cached; cleared on reset/finalize like before.
+	 * Verified stable-row renders per width ({@link StableRowLedger}). The
+	 * container asks for several counts per frame (emitted, offered end,
+	 * projected) and each publication re-checks the previous prefix; the ledger
+	 * answers all of them from the newest render. A few widths cover resizes.
+	 * Cleared on reset, finalize, and theme change.
 	 */
-	#stableRenderCache = new LRUCache<string, readonly string[]>({ max: 64 });
+	#stableLedgers = new LRUCache<number, StableRowLedger>({ max: 4 });
+	/** Prefixes handed out as ledger slices or rendered off-ledger, by `${count}:${width}`. */
+	#stableRenderCache = new LRUCache<string, readonly string[]>({ max: 8 });
+	/** Reused for the growing final part of each publication candidate. */
+	#stableHeadRenderer: StablePartRenderer | undefined;
+	/** Reused for final parts of published snapshots rendered off-ledger (reflow, replay). */
+	#stableReplayRenderer: StablePartRenderer | undefined;
+	#stableRenderInputs: StableRenderInputs | undefined;
 	/** Provider-reported tokens in the live thinking block — reasoning tokens when
 	 *  the provider streams them, else total output — shown dimmed beside the
 	 *  speed badge. 0 when no thinking is streaming. */
@@ -284,6 +343,19 @@ export class AssistantMessageComponent extends Container {
 	#reactionTarget: ReactionTarget | undefined;
 	/** Reaction lifted from the reply's opening emoji, once resolved. */
 	#reaction: string | undefined;
+	/** Display form of {@link #lastMessage} (reaction handled) the native description is built from. */
+	#displayedMessage: AssistantMessage | undefined;
+	/** Thinking-extension components per content index, recorded when the slow path mounts them. */
+	#thinkingExtensions = new Map<number, Component[]>();
+	/** Collapse state of thinking sections toggled in the terminal, by content index; cleared by {@link setHideThinkingBlock}. */
+	#thinkingCollapsed = new Map<number, boolean>();
+	/** When each thinking block was seen streaming and when it stopped (native "Thought for 12s"), by content index. */
+	#thinkingClock = new Map<number, { start: number; end?: number; tokens: number }>();
+	#nativeViewVersion = 0;
+	readonly #native = new Memo();
+	/** Markdown nodes by key, reused while their text and streaming flag are unchanged. */
+	#nativeParts = new Map<string, { text: string; stream: boolean; node: NativeNode }>();
+	readonly #nativeImages = new NativeImageCache();
 
 	setTextColorTransform(transform?: (text: string) => string): void {
 		this.#textColorTransform = transform;
@@ -430,6 +502,12 @@ export class AssistantMessageComponent extends Container {
 		this.#refreshMarkers();
 	}
 
+	/** Mark this answer as the end of a turn with the turn's totals (native only: ANSI keeps them in the status line). */
+	setTurnUsage(summary: TurnUsageSummary | undefined): void {
+		this.#turnUsage = summary;
+		this.#nativeViewVersion++;
+	}
+
 	/**
 	 * Show or clear the trailing served-model divider. Set once the turn's
 	 * signed thinking block (or router report) has named the model that actually
@@ -463,6 +541,7 @@ export class AssistantMessageComponent extends Container {
 
 	setHideThinkingBlock(hide: boolean): void {
 		this.#hideThinkingBlock = hide;
+		this.#thinkingCollapsed.clear();
 	}
 
 	/**
@@ -495,14 +574,30 @@ export class AssistantMessageComponent extends Container {
 	 * Once text starts, a tool call streams, or the block is sealed, the pulse ends.
 	 */
 	#shouldAnimateThinking(message: AssistantMessage): boolean {
-		if (!this.#hideThinkingBlock || this.#transcriptBlockFinalized) return false;
+		return this.#hideThinkingBlock && this.#thinkingTailIndex(message) !== undefined;
+	}
+
+	/**
+	 * Content index of the thinking block the model is producing right now:
+	 * the block is still streaming (not finalized), no tool call has started,
+	 * and the tail visible block is thinking. Undefined otherwise.
+	 */
+	#thinkingTailIndex(message: AssistantMessage): number | undefined {
+		if (this.#transcriptBlockFinalized) return undefined;
 		let tail: "text" | "thinking" | undefined;
-		for (const content of message.content) {
-			if (content.type === "toolCall") return false;
-			if (content.type === "text" && canonicalizeMessage(content.text)) tail = "text";
-			else if (content.type === "thinking" && canonicalizeMessage(content.thinking)) tail = "thinking";
+		let tailIndex = -1;
+		for (let index = 0; index < message.content.length; index++) {
+			const content = message.content[index]!;
+			if (content.type === "toolCall") return undefined;
+			if (content.type === "text" && canonicalizeMessage(content.text)) {
+				tail = "text";
+				tailIndex = index;
+			} else if (content.type === "thinking" && canonicalizeMessage(content.thinking)) {
+				tail = "thinking";
+				tailIndex = index;
+			}
 		}
-		return tail === "thinking";
+		return tail === "thinking" ? tailIndex : undefined;
 	}
 
 	#thinkingDotsLabel(): string {
@@ -532,7 +627,8 @@ export class AssistantMessageComponent extends Container {
 	}
 
 	#startThinkingAnimation(): void {
-		if (this.#thinkingDotsTimer) return;
+		// A native terminal clocks the described starburst itself.
+		if (this.#thinkingDotsTimer || isNativeRendering()) return;
 		this.#scheduleThinkingFrame();
 	}
 
@@ -553,7 +649,7 @@ export class AssistantMessageComponent extends Container {
 
 	#advanceThinkingDots(): void {
 		this.#thinkingDotsTimer = undefined;
-		if (!this.#thinkingDots) {
+		if (!this.#thinkingDots || isNativeRendering()) {
 			this.#stopThinkingAnimation();
 			return;
 		}
@@ -610,6 +706,276 @@ export class AssistantMessageComponent extends Container {
 		return rows;
 	}
 
+	/**
+	 * A `col` (role `omp.assistant`) of `md` nodes keyed by content index, so
+	 * streamed deltas reach the terminal as `text append` on the same node;
+	 * the tail block carries `stream: true` until the message finalizes.
+	 * Thinking blocks are quiet collapsible `section`s (collapsed per
+	 * `hideThinkingBlock`): a muted "Thinking…" shimmer while live, then
+	 * "Thought for 12s"; tokens and rate ride in the head's `title`.
+	 */
+	override describe(): NativeNode {
+		const tail = this.#displayedMessage ? this.#thinkingTailIndex(this.#displayedMessage) : undefined;
+		const rate =
+			tail !== undefined && this.#lastUpdateTransient && this.#thinkingRateLive
+				? Math.round(Math.min(SPEED_MAX, sharedSpeedTracker.getSpeed()) * 10) / 10
+				: 0;
+		const key = [
+			this.#blockVersion,
+			this.#transcriptBlockFinalized,
+			this.#hideThinkingBlock,
+			this.#showImages,
+			this.#showToolResultImages,
+			this.#errorExpanded,
+			this.#nativeViewVersion,
+			rate,
+			getThemeEpoch(),
+		];
+		return this.#native.get(key, () => this.#describeMessage(tail, rate));
+	}
+
+	/**
+	 * A TTSR rule rewound this partial answer: a native terminal dims it and
+	 * tags it `↺ rewound` (the ANSI render leaves it as it stopped).
+	 */
+	markRewound(): void {
+		if (this.#rewound) return;
+		this.#rewound = true;
+		this.#nativeViewVersion++;
+	}
+
+	/** Mirrors a thinking section collapsed or expanded in the terminal. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type === "action") {
+			this.#handleErrorAction(event.act);
+			return;
+		}
+		if (event.type !== "toggle" || !event.key.startsWith("k")) return;
+		const index = Number(event.key.slice(1));
+		if (!Number.isInteger(index)) return;
+		this.#thinkingCollapsed.set(index, event.collapsed);
+		this.#nativeViewVersion++;
+	}
+
+	#describeMessage(thinkingTail: number | undefined, rate: number): NativeNode {
+		const message = this.#displayedMessage;
+		const previousParts = this.#nativeParts;
+		const parts = new Map<string, { text: string; stream: boolean; node: NativeNode }>();
+		// `slot` identifies the node across rebuilds; `key` is its sibling key inside its parent.
+		const markdown = (slot: string, key: string, source: string, stream: boolean): NativeNode => {
+			const cached = previousParts.get(slot);
+			const entry =
+				cached?.text === source && cached.stream === stream
+					? cached
+					: {
+							text: source,
+							stream,
+							node: node("md", stream ? { text: source, stream: true } : { text: source }, undefined, key),
+						};
+			parts.set(slot, entry);
+			return entry.node;
+		};
+		const children: NativeChild[] = [];
+		if (message) {
+			const live = !this.#transcriptBlockFinalized && this.#lastUpdateTransient;
+			let tailIndex = -1;
+			for (let index = 0; index < message.content.length; index++) {
+				const content = message.content[index]!;
+				if (
+					(content.type === "text" && canonicalizeMessage(content.text)) ||
+					(content.type === "thinking" && canonicalizeMessage(content.thinking))
+				) {
+					tailIndex = index;
+				}
+			}
+			for (let index = 0; index < message.content.length; index++) {
+				const content = message.content[index]!;
+				const streaming = live && index === tailIndex;
+				if (content.type === "text" && canonicalizeMessage(content.text)) {
+					children.push(markdown(`t${index}`, `t${index}`, content.text.trim(), streaming));
+				} else if (content.type === "thinking") {
+					const display = resolveThinkingDisplay(content, this.#proseOnlyThinking);
+					if (!display.visible) continue;
+					const thinkingLive = streaming && thinkingTail === index;
+					const clock = this.#thinkingClock.get(index);
+					if (thinkingLive) {
+						if (clock) clock.tokens = this.#thinkingTokens || clock.tokens;
+						else this.#thinkingClock.set(index, { start: performance.now(), tokens: this.#thinkingTokens });
+					} else if (clock && clock.end === undefined) {
+						clock.end = performance.now();
+					}
+					const tokens = thinkingLive ? this.#thinkingTokens : (clock?.tokens ?? 0);
+					const title = tokens > 0 ? `${formatNumber(tokens)} tokens` : undefined;
+					// Live: starburst · "Thinking…" · ticking timer · tok/s. Done: "Thought for 12s".
+					const head = thinkingLive
+						? node(
+								"row",
+								{ gap: "sm", title },
+								[
+									node("spinner", { style: "starburst", role: "omp.thinking.spin" }),
+									text([span("Thinking…", "muted")]),
+									elapsed(performance.now() - (this.#thinkingClock.get(index)?.start ?? performance.now())),
+									...(rate >= 0.05 ? [node("rate", { value: rate, unit: "tok/s" })] : []),
+								],
+								"head",
+							)
+						: node("text", { spans: [span(thoughtLabel(clock), "muted")], title }, undefined, "head");
+					const body = markdown(`k${index}`, "body", display.text, streaming);
+					children.push(
+						node(
+							"section",
+							{
+								// `.live` while streaming: the body clamps to its tail under a fade.
+								// `.ghost` while thinking is hidden (Ctrl+T): only a faint "Thought for 12s" stays.
+								role: thinkingLive
+									? "omp.thinking.live"
+									: this.#hideThinkingBlock
+										? "omp.thinking.ghost"
+										: "omp.thinking",
+								collapsible: true,
+								// Open while it streams; a finished thought folds to its "Thought for 12s" line.
+								collapsed: this.#thinkingCollapsed.get(index) ?? (this.#hideThinkingBlock || !thinkingLive),
+								// Tern's fold head sums it into "Worked for 12s".
+								took: clock?.end === undefined ? undefined : Math.max(0, Math.round(clock.end - clock.start)),
+							},
+							[head, body],
+							`k${index}`,
+						),
+					);
+					if (!this.#hideThinkingBlock) children.push(...(this.#thinkingExtensions.get(index) ?? []));
+				} else if (content.type === "image" && content.data && content.mimeType && this.#showImages) {
+					children.push(this.#nativeImages.get(`i${index}`, content.data, content.mimeType));
+				}
+			}
+			if (this.#showImages && this.#showToolResultImages) {
+				for (const [toolCallId, images] of this.#toolImagesByCallId) {
+					images.forEach((image, index) => {
+						children.push(this.#nativeImages.get(`r${toolCallId}:${index}`, image.data, image.mimeType));
+					});
+				}
+			}
+			const errorNode = this.#describeError(message);
+			if (errorNode) children.push(errorNode);
+		}
+		this.#nativeParts = parts;
+		children.push(...this.#markerSlot.children);
+		if (this.#rewound) {
+			children.push(
+				node(
+					"badge",
+					{ text: "↺ rewound", tone: "muted", role: "omp.assistant.rewound-tag" },
+					undefined,
+					"rewound",
+				),
+			);
+		}
+		if (this.#turnUsage) {
+			const usage = formatTurnUsage(this.#turnUsage);
+			children.push(
+				node(
+					"row",
+					{ role: "omp.turn.usage", gap: "xs", align: "center", title: usage.title },
+					[
+						node("icon", { name: "time" }, undefined, "icon"),
+						node("text", { text: usage.text }, undefined, "text"),
+					],
+					"turn-usage",
+				),
+			);
+		}
+		return col(children, { role: this.#rewound ? "omp.assistant.rewound" : "omp.assistant" });
+	}
+
+	/**
+	 * Turn-ending error, recovered-retry note or abort label. A failed request
+	 * is one error frame (head: "Request failed" + the HTTP status chip; body:
+	 * the message once; then Retry / Copy error / Switch model), and stays in
+	 * the transcript: the pinned banner is ANSI-only. A recovered attempt is an
+	 * inline row that discloses the original error.
+	 */
+	#describeError(message: AssistantMessage): NativeNode | undefined {
+		const presentation = resolveAssistantErrorPresentation(message);
+		if (presentation.kind === "compact-recovered") {
+			const attempt = message.retryRecovery?.attempt ?? 1;
+			const body = [message.errorMessage?.trim(), presentation.text].filter(
+				(line, index, all): line is string => !!line && all.indexOf(line) === index,
+			);
+			return node(
+				"section",
+				{
+					role: "omp.assistant.recovered",
+					head: [span(`↻ Recovered after ${attempt} ${attempt === 1 ? "retry" : "retries"}`, "muted")],
+					collapsible: true,
+					collapsed: true,
+				},
+				[text([span(body.join("\n"), "mono")], { wrap: "word" })],
+				"error",
+			);
+		}
+		if (presentation.kind !== "full" || message.content.some(content => content.type === "toolCall"))
+			return undefined;
+		if (message.stopReason === "aborted") {
+			return text([span(presentation.text, "error")], { wrap: "word", key: "error", role: "omp.assistant.abort" });
+		}
+		const lines = presentation.text
+			.split("\n")
+			.map(line => line.trim())
+			.filter(line => line.length > 0);
+		// "500 upstream overloaded" → chip "500", then the message once: a
+		// line the next one repeats with more detail is dropped.
+		const code = /^(\d{3})\s+/.exec(lines[0] ?? "");
+		if (code) lines[0] = lines[0]!.slice(code[0].length);
+		const detail = lines.filter((line, index) => !lines.slice(index + 1).some(next => next.startsWith(line)));
+		const errorText = detail.join("\n") || "Unknown error";
+		const children: NativeChild[] = [
+			node(
+				"row",
+				{ gap: "sm" },
+				[
+					text([span("Request failed", "error strong")]),
+					...(code ? [node("badge", { text: code[1]!, tone: "error", role: "omp.error.code" })] : []),
+				],
+				"head",
+			),
+			text([span(errorText, "mono")], {
+				wrap: "word",
+				lines: this.#errorExpanded ? undefined : MAX_TRANSCRIPT_ERROR_ROWS,
+				role: "omp.error.message",
+				key: "message",
+			}),
+		];
+		if (message.stopReason === "error" && hasTranscriptActions()) {
+			const button = (act: string, label: string, keys: readonly string[], title: string): NativeNode =>
+				node(
+					"row",
+					{ gap: "xs", role: "omp.error.action", actions: { click: act }, title },
+					keys.length > 0 ? [text(label), node("kbd", { keys })] : [text(label)],
+					act,
+				);
+			children.push(
+				node(
+					"row",
+					{ gap: "sm", role: "omp.error.actions" },
+					[
+						button("retry", "Retry", ["F5"], "Retry the failed turn"),
+						button("copy-error", "Copy error", [], "Copy the error message"),
+						button("switch-model", "Switch model", ["⌥P"], "Pick another model for this session"),
+					],
+					"actions",
+				),
+			);
+		}
+		this.#errorText = errorText;
+		return card({ role: "omp.error", tone: "error", key: "error" }, children);
+	}
+
+	/** Error frame action clicks: omp's own retry, clipboard and model-picker paths. */
+	#handleErrorAction(act: string): void {
+		if (act === "retry") runTranscriptAction({ act: "retry" });
+		else if (act === "switch-model") runTranscriptAction({ act: "switch-model" });
+		else if (act === "copy-error" && this.#errorText) runTranscriptAction({ act: "copy", text: this.#errorText });
+	}
+
 	/** Width-independent stable identities for the streamed leading thinking run. */
 	getTranscriptStableRows(): readonly TranscriptStableRow[] {
 		return this.#transcriptStableRows;
@@ -626,22 +992,33 @@ export class AssistantMessageComponent extends Container {
 		this.#stableSnapshots = [];
 		this.#stableParts = [];
 		this.#transcriptStableRows = [];
-		this.#stableRenderCache.clear();
+		this.#dropStableRenders();
 	}
 
 	renderTranscriptStableRows(count: number, width: number): readonly string[] {
 		const index = Math.min(Math.trunc(count), this.#stableSnapshots.length);
 		if (index <= 0) return EMPTY_STABLE_RENDER;
+		this.#syncStableRenderInputs();
+		const ledger = this.#stableLedgers.get(width);
+		if (ledger?.newest === index) return ledger.rows;
 		const key = `${index}:${width}`;
 		const cached = this.#stableRenderCache.get(key);
 		if (cached) return cached;
-		const snapshot = this.#stableSnapshots[index - 1]!;
-		const parts = this.#stableParts.slice(0, snapshot.partCount);
-		const last = parts.at(-1);
-		if (last && last.kind !== "spacer") {
-			parts[parts.length - 1] = { kind: last.kind, text: last.text.slice(0, snapshot.lastTextLength) };
+		const end = ledger?.ends.get(index);
+		let rows: readonly string[];
+		if (ledger !== undefined && end !== undefined) {
+			rows = ledger.rows.slice(0, end);
+		} else {
+			const snapshot = this.#stableSnapshots[index - 1]!;
+			rows = this.#renderStableParts(
+				this.#stableParts,
+				snapshot.partCount,
+				snapshot.lastTextLength,
+				width,
+				"replay",
+			);
+			if (this.#recordStableRows(index, width, rows)) return rows;
 		}
-		const rows = this.#renderStableSnapshot(parts, width);
 		this.#stableRenderCache.set(key, rows);
 		return rows;
 	}
@@ -662,9 +1039,12 @@ export class AssistantMessageComponent extends Container {
 		if (!last || last.kind === "spacer") return;
 		const snapshot = { partCount: parts.length, lastTextLength: last.text.length };
 		const previous = this.#stableSnapshots.at(-1);
-		if (previous && !isSnapshotExtension(this.#stableParts, parts)) return;
+		// An unmoved boundary publishes nothing whether or not it still extends
+		// the last snapshot, so most frames skip the whole-document comparison.
 		if (previous?.partCount === snapshot.partCount && previous.lastTextLength === snapshot.lastTextLength) return;
-		const currentRows = this.#renderStableSnapshot(parts, width);
+		if (previous && !isSnapshotExtension(this.#stableParts, parts)) return;
+		this.#syncStableRenderInputs();
+		const currentRows = this.#renderStableParts(parts, parts.length, last.text.length, width, "head");
 		// The container verifies stable rows against the blank-trimmed render.
 		if (!isRowPrefix(currentRows, trimBlankEdges(rendered))) return;
 		const previousRows = previous
@@ -676,7 +1056,7 @@ export class AssistantMessageComponent extends Container {
 		this.#stableParts = parts;
 		this.#stableSnapshots.push(snapshot);
 		this.#transcriptStableRows.push({ key: `thinking:${this.#nextStableRowId++}` });
-		this.#stableRenderCache.set(`${this.#stableSnapshots.length}:${width}`, currentRows);
+		this.#recordStableRows(this.#stableSnapshots.length, width, currentRows);
 	}
 
 	/**
@@ -726,37 +1106,136 @@ export class AssistantMessageComponent extends Container {
 		return parts;
 	}
 
-	#renderStableSnapshot(parts: readonly StablePart[], width: number): readonly string[] {
+	/**
+	 * Render the first `partCount` stable parts, the final one cut to
+	 * `lastLength`. Rows match fresh Markdown renders of each part byte for
+	 * byte — {@link #createStableMarkdown} mirrors the live children — but a
+	 * closed part renders once per width, and the growing final part reuses one
+	 * Markdown instance so its already-frozen blocks are not re-lexed.
+	 */
+	#renderStableParts(
+		parts: readonly StablePart[],
+		partCount: number,
+		lastLength: number,
+		width: number,
+		role: "head" | "replay",
+	): readonly string[] {
+		const ledger = this.#stableLedger(width);
 		const rows: string[] = [];
-		for (const part of parts) {
+		const lastIndex = partCount - 1;
+		for (let index = 0; index < partCount; index++) {
+			const part = parts[index]!;
 			if (part.kind === "spacer") {
 				rows.push("");
 				continue;
 			}
-			// Constructor args mirror the live child Markdown exactly so these
-			// rows are byte-identical to the block render's prefix — including the
-			// trim the live children apply, which drops the trailing blank line a
-			// frozen prefix still carries.
-			const text = part.text.trim();
-			const markdown =
-				part.kind === "text"
-					? new Markdown(
-							text,
-							1,
-							0,
-							this.#getProseTheme(),
-							this.#textColorTransform ? { color: this.#textColorTransform } : undefined,
-							0,
-						)
-					: new Markdown(text, 1, 0, getMarkdownTheme(), {
-							color: (value: string) => theme.fg("thinkingText", value),
-							italic: true,
-						});
-			rows.push(...markdown.render(width));
+			const closed = index < lastIndex;
+			const text = closed || lastLength === part.text.length ? part.text : part.text.slice(0, lastLength);
+			const cached = ledger.parts[index];
+			let partRows: readonly string[];
+			if (cached?.kind === part.kind && cached.text === text) {
+				partRows = cached.rows;
+			} else {
+				partRows = this.#renderStablePart(index, part.kind, text, width, closed ? undefined : role);
+				if (closed) ledger.parts[index] = { kind: part.kind, text, rows: partRows };
+			}
+			for (const row of partRows) rows.push(row);
 		}
 		return rows;
 	}
 
+	/**
+	 * Render one part's Markdown. `role` names the instance reused for a final
+	 * part as its text grows; a closed part continues whichever instance was
+	 * already growing it, else renders once. Finalized blocks keep no instance.
+	 */
+	#renderStablePart(
+		index: number,
+		kind: StablePartKind,
+		text: string,
+		width: number,
+		role: "head" | "replay" | undefined,
+	): readonly string[] {
+		// Trim like the live children, dropping the trailing blank line a frozen
+		// prefix still carries.
+		const trimmed = text.trim();
+		if (this.#transcriptBlockFinalized) return this.#createStableMarkdown(kind, trimmed).render(width);
+		const head = this.#stableHeadRenderer;
+		const replay = this.#stableReplayRenderer;
+		const renderer = role === "head" ? head : role === "replay" ? replay : head?.index === index ? head : replay;
+		if (renderer?.index === index && renderer.kind === kind) {
+			renderer.md.setText(trimmed);
+			return renderer.md.render(width);
+		}
+		const md = this.#createStableMarkdown(kind, trimmed);
+		if (role === "head") this.#stableHeadRenderer = { index, kind, md };
+		else if (role === "replay") this.#stableReplayRenderer = { index, kind, md };
+		return md.render(width);
+	}
+
+	/** Constructor args mirror the live child Markdown so stable rows prefix the block render. */
+	#createStableMarkdown(kind: StablePartKind, text: string): Markdown {
+		return kind === "text"
+			? new Markdown(
+					text,
+					1,
+					0,
+					this.#getProseTheme(),
+					this.#textColorTransform ? { color: this.#textColorTransform } : undefined,
+					0,
+				)
+			: new Markdown(text, 1, 0, getMarkdownTheme(), {
+					color: (value: string) => theme.fg("thinkingText", value),
+					italic: true,
+				});
+	}
+
+	#stableLedger(width: number): StableRowLedger {
+		let ledger = this.#stableLedgers.get(width);
+		if (ledger === undefined) {
+			ledger = { newest: 0, rows: EMPTY_STABLE_RENDER, ends: new Map(), parts: [] };
+			this.#stableLedgers.set(width, ledger);
+		}
+		return ledger;
+	}
+
+	/**
+	 * Remember `rows` as snapshot `index`'s render at `width`. A newer snapshot
+	 * becomes the ledger's newest render — keeping earlier counts only when it
+	 * extends their rows; an older one that prefixes the newest keeps just its
+	 * row count. Returns whether `rows` is now the newest render.
+	 */
+	#recordStableRows(index: number, width: number, rows: readonly string[]): boolean {
+		const ledger = this.#stableLedger(width);
+		if (index > ledger.newest) {
+			if (!isRowPrefix(ledger.rows, rows)) ledger.ends.clear();
+			ledger.newest = index;
+			ledger.rows = rows;
+			ledger.ends.set(index, rows.length);
+			return true;
+		}
+		if (index < ledger.newest && isRowPrefix(rows, ledger.rows)) ledger.ends.set(index, rows.length);
+		return false;
+	}
+
+	/** Drop cached stable renders once the themes they were rendered with change. */
+	#syncStableRenderInputs(): void {
+		const prose = this.#getProseTheme();
+		const markdown = getMarkdownTheme();
+		const color = this.#textColorTransform;
+		const inputs = this.#stableRenderInputs;
+		if (inputs?.prose === prose && inputs.markdown === markdown && inputs.color === color) return;
+		this.#dropStableRenders();
+		this.#stableRenderInputs = { prose, markdown, color };
+	}
+
+	#dropStableRenders(): void {
+		this.#stableLedgers.clear();
+		this.#stableRenderCache.clear();
+		this.#stableHeadRenderer = undefined;
+		this.#stableReplayRenderer = undefined;
+	}
+
 	/** Render completed prose rather than an earlier thinking row under emergency viewport pressure. */
 	renderTranscriptBlockEmergencyRow(width: number): string | undefined {
 		if (!this.#transcriptBlockFinalized) return undefined;
@@ -769,7 +1248,7 @@ export class AssistantMessageComponent extends Container {
 
 	markTranscriptBlockFinalized(): void {
 		this.#transcriptBlockFinalized = true;
-		this.#stableRenderCache.clear();
+		this.#dropStableRenders();
 		this.#stopThinkingAnimation();
 		// If the live pulse was on screen when the block sealed, drop the fast path
 		// and rebuild so the placeholder is removed — finalized blocks never animate.
@@ -914,6 +1393,8 @@ export class AssistantMessageComponent extends Container {
 	}
 
 	#appendThinkingExtensions(contentIndex: number, thinkingIndex: number, text: string): void {
+		const mounted: Component[] = [];
+		this.#thinkingExtensions.set(contentIndex, mounted);
 		for (const renderer of this.#thinkingRenderers) {
 			try {
 				const component = renderer(
@@ -927,6 +1408,7 @@ export class AssistantMessageComponent extends Container {
 				);
 				if (component) {
 					this.#contentContainer.addChild(component);
+					mounted.push(component);
 				}
 			} catch {
 				// Ignore extension renderer failures and keep the original thinking block visible.
@@ -1046,6 +1528,7 @@ export class AssistantMessageComponent extends Container {
 		// Everything below renders the display form; #lastMessage keeps the
 		// verbatim message so re-renders re-derive the reaction deterministically.
 		message = this.#displayMessage(message, this.#lastUpdateTransient);
+		this.#displayedMessage = message;
 
 		// Streaming-speed gauge: only a live, in-flight render of the single
 		// animating hidden-thinking block feeds the shared session tracker. The
@@ -1059,7 +1542,10 @@ export class AssistantMessageComponent extends Container {
 		// the gauge and pollute the next block. Providers that report usage only at
 		// turn end leave the live count flat, so the rate stays 0 and the badge
 		// self-suppresses (see #thinkingDotsLabel).
-		const isThinkingNow = this.#lastUpdateTransient && this.#shouldAnimateThinking(message);
+		// Native terminals show the live rate on visible thinking too, not only the hidden pulse.
+		const isThinkingNow =
+			this.#lastUpdateTransient &&
+			(isNativeRendering() ? this.#thinkingTailIndex(message) !== undefined : this.#shouldAnimateThinking(message));
 		if (isThinkingNow) {
 			const currentTokens = message.usage.reasoningTokens ?? message.usage.output;
 			this.#thinkingTokens = currentTokens;
@@ -1088,6 +1574,7 @@ export class AssistantMessageComponent extends Container {
 
 		// Clear content container
 		this.#contentContainer.clear();
+		this.#thinkingExtensions.clear();
 		this.#emergencyText = undefined;
 		this.#thinkingDots = undefined;
 		this.#hasTruncatableError = false;