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

package/src/native/node.ts

@@ -28,6 +28,11 @@ export type NativeNode = {
 		 * or reordered so their ids and terminal-side view state survive.
 		 */
 		readonly key?: string;
+		/**
+		 * Scroll the node into view, placed like the `reveal` op, when it is
+		 * added. Key a node by what it points at to reveal it again on a move.
+		 */
+		readonly reveal?: "start" | "end" | "nearest";
 	};
 }[TspKind];
 
@@ -60,6 +65,15 @@ export interface NativeSurface {
 	readonly dock: readonly NativeChild[];
 }
 
+/**
+ * The screen surface a fullscreen overlay fills as a page of its own (see
+ * `Component.describeScreen`): its regions plus the surface `role`, which the
+ * terminal exposes to styling.
+ */
+export interface NativeScreen extends NativeSurface {
+	readonly role: string;
+}
+
 /**
  * A user action on a node a component described, routed back to that
  * component. `key` is the node's key path inside the component (`""` for the
@@ -83,7 +97,100 @@ export type NativeUiEvent =
 			readonly key: string;
 			readonly item: string;
 			readonly value: boolean | number | string | readonly string[] | null;
-	  };
+	  }
+	/** An edit over the terminal's own selection in an `editor`/`input` node (see {@link NativeTextEdit}). */
+	| ({ readonly type: "edit"; readonly key: string } & NativeTextEdit);
+
+/**
+ * A primitive edit the terminal made over its own text selection (cut,
+ * typing, Backspace/Delete or paste over it, or collapsing it). Offsets are
+ * UTF-16 code units into the text last described (lines joined with `"\n"`),
+ * the coordinates of the node's `cursor`: replace `[from, to)` with `text`,
+ * then put the caret at `cursor` in the resulting text. `from == to` with an
+ * empty `text` is a pure caret move. `len` is the length of the text the
+ * terminal saw: when the current text differs (keys in flight changed it) the
+ * edit is stale and ignored.
+ */
+export interface NativeTextEdit {
+	readonly from: number;
+	readonly to: number;
+	readonly text: string;
+	readonly cursor: number;
+	readonly len: number;
+}
+
+/** A {@link NativeTextEdit} checked against the current text and clamped, ready to apply. */
+export interface ResolvedTextEdit {
+	/** Replaced range in the current text, widened by the caller's `widen`. */
+	readonly from: number;
+	readonly to: number;
+	/** The cleaned replacement. */
+	readonly insert: string;
+	/** The whole text after the edit. */
+	readonly text: string;
+	/** Caret in {@link text}. */
+	readonly cursor: number;
+	/** Whether the text changes (false: a pure caret move). */
+	readonly changed: boolean;
+}
+
+/** `value` as an integer offset in `[0, max]` (anything non-finite is 0). */
+export function clampTextOffset(value: number, max: number): number {
+	return Number.isFinite(value) ? Math.min(Math.max(Math.trunc(value), 0), max) : 0;
+}
+
+/** Whether `offset` falls between the halves of a surrogate pair in `text`. */
+function splitsSurrogatePair(text: string, offset: number): boolean {
+	if (offset <= 0 || offset >= text.length) return false;
+	const high = text.charCodeAt(offset - 1);
+	const low = text.charCodeAt(offset);
+	return high >= 0xd800 && high <= 0xdbff && low >= 0xdc00 && low <= 0xdfff;
+}
+
+/**
+ * Check `edit` against `current` and resolve it: null when stale (`len`
+ * differs), else the range clamped (reversed ends swapped, never splitting a
+ * surrogate pair), widened by `widen` when non-empty, the replacement passed
+ * through `clean`, and the caret mapped from the text the terminal expects
+ * onto the text the edit actually produces.
+ */
+export function resolveTextEdit(
+	current: string,
+	edit: NativeTextEdit,
+	clean: (text: string) => string,
+	widen?: (from: number, to: number) => { from: number; to: number },
+): ResolvedTextEdit | null {
+	if (edit.len !== current.length) return null;
+	const size = current.length;
+	let from = clampTextOffset(edit.from, size);
+	let to = clampTextOffset(edit.to, size);
+	if (to < from) [from, to] = [to, from];
+	if (splitsSurrogatePair(current, from)) from--;
+	if (splitsSurrogatePair(current, to)) to++;
+	const raw = typeof edit.text === "string" ? edit.text : "";
+	const widened = widen && from < to ? widen(from, to) : { from, to };
+	const insert = raw ? clean(raw) : "";
+	const text = current.slice(0, widened.from) + insert + current.slice(widened.to);
+	// Where the terminal's caret sits in its own result (`[from, to)` replaced
+	// by `raw`), carried over to ours: widening swallows neighbours, cleaning
+	// may change the replacement's length.
+	const expected = clampTextOffset(edit.cursor, size - (to - from) + raw.length);
+	let cursor: number;
+	if (expected <= widened.from) cursor = expected;
+	else if (expected <= from) cursor = widened.from;
+	else if (expected < from + raw.length) cursor = widened.from + Math.min(expected - from, insert.length);
+	else cursor = widened.from + insert.length + Math.max(0, expected - from - raw.length - (widened.to - to));
+	cursor = Math.min(cursor, text.length);
+	if (splitsSurrogatePair(text, cursor)) cursor--;
+	return {
+		from: widened.from,
+		to: widened.to,
+		insert,
+		text,
+		cursor,
+		changed: widened.from !== widened.to || insert !== "",
+	};
+}
 
 /** The expanded state a `toggle` on the component's root node asks for, else undefined. */
 export function rootToggleExpanded(event: NativeUiEvent): boolean | undefined {

package/src/native/reconcile.ts

@@ -211,8 +211,8 @@ export class Reconciler {
 	#ops: TspOp[] = [];
 	#dels: Entry[] = [];
 	#settles: string[] = [];
-	/** Selected list items sent this frame, revealed once the frame's adds have landed. */
-	#reveals: string[] = [];
+	/** Selected list items and added `reveal` nodes sent this frame, revealed once the frame's adds have landed. */
+	#reveals: [id: string, at: "start" | "end" | "nearest"][] = [];
 	/** Wire ids `list.selected` keys resolved to (an unresolved key names no node to reveal). */
 	#selectedIds = new Set<string>();
 	#moves: PendingMove[] = [];
@@ -292,7 +292,7 @@ export class Reconciler {
 		}
 		this.#parked = [];
 		for (const id of this.#settles) this.#ops.push(["settle", id]);
-		for (const id of this.#reveals) this.#ops.push(["reveal", id, "nearest"]);
+		for (const [id, at] of this.#reveals) this.#ops.push(["reveal", id, at]);
 		const ops = this.#ops;
 		this.#ops = [];
 		return this.#gone.size === 0 ? ops : ops.filter(op => !this.#touchesGone(op));
@@ -716,6 +716,7 @@ export class Reconciler {
 
 	/** A full wire subtree for an entry; nested components get states (or pending moves when mounted elsewhere). */
 	#materialize(entry: NodeEntry, walk: Walk): TspNode {
+		if (entry.node.reveal) this.#reveals.push([entry.id, entry.node.reveal]);
 		const entries = this.#entries(entry.node.c, entry.keypath, entry.owner, entry.hoist, walk);
 		const children: TspNode[] = [];
 		for (let i = 0; i < entries.length; i++) {
@@ -779,7 +780,7 @@ export class Reconciler {
 
 	/** A list's selection went out (on add or change): scroll it into view at frame end. */
 	#noteSelected(selected: unknown): void {
-		if (typeof selected === "string" && this.#selectedIds.has(selected)) this.#reveals.push(selected);
+		if (typeof selected === "string" && this.#selectedIds.has(selected)) this.#reveals.push([selected, "nearest"]);
 	}
 
 	/** Move components an `add` left out into their new parent, last first so every `before` exists. */

package/src/overlays/agent-hub-projection.ts

@@ -110,6 +110,31 @@ function readSessionMetrics(session: NonNullable<AgentRecordLike["session"]>): A
 	}
 }
 
+/** Live session whose own messages back a row's metrics when no observer progress exists. */
+export function hubFallbackStatsSession<TRecord extends AgentRecordLike>(
+	ref: TRecord,
+	observed: ObservableSession | undefined,
+): NonNullable<TRecord["session"]> | undefined {
+	if (observed?.progress) return undefined;
+	const session = ref.session;
+	return session && typeof session.getSessionStats === "function" ? session : undefined;
+}
+
+/**
+ * One roster row's usage: live observer progress, then persisted history, then
+ * the cached fallback read of a live session (populated by {@link aggregateMetrics}).
+ */
+export function hubRowMetrics<TRecord extends AgentRecordLike>(
+	ref: TRecord,
+	observed: ObservableSession | undefined,
+	sessionMetrics: WeakMap<object, { metrics: AgentMetrics | undefined }>,
+): AgentMetrics | undefined {
+	if (observed?.progress) return progressMetrics(observed);
+	if (ref.history?.metrics) return ref.history.metrics;
+	const session = hubFallbackStatsSession(ref, observed);
+	return session ? sessionMetrics.get(session)?.metrics : undefined;
+}
+
 export function aggregateMetrics<TRecord extends AgentRecordLike>(args: {
 	rows: readonly TRecord[];
 	observedById: ReadonlyMap<string, ObservableSession>;

package/src/overlays/agent-hub.ts

@@ -49,7 +49,8 @@ import {
 	type AgentMetrics,
 	type AggregateMetrics,
 	aggregateMetrics,
-	progressMetrics,
+	hubFallbackStatsSession,
+	hubRowMetrics,
 	projectAgentTree,
 	STATUS_ORDER,
 } from "./agent-hub-projection";
@@ -1661,19 +1662,7 @@ export class AgentHubOverlayComponent<TRecord extends AgentRecordLike = AgentRec
 	}
 
 	#metricsFor(ref: TRecord, observed: ObservableSession | undefined): AgentMetrics | undefined {
-		if (observed?.progress) return progressMetrics(observed);
-		if (ref.history?.metrics) return ref.history.metrics;
-		const session = this.#fallbackStatsSession(ref, observed);
-		return session ? this.#sessionMetrics.get(session)?.metrics : undefined;
-	}
-
-	#fallbackStatsSession(
-		ref: TRecord,
-		observed: ObservableSession | undefined,
-	): NonNullable<TRecord["session"]> | undefined {
-		if (observed?.progress) return undefined;
-		const session = ref.session;
-		return session && typeof session.getSessionStats === "function" ? session : undefined;
+		return hubRowMetrics(ref, observed, this.#sessionMetrics);
 	}
 
 	// ========================================================================
@@ -2009,7 +1998,7 @@ export class AgentHubOverlayComponent<TRecord extends AgentRecordLike = AgentRec
 			rows: this.#rows,
 			observedById: this.#observedById,
 			metricsFor: (ref, observed) => this.#metricsFor(ref, observed),
-			fallbackStatsSession: (ref, observed) => this.#fallbackStatsSession(ref, observed),
+			fallbackStatsSession: hubFallbackStatsSession,
 			sessionMetrics: this.#sessionMetrics,
 			refreshFallback,
 		});

package/src/overlays/ask-dialog.ts

@@ -117,45 +117,32 @@ const DIALOG_HEIGHT_RATIO = 0.7;
 const MIN_DIALOG_ROWS = 12;
 const MIN_BODY_ROWS = 5;
 const MAX_HEADER_CHIP_WIDTH = 16;
-/** Maximum number of title lines shown in the prompt editor overlay, so a
- *  long or multi-line question cannot push the input row off-screen. Mirrors
- *  the bounded-title pattern from the legacy ask path without its option-window
- *  coupling. */
-const MAX_PROMPT_TITLE_ROWS = 3;
-/** Border (2) + padX (2) columns consumed by the HookEditor chrome. */
-const PROMPT_TITLE_CHROME_COLUMNS = 4;
 /** Maximum number of wrapped lines for an in-body question header, so a long
  *  or multi-line question cannot push the option list off-screen. Mirrors the
- *  row-cap pattern used by boundPromptTitle for the prompt editor overlay. */
+ *  row-cap pattern of the prompt editor's title (`boundPromptTitle`). */
 const MAX_HEADER_ROWS = 4;
 /** Maximum number of wrapped lines shown for an option description before
  *  Ctrl+O expansion. Mirrors the header row-cap above so long descriptions
  *  cannot push later options off-screen. */
 const MAX_DESC_ROWS = 2;
 
-function promptTitleContentWidth(): number {
-	const cols = process.stdout.columns ?? 80;
-	return Math.max(1, cols - PROMPT_TITLE_CHROME_COLUMNS);
-}
-
-/** Bound a prompt editor title to a fixed row/width budget so long or
- *  multi-line questions stay usable inside the small prompt overlay. */
-export function boundPromptTitle(prefix: string, question: string): string {
-	const width = promptTitleContentWidth();
-	const flat = normalizedInlineInput(`${prefix}${question}`);
-	const wrapped = wrapTextWithAnsi(flat, width);
-	if (wrapped.length <= MAX_PROMPT_TITLE_ROWS) return wrapped.join("\n");
-	const kept = wrapped.slice(0, MAX_PROMPT_TITLE_ROWS - 1);
-	const last = truncateToWidth(wrapped[MAX_PROMPT_TITLE_ROWS - 1] ?? "", width, Ellipsis.Unicode);
-	return [...kept, last].join("\n");
+/** What a custom-answer or note prompt asks: the host shows `title` over `question` (`HookEditorOptions.question`). */
+export interface AskDialogPrompt {
+	/** `Custom answer`, `Note for <option>`. */
+	title: string;
+	/** The question being answered, verbatim. */
+	question: string;
 }
 
 interface AskDialogCallbacks {
 	onSubmit(result: ExtensionAskDialogSubmitResult): void;
 	onCancel(): void;
-	onPrompt(title: string, prefill?: string): Promise<string | undefined>;
+	onPrompt(prompt: AskDialogPrompt, prefill?: string): Promise<string | undefined>;
 	/** Prompt that accepts pasted images; without it, prompts use `onPrompt`. */
-	onImagePrompt?(title: string, prefill: AskDialogPromptValue | undefined): Promise<AskDialogPromptValue | undefined>;
+	onImagePrompt?(
+		prompt: AskDialogPrompt,
+		prefill: AskDialogPromptValue | undefined,
+	): Promise<AskDialogPromptValue | undefined>;
 }
 
 interface AskDialogInputGuard {
@@ -1296,12 +1283,12 @@ export class AskDialogComponent implements Component {
 	 * caller keeps one `await` before clearing `#promptActive`, which the host's restore relies on.
 	 */
 	#openPrompt(
-		title: string,
+		prompt: AskDialogPrompt,
 		prefill: AskDialogPromptValue | undefined,
 	): Promise<string | AskDialogPromptValue | undefined> {
 		return this.callbacks.onImagePrompt
-			? this.callbacks.onImagePrompt(title, prefill)
-			: this.callbacks.onPrompt(title, prefill?.text);
+			? this.callbacks.onImagePrompt(prompt, prefill)
+			: this.callbacks.onPrompt(prompt, prefill?.text);
 	}
 
 	async #promptForCustomInput(
@@ -1311,10 +1298,9 @@ export class AskDialogComponent implements Component {
 	): Promise<void> {
 		this.#promptActive = true;
 		try {
-			const title = boundPromptTitle("Custom answer: ", question.question);
 			const prefill =
 				state.customInput === undefined ? undefined : { text: state.customInput, images: state.customInputImages };
-			const result = await this.#openPrompt(title, prefill);
+			const result = await this.#openPrompt({ title: "Custom answer", question: question.question }, prefill);
 			if (result === undefined || this.#closed) return;
 			const input = splitPromptInput(result);
 			if (input.text.trim() === "") {
@@ -1350,11 +1336,13 @@ export class AskDialogComponent implements Component {
 	): Promise<void> {
 		this.#promptActive = true;
 		try {
-			const title = boundPromptTitle(`Note for ${rowItem.label}: `, question.question);
 			const isReedit = state.noteRowKey === rowItem.key;
 			const prefill =
 				isReedit && state.note !== undefined ? { text: state.note, images: state.noteImages } : undefined;
-			const result = await this.#openPrompt(title, prefill);
+			const result = await this.#openPrompt(
+				{ title: `Note for ${rowItem.label}`, question: question.question },
+				prefill,
+			);
 			if (result === undefined || this.#closed) return;
 			const note = splitPromptInput(result);
 			state.note = note.text;

package/src/overlays/copy-selector.ts

@@ -48,10 +48,10 @@ import { actionHint, hintsRow, type NativeHint, overlayCard } from "../native/ov
 import { CLOSE_ACTION, type PickerEvent, picker, pickerAction, pickerEvent } from "../native/picker";
 
 /** Key of the leading list item that replays the history older than the startup tail. */
-export const EARLIER_TURNS_KEY = "earlier";
+const EARLIER_TURNS_KEY = "earlier";
 
 /** Leading item of a truncated transcript list; selecting it loads the older turns. */
-export const earlierTurnsItem: NativeNode = node(
+const earlierTurnsItem: NativeNode = node(
 	"item",
 	{ label: [span("Earlier turns…", "muted")], hint: ["a"] },
 	undefined,
@@ -112,7 +112,7 @@ function entryTime(entry: TranscriptEntry): string {
  * One list item per outline target, keyed by the turn's opening entry id:
  * the plain turn summary as label, `detail` (or the entry time) on the right.
  */
-export function turnItem(target: OutlineTarget, detail?: TspText): NativeNode {
+function turnItem(target: OutlineTarget, detail?: TspText): NativeNode {
 	const entry = target.entries[0]!;
 	const { label, role } = turnSummary(entry);
 	const time = entryTime(entry);
@@ -164,14 +164,14 @@ function toolCallLabel(name: string, args: Record<string, unknown> | undefined):
 }
 
 /** The timeline pickers' one fact column: a user turn's clock time. */
-export const TIMELINE_COLUMNS: readonly TspPickerColumn[] = [{ id: "at", format: "dim", priority: 1 }];
+const TIMELINE_COLUMNS: readonly TspPickerColumn[] = [{ id: "at", format: "dim", priority: 1 }];
 
 /**
  * The `timeline` picker item of one outline target (rewind, copy), keyed by
  * the turn's opening entry id: user turns carry their `HH:MM`, pure tool turns
  * the tool's role and a `name target` label.
  */
-export function timelineItem(target: OutlineTarget): TspPickerItem {
+function timelineItem(target: OutlineTarget): TspPickerItem {
 	const entry = target.entries[0]!;
 	const id = target.turnId;
 	const summary = turnSummary(entry);
@@ -203,7 +203,7 @@ export function timelineItem(target: OutlineTarget): TspPickerItem {
 }
 
 /** Timeline picker items for `targets`, reused while `targets` is the same array. */
-export class TimelineItems {
+class TimelineItems {
 	#memo: { targets: readonly OutlineTarget[]; items: TspPickerItem[] } | undefined;
 
 	of(targets: readonly OutlineTarget[]): TspPickerItem[] {

package/src/overlays/error-banner.ts

@@ -19,16 +19,21 @@ const MAX_BANNER_ROWS = 4;
  * be missed. It is cleared when the next turn starts. The message wraps to the
  * render width and keeps {@link MAX_BANNER_ROWS} rows; the expand hint on the
  * overflow row reveals the full body inline in the transcript.
+ *
+ * Natively the transcript's error frame always shows the full message, so the
+ * strip is only a reminder and offers a Dismiss button that calls `onDismiss`.
  */
 export class ErrorBannerComponent extends Container {
 	readonly #message: string;
+	readonly #onDismiss: (() => void) | undefined;
 	/** Natively the strip shows the headline; Details unfolds the whole message in place. */
 	#expanded = false;
 	#native: NativeNode | undefined;
 
-	constructor(message: string) {
+	constructor(message: string, onDismiss?: () => void) {
 		super();
 		this.#message = plainText(message).trim();
+		this.#onDismiss = onDismiss;
 		this.addChild(new Spacer(1));
 		this.addChild(new DynamicBorder(str => theme.fg("error", str)));
 		this.addChild(
@@ -50,7 +55,7 @@ export class ErrorBannerComponent extends Container {
 	/**
 	 * An error-tinted strip pinned above the composer: the message's first line
 	 * (the transcript's error frame keeps the full message and its actions)
-	 * and a Details button that unfolds the rest here.
+	 * and a Details button that unfolds the rest here, then Dismiss.
 	 */
 	override describe(): NativeNode {
 		if (this.#native) return this.#native;
@@ -67,6 +72,7 @@ export class ErrorBannerComponent extends Container {
 		if (multiline || headline.length > 80) {
 			children.push(actionButton(this.#expanded ? "Less" : "Details", "details"));
 		}
+		if (this.#onDismiss) children.push(actionButton("Dismiss", "dismiss"));
 		this.#native = node(
 			"row",
 			{ role: "omp.errorBanner", tone: "error", gap: "sm", align: this.#expanded ? "start" : "center" },
@@ -76,7 +82,12 @@ export class ErrorBannerComponent extends Container {
 	}
 
 	handleNativeEvent(event: NativeUiEvent): void {
-		if (event.type !== "action" || event.act !== "details") return;
+		if (event.type !== "action") return;
+		if (event.act === "dismiss") {
+			this.#onDismiss?.();
+			return;
+		}
+		if (event.act !== "details") return;
 		this.#expanded = !this.#expanded;
 		this.#native = undefined;
 	}

package/src/overlays/hook-editor.ts

@@ -10,7 +10,18 @@
 import type { ImageContent } from "@oh-my-pi/pi-ai";
 import { compactImageMarkers, formatVisionMarker, PLACEHOLDER_REGEX } from "../prompt/composer-attachments";
 import { extractImagePastePathsFromText } from "../prompt/custom-editor";
-import { Editor, type Focusable, matchesKey, Spacer, Text, type TUI } from "../index";
+import {
+	Editor,
+	Ellipsis,
+	type Focusable,
+	matchesKey,
+	replaceTabs,
+	Spacer,
+	Text,
+	type TUI,
+	truncateToWidth,
+	wrapTextWithAnsi,
+} from "../index";
 import { BracketedPasteHandler } from "../bracketed-paste";
 import { getEditorTheme, theme } from "../theme/theme";
 import { matchesAppExternalEditor, matchesAppFollowUp, matchesAppInterrupt } from "../keybinding-matchers";
@@ -23,12 +34,39 @@ import { node, span } from "../native/describe";
 import type { DescribeContext, NativeChild, NativeNode } from "../native/node";
 import { hintsRow, type NativeHint, overlayCard } from "../native/overlay";
 import { plainText } from "../native/spans";
+import { sanitizeCarriageReturns } from "../render/render-utils";
+
+/** Most title rows the terminal prompt shows, so a long question cannot push the input row off-screen. */
+const MAX_PROMPT_TITLE_ROWS = 3;
+/** Border (2) + padX (2) columns consumed by the panel chrome. */
+const PROMPT_TITLE_CHROME_COLUMNS = 4;
+
+/**
+ * `prefix` and `question` flattened onto one line, wrapped to the terminal's width and cut to
+ * {@link MAX_PROMPT_TITLE_ROWS} rows (the last ends in `…` when cut). For terminal rendering only:
+ * native hosts get the question whole ({@link HookEditorOptions.question}).
+ */
+export function boundPromptTitle(prefix: string, question: string): string {
+	const width = Math.max(1, (process.stdout.columns ?? 80) - PROMPT_TITLE_CHROME_COLUMNS);
+	const flat = replaceTabs(`${prefix}${question}`).replace(/\s+/g, " ").trim();
+	const wrapped = wrapTextWithAnsi(flat, width);
+	if (wrapped.length <= MAX_PROMPT_TITLE_ROWS) return wrapped.join("\n");
+	const kept = wrapped.slice(0, MAX_PROMPT_TITLE_ROWS - 1);
+	const last = truncateToWidth(wrapped.slice(MAX_PROMPT_TITLE_ROWS - 1).join(" "), width, Ellipsis.Unicode);
+	return [...kept, last].join("\n");
+}
 
 export interface HookEditorOptions {
 	/** Edit text with the host's configured external editor. */
 	externalEditor?: (text: string) => Promise<string | null>;
 	/** When true, use prompt-style keybindings with the legacy ask prompt chrome. */
 	promptStyle?: boolean;
+	/**
+	 * The question the text answers (the ask tool's custom answers and notes). The terminal
+	 * shows it after `<title>: `, wrapped and cut to three rows; native hosts put it whole,
+	 * as markdown, under the title.
+	 */
+	question?: string;
 	/** Allow clipboard images to be attached to this prompt. */
 	acceptImages?: boolean;
 	/** Images already represented by markers in the prefilled text. */
@@ -85,9 +123,11 @@ export class HookEditorComponent extends OverlayPanel implements Focusable {
 		options?: HookEditorOptions,
 	) {
 		// First title line insets into the panel border; remaining lines (e.g. the
-		// bounded ask question under "◆ Other (type your own)") stay as body rows
-		// so they are never truncated into the one-row border.
-		const [titleLine = "", ...detailLines] = title.split("\n");
+		// bounded ask question) stay as body rows so they are never truncated into
+		// the one-row border.
+		const question = options?.question;
+		const terminalTitle = question === undefined ? title : boundPromptTitle(`${title}: `, question);
+		const [titleLine = "", ...detailLines] = terminalTitle.split("\n");
 		super(titleLine, "omp.overlay.hook-editor");
 
 		this.#tui = tui;
@@ -151,7 +191,16 @@ export class HookEditorComponent extends OverlayPanel implements Focusable {
 					externalHint,
 				];
 		const nativeChildren: NativeChild[] = [];
-		if (detailLines.length > 0) {
+		if (question !== undefined) {
+			nativeChildren.push(
+				node(
+					"md",
+					{ text: replaceTabs(sanitizeCarriageReturns(question)), role: "omp.ask.question" },
+					undefined,
+					"question",
+				),
+			);
+		} else if (detailLines.length > 0) {
 			nativeChildren.push(
 				node(
 					"text",
@@ -162,7 +211,11 @@ export class HookEditorComponent extends OverlayPanel implements Focusable {
 			);
 		}
 		nativeChildren.push(this.#editor, hintsRow(nativeHints));
-		this.#nativeRoot = overlayCard(this.nativeRole, plainText(titleLine), nativeChildren);
+		this.#nativeRoot = overlayCard(
+			this.nativeRole,
+			plainText(question === undefined ? titleLine : title),
+			nativeChildren,
+		);
 	}
 
 	/** The editor (which describes itself) under the title and detail lines, with the key hints below. */