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

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();

package/src/chat/execution-shared.ts

@@ -16,7 +16,10 @@ import { formatArtifactErrorNotice, formatTruncationMetaNotice, type TruncationM
 import { DynamicBorder } from "../chrome/dynamic-border";
 import { Ellipsis, truncateToWidth, visibleWidth } from "../utils";
 import { interruptKey } from "../chrome/keybinding-hints";
-import { expandKeyHint } from "../render/render-utils";
+import { DEFAULT_TERMINAL_PREVIEW_LINES, expandKeyHint } from "../render/render-utils";
+import type { TspCardStatus, TspSpan, TspText, TspTone } from "@oh-my-pi/pi-wire";
+import { card, node, span, text } from "../native/describe";
+import type { NativeChild, NativeNode } from "../native/node";
 
 /** Output rows shown while an execution is collapsed. */
 export const PREVIEW_LINES = 20;
@@ -104,6 +107,155 @@ export function buildStatusFooter(opts: {
 	return new Text(`\n${parts.join("\n")}`, 1, 0);
 }
 
+const EXECUTION_CARD_STATUS: Record<ExecutionStatus, TspCardStatus> = {
+	running: "running",
+	complete: "done",
+	cancelled: "cancelled",
+	error: "error",
+};
+
+/** Inputs for {@link describeExecutionCard}. */
+export interface ExecutionCardInput {
+	readonly role: string;
+	readonly head: TspText;
+	/** Excluded from context (`!!`/`$$`): a muted card. */
+	readonly muted: boolean;
+	readonly status: ExecutionStatus;
+	/** `performance.now()` when the run started; drives the live elapsed timer. */
+	readonly startedAt: number;
+	readonly expanded: boolean;
+	/** Body nodes before the output (the eval cell's code). */
+	readonly lead?: readonly NativeChild[];
+	/** Raw terminal output. */
+	readonly output: string;
+	readonly images?: readonly NativeChild[];
+	readonly exitCode: number | undefined;
+	readonly truncation: TruncationMeta | undefined;
+	readonly artifactError?: OutputArtifactError;
+}
+
+/**
+ * Native card shared by user bash/eval runs: the head with a live `elapsed`
+ * while running, the output as an `ansi` mini terminal that follows its tail
+ * while running, a cancel hint spinner, then exit/truncation notes. The
+ * terminal clamps the collapsed body and owns the "N more lines" affordance.
+ */
+export function describeExecutionCard(input: ExecutionCardInput): NativeNode {
+	const running = input.status === "running";
+	const headChildren: NativeChild[] = [text(input.head, { lines: 1, grow: 1 })];
+	if (running) {
+		headChildren.push(node("elapsed", { age: Math.max(0, Math.round(performance.now() - input.startedAt)) }));
+	}
+	const children: NativeChild[] = [
+		node("row", { gap: "sm", align: "baseline" }, headChildren, "head"),
+		...(input.lead ?? []),
+	];
+	if (input.output) {
+		children.push(
+			node("ansi", { text: input.output, follow: running, preview: { lines: PREVIEW_LINES } }, undefined, "output"),
+		);
+	}
+	if (input.images) children.push(...input.images);
+	if (running) {
+		children.push(
+			node("spinner", { label: [span(`Running… (${interruptKey()} to cancel)`, "muted")] }, undefined, "running"),
+		);
+	}
+	const notes: TspSpan[] = [];
+	const note = (value: string, token: string): void => {
+		if (notes.length > 0) notes.push(span("\n"));
+		notes.push(span(value, token));
+	};
+	if (input.status === "cancelled") note("(cancelled)", "warning");
+	else if (input.status === "error") note(`(exit ${input.exitCode})`, "error");
+	if (input.truncation) note(formatTruncationMetaNotice(input.truncation), "warning");
+	if (input.artifactError) note(formatArtifactErrorNotice(input.artifactError), "warning");
+	if (notes.length > 0) children.push(text(notes, { wrap: "word", key: "notes" }));
+	return card(
+		{
+			role: input.role,
+			tone: input.muted ? "muted" : undefined,
+			status: EXECUTION_CARD_STATUS[input.status],
+			collapsible: true,
+			collapsed: !input.expanded,
+			preview: { lines: PREVIEW_LINES },
+		},
+		children,
+	);
+}
+
+/** Inputs for {@link describeExecutionTool}. */
+export interface ExecutionToolInput {
+	readonly role: string;
+	/** Tool name for the head icon (`bash`, `eval`). */
+	readonly name: string;
+	readonly title: string;
+	/** The command / cell source, shown once in the head. */
+	readonly command: string;
+	readonly lang: string;
+	/** Excluded from context (`!!`/`$$`). */
+	readonly excluded: boolean;
+	readonly status: ExecutionStatus;
+	/** `performance.now()` when the run started / ended. */
+	readonly startedAt: number;
+	readonly endedAt: number | undefined;
+	readonly expanded: boolean;
+	/** Raw terminal output. */
+	readonly output: string;
+	readonly images?: readonly NativeChild[];
+	readonly exitCode: number | undefined;
+	readonly truncation: TruncationMeta | undefined;
+	readonly artifactError?: OutputArtifactError;
+}
+
+/**
+ * A user `!`/`$` run as the agent's `tool` frame (§6.6): the command in the
+ * head with a `you` badge (plus `not sent` when excluded from context), the
+ * timer, exit chip and cancelled note; the body is the output as an `ansi`
+ * mini terminal following its tail, then one quiet truncation line.
+ */
+export function describeExecutionTool(input: ExecutionToolInput): NativeNode {
+	const running = input.status === "running";
+	const body: NativeChild[] = [];
+	if (input.output) body.push(node("ansi", { text: input.output, follow: running }, undefined, "output"));
+	if (input.images) body.push(...input.images);
+	const notes: string[] = [];
+	if (input.truncation) notes.push(formatTruncationMetaNotice(input.truncation));
+	if (input.artifactError) notes.push(formatArtifactErrorNotice(input.artifactError));
+	if (notes.length > 0) {
+		body.push({
+			...text([span(notes.join(" · "), "muted")], { wrap: "word", role: "omp.tool.notice" }),
+			key: "foot",
+		});
+	}
+	const ms = Math.max(0, Math.round((input.endedAt ?? performance.now()) - input.startedAt));
+	const badges: { text: string; tone?: TspTone; title?: string }[] = [{ text: "you", tone: "user" }];
+	if (input.excluded) badges.push({ text: "not sent", title: "Not sent to the model", tone: "muted" });
+	const hasBody = body.length > 0;
+	return node(
+		"tool",
+		{
+			role: input.role,
+			name: input.name,
+			title: input.title,
+			target: input.command,
+			targetKind: "command",
+			lang: input.lang,
+			badges,
+			status: EXECUTION_CARD_STATUS[input.status],
+			age: running ? ms : undefined,
+			took: running ? undefined : ms,
+			exit: input.status === "error" ? input.exitCode : undefined,
+			note: input.status === "cancelled" ? "cancelled" : undefined,
+			frame: "card",
+			collapsible: hasBody,
+			collapsed: hasBody ? !input.expanded : undefined,
+			preview: hasBody ? { tail: DEFAULT_TERMINAL_PREVIEW_LINES } : undefined,
+		},
+		body,
+	);
+}
+
 /**
  * Derive the post-run status from an exit code + cancellation flag using the
  * same precedence both execution components apply.

package/src/chat/hook-message.ts

@@ -13,6 +13,7 @@ export class HookMessageComponent extends FramedMessageComponent<HookMessage<unk
 	constructor(message: HookMessage<unknown>, customRenderer?: HookMessageRenderer) {
 		super({
 			message,
+			role: "omp.hook",
 			collapseAfterLines: HOOK_COLLAPSED_LINES,
 			customRenderer,
 		});