@linxiraos/pi-tui 1.2.1 → 1.3.0

package/src/overlays/btw-history-panel.ts

@@ -37,7 +37,7 @@ import { clampSelection, contentRowWidth, padLinesToHeight, renderScrollableList
 import type { TspScrollBy, TspSpan } from "@linxiraos/pi-wire";
 import type { NativeChild, NativeNode, NativeScroll, NativeUiEvent } from "../native/node";
 import { col, md, node, span, text } from "../native/describe";
-import { actionBar, actionButton, actionHint, hintsRow, type NativeHint, statusHintsRow } from "../native/overlay";
+import { actionBar, actionButton } from "../native/overlay";
 
 interface BtwHistoryPanelOptions {
 	records: readonly BtwHistoryRecord[];
@@ -97,6 +97,25 @@ const STATUS: Record<BtwHistoryRecord["status"], { label: string; color: ThemeCo
 	interrupted: { label: "Interrupted", color: "warning" },
 };
 
+const SHEET = { role: "zeta.overlay.btwHistory", anchor: "center", size: "lg", head: "BTW history" } as const;
+const EMPTY_SHEET = { role: "zeta.overlay.btwHistory", anchor: "center", size: "md", head: "BTW history" } as const;
+
+/** A status worth naming next to an answer natively; an answered question needs none. */
+function describeStatus(status: BtwHistoryTurn["status"]): TspSpan[] | undefined {
+	switch (status) {
+		case "running":
+			return [span("●", "accent", { fx: "pulse" }), span(" Answering", "accent")];
+		case "cancelled":
+			return [span("Cancelled", "warning")];
+		case "error":
+			return [span("Failed", "error")];
+		case "interrupted":
+			return [span("Interrupted", "warning")];
+		case "complete":
+			return undefined;
+	}
+}
+
 /** Session-local side questions. Selecting or copying never promotes them into chat. */
 export class BtwHistoryPanel implements Component, Focusable {
 	readonly #options: BtwHistoryPanelOptions;
@@ -283,6 +302,7 @@ export class BtwHistoryPanel implements Component, Focusable {
 	#openComposer(record: BtwHistoryRecord): void {
 		const input = new Input();
 		input.prompt = theme.fg("accent", "Follow up: ");
+		input.placeholder = "Ask about this answer…";
 		if (this.#options.spaceHoldKeys !== undefined) input.spaceHold.keys = this.#options.spaceHoldKeys;
 		input.spaceHold.handler = this.#options.spaceHold?.(input);
 		const composer: FollowUpComposer = { recordId: record.id, input, abortController: new AbortController() };
@@ -349,8 +369,9 @@ export class BtwHistoryPanel implements Component, Focusable {
 	}
 	handleInput(data: string): void {
 		if (this.#composer) {
-			// The input owns every key, including panel shortcuts and pasted text.
-			this.#composer.input.handleInput(data);
+			// The input owns every key it handles, including panel shortcuts and
+			// pasted text; the line keys it ignores still scroll the answer above.
+			if (!this.#composer.input.handleInput(data)) this.#scrollDetail(data);
 			this.#options.requestRender();
 			return;
 		}
@@ -397,33 +418,41 @@ export class BtwHistoryPanel implements Component, Focusable {
 			else if (matchesKey(data, "home")) this.#select(0);
 			else if (matchesKey(data, "end")) this.#select(this.#records.length - 1);
 			else return;
-		} else {
-			const by: TspScrollBy | undefined = matchesSelectUp(data)
-				? "line-up"
-				: matchesSelectDown(data)
-					? "line-down"
-					: matchesSelectPageUp(data)
-						? "page-up"
-						: matchesSelectPageDown(data)
-							? "page-down"
-							: matchesKey(data, "home")
-								? "start"
-								: matchesKey(data, "end")
-									? "end"
-									: undefined;
-			if (by === "line-up") this.#detail.scroll(-1);
-			else if (by === "line-down") this.#detail.scroll(1);
-			else if (by === "page-up") this.#detail.page(-1);
-			else if (by === "page-down") this.#detail.page(1);
-			else if (!this.#detail.handleScrollKey(data)) return;
-			if (by) this.#scroll = { by, n: (this.#scroll?.n ?? 0) + 1 };
-			this.#followLatest = matchesKey(data, "end");
+		} else if (!this.#scrollDetail(data)) {
+			return;
 		}
 		this.#options.requestRender();
 	}
 
-	/** A large glass sheet titled "BTW history". */
-	readonly nativeOverlay = { role: "zeta.overlay.btwHistory", size: "lg", head: "BTW history" } as const;
+	/** Apply an answer-pane scroll key; a scroll stops following the newest row unless it is End. */
+	#scrollDetail(data: string): boolean {
+		const by: TspScrollBy | undefined = matchesSelectUp(data)
+			? "line-up"
+			: matchesSelectDown(data)
+				? "line-down"
+				: matchesSelectPageUp(data)
+					? "page-up"
+					: matchesSelectPageDown(data)
+						? "page-down"
+						: matchesKey(data, "home")
+							? "start"
+							: matchesKey(data, "end")
+								? "end"
+								: undefined;
+		if (by === "line-up") this.#detail.scroll(-1);
+		else if (by === "line-down") this.#detail.scroll(1);
+		else if (by === "page-up") this.#detail.page(-1);
+		else if (by === "page-down") this.#detail.page(1);
+		else if (!this.#detail.handleScrollKey(data)) return false;
+		if (by) this.#scroll = { by, n: (this.#scroll?.n ?? 0) + 1 };
+		this.#followLatest = matchesKey(data, "end");
+		return true;
+	}
+
+	/** A large glass sheet (the list beside the reader), palette-sized while there is nothing to list. */
+	get nativeOverlay(): NonNullable<Component["nativeOverlay"]> {
+		return this.#records.length > 0 ? SHEET : EMPTY_SHEET;
+	}
 
 	describe(): NativeNode {
 		const record = this.#selected();
@@ -445,55 +474,30 @@ export class BtwHistoryPanel implements Component, Focusable {
 		) {
 			return memo.node;
 		}
-		// Plain columns, not `section`s: Tern draws a section as a foldable `##` heading,
-		// and a flex item's min-content width (a long code line in the answer) would
-		// crush the list pane. The answer pane may shrink to nothing; the list may not.
-		// With one side question the list and the pane labels are noise: the answer alone.
-		const showList = this.#records.length > 1;
-		const detail = this.#describeDetail(record, copied);
-		const answerPane: NativeNode = {
-			...node(
-				"col",
-				{ gap: "sm", grow: 1, basis: 0, min: { w: 0 } },
-				showList ? [text(this.#describeFocusLabel("answer"), { truncate: "end", lines: 1 }), detail] : [detail],
-				"details",
-			),
-			// Natively the sheet body is the scroller; arrow/page keys on the answer pane move it.
-			scroll: this.#scroll,
-		};
-		const panes: NativeChild[] = showList
-			? [
-					node(
-						"col",
-						{ gap: "sm", shrink: 0, basis: 0.3, max: { w: "40ch" } },
-						[text(this.#describeFocusLabel("list"), { truncate: "end", lines: 1 }), this.#describeList()],
-						"history",
-					),
-					answerPane,
-				]
-			: [answerPane];
-		const children: NativeChild[] = [node("row", { gap: "lg", align: "start" }, panes, "body")];
-		if (composer) {
-			composer.input.focused = this.#focused;
-			const lines: NativeChild[] = [
-				text([span(`Topic: ${sanitizeDisplayLine(record?.question ?? "")}`, "dim")], { truncate: "end" }),
-			];
-			if (composer.notice) {
-				lines.push(text([span(composer.notice, this.#followUpPending ? "dim" : "warning")], { wrap: "word" }));
-			}
-			lines.push(composer.input);
-			children.push(node("col", undefined, lines, "composer"));
+		// The body row fills the sheet: the list and the reader scroll on their own,
+		// so the list stays put while a long answer scrolls. Plain columns, not
+		// `section`s (Tern draws those as foldable `##` headings). With one side
+		// question the list is noise: the reader alone.
+		const children: NativeChild[] = [];
+		if (record) {
+			const reader: NativeNode = {
+				...node(
+					"col",
+					{ role: "zeta.btw.reader", grow: 1, basis: 0, min: { w: 0 } },
+					[this.#describeThread(record)],
+					"details",
+				),
+				// Arrow/page keys on the answer pane move its scroller.
+				scroll: this.#scroll,
+			};
+			const panes = this.#records.length > 1 ? [this.#describeList(), reader] : [reader];
+			children.push(node("row", { role: "zeta.btw.body" }, panes, "body"));
+		} else {
+			children.push(this.#describeEmpty());
 		}
-		children.push({ ...this.#describeFooter(record, canFollowUp, copied), key: "footer" });
-		// Clicking Close always dismisses the sheet; the Esc keycap only shows where Esc does too.
-		const running = record !== undefined && getBtwLatestTurn(record).status === "running";
-		const escapeCloses = !composer && !(running && !this.#options.escapeHides);
-		children.push({
-			...actionBar([null, actionButton("Close", "close", escapeCloses ? { keys: "escape" } : undefined)]),
-			key: "actions",
-		});
-		// The sheet is the frame (`nativeOverlay`): a borderless column.
-		const described = col(children, { gap: "md" });
+		children.push(this.#describeActions(record, canFollowUp, copied));
+		// The sheet is the frame (`nativeOverlay`); its last row is the pinned footer.
+		const described = col(children, { gap: "none" });
 		this.#native = {
 			records: this.#records,
 			selectedId: this.#selectedId,
@@ -511,8 +515,31 @@ export class BtwHistoryPanel implements Component, Focusable {
 	}
 
 	handleNativeEvent(event: NativeUiEvent): void {
-		if (event.type === "action" && event.act === "close") {
-			this.#options.onClose();
+		if (event.type === "action") {
+			const record = this.#selected();
+			switch (event.act) {
+				case "close":
+					this.#options.onClose();
+					return;
+				case "copy-answer":
+					if (record && getBtwCopyText(record) !== undefined) this.#options.onCopy(record);
+					break;
+				case "follow-up":
+					if (record) this.openFollowUp(record.id);
+					break;
+				case "stop":
+					if (record && getBtwLatestTurn(record).status === "running") this.#options.onCancel(record);
+					break;
+				case "send":
+					this.#composer?.input.submit();
+					break;
+				case "discard":
+					this.#composer?.input.onEscape?.();
+					break;
+				default:
+					return;
+			}
+			this.#options.requestRender();
 			return;
 		}
 		if ((event.type !== "select" && event.type !== "activate") || this.#composer) return;
@@ -525,96 +552,130 @@ export class BtwHistoryPanel implements Component, Focusable {
 		this.#options.requestRender();
 	}
 
-	#describeFocusLabel(focus: "list" | "answer"): TspSpan[] {
-		const label = focus === "list" ? `History (${this.#records.length})` : "Details";
-		return this.#focus === focus ? [span(`${theme.nav.cursor} ${label}`, "accent strong")] : [span(label, "muted")];
-	}
-
+	/**
+	 * The questions, newest first, as two-line palette rows: the question, then
+	 * its time, follow-up count and any status other than answered. While the
+	 * reader has the keys the selection rests (`zeta.btw.list.idle`).
+	 */
 	#describeList(): NativeNode {
 		const items = this.#records.map(record => {
-			const status = STATUS[getBtwLatestTurn(record).status];
-			return node(
-				"item",
-				{
-					label: sanitizeDisplayLine(record.question),
-					detail: [span(this.#timeFormat.format(record.createdAt), "dim")],
-					value: [span(status.label, status.color)],
-				},
-				undefined,
-				record.id,
-			);
+			const followUps = record.followUps?.length ?? 0;
+			const detail: TspSpan[] = [span(this.#timeFormat.format(record.createdAt), "mono")];
+			if (followUps > 0) detail.push(span(` · ${followUps} follow-up${followUps === 1 ? "" : "s"}`));
+			const status = describeStatus(getBtwLatestTurn(record).status);
+			// The question is markdown: its `code` reads as mono, without the backticks.
+			const label = sanitizeDisplayLine(record.question)
+				.split(/`([^`]+)`/)
+				.flatMap((part, index) => (part ? [span(part, index % 2 === 1 ? "mono" : undefined)] : []));
+			return node("item", { label, detail, ...(status ? { value: status } : {}) }, undefined, record.id);
 		});
+		const role = this.#focus === "list" ? "zeta.btw.list" : "zeta.btw.list.idle";
 		return node(
-			"list",
-			{
-				selected: this.#selectedId ?? null,
-				empty: [span("No side questions yet. Use /btw QUESTION to start one.", "muted")],
-			},
-			items,
-			"records",
+			"col",
+			{ role: "zeta.btw.history", shrink: 0 },
+			[node("list", { role, selected: this.#selectedId ?? null }, items, "records")],
+			"history",
 		);
 	}
 
-	#describeDetail(record: BtwHistoryRecord | undefined, copied: boolean): NativeNode {
-		if (!record)
-			return text([span("No side questions yet. Use /btw QUESTION to start one.", "muted")], { wrap: "word" });
-		const children: NativeChild[] = [];
-		if (copied)
-			children.push(node("text", { spans: [span("✓ Copied to clipboard", "success")] }, undefined, "copied"));
+	/** The selected side question as a short document: the asked question titles each answer. */
+	#describeThread(record: BtwHistoryRecord): NativeNode {
 		const turns = getBtwTurns(record);
-		for (let index = 0; index < turns.length; index++) {
-			if (index > 0) children.push(node("rule", undefined, undefined, `rule-${index}`));
-			children.push(this.#describeTurn(turns[index]!, `turn-${index}`));
-		}
-		return col(children, { gap: "md" });
+		const children: NativeChild[] = turns.map((turn, index) => this.#describeTurn(turn, index, `turn-${index}`));
+		if (this.#composer) children.push(this.#describeComposer(this.#composer));
+		return node("col", { role: "zeta.btw.thread" }, children, "thread");
 	}
 
-	#describeTurn(turn: BtwHistoryTurn, key: string): NativeNode {
-		const status = STATUS[turn.status];
-		const answer = turn.answer.trim()
-			? md(sanitizeDisplayText(turn.answer), { stream: turn.status === "running" })
-			: text([span(turn.status === "running" ? "Waiting for response…" : "No answer text.", "dim")]);
-		// Plain labels, not `section`s (Tern draws those as foldable `##` headings);
-		// the question stays markdown so its inline code and links render.
+	#describeTurn(turn: BtwHistoryTurn, index: number, key: string): NativeNode {
+		const meta: TspSpan[] =
+			index === 0
+				? [span(this.#dateFormat.format(turn.createdAt))]
+				: [span("Follow-up · "), span(this.#timeFormat.format(turn.createdAt))];
+		const status = describeStatus(turn.status);
+		if (status) meta.push(span("  ·  "), ...status);
+		// The question stays markdown so its inline code and links render.
 		const children: NativeChild[] = [
-			text(
-				[
-					span("Question", "accent strong"),
-					span(" · ", "dim"),
-					span(status.label, status.color),
-					span(` · ${this.#dateFormat.format(turn.createdAt)}`, "dim"),
-				],
-				{ wrap: "word" },
-			),
-			md(sanitizeDisplayText(turn.question)),
-			text([span("Answer", "accent strong")]),
-			answer,
+			md(sanitizeDisplayText(turn.question), { role: index === 0 ? "zeta.btw.question" : "zeta.btw.followup" }),
+			text(meta, { role: "zeta.btw.meta", truncate: "end", lines: 1 }),
 		];
-		if (turn.error) children.push(text([span(sanitizeErrorLine(turn.error), "error")], { wrap: "word" }));
-		if (turn.status === "interrupted") children.push(text([span("Not resumed in this view.", "muted")]));
-		return node("col", { gap: "sm" }, children, key);
+		// A failed turn with no text says only why it failed.
+		if (turn.answer.trim() || !turn.error) {
+			const answer = turn.answer.trim()
+				? md(sanitizeDisplayText(turn.answer), { stream: turn.status === "running" })
+				: text([span(turn.status === "running" ? "Thinking…" : "No answer text.", "dim")], {
+						role: "zeta.btw.pending",
+					});
+			children.push(node("col", { role: "zeta.btw.answer" }, [answer], "answer"));
+		}
+		if (turn.error) {
+			children.push(text([span(sanitizeErrorLine(turn.error), "error")], { role: "zeta.btw.error", wrap: "word" }));
+		}
+		if (turn.status === "interrupted") {
+			children.push(text([span("Not resumed in this view.", "muted")], { role: "zeta.btw.note" }));
+		}
+		return node("col", { role: "zeta.btw.turn" }, children, key);
+	}
+
+	/** The follow-up field under the newest answer, where the conversation continues. */
+	#describeComposer(composer: FollowUpComposer): NativeNode {
+		composer.input.focused = this.#focused;
+		const children: NativeChild[] = [composer.input];
+		if (composer.notice) {
+			children.push(
+				text([span(composer.notice, this.#followUpPending ? "dim" : "warning")], {
+					role: "zeta.btw.notice",
+					wrap: "word",
+				}),
+			);
+		}
+		return node("col", { role: "zeta.btw.composer", gap: "sm" }, children, "composer");
+	}
+
+	#describeEmpty(): NativeNode {
+		return node(
+			"col",
+			{ role: "zeta.btw.empty", align: "center", gap: "sm" },
+			[
+				text("No side questions yet", { role: "zeta.btw.empty.title" }),
+				text(
+					[
+						span("Ask one with "),
+						span("/btw <question>", "code"),
+						span(". The answer stays out of the main conversation."),
+					],
+					{ role: "zeta.btw.empty.hint", wrap: "word" },
+				),
+			],
+			"empty",
+		);
 	}
 
-	#describeFooter(record: BtwHistoryRecord | undefined, canFollowUp: boolean, copied: boolean): NativeNode {
+	/**
+	 * The footer: what the selected answer allows on the left, Close and the one
+	 * primary action (Follow up, or Send while composing) in the corner. Keys
+	 * live in the buttons' tooltips.
+	 */
+	#describeActions(record: BtwHistoryRecord | undefined, canFollowUp: boolean, copied: boolean): NativeNode {
 		if (this.#composer) {
-			return hintsRow([
-				actionHint("tui.input.submit", this.#followUpPending ? "starting…" : "send"),
-				actionHint("tui.select.cancel", "cancel"),
+			return actionBar([
+				null,
+				actionButton("Cancel", "discard", { keys: "escape" }),
+				actionButton(this.#followUpPending ? "Sending…" : "Send", "send", { keys: "enter", tone: "accent" }),
 			]);
 		}
-		const latest = record ? getBtwLatestTurn(record) : undefined;
-		const running = latest?.status === "running";
-		const hints: (NativeHint | undefined)[] = [
-			actionHint("tui.select.cancel", running && !this.#options.escapeHides ? "cancel" : "close"),
-			running && this.#options.escapeHides ? { keys: ["x"], label: "cancel" } : undefined,
-			this.#records.length > 1 ? { keys: ["tab", "ctrl+/"], label: "switch pane" } : undefined,
-			actionHint(["tui.select.up", "tui.select.down"], this.#focus === "list" ? "select" : "scroll"),
-		];
-		if (canFollowUp) hints.push({ keys: ["f", "enter"], label: "follow up" });
+		const running = record !== undefined && getBtwLatestTurn(record).status === "running";
+		const hides = this.#options.escapeHides === true;
+		const buttons: (NativeNode | null)[] = [];
+		if (running) buttons.push(actionButton("Stop answer", "stop", { keys: hides ? "x" : "escape" }));
 		if (record && getBtwCopyText(record) !== undefined) {
-			hints.push({ keys: ["c"], label: copied ? "copy again" : "copy answer" });
+			buttons.push(actionButton(copied ? "Copy again" : "Copy answer", "copy-answer", { keys: "c" }));
+			if (copied) buttons.push(text([span("✓ Copied", "success")], { role: "zeta.btw.copied" }));
 		}
-		return copied ? statusHintsRow([span("✓ copied", "success")], hints) : hintsRow(hints);
+		buttons.push(null);
+		// Clicking Close always dismisses the sheet; its tooltip names Esc only where Esc does too.
+		buttons.push(actionButton("Close", "close", running && !hides ? undefined : { keys: "escape" }));
+		if (canFollowUp) buttons.push(actionButton("Follow up", "follow-up", { keys: "f", tone: "accent" }));
+		return actionBar(buttons);
 	}
 
 	#renderList(width: number, height: number): readonly string[] {

package/src/overlays/extensions/extension-list.ts

@@ -7,7 +7,6 @@
  */
 import type { TspPickerGroup, TspPickerItem, TspProps, TspSpan, TspTone } from "@linxiraos/pi-wire";
 import type { Component } from "../../tui";
-import { formatKeyHint } from "../../app-keybindings";
 import { node, span, stableKey } from "../../native/describe";
 import type { NativeNode } from "../../native/node";
 import { pickerFuzzyHits, pickerQuery } from "../../native/picker";
@@ -500,11 +499,10 @@ export class ExtensionList implements Component {
 					]
 				: undefined,
 			facts: { kind: this.#getKindLabel(ext.kind) },
-			disabled: effectivelyDisabled
-				? masterDisabled
-					? "Provider disabled"
-					: `Disabled · ${formatKeyHint("space")} to enable`
-				: undefined,
+			// Only a disabled provider makes the row inert. An extension switched
+			// off by its own toggle must stay activatable, or the click/dblclick
+			// that turned it off could never turn it back on.
+			disabled: masterDisabled ? "Provider disabled" : undefined,
 		};
 	}
 

package/src/overlays/hook-editor.ts

@@ -30,12 +30,21 @@ import { OverlayPanel } from "../chrome/overlay-box";
 import { FormField } from "../components/form";
 import { formatKeyHint, formatKeyHints } from "../app-keybindings";
 import { boundKeys, editorKey, interruptKey } from "../chrome/keybinding-hints";
-import { node, span } from "../native/describe";
-import type { DescribeContext, NativeChild, NativeNode } from "../native/node";
-import { hintsRow, type NativeHint, overlayCard } from "../native/overlay";
+import { formatTooltipKey, type KeyName } from "../key-hint-format";
+import { col, node, span } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { actionBar, actionButton } from "../native/overlay";
 import { plainText } from "../native/spans";
 import { sanitizeCarriageReturns } from "../render/render-utils";
 
+/** Root role of the native sheet. */
+const ROLE = "zeta.overlay.hook-editor";
+/**
+ * Role prefix of its parts (`.head`, `.title`, `.detail`, `.eyebrow`, `.field`/`.line`); outside
+ * `zeta.overlay.*`, which Tern draws as a sheet of its own.
+ */
+const PART = "zeta.hook-editor";
+
 /** 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. */
@@ -109,7 +118,7 @@ export class HookEditorComponent extends OverlayPanel implements Focusable {
 	#pendingPastes: { settled: boolean; text: string | undefined }[] = [];
 	#submitQueued = false;
 	#disposed = false;
-	/** Detail lines, hints and the editor under the title; every part is fixed, so it is built once. */
+	/** Head, field and action bar; every part but the editor (which describes itself) is fixed, so it is built once. */
 	#nativeRoot: NativeNode;
 	/** Focus state mirrored to the nested editor during rendering. */
 	focused = false;
@@ -128,7 +137,7 @@ export class HookEditorComponent extends OverlayPanel implements Focusable {
 		const question = options?.question;
 		const terminalTitle = question === undefined ? title : boundPromptTitle(`${title}: `, question);
 		const [titleLine = "", ...detailLines] = terminalTitle.split("\n");
-		super(titleLine, "zeta.overlay.hook-editor");
+		super(titleLine, ROLE);
 
 		this.#tui = tui;
 		this.#onSubmitCallback = onSubmit;
@@ -175,24 +184,24 @@ export class HookEditorComponent extends OverlayPanel implements Focusable {
 		this.addChild(this.#field);
 		this.addChild(new Spacer(1));
 
-		const externalHint: NativeHint = {
-			keys: boundKeys("app.editor.external", ["ctrl+g"]).slice(0, 1),
-			label: "external editor",
-		};
-		const nativeHints: NativeHint[] = this.#promptStyle
-			? [
-					{ keys: ["enter", primaryFollowUpKey], label: "submit" },
-					{ keys: ["escape"], label: "cancel" },
-					externalHint,
-				]
-			: [
-					{ keys: followUpKeys, label: "submit" },
-					{ keys: boundKeys("app.interrupt", ["escape"]).slice(0, 1), label: "cancel" },
-					externalHint,
-				];
-		const nativeChildren: NativeChild[] = [];
+		// Native: the field drops its terminal frame for the sheet's, and says what to type while empty.
+		const fieldRole = this.#promptStyle ? `${PART}.line` : `${PART}.field`;
+		this.#editor.describeLayout = input => ({ role: fieldRole, children: [input], caret: "input" });
+		const placeholder = [span(this.#promptStyle ? "Type your answer" : "Type here")];
+		this.#editor.describePlaceholder = () => placeholder;
+
+		const head: NativeChild[] = [];
 		if (question !== undefined) {
-			nativeChildren.push(
+			// The question is the heading, as on the ask sheet; the prompt's own title names the answer above it.
+			head.push(
+				node(
+					"text",
+					{ spans: [span(plainText(title))], role: `${PART}.eyebrow`, wrap: "none", truncate: "end" },
+					undefined,
+					"eyebrow",
+				),
+			);
+			head.push(
 				node(
 					"md",
 					{ text: replaceTabs(sanitizeCarriageReturns(question)), role: "zeta.ask.question" },
@@ -200,30 +209,79 @@ export class HookEditorComponent extends OverlayPanel implements Focusable {
 					"question",
 				),
 			);
-		} else if (detailLines.length > 0) {
-			nativeChildren.push(
+		} else {
+			head.push(
 				node(
 					"text",
-					{ spans: [span(plainText(detailLines.join("\n")), "accent")], wrap: "word" },
+					{ spans: [span(plainText(titleLine))], role: `${PART}.title`, wrap: "word" },
 					undefined,
-					"detail",
+					"title",
 				),
 			);
+			if (detailLines.length > 0) {
+				head.push(
+					node(
+						"text",
+						{ spans: [span(plainText(detailLines.join("\n")))], wrap: "word", role: `${PART}.detail` },
+						undefined,
+						"detail",
+					),
+				);
+			}
 		}
-		nativeChildren.push(this.#editor, hintsRow(nativeHints));
-		this.#nativeRoot = overlayCard(
-			this.nativeRole,
-			plainText(question === undefined ? titleLine : title),
-			nativeChildren,
+
+		// Buttons say what they do; their keys live in the tooltips.
+		const tip = (clauses: readonly (readonly [string, KeyName | undefined])[]): string =>
+			clauses.map(([label, key]) => (key ? `${label}  ${formatTooltipKey(key)}` : label)).join(" · ");
+		const submitKey: KeyName = this.#promptStyle ? "enter" : primaryFollowUpKey;
+		const newlineKey: KeyName = this.#promptStyle ? "shift+enter" : "enter";
+		const cancelKey = this.#promptStyle ? "escape" : (boundKeys("app.interrupt", ["escape"])[0] ?? "escape");
+		const buttons: (NativeNode | null)[] = [];
+		if (this.#externalEditor) {
+			const [externalKey] = boundKeys("app.editor.external", ["ctrl+g"]);
+			buttons.push(
+				actionButton("Open in editor", "external", {
+					...(externalKey ? { keys: externalKey } : {}),
+					title: tip([["Edit in your external editor", externalKey]]),
+				}),
+			);
+		}
+		buttons.push(
+			null,
+			actionButton("Cancel", "cancel", { keys: cancelKey, title: tip([["Cancel", cancelKey]]) }),
+			actionButton("Submit", "submit", {
+				keys: submitKey,
+				tone: "accent",
+				title: tip([
+					["Submit", submitKey],
+					["New line", newlineKey],
+				]),
+			}),
+		);
+
+		this.#nativeRoot = col(
+			[node("col", { role: `${PART}.head`, gap: "xs" }, head, "head"), this.#editor, actionBar(buttons)],
+			{ role: ROLE },
 		);
 	}
 
-	/** The editor (which describes itself) under the title and detail lines, with the key hints below. */
+	/**
+	 * A sheet in the composer's place: the title (or, answering a question, the question under the
+	 * prompt's name) over a hairline, the editor, and Open in editor · Cancel · Submit.
+	 */
 	override describe(_cx: DescribeContext): NativeNode {
 		this.#field.focused = this.focused;
 		return this.#nativeRoot;
 	}
 
+	/** The action bar's buttons run what their keys run. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (this.#disposed || event.type !== "action") return;
+		if (event.act === "submit") this.#submitCurrentText();
+		else if (event.act === "cancel") this.#cancel();
+		else if (event.act === "external") void this.#openExternalEditor();
+	}
+
 	/** Keep the nested editor's software/hardware cursor mode aligned with the dialog focus target. */
 	setUseTerminalCursor(useTerminalCursor: boolean): void {
 		this.#field.setUseTerminalCursor(useTerminalCursor);