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

package/src/chat/ttsr-notification.ts

@@ -1,8 +1,14 @@
 import { Text } from "../components/text";
 import { type Component, Container } from "../tui";
-import { MessageNoticeComponent, type MessageNoticePresentation } from "../chrome/message-notice";
+import {
+	MessageNoticeComponent,
+	type MessageNoticeNativePresentation,
+	type MessageNoticePresentation,
+} from "../chrome/message-notice";
 import { theme } from "../theme";
 import { expandKeyHint } from "../render/render-utils";
+import { span, text } from "../native/describe";
+import type { NativeNode } from "../native/node";
 
 /** Rule fields shown in rewind notifications. */
 export interface NotificationRule {
@@ -30,6 +36,8 @@ export class TtsrNotificationComponent extends Container {
 		this.#rules = [...rules];
 		this.#notice = new MessageNoticeComponent({
 			presentation: context => this.#presentation(context.expanded),
+			nativePresentation: () => this.#nativePresentation(),
+			role: "omp.notice.ttsr",
 		});
 		this.addChild(this.#notice);
 	}
@@ -57,6 +65,35 @@ export class TtsrNotificationComponent extends Container {
 		return this.#notice.isExpanded();
 	}
 
+	/**
+	 * An inline warning notice, "Rule applied: no-unwrap", with every rule's
+	 * full description as the disclosure below it.
+	 */
+	#nativePresentation(): MessageNoticeNativePresentation {
+		const single = this.#rules.length === 1 ? this.#rules[0] : undefined;
+		const head = single
+			? [span("Rule applied: ", "warning"), span(single.name, "mono strong")]
+			: [
+					span(`${this.#rules.length} rules applied: `, "warning"),
+					span(this.#rules.map(rule => rule.name).join(", "), "mono strong"),
+				];
+		const body: NativeNode[] = [];
+		for (const rule of this.#rules) {
+			const desc = (rule.description || rule.content)?.trim();
+			if (single) {
+				if (desc) body.push(text([span(desc, "em")], { wrap: "word", key: rule.name }));
+				continue;
+			}
+			body.push(
+				text(desc ? [span(rule.name, "strong"), span(": "), span(desc, "em")] : [span(rule.name, "strong")], {
+					wrap: "word",
+					key: rule.name,
+				}),
+			);
+		}
+		return { head, body, inline: { icon: "shield-alert" } };
+	}
+
 	#presentation(expanded: boolean): MessageNoticePresentation {
 		// fg colors conflict with inverse, so styling inside the block is limited
 		// to bold (names) and italic (descriptions).

package/src/chat/user-message.ts

@@ -3,6 +3,8 @@ import { type Component, Container } from "../tui";
 import { Disclosure } from "../components/disclosure";
 import { Markdown } from "../components/markdown";
 import { formatBytes } from "@oh-my-pi/pi-utils";
+import type { ImageContent } from "@oh-my-pi/pi-ai";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
 import { ensureThemeSync, getMarkdownTheme, theme } from "../theme";
 import {
 	attachmentSgr,
@@ -19,6 +21,11 @@ import { expandKeyHint, fileHyperlink } from "../render";
 import { imageReferenceHyperlink } from "../prompt/image-references";
 import { highlightMagicKeywords } from "../prompt/magic-keywords";
 import type { ReactionTarget } from "./reaction";
+import { card, md, node, row, span, text } from "../native/describe";
+import { base64ImageNode } from "../native/blobs";
+import { hasTranscriptActions, runTranscriptAction } from "./transcript-actions";
+import { type NativeChild, type NativeNode, type NativeUiEvent, rootToggleExpanded } from "../native/node";
+import { Memo } from "../native/memo";
 
 // OSC 133 shell integration: marks prompt zones for terminal multiplexers.
 //
@@ -46,12 +53,16 @@ const OSC133_ZONE_CLOSE = OSC133_ZONE_END + OSC133_COMMAND_START + OSC133_COMMAN
 export interface UserBubbleOptions {
 	/** Materialized `file://` targets per attached image, indexed by chip number. */
 	imageLinks?: readonly (string | undefined)[];
+	/** The message's attached images in chip order (`#1` first); a native bubble shows them. */
+	images?: readonly ImageContent[];
 	/** Agent-attributed input: dim, flat prose. */
 	synthetic?: boolean;
 	/** Delivered into the response that was streaming; marked `*` at the bubble's top-left. */
 	liveSteered?: boolean;
 	/** SKILL.md path for a skill chip by name; `undefined` leaves the chip unlinked. */
 	skillPath?: (name: string) => string | undefined;
+	/** When the message was sent (ms); shown beside the native hover toolbar. */
+	timestamp?: number;
 }
 
 /**
@@ -116,7 +127,16 @@ export class UserMessageComponent extends Container implements ReactionTarget {
 	#zoneLines: string[] | undefined;
 	readonly #bgColor: (value: string) => string;
 	readonly #liveSteered: boolean;
+	readonly #synthetic: boolean;
+	readonly #timestamp: number | undefined;
+	readonly #images: readonly ImageContent[];
+	readonly #imageLinks: readonly (string | undefined)[] | undefined;
+	/** Display text: image markers collapsed to chips and model mentions to their labels. */
+	readonly #text: string;
+	/** Matches the composer tokens in {@link #text} (chips, skills, this message's mentions). */
+	readonly #tokens: RegExp;
 	#reaction: string | undefined;
+	#native: NativeNode | undefined;
 
 	constructor(text: string, options: UserBubbleOptions = {}) {
 		super();
@@ -135,18 +155,107 @@ export class UserMessageComponent extends Container implements ReactionTarget {
 		const bgColor = (value: string) => theme.bg("userMessageBg", value);
 		this.#bgColor = bgColor;
 		this.#liveSteered = options.liveSteered === true;
-		const md = new Markdown(text, 1, 1, getMarkdownTheme(), {
+		this.#synthetic = options.synthetic === true;
+		this.#timestamp = options.timestamp;
+		this.#images = options.images ?? [];
+		this.#imageLinks = options.imageLinks;
+		this.#text = text;
+		this.#tokens = composerTokenRegex(mentionLabels);
+		const markdown = new Markdown(text, 1, 1, getMarkdownTheme(), {
 			bgColor,
-			color: userBubbleColor(options, composerTokenRegex(mentionLabels)),
+			color: userBubbleColor(options, this.#tokens),
 		});
-		md.setIgnoreTight(true);
-		this.addChild(md);
+		markdown.setIgnoreTight(true);
+		this.addChild(markdown);
 	}
 
 	setReaction(emoji: string): void {
 		if (this.#reaction === emoji) return;
 		this.#reaction = emoji;
 		this.#zoneLines = undefined;
+		this.#native = undefined;
+	}
+
+	/**
+	 * A head-less user-toned frame with the prompt as markdown under its
+	 * attached images (titled `#N` like their chips, opening the materialized
+	 * file on click): the fill says "you". A quiet toolbar (time, Copy, Rewind) fades in on hover when the
+	 * host handles transcript actions. The live-steering marker and the
+	 * agent's reaction are chips at the bottom-right, so a reaction landing
+	 * later updates the frame in place, even deep in scrollback.
+	 */
+	override describe(): NativeNode {
+		if (this.#native) return this.#native;
+		const children: NativeChild[] = [];
+		if (!this.#synthetic && hasTranscriptActions()) {
+			const tools: NativeChild[] = [];
+			if (this.#timestamp !== undefined) {
+				const at = new Date(this.#timestamp);
+				tools.push(
+					text([span(at.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), "dim mono")], {
+						role: "omp.user.time",
+						title: at.toLocaleString(),
+					}),
+				);
+			}
+			tools.push(
+				// `copy-message`, not Tern's local `copy` (that would copy the label).
+				text("Copy", {
+					role: "omp.user.tool",
+					actions: { click: "copy-message" },
+					title: "Copy message",
+					key: "copy",
+				}),
+				text("Rewind", {
+					role: "omp.user.tool",
+					actions: { click: "rewind" },
+					title: "Rewind the conversation to an earlier message",
+					key: "rewind",
+				}),
+			);
+			children.push(node("row", { gap: "xs", role: "omp.user.tools" }, tools, "tools"));
+		}
+		// Videos keep their chip only: the native image node decodes stills.
+		const thumbs: NativeNode[] = [];
+		if (!this.#synthetic) {
+			this.#images.forEach((image, i) => {
+				if (!image.mimeType.startsWith("image/")) return;
+				const label = `#${i + 1}`;
+				const link = this.#imageLinks?.[i];
+				const open = link ? { href: link, actions: { click: "open" } } : {};
+				thumbs.push(base64ImageNode(image.data, image.mimeType, { alt: label, title: label, ...open }, label));
+			});
+		}
+		if (thumbs.length > 0) {
+			children.push(row(thumbs, { gap: "sm", wrap: true, align: "start", role: "omp.user.images" }));
+		}
+		const marks = this.#synthetic ? [] : tokenMarks(this.#text, this.#tokens);
+		children.push(md(this.#text, marks.length > 0 ? { marks } : undefined));
+		const badges: NativeChild[] = [];
+		if (this.#liveSteered) {
+			badges.push(
+				node("badge", {
+					text: "steered",
+					tone: "accent",
+					title: "Delivered into the response that was streaming",
+				}),
+			);
+		}
+		if (this.#reaction !== undefined) badges.push(node("badge", { text: this.#reaction, role: "omp.reaction" }));
+		if (badges.length > 0)
+			children.push(node("row", { gap: "xs", justify: "end", role: "omp.user.badges" }, badges, "badges"));
+		this.#native = card(
+			{ role: this.#synthetic ? "omp.user.synthetic" : "omp.user", tone: this.#synthetic ? "muted" : "user" },
+			children,
+		);
+		return this.#native;
+	}
+
+	/** Hover toolbar clicks: omp's own copy and rewind commands. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type !== "action") return;
+		if (event.act === "copy-message") runTranscriptAction({ act: "copy", text: this.#text });
+		else if (event.act === "rewind") runTranscriptAction({ act: "rewind" });
 	}
 
 	/**
@@ -178,6 +287,31 @@ export class UserMessageComponent extends Container implements ReactionTarget {
 	}
 }
 
+/**
+ * The composer tokens in `text` as `md` marks, styled as the composer
+ * decorates them (`CustomEditor.describeDecorations`), so a sent prompt keeps
+ * its chips highlighted.
+ */
+function tokenMarks(text: string, tokens: RegExp): TspSpan[] {
+	// One mark per distinct token: Tern styles every occurrence of its text.
+	const styles = new Map<string, string>();
+	const mark = (s: string) => (label: string) => {
+		styles.set(label, s);
+		return "";
+	};
+	renderPlaceholders(
+		text,
+		{
+			renderText: () => "",
+			renderSkill: mark("customMessageLabel strong"),
+			renderMention: mark("statusLineModel strong"),
+			renderReference: mark("accent strong"),
+		},
+		tokens,
+	);
+	return [...styles].map(([t, s]) => ({ t, s }));
+}
+
 /**
  * Always-visible dim summary row for a collapsed synthetic input. Kept as a
  * small domain renderer so the width-truncated label never pays Markdown
@@ -220,6 +354,8 @@ class SyntheticSummary implements Component {
  */
 export class CollapsedSyntheticMessageComponent implements Component {
 	#disclosure: Disclosure;
+	#expanded = false;
+	readonly #native = new Memo();
 
 	readonly #text: string;
 	readonly #imageLinks?: readonly (string | undefined)[];
@@ -238,9 +374,36 @@ export class CollapsedSyntheticMessageComponent implements Component {
 
 	/** ctrl+o toggle: reveal/hide the full Markdown body. */
 	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
 		this.#disclosure.setExpanded(expanded);
 	}
 
+	/**
+	 * A muted collapsible card whose head is the one-line summary. The
+	 * (potentially huge) markdown body is only described while expanded, so
+	 * collapsed history costs no layout on either side; a native toggle
+	 * expands it through {@link handleNativeEvent}.
+	 */
+	describe(): NativeNode {
+		return this.#native.get([this.#expanded], () =>
+			card(
+				{
+					role: "omp.user.synthetic",
+					tone: "muted",
+					head: [span(summarizeSyntheticInput(this.#text), "dim")],
+					collapsible: true,
+					collapsed: !this.#expanded,
+				},
+				this.#expanded ? [md(this.#text)] : [],
+			),
+		);
+	}
+
+	handleNativeEvent(event: NativeUiEvent): void {
+		const expanded = rootToggleExpanded(event);
+		if (expanded !== undefined) this.setExpanded(expanded);
+	}
+
 	setIgnoreTight(ignore: boolean): this {
 		this.#disclosure.setIgnoreTight(ignore);
 		return this;

package/src/chrome/collab-qrcode.ts

@@ -3,7 +3,9 @@ import { Ellipsis, truncateToWidth, visibleWidth } from "../utils";
 import type { AnimationFrame, TranscriptPresentationTarget } from "./transcript-container";
 import { fgOrPlain } from "../theme/theme";
 import { urlHyperlinkAlways } from "../render/index";
-import { QrCode, renderQrHalfBlocks } from "./qrcode";
+import { QrCode, renderQrHalfBlocks, renderQrText } from "./qrcode";
+import type { DescribeContext, NativeNode } from "../native/node";
+import { code, col, text } from "../native/describe";
 
 /** Scheme-less display form of a collab browser deep link, OSC-8 linked. */
 export function collabBrowserLink(webLink: string, label?: string): string {
@@ -30,12 +32,16 @@ export function collabBrowserLink(webLink: string, label?: string): string {
  * URL above" is not reachable.
  */
 export class CollabQrCodeComponent implements Component, TranscriptPresentationTarget {
+	readonly #qr: QrCode;
 	readonly #lines: readonly string[];
 	readonly #minWidth: number;
 	#allocatedRows = Number.POSITIVE_INFINITY;
+	/** Native description per appearance: the polarity follows the terminal's foreground. */
+	#native: { dark: boolean; node: NativeNode } | undefined;
 
 	constructor(readonly url: string) {
-		const rows = renderQrHalfBlocks(QrCode.encodeText(url, "M"));
+		this.#qr = QrCode.encodeText(url, "M");
+		const rows = renderQrHalfBlocks(this.#qr);
 		this.#lines = rows.map(row => ` ${row}`);
 		this.#minWidth = rows.reduce((max, row) => Math.max(max, visibleWidth(row)), 0) + 1;
 	}
@@ -54,6 +60,25 @@ export class CollabQrCodeComponent implements Component, TranscriptPresentationT
 		return this.#lines;
 	}
 
+	/**
+	 * The symbol as an unwrapped monospace block plus the join link. Glyphs are
+	 * drawn in the terminal's foreground, so on a dark appearance the light
+	 * modules are inked to keep the dark-on-light symbol scanners expect.
+	 */
+	describe(cx: DescribeContext): NativeNode {
+		if (this.#native?.dark === cx.dark) return this.#native.node;
+		const qr = renderQrText(this.#qr, cx.dark).join("\n");
+		const node = col(
+			[
+				text([{ t: this.url.replace(/^https?:\/\//, ""), s: "accent link", href: this.url }], { wrap: "none" }),
+				code(qr, { lang: "text", wrap: false }),
+			],
+			{ role: "omp.collab.qrcode" },
+		);
+		this.#native = { dark: cx.dark, node };
+		return node;
+	}
+
 	/** Survives emergency 1-row transcript pressure when this block is otherwise hidden. */
 	renderTranscriptBlockEmergencyRow(width: number): string {
 		return this.#hiddenHint(

package/src/chrome/context-thresholds.ts

@@ -1,4 +1,5 @@
 import { formatNumber } from "@oh-my-pi/pi-utils";
+import type { TspTone } from "@oh-my-pi/pi-wire";
 import type { ThemeColor } from "../theme/index";
 export type ContextUsageLevel = "normal" | "warning" | "purple" | "error";
 
@@ -54,6 +55,26 @@ export function getContextUsageLevel(contextPercent: number, contextWindow: numb
 	return "normal";
 }
 
+/** Used share (0–1) where a level starts: the percent or token threshold, whichever comes first. */
+function thresholdShare(contextWindow: number, percentThreshold: number, tokenThreshold: number): number {
+	const percent =
+		Number.isFinite(contextWindow) && contextWindow > 0
+			? Math.min(percentThreshold, (tokenThreshold / contextWindow) * 100)
+			: percentThreshold;
+	return percent / 100;
+}
+
+/**
+ * `meter` tone switches matching {@link getContextUsageLevel}: warning from the
+ * warning level, error from the error level, as shares of `contextWindow`.
+ */
+export function getContextMeterThresholds(contextWindow: number): { warn: number; bad: number } {
+	return {
+		warn: thresholdShare(contextWindow, CONTEXT_WARNING_PERCENT_THRESHOLD, CONTEXT_WARNING_TOKEN_THRESHOLD),
+		bad: thresholdShare(contextWindow, CONTEXT_ERROR_PERCENT_THRESHOLD, CONTEXT_ERROR_TOKEN_THRESHOLD),
+	};
+}
+
 /**
  * Format context usage as `<percent>%/<window>` when the model window is known.
  * Unknown windows render as `<tokens>/?`, because `0.0%/0` suggests a real
@@ -71,6 +92,19 @@ export function formatContextUsage(
 	return `${pct}/${formatNumber(contextWindow)}`;
 }
 
+/** Chrome tone for a context-usage level; undefined while usage is normal. */
+export function getContextUsageTone(level: ContextUsageLevel): TspTone | undefined {
+	switch (level) {
+		case "error":
+			return "error";
+		case "purple":
+		case "warning":
+			return "warning";
+		case "normal":
+			return undefined;
+	}
+}
+
 export function getContextUsageThemeColor(level: ContextUsageLevel): ThemeColor {
 	switch (level) {
 		case "error":

package/src/chrome/countdown-timer.ts

@@ -1,12 +1,16 @@
 /**
  * Reusable countdown timer for dialog components.
  */
+import { node } from "../native/describe";
+import type { NativeNode } from "../native/node";
+import { isNativeRendering } from "../native/state";
 import type { TUI } from "../tui";
 export class CountdownTimer {
 	#intervalId: NodeJS.Timeout | undefined;
 	#expireTimeoutId: NodeJS.Timeout | undefined;
 	#remainingSeconds: number;
 	#deadlineMs = 0;
+	#node: NativeNode | undefined;
 	readonly #initialMs: number;
 
 	constructor(
@@ -28,6 +32,7 @@ export class CountdownTimer {
 	#start(): void {
 		const now = Date.now();
 		this.#deadlineMs = now + this.#initialMs;
+		this.#node = undefined;
 		this.#remainingSeconds = this.#calculateRemainingSeconds(now);
 		this.onTick(this.#remainingSeconds);
 		this.tui?.requestRender();
@@ -37,7 +42,25 @@ export class CountdownTimer {
 			this.onExpire();
 		}, this.#initialMs);
 
-		this.#startInterval();
+		// The per-second tick only repaints the remaining time; a TSP terminal
+		// counts down the described `elapsed` node itself.
+		if (!isNativeRendering()) this.#startInterval();
+	}
+
+	/**
+	 * The remaining time as a terminal-clocked `elapsed` node: its age is the
+	 * negative remaining time (the start lies in the future), so it counts up
+	 * toward zero and freezes there at expiry. The age is taken on the first
+	 * call after a (re)start, when the node is first written, and the node is
+	 * reused until {@link reset}.
+	 */
+	describe(): NativeNode {
+		this.#node ??= node("elapsed", {
+			age: Math.min(0, Date.now() - this.#deadlineMs),
+			stopped: 0,
+			format: "short",
+		});
+		return this.#node;
 	}
 
 	#startInterval(): void {

package/src/chrome/diff.ts

@@ -1,7 +1,10 @@
 import { diffWords } from "@oh-my-pi/pi-natives";
 import { DEFAULT_TAB_WIDTH, sanitizeText } from "@oh-my-pi/pi-utils";
+import type { TspDiffHunk, TspProps } from "@oh-my-pi/pi-wire";
 import { theme as activeTheme, getLanguageFromPath, highlightCode, type Theme } from "../theme/index";
-import { type CodeFrameMarker, formatCodeFrameLine, replaceTabs } from "../render/render-utils";
+import { type CodeFrameMarker, formatCodeFrameLine, replaceTabs, shortenPath } from "../render/render-utils";
+import { node } from "../native/describe";
+import type { NativeNode } from "../native/node";
 /** SGR dim on / normal intensity — additive, preserves fg/bg colors. */
 const DIM = "\x1b[2m";
 const DIM_OFF = "\x1b[22m";
@@ -97,6 +100,62 @@ function renderIntraLineDiff(
 	return { removedLine, addedLine };
 }
 
+/**
+ * Native `diff` node for omp's compact diff text (`+12|added`, `-12|removed`,
+ * ` 12|context`, blank or `…` rows between regions). Each contiguous region
+ * becomes one hunk; the terminal draws gutters, word emphasis and highlighting.
+ * Removed rows carry old line numbers, added rows new ones and context rows
+ * old ones, so the other side is derived from the running line delta.
+ */
+export function nativeDiff(diffText: string, options: { filePath?: string } & TspProps<"diff"> = {}): NativeNode {
+	const { filePath, ...props } = options;
+	const hunks: TspDiffHunk[] = [];
+	let lines: string[] = [];
+	let oldStart = 0;
+	let newStart = 0;
+	// New-minus-old line offset accumulated over the regions already closed.
+	let delta = 0;
+	let regionDelta = 0;
+	let nextOld = 1;
+	const close = (): void => {
+		if (lines.length > 0) hunks.push({ oldStart, newStart, lines });
+		lines = [];
+		delta += regionDelta;
+		regionDelta = 0;
+	};
+	for (const raw of sanitizeText(diffText).split("\n")) {
+		const parsed = parseDiffLine(raw);
+		const trimmed = raw.trim();
+		if (!parsed || (parsed.prefix === " " && (parsed.content === "..." || parsed.content === "…"))) {
+			if (trimmed.length === 0 || trimmed === "..." || trimmed === "…") close();
+			continue;
+		}
+		const number = Number.parseInt(parsed.lineNum.trim(), 10);
+		if (lines.length === 0) {
+			if (Number.isFinite(number)) {
+				oldStart = parsed.prefix === "+" ? number - delta : number;
+				newStart = parsed.prefix === "+" ? number : number + delta;
+			} else {
+				oldStart = nextOld;
+				newStart = nextOld + delta;
+			}
+		}
+		if (parsed.prefix === "+") regionDelta++;
+		else {
+			if (parsed.prefix === "-") regionDelta--;
+			nextOld = (Number.isFinite(number) ? number : nextOld) + 1;
+		}
+		lines.push(`${parsed.prefix}${parsed.content}`);
+	}
+	close();
+	return node("diff", {
+		...props,
+		hunks,
+		path: props.path ?? (filePath ? shortenPath(filePath) : undefined),
+		lang: props.lang ?? (filePath ? getLanguageFromPath(filePath) : undefined),
+	});
+}
+
 export interface RenderDiffOptions {
 	/** File path used to resolve indentation (.editorconfig + defaults) */
 	filePath?: string;

package/src/chrome/dynamic-border.ts

@@ -1,5 +1,7 @@
 import type { Component } from "../tui";
 import { fgOrPlain, theme } from "../theme/index";
+import type { NativeNode } from "../native/node";
+import { EMPTY_NODE } from "../native/describe";
 /**
  * Dynamic border component that adjusts to viewport width.
  *
@@ -23,6 +25,11 @@ export class DynamicBorder implements Component {
 		this.#cachedLines = undefined;
 	}
 
+	/** Native terminals draw their own chrome; a border rule describes nothing. */
+	describe(): NativeNode {
+		return EMPTY_NODE;
+	}
+
 	render(width: number): readonly string[] {
 		if (this.#cachedLines && this.#cachedWidth === width) {
 			return this.#cachedLines;

package/src/chrome/format.ts

@@ -1,6 +1,8 @@
 import { renderProgressBar } from "../components/progress-bar";
 import { shimmerText } from "../theme/shimmer";
 import { theme as currentTheme, type Theme } from "../theme/theme";
+import type { NativeNode } from "../native/node";
+import { node } from "../native/describe";
 
 /** Title-case a provider id for display (`openai-codex` → `Openai Codex`). */
 export function formatProviderName(provider: string): string {
@@ -40,6 +42,16 @@ function resolveProgressBarTheme(uiTheme: ProgressBarTheme | undefined): Progres
 	return uiTheme ?? currentTheme ?? unstyledProgressBarTheme;
 }
 
+/**
+ * Native {@link renderAsciiBar}: a terminal-drawn progress bar with the same
+ * percent label; `undefined` is indeterminate.
+ */
+export function describeAsciiBar(fraction: number | undefined): NativeNode {
+	if (fraction === undefined) return node("progress", { value: null });
+	const value = Math.min(1, Math.max(0, fraction));
+	return node("progress", { value, label: `${Math.round(value * 100)}%` });
+}
+
 /**
  * Render an ASCII progress bar with a trailing percent label.
  * `fraction` is clamped to `[0, 1]`. `undefined` renders a dotted placeholder.

package/src/chrome/message-divider.ts

@@ -1,6 +1,10 @@
 import type { Component } from "../tui";
-import { type ThemeColor, theme } from "../theme";
+import { getThemeEpoch, type ThemeColor, theme } from "../theme";
 import { truncateToWidth } from "../utils";
+import { node, span, text } from "../native/describe";
+import type { NativeNode } from "../native/node";
+import { plainText } from "../native/spans";
+import { Memo } from "../native/memo";
 
 /** Presentation policy for a compact message divider. */
 export interface MessageDividerOptions {
@@ -11,6 +15,13 @@ export interface MessageDividerOptions {
 	readonly ruleWidth?: number;
 	/** Preserve an intentionally untruncated legacy label at very narrow widths. */
 	readonly truncateWhenNarrow?: boolean;
+	/** Semantic role of the native node. */
+	readonly role?: string;
+	/**
+	 * Draw as an inline notice (this named icon and a one-line label without
+	 * the leading glyph) instead of a labelled rule.
+	 */
+	readonly native?: { readonly icon: string; readonly label: () => string };
 }
 
 /**
@@ -20,6 +31,7 @@ export interface MessageDividerOptions {
 export class MessageDividerComponent implements Component {
 	readonly #options: MessageDividerOptions;
 	#cache: { width: number; lines: readonly string[] } | undefined;
+	readonly #native = new Memo();
 
 	constructor(options: MessageDividerOptions) {
 		this.#options = options;
@@ -27,6 +39,26 @@ export class MessageDividerComponent implements Component {
 
 	invalidate(): void {
 		this.#cache = undefined;
+		this.#native.clear();
+	}
+
+	/** An inline notice, else a labelled `rule`; the label is theme-aware, so it rebuilds on theme changes. */
+	describe(): NativeNode {
+		const inline = this.#options.native;
+		if (inline) {
+			return this.#native.get([getThemeEpoch()], () =>
+				node("row", { gap: "sm", role: this.#options.role ?? "omp.divider" }, [
+					node("icon", { name: inline.icon }),
+					text([span(inline.label(), this.#options.labelColor)], { truncate: "end" }),
+				]),
+			);
+		}
+		return this.#native.get([getThemeEpoch()], () =>
+			node("rule", {
+				role: this.#options.role ?? "omp.divider",
+				label: [span(plainText(this.#options.label()), this.#options.labelColor)],
+			}),
+		);
 	}
 
 	render(width: number): readonly string[] {