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

package/dist/types/tools/task.d.ts

@@ -209,10 +209,17 @@ export interface AgentProgress {
     lastIntent?: string;
     currentTool?: string;
     currentToolArgs?: string;
+    /** Argument key selected for the display preview, when known. */
+    currentToolArgsKey?: string;
+    /** Intent the model attached to the current call; undefined when that call carried none. */
+    currentToolIntent?: string;
     currentToolStartMs?: number;
     recentTools: Array<{
         tool: string;
         args: string;
+        argsKey?: string;
+        intent?: string;
+        isError?: boolean;
         endMs: number;
     }>;
     recentOutput: string[];

package/dist/types/tui.d.ts

@@ -1,6 +1,6 @@
 import type { TspFrame, TspNode, TspText } from "@oh-my-pi/pi-wire";
 import { ImageBudget } from "./components/image.js";
-import type { DescribeContext, NativeNode, NativeUiEvent } from "./native/node.js";
+import type { DescribeContext, NativeNode, NativeScreen, NativeUiEvent } from "./native/node.js";
 import { type Terminal } from "./terminal.js";
 import { visibleWidth } from "./utils.js";
 /** Full-attribute reset terminating each rendered content row. */
@@ -138,6 +138,13 @@ export interface Component {
      * `cx.supports("picker")`, so older terminals keep the wrapped fallback.
      */
     nativeSheet?(cx: DescribeContext): boolean;
+    /**
+     * A fullscreen overlay that is a page of its own rather than one block:
+     * the regions (and role) of the screen surface it fills, instead of the
+     * default lone `main` child. Put the component itself in `dock` to keep
+     * its focus target and events.
+     */
+    describeScreen?(cx: DescribeContext): NativeScreen;
     /** User actions on nodes this component described (toggle, select, activate, custom). */
     handleNativeEvent?(event: NativeUiEvent): void;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "18.4.4",
+	"version": "18.4.6",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": {
@@ -41,14 +41,14 @@
 		"gen:glyphs": "bun scripts/gen-glyphs.ts"
 	},
 	"dependencies": {
-		"@oh-my-pi/omptype": "18.4.4",
-		"@oh-my-pi/pi-agent-core": "18.4.4",
-		"@oh-my-pi/pi-ai": "18.4.4",
-		"@oh-my-pi/pi-catalog": "18.4.4",
-		"@oh-my-pi/pi-natives": "18.4.4",
-		"@oh-my-pi/pi-utils": "18.4.4",
-		"@oh-my-pi/pi-wire": "18.4.4",
-		"@oh-my-pi/snapcompact": "18.4.4"
+		"@oh-my-pi/omptype": "18.4.6",
+		"@oh-my-pi/pi-agent-core": "18.4.6",
+		"@oh-my-pi/pi-ai": "18.4.6",
+		"@oh-my-pi/pi-catalog": "18.4.6",
+		"@oh-my-pi/pi-natives": "18.4.6",
+		"@oh-my-pi/pi-utils": "18.4.6",
+		"@oh-my-pi/pi-wire": "18.4.6",
+		"@oh-my-pi/snapcompact": "18.4.6"
 	},
 	"devDependencies": {
 		"kitty-vt-wasm": "^0.2.0"

package/src/apps/git/sidebar.ts

@@ -1003,10 +1003,23 @@ export class Sidebar {
 	 * Pointer actions on the changes sheet: list clicks select (a folder also
 	 * folds, a second click on the selected file stages it, as the ANSI click
 	 * does), double clicks activate, the segmented control switches Path/Tree,
-	 * and the quiet buttons run their row's action. False when not the
-	 * sidebar's event.
+	 * and the quiet buttons run their row's action; selection edits go to the
+	 * text field being edited. False when not the sidebar's event.
 	 */
 	handleNativeEvent(event: NativeUiEvent): boolean {
+		if (event.type === "edit") {
+			const editing = this.editing ? this.selected?.kind : undefined;
+			const field =
+				editing === "summary"
+					? this.summary.input
+					: editing === "stage-ai-input"
+						? this.aiInput.input
+						: editing === "description"
+							? this.description
+							: undefined;
+			field?.applyHostEdit(event);
+			return field !== undefined;
+		}
 		if (event.type === "select" || event.type === "activate") {
 			if (event.item === "path" || event.item === "tree") {
 				this.viewStyle = event.item;

package/src/chat/assistant-message.ts

@@ -890,8 +890,8 @@ export class AssistantMessageComponent extends Container {
 	 * Turn-ending error, recovered-retry note or abort label. A failed request
 	 * is one error frame (head: "Request failed" + the HTTP status chip; body:
 	 * the message once; then Retry / Copy error / Switch model), and stays in
-	 * the transcript: the pinned banner is ANSI-only. A recovered attempt is an
-	 * inline row that discloses the original error.
+	 * the transcript: unlike ANSI, the pinned banner does not hide it natively.
+	 * A recovered attempt is an inline row that discloses the original error.
 	 */
 	#describeError(message: AssistantMessage): NativeNode | undefined {
 		const presentation = resolveAssistantErrorPresentation(message);

package/src/chat/recap-notice.ts

@@ -0,0 +1,30 @@
+import { Spacer } from "../components/spacer";
+import { Text } from "../components/text";
+import { node, text } from "../native/describe";
+import type { NativeNode } from "../native/node";
+import { theme } from "../theme";
+import { Container } from "../tui";
+
+/**
+ * The idle recap (`recap.*`): where the session stands, written while the user
+ * was away. Stays in the transcript like a thought: a dim italic `※ recap:`
+ * line in ANSI, a history icon beside the italic thought-coloured text in a
+ * native terminal (`omp.recap`).
+ */
+export class RecapNotice extends Container {
+	readonly #recap: string;
+
+	constructor(recap: string) {
+		super();
+		this.#recap = recap;
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(`※ recap: ${recap}`, 1, 0).setStyleFn(line => theme.fg("dim", theme.italic(line))));
+	}
+
+	override describe(): NativeNode {
+		return node("row", { gap: "sm", align: "start", role: "omp.recap", title: "Recap while you were away" }, [
+			node("icon", { name: "history" }, undefined, "icon"),
+			text(this.#recap, { wrap: "word" }),
+		]);
+	}
+}

package/src/chat/tool-execution.ts

@@ -97,6 +97,11 @@ function isEditLikeToolName(toolName: string): boolean {
 	return toolName === "edit" || toolName === "apply_patch";
 }
 
+/** Tools whose arguments stream a growing file body or diff into the card (edit, apply_patch, write). */
+function streamsBody(toolName: string): boolean {
+	return isEditLikeToolName(toolName) || toolName === "write";
+}
+
 function resolveEditModeForTool(toolName: string, tool: AgentTool | undefined): EditMode | undefined {
 	if (toolName === "apply_patch") return "apply_patch";
 	if (toolName !== "edit") return undefined;
@@ -652,7 +657,7 @@ export class ToolExecutionComponent extends Container {
 		// them. Todo snapshots and detached background tool progress are deliberate
 		// static exceptions because their rows can be superseded or committed to
 		// scrollback while later updates continue elsewhere.
-		const isStreamingArgs = !this.#argsComplete && (isEditLikeToolName(this.#toolName) || this.#toolName === "write");
+		const isStreamingArgs = !this.#argsComplete && streamsBody(this.#toolName);
 		const isBackgroundAsyncRunning =
 			(this.#result?.details as { async?: { state?: string } } | undefined)?.async?.state === "running";
 		const renderer = this.#renderer;
@@ -934,6 +939,17 @@ export class ToolExecutionComponent extends Container {
 		return Math.max(0, Math.round((ended ?? performance.now()) - started));
 	}
 
+	/**
+	 * The native `collapsed` prop: the transcript's expand state, except that a
+	 * call streaming its body (edit, write) stays open until it settles, then
+	 * folds like a finished thought. The user's own toggle still wins meanwhile:
+	 * the terminal keeps local collapse state until this prop changes.
+	 */
+	#nativeCollapsed(status: TspCardStatus): boolean {
+		const live = status === "pending" || status === "running";
+		return !this.#expanded && !(live && streamsBody(this.#toolName));
+	}
+
 	/** The late diagnostics section and head chip, when LSP reported after the result. */
 	#lateDiagnosticsParts(): { section?: NativeNode; chip?: { text: string; tone: TspTone } } {
 		const files = this.#lateDiagnostics;
@@ -992,7 +1008,7 @@ export class ToolExecutionComponent extends Container {
 				intent: typeof intent === "string" && intent ? plainText(intent) : undefined,
 				frame: inline ? "inline" : "card",
 				collapsible: hasBody,
-				collapsed: hasBody ? !this.#expanded : undefined,
+				collapsed: hasBody ? this.#nativeCollapsed(status) : undefined,
 				preview: hasBody ? (preview === "auto" ? { lines: DEFAULT_TERMINAL_PREVIEW_LINES } : preview) : undefined,
 				tools: view.tools,
 				tone: view.tone,
@@ -1060,7 +1076,7 @@ export class ToolExecutionComponent extends Container {
 				tone: view.tone ?? NATIVE_STATUS_TONE[status],
 				status,
 				collapsible: hasBody,
-				collapsed: hasBody ? !this.#expanded : undefined,
+				collapsed: hasBody ? this.#nativeCollapsed(status) : undefined,
 				preview: hasBody ? cardPreview(view.preview) : undefined,
 			},
 			children,

package/src/chat/user-message.ts

@@ -222,7 +222,8 @@ export class UserMessageComponent extends Container implements ReactionTarget {
 				if (!image.mimeType.startsWith("image/")) return;
 				const label = `#${i + 1}`;
 				const link = this.#imageLinks?.[i];
-				const open = link ? { href: link, actions: { click: "open" } } : {};
+				// A click zooms the image in the terminal; the file opens from its context menu.
+				const open = link ? { href: link, actions: { menu: ["open"] } } : {};
 				thumbs.push(base64ImageNode(image.data, image.mimeType, { alt: label, title: label, ...open }, label));
 			});
 		}

package/src/components/editor.ts

@@ -18,7 +18,14 @@ import type { TspEditorDecoration, TspEditorProps, TspTone } from "@oh-my-pi/pi-
 import { col, node } from "../native/describe";
 import { sameItems, sameProps } from "../native/memo";
 import { plainText } from "../native/spans";
-import type { DescribeContext, NativeChild, NativeNode } from "../native/node";
+import {
+	type DescribeContext,
+	type NativeChild,
+	type NativeNode,
+	type NativeTextEdit,
+	type NativeUiEvent,
+	resolveTextEdit,
+} from "../native/node";
 import type { SymbolTheme } from "../symbols";
 import { type Component, CURSOR_MARKER, type Focusable } from "../tui";
 import {
@@ -614,11 +621,12 @@ export class Editor implements Component, Focusable {
 	 * TSP chrome around the `editor` node (the prompt composer's chips, mode
 	 * chip, send/stop): the root role, the children with `input` placed where
 	 * the layout wants it, and the input's keypath for the caret-anchored
-	 * autocomplete. Unset: a plain `omp.editor` column over the input.
+	 * autocomplete. Unset: a plain `omp.field` column over the input (a
+	 * dialog's text field; only the prompt composer claims `omp.editor`).
 	 */
 	describeLayout: ((input: NativeNode, cx: DescribeContext) => NativeEditorLayout) | undefined;
 	/** TSP placeholder for the empty buffer; natively it replaces the rotating ANSI {@link placeholder} hints. */
-	nativePlaceholder: string | undefined;
+	describePlaceholder: (() => string) | undefined;
 	#promptGutter: string | undefined;
 	/** Bumped by {@link invalidate}: host-side decoration inputs (spelling results, settings) changed. */
 	#nativeGeneration = 0;
@@ -629,6 +637,14 @@ export class Editor implements Component, Focusable {
 
 	// Store last layout width for cursor navigation
 	#lastLayoutWidth: number = 80;
+	/**
+	 * Width the caret's rows wrap at for Up/Down and paging: the painted layout width in
+	 * text mode. Natively it is unbounded (rows are logical lines): the terminal wraps with
+	 * its own font and moves the caret between the rows it drew itself, handing over only
+	 * Up on the first row and Down on the last (TSP §8.5, native editing), which are then
+	 * on the first and last logical line.
+	 */
+	#caretRowWidth: number = 80;
 	// Line measurement + word-wrap cache shared by #layoutText,
 	// #buildVisualLineMap, and key handlers within a frame. Line text is a
 	// sound key (strings are immutable); cleared on layout-width or
@@ -1025,13 +1041,13 @@ export class Editor implements Component, Focusable {
 	}
 
 	#isOnFirstVisualLine(): boolean {
-		const visualLines = this.#buildVisualLineMap(this.#lastLayoutWidth);
+		const visualLines = this.#buildVisualLineMap(this.#caretRowWidth);
 		const currentVisualLine = this.#findCurrentVisualLine(visualLines);
 		return currentVisualLine === 0;
 	}
 
 	#isOnLastVisualLine(): boolean {
-		const visualLines = this.#buildVisualLineMap(this.#lastLayoutWidth);
+		const visualLines = this.#buildVisualLineMap(this.#caretRowWidth);
 		const currentVisualLine = this.#findCurrentVisualLine(visualLines);
 		return currentVisualLine === visualLines.length - 1;
 	}
@@ -1321,6 +1337,7 @@ export class Editor implements Component, Focusable {
 		const contentAreaWidth = this.#getContentWidth(width, paddingX);
 		const layoutWidth = this.#getLayoutWidth(width, paddingX);
 		this.#lastLayoutWidth = layoutWidth;
+		this.#caretRowWidth = layoutWidth;
 
 		const box = this.#theme.symbols.boxRound;
 		const borderWidth = this.#getHorizontalChromeWidth(paddingX);
@@ -1619,9 +1636,10 @@ export class Editor implements Component, Focusable {
 	 * caret moves change only `text` and `cursor` on the same node.
 	 */
 	describe(cx: DescribeContext): NativeNode {
-		// Vertical caret motion walks visual rows; the terminal owns the real
-		// wrap, so the surface width is the closest available layout width.
+		// The terminal owns the wrap: the surface width only estimates whether a
+		// recalled history entry spans rows, and caret rows are logical lines.
 		this.#lastLayoutWidth = Math.max(1, cx.cols);
+		this.#caretRowWidth = Number.POSITIVE_INFINITY;
 		const { lines, cursorLine, cursorCol } = this.#state;
 		const text = lines.join("\n");
 		let offset = 0;
@@ -1646,8 +1664,8 @@ export class Editor implements Component, Focusable {
 
 		const placeholder = this.#getPlaceholder();
 		const nativePlaceholder =
-			this.nativePlaceholder !== undefined && !this.#autocompleteState && this.#isEditorEmpty()
-				? this.nativePlaceholder
+			this.describePlaceholder !== undefined && !this.#autocompleteState && this.#isEditorEmpty()
+				? this.describePlaceholder()
 				: placeholder && plainText(placeholder).trim();
 		const atLineEnd = cursorCol >= (lines[cursorLine]?.length ?? 0);
 		const ghost = nativePlaceholder || !atLineEnd ? null : this.#getInlineHint();
@@ -1665,7 +1683,7 @@ export class Editor implements Component, Focusable {
 				anchor = anchorOffset + vim.anchor.col;
 			}
 		}
-		const prompt = this.#promptGutter === undefined ? "" : plainText(this.#promptGutter);
+		// The prompt gutter (`> `) is terminal chrome: native hosts draw their own field, so it stays out.
 		const props: TspEditorProps = {
 			text,
 			cursor,
@@ -1673,7 +1691,6 @@ export class Editor implements Component, Focusable {
 			decor: decor.decor,
 			ghost: ghost ? plainText(ghost) : undefined,
 			placeholder: nativePlaceholder || undefined,
-			prompt: prompt || undefined,
 			mode: vim ? VIM_MODE_LABELS[vim.mode] : undefined,
 			lang: this.describeLanguage?.(),
 			maxLines: this.#maxHeight,
@@ -1685,7 +1702,7 @@ export class Editor implements Component, Focusable {
 		}
 
 		const layout = this.describeLayout?.(editor.node, cx) ?? {
-			role: "omp.editor",
+			role: "omp.field",
 			children: [editor.node],
 			caret: "input",
 		};
@@ -1949,8 +1966,14 @@ export class Editor implements Component, Focusable {
 					const currentTextBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
 					// A narrowed `@` list can be empty while its refresh is pending; Enter
 					// then submits instead of waiting on the search.
-					if (!selected || !this.#autocompletePrefixMatchesCursorText(currentTextBeforeCursor, selected)) {
-						// Autocomplete is stale - cancel and fall through to normal submission
+					if (
+						!selected ||
+						!this.#autocompletePrefixMatchesCursorText(currentTextBeforeCursor, selected) ||
+						this.#selectedSlashArgumentIsAlreadyTyped(selected)
+					) {
+						// Stale, or accepting would only append whitespace to an already fully
+						// typed slash-command argument (`/mcp list` + Enter): cancel and fall
+						// through to normal submission instead of swallowing the keypress.
 						this.#cancelAutocomplete();
 					} else {
 						if (selected && this.#autocompleteProvider) {
@@ -2839,6 +2862,63 @@ export class Editor implements Component, Focusable {
 		this.#insertTextAtCursor(text);
 	}
 
+	/** Terminal-side selection edits on the `editor` node (see {@link applyHostEdit}). */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type === "edit") this.applyHostEdit(event);
+	}
+
+	/**
+	 * Apply an edit the terminal made over its own selection (TSP `edit`):
+	 * replace `[from, to)` of the described text with `text` and put the caret
+	 * at `cursor`, as one undo unit that leaves history browsing and updates
+	 * autocomplete like typing. A range cutting through an atomic placeholder
+	 * token takes the whole token. Stale edits (`len` no longer the text's
+	 * length) are dropped; a pure caret move only moves the caret.
+	 */
+	applyHostEdit(edit: NativeTextEdit): void {
+		const current = this.getText();
+		const resolved = resolveTextEdit(
+			current,
+			edit,
+			text => this.#sanitizePastedText(text),
+			(from, to) => this.#widenOverAtomicTokens(current, from, to),
+		);
+		if (!resolved) return;
+		this.#resetKillSequence();
+		if (resolved.changed) {
+			this.#historyIndex = -1;
+			this.#recordUndoState();
+			this.#state.lines = resolved.text.split("\n");
+		}
+		const lines = this.#state.lines;
+		let line = 0;
+		let col = resolved.cursor;
+		while (line < lines.length - 1 && col > lines[line]!.length) col -= lines[line++]!.length + 1;
+		this.#state.cursorLine = line;
+		this.#setCursorCol(col);
+		if (!resolved.changed) return;
+		this.#notifyChange(resolved.text);
+		this.#retriggerAutocompleteAtCursor();
+	}
+
+	/** Widen `[from, to)` of `text` so neither end cuts through an atomic placeholder token. */
+	#widenOverAtomicTokens(text: string, from: number, to: number): { from: number; to: number } {
+		const fromLine = from === 0 ? 0 : text.lastIndexOf("\n", from - 1) + 1;
+		const fromEnd = text.indexOf("\n", from);
+		const fromToken = this.#atomicTokenAt(
+			text.slice(fromLine, fromEnd === -1 ? text.length : fromEnd),
+			from - fromLine,
+		);
+		if (fromToken !== undefined) from = fromLine + fromToken.start;
+		const toLine = to === 0 ? 0 : text.lastIndexOf("\n", to - 1) + 1;
+		if (to > toLine) {
+			const toEnd = text.indexOf("\n", to);
+			const toToken = this.#atomicTokenAt(text.slice(toLine, toEnd === -1 ? text.length : toEnd), to - toLine - 1);
+			if (toToken !== undefined) to = toLine + toToken.end;
+		}
+		return { from, to };
+	}
+
 	/** Delete up to `count` characters immediately before the cursor on the current line.
 	 *  Used to "track back" the auto-repeat spaces that the space-hold push-to-talk gesture
 	 *  optimistically inserts before it recognizes the hold. Capped at the cursor column so it
@@ -3966,7 +4046,7 @@ export class Editor implements Component, Focusable {
 
 	#moveCursor(deltaLine: number, deltaCol: number): void {
 		this.#resetKillSequence();
-		const visualLines = this.#buildVisualLineMap(this.#lastLayoutWidth);
+		const visualLines = this.#buildVisualLineMap(this.#caretRowWidth);
 		const currentVisualLine = this.#findCurrentVisualLine(visualLines);
 
 		if (deltaLine !== 0) {
@@ -4018,7 +4098,7 @@ export class Editor implements Component, Focusable {
 
 	#pageScroll(direction: -1 | 1): void {
 		this.#resetKillSequence();
-		const visualLines = this.#buildVisualLineMap(this.#lastLayoutWidth);
+		const visualLines = this.#buildVisualLineMap(this.#caretRowWidth);
 		const currentVisualLine = this.#findCurrentVisualLine(visualLines);
 		const step = this.#getPageScrollStep(visualLines.length);
 		const targetVisualLine = Math.max(0, Math.min(visualLines.length - 1, currentVisualLine + direction * step));
@@ -4212,6 +4292,25 @@ export class Editor implements Component, Focusable {
 		return this.#autocompleteList?.getSelectedItem()?.value === SKILL_NAMESPACE;
 	}
 
+	/**
+	 * Whether the selected completion for a submitted slash command's argument
+	 * only restates what the user already typed (e.g. `list ` for `/mcp list`).
+	 * Accepting it would change nothing visible, so Enter should submit.
+	 *
+	 * A selection whose usage hint still names a required `<arg>` outside any
+	 * optional `[...]` group (e.g. `test` with `<name>`) keeps Enter's accept
+	 * role, so the user continues into the argument instead of submitting a
+	 * command the handler can only reject.
+	 */
+	#selectedSlashArgumentIsAlreadyTyped(selected: AutocompleteItem): boolean {
+		if (!this.#isInSubmittedSlashCommandContext()) return false;
+		const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
+		if (this.#state.cursorCol !== currentLine.length) return false;
+		if (selected.hint?.replace(/\[[^\]]*\]/g, "").includes("<")) return false;
+		const typed = this.#autocompletePrefix.trimEnd();
+		return typed.length > 0 && selected.value.trimEnd() === typed;
+	}
+
 	#isSlashCommandNameAutocompleteSelection(): boolean {
 		if (this.#autocompleteState !== "regular") {
 			return false;

package/src/components/input.ts

@@ -6,7 +6,14 @@ import type { TspInputProps } from "@oh-my-pi/pi-wire";
 import { node } from "../native/describe";
 import { sameProps } from "../native/memo";
 import { plainText } from "../native/spans";
-import type { DescribeContext, NativeNode } from "../native/node";
+import {
+	clampTextOffset,
+	type DescribeContext,
+	type NativeNode,
+	type NativeTextEdit,
+	type NativeUiEvent,
+	resolveTextEdit,
+} from "../native/node";
 import { SpaceHoldGesture } from "../space-hold";
 import { type Component, CURSOR_MARKER, type Focusable } from "../tui";
 import { cursorColumnWindow } from "./scroll-viewport";
@@ -277,6 +284,55 @@ export class Input implements Component, Focusable {
 		this.#handlePaste(text);
 	}
 
+	/** Terminal-side selection edits on the `input` node (see {@link applyHostEdit}). */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type === "edit") this.applyHostEdit(event);
+	}
+
+	/**
+	 * Apply an edit the terminal made over its own selection (TSP `edit`):
+	 * replace `[from, to)` with `text` (newlines stripped, as a paste) and put
+	 * the caret at `cursor`, as one undo unit. Offsets are in the described
+	 * text, so a masked field's count bullets, one per grapheme. Stale edits
+	 * (`len` no longer the described length) are dropped.
+	 */
+	applyHostEdit(edit: NativeTextEdit): void {
+		let valueEdit = edit;
+		if (this.mask) {
+			// Bullet offsets → value offsets through the grapheme starts.
+			const starts = Array.from(segmenter.segment(this.#value), grapheme => grapheme.index);
+			starts.push(this.#value.length);
+			const bullets = starts.length - 1;
+			if (edit.len !== bullets) return;
+			let from = clampTextOffset(edit.from, bullets);
+			let to = clampTextOffset(edit.to, bullets);
+			if (to < from) [from, to] = [to, from];
+			const text = typeof edit.text === "string" ? edit.text : "";
+			const cursor = clampTextOffset(edit.cursor, bullets - (to - from) + text.length);
+			const after = cursor - from - text.length;
+			valueEdit = {
+				from: starts[from]!,
+				to: starts[to]!,
+				text,
+				cursor:
+					cursor <= from
+						? starts[cursor]!
+						: after >= 0
+							? starts[from]! + text.length + starts[to + after]! - starts[to]!
+							: starts[from]! + cursor - from,
+				len: this.#value.length,
+			};
+		}
+		const resolved = resolveTextEdit(this.#value, valueEdit, toSingleLine);
+		if (!resolved) return;
+		this.#lastAction = null;
+		if (resolved.changed) {
+			this.#pushUndo();
+			this.#value = resolved.text;
+		}
+		this.#cursor = resolved.cursor;
+	}
+
 	/** Programmatically trigger submission (e.g. for voice submit). */
 	submit(): void {
 		this.onSubmit?.(this.#value);

package/src/native/backend.ts

@@ -87,6 +87,8 @@ export interface NativeBackendOptions {
 const RECENT_FRAMES = 64;
 /** An unanswered frame older than this no longer holds rendering back. */
 const STALLED_ACK_MS = 5000;
+/** Role of the session's surfaces; a screen page may name its own. */
+const SESSION_ROLE = "omp.session";
 
 class NativeContext implements DescribeContext {
 	cols: number;
@@ -148,6 +150,8 @@ export function assumedTspHello(terminal: Terminal): TspHello {
 class Surface {
 	readonly id: string;
 	readonly mode: "inline" | "screen";
+	/** The `o` role: `omp.session`, or a screen page's own (`NativeScreen.role`). */
+	readonly role: string;
 	readonly reconciler: Reconciler;
 	readonly doc: TspDocument | null;
 	seq = 0;
@@ -158,9 +162,10 @@ class Surface {
 	focus: string | null = null;
 	dirty = false;
 
-	constructor(id: string, mode: "inline" | "screen", mirror: boolean) {
+	constructor(id: string, mode: "inline" | "screen", role: string, mirror: boolean) {
 		this.id = id;
 		this.mode = mode;
+		this.role = role;
 		this.reconciler = new Reconciler(id);
 		this.doc = mirror ? new TspDocument(id) : null;
 	}
@@ -353,7 +358,7 @@ export class NativeBackend {
 		surface.acked = surface.seq;
 		surface.focus = null;
 		surface.dirty = false;
-		this.#write("o", { id: surface.id, mode: "inline", title: "omp", role: "omp.session", adopt: true });
+		this.#write("o", { id: surface.id, mode: "inline", title: "omp", role: SESSION_ROLE, adopt: true });
 		this.#sendPalette(surface);
 		// After the `o`, as in `start()`.
 		setNativeRendering(true);
@@ -408,13 +413,18 @@ export class NativeBackend {
 		let dock: readonly NativeChild[];
 		let layer: NativeChild[];
 		if (fullscreen >= 0) {
-			if (!this.#screen) {
-				this.#screen = this.#newSurface("screen");
+			const component = overlays[fullscreen]!.component;
+			const page = component.describeScreen?.(this.#cx);
+			const role = page?.role ?? SESSION_ROLE;
+			if (this.#screen?.role !== role) {
+				// A page with another role is another surface: its styling keys off the `o`.
+				if (this.#screen) this.#close(this.#screen, false);
+				this.#screen = this.#newSurface("screen", role);
 				this.#open(this.#screen);
 			}
 			surface = this.#screen;
-			main = [overlays[fullscreen]!.component];
-			dock = [];
+			main = page?.main ?? [component];
+			dock = page?.dock ?? [];
 			layer = overlays.slice(fullscreen + 1).map(overlay => this.#overlayNode(overlay));
 		} else {
 			if (this.#screen) {
@@ -478,12 +488,12 @@ export class NativeBackend {
 		this.#sawResize = false;
 	}
 
-	#newSurface(mode: "inline" | "screen"): Surface {
-		return new Surface(`s:${this.#nextSurface++}`, mode, this.#mirror);
+	#newSurface(mode: "inline" | "screen", role = SESSION_ROLE): Surface {
+		return new Surface(`s:${this.#nextSurface++}`, mode, role, this.#mirror);
 	}
 
 	#open(surface: Surface): void {
-		this.#write("o", { id: surface.id, mode: surface.mode, title: "omp", role: "omp.session" });
+		this.#write("o", { id: surface.id, mode: surface.mode, title: "omp", role: surface.role });
 		this.#sendPalette(surface);
 	}
 
@@ -611,12 +621,15 @@ export class NativeBackend {
 			case "activate":
 			case "action":
 			case "change":
+			case "edit":
 				this.#routeUiEvent(event);
 				return;
 		}
 	}
 
-	#routeUiEvent(event: Extract<TspEvent, { ev: "toggle" | "select" | "activate" | "action" | "change" }>): void {
+	#routeUiEvent(
+		event: Extract<TspEvent, { ev: "toggle" | "select" | "activate" | "action" | "change" | "edit" }>,
+	): void {
 		const reconciler = this.#surfaceFor(event.sf)?.reconciler;
 		const target = reconciler?.target(event.id);
 		if (!reconciler || !target?.component.handleNativeEvent) return;
@@ -644,6 +657,11 @@ export class NativeBackend {
 			case "change":
 				ui = { type: "change", key: target.keypath, item: event.item, value: event.value };
 				break;
+			case "edit": {
+				const { from, to, text, cursor, len } = event;
+				ui = { type: "edit", key: target.keypath, from, to, text, cursor, len };
+				break;
+			}
 		}
 		target.component.handleNativeEvent(ui);
 		this.#host.requestRender();

package/src/native/blobs.ts

@@ -48,7 +48,7 @@ export function getNativeBlob(id: string): NativeBlob | undefined {
 export function base64ImageNode(
 	data: string,
 	mimeType: string,
-	p?: Omit<TspProps<"image">, "blob" | "w" | "h">,
+	p?: Omit<TspProps<"image">, "blob" | "builtin" | "w" | "h">,
 	key?: string,
 ): NativeNode {
 	const blob = registerNativeBlob(Buffer.from(data, "base64"), mimeType);

package/src/native/encode.ts

@@ -165,6 +165,7 @@ const EVENT_REQUIRED: Readonly<Record<string, Readonly<Record<string, "string" |
 	select: { id: "string", item: "string" },
 	activate: { id: "string", item: "string" },
 	action: { id: "string", act: "string" },
+	edit: { id: "string", from: "number", to: "number", text: "string", cursor: "number", len: "number" },
 	error: { msg: "string" },
 	gone: { ids: "array" },
 };