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

package/src/prompt/welcome.ts

@@ -1,11 +1,18 @@
-import { TERMINAL } from "../terminal-capabilities";
-import type { Component } from "../tui";
-import { padding, replaceTabs, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
 import { APP_NAME } from "@oh-my-pi/pi-utils/dirs";
-import { theme } from "../theme/theme";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
 import { formatDoubleTap, formatKeyHint, formatKeyHints, type KeyName } from "../app-keybindings";
 import { editorKey } from "../chrome/keybinding-hints";
 import { getKeybindings, type Keybinding } from "../keybindings";
+import { registerNativeBlob } from "../native/blobs";
+import { card, col, kbd, keyed, node, row, span, text } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { runTranscriptAction } from "../chat/transcript-actions";
+import { plainLine } from "../native/spans";
+import { isNativeRendering } from "../native/state";
+import { TERMINAL } from "../terminal-capabilities";
+import { theme } from "../theme/theme";
+import type { Component } from "../tui";
+import { padding, replaceTabs, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
 import tipsText from "./tips.txt" with { type: "text" };
 
 /** Tips embedded at build time, one per line; blanks dropped. Key placeholders
@@ -84,7 +91,12 @@ function renderNewTag(phase: number, encoding: ColorEncoding): string {
 /** Key placeholders in tips.txt: `{key:shift+tab}`, `{keys:up,down}`, `{tap:left}`, `{action:tui.editor.undo}`. */
 const TIP_KEY_PLACEHOLDER = /\{(key|keys|tap|action):([^}]+)\}/g;
 
-const MODIFIER_NAMES: Record<string, true | undefined> = { ctrl: true, shift: true, alt: true, super: true };
+const MODIFIER_NAMES: Record<string, true | undefined> = {
+	ctrl: true,
+	shift: true,
+	alt: true,
+	super: true,
+};
 
 /** A `+`-joined chord whose leading parts are modifiers (`ctrl+o`, `shift`, `left`). */
 function isKeyName(key: string): key is KeyName {
@@ -154,6 +166,8 @@ export function renderWelcomeTip(tip: string, boxWidth: number, phase = 0): stri
 export interface RecentSession {
 	name: string;
 	timeAgo: string;
+	/** Session file; a native click on the row resumes it. */
+	path?: string;
 }
 
 export interface LspServerInfo {
@@ -180,6 +194,7 @@ export class WelcomeComponent implements Component {
 	// Bypassed while the intro animation runs (every frame differs).
 	#cachedWidth = -1;
 	#cachedLines: string[] | undefined;
+	#native: { tip: string | undefined; node: NativeNode } | undefined;
 
 	constructor(
 		private version: string,
@@ -201,7 +216,152 @@ export class WelcomeComponent implements Component {
 	invalidate(): void {
 		this.#cachedWidth = -1;
 		this.#cachedLines = undefined;
+		this.#native = undefined;
 	}
+
+	/**
+	 * A `card` (`omp.welcome`) titled with the app version. The brand column
+	 * (`omp.welcome.brand`: greeting, the animated SVG mark, model, provider) sits
+	 * beside the info column (`omp.welcome.info`: prompt-sigil keycaps, LSP
+	 * servers, recent sessions); the tip of the session closes the card. Roles
+	 * carry the look (gradient logo, type scale, column hairline); a "[NEW]" tip
+	 * carries a terminal-clocked shimmering tag.
+	 */
+	describe(_cx: DescribeContext): NativeNode {
+		const tip = this.tip;
+		if (this.#native && this.#native.tip === tip) return this.#native.node;
+		const line = (spans: readonly TspSpan[], role?: string, key?: string): NativeNode =>
+			keyed(text(spans, { wrap: "none", truncate: "end", role }), key ?? role ?? "");
+		// Centered brand lines are short and fixed; the logo is multi-line art that must never truncate.
+		const art = (spans: readonly TspSpan[], role: string): NativeNode =>
+			keyed(text(spans, { wrap: "none", role }), role);
+		const brand = keyed(
+			col(
+				[
+					art([span("Welcome back!", "strong")], "omp.welcome.greeting"),
+					node(
+						"image",
+						{
+							blob: welcomeLogoBlob(),
+							alt: APP_NAME,
+							w: 128,
+							role: "omp.welcome.logo",
+						},
+						undefined,
+						"logo",
+					),
+					art([span(plainLine(this.modelName), "accent")], "omp.welcome.model"),
+					art([span(plainLine(this.providerName), "muted")], "omp.welcome.provider"),
+				],
+				{ align: "center", role: "omp.welcome.brand" },
+			),
+			"brand",
+		);
+		const section = (key: string, label: string, rows: readonly NativeChild[]): NativeNode =>
+			keyed(
+				col([line([span(label, "dim")], "omp.welcome.heading"), ...rows], {
+					gap: "xs",
+					role: `omp.welcome.${key}`,
+				}),
+				key,
+			);
+		const shortcut = (key: string, label: string): NativeNode =>
+			keyed(row([kbd(key), line([span(label, "muted")])], { gap: "sm" }), label);
+		const info: NativeChild[] = [
+			line([span(this.version, "dim mono")], "omp.welcome.version"),
+			section("tips", "Tips", [
+				shortcut("#", "prompt actions"),
+				shortcut("/", "commands"),
+				shortcut("!", "run bash"),
+				shortcut("$", "run python"),
+			]),
+		];
+		if (this.lspServers !== null) {
+			const lsp: NativeChild[] = [];
+			if (this.lspServers.length === 0) lsp.push(line([span("No LSP servers", "dim")], undefined, "none"));
+			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
+				const [symbol, token] =
+					server.status === "ready"
+						? (["status.enabled", "success"] as const)
+						: server.status === "available"
+							? (["status.enabled", "dim"] as const)
+							: server.status === "connecting"
+								? (["status.pending", "muted"] as const)
+								: (["status.error", "error"] as const);
+				lsp.push(
+					keyed(
+						row(
+							[
+								text([span("●", token)], { role: "omp.welcome.lsp-dot", title: server.status, aria: symbol }),
+								line([span(server.name)]),
+								...server.fileTypes
+									.slice(0, 3)
+									.map(type => node("badge", { text: type, role: "omp.welcome.lsp-type" }, undefined, type)),
+							],
+							{ gap: "sm", role: "omp.welcome.lsp-row" },
+						),
+						server.name,
+					),
+				);
+			}
+			info.push(section("lsp", "LSP servers", lsp));
+		}
+		const recents: NativeChild[] = [];
+		if (this.recentSessions.length === 0) recents.push(line([span("No recent sessions", "dim")], undefined, "none"));
+		for (const [index, session] of this.recentSessions.slice(0, WELCOME_SESSION_SLOTS).entries()) {
+			recents.push(
+				keyed(
+					row(
+						[
+							line([span(plainLine(session.name))], "omp.welcome.session"),
+							line([span(session.timeAgo, "dim")], "omp.welcome.age"),
+						],
+						{
+							gap: "md",
+							justify: "between",
+							role: "omp.welcome.recent",
+							actions: session.path ? { click: "resume" } : undefined,
+							title: session.path ? `Resume ${plainLine(session.name)}` : undefined,
+						},
+					),
+					`s${index}`,
+				),
+			);
+		}
+		info.push(section("recents", "Recent sessions", recents));
+		const body: NativeChild[] = [
+			keyed(
+				row([brand, keyed(col(info, { gap: "md", role: "omp.welcome.info" }), "info")], {
+					align: "start",
+					wrap: true,
+					role: "omp.welcome.grid",
+				}),
+				"grid",
+			),
+		];
+		if (tip) {
+			const isNew = NEW_TIP_MARKER.test(tip);
+			const tipText = plainLine(expandTipKeys(isNew ? tip.replace(NEW_TIP_MARKER, "") : tip));
+			const tipRow: NativeChild[] = [
+				node("icon", { name: "lightbulb", role: "omp.welcome.tip-icon" }),
+				text(tipText, { wrap: "word", role: "omp.welcome.tip-text" }),
+			];
+			if (isNew) tipRow.push(node("shimmer", { text: "New", role: "omp.welcome.new" }));
+			body.push(node("row", { gap: "sm", align: "start", role: "omp.welcome.tip" }, tipRow, "tip"));
+		}
+		// No head row or chevron: the card is the hero; the version sits in the info column.
+		const described = card({ role: "omp.welcome" }, body);
+		this.#native = { tip, node: described };
+		return described;
+	}
+	/** A click on a recent session resumes it. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type !== "action" || event.act !== "resume") return;
+		const index = Number(/\/s(\d+)$/.exec(event.key)?.[1]);
+		const path = this.recentSessions[index]?.path;
+		if (path) runTranscriptAction({ act: "resume", path });
+	}
+
 	/** The intro keeps the welcome block mutable; settling lets it retire to history. */
 	isTranscriptBlockFinalized(): boolean {
 		return this.#animTimer == null;
@@ -214,6 +374,12 @@ export class WelcomeComponent implements Component {
 	 */
 	playIntro(requestRender: () => void): void {
 		this.#stopAnimation();
+		// The intro is a repaint-only gradient sweep; a TSP terminal shows the
+		// settled card right away.
+		if (isNativeRendering()) {
+			requestRender();
+			return;
+		}
 		this.#requestRender = requestRender;
 		this.#animStart = performance.now();
 		this.#requestRender();
@@ -516,9 +682,47 @@ export class WelcomeComponent implements Component {
 	}
 }
 
+/**
+ * {@link PI_LOGO} as SVG for the native welcome, on the terminal's grid: a
+ * cell is 3×6 units, so the 12×5-cell art spans 36×30 from (14,16). The left
+ * leg's `▒▒` tail is a half-opacity cell; the gradient spans the whole art in
+ * user space (per-axis normalized, like {@link gradientLogo}) so the tail
+ * keeps its colour. Tern mounts SVG blobs as live DOM, so the classes are
+ * animation hooks: `trace` (the outline, `pathLength=1` for a draw-on), `mark`
+ * (the fills) and the gradient stops `s0`–`s2`.
+ */
+const WELCOME_LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 12 44 38">
+<defs><linearGradient id="g" gradientUnits="userSpaceOnUse" gradientTransform="matrix(36 0 0 30 14 16)" x1="0" y1="0" x2="1" y2="1">
+<stop class="s0" offset="0" stop-color="#ed4abf"/><stop class="s1" offset=".5" stop-color="#9b4dff"/><stop class="s2" offset="1" stop-color="#5ad8e6"/>
+</linearGradient></defs>
+<path class="mark" fill="url(#g)" d="M14 16h36v6h-9v24h-6V22h-6v12h-6V22h-9z"/>
+<rect class="mark" fill="url(#g)" opacity=".5" x="23" y="34" width="6" height="6"/>
+<path class="trace" fill="none" stroke="url(#g)" stroke-width="1" stroke-linejoin="round" pathLength="1" d="M14 16h36v6h-9v24h-6V22h-6v18h-6V22h-9z"/>
+</svg>`;
+
+let welcomeLogoId: string | undefined;
+
+/** The registered blob id of {@link WELCOME_LOGO_SVG}. */
+function welcomeLogoBlob(): string {
+	welcomeLogoId ??= registerNativeBlob(new TextEncoder().encode(WELCOME_LOGO_SVG), "image/svg+xml");
+	return welcomeLogoId;
+}
+
 /** Block-grid brand mark shared by the welcome and setup surfaces. */
 export const PI_LOGO = ["████████████", "   ██  ██   ", "   ██  ██   ", "   ▒▒  ██   ", "       ██   "];
 
+/** The block-grid brand mark as accent lines; `shimmer` declares the terminal-clocked shine sweep. */
+export function logoNode(lines: readonly string[], shimmer: boolean): NativeNode {
+	return col(
+		lines.map(line =>
+			text([span(line, "accent", shimmer ? { fx: "shimmer" } : undefined)], {
+				wrap: "none",
+			}),
+		),
+		{ align: "center", role: "omp.setup.logo" },
+	);
+}
+
 /** Multi-stop palette for the diagonal gradient. */
 const GRADIENT_STOPS: ReadonlyArray<readonly [number, number, number]> = [
 	[248, 79, 204], // oklch(0.7 0.24 340)
@@ -637,7 +841,10 @@ function introLogoFrame(progress: number): string[] {
 	const phase = ((((1 - eased) * INTRO_SWEEPS) % 1) + 1) % 1;
 	const shinePos = (((progress * INTRO_SHINE_TRAVERSALS) % 1) + 1) % 1;
 	const shineStrength = (1 - eased) ** 1.5;
-	return gradientLogo(PI_LOGO, phase, { strength: shineStrength, pos: shinePos });
+	return gradientLogo(PI_LOGO, phase, {
+		strength: shineStrength,
+		pos: shinePos,
+	});
 }
 
 /** Resting gradient frame, cached for re-renders outside of the intro. */

package/src/render/code-cell.ts

@@ -1,11 +1,25 @@
 /**
  * Render a code or markdown cell with optional output section.
  */
+import type { TspSpan } from "@oh-my-pi/pi-wire";
 import { Markdown } from "../components/markdown";
+import { styledSpans } from "../native/spans";
+import { code, md, span } from "../native/describe";
+import type { NativeNode } from "../native/node";
 import { getMarkdownTheme, highlightCode, type Theme } from "../theme/theme";
 import { formatDuration, formatExpandHint, formatMoreItems, formatStatusIcon, replaceTabs } from "./render-utils";
-import { outputBlockContentWidth, renderOutputBlock } from "./output-block";
-import { formatOutputPaneLines, splitTerminalOutputLines, styleToolOutputLine } from "./output-pane";
+import {
+	describeOutputBlock,
+	type NativeOutputBlockSection,
+	outputBlockContentWidth,
+	renderOutputBlock,
+} from "./output-block";
+import {
+	describeOutputLines,
+	formatOutputPaneLines,
+	splitTerminalOutputLines,
+	styleToolOutputLine,
+} from "./output-pane";
 import type { State } from "./types";
 
 /** Content and display limits for a code preview with optional output. */
@@ -188,6 +202,93 @@ export function renderCodeCell(options: CodeCellOptions, theme: Theme): string[]
 	return renderOutputBlock({ header: title, headerMeta: meta, state, sections, width }, theme);
 }
 
+type CellHeaderOptions = Pick<CodeCellOptions, "index" | "total" | "title" | "duration" | "language" | "showLanguage">;
+
+/** Header spans for a native cell: language icon, `[i/n]`, title. Status is the card's chip. */
+function describeHeader(options: CellHeaderOptions, theme: Theme): { head: TspSpan[]; meta?: TspSpan[] } {
+	const head: TspSpan[] = [];
+	const push = (part: readonly TspSpan[]): void => {
+		if (head.length > 0) head.push(span(" "));
+		head.push(...part);
+	};
+	if (options.showLanguage && options.language) {
+		const icon = theme.getLangIconStyled(options.language);
+		if (icon) push(styledSpans(icon));
+	}
+	if (options.index !== undefined && options.total !== undefined && options.total > 1) {
+		push([span(`[${options.index + 1}/${options.total}]`, "accent")]);
+	}
+	if (options.title) push([span(options.title, "toolTitle")]);
+	if (head.length === 0) head.push(span("Code", "toolTitle"));
+	return {
+		head,
+		meta: options.duration === undefined ? undefined : [span(formatDuration(options.duration), "dim")],
+	};
+}
+
+function describeCellOutput(
+	output: string | undefined,
+	expanded: boolean,
+	outputMaxLines: number,
+): NativeOutputBlockSection | undefined {
+	if (!output?.trim()) return undefined;
+	return {
+		label: [span("Output", "toolTitle")],
+		key: "output",
+		body: [describeOutputLines(splitTerminalOutputLines(output), { expanded, collapsedMaxLines: outputMaxLines })],
+	};
+}
+
+/**
+ * The native form of {@link renderCodeCell}: a collapsible `card` holding a
+ * `code` node (numbered from `codeStartLine`, or the first explicit line
+ * number) and an `ansi` output section. The collapsed code clamp is the
+ * card preview; highlighting and gutters are the terminal's.
+ */
+export function describeCodeCell(options: Omit<CodeCellOptions, "width">, theme: Theme): NativeNode {
+	const { expanded = false, outputMaxLines = 6, codeMaxLines = 12 } = options;
+	const { head, meta } = describeHeader(options, theme);
+	const start = options.codeStartLine ?? options.codeLineNumbers?.find((line): line is number => line != null);
+	const sections: NativeOutputBlockSection[] = [
+		{
+			key: "code",
+			body: [code(options.code ?? "", { lang: options.language, start, numbers: start !== undefined || undefined })],
+		},
+	];
+	const output = describeCellOutput(options.output, expanded, outputMaxLines);
+	if (output) sections.push(output);
+	return describeOutputBlock({
+		head,
+		meta,
+		state: getState(options.status),
+		role: "omp.cell.code",
+		sections,
+		collapsible: true,
+		collapsed: !expanded,
+		preview: { lines: codeMaxLines },
+	});
+}
+
+/** The native form of {@link renderMarkdownCell}: a collapsible `card` holding `md` source and optional output. */
+export function describeMarkdownCell(options: Omit<MarkdownCellOptions, "width">, theme: Theme): NativeNode {
+	const { expanded = false, outputMaxLines = 6, contentMaxLines = 12 } = options;
+	const { head, meta } = describeHeader(options, theme);
+	const sections: NativeOutputBlockSection[] = [];
+	if (options.content.trim()) sections.push({ key: "content", body: [md(options.content)] });
+	const output = describeCellOutput(options.output, expanded, outputMaxLines);
+	if (output) sections.push(output);
+	return describeOutputBlock({
+		head,
+		meta,
+		state: getState(options.status),
+		role: "omp.cell.markdown",
+		sections,
+		collapsible: true,
+		collapsed: !expanded,
+		preview: { lines: contentMaxLines },
+	});
+}
+
 /** Content and display limits for a Markdown preview with optional output. */
 export interface MarkdownCellOptions {
 	content: string;

package/src/render/file-list.ts

@@ -2,7 +2,10 @@
  * Render file listings with optional icons and metadata.
  */
 import { getLanguageFromPath } from "../lang-from-path";
+import { node, span } from "../native/describe";
+import type { NativeNode } from "../native/node";
 import type { Theme } from "../theme/theme";
+import { fileLinkSpan } from "./hyperlink";
 import { renderTreeList } from "./tree-list";
 
 /** A file-list item with optional display metadata. */
@@ -26,6 +29,32 @@ export interface FileListOptions {
 	hyperlinkFn?: (absPath: string, displayText: string) => string;
 }
 
+/**
+ * The native form of {@link renderFileList}: a `list` of path `item`s keyed
+ * by path, linked to their absolute path, with language/folder icons and the
+ * meta as detail. Collapsed, the list is clamped to `maxCollapsed` lines and
+ * the terminal scrolls the rest.
+ */
+export function describeFileList(options: Omit<FileListOptions, "hyperlinkFn">): NativeNode {
+	const { files, expanded = false, maxCollapsed = 8, showIcons = true } = options;
+	const items = files.map(entry => {
+		const isDirectory = entry.isDirectory ?? entry.path.endsWith("/");
+		const s = isDirectory ? "path accent" : "path";
+		const label = entry.absPath ? fileLinkSpan(entry.absPath, entry.path, s) : span(entry.path, s);
+		return node(
+			"item",
+			{
+				label: [label],
+				icon: showIcons ? (isDirectory ? "folder" : (getLanguageFromPath(entry.path) ?? "file")) : undefined,
+				detail: entry.meta ? [span(entry.meta, "dim")] : undefined,
+			},
+			undefined,
+			entry.path,
+		);
+	});
+	return node("list", { max: expanded ? undefined : { lines: maxCollapsed } }, items);
+}
+
 /** Render file entries as a themed tree listing. */
 export function renderFileList(options: FileListOptions, theme: Theme): string[] {
 	const { files, expanded = false, maxCollapsed = 8, showIcons = true, hyperlinkFn } = options;

package/src/render/hyperlink.ts

@@ -6,6 +6,8 @@
  * permits it. Falls back to plain text when disabled.
  */
 import * as url from "node:url";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
+import { span } from "../native/describe";
 import { setTerminalHyperlinks, TERMINAL, type TerminalId } from "../terminal-capabilities";
 
 const OSC = "\x1b]";
@@ -175,6 +177,36 @@ export function urlHyperlinkAlways(url: string, displayText: string): string {
 	}
 }
 
+/**
+ * A native link span to an HTTP(S) URL (`www.` inputs become `https://`).
+ * Unlike the OSC 8 wrappers this ignores terminal capability detection — a
+ * TSP terminal always handles `href` — but honours an explicit `off` policy.
+ * Non-HTTP(S) or unparsable URLs yield a plain span.
+ */
+export function urlLinkSpan(target: string, displayText: string, s = "link"): TspSpan {
+	if (hyperlinkMode === "off") return span(displayText, s);
+	const normalized = target.match(/^www\./i) ? `https://${target}` : target;
+	try {
+		const parsed = new URL(normalized);
+		if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return span(displayText, s);
+		const href = safeHyperlinkUri(parsed.href);
+		return href ? span(displayText, s, { href }) : span(displayText, s);
+	} catch {
+		return span(displayText, s);
+	}
+}
+
+/**
+ * A native link span to a filesystem path as a plain `file://` URI (the
+ * terminal opens it through the system; the location stays in the visible
+ * text). Honours an explicit `off` policy.
+ */
+export function fileLinkSpan(filePath: string, displayText: string, s = "path"): TspSpan {
+	if (hyperlinkMode === "off") return span(displayText, s);
+	const href = safeHyperlinkUri(url.pathToFileURL(filePath).href);
+	return href ? span(displayText, s, { href }) : span(displayText, s);
+}
+
 /**
  * Wrap `displayText` in an OSC 8 hyperlink pointing at a filesystem path.
  *

package/src/render/output-block.ts

@@ -1,6 +1,9 @@
 /**
  * Bordered output container with optional header and sections.
  */
+import type { TspCardStatus, TspPreview, TspSpan, TspText, TspTone } from "@oh-my-pi/pi-wire";
+import { node, span } from "../native/describe";
+import type { NativeChild, NativeNode } from "../native/node";
 import { ImageProtocol, TERMINAL } from "../terminal-capabilities";
 import type { Theme, ThemeColor } from "../theme/theme";
 import type { Component } from "../tui";
@@ -206,6 +209,113 @@ export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): st
 	return lines;
 }
 
+/** Card tone for an output state. */
+export function outputStateTone(state: State | undefined): TspTone {
+	switch (state) {
+		case "pending":
+		case "running":
+			return "pending";
+		case "success":
+			return "success";
+		case "error":
+			return "error";
+		case "warning":
+			return "warning";
+		default:
+			return "neutral";
+	}
+}
+
+/** Card status chip for an output state. */
+export function outputStateStatus(state: State | undefined): TspCardStatus | undefined {
+	switch (state) {
+		case "pending":
+			return "pending";
+		case "running":
+			return "running";
+		case "success":
+		case "warning":
+			return "done";
+		case "error":
+			return "error";
+		default:
+			return undefined;
+	}
+}
+
+/** One body section of a native output block. */
+export interface NativeOutputBlockSection {
+	/** Titled sub-section (the ANSI path's labelled separator bar). */
+	label?: TspText;
+	body: readonly NativeChild[];
+	/** Divide from the previous section with a rule. */
+	separator?: boolean;
+	/** Stable identity when sections come and go. */
+	key?: string;
+}
+
+/** Semantic inputs for {@link describeOutputBlock}. */
+export interface NativeOutputBlockOptions {
+	head?: TspText;
+	meta?: TspText;
+	state?: State;
+	/** Card role (`omp.tool.bash`, `omp.eval.cell`, …). Defaults to `omp.output`. */
+	role?: string;
+	/** Override the state-derived tone (the ANSI path's `borderColor`). */
+	tone?: TspTone;
+	sections?: readonly NativeOutputBlockSection[];
+	collapsible?: boolean;
+	collapsed?: boolean;
+	preview?: TspPreview;
+	/** Flat card without a ring (inline/plain variants). */
+	inset?: boolean;
+	key?: string;
+}
+
+function asSpans(content: TspText): readonly TspSpan[] {
+	return typeof content === "string" ? [span(content)] : content;
+}
+
+/**
+ * The native form of {@link renderOutputBlock}: a `card` whose tone and
+ * status chip come from the state, head from the header plus meta, and body
+ * from the sections (labelled ones as `section`s, separators as `rule`s).
+ * Borders, background fills and wrapping are the terminal's.
+ */
+export function describeOutputBlock(options: NativeOutputBlockOptions): NativeNode {
+	let head: TspText | undefined = options.head;
+	if (options.meta !== undefined && options.meta !== "") {
+		head = head === undefined ? options.meta : [...asSpans(head), span(" · ", "dim"), ...asSpans(options.meta)];
+	}
+	const children: NativeChild[] = [];
+	const sections = options.sections ?? [];
+	for (let index = 0; index < sections.length; index++) {
+		const section = sections[index]!;
+		const key = section.key ?? String(index);
+		if (section.label !== undefined) {
+			children.push(node("section", { head: section.label }, section.body, key));
+			continue;
+		}
+		if (section.separator && index > 0) children.push(node("rule", undefined, undefined, `${key}:rule`));
+		for (const child of section.body) children.push(child);
+	}
+	return node(
+		"card",
+		{
+			role: options.role ?? "omp.output",
+			tone: options.tone ?? outputStateTone(options.state),
+			status: outputStateStatus(options.state),
+			head,
+			collapsible: options.collapsible,
+			collapsed: options.collapsed,
+			preview: options.preview,
+			inset: options.inset,
+		},
+		children,
+		options.key,
+	);
+}
+
 /**
  * Cached wrapper around `renderOutputBlock`.
  *

package/src/render/output-pane.ts

@@ -1,4 +1,6 @@
 import { Text } from "../components/text";
+import { ansi } from "../native/describe";
+import type { DescribeContext, NativeNode } from "../native/node";
 import { ImageProtocol, TERMINAL } from "../terminal-capabilities";
 import type { Theme } from "../theme/theme";
 import type { Component } from "../tui";
@@ -114,6 +116,28 @@ export function formatOutputPaneLines(options: OutputPaneFormatOptions, theme: T
 	return { lines, hiddenCount, hasSixel };
 }
 
+/** Display policy for {@link describeOutputLines}. */
+export interface NativeOutputOptions {
+	expanded: boolean;
+	collapsedMaxLines: number;
+	expandedMaxLines?: number;
+	edge?: OutputPaneEdge;
+	key?: string;
+}
+
+/**
+ * Raw output rows as a native `ansi` mini-terminal: the terminal wraps and
+ * styles them. The row cap becomes a `preview` clamp (with its own "N more"
+ * affordance); a tail edge follows the stream.
+ */
+export function describeOutputLines(lines: readonly string[], options: NativeOutputOptions): NativeNode {
+	const limit = options.expanded ? options.expandedMaxLines : options.collapsedMaxLines;
+	const preview =
+		limit !== undefined && Number.isFinite(limit) ? { lines: Math.max(0, Math.floor(limit)) } : undefined;
+	const described = ansi(lines.join("\n"), { follow: options.edge === "tail" ? true : undefined, preview });
+	return options.key === undefined ? described : { ...described, key: options.key };
+}
+
 /** Mutable options for a live {@link OutputPane}. */
 export interface OutputPaneOptions extends Omit<OutputPaneFormatOptions, "lines"> {
 	paddingX?: number;
@@ -135,6 +159,7 @@ export class OutputPane implements Component {
 	#pendingCarriageReturn = false;
 	#text: Text;
 	#renderKey = "";
+	#native: NativeNode | undefined;
 
 	constructor(theme: Theme, options: OutputPaneOptions, text = "") {
 		this.#theme = theme;
@@ -240,6 +265,17 @@ export class OutputPane implements Component {
 		return this.#lines.join("\n");
 	}
 
+	/** The retained rows as an `ansi` node; streamed appends grow its text, so the reconciler sends `text append`. */
+	describe(_cx: DescribeContext): NativeNode {
+		this.#native ??= describeOutputLines(this.#lines, {
+			expanded: this.#options.expanded,
+			collapsedMaxLines: this.#options.collapsedMaxLines,
+			expandedMaxLines: this.#options.expandedMaxLines,
+			edge: this.#options.edge,
+		});
+		return this.#native;
+	}
+
 	render(width: number): readonly string[] {
 		const paddingX = getPaddingX(this.#options.paddingX ?? 0);
 		const contentWidth = Math.max(1, width - paddingX * 2);
@@ -262,6 +298,7 @@ export class OutputPane implements Component {
 
 	invalidate(): void {
 		this.#renderKey = "";
+		this.#native = undefined;
 		this.#text.invalidate();
 	}