@oh-my-pi/pi-tui 18.8.7 → 18.8.8

package/src/tools/bash.ts

@@ -25,9 +25,9 @@ import type {
 	RenderResultOptions,
 	ToolRenderer,
 } from "./renderer";
-import { ansi, compact, keyed } from "../native/describe";
-import type { NativeChild } from "../native/node";
-import { footnoteText, resultText } from "./native-view";
+import { INTENT_FIELD, type TspTone } from "@oh-my-pi/pi-wire";
+import { plainText } from "../native/spans";
+import { resultText, runBox, runFoot, runInput, runOutput, type RunState } from "./native-view";
 
 /** Default collapsed shell output preview height. */
 export const BASH_DEFAULT_PREVIEW_LINES = DEFAULT_TERMINAL_PREVIEW_LINES;
@@ -367,34 +367,41 @@ function bashStatsParts(
 }
 
 /**
- * Native head facts of a shell call: title, the command once (`cd`/env
- * prefix included), a `background` badge for a backgrounded job, the
- * `exit N` chip and a `timed out` note only when the deadline hit.
+ * Native head facts of a shell call: title, the model's intent as the target
+ * (none without one), the command line for Copy command, the `exit N` chip
+ * and a `timed out` note only when the deadline hit. The command itself and a
+ * backgrounded job's state draw in the run box.
  */
 function shellToolHead(
 	title: string,
 	command: string,
+	intent: string | undefined,
 	details: BashToolDetails | undefined,
 	settled: boolean,
 ): NativeToolHead {
 	const exit = settled && details?.exitCode !== undefined && details.exitCode !== 0 ? details.exitCode : undefined;
 	return {
 		title,
-		target: command,
-		targetKind: "command",
-		lang: "bash",
-		badges:
-			details?.async?.state === "running"
-				? [{ text: "background", title: `Backgrounded as job ${details.async.jobId}` }]
-				: undefined,
+		target: intent,
+		targetKind: intent ? "text" : undefined,
+		command,
 		exit,
 		note: settled && details?.timedOut === true ? "timed out" : undefined,
 	};
 }
 
-/** The quiet final line's facts under shell output: service state and the full-output artifact. */
+/** The model's intent line (`i` arg) as plain head text, or undefined when absent. */
+function callIntent(args: unknown): string | undefined {
+	if (!args || typeof args !== "object" || !(INTENT_FIELD in args)) return undefined;
+	const value = args[INTENT_FIELD];
+	if (typeof value !== "string") return undefined;
+	return plainText(value).trim() || undefined;
+}
+
+/** The run foot's facts under shell output: background job, service state and the full-output artifact. */
 function shellFootParts(details: BashToolDetails | undefined, artifactId: string | undefined): string[] {
 	const parts: string[] = [];
+	if (details?.async?.state === "running") parts.push(`Job ${details.async.jobId}`);
 	const service = details?.service;
 	if (service) {
 		parts.push(`Service ${service.name}`, service.state);
@@ -405,6 +412,27 @@ function shellFootParts(details: BashToolDetails | undefined, artifactId: string
 	return parts;
 }
 
+/** The command line as a run's input: wrapped shell source. */
+const SHELL_INPUT = { role: "omp.tool.bash.command", lang: "bash", wrap: true } as const;
+
+/** Box tint per run state: failed runs read as errors, timed-out ones as warnings. */
+const RUN_BOX_TONE: Partial<Record<RunState, TspTone>> = { failed: "error", "timed-out": "warning" };
+
+/** The foot state of a shell call from its result. */
+function shellRunState(
+	details: BashToolDetails | undefined,
+	isError: boolean,
+	isPartial: boolean,
+	cancelled: boolean,
+): RunState {
+	if (cancelled) return "cancelled";
+	if (isPartial) return "running";
+	if (details?.timedOut === true) return "timed-out";
+	if (details?.async?.state === "running") return "background";
+	if (isError || (details?.exitCode !== undefined && details.exitCode !== 0)) return "failed";
+	return "done";
+}
+
 function toBashRenderArgs<TArgs>(args: TArgs | undefined, config: ShellRendererConfig<TArgs>): BashRenderArgs {
 	return {
 		command: config.resolveCommand?.(args),
@@ -610,10 +638,21 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 		},
 		describeCall(args: TArgs, options: RenderResultOptions): NativeToolView {
 			const command = formatBashCommandText(toBashRenderArgs(args, config));
-			// The command shows once, in the head; the body is only the output.
+			// No foot until the command starts; once it runs (before any output) the clock shows.
+			const started = options.executionStarted === true;
 			return {
-				tool: shellToolHead(config.resolveTitle(args, options), command, undefined, false),
-				preview: { tail: BASH_DEFAULT_PREVIEW_LINES },
+				tool: shellToolHead(config.resolveTitle(args, options), command, callIntent(args), undefined, false),
+				body: [
+					runBox(
+						[
+							runInput(command, SHELL_INPUT),
+							started &&
+								runFoot({ state: options.cancelled ? "cancelled" : "running", elapsedMs: options.elapsedMs }),
+						],
+						{ key: "run" },
+					),
+				],
+				preview: "children",
 			};
 		},
 
@@ -637,22 +676,34 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 			const showingFullOutput = expanded && renderContext?.isFullOutput === true;
 			const command = formatBashCommandText(toBashRenderArgs(args, config));
 			const previewLines = renderContext?.previewLines ?? BASH_DEFAULT_PREVIEW_LINES;
-			// Wall time is the head timer, the timeout a note only when hit, the exit a head chip:
-			// what is left (service state, artifact, truncation) is one quiet final line.
+			const state = shellRunState(details, isError, isPartial, options.cancelled === true);
+			// Settled: the measured wall time wins. A background job outlives the call: its run time is unknown here.
+			const elapsedMs =
+				state === "background"
+					? undefined
+					: isPartial
+						? options.elapsedMs
+						: (details?.wallTimeMs ?? options.elapsedMs);
 			const meta = details?.meta;
-			const body: NativeChild[] = compact([
-				output.trim().length > 0 &&
-					keyed(ansi(output, { follow: isPartial, role: "omp.tool.bash.output" }), "output"),
-				footnoteText(shellFootParts(details, stripped.artifactId), {
-					...meta,
-					truncation: showingFullOutput ? undefined : meta?.truncation,
-				}),
-			]);
+			const box = runBox(
+				[
+					runInput(command, SHELL_INPUT),
+					output.trim().length > 0 && runOutput(output, { role: "omp.tool.bash.output", previewLines }),
+					runFoot({
+						state,
+						exitCode: details?.exitCode,
+						elapsedMs,
+						facts: shellFootParts(details, stripped.artifactId),
+						meta: { ...meta, truncation: showingFullOutput ? undefined : meta?.truncation },
+					}),
+				],
+				{ key: "run", tone: RUN_BOX_TONE[state] },
+			);
 			return {
-				tool: shellToolHead(config.resolveTitle(args, options), command, details, !isPartial),
-				body,
-				tone: !isPartial && isError && details?.timedOut === true ? "warning" : undefined,
-				preview: { tail: previewLines },
+				tool: shellToolHead(config.resolveTitle(args, options), command, callIntent(args), details, !isPartial),
+				body: [box],
+				tone: state === "timed-out" ? "warning" : undefined,
+				preview: "children",
 			};
 		},
 		mergeCallAndResult: true,

package/src/tools/eval.ts

@@ -9,10 +9,10 @@ import type {
 	ToolRenderer,
 } from "./renderer";
 import type { TspSpan } from "@oh-my-pi/pi-wire";
-import { ansi, code as codeNode, compact, keyed, md, node, span, text } from "../native/describe";
+import { compact, keyed, md, node, span, text } from "../native/describe";
 import type { NativeChild, NativeNode } from "../native/node";
 import { plainText } from "../native/spans";
-import { footnoteText, resultText } from "./native-view";
+import { resultText, runBox, runFoot, type RunFootInput, runInput, runOutput, type RunState } from "./native-view";
 import { renderAgentTreeRow } from "./agent-tree";
 import { truncateToVisualLines } from "../chrome/visual-truncate";
 import { getMarkdownTheme, type Theme } from "../theme/theme";
@@ -694,89 +694,104 @@ function splitConsoleTables(output: string): EvalOutputPart[] {
 	return parts;
 }
 
-/** One cell's output: markdown, else terminal text with any `console.table` blocks as tables. */
-function evalOutputNodes(output: string, markdown: boolean, running: boolean, error: boolean): NativeNode[] {
+/**
+ * One cell's outputs: markdown, else terminal text (following its tail,
+ * clamped to the last `previewLines` while folded) with any `console.table`
+ * blocks as tables.
+ */
+function evalOutputNodes(output: string, markdown: boolean, previewLines: number): NativeNode[] {
 	if (output.trim().length === 0) return [];
-	if (markdown && !error) return [md(output)];
-	const tone = error ? "error" : undefined;
-	return splitConsoleTables(output).map(part =>
+	if (markdown) return [keyed(md(output), "output")];
+	return splitConsoleTables(output).map((part, i) =>
 		part.kind === "text"
-			? ansi(part.text, { follow: running, tone, role: "omp.tool.eval.output" })
-			: node("table", {
-					// Node's index column header is noise in a real table.
-					cols: part.head.map((head, i) => ({ id: `c${i}`, head: head === "(index)" ? "" : head })),
-					rows: part.rows.map((cells, r) => ({
-						id: `r${r}`,
-						cells: Object.fromEntries(cells.map((cell, i) => [`c${i}`, cell])),
-					})),
-					role: "omp.tool.eval.table",
-				}),
+			? runOutput(part.text, { role: "omp.tool.eval.output", previewLines, key: i === 0 ? "output" : `output-${i}` })
+			: node(
+					"table",
+					{
+						// Node's index column header is noise in a real table.
+						cols: part.head.map((head, c) => ({ id: `c${c}`, head: head === "(index)" ? "" : head })),
+						rows: part.rows.map((cells, r) => ({
+							id: `r${r}`,
+							cells: Object.fromEntries(cells.map((cell, c) => [`c${c}`, cell])),
+						})),
+						role: "omp.tool.eval.table",
+					},
+					undefined,
+					`table-${i}`,
+				),
+	);
+}
+
+/** Status lines a folded cell keeps: the newest ones. */
+const RUN_STATUS_TAIL = 8;
+
+/**
+ * A cell's status events (`omp.run.status`): all of them when expanded, else
+ * the newest {@link RUN_STATUS_TAIL} after a muted `N earlier` line.
+ */
+function evalStatusSection(events: readonly EvalStatusEvent[], expanded: boolean): NativeNode | undefined {
+	if (events.length === 0) return undefined;
+	const hidden = expanded ? 0 : Math.max(0, events.length - RUN_STATUS_TAIL);
+	const lines = events.slice(hidden).map((event, i) => keyed(describeStatusEvent(event), `s${hidden + i}`));
+	return node(
+		"col",
+		{ role: "omp.run.status", gap: "none" },
+		compact<NativeNode>([hidden > 0 && keyed(text([span(`${hidden} earlier`, "muted")]), "earlier"), ...lines]),
+		"status",
 	);
 }
 
-/** Inputs of one eval cell section. */
-interface EvalCellSection {
+/** The foot state of a cell, or undefined while it has not started. */
+function evalCellState(status: EvalCellResult["status"], cancelled: boolean): RunState | undefined {
+	switch (status) {
+		case "pending":
+			return undefined;
+		case "running":
+			return cancelled ? "cancelled" : "running";
+		case "complete":
+			return "done";
+		case "error":
+			return "failed";
+	}
+}
+
+/** Inputs of one eval cell box. */
+interface EvalCellRun {
 	readonly language: EvalLanguage;
 	readonly code: string;
 	readonly title?: string;
-	readonly status?: EvalCellResult["status"];
-	readonly durationMs?: number;
-	readonly output?: readonly NativeChild[];
+	readonly outputs?: readonly NativeChild[];
+	readonly status?: NativeNode;
+	/** Omitted while the cell has not started. */
+	readonly foot?: RunFootInput;
 }
 
 /**
- * A notebook cell: a gutter mark beside the input (←, muted until the cell
- * runs, omp's thinking starburst while it does) and beside its output (→).
- * Only multi-cell calls repeat titles; marks never invent execution counts.
+ * A notebook cell as one run box: the caption (multi-cell calls only), the
+ * source, its outputs, status lines and foot. A failed cell tints its box.
  */
-function evalCellSection(cell: EvalCellSection, index: number, total: number): NativeNode {
-	let head: TspSpan[] | undefined;
+function evalCellBox(cell: EvalCellRun, index: number, total: number): NativeNode {
+	let caption: NativeNode | undefined;
 	if (total > 1) {
-		head = [span(`${index + 1}/${total}`, "muted")];
+		const spans: TspSpan[] = [span(`${index + 1}/${total}`, "muted")];
 		const title = plainText(cell.title ?? "").trim();
-		if (title) head.push(span(` ${title}`, "toolTitle"));
-		if (cell.status === "error") head.push(span(" · failed", "error"));
-		if (cell.durationMs !== undefined) head.push(span(` · ${(cell.durationMs / 1000).toFixed(2)}s`, "muted"));
+		if (title) spans.push(span(` ${title}`, "toolTitle"));
+		caption = keyed(text(spans, { role: "omp.run.caption" }), "caption");
 	}
-	const inputMark =
-		cell.status === "running"
-			? node("spinner", { style: "starburst", role: "omp.tool.eval.prompt", aria: "Running" })
-			: node("icon", {
-					name: "arrow-left",
-					role: "omp.tool.eval.prompt",
-					aria: "Input",
-					tone: !cell.status || cell.status === "pending" ? "muted" : undefined,
-				});
-	return node(
-		"col",
-		{
-			role: "omp.tool.eval.cell",
-			tone: cell.status === "error" ? "error" : cell.status === "running" ? "pending" : undefined,
-		},
-		compact<NativeChild>([
-			head ? text(head, { role: "omp.tool.eval.caption" }) : undefined,
-			node(
-				"row",
-				{ role: "omp.tool.eval.input", align: "start" },
-				[
-					inputMark,
-					keyed(codeNode(cell.code, { lang: languageForHighlighter(cell.language), numbers: false }), "code"),
-				],
-				"input",
-			),
-			cell.output?.length
-				? node(
-						"row",
-						{ role: "omp.tool.eval.result", align: "start" },
-						[
-							node("icon", { name: "arrow-right", role: "omp.tool.eval.prompt", aria: "Output" }),
-							node("col", { role: "omp.tool.eval.outputs" }, cell.output),
-						],
-						"output",
-					)
-				: undefined,
-		]),
-		`cell-${index}`,
+	return runBox(
+		[
+			caption,
+			cell.code.trim().length > 0 &&
+				runInput(cell.code, {
+					role: "omp.tool.eval.input",
+					lang: languageForHighlighter(cell.language),
+					wrap: false,
+				}),
+			...(cell.outputs ?? []),
+			cell.status,
+			cell.foot && runFoot(cell.foot),
+		],
+		{ key: `cell-${index}`, tone: cell.foot?.state === "failed" ? "error" : undefined },
 	);
 }
 
@@ -1129,16 +1144,20 @@ export const evalToolRenderer = {
 		};
 	},
 
-	describeCall(args: EvalRenderArgs, _options: RenderResultOptions): NativeToolView {
+	describeCall(args: EvalRenderArgs, options: RenderResultOptions): NativeToolView {
 		const cells = getRenderCells(args);
+		// No foot until the call starts; then the first cell runs (before any result names it).
+		const startFoot: RunFootInput | undefined = options.executionStarted
+			? { state: options.cancelled ? "cancelled" : "running", elapsedMs: options.elapsedMs }
+			: undefined;
 		return {
 			tool: evalToolHead(
 				cells[0]?.title,
 				cells.map(cell => cell.language),
 				cells.length,
 			),
-			body: cells.map((cell, i) => evalCellSection(cell, i, cells.length)),
-			preview: { lines: EVAL_DEFAULT_PREVIEW_LINES },
+			body: cells.map((cell, i) => evalCellBox({ ...cell, foot: i === 0 ? startFoot : undefined }, i, cells.length)),
+			preview: "children",
 		};
 	},
 
@@ -1149,82 +1168,89 @@ export const evalToolRenderer = {
 	): NativeToolView {
 		const details = result.details;
 		const isPartial = options.isPartial === true;
+		const cancelled = options.cancelled === true;
+		const expanded = options.renderContext?.expanded ?? options.expanded;
 		const previewLines = options.renderContext?.previewLines ?? EVAL_DEFAULT_PREVIEW_LINES;
 		const jsonNodes = (details?.jsonOutputs ?? []).map((value, index) =>
 			keyed(describeJsonTree(value, { hiddenRootKeys: [] }), `display-${index}`),
 		);
-		// A notice and truncation go to one quiet final line (a background job is a head badge).
-		const footer = footnoteText(compact([details?.notice]), details?.meta);
+		// The call's notice and truncation join the last run's foot facts (a background job is a head badge).
+		const callFacts = { facts: compact([details?.notice]), meta: details?.meta };
 		const cellResults = details?.cells;
-		let cells: NativeNode[];
-		let head: NativeToolHead;
 		if (cellResults && cellResults.length > 0) {
 			const languages = cellResults.map(cell => cell.language ?? details?.language ?? "python");
-			head = evalToolHead(cellResults[0]!.title, languages, cellResults.length, details);
-			cells = cellResults.map((cell, i) => {
+			const states = cellResults.map(cell => evalCellState(cell.status, cancelled));
+			// A cell that never started has no foot to carry the call's facts: the last one that ran does.
+			const factsIndex = states.findLastIndex(state => state !== undefined);
+			let earlierMs = 0;
+			const cells = cellResults.map((cell, i) => {
 				const language = languages[i]!;
-				return evalCellSection(
+				const state = states[i];
+				// A running cell's clock is the call's minus the cells that finished before it.
+				const elapsedMs =
+					state === "running" || state === "cancelled"
+						? options.elapsedMs === undefined
+							? undefined
+							: Math.max(0, options.elapsedMs - earlierMs)
+						: cell.durationMs;
+				earlierMs += cell.durationMs ?? 0;
+				return evalCellBox(
 					{
 						language,
 						code: formatEvalCodeForDisplay(cell.code, language),
 						title: cell.title,
-						status: cell.status,
-						durationMs: cell.durationMs,
-						output: [
+						outputs: [
 							...evalOutputNodes(
 								cell.output,
-								cell.hasMarkdown === true,
-								cell.status === "running",
-								cell.status === "error",
+								cell.hasMarkdown === true && cell.status !== "error",
+								previewLines,
 							),
-							...(cell.statusEvents ?? []).map(describeStatusEvent),
 							...(i === cellResults.length - 1 ? jsonNodes : []),
 						],
+						status: evalStatusSection(cell.statusEvents ?? [], expanded),
+						foot: state && {
+							state,
+							exitCode: cell.exitCode,
+							elapsedMs,
+							...(i === factsIndex ? callFacts : {}),
+						},
 					},
 					i,
 					cellResults.length,
 				);
 			});
-		} else {
-			// No per-cell results (older details): the call's cells, with the whole output under the last.
-			const argCells = getRenderCells(args);
-			const languages = details?.languages ?? (details?.language ? [details.language] : []);
-			head = evalToolHead(
+			return {
+				tool: evalToolHead(cellResults[0]!.title, languages, cellResults.length, details),
+				body: cells,
+				preview: "children",
+			};
+		}
+		// No per-cell results (older details): the call's cells, the whole output and foot under the last.
+		const argCells = getRenderCells(args);
+		const languages = details?.languages ?? (details?.language ? [details.language] : []);
+		const rawOutput = options.renderContext?.output ?? resultText(result).trimEnd();
+		const state: RunState = cancelled ? "cancelled" : isPartial ? "running" : result.isError ? "failed" : "done";
+		const last: Omit<EvalCellRun, "language" | "code" | "title"> = {
+			outputs: [
+				...evalOutputNodes(stripOutputNotice(rawOutput, details?.meta).trimEnd(), false, previewLines),
+				...jsonNodes,
+			],
+			status: evalStatusSection(details?.statusEvents ?? [], expanded),
+			foot: { state, elapsedMs: options.elapsedMs, ...callFacts },
+		};
+		const runs: EvalCellRun[] =
+			argCells.length > 0
+				? argCells.map((cell, i) => (i === argCells.length - 1 ? { ...cell, ...last } : cell))
+				: [{ language: languages[0] ?? "python", code: "", ...last }];
+		return {
+			tool: evalToolHead(
 				argCells[0]?.title,
 				argCells.length > 0 ? argCells.map(cell => cell.language) : languages,
 				argCells.length,
 				details,
-			);
-			const rawOutput = options.renderContext?.output ?? resultText(result).trimEnd();
-			const output = [
-				...evalOutputNodes(
-					stripOutputNotice(rawOutput, details?.meta).trimEnd(),
-					false,
-					isPartial,
-					result.isError === true,
-				),
-				...(details?.statusEvents ?? []).map(describeStatusEvent),
-				...jsonNodes,
-			];
-			cells =
-				argCells.length > 0
-					? argCells.map((cell, i) =>
-							evalCellSection(
-								{
-									...cell,
-									status: isPartial ? "running" : result.isError ? "error" : "complete",
-									output: i === argCells.length - 1 ? output : undefined,
-								},
-								i,
-								argCells.length,
-							),
-						)
-					: output;
-		}
-		return {
-			tool: head,
-			body: compact<NativeChild>([...cells, footer]),
-			preview: { lines: previewLines },
+			),
+			body: runs.map((run, i) => evalCellBox(run, i, runs.length)),
+			preview: "children",
 		};
 	},
 

package/src/tools/native-view.ts

@@ -6,7 +6,7 @@
 import * as path from "node:path";
 import { pathToFileURL } from "node:url";
 import type { TspSpan, TspText, TspTone } from "@oh-my-pi/pi-wire";
-import { code, keyed, node, row, span, text } from "../native/describe";
+import { ansi, code, compact, keyed, node, row, span, text } from "../native/describe";
 import type { NativeChild, NativeNode } from "../native/node";
 import { type ParsedDiagnostic, parseDiagnosticMessage, shortenPath } from "../render/render-utils";
 import { plainText } from "../native/spans";
@@ -189,6 +189,107 @@ export function footnoteText(parts: readonly string[], meta?: OutputMeta): Nativ
 	};
 }
 
+/** Drawn lines of a run's input (command, cell code) before its "N more lines" button. */
+export const RUN_INPUT_PREVIEW_LINES = 6;
+
+/**
+ * What a run's foot names: `running` (live clock), `background` (an async job
+ * outlives the call), and the settled outcomes. A failure with an exit code
+ * reads `exit N`; without one, `Failed`.
+ */
+export type RunState = "running" | "background" | "done" | "failed" | "cancelled" | "timed-out";
+
+const RUN_STATE: Record<RunState, { readonly word: string; readonly tone: TspTone }> = {
+	running: { word: "Running", tone: "pending" },
+	background: { word: "In background", tone: "pending" },
+	done: { word: "Done", tone: "success" },
+	failed: { word: "Failed", tone: "error" },
+	cancelled: { word: "Cancelled", tone: "muted" },
+	"timed-out": { word: "Timed out", tone: "warning" },
+};
+
+/** Inputs of {@link runFoot}. */
+export interface RunFootInput {
+	readonly state: RunState;
+	/** Exit code of a `failed` run; a non-zero code names the state `exit N`. */
+	readonly exitCode?: number;
+	/** Milliseconds run so far (`running`) or in total; the time is omitted when undefined. */
+	readonly elapsedMs?: number;
+	/** Quiet facts (job id, service state, artifact), muted and ` · `-joined. */
+	readonly facts?: readonly string[];
+	/** Truncation / artifact-capture notices, appended to the facts in `warning`. */
+	readonly meta?: OutputMeta;
+}
+
+/**
+ * The foot line of a run box (`omp.run.foot`): the state word in its tone,
+ * the run time (a live clock while running, frozen once settled) and the
+ * quiet facts. Glyphs are the terminal's styling, never text.
+ */
+export function runFoot(input: RunFootInput): NativeNode {
+	const failedWithCode = input.state === "failed" && input.exitCode !== undefined && input.exitCode !== 0;
+	const state = failedWithCode
+		? { word: `exit ${input.exitCode}`, tone: RUN_STATE.failed.tone }
+		: RUN_STATE[input.state];
+	const facts = (input.facts ?? []).map(fact => plainText(fact).trim()).filter(fact => fact.length > 0);
+	const notices: string[] = [];
+	if (input.meta?.truncation) notices.push(formatTruncationMetaNotice(input.meta.truncation, input.meta.source));
+	if (input.meta?.artifactError) notices.push(formatArtifactErrorNotice(input.meta.artifactError));
+	const factSpans: TspSpan[] = [];
+	if (facts.length > 0) factSpans.push(span(facts.join(" · "), "muted"));
+	for (const notice of notices) {
+		if (factSpans.length > 0) factSpans.push(span(" · ", "muted"));
+		factSpans.push(span(notice, "warning"));
+	}
+	const ms = input.elapsedMs === undefined ? undefined : Math.max(0, Math.round(input.elapsedMs));
+	const time =
+		ms === undefined
+			? undefined
+			: node(
+					"elapsed",
+					input.state === "running"
+						? { role: "omp.run.time", age: ms, format: "short" }
+						: { role: "omp.run.time", age: ms, stopped: ms, format: "short" },
+					undefined,
+					"time",
+				);
+	return node(
+		"row",
+		{ role: "omp.run.foot", gap: "sm", align: "center" },
+		compact<NativeNode>([
+			keyed(text([span(state.word)], { role: "omp.run.state", tone: state.tone }), "state"),
+			time,
+			factSpans.length > 0 && keyed(text(factSpans, { role: "omp.run.facts", wrap: "word" }), "facts"),
+		]),
+		"foot",
+	);
+}
+
+/** A run's input section: the command or cell source, clamped to {@link RUN_INPUT_PREVIEW_LINES}. */
+export function runInput(source: string, p: { role: string; lang: string; wrap: boolean }): NativeNode {
+	return keyed(
+		code(source.trimEnd(), { role: p.role, lang: p.lang, wrap: p.wrap, preview: { lines: RUN_INPUT_PREVIEW_LINES } }),
+		"input",
+	);
+}
+
+/** A run's terminal output: follows its tail, clamped to the last `previewLines` lines while folded. */
+export function runOutput(output: string, p: { role: string; previewLines: number; key?: string }): NativeNode {
+	return keyed(ansi(output, { role: p.role, follow: true, preview: { lines: p.previewLines } }), p.key ?? "output");
+}
+
+/**
+ * One run as one box (`omp.run`): input, output, status lines and foot in
+ * order. `tone` tints the box: `error` for a failed run, `warning` for a
+ * timed-out one.
+ */
+export function runBox(
+	children: readonly (NativeChild | undefined | false)[],
+	p: { key: string; tone?: TspTone },
+): NativeNode {
+	return node("col", { role: "omp.run", gap: "none", tone: p.tone }, compact(children), p.key);
+}
+
 /** Diagnostic rows shown before `+N more`. */
 const DIAGNOSTIC_ROWS = 5;