@oh-my-pi/pi-tui 18.4.3 → 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,6 +38,13 @@ 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 StablePartKind = "thinking" | "text";
@@ -251,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
@@ -323,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;
@@ -469,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
@@ -502,6 +541,7 @@ export class AssistantMessageComponent extends Container {
 
 	setHideThinkingBlock(hide: boolean): void {
 		this.#hideThinkingBlock = hide;
+		this.#thinkingCollapsed.clear();
 	}
 
 	/**
@@ -534,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 {
@@ -571,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();
 	}
 
@@ -592,7 +649,7 @@ export class AssistantMessageComponent extends Container {
 
 	#advanceThinkingDots(): void {
 		this.#thinkingDotsTimer = undefined;
-		if (!this.#thinkingDots) {
+		if (!this.#thinkingDots || isNativeRendering()) {
 			this.#stopThinkingAnimation();
 			return;
 		}
@@ -649,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;
@@ -1066,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(
@@ -1079,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.
@@ -1198,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
@@ -1211,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;
@@ -1240,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;

package/src/chat/background-tan-message.ts

@@ -25,10 +25,10 @@ export function createBackgroundTanDispatchBlock(message: CustomMessage<unknown>
 	return new TranscriptStatusBlock([
 		{
 			parts: [
-				theme.fg("muted", `${theme.icon.output} Tangent dispatched`),
-				theme.fg("dim", "[task]"),
-				theme.fg("accent", jobId),
-				work ? theme.fg("dim", `${theme.format.dash} ${work}`) : undefined,
+				{ text: `${theme.icon.output} Tangent dispatched`, color: "muted" },
+				{ text: "[task]", color: "dim" },
+				{ text: jobId, color: "accent" },
+				work ? { text: `${theme.format.dash} ${work}`, color: "dim" } : undefined,
 			],
 		},
 	]);

package/src/chat/bash-execution.ts

@@ -21,10 +21,17 @@ import {
 	buildExecutionFrame,
 	buildStatusFooter,
 	clampDisplayLine,
+	describeExecutionCard,
+	describeExecutionTool,
+	type ExecutionColorKey,
 	type ExecutionStatus,
 	PREVIEW_LINES,
 	resolveExecutionStatus,
 } from "./execution-shared";
+import { span, text } from "../native/describe";
+import { type DescribeContext, type NativeNode, type NativeUiEvent, rootToggleExpanded } from "../native/node";
+import { NativeImageCache } from "../native/blobs";
+import { Memo } from "../native/memo";
 
 const STREAMING_LINE_CAP = PREVIEW_LINES * 5;
 // Minimum interval between processing incoming chunks for display (ms).
@@ -78,6 +85,13 @@ export class BashExecutionComponent extends Container {
 	#showImages = true;
 	readonly #instanceId = nextBashExecutionId++;
 	readonly #command: string;
+	readonly #colorKey: ExecutionColorKey;
+	readonly #startedAt = performance.now();
+	#endedAt: number | undefined;
+	// Bumped whenever the displayed output lines change.
+	#outputVersion = 0;
+	readonly #native = new Memo();
+	readonly #nativeImages = new NativeImageCache();
 
 	constructor(command: string, ui: TUI, excludeFromContext = false) {
 		super();
@@ -86,6 +100,7 @@ export class BashExecutionComponent extends Container {
 
 		// Use dim border for excluded-from-context commands (!! prefix)
 		const colorKey = excludeFromContext ? "dim" : "bashMode";
+		this.#colorKey = colorKey;
 		const { contentContainer, loader } = buildExecutionFrame(this, ui, colorKey);
 		this.#contentContainer = contentContainer;
 		this.#loader = loader;
@@ -136,6 +151,68 @@ export class BashExecutionComponent extends Container {
 		this.#updateDisplay();
 	}
 
+	handleNativeEvent(event: NativeUiEvent): void {
+		const expanded = rootToggleExpanded(event);
+		if (expanded !== undefined) this.setExpanded(expanded);
+	}
+
+	/**
+	 * The agent's bash `tool` frame (role `omp.bash`) with a `you` badge: the
+	 * command in the head, the output as an `ansi` mini terminal following its
+	 * tail. Terminals without the `tool` kind get a `card` headed by the
+	 * command.
+	 */
+	override describe(cx?: DescribeContext): NativeNode {
+		const dataFirst = cx?.supports("tool") === true;
+		const key = [
+			dataFirst,
+			this.#outputVersion,
+			this.#blockVersion,
+			this.#status,
+			this.#expanded,
+			this.#showImages,
+			this.#images.length,
+		];
+		return this.#native.get(key, () => {
+			const images = this.#images.map((image, index) =>
+				this.#showImages
+					? this.#nativeImages.get(`img${index}`, image.data, image.mimeType)
+					: text([
+							span(
+								imageFallback(image.mimeType, getImageDimensions(image.data, image.mimeType) ?? undefined),
+								"muted",
+							),
+						]),
+			);
+			const common = {
+				role: "omp.bash",
+				status: this.#status,
+				startedAt: this.#startedAt,
+				expanded: this.#expanded,
+				output: this.#outputLines.join("\n"),
+				images,
+				exitCode: this.#exitCode,
+				truncation: this.#truncation,
+				artifactError: this.#artifactError,
+			};
+			return dataFirst
+				? describeExecutionTool({
+						...common,
+						name: "bash",
+						title: "Bash",
+						command: this.#command,
+						lang: "bash",
+						excluded: this.#colorKey === "dim",
+						endedAt: this.#endedAt,
+					})
+				: describeExecutionCard({
+						...common,
+						head: [span(`$ ${this.#command}`, `${this.#colorKey} strong`)],
+						muted: this.#colorKey === "dim",
+					});
+		});
+	}
+
 	appendOutput(chunk: string): void {
 		if (this.#ptyMode) return;
 		// During high-throughput output (e.g. seq 1 500M), processing every
@@ -165,6 +242,7 @@ export class BashExecutionComponent extends Container {
 		}
 
 		this.#displayDirty = true;
+		this.#outputVersion++;
 	}
 
 	/** Switch to PTY rendering and feed raw terminal bytes through the vterm replay. */
@@ -240,6 +318,7 @@ export class BashExecutionComponent extends Container {
 		const base = theme.getFgAnsi("muted");
 		this.#outputLines = rows.map(row => (row ? styleTerminalRow(row, base) : ""));
 		this.#displayDirty = true;
+		this.#outputVersion++;
 	}
 
 	/** Final full-scrollback read; the terminal is disposed once lines are snapshotted. */
@@ -268,6 +347,7 @@ export class BashExecutionComponent extends Container {
 	): void {
 		this.#exitCode = exitCode;
 		this.#status = resolveExecutionStatus(exitCode, cancelled);
+		this.#endedAt ??= performance.now();
 		this.#truncation = options?.truncation;
 		this.#artifactError = options?.artifactError;
 		this.#images = options?.images ?? [];
@@ -376,6 +456,7 @@ export class BashExecutionComponent extends Container {
 	#setOutput(output: string): void {
 		const clean = sanitizeWithOptionalSixelPassthrough(output, sanitizeText);
 		this.#outputLines = clean ? this.#clampLinesPreservingSixel(clean.split("\n")) : [];
+		this.#outputVersion++;
 	}
 
 	/**

package/src/chat/cache-invalidation-marker.ts

@@ -87,6 +87,14 @@ export class CacheInvalidationMarkerComponent extends MessageDividerComponent {
 			labelColor: "muted",
 			ruleColor: "dim",
 			ruleWidth: 10,
+			role: "omp.marker.cache-miss",
+			native: {
+				icon: "database",
+				label: () =>
+					info.reprocessedTokens > 0
+						? `Cache miss · ${formatNumber(info.reprocessedTokens)} tokens`
+						: "Cache miss",
+			},
 			// Too narrow to frame — preserve the legacy bare label.
 			truncateWhenNarrow: false,
 		});