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

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

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

@@ -27,7 +27,12 @@ import {
 	SKILL_PROMPT_MESSAGE_TYPE,
 	type SkillPromptDetails,
 } from "./messages";
-import { textContent, type TranscriptEntryLike as TranscriptEntry, transcriptEntryMessage } from "./transcript-entry";
+import {
+	imageContent,
+	textContent,
+	type TranscriptEntryLike as TranscriptEntry,
+	transcriptEntryMessage,
+} from "./transcript-entry";
 import { theme } from "../theme";
 import {
 	assistantHasVisibleContent,
@@ -54,12 +59,16 @@ import {
 } from "./compaction-summary-message";
 import { CustomMessageComponent } from "./custom-message";
 import { EvalExecutionComponent } from "./eval-execution";
-import { type LateDiagnosticsFile, LateDiagnosticsMessageComponent } from "./late-diagnostics-message";
+import {
+	type LateDiagnosticsFile,
+	LateDiagnosticsMessageComponent,
+	routeLateDiagnostics,
+} from "./late-diagnostics-message";
 import { groupedReadUsageCallIds, ReadToolGroupComponent, readArgsCollapseIntoGroup } from "./read-tool-group";
 import { SkillMessageComponent } from "./skill-message";
 import { ToolExecutionComponent } from "./tool-execution";
 import { TranscriptContainer } from "../chrome/transcript-container";
-import { createUsageRowBlock, turnElapsedMs } from "../overlays/usage-row";
+import { createUsageRowBlock, TurnUsageTally, turnElapsedMs } from "../overlays/usage-row";
 import { CollapsedSyntheticMessageComponent, UserMessageComponent } from "./user-message";
 
 export interface ChatTranscriptBuilderDeps {
@@ -88,6 +97,7 @@ export class ChatTranscriptBuilder {
 	#pendingReadUsageCallIds: string[] | undefined;
 	#pendingUsageElapsedMs: number | undefined;
 	#turnStartedAt: number | undefined;
+	readonly #turnUsage = new TurnUsageTally();
 	#lastAssistantUsage: Usage | undefined;
 	#servedModelTracker = new ServedModelTracker();
 	#waitingPoll: ToolExecutionComponent | null = null;
@@ -124,7 +134,12 @@ export class ChatTranscriptBuilder {
 		if (this.#readArgs.size === 0 && this.#pendingTools.size === 0) this.#flushPendingUsage();
 	}
 
-	/** Toggle tool-output expansion across every expandable component. */
+	/**
+	 * Toggle tool-output expansion across every expandable component. Cards a
+	 * TSP terminal collapsed or expanded locally mirror that into their own
+	 * state, so this re-applies the transcript-wide state to every one of them
+	 * even when it equals the previous value.
+	 */
 	setExpanded(expanded: boolean): void {
 		this.#expanded = expanded;
 		for (const component of this.#expandables) component.setExpanded(expanded);
@@ -156,6 +171,7 @@ export class ChatTranscriptBuilder {
 		this.#pendingReadUsageCallIds = undefined;
 		this.#pendingUsageElapsedMs = undefined;
 		this.#turnStartedAt = undefined;
+		this.#turnUsage.reset();
 		this.#lastAssistantUsage = undefined;
 		this.#servedModelTracker = new ServedModelTracker();
 		this.#waitingPoll = null;
@@ -282,7 +298,9 @@ export class ChatTranscriptBuilder {
 				// agent-attributed `user` message (advisor tool-loop redirect) must not.
 				if (message.role === "user" && message.attribution !== "agent") {
 					this.#turnStartedAt = message.timestamp;
+					this.#turnUsage.reset();
 				} else if (message.role === "developer" && message.synthetic) {
+					this.#turnUsage.reset();
 					// A synthetic developer message initiates a fresh run (auto-
 					// continue, /goal, approved plan): replay must not inherit the
 					// preceding user prompt's timestamp, mirroring the live
@@ -313,6 +331,8 @@ export class ChatTranscriptBuilder {
 						this.container.addChild(
 							new UserMessageComponent(userText, {
 								liveSteered: message.role === "user" && message.liveSteered === true,
+								timestamp: message.timestamp,
+								images: imageContent(message.content),
 							}),
 						);
 					}
@@ -348,6 +368,7 @@ export class ChatTranscriptBuilder {
 				// message does.
 				if (message.role === "custom" && isUserTurnInitiator(message as CustomMessage)) {
 					this.#turnStartedAt = message.timestamp;
+					this.#turnUsage.reset();
 				}
 				this.#appendCustomMessage(message);
 				break;
@@ -398,6 +419,7 @@ export class ChatTranscriptBuilder {
 		this.#trackExpandable(assistantComponent);
 		assistantComponent.pickReactionTarget(this.container.children);
 		this.container.addChild(assistantComponent);
+		let lastAssistantComponent = assistantComponent;
 
 		if (displayPreferences.cacheMissMarker) {
 			const invalidation = detectCacheInvalidation(this.#lastAssistantUsage, message.usage);
@@ -433,6 +455,7 @@ export class ChatTranscriptBuilder {
 			component.setToolResultImagesVisible(!displayPreferences.hideToolActivity);
 			this.#trackExpandable(component);
 			this.container.addChild(component);
+			lastAssistantComponent = component;
 		};
 
 		for (const content of message.content) {
@@ -491,6 +514,8 @@ export class ChatTranscriptBuilder {
 			}
 			appendAssistantSegment(afterToolSegment);
 		}
+		const turnUsage = this.#turnUsage.add(message, this.#turnStartedAt);
+		if (turnUsage) lastAssistantComponent.setTurnUsage(turnUsage);
 
 		this.#pendingUsage =
 			displayPreferences.showTokenUsage && assistantUsageIsBilled(message.usage) ? message.usage : undefined;
@@ -544,7 +569,10 @@ export class ChatTranscriptBuilder {
 		}
 		if (message.customType === LSP_LATE_DIAGNOSTIC_MESSAGE_TYPE) {
 			const details = (message as CustomMessage<{ files?: LateDiagnosticsFile[] }>).details;
-			const component = new LateDiagnosticsMessageComponent(details?.files ?? []);
+			// Native: into the edit/write frames they belong to; the rest stand alone.
+			const files = routeLateDiagnostics(this.container.children, details?.files ?? []);
+			if (files.length === 0) return;
+			const component = new LateDiagnosticsMessageComponent(files);
 			this.#trackExpandable(component);
 			this.container.addChild(component);
 			return;
@@ -570,7 +598,10 @@ export class ChatTranscriptBuilder {
 		}
 		if (message.customType === "advisor") {
 			const details = (message as CustomMessage<AdvisorMessageDetails>).details;
-			this.container.addChild(createAdvisorMessageCard(details, () => this.#expanded, theme));
+			const card = createAdvisorMessageCard(details, () => this.#expanded, theme);
+			// Tracked so a transcript-wide toggle also clears a per-card native toggle.
+			this.#trackExpandable(card);
+			this.container.addChild(card);
 			return;
 		}
 		if (message.customType === LAUNCH_COMPLETION_MESSAGE_TYPE) {

package/src/chat/collab-prompt-message.ts

@@ -5,12 +5,16 @@ import { Text } from "../components/text";
 import type { CollabPromptDetails } from "./messages";
 import type { CustomMessage } from "./messages";
 import { getMarkdownTheme, theme } from "../theme";
+import { card, md, span } from "../native/describe";
+import type { NativeNode } from "../native/node";
 
 /**
  * Renders a collab guest prompt on every participant's transcript: a
  * user-message-styled bubble prefixed with the author's name.
  */
 export class CollabPromptMessageComponent extends Container {
+	readonly #native: NativeNode;
+
 	constructor(message: CustomMessage<CollabPromptDetails>) {
 		super();
 		const from = message.details?.from?.trim() || "guest";
@@ -24,11 +28,19 @@ export class CollabPromptMessageComponent extends Container {
 						.filter((content): content is TextContent => content.type === "text")
 						.map(content => content.text)
 						.join("");
-		const md = new Markdown(text, 1, 1, getMarkdownTheme(), {
+		const markdown = new Markdown(text, 1, 1, getMarkdownTheme(), {
 			bgColor: (value: string) => theme.bg("userMessageBg", value),
 			color: (value: string) => theme.fgOnBg("userMessageText", "userMessageBg", value),
 		});
-		md.setIgnoreTight(true);
-		this.addChild(md);
+		markdown.setIgnoreTight(true);
+		this.addChild(markdown);
+		this.#native = card({ role: "omp.user.collab", tone: "user", head: [span(`«${from}» ›`, "accent strong")] }, [
+			md(text),
+		]);
+	}
+
+	/** A user-toned card headed by the guest's name, with the prompt as markdown. */
+	override describe(): NativeNode {
+		return this.#native;
 	}
 }

package/src/chat/compaction-summary-message.ts

@@ -3,9 +3,13 @@ import { Disclosure } from "../components/disclosure";
 import { type Component } from "../tui";
 import { Markdown } from "../components/markdown";
 import { formatNumber } from "@oh-my-pi/pi-utils";
-import { getMarkdownTheme, theme } from "../theme";
+import { getMarkdownTheme, getThemeEpoch, theme } from "../theme";
 import { expandKeyHint } from "../render/render-utils";
 import type { BranchSummaryMessage, CompactionSummaryMessage, CustomMessage } from "./messages";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
+import { md, node, span, text } from "../native/describe";
+import { type NativeChild, type NativeNode, type NativeUiEvent, rootToggleExpanded } from "../native/node";
+import { Memo } from "../native/memo";
 
 /** Divider labels per compaction method; unknown/legacy methods fall back to "compacted". */
 const COMPACTION_METHOD_LABELS: Record<string, string> = {
@@ -24,7 +28,13 @@ function compactionAmount(message: CompactionSummaryMessage): string | undefined
 
 interface SummaryDividerOptions {
 	label: () => string;
+	/** Themed spans of the label for native terminals. */
+	nativeLabel: () => TspSpan[];
 	detailMarkdown: () => string;
+	/** Native body when it differs from the markdown detail. */
+	nativeDetail?: () => NativeChild[];
+	/** Semantic role of the native section. */
+	role: string;
 }
 
 /**
@@ -83,6 +93,8 @@ class SummaryMessageComponent implements Component {
 	#disclosure: Disclosure;
 	#ignoreTight: boolean | undefined;
 	#disposed = false;
+	#expanded = false;
+	readonly #native = new Memo();
 
 	readonly #options: SummaryDividerOptions;
 
@@ -92,9 +104,35 @@ class SummaryMessageComponent implements Component {
 	}
 
 	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
 		this.#disclosure.setExpanded(expanded);
 	}
 
+	/**
+	 * A collapsible `section` headed by the divider label, with the summary
+	 * markdown as its body; expanding is terminal-local and mirrored back
+	 * through {@link handleNativeEvent}.
+	 */
+	describe(): NativeNode {
+		return this.#native.get([this.#expanded, getThemeEpoch()], () =>
+			node(
+				"section",
+				{
+					role: this.#options.role,
+					head: this.#options.nativeLabel(),
+					collapsible: true,
+					collapsed: !this.#expanded,
+				},
+				this.#options.nativeDetail?.() ?? [md(this.#options.detailMarkdown())],
+			),
+		);
+	}
+
+	handleNativeEvent(event: NativeUiEvent): void {
+		const expanded = rootToggleExpanded(event);
+		if (expanded !== undefined) this.setExpanded(expanded);
+	}
+
 	setIgnoreTight(ignore: boolean): this {
 		if (this.#disposed || this.#ignoreTight === ignore) return this;
 		this.#ignoreTight = ignore;
@@ -160,11 +198,42 @@ export class CompactionSummaryMessageComponent extends SummaryMessageComponent {
 			// A dead-end warning stamped by the progress guard badges the bar;
 			// the full text lives in the ctrl+o detail block below.
 			label: () => compactionLabel(message),
+			nativeLabel: () => compactionNativeLabel(message),
+			nativeDetail: () => compactionNativeDetail(message),
 			detailMarkdown: () => compactionDetailMarkdown(message),
+			role: "omp.compaction",
 		});
 	}
 }
 
+/** The divider chip: `Soft-compacted · 19K → 6.9K tokens`, the arrow dimmed. */
+function compactionNativeLabel(message: CompactionSummaryMessage): TspSpan[] {
+	const name = (message.method && COMPACTION_METHOD_LABELS[message.method]) || "compacted";
+	const spans = [span(`${name[0]!.toUpperCase()}${name.slice(1)}`, "muted")];
+	if (message.tokensAfter !== undefined && message.tokensBefore > 0) {
+		spans.push(
+			span(` · ${formatNumber(message.tokensBefore)}`, "muted mono"),
+			span(" → ", "dim"),
+			span(`${formatNumber(message.tokensAfter)} tokens`, "muted mono"),
+		);
+	}
+	if (message.warning) spans.push(span(` ${theme.icon.warning}`, "warning"));
+	return spans;
+}
+
+/** The expanded divider: a caption, the warning if any, then the summary itself (the chip already has the amounts). */
+function compactionNativeDetail(message: CompactionSummaryMessage): NativeChild[] {
+	const frames = message.images?.length ?? 0;
+	const caption =
+		frames > 0
+			? `Summary · ${frames} snapcompact frame${frames === 1 ? "" : "s"} attached`
+			: "Summary of the earlier conversation";
+	const detail: NativeChild[] = [text([span(caption, "dim")], { role: "omp.compaction.caption", key: "caption" })];
+	if (message.warning) detail.push(text([span(message.warning, "warning")], { wrap: "word", key: "warning" }));
+	detail.push(md(message.summary, { key: "summary" }));
+	return detail;
+}
+
 function compactionLabel(message: CompactionSummaryMessage): string {
 	const name = (message.method && COMPACTION_METHOD_LABELS[message.method]) || "compacted";
 	let label = `${theme.icon.camera} ${name}`;
@@ -199,6 +268,8 @@ export class HandoffSummaryMessageComponent extends SummaryMessageComponent {
 	constructor(message: CustomMessage<unknown>) {
 		super({
 			label: () => `${theme.icon.context} handed-off`,
+			nativeLabel: () => [span("Handed off", "muted")],
+			role: "omp.handoff",
 			detailMarkdown: () => {
 				const document = extractHandoffDocument(getCustomMessageText(message));
 				return `**Handoff context**\n\n${document || "_No handoff content._"}`;
@@ -226,6 +297,8 @@ export class BranchSummaryMessageComponent extends SummaryMessageComponent {
 	constructor(message: BranchSummaryMessage) {
 		super({
 			label: () => `${theme.icon.branch} branch`,
+			nativeLabel: () => [span("Branch summarized", "muted")],
+			role: "omp.branch",
 			detailMarkdown: () => `**Branch summary**\n\n${message.summary}`,
 		});
 	}

package/src/chat/custom-message.ts

@@ -10,11 +10,13 @@ import { type CustomMessage, LIVE_DELEGATION_MESSAGE_TYPE } from "./messages";
 export class CustomMessageComponent extends FramedMessageComponent<CustomMessage<unknown>> {
 	constructor(message: CustomMessage<unknown>, customRenderer?: MessageRenderer) {
 		const isLiveDelegation = message.customType === LIVE_DELEGATION_MESSAGE_TYPE;
+		const isHook = String(message.role) === "hookMessage";
 		super({
 			message,
+			role: isHook ? "omp.hook" : isLiveDelegation ? "omp.custom.delegation" : "omp.custom",
 			// The transcript dispatch routes both `custom` and legacy `hookMessage` roles here:
 			// tag hooks with the hook glyph, other injected messages with a neutral package.
-			icon: () => (String(message.role) === "hookMessage" ? theme.icon.extensionHook : theme.icon.package),
+			icon: () => (isHook ? theme.icon.extensionHook : theme.icon.package),
 			hideHeader: isLiveDelegation,
 			borderColor: isLiveDelegation ? "borderAccent" : undefined,
 			customRenderer,

package/src/chat/eval-execution.ts

@@ -15,11 +15,16 @@ import {
 	buildExecutionFrame,
 	buildStatusFooter,
 	clampDisplayLine,
+	describeExecutionCard,
+	describeExecutionTool,
 	type ExecutionColorKey,
 	type ExecutionStatus,
 	PREVIEW_LINES,
 	resolveExecutionStatus,
 } from "./execution-shared";
+import { code, span } from "../native/describe";
+import { type DescribeContext, type NativeNode, type NativeUiEvent, rootToggleExpanded } from "../native/node";
+import { Memo } from "../native/memo";
 
 export type EvalExecutionLanguage = "python" | "js";
 
@@ -40,6 +45,11 @@ export class EvalExecutionComponent extends Container {
 	readonly #code: string;
 	readonly #excludeFromContext: boolean;
 	readonly #language: EvalExecutionLanguage;
+	readonly #startedAt = performance.now();
+	#endedAt: number | undefined;
+	// Bumped whenever the output pane's text changes.
+	#outputVersion = 0;
+	readonly #native = new Memo();
 
 	#highlightLang(): "python" | "javascript" {
 		return this.#language === "js" ? "javascript" : "python";
@@ -107,9 +117,54 @@ export class EvalExecutionComponent extends Container {
 		this.#updateDisplay();
 	}
 
+	handleNativeEvent(event: NativeUiEvent): void {
+		const expanded = rootToggleExpanded(event);
+		if (expanded !== undefined) this.setExpanded(expanded);
+	}
+
+	/**
+	 * The agent's eval `tool` frame (role `omp.eval`) with a `you` badge: the
+	 * cell source in the head, its output as an `ansi` mini terminal. Terminals
+	 * without the `tool` kind get a `card` with the cell as `code` over the output.
+	 */
+	override describe(cx?: DescribeContext): NativeNode {
+		const dataFirst = cx?.supports("tool") === true;
+		const key = [dataFirst, this.#outputVersion, this.#status, this.#expanded];
+		return this.#native.get(key, () => {
+			const title = this.#language === "js" ? "JavaScript" : "Python";
+			const common = {
+				role: "omp.eval",
+				status: this.#status,
+				startedAt: this.#startedAt,
+				expanded: this.#expanded,
+				output: this.#outputPane.getText(),
+				exitCode: this.#exitCode,
+				truncation: this.#truncation,
+				artifactError: this.#artifactError,
+			};
+			return dataFirst
+				? describeExecutionTool({
+						...common,
+						name: "eval",
+						title,
+						command: this.#code,
+						lang: this.#highlightLang(),
+						excluded: this.#excludeFromContext,
+						endedAt: this.#endedAt,
+					})
+				: describeExecutionCard({
+						...common,
+						head: [span(title, `${this.#excludeFromContext ? "dim" : "pythonMode"} strong`)],
+						muted: this.#excludeFromContext,
+						lead: [code(this.#code, { lang: this.#highlightLang(), key: "code" })],
+					});
+		});
+	}
+
 	appendOutput(chunk: string): void {
 		// Chunk is pre-sanitized by OutputSink.push() — no need to sanitize again.
 		this.#outputPane.append(chunk);
+		this.#outputVersion++;
 		this.#updateDisplay();
 	}
 
@@ -120,12 +175,14 @@ export class EvalExecutionComponent extends Container {
 	): void {
 		this.#exitCode = exitCode;
 		this.#status = resolveExecutionStatus(exitCode, cancelled);
+		this.#endedAt ??= performance.now();
 		this.#truncation = options?.truncation;
 		this.#artifactError = options?.artifactError;
 		this.#outputPane.finish();
 		if (options?.output !== undefined) {
 			this.#setOutput(options.output);
 		}
+		this.#outputVersion++;
 
 		this.#loader.stop();
 		this.#updateDisplay();