@oh-my-pi/pi-tui 18.4.8 → 18.4.9

package/src/apps/debug/log-viewer.ts

@@ -1,10 +1,15 @@
+import type { TspPickerGroup, TspPickerItem, TspTone } from "@oh-my-pi/pi-wire";
 import { formatKeyHint, formatKeyHints } from "../../app-keybindings";
 import type { Component } from "../../tui";
+import { code } from "../../native/describe";
+import { Memo } from "../../native/memo";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../../native/node";
+import { CLOSE_ACTION, picker, pickerAction, pickerEvent, pickerHits, pickerQuery } from "../../native/picker";
 import { matchesKey } from "../../keys";
 import { Input } from "../../components/input";
 import { routeSgrMouseInput, type SgrMouseEvent } from "../../mouse";
 import { padding, truncateToWidth, visibleWidth } from "../../utils";
-import { sanitizeText } from "@oh-my-pi/pi-utils";
+import { isRecord, sanitizeText } from "@oh-my-pi/pi-utils";
 import { theme } from "../../theme/theme";
 import { sanitizeDisplayText } from "../../overlays/extensions/display-text";
 import { DebugViewerFrame, type DebugViewerFrameContent, type DebugViewerFrameContext } from "./viewer-frame";
@@ -24,6 +29,15 @@ export const LOAD_OLDER_LABEL = "### MOVE UP TO LOAD MORE...";
 const INITIAL_LOG_CHUNK = 50;
 const LOAD_OLDER_CHUNK = 50;
 const MIN_LOG_VIEWER_WIDTH = 48;
+/** Picker item id of the "load older entries" row. */
+const OLDER_ITEM = "older";
+/** Status-dot tone of a log level. */
+const LEVEL_TONES: Readonly<Record<string, TspTone>> = {
+	error: "error",
+	warn: "warning",
+	info: "info",
+	debug: "muted",
+};
 
 type LogEntry = {
 	rawLine: string;
@@ -40,6 +54,47 @@ type DebugLogViewerModelOptions = {
 	loadOlderLogs?: (limitDays?: number) => Promise<string>;
 };
 
+/**
+ * One log entry as a picker row: the message as the label, the remaining
+ * fields as `key=value` detail, the local time and pid as facts and the
+ * level as the status dot. Lines that aren't JSON objects show as they are.
+ */
+function logPickerItem(id: string, rawLine: string): TspPickerItem {
+	let parsed: unknown;
+	try {
+		parsed = JSON.parse(rawLine);
+	} catch {}
+	if (!isRecord(parsed)) {
+		return { id, label: sanitizeDisplayText(rawLine).replace(/\s+/g, " "), mono: true };
+	}
+	const { timestamp, level, pid, message, ...rest } = parsed;
+	let detail = "";
+	for (const key in rest) {
+		const value = rest[key];
+		detail += `${detail ? " " : ""}${key}=${typeof value === "string" ? value : JSON.stringify(value)}`;
+	}
+	const time = typeof timestamp === "string" ? new Date(timestamp) : undefined;
+	return {
+		id,
+		label: sanitizeDisplayText(typeof message === "string" ? message : rawLine).replace(/\s+/g, " "),
+		detail: detail ? sanitizeDisplayText(detail).replace(/\s+/g, " ") : undefined,
+		dot: typeof level === "string" ? LEVEL_TONES[level] : undefined,
+		facts: {
+			time: time && Number.isFinite(time.getTime()) ? time.toLocaleTimeString(undefined, { hour12: false }) : "",
+			pid: typeof pid === "number" ? String(pid) : "",
+		},
+	};
+}
+
+/** A log line pretty-printed for the preview pane: indented JSON when it parses, else the sanitized line. */
+function logPreviewText(rawLine: string): { text: string; lang?: string } {
+	try {
+		return { text: JSON.stringify(JSON.parse(rawLine), null, 2), lang: "json" };
+	} catch {
+		return { text: sanitizeDisplayText(rawLine) };
+	}
+}
+
 type ViewerRow =
 	| {
 			kind: "warning";
@@ -516,6 +571,10 @@ export class DebugLogViewerComponent implements Component {
 	#statusMessage: string | undefined;
 	#loadingOlder = false;
 	#bodyLineToRowIndex: Array<number | undefined> = [];
+	readonly #native = new Memo();
+	/** Picker rows by log index, valid while {@link #nativeItemsCount} entries are loaded (a prepend shifts indices). */
+	#nativeItems = new Map<number, TspPickerItem>();
+	#nativeItemsCount = 0;
 
 	constructor(options: DebugLogViewerComponentOptions) {
 		this.#deps = options.deps;
@@ -606,6 +665,24 @@ export class DebugLogViewerComponent implements Component {
 			return;
 		}
 
+		// Page and end keys jump the cursor; the frame (or the native list)
+		// keeps it in view.
+		const jump = matchesKey(keyData, "pageUp")
+			? -this.#frame.getBodyHeight()
+			: matchesKey(keyData, "pageDown")
+				? this.#frame.getBodyHeight()
+				: matchesKey(keyData, "home")
+					? -this.#model.rows.length
+					: matchesKey(keyData, "end")
+						? this.#model.rows.length
+						: 0;
+		if (jump !== 0) {
+			this.#statusMessage = undefined;
+			this.#model.moveCursor(jump, false);
+			this.#onUpdate?.();
+			return;
+		}
+
 		if (matchesKey(keyData, "right")) {
 			this.#statusMessage = undefined;
 			if (this.#model.cursorRowKind === "load-older") {
@@ -666,12 +743,169 @@ export class DebugLogViewerComponent implements Component {
 
 	invalidate(): void {
 		this.#frame.invalidate();
+		this.#native.clear();
 	}
 
 	dispose(): void {
 		this.#frame.dispose();
 	}
 
+	/** A `picker` sheet floats over the transcript instead of taking the screen. */
+	nativeSheet(cx: DescribeContext): boolean {
+		return cx.supports("picker");
+	}
+
+	/**
+	 * The logs as a picker sheet: the filter as its query, one row per entry
+	 * (message, fields, time, pid, level dot) with the session boundary as a
+	 * group head, the range selection checked, the entry under the cursor
+	 * pretty-printed below, and the keys' actions in the bar. Without the
+	 * `picker` kind it falls back to rows.
+	 */
+	describe(cx: DescribeContext): NativeNode | null {
+		if (!cx.supports("picker")) return null;
+		const model = this.#model;
+		const query = this.#filter.getValue();
+		const cursor = this.#filter.getCursor();
+		const selected = model.getSelectedLogIndices();
+		return this.#native.get(
+			[
+				model.rows,
+				model.cursorRowIndex,
+				selected.join(","),
+				model.logCount,
+				model.isProcessFilterEnabled(),
+				model.canLoadOlder(),
+				query,
+				cursor,
+				this.#loadingOlder,
+				this.#statusMessage,
+			],
+			() => {
+				if (this.#nativeItemsCount !== model.logCount) {
+					this.#nativeItems = new Map();
+					this.#nativeItemsCount = model.logCount;
+				}
+				const items: TspPickerItem[] = [];
+				const order: (string | TspPickerGroup)[] = [];
+				const hits: Record<string, [number, number][]> = {};
+				const needle = query.toLowerCase();
+				for (const viewerRow of model.rows) {
+					if (viewerRow.kind === "warning") {
+						order.push({ group: "session", label: "This session" });
+						continue;
+					}
+					if (viewerRow.kind === "load-older") {
+						items.push({ id: OLDER_ITEM, label: "Load older entries", tone: "muted" });
+						order.push(OLDER_ITEM);
+						continue;
+					}
+					let item = this.#nativeItems.get(viewerRow.logIndex);
+					if (!item) {
+						item = logPickerItem(`l${viewerRow.logIndex}`, model.getRawLine(viewerRow.logIndex));
+						this.#nativeItems.set(viewerRow.logIndex, item);
+					}
+					items.push(item);
+					order.push(item.id);
+					if (needle && typeof item.label === "string") {
+						const found = pickerHits(item.label, [needle]);
+						if (found.length > 0) hits[item.id] = found;
+					}
+				}
+				const cursorLog = model.cursorLogIndex;
+				const preview = cursorLog === undefined ? undefined : logPreviewText(model.getRawLine(cursorLog));
+				const subtitle = [
+					`${model.visibleLogCount}/${model.logCount} entries`,
+					selected.length > 1 ? `${selected.length} selected` : undefined,
+					this.#loadingOlder ? "loading older…" : undefined,
+				]
+					.filter(part => part !== undefined)
+					.join(" · ");
+				return picker(
+					{
+						title: "Recent logs",
+						subtitle,
+						noun: "entries",
+						size: "lg",
+						layout: "rows",
+						preview: preview ? "below" : "none",
+						...pickerQuery(this.#filter),
+						placeholder: "Filter logs…",
+						columns: [
+							{ id: "pid", format: "dim", priority: 0 },
+							{ id: "time", format: "dim", priority: 1 },
+						],
+						items,
+						order,
+						hits,
+						selected:
+							model.cursorRowKind === "load-older"
+								? OLDER_ITEM
+								: cursorLog === undefined
+									? null
+									: `l${cursorLog}`,
+						current: selected.length > 1 ? selected.map(index => `l${index}`) : [],
+						total: model.logCount,
+						empty: query ? "No matching log entries" : "No log entries",
+						message: this.#statusMessage,
+						actions: [
+							pickerAction("copy", "Copy", "ctrl+c", { primary: true }),
+							pickerAction("all", "Select all", "ctrl+a"),
+							pickerAction("pid", "This process", "ctrl+p", { on: model.isProcessFilterEnabled() }),
+							pickerAction("older", "Load older", "ctrl+o", {
+								disabled: model.canLoadOlder() ? undefined : "No older log entries",
+							}),
+							CLOSE_ACTION,
+						],
+					},
+					preview && cursorLog !== undefined
+						? [{ ...code(preview.text, { lang: preview.lang, wrap: true }), key: `entry:${cursorLog}` }]
+						: undefined,
+				);
+			},
+		);
+	}
+
+	/**
+	 * Pointer actions run the keys' code: a row click moves the cursor there,
+	 * a second click copies it (or loads older entries from that row), and the
+	 * bar's buttons mirror their keys.
+	 */
+	handleNativeEvent(event: NativeUiEvent): void {
+		const ev = pickerEvent(event);
+		if (!ev) return;
+		this.#statusMessage = undefined;
+		if (ev.kind === "action") {
+			switch (ev.act) {
+				case "copy":
+					this.#copySelected();
+					return;
+				case "all":
+					this.#model.selectAllVisible();
+					return;
+				case "pid":
+					this.#model.toggleProcessFilter();
+					return;
+				case "older":
+					void this.#handleLoadOlder(this.#frame.getBodyHeight() + 1);
+					return;
+				case "close":
+					this.#onExit();
+					return;
+			}
+			return;
+		}
+		const rowIndex = this.#model.rows.findIndex(viewerRow =>
+			ev.item === OLDER_ITEM
+				? viewerRow.kind === "load-older"
+				: viewerRow.kind === "log" && `l${viewerRow.logIndex}` === ev.item,
+		);
+		if (rowIndex < 0 || !this.#model.moveCursorToRow(rowIndex, false)) return;
+		if (ev.kind !== "activate") return;
+		if (ev.item === OLDER_ITEM) void this.#handleLoadOlder();
+		else this.#copySelected();
+	}
+
 	render(width: number): readonly string[] {
 		return this.#frame.render(Math.max(MIN_LOG_VIEWER_WIDTH, width));
 	}
@@ -715,7 +949,7 @@ export class DebugLogViewerComponent implements Component {
 	}
 
 	#controlsText(): string {
-		return `${formatKeyHint("escape")} close · ${formatKeyHint("ctrl+c")} copy · ${formatKeyHints(["up", "down"])}/wheel move · click toggle · ${formatKeyHints(["shift+up", "shift+down"])} select · ${formatKeyHints(["left", "right"])} collapse/expand · ${formatKeyHint("ctrl+a")} all · ${formatKeyHint("ctrl+o")} older · ${formatKeyHint("ctrl+p")} pid`;
+		return `${formatKeyHint("escape")} close · ${formatKeyHint("ctrl+c")} copy · ${formatKeyHints(["up", "down"])}/wheel move · ${formatKeyHints(["pageUp", "pageDown"])} page · ${formatKeyHints(["home", "end"])} first/last · click toggle · ${formatKeyHints(["shift+up", "shift+down"])} select · ${formatKeyHints(["left", "right"])} collapse/expand · ${formatKeyHint("ctrl+a")} all · ${formatKeyHint("ctrl+o")} older · ${formatKeyHint("ctrl+p")} pid`;
 	}
 
 	#filterText(): string {

package/src/apps/debug/protocol-probe.ts

@@ -23,6 +23,8 @@ import { Text } from "../../components/text";
 import { ImageProtocol, NotifyProtocol, TERMINAL } from "../../terminal-capabilities";
 import { DynamicBorder } from "../../chrome/dynamic-border";
 import { theme } from "../../theme/theme";
+import { ansi } from "../../native/describe";
+import type { NativeNode } from "../../native/node";
 
 const PNG_SIGNATURE = Uint8Array.of(0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a);
 
@@ -148,13 +150,20 @@ function imageProtocolLabel(): string {
 /**
  * Deliberate exception to the normal text/data components: OSC 66 probes must
  * reach the terminal byte-for-byte, without sanitization, wrapping, clipping,
- * or padding that could invalidate the protocol sample.
+ * or padding that could invalidate the protocol sample. A native terminal
+ * gets the same bytes as one `ansi` block.
  */
 class RawLines implements Component {
 	readonly #lines: readonly string[];
+	readonly #native: NativeNode;
 
 	constructor(lines: readonly string[]) {
 		this.#lines = lines.slice();
+		this.#native = ansi(this.#lines.join("\n"));
+	}
+
+	describe(): NativeNode {
+		return this.#native;
 	}
 
 	render(): readonly string[] {

package/src/apps/debug/raw-sse.ts

@@ -1,6 +1,11 @@
+import type { TspScrollBy } from "@oh-my-pi/pi-wire";
 import { formatKeyHint } from "../../app-keybindings";
 import type { Component } from "../../tui";
 import { matchesKey } from "../../keys";
+import { col, compact, keyed, node, row, span, text } from "../../native/describe";
+import { Memo } from "../../native/memo";
+import type { NativeNode, NativeScreen, NativeScroll, NativeUiEvent } from "../../native/node";
+import { actionBar, actionButton } from "../../native/overlay";
 import { routeSgrMouseInput, type SgrMouseEvent } from "../../mouse";
 import { truncateToWidth } from "../../utils";
 import { sanitizeDisplayText } from "../../overlays/extensions/display-text";
@@ -10,6 +15,7 @@ import {
 	formatRawSseIsoTime,
 	type RawSseDebugBuffer,
 	type RawSseDebugRecord,
+	type RawSseDebugSnapshot,
 	rawSseRecordLines,
 } from "./raw-sse-buffer";
 
@@ -17,6 +23,9 @@ const MIN_VIEWER_WIDTH = 40;
 // `data:` lines below this width render fine on a single row; anything wider gets pretty-printed
 // across multiple `data:` lines so streamed JSON blobs stop getting clipped by `truncateToWidth`.
 const PRETTY_PRINT_DATA_THRESHOLD = 100;
+// The native body is fed append-only (a `text append` op per new record);
+// past this many characters it starts over from the live window.
+const NATIVE_STREAM_CHAR_CAP = 2_000_000;
 
 // Walks the SSE wire lines and replaces single-line `data: <json>` payloads with
 // multi-line `data: <indented-json>` entries when the JSON is wide enough to clip.
@@ -77,7 +86,20 @@ export class RawSseViewerComponent implements Component {
 	readonly #unsubscribe: () => void;
 	readonly #frame: DebugViewerFrame;
 	#statusMessage: string | undefined;
+	#statusFailed = false;
 	#disposed = false;
+	readonly #native = new Memo();
+	readonly #nativeHead = new Memo();
+	readonly #nativeBody = new Memo();
+	/** The last scroll key, forwarded to the stream block (see {@link NativeNode.scroll}). */
+	#nativeScroll: NativeScroll | undefined;
+	/** What the native `ansi` body was fed: every record after a rebase, in order, through {@link #nativeLast}. */
+	#nativeText = "";
+	/** Sequence of the last record in {@link #nativeText}. */
+	#nativeLast = 0;
+	/** Buffer counters at the last feed; a drop means the buffer was cleared. */
+	#nativeEvents = 0;
+	#nativeDropped = 0;
 	// Pretty-printed wire lines keyed by `record.sequence`. Pretty-printing is
 	// the JSON.parse + JSON.stringify per `data:` line, so we cache the result —
 	// the render path runs on every keypress and scroll update.
@@ -123,8 +145,7 @@ export class RawSseViewerComponent implements Component {
 		}
 
 		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
-			this.dispose();
-			this.#onExit();
+			this.#close();
 			return;
 		}
 
@@ -133,34 +154,50 @@ export class RawSseViewerComponent implements Component {
 			return;
 		}
 
-		if (matchesKey(keyData, "up")) {
-			this.#frame.scroll(-1);
-			this.#onUpdate?.();
-			return;
-		}
-
-		if (matchesKey(keyData, "down")) {
-			this.#frame.scroll(1);
-			this.#onUpdate?.();
-			return;
-		}
-
-		if (matchesKey(keyData, "pageUp")) {
-			this.#frame.scroll(-this.#frame.getBodyHeight());
-			this.#onUpdate?.();
-			return;
-		}
-
-		if (matchesKey(keyData, "pageDown")) {
-			this.#frame.scroll(this.#frame.getBodyHeight());
-			this.#onUpdate?.();
-			return;
-		}
+		const by: TspScrollBy | undefined = matchesKey(keyData, "up")
+			? "line-up"
+			: matchesKey(keyData, "down")
+				? "line-down"
+				: matchesKey(keyData, "pageUp")
+					? "page-up"
+					: matchesKey(keyData, "pageDown")
+						? "page-down"
+						: matchesKey(keyData, "home")
+							? "start"
+							: matchesKey(keyData, "end")
+								? "end"
+								: undefined;
+		if (by) this.#scroll(by);
+	}
 
-		if (matchesKey(keyData, "end")) {
-			this.#frame.setFollowTail(true);
-			this.#onUpdate?.();
+	/**
+	 * Scroll keys move the row frame and, natively, ask the terminal to move
+	 * the stream block the same way (`end` follows the tail again).
+	 */
+	#scroll(by: TspScrollBy): void {
+		const page = this.#frame.getBodyHeight();
+		switch (by) {
+			case "line-up":
+				this.#frame.scroll(-1);
+				break;
+			case "line-down":
+				this.#frame.scroll(1);
+				break;
+			case "page-up":
+				this.#frame.scroll(-page);
+				break;
+			case "page-down":
+				this.#frame.scroll(page);
+				break;
+			case "start":
+				this.#frame.setScrollOffset(0);
+				break;
+			case "end":
+				this.#frame.setFollowTail(true);
+				break;
 		}
+		this.#nativeScroll = { by, n: (this.#nativeScroll?.n ?? 0) + 1 };
+		this.#onUpdate?.();
 	}
 
 	#handleMouse(event: SgrMouseEvent): boolean {
@@ -187,12 +224,154 @@ export class RawSseViewerComponent implements Component {
 
 	invalidate(): void {
 		this.#frame.invalidate();
+		this.#native.clear();
+		this.#nativeHead.clear();
+		this.#nativeBody.clear();
 	}
 
 	render(width: number): readonly string[] {
 		return this.#frame.render(Math.max(MIN_VIEWER_WIDTH, width));
 	}
 
+	/** The action bar's buttons run the same code as their keys. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type !== "action") return;
+		if (event.act === "copy") this.#copyAll();
+		else if (event.act === "close") this.#close();
+	}
+
+	/**
+	 * The stream as a page of its own: the capture counters over the wire
+	 * text, one `ansi` block that fills the page, scrolls itself and follows
+	 * its tail until the user scrolls away (Tern-local, so no follow state
+	 * here; the scroll keys reach it as `scroll` requests). The copy status
+	 * and the buttons are this component's own node, docked under the page
+	 * so they never scroll away.
+	 */
+	describeScreen(): NativeScreen {
+		const snapshot = this.#buffer.snapshot();
+		const stream = this.#feedNative(snapshot);
+		const head = this.#nativeHead.get(
+			[snapshot.totalEvents, snapshot.records.length, snapshot.droppedRecords, snapshot.lastUpdatedAt],
+			() => this.#describeHead(snapshot),
+		);
+		const body = this.#nativeBody.get([stream, this.#nativeScroll], () =>
+			stream.length > 0
+				? {
+						...node(
+							"ansi",
+							{ text: stream, follow: true, role: "omp.debug.stream", max: { h: 1 } },
+							undefined,
+							"stream",
+						),
+						scroll: this.#nativeScroll,
+					}
+				: keyed(
+						col(
+							[
+								text("No raw SSE frames captured yet", { role: "omp.app.empty-title" }),
+								text([
+									span("HTTP SSE providers populate this view while a model response is streaming.", "muted"),
+								]),
+							],
+							{ gap: "xs", align: "center", role: "omp.app.empty" },
+						),
+						"empty",
+					),
+		);
+		return { role: "omp.debug", main: [head, body], dock: [this] };
+	}
+
+	/** The docked bar under the stream page: the copy status and the buttons. */
+	describe(): NativeNode {
+		return this.#native.get([this.#statusMessage, this.#statusFailed], () =>
+			col(
+				compact([
+					this.#statusMessage !== undefined &&
+						keyed(
+							text([span(this.#statusMessage, this.#statusFailed ? "error" : "success")], {
+								wrap: "word",
+								role: "omp.app.status",
+							}),
+							"status",
+						),
+					actionBar([
+						actionButton("Copy raw", "copy", { keys: "ctrl+c", tone: "accent" }),
+						null,
+						actionButton("Close", "close", { keys: "escape" }),
+					]),
+				]),
+				{ role: "omp.debug.bar", gap: "sm" },
+			),
+		);
+	}
+
+	#describeHead(snapshot: RawSseDebugSnapshot): NativeNode {
+		const stats = [
+			span(`${snapshot.totalEvents} events`, "num"),
+			span(" · ", "dim"),
+			span(`${snapshot.records.length} records`, "num"),
+		];
+		if (snapshot.droppedRecords > 0) {
+			stats.push(span(" · ", "dim"), span(`${snapshot.droppedRecords} dropped`, "warning"));
+		}
+		stats.push(
+			span(" · ", "dim"),
+			snapshot.lastUpdatedAt
+				? span(`last ${formatRawSseIsoTime(snapshot.lastUpdatedAt)}`, "muted")
+				: span("waiting for first frame", "muted"),
+		);
+		return keyed(
+			row([text("Raw provider stream", { role: "omp.app.title" }), text(stats, { truncate: "end" })], {
+				gap: "sm",
+				align: "center",
+				role: "omp.app.head",
+			}),
+			"head",
+		);
+	}
+
+	/**
+	 * Brings {@link #nativeText} up to the live window: appends the records
+	 * after {@link #nativeLast}, so evictions never rewrite what the terminal
+	 * already holds. Starts over once the text outgrows its cap or the buffer
+	 * was cleared.
+	 */
+	#feedNative(snapshot: RawSseDebugSnapshot): string {
+		const records = snapshot.records;
+		const last = records.at(-1)?.sequence ?? 0;
+		if (
+			this.#nativeText.length > NATIVE_STREAM_CHAR_CAP ||
+			last < this.#nativeLast ||
+			snapshot.totalEvents < this.#nativeEvents ||
+			snapshot.droppedRecords < this.#nativeDropped
+		) {
+			this.#nativeText = "";
+			this.#nativeLast = 0;
+		}
+		this.#nativeEvents = snapshot.totalEvents;
+		this.#nativeDropped = snapshot.droppedRecords;
+		if (last === this.#nativeLast) return this.#nativeText;
+		let fed = this.#nativeText;
+		for (const record of records) {
+			if (record.sequence <= this.#nativeLast) continue;
+			for (const line of this.#prettyLinesFor(record)) fed += `${sanitizeDisplayText(line)}\n`;
+			if (record.kind === "event" && record.truncated) {
+				fed += `${theme.fg("warning", `: omp-debug-event-truncated originalChars=${record.originalChars}`)}\n`;
+			}
+			fed += "\n";
+		}
+		this.#nativeText = fed;
+		this.#nativeLast = last;
+		this.#pruneCache(records[0]!.sequence);
+		return fed;
+	}
+
+	#close(): void {
+		this.dispose();
+		this.#onExit();
+	}
+
 	#renderRawLines(innerWidth: number): string[] {
 		const snapshot = this.#buffer.snapshot();
 		if (snapshot.records.length === 0) {
@@ -264,6 +443,7 @@ export class RawSseViewerComponent implements Component {
 		if (payload.trim().length === 0) {
 			const message = "No raw SSE frames to copy";
 			this.#statusMessage = message;
+			this.#statusFailed = true;
 			this.#onStatus?.(message);
 			this.#onUpdate?.();
 			return;
@@ -273,10 +453,12 @@ export class RawSseViewerComponent implements Component {
 			this.#deps.copyToClipboard(payload);
 			const message = "Copied raw SSE stream";
 			this.#statusMessage = message;
+			this.#statusFailed = false;
 			this.#onStatus?.(message);
 		} catch (error) {
 			const message = error instanceof Error ? error.message : String(error);
 			this.#statusMessage = `Copy failed: ${message}`;
+			this.#statusFailed = true;
 		}
 		this.#onUpdate?.();
 	}

package/src/native/apply.ts

@@ -212,7 +212,8 @@ export class TspDocument {
 				this.#focus = id;
 				return;
 			}
-			case "reveal": {
+			case "reveal":
+			case "scroll": {
 				const [, id] = op;
 				this.#node(id);
 				return;

package/src/native/backend.ts

@@ -64,6 +64,18 @@ export interface NativeHost {
 	overlays(): readonly NativeOverlay[];
 	/** Component receiving keyboard input. */
 	focused(): Component | null;
+	/**
+	 * The user clicked into a node described by `owners[0]` (then the
+	 * components containing it, innermost first): move keyboard focus there.
+	 * `field` is the outermost owner that takes keys and whose focus target is
+	 * the clicked `editor`/`input`, if any; `sheet` tells the overlays that
+	 * don't hold the keys while the user works beside them.
+	 */
+	focusFromPointer(
+		owners: readonly Component[],
+		field: Component | null,
+		sheet: (overlay: Component) => boolean,
+	): void;
 	requestRender(): void;
 	/** The terminal switched appearance. */
 	appearanceChanged(dark: boolean): void;
@@ -661,6 +673,16 @@ export class NativeBackend {
 			case "edit":
 				this.#routeUiEvent(event);
 				return;
+			case "focus": {
+				const reconciler = this.#surfaceFor(event.sf)?.reconciler;
+				const owners = reconciler?.owners(event.id) ?? [];
+				if (!reconciler || owners.length === 0) return;
+				const field =
+					owners.findLast(owner => owner.handleInput && reconciler.focusTarget(owner) === event.id) ?? null;
+				this.#host.focusFromPointer(owners, field, overlay => overlay.nativeSheet?.(this.#cx) === true);
+				this.#host.requestRender();
+				return;
+			}
 		}
 	}