@iowarp/clio-coder 0.4.6 → 0.4.8

package/src/interactive/overlays/ask-user.ts

@@ -5,10 +5,11 @@ import {
 } from "../../domains/safety/decision-presentation.js";
 import {
 	type Component,
+	Editor,
+	getKeybindings,
 	Input,
 	matchesKey,
 	type OverlayHandle,
-	type OverlayOptions,
 	type SelectItem,
 	SelectList,
 	type TUI,
@@ -17,7 +18,7 @@ import {
 	wrapTextWithAnsi,
 } from "../../engine/tui.js";
 import type { AskUserAnswer, AskUserQuestion, AskUserResult } from "../../tools/ask-user.js";
-import { ASK_USER_OTHER_LABEL, cancelledAskUserResult } from "../../tools/ask-user.js";
+import { cancelledAskUserResult } from "../../tools/ask-user.js";
 import {
 	buildHint,
 	DEFAULT_SELECT_THEME,
@@ -25,7 +26,7 @@ import {
 	type OverlayEscVerb,
 	showClioOverlayFrame,
 } from "../overlay-frame.js";
-import { type ClioToken, clioTheme, dotSep, GLYPH, screenTitle } from "../theme/index.js";
+import { type ClioToken, clioTheme, dotSep, editorTheme, GLYPH, rule, screenTitle } from "../theme/index.js";
 import { nextContentScrollOffset, type ViewScrollAction } from "../view/view-overlay.js";
 
 /**
@@ -40,81 +41,35 @@ export const ASK_USER_DECISION_TITLE = DEFAULT_ASK_USER_PRESENTATION.title;
 export const ASK_USER_WAITING_TITLE = "Ask User";
 
 /**
- * The shape a request draws itself in.
+ * One box for every request shape.
  *
- * One overlay served three interactions through one centered full-height modal,
- * so a two-option confirmation arrived as a thirty-five-row box with twenty-five
- * blank rows under the options. The surfaces differ in size and placement:
- *
- * - `compact` is a small bar low on the screen, where the operator's eyes
- *   already are, for one question with a handful of choices.
- * - `panel` is a medium centered box for one question whose option list is too
- *   long to read in a bar.
- * - `interview` is the full surface with the round strip and the answer ledger,
- *   for a round of several questions or any round after the first.
- */
-export type AskUserSurface = "compact" | "panel" | "interview";
-
-/** Options a single question may carry and still be answered in the bar. */
-export const ASK_USER_COMPACT_MAX_OPTIONS = 3;
-
-/** The surface an overlay waits on before its first round decides one. */
-export const ASK_USER_DEFAULT_SURFACE: AskUserSurface = "panel";
-
-interface AskUserSurfaceGeometry {
-	/** Box width in columns; zero fills the row. The frame clamps to the terminal. */
-	width: number;
-	/** Rows the body may use, before the borders. Zero means every row the frame has. */
-	maxInnerRows: number;
-	anchor: NonNullable<OverlayOptions["anchor"]>;
-	margin: NonNullable<OverlayOptions["margin"]>;
-}
-
-/**
- * Where each surface sits and how big it is allowed to get.
- *
- * The compact bar anchors to the bottom because a decision that has taken the
- * keyboard should appear where the operator was already typing, not in the
- * middle of the transcript. It covers the composer, which is honest: the
- * composer accepts nothing while a decision is pending.
- *
- * Every surface's margin is one row top and bottom, which is what
- * `ASK_USER_FRAME_AND_MARGIN_ROWS` counts alongside the two border rows.
+ * Three surfaces used to answer three request shapes: a fixed 68-column bar for
+ * a short question, a fixed 88-column panel for a longer option list, and a
+ * full-screen workspace for an interview. The bar cut Daisy's four-part research
+ * question to two parts at every terminal width, and the workspace put twelve
+ * empty rows between the question and its options. The box now sizes itself to
+ * what it has to say, sits above the composer where the operator was typing,
+ * and takes a readable measure from the terminal rather than a constant.
  */
-export const ASK_USER_SURFACE_GEOMETRY: Record<AskUserSurface, AskUserSurfaceGeometry> = {
-	compact: { width: 68, maxInnerRows: 14, anchor: "bottom-center", margin: { top: 1, right: 2, bottom: 1, left: 2 } },
-	panel: { width: 88, maxInnerRows: 18, anchor: "center", margin: 1 },
-	// The interview is a workspace, not a modal. A cap of 42 turned a 66-row
-	// terminal into a centered box with twenty blank rows around it, so the
-	// interview takes every row the frame has and lays its own chrome out inside
-	// them. The one-row margin keeps the border off the top row and the footer.
-	interview: { width: 0, maxInnerRows: 0, anchor: "center", margin: 1 },
-};
-
-const ASK_USER_FRAME_ROWS = 2;
+export const ASK_USER_MAX_BOX_WIDTH = 100;
+export const ASK_USER_MIN_BOX_WIDTH = 40;
+const ASK_USER_MARGIN = { top: 1, right: 2, bottom: 1, left: 2 };
+/** Two border rows plus the one-row margin above and below. */
 const ASK_USER_FRAME_AND_MARGIN_ROWS = 4;
-const MIN_VISIBLE_OPTIONS = 3;
-/** Interview rows spent on chrome before an option row: strip, header, blanks, status, one question row. */
-const INTERVIEW_CHROME_ROWS = 7;
-const MAX_VISIBLE_OPTIONS = 12;
-/** Below this the second column is too narrow to wrap a sentence into. */
-const MIN_DESCRIPTION_COLUMN = 28;
+const MIN_INNER_ROWS = 6;
+/** The question region keeps at least this many rows before the options window shrinks. */
+const MIN_QUESTION_ROWS = 3;
+/** Below this width an option's description goes under its label instead of beside it. */
+const STACKED_OPTION_WIDTH = 56;
+const MAX_LABEL_COLUMN = 30;
+const MIN_LABEL_COLUMN = 12;
 const ELLIPSIS = "…";
+const CONTINUATION_INDENT = "    ";
+const TEXT_ASKING_DESCRIPTION = "opens a text field for your answer";
 
-/**
- * The surface a request renders on, from the request shape alone.
- *
- * `priorRounds` is what makes an interview an interview. The tool's `mode`
- * cannot answer this: `single_question` is the mode an interview asks its
- * rounds in, and a first single question is exactly the confirmation that
- * should not take the screen. A round that follows an answered one has captured
- * answers to keep on screen, which is the full surface's whole job.
- */
-function askUserSurface(questions: ReadonlyArray<AskUserQuestion>, priorRounds = 0): AskUserSurface {
-	if (priorRounds > 0 || questions.length !== 1) return "interview";
-	const question = questions[0];
-	if (!question) return "interview";
-	return (question.options?.length ?? 0) <= ASK_USER_COMPACT_MAX_OPTIONS ? "compact" : "panel";
+export function askUserBoxWidth(columns: number): number {
+	if (!Number.isFinite(columns) || columns <= 0) return ASK_USER_MAX_BOX_WIDTH;
+	return Math.max(ASK_USER_MIN_BOX_WIDTH, Math.min(ASK_USER_MAX_BOX_WIDTH, Math.floor(columns) - 4));
 }
 
 export interface OpenAskUserOverlayDeps {
@@ -134,6 +89,7 @@ type InterviewPhase = "waiting" | "asking" | "closed";
 interface QuestionState {
 	mode: Mode;
 	selected: Set<number>;
+	committedSelected: Set<number>;
 	customAnswer: string;
 	inputValue: string;
 	answer: string;
@@ -148,11 +104,11 @@ interface QuestionState {
 	focusedValue?: string;
 }
 
-interface AskUserOverlayViewDeps extends OpenAskUserOverlayDeps {
+export interface AskUserOverlayViewDeps extends OpenAskUserOverlayDeps {
 	getTerminalRows: () => number;
 	requestRender: () => void;
-	/** Called when the request shape moves the body to a differently sized box. */
-	onSurface: (surface: AskUserSurface) => void;
+	/** The engine, for the multi-line answer editor. Absent, the field is a one-line input. */
+	tui?: TUI;
 }
 
 function questionHasOptions(question: AskUserQuestion): boolean {
@@ -167,6 +123,7 @@ function createQuestionState(question: AskUserQuestion): QuestionState {
 	return {
 		mode: initialMode(question),
 		selected: new Set<number>(),
+		committedSelected: new Set<number>(),
 		customAnswer: "",
 		inputValue: "",
 		answer: "",
@@ -174,11 +131,15 @@ function createQuestionState(question: AskUserQuestion): QuestionState {
 	};
 }
 
-function isOtherOption(label: string): boolean {
-	const normalized = label
+function normalizedLabel(label: string): string {
+	return label
 		.toLowerCase()
-		.replace(/[^a-z0-9]+/g, " ")
+		.replace(/[^a-z0-9']+/g, " ")
 		.trim();
+}
+
+function isOtherOption(label: string): boolean {
+	const normalized = normalizedLabel(label);
 	return (
 		normalized === "other" ||
 		normalized === "custom" ||
@@ -187,6 +148,23 @@ function isOtherOption(label: string): boolean {
 	);
 }
 
+/**
+ * An option whose label says the operator is about to type.
+ *
+ * wtf-MS interviews offer "Provided details" beside "help me explore"; the
+ * candidates round offers "Combine or edit; I'll describe". Choosing such an
+ * option used to record the bare label, and the model then had a route with no
+ * details on it and asked again. Enter on one of these opens the text field
+ * with the label kept, the same path `t` takes.
+ */
+export function optionAsksForText(label: string): boolean {
+	if (isOtherOption(label)) return true;
+	const normalized = normalizedLabel(label);
+	return /\b(provided? details|i'?ll (describe|type|explain|specify|provide|write)|i (will|can) (describe|type|explain|specify|provide|write)|let me (describe|type|explain|specify)|type (it|my|the)|describe (it|my|the|below))\b/u.test(
+		normalized,
+	);
+}
+
 function optionItems(question: AskUserQuestion, selected: ReadonlySet<number>): SelectItem[] {
 	const options = question.options ?? [];
 	const explicitOtherIndex = options.findIndex((option) => isOtherOption(option.label));
@@ -204,12 +182,15 @@ function optionItems(question: AskUserQuestion, selected: ReadonlySet<number>):
 			label,
 		};
 		if (option.description) item.description = option.description;
+		else if (optionAsksForText(option.label)) item.description = TEXT_ASKING_DESCRIPTION;
 		items.push(item);
 	}
 	if (explicitOtherIndex === -1) {
+		// The implicit choice is one word on screen; its description says what it
+		// does, and the tool's longer label is what the answer records.
 		items.push({
 			value: "other",
-			label: question.multi_select === true ? `[ ] ${ASK_USER_OTHER_LABEL}` : ASK_USER_OTHER_LABEL,
+			label: question.multi_select === true ? "[ ] Other" : "Other",
 			description: "type your answer",
 		});
 	}
@@ -250,8 +231,8 @@ function wrapLabeledValue(prefix: string, value: string, width: number): string[
 	const safeWidth = Math.max(1, width);
 	const prefixWidth = visibleWidth(prefix);
 	const valueWidth = Math.max(1, safeWidth - prefixWidth);
-	return wrapTextWithAnsi(value, valueWidth).map((line, index) =>
-		fitLine(`${index === 0 ? prefix : " ".repeat(prefixWidth)}${line}`, safeWidth),
+	return wrapTextWithAnsi(value, valueWidth).map(
+		(line, index) => `${index === 0 ? prefix : " ".repeat(prefixWidth)}${line}`,
 	);
 }
 
@@ -259,25 +240,248 @@ function compactTitle(question: AskUserQuestion): string {
 	return (question.header ?? question.question).replace(/\s+/g, " ").trim();
 }
 
+const BOLD_SPAN = /\*\*([^*\n]+?)\*\*/gu;
+const LIST_MARKER = /^(\s*)(\d{1,2}[.)]|[-*•])\s+(.*)$/u;
+
+function inlineMarkdown(text: string): string {
+	const theme = clioTheme();
+	return text.replace(BOLD_SPAN, (_match, inner: string) => theme.paint(inner, { bold: true }));
+}
+
+/**
+ * The question, wrapped to the width and never cut.
+ *
+ * A model writes a question the way it writes prose: `**Domain**` for emphasis
+ * and `1.` lists for the parts it wants answered. The old body rendered the
+ * asterisks literally and wrapped a list item's second row back to column zero,
+ * where it read as a new paragraph. Bold spans render bold, list items hang
+ * under their marker, and blank lines survive one deep so paragraphs stay apart.
+ */
+export function formatAskUserQuestion(text: string, width: number): string[] {
+	const safeWidth = Math.max(4, width);
+	const lines: string[] = [];
+	let previousBlank = true;
+	for (const raw of text.replace(/\r\n?/g, "\n").split("\n")) {
+		const line = raw.replace(/\t/g, "    ").trimEnd();
+		if (line.trim().length === 0) {
+			if (!previousBlank) lines.push("");
+			previousBlank = true;
+			continue;
+		}
+		previousBlank = false;
+		const list = LIST_MARKER.exec(line);
+		if (list) {
+			const lead = list[1] ?? "";
+			const marker = (list[2] ?? "").replace(/^[-*]$/u, "•");
+			const rest = list[3] ?? "";
+			const prefix = `${lead}${marker} `;
+			const indent = " ".repeat(visibleWidth(prefix));
+			const wrapped = wrapTextWithAnsi(inlineMarkdown(rest), Math.max(4, safeWidth - indent.length));
+			wrapped.forEach((part, index) => {
+				lines.push(`${index === 0 ? prefix : indent}${part}`);
+			});
+			continue;
+		}
+		// An indented line is a continuation the author laid out by hand, such as
+		// the "In: … · Out: …" row under a candidate; its wrapped rows keep the
+		// indent so they read as part of it rather than as a new paragraph.
+		const lead = /^\s*/u.exec(line)?.[0] ?? "";
+		const wrapped = wrapTextWithAnsi(inlineMarkdown(line.slice(lead.length)), Math.max(4, safeWidth - lead.length));
+		lines.push(...wrapped.map((part) => `${lead}${part}`));
+	}
+	while (lines.length > 0 && lines[lines.length - 1] === "") lines.pop();
+	return lines;
+}
+
+/** The typed answer box: a small editor whose chrome is a caption above and a key hint below. */
+class AnswerEditor extends Editor {
+	caption = "";
+
+	constructor(tui: TUI) {
+		super(tui, editorTheme(clioTheme()), { paddingX: 0 });
+		// The overlay forwards keys itself, so the engine never focuses this
+		// editor; the flag is what draws the cursor.
+		this.focused = true;
+	}
+
+	protected override renderTopBorder(width: number): string {
+		const theme = clioTheme();
+		return fitLine(theme.fg("dim", this.caption), width);
+	}
+
+	protected override renderBottomBorder(width: number, hiddenLineCount: number): string {
+		if (hiddenLineCount <= 0) return "";
+		return fitLine(clioTheme().fg("dim", `${GLYPH.down} ${hiddenLineCount} more rows`), width);
+	}
+}
+
+/** One shape over the two text controls, so the view never asks which it holds. */
+interface TextControl {
+	render(width: number): string[];
+	handleInput(data: string): void;
+	applyEdit?(operation: "undo"): void;
+	getText(): string;
+	setText(text: string): void;
+	invalidate(): void;
+}
+
+class InputTextControl implements TextControl {
+	constructor(
+		private readonly input: Input,
+		private readonly caption: string,
+	) {}
+
+	render(width: number): string[] {
+		const theme = clioTheme();
+		const rows = this.input
+			.render(width)
+			.map((line) =>
+				fitLine(line.startsWith("> ") ? `${theme.fg("accent", `${GLYPH.cursor} `)}${line.slice(2)}` : line, width),
+			);
+		return [fitLine(theme.fg("dim", this.caption), width), ...rows];
+	}
+
+	applyEdit(operation: "undo"): void {
+		this.input.applyEdit(operation);
+	}
+	handleInput(data: string): void {
+		this.input.handleInput(data);
+	}
+
+	getText(): string {
+		return this.input.getValue();
+	}
+
+	setText(text: string): void {
+		this.input.setValue(text);
+	}
+
+	invalidate(): void {
+		this.input.invalidate();
+	}
+}
+
+interface OptionRowLayout {
+	/** Rows per item, in item order. */
+	rows: string[][];
+}
+
+/**
+ * Every option, with its whole description.
+ *
+ * A description is what the operator is choosing between: "+Latency,
+ * +Simplicity. Good for: Financial, Auth" is the trade-off, and the old table
+ * cut it to its first clause on every row the cursor was not on. Every row now
+ * wraps its description beside the label, or under it when the box is too
+ * narrow for two columns, and the row carries no key: the footer does.
+ */
+function layoutOptionRows(items: ReadonlyArray<SelectItem>, focusedIndex: number, width: number): OptionRowLayout {
+	const theme = clioTheme();
+	const safeWidth = Math.max(8, width);
+	const stacked = safeWidth < STACKED_OPTION_WIDTH;
+	const widestLabel = items.reduce((max, item) => Math.max(max, visibleWidth(item.label)), 0);
+	const labelColumn = Math.max(
+		MIN_LABEL_COLUMN,
+		Math.min(MAX_LABEL_COLUMN, Math.floor(safeWidth * 0.42), widestLabel + 2),
+	);
+	const rows: string[][] = [];
+	for (let index = 0; index < items.length; index += 1) {
+		const item = items[index];
+		if (!item) continue;
+		const focused = index === focusedIndex;
+		const prefix = focused ? theme.fg("accent", `${GLYPH.cursor} `) : "  ";
+		const description = item.description?.replace(/[\r\n]+/g, " ").trim() ?? "";
+		const paint = (text: string): string => (focused ? theme.style("accent", text, { bold: true }) : text);
+		const describe = (text: string): string => (focused ? text : theme.fg("muted", text));
+		if (description.length === 0) {
+			rows.push(
+				wrapTextWithAnsi(paint(item.label), Math.max(4, safeWidth - 2)).map(
+					(line, at) => `${at === 0 ? prefix : "  "}${line}`,
+				),
+			);
+			continue;
+		}
+		if (stacked || visibleWidth(item.label) > labelColumn - 1) {
+			const labelRows = wrapTextWithAnsi(paint(item.label), Math.max(4, safeWidth - 2)).map(
+				(line, at) => `${at === 0 ? prefix : "  "}${line}`,
+			);
+			const descriptionRows = wrapTextWithAnsi(
+				describe(description),
+				Math.max(4, safeWidth - CONTINUATION_INDENT.length),
+			).map((line) => `${CONTINUATION_INDENT}${line}`);
+			rows.push([...labelRows, ...descriptionRows]);
+			continue;
+		}
+		const spacing = " ".repeat(Math.max(1, labelColumn - visibleWidth(item.label)));
+		const descriptionWidth = Math.max(4, safeWidth - 2 - labelColumn);
+		const wrapped = wrapTextWithAnsi(describe(description), descriptionWidth);
+		const indent = " ".repeat(2 + labelColumn);
+		rows.push([
+			`${prefix}${paint(item.label)}${spacing}${wrapped[0] ?? ""}`,
+			...wrapped.slice(1).map((line) => `${indent}${line}`),
+		]);
+	}
+	return { rows };
+}
+
+/**
+ * The rows of a windowed list: every option when they fit, otherwise a run of
+ * whole options around the focused one, with a position marker. An option is
+ * never split across the window edge, so a description is read whole or not
+ * at all, and one arrow key brings any hidden option back.
+ */
+function windowOptionRows(layout: OptionRowLayout, focusedIndex: number, rowBudget: number, width: number): string[] {
+	const theme = clioTheme();
+	const total = layout.rows.reduce((sum, rows) => sum + rows.length, 0);
+	if (total <= rowBudget) return layout.rows.flat();
+	const budget = Math.max(1, rowBudget - 1);
+	const focusedRows = layout.rows[focusedIndex]?.length ?? 1;
+	let start = focusedIndex;
+	let end = focusedIndex + 1;
+	let used = focusedRows;
+	// Grow around the focus, later options first so the reading order continues
+	// downward, then earlier ones.
+	let grew = true;
+	while (grew) {
+		grew = false;
+		const after = layout.rows[end]?.length;
+		if (after !== undefined && used + after <= budget) {
+			used += after;
+			end += 1;
+			grew = true;
+		}
+		const before = layout.rows[start - 1]?.length;
+		if (before !== undefined && used + before <= budget) {
+			used += before;
+			start -= 1;
+			grew = true;
+		}
+	}
+	const visible = layout.rows.slice(start, end).flat();
+	const marker = `  (${focusedIndex + 1}/${layout.rows.length})${start > 0 ? ` ${GLYPH.up}` : ""}${end < layout.rows.length ? ` ${GLYPH.down}` : ""}`;
+	return [...visible, fitLine(theme.fg("dim", marker), width)];
+}
+
 class AskUserOverlayView implements Component {
 	private phase: InterviewPhase = "waiting";
-	private surface: AskUserSurface = ASK_USER_DEFAULT_SURFACE;
 	private index = 0;
 	private status = "";
 	private questions: ReadonlyArray<AskUserQuestion> = [];
 	private states: QuestionState[] = [];
 	private history: AskUserAnswer[] = [];
+	/** Rounds answered so far; the strip and header count these, not answers. */
+	private roundsAnswered = 0;
 	private list: SelectList | null = null;
-	private input: Input | null = null;
+	private text: TextControl | null = null;
 	private resolveCurrent: ((result: AskUserResult) => void) | null = null;
-	/** Rows of the interview's scrollable middle already scrolled past. */
-	private contentScrollOffset = 0;
-	/** Whether the last interview render had more content than the region held. */
-	private contentOverflows = false;
-	/** Rows the scroll region drew on the last render, for a page-sized jump. */
-	private contentRegionHeight = 1;
-	/** Rows the scroll region wanted on the last render. */
-	private contentTotalRows = 0;
+	private optionDetailRows: string[] = [];
+	/** Rows of the question region already scrolled past. */
+	private questionScroll = 0;
+	private questionOverflows = false;
+	private questionRegionRows = 1;
+	private questionTotalRows = 0;
+	private ledgerExpanded = false;
+	private detailsExpanded = false;
 	private presentation: DecisionPresentation = DEFAULT_ASK_USER_PRESENTATION;
 
 	constructor(private readonly deps: AskUserOverlayViewDeps) {}
@@ -295,11 +499,9 @@ class AskUserOverlayView implements Component {
 		this.presentation = presentation;
 		this.states = this.questions.map((question) => createQuestionState(question));
 		this.list = null;
-		this.input = null;
-		this.resetContentScroll();
-		// Before the controls, because how many option rows fit is a property of
-		// the box this round is about to be drawn in.
-		this.setSurface(askUserSurface(this.questions, this.history.length));
+		this.text = null;
+		this.detailsExpanded = false;
+		this.resetQuestionScroll();
 		this.rebuildControl();
 		this.deps.requestRender();
 		return new Promise<AskUserResult>((resolve) => {
@@ -325,10 +527,6 @@ class AskUserOverlayView implements Component {
 		return this.phase === "asking";
 	}
 
-	currentSurface(): AskUserSurface {
-		return this.surface;
-	}
-
 	decisionTitle(): string {
 		return this.presentation.title;
 	}
@@ -339,29 +537,33 @@ class AskUserOverlayView implements Component {
 
 	invalidate(): void {
 		this.list?.invalidate();
-		this.input?.invalidate();
+		this.text?.invalidate();
 	}
 
+	get keyboardScope(): "edit" | "review" {
+		return this.currentState()?.mode === "text" ? "edit" : "review";
+	}
+	undoInput(): boolean {
+		if (this.currentState()?.mode !== "text") return false;
+		this.text?.applyEdit?.("undo");
+		return true;
+	}
 	handleInput(data: string): void {
 		if (this.phase !== "asking") return;
 		const question = this.currentQuestion();
 		const state = this.currentState();
 		if (!question || !state) return;
 
-		// Scrolling the transcript must not cost the operator their place in the
+		// Scrolling the question must not cost the operator their place in the
 		// options, so the region has keys of its own that neither control claims.
 		if (this.handleScrollInput(data, state.mode)) return;
 
 		if (state.mode === "text") {
-			if (this.isTextModePreviousKey(data)) {
-				this.goToRelativeQuestion(-1);
+			if (matchesKey(data, "escape")) {
+				this.escapeFromTextInput(question, state);
 				return;
 			}
-			if (this.isTextModeNextKey(data)) {
-				this.goToRelativeQuestion(1);
-				return;
-			}
-			this.input?.handleInput(data);
+			this.text?.handleInput(data);
 			return;
 		}
 
@@ -385,17 +587,25 @@ class AskUserOverlayView implements Component {
 			this.chooseFocusedAndOpenText(question, state);
 			return;
 		}
+		if (data === "a" && this.ledgerEntries().length > 0) {
+			this.ledgerExpanded = !this.ledgerExpanded;
+			this.deps.requestRender();
+			return;
+		}
+		if (data === "?") {
+			this.detailsExpanded = !this.detailsExpanded;
+			this.deps.requestRender();
+			return;
+		}
 		this.list?.handleInput(data);
 	}
 
 	/**
-	 * The body, sized to what it has to say.
-	 *
-	 * Nothing pads to a target height any more. A two-option confirmation is six
-	 * rows and draws six rows; the round strip and the answer ledger are what
-	 * make an interview tall, not filler. The trailing slice is the guarantee the
-	 * compact bar rests on: whatever the question and its options come to, the
-	 * body never returns more rows than its surface owns.
+	 * The body, top to bottom: where the round stands, the question, its
+	 * options or the answer field, the status, and the answers so far. The
+	 * question region is the one part that scrolls; everything the operator has
+	 * to act on stays on screen at its full row cost, and the box draws only the
+	 * rows it needs.
 	 */
 	render(width: number): string[] {
 		const safeWidth = Math.max(1, width);
@@ -404,102 +614,59 @@ class AskUserOverlayView implements Component {
 		const question = this.currentQuestion();
 		if (!question) return [clioTheme().fg("muted", "No questions.")];
 
-		if (this.surface === "interview") return this.renderInterview(question, safeWidth, maxRows);
-
-		this.contentOverflows = false;
-		const controlLines = this.renderControlLines(safeWidth);
-		const statusLines =
-			this.status.length > 0 ? ["", ...wrapTextWithAnsi(clioTheme().fg("dim", this.status), safeWidth)] : [];
-		const headerLine = this.renderQuestionHeader(question, safeWidth);
-		const headerLines = headerLine.length > 0 ? [headerLine] : [];
-		const bottom = [...statusLines, "", ...controlLines];
-		const topBudget = Math.max(1, maxRows - bottom.length);
-		const contextLines = this.renderDecisionContext(safeWidth);
-		const top = [
-			contextLines[0] ?? "",
-			...headerLines,
-			...wrapTextWithAnsi(question.question, safeWidth),
-			...contextLines.slice(1),
-		].slice(0, topBudget);
-
-		return [...top, ...bottom].slice(0, maxRows);
-	}
-
-	/**
-	 * The interview, as a workspace with fixed chrome and a scrolling middle.
-	 *
-	 * The round strip and the question header hold the top; the status line and
-	 * the active control hold the bottom, at their full row cost, so the thing the
-	 * operator has to act on is never the thing that gets clipped. The question
-	 * text and the answer ledger share whatever is left and scroll through it.
-	 * Everything is re-derived per render, so a resize is just the next frame.
-	 */
-	private renderInterview(question: AskUserQuestion, width: number, maxRows: number): string[] {
-		const theme = clioTheme();
-		const controlLines = this.renderControlLines(width);
-		const statusLines = this.status.length > 0 ? ["", ...wrapTextWithAnsi(theme.fg("dim", this.status), width)] : [];
-		const headerLine = this.renderQuestionHeader(question, width);
-		const headerLines = headerLine.length > 0 ? [headerLine] : [];
-		const stripLines = [this.renderQuestionStrip(width), ""];
-		const content = [
-			...wrapTextWithAnsi(question.question, width),
-			"",
-			...this.renderDecisionContext(width),
-			...this.renderAnswerLedger(width),
-		];
+		const strip = this.renderQuestionStrip(safeWidth);
+		const header = this.renderQuestionHeader(question, safeWidth);
+		const details = this.renderDecisionContext(safeWidth);
+		const status = this.status.length > 0 ? wrapTextWithAnsi(clioTheme().fg("dim", this.status), safeWidth) : [];
+		const body = formatAskUserQuestion(question.question, safeWidth);
+		const fixedTop = [...strip, ...header, ...details];
+		// The control is sized after the question has claimed its minimum, so a
+		// long option list cannot push a short question off the box.
+		const controlBudget = Math.max(
+			4,
+			maxRows - fixedTop.length - 1 - status.length - Math.min(body.length, MIN_QUESTION_ROWS) - 1,
+		);
+		this.optionDetailRows = [];
+		const control = this.renderControlLines(safeWidth, controlBudget);
+		body.push(...this.optionDetailRows);
+		const ledgerBudget = Math.max(
+			1,
+			maxRows - fixedTop.length - 1 - control.length - status.length - Math.min(body.length, MIN_QUESTION_ROWS),
+		);
+		const ledger = this.renderAnswerLedger(safeWidth, ledgerBudget);
+		const fixed = fixedTop.length + 1 + control.length + status.length + ledger.length;
 
-		// Chrome sheds from the outside in when the terminal is too short to carry
-		// all of it: the round strip first, then the header, then the status, and
-		// the control only if a terminal is short enough that nothing else is left.
-		let top = [...stripLines, ...headerLines];
-		let bottom = [...statusLines, "", ...controlLines];
-		const region = (): number => maxRows - top.length - bottom.length;
-		if (region() < 1) top = [...headerLines];
-		if (region() < 1) top = [];
-		if (region() < 1) bottom = ["", ...controlLines];
-		if (region() < 1) bottom = [...controlLines];
-		const regionRows = Math.max(1, region());
-
-		const overflows = content.length > regionRows;
-		this.contentOverflows = overflows;
-		this.contentTotalRows = content.length;
-		// One row of the region pays for the indicator when there is more than the
-		// region holds, so the marker never covers a row it is reporting on.
+		const regionRows = Math.max(1, Math.min(body.length, maxRows - fixed));
+		const overflows = body.length > regionRows;
+		this.questionOverflows = overflows;
+		this.questionTotalRows = body.length;
 		const viewRows = overflows ? Math.max(1, regionRows - 1) : regionRows;
-		this.contentRegionHeight = viewRows;
-		this.contentScrollOffset = Math.max(0, Math.min(this.contentScrollOffset, Math.max(0, content.length - viewRows)));
-
-		const visible = content.slice(this.contentScrollOffset, this.contentScrollOffset + viewRows);
-		const middle = [...visible];
-		if (overflows) middle.push(fitLine(theme.fg("dim", this.scrollIndicator(content.length, viewRows)), width));
-		while (middle.length < regionRows) middle.push("");
+		this.questionRegionRows = viewRows;
+		this.questionScroll = Math.max(0, Math.min(this.questionScroll, Math.max(0, body.length - viewRows)));
+		const visible = body.slice(this.questionScroll, this.questionScroll + viewRows);
+		if (overflows) visible.push(fitLine(clioTheme().fg("dim", this.scrollIndicator(body.length, viewRows)), safeWidth));
 
-		return [...top, ...middle, ...bottom].slice(0, maxRows);
+		return [...fixedTop, ...visible, "", ...control, ...status, ...ledger].slice(0, maxRows);
 	}
 
 	private scrollIndicator(total: number, viewRows: number): string {
-		const above = this.contentScrollOffset;
+		const above = this.questionScroll;
 		const below = Math.max(0, total - viewRows - above);
 		const parts: string[] = [];
-		if (above > 0) parts.push(`↑ ${above} more`);
-		if (below > 0) parts.push(`↓ ${below} more`);
-		parts.push(`(${Math.min(total, above + viewRows)}/${total})`);
+		if (above > 0) parts.push(`${GLYPH.up} ${above} more`);
+		if (below > 0) parts.push(`${GLYPH.down} ${below} more`);
+		parts.push("PgUp/PgDn");
 		return parts.join("  ");
 	}
 
-	/** True when the key belonged to the scroll region rather than to a control. */
+	/** True when the key belonged to the question region rather than to a control. */
 	private handleScrollInput(data: string, mode: Mode): boolean {
-		if (this.surface !== "interview") return false;
+		if (!this.questionOverflows) return false;
 		const action = this.scrollAction(data, mode);
 		if (!action) return false;
-		const next = nextContentScrollOffset(
-			this.contentScrollOffset,
-			this.contentTotalRows,
-			this.contentRegionHeight,
-			action,
-		);
-		if (next !== this.contentScrollOffset) {
-			this.contentScrollOffset = next;
+		const next = nextContentScrollOffset(this.questionScroll, this.questionTotalRows, this.questionRegionRows, action);
+		if (next !== this.questionScroll) {
+			this.questionScroll = next;
 			this.deps.requestRender();
 		}
 		return true;
@@ -515,99 +682,83 @@ class AskUserOverlayView implements Component {
 		return null;
 	}
 
-	private resetContentScroll(): void {
-		this.contentScrollOffset = 0;
+	private resetQuestionScroll(): void {
+		this.questionScroll = 0;
 	}
 
 	footerHint(): string {
-		if (this.phase !== "asking") {
-			return buildHint([]);
-		}
+		if (this.phase !== "asking") return buildHint([]);
 		const question = this.currentQuestion();
 		const state = this.currentState();
 		if (!question || !state) return buildHint([]);
 		const recordAnswer =
 			this.presentation.requiredActions.find((action) => action.id === "record-answer")?.label.toLowerCase() ??
 			"record answer";
+		const scroll: HintEntry[] = this.questionOverflows ? [{ key: "PgUp/PgDn", verb: "scroll" }] : [];
 		if (state.mode === "text") {
 			// Esc means two different things depending on what is behind the field.
 			// A question with options has a list to fall back to, so the key goes
 			// back; a question without one has nothing behind it and the key still
 			// leaves the interview. The footer says which one this is.
 			const escapeVerb: OverlayEscVerb = questionHasOptions(question) ? "back" : "close";
-			return this.questions.length > 1
-				? this.withScrollHint(
-						[
-							{ key: "Enter", verb: recordAnswer },
-							{ key: "Alt+Left/Right", verb: "question" },
-						],
-						escapeVerb,
-					)
-				: this.withScrollHint([{ key: "Enter", verb: recordAnswer }], escapeVerb);
+			const entries: HintEntry[] = [{ key: "Enter", verb: recordAnswer }];
+			if (this.deps.tui) entries.push({ key: getKeybindings().getKeys("tui.input.newLine").join("/"), verb: "newline" });
+			return buildHint([...entries, ...scroll], escapeVerb);
 		}
-		// The classified action label distinguishes recording an answer from
-		// granting authority. Esc on the option list is the way out of the whole
-		// interview, which is the one place the product spells `close`.
+		const entries: HintEntry[] = [];
+		if (this.questions.length > 1) entries.push({ key: "Left/Right", verb: "question" });
+		if (question.multi_select === true) entries.push({ key: "Space", verb: "toggle" });
 		// `t` is on every select footer because the operator cannot tell from a
 		// label whether the option needs a figure attached until they read it.
-		const addText: HintEntry = { key: "t", verb: "add text", short: "text" };
-		if (question.multi_select === true) {
-			return this.questions.length > 1
-				? this.withScrollHint([
-						{ key: "Left/Right", verb: "question" },
-						{ key: "Space", verb: "toggle" },
-						addText,
-						{ key: "Enter", verb: recordAnswer },
-					])
-				: this.withScrollHint([{ key: "Space", verb: "toggle" }, addText, { key: "Enter", verb: recordAnswer }]);
-		}
-		return this.questions.length > 1
-			? this.withScrollHint([{ key: "Left/Right", verb: "question" }, addText, { key: "Enter", verb: recordAnswer }])
-			: this.withScrollHint([addText, { key: "Enter", verb: recordAnswer }]);
-	}
-
-	private renderDecisionContext(width: number): string[] {
-		const theme = clioTheme();
-		const tier = theme.style(this.presentation.semanticToken, this.presentation.tierLabel, { bold: true });
-		const requested = theme.fg("dim", `requested by ${this.presentation.requestedByCopy}`);
-		const effect = `${theme.fg("dim", "Effect:")} ${theme.fg("muted", this.presentation.authorizationCopy)}`;
-		return [
-			fitLine(`${tier}${dotSep(theme)}${requested}`, width),
-			...wrapTextWithAnsi(effect, width).map((line) => fitLine(line, width)),
-			...wrapTextWithAnsi(theme.fg("muted", this.presentation.reversibilityCopy), width).map((line) =>
-				fitLine(line, width),
-			),
-		];
+		entries.push({ key: "t", verb: "add text", short: "text" });
+		entries.push({ key: "Enter", verb: recordAnswer });
+		if (this.ledgerEntries().length > 0) entries.push({ key: "a", verb: "answers" });
+		entries.push({ key: "?", verb: "details" });
+		return buildHint([...entries, ...scroll]);
 	}
 
 	/**
-	 * The keys for this question, plus the scroll keys when there is something to
-	 * scroll. A footer that always advertised PgUp would be advertising a key that
-	 * does nothing on most rounds.
+	 * The classified context, folded.
+	 *
+	 * Tier, requester, effect, and reversibility used to take four rows above
+	 * every question, and for a local conversational answer they say nothing the
+	 * title ("Answer a question") does not. They render on `?`; a tier that is
+	 * not the default one keeps its one-line identity on screen because that is
+	 * the row that says the answer reaches outside the workspace.
 	 */
-	private withScrollHint(entries: ReadonlyArray<HintEntry>, esc: OverlayEscVerb = "close"): string {
-		if (this.surface !== "interview" || !this.contentOverflows) return buildHint(entries, esc);
-		return buildHint([...entries, { key: "PgUp/PgDn", verb: "scroll" }], esc);
-	}
-
-	private setSurface(next: AskUserSurface): void {
-		if (this.surface === next) return;
-		this.surface = next;
-		this.deps.onSurface(next);
+	private renderDecisionContext(width: number): string[] {
+		const theme = clioTheme();
+		const lines: string[] = [];
+		const defaultTier = this.presentation.tier === DEFAULT_ASK_USER_PRESENTATION.tier;
+		if (!defaultTier || this.detailsExpanded) {
+			const tier = theme.style(this.presentation.semanticToken, this.presentation.tierLabel, { bold: true });
+			const requested = theme.fg("dim", `requested by ${this.presentation.requestedByCopy}`);
+			lines.push(fitLine(`${tier}${dotSep(theme)}${requested}`, width));
+		}
+		if (this.detailsExpanded) {
+			lines.push(
+				...wrapTextWithAnsi(
+					`${theme.fg("dim", "Effect:")} ${theme.fg("muted", this.presentation.authorizationCopy)}`,
+					width,
+				),
+				...wrapTextWithAnsi(theme.fg("muted", this.presentation.reversibilityCopy), width),
+				"",
+			);
+		}
+		return lines;
 	}
 
 	private finish(result: AskUserResult): void {
 		const resolve = this.resolveCurrent;
 		this.resolveCurrent = null;
 		this.list = null;
-		this.input = null;
+		this.text = null;
 		this.status = "";
-		if (result.cancelled !== true) this.history.push(...result.answers);
+		if (result.cancelled !== true) {
+			this.history.push(...result.answers);
+			this.roundsAnswered += 1;
+		}
 		if (this.phase !== "closed") this.phase = "waiting";
-		// A round that follows an answered one is an interview, so the box grows
-		// here rather than at the next `begin`. The waiting frame between rounds
-		// is then already the size of the round it is waiting for.
-		if (this.history.length > 0) this.setSurface("interview");
 		this.deps.requestRender();
 		resolve?.(result);
 	}
@@ -615,56 +766,27 @@ class AskUserOverlayView implements Component {
 	private renderWaiting(width: number, maxRows: number): string[] {
 		const theme = clioTheme();
 		const lines = [
-			screenTitle(theme, "Interview"),
-			"",
-			...wrapTextWithAnsi(
-				theme.fg(
+			fitLine(
+				`${screenTitle(theme, "Interview")}${dotSep(theme)}${theme.fg(
 					"muted",
-					this.history.length > 0
-						? "Answer sent. Waiting for Clio to prepare the next interview question."
-						: "Waiting for Clio to prepare the interview.",
-				),
+					this.history.length > 0 ? "answer sent · waiting for the next question" : "waiting for the first question",
+				)}`,
 				width,
 			),
 		];
-		if (this.history.length > 0) {
-			lines.push("", theme.fg("dim", "── Collected answers"));
-			for (let index = 0; index < this.history.length; index += 1) {
-				const answer = this.history[index];
-				if (!answer) continue;
-				lines.push(...wrapLabeledValue(`${theme.fg("dim", `${index + 1}.`)} `, theme.fg("muted", answer.answer), width));
-			}
-		}
-		return lines.map((line) => fitLine(line, width)).slice(0, maxRows);
+		const ledger = this.renderAnswerLedger(width, Math.max(1, maxRows - lines.length));
+		return [...lines, ...ledger].slice(0, maxRows);
 	}
 
 	/**
-	 * Rows the body may draw on this surface.
-	 *
-	 * The frame budgets the same number, because its `maxHeight` is this cap plus
-	 * the two border rows and both clamp to the terminal the same way. That is
-	 * what keeps `fitBody`'s "… N more rows" off the compact bar: the body never
-	 * hands the frame more than the frame is prepared to draw.
+	 * Rows the body may draw. The frame budgets the same number from the live
+	 * terminal, so the body never hands the frame more than it can draw and the
+	 * frame's "… N more rows" cut never fires on a decision.
 	 */
 	private maxInnerRows(): number {
-		const cap = ASK_USER_SURFACE_GEOMETRY[this.surface].maxInnerRows;
 		const rows = this.deps.getTerminalRows();
-		// A zero cap is the interview's "every row the frame has", which is the
-		// same number the frame budgets itself when the mount passes no maxHeight.
-		if (!Number.isFinite(rows) || rows <= 0) return cap > 0 ? cap : 1;
-		const available = Math.max(1, Math.floor(rows) - ASK_USER_FRAME_AND_MARGIN_ROWS);
-		return cap > 0 ? Math.min(cap, available) : available;
-	}
-
-	private maxVisibleOptions(): number {
-		const inner = this.maxInnerRows();
-		// The interview's option list is budgeted off the live row count rather
-		// than a fixed heuristic: the strip, header, blank, status, blank and one
-		// row of question are what the control shares the workspace with.
-		if (this.surface === "interview") {
-			return Math.max(MIN_VISIBLE_OPTIONS, Math.min(MAX_VISIBLE_OPTIONS, inner - INTERVIEW_CHROME_ROWS));
-		}
-		return Math.max(1, Math.min(MAX_VISIBLE_OPTIONS, inner - 4));
+		if (!Number.isFinite(rows) || rows <= 0) return 40;
+		return Math.max(MIN_INNER_ROWS, Math.floor(rows) - ASK_USER_FRAME_AND_MARGIN_ROWS);
 	}
 
 	private currentQuestion(): AskUserQuestion | null {
@@ -683,14 +805,6 @@ class AskUserOverlayView implements Component {
 		return this.questions.length > 1 && matchesKey(data, "right");
 	}
 
-	private isTextModePreviousKey(data: string): boolean {
-		return this.questions.length > 1 && (matchesKey(data, "alt+left") || matchesKey(data, "ctrl+left"));
-	}
-
-	private isTextModeNextKey(data: string): boolean {
-		return this.questions.length > 1 && (matchesKey(data, "alt+right") || matchesKey(data, "ctrl+right"));
-	}
-
 	/**
 	 * The key that adds typed text to the option under the cursor.
 	 *
@@ -711,212 +825,141 @@ class AskUserOverlayView implements Component {
 	private chooseFocusedAndOpenText(question: AskUserQuestion, state: QuestionState): void {
 		const current = this.list?.getSelectedItem();
 		const optionIndex = current && current.value !== "other" ? optionIndexFromValue(current.value) : null;
+		let label: string | undefined;
+		if (optionIndex === null && !question.multi_select) state.selected = new Set();
 		if (optionIndex !== null) {
 			if (question.multi_select === true) state.selected.add(optionIndex);
 			else state.selected = new Set<number>([optionIndex]);
 			state.focusedValue = `option:${optionIndex}`;
+			label = question.options?.[optionIndex]?.label;
 		}
-		this.openTextInput(state.selected.size > 0 ? "Add your answer to the chosen option" : "Other answer");
+		this.openTextInput(label ? `Your answer, with "${label}"` : "Your answer");
 	}
 
 	/**
-	 * The row above the question, or nothing.
-	 *
-	 * `Question 1/1` was a counter over a set of one, printed on every single
-	 * confirmation. A one-question surface shows the question's own header if it
-	 * has one and skips the row entirely if it does not.
+	 * The row above the question: its header, and the round for a phased
+	 * interview. `Question 1/1` was a counter over a set of one, printed on every
+	 * confirmation; a round of several questions names them in the strip instead.
 	 */
-	private renderQuestionHeader(question: AskUserQuestion, width: number): string {
+	private renderQuestionHeader(question: AskUserQuestion, width: number): string[] {
 		const theme = clioTheme();
 		const parts: string[] = [];
-		if (this.questions.length > 1) parts.push(theme.fg("dim", `Question ${this.index + 1}/${this.questions.length}`));
 		if (question.header) parts.push(screenTitle(theme, question.header));
+		if (this.questions.length <= 1 && this.roundsAnswered > 0) {
+			parts.push(theme.fg("dim", `Round ${this.roundsAnswered + 1}`));
+		}
 		if (this.currentState()?.answer.trim()) parts.push(theme.fg("muted", "answered"));
-		return parts.length > 0 ? fitLine(parts.join(dotSep(theme)), width) : "";
+		return parts.length > 0 ? wrapTextWithAnsi(parts.join(dotSep(theme)), width) : [];
 	}
 
-	private renderQuestionStrip(width: number): string {
+	/**
+	 * The questions of this round, by name.
+	 *
+	 * Four fixed slots at 80 columns left three characters of each header
+	 * ("Con…", "Sam…"), which is the strip saying nothing. The names now flow on
+	 * one row and wrap to a second when they must; a question that has been
+	 * answered carries a check, the active one carries the cursor.
+	 */
+	private renderQuestionStrip(width: number): string[] {
 		const theme = clioTheme();
-		const total = this.questions.length;
-		// A single-question interview round is the phased shape: one question per
-		// round, several rounds. Its position is the round number, since there is
-		// no set of siblings to draw a strip across.
-		if (total <= 1) {
-			const round = theme.fg("dim", `Round ${this.history.length + 1}`);
-			return fitLine(`${screenTitle(theme, "Interview")}${dotSep(theme)}${round}`, width);
-		}
-		const gap = "  ";
-		const slotWidth = Math.max(10, Math.floor((width - visibleWidth(gap) * (total - 1)) / total));
+		if (this.questions.length <= 1) return [];
 		const parts = this.questions.map((question, index) => {
 			const state = this.states[index];
 			const active = index === this.index;
-			const marker = active ? theme.fg("accent", `${GLYPH.cursor} `) : "  ";
-			const answerState = state?.answer.trim() ? theme.fg("muted", "answered") : theme.fg("dim", "pending");
+			const answered = Boolean(state?.answer.trim());
+			const mark = answered ? `${theme.fg("success", GLYPH.ok)} ` : "";
+			const name = `Q${index + 1} ${compactTitle(question)}`;
 			const title = active
-				? theme.style("accent", compactTitle(question), { bold: true })
-				: theme.fg("muted", compactTitle(question));
-			return fitLine(`${marker}${theme.fg("dim", `Q${index + 1}`)} ${answerState} ${title}`, slotWidth);
+				? `${theme.fg("accent", GLYPH.cursor)} ${theme.style("accent", name, { bold: true })}`
+				: theme.fg(answered ? "muted" : "dim", name);
+			return `${mark}${title}`;
 		});
-		return fitLine(parts.join(gap), width);
+		const round = this.roundsAnswered > 0 ? [theme.fg("dim", `Round ${this.roundsAnswered + 1}`)] : [];
+		const strip = wrapTextWithAnsi([...round, ...parts].join(dotSep(theme)), width).slice(0, 2);
+		return [...strip, ""];
 	}
 
-	private renderControlLines(width: number): string[] {
+	private renderControlLines(width: number, rowBudget: number): string[] {
 		this.ensureControl();
 		const state = this.currentState();
-		if (state?.mode === "text") return this.renderTextInput(width);
-		return this.renderSelectControl(width);
+		if (state?.mode === "text") return this.text?.render(width) ?? [""];
+		return this.renderSelectControl(width, rowBudget);
+	}
+
+	/** Earlier rounds first, then this round's answered siblings. */
+	private ledgerEntries(): Array<{ label: string; answer: string }> {
+		const entries: Array<{ label: string; answer: string }> = [];
+		this.history.forEach((answer, index) => {
+			entries.push({ label: `${index + 1}.`, answer: answer.answer });
+		});
+		if (this.questions.length > 1) {
+			this.states.forEach((state, index) => {
+				const answer = state.answer.trim();
+				if (answer.length > 0 && index !== this.index) entries.push({ label: `Q${index + 1}`, answer });
+			});
+		}
+		return entries;
 	}
 
 	/**
-	 * Everything this interview has captured, rounds already answered first.
+	 * What the interview has captured, folded to one row.
 	 *
-	 * The ledger used to read only the current round's states, so a phased
-	 * interview asking one question per round showed nothing at all: each round
-	 * was a set of one and the summary bailed out. What the operator has already
-	 * told Clio is the reason the full surface exists.
+	 * The full ledger used to sit between the question and its options and grow
+	 * by the whole typed answer every round, so by the fourth question the
+	 * options were twenty rows below the sentence they answered. The ledger is
+	 * one dim row under the options until `a` opens it.
 	 */
-	private renderAnswerLedger(width: number): string[] {
+	private renderAnswerLedger(width: number, rowBudget: number): string[] {
 		const theme = clioTheme();
+		const entries = this.ledgerEntries();
+		if (entries.length === 0) return [];
+		const count = `${entries.length} earlier answer${entries.length === 1 ? "" : "s"}`;
+		if (!this.ledgerExpanded) return ["", fitLine(theme.fg("dim", `${count} · a to review`), width)];
 		const rows: string[] = [];
-		for (let index = 0; index < this.history.length; index += 1) {
-			const answer = this.history[index];
-			if (!answer) continue;
-			rows.push(...wrapLabeledValue(`${theme.fg("dim", `${index + 1}.`)} `, theme.fg("muted", answer.answer), width));
-		}
-		// A round of one question needs no per-question roll: the strip already
-		// names the round and the question is on screen above this.
-		if (this.questions.length > 1) {
-			for (let index = 0; index < this.questions.length; index += 1) {
-				const answer = this.states[index]?.answer.trim();
-				const value = answer && answer.length > 0 ? theme.fg("muted", answer) : theme.fg("dim", "pending");
-				rows.push(...wrapLabeledValue(`${theme.fg("dim", `Q${index + 1}`)} `, value, width));
-			}
+		for (const entry of entries) {
+			rows.push(...wrapLabeledValue(`${theme.fg("dim", entry.label)} `, theme.fg("muted", entry.answer), width));
 		}
-		if (rows.length === 0) return [];
-		return ["", fitLine(theme.fg("dim", "── Answers"), width), ...rows];
-	}
-
-	private renderTextInput(width: number): string[] {
-		const theme = clioTheme();
-		return (this.input?.render(width) ?? [""]).map((line) =>
-			fitLine(line.startsWith("> ") ? `${theme.fg("accent", `${GLYPH.cursor} `)}${line.slice(2)}` : line, width),
-		);
+		const head = ["", fitLine(rule(theme, width, { left: "Answers", leftToken: "dim" }), width)];
+		const budget = Math.max(1, rowBudget - head.length);
+		if (rows.length <= budget) return [...head, ...rows];
+		const kept = rows.slice(0, Math.max(0, budget - 1));
+		return [
+			...head,
+			...kept,
+			fitLine(theme.fg("dim", `${GLYPH.ellipsis} ${rows.length - kept.length} more on /decisions`), width),
+		];
 	}
 
-	private renderSelectControl(width: number): string[] {
+	private renderSelectControl(width: number, rowBudget: number): string[] {
 		const question = this.currentQuestion();
 		const state = this.currentState();
 		const selectedItem = this.list?.getSelectedItem();
 		if (!question || !state || !selectedItem) return [""];
-		const theme = clioTheme();
 		const items = optionItems(question, state.selected);
-		const selectedIndex = Math.max(
+		const focusedIndex = Math.max(
 			0,
 			items.findIndex((item) => item.value === selectedItem.value),
 		);
-		const primaryColumnWidth = this.primaryColumnWidth(items, width);
-		const acceptKey = question.multi_select === true ? "Space" : "Enter";
-		// The focused option's description wraps in full, so the rows it needs come
-		// out of the list rather than out of the sentence. Options the operator
-		// cannot currently read are what a windowed list is for, and one arrow key
-		// brings any of them back; a cut explanation has no such recovery.
-		const focusedRows = this.renderOptionRow(
-			items[selectedIndex] as SelectItem,
-			true,
-			width,
-			primaryColumnWidth,
-			acceptKey,
-		).length;
-		const budget = Math.max(1, this.maxVisibleOptions() - (focusedRows - 1));
-		const visibleCount = Math.min(budget, Math.max(1, items.length));
-		const start = Math.max(0, Math.min(selectedIndex - Math.floor(visibleCount / 2), items.length - visibleCount));
-		const end = Math.min(items.length, start + visibleCount);
-		const lines: string[] = [];
-
-		for (let index = start; index < end; index += 1) {
-			const item = items[index];
-			if (!item) continue;
-			lines.push(...this.renderOptionRow(item, index === selectedIndex, width, primaryColumnWidth, acceptKey));
-		}
-
-		if (start > 0 || end < items.length) {
-			lines.push(fitLine(theme.fg("dim", `  (${selectedIndex + 1}/${items.length})`), width));
-		}
-		return lines;
-	}
-
-	private primaryColumnWidth(items: ReadonlyArray<SelectItem>, width: number): number {
-		const widest = items.reduce((max, item) => Math.max(max, visibleWidth(item.label) + 2), 0);
-		const bounded = Math.max(24, Math.min(38, widest));
-		return Math.max(1, Math.min(bounded, Math.max(1, width - 4)));
-	}
-
-	/**
-	 * One option, as the rows it needs.
-	 *
-	 * The focused option's description wraps under its own column and is never
-	 * cut: a description is what the operator is choosing between, and half of
-	 * one reads as the whole thing. An unfocused row stays a one-line table cell
-	 * whose ellipsis says there is more, which the operator reads by moving to
-	 * it.
-	 */
-	private renderOptionRow(
-		item: SelectItem,
-		selected: boolean,
-		width: number,
-		primaryColumnWidth: number,
-		acceptKey: string,
-	): string[] {
-		const theme = clioTheme();
-		const prefix = selected ? theme.fg("accent", `${GLYPH.cursor} `) : "  ";
-		// The key that answers rides on the focused row. An operator whose eyes are
-		// already on the option they want should not have to travel to the footer
-		// to learn what commits it.
-		const affordance = selected ? ` ${theme.style("accent", `[${acceptKey}]`, { bold: true })}` : "";
-		const available = Math.max(1, width - 2 - visibleWidth(affordance));
-		const description = item.description?.replace(/[\r\n]+/g, " ").trim();
-
-		if (!description || width <= 40) {
-			const label = truncateToWidth(item.label, available, ELLIPSIS, false);
-			const body = selected ? theme.style("accent", label, { bold: true }) : label;
-			return [fitLine(`${prefix}${body}${affordance}`, width)];
-		}
-
-		const labelWidth = Math.max(1, Math.min(primaryColumnWidth - 2, available - 4));
-		const label = truncateToWidth(item.label, labelWidth, ELLIPSIS, false);
-		const spacing = " ".repeat(Math.max(1, primaryColumnWidth - visibleWidth(label)));
-		const descriptionWidth = Math.max(1, available - visibleWidth(label) - visibleWidth(spacing));
-		if (!selected) {
-			const desc = truncateToWidth(description, descriptionWidth, ELLIPSIS, false);
-			return [fitLine(`${prefix}${label}${theme.fg("muted", `${spacing}${desc}`)}`, width)];
-		}
-		// A gutter this narrow wraps a sentence into slivers and breaks words, so
-		// below the floor the description drops to its own full-width lines under
-		// the label instead of squeezing into the second column.
-		if (descriptionWidth < MIN_DESCRIPTION_COLUMN) {
-			const indent = "    ";
-			const body = theme.style("accent", label, { bold: true });
-			return [
-				fitLine(`${prefix}${body}${affordance}`, width),
-				...wrapTextWithAnsi(description, Math.max(1, width - indent.length)).map((line) =>
-					fitLine(`${indent}${theme.style("accent", line, { bold: true })}`, width),
-				),
+		const layout = layoutOptionRows(items, focusedIndex, width);
+		if ((layout.rows[focusedIndex]?.length ?? 0) >= rowBudget) {
+			this.optionDetailRows = [
+				"",
+				...wrapTextWithAnsi(`Option details: ${selectedItem.label}`, width),
+				...wrapTextWithAnsi(selectedItem.description ?? "", width),
 			];
+			layout.rows[focusedIndex] = wrapTextWithAnsi(
+				`${GLYPH.cursor} ${selectedItem.label} (details above; PgUp/PgDn)`,
+				width,
+			);
 		}
-		const wrapped = wrapTextWithAnsi(description, descriptionWidth);
-		const head = wrapped[0] ?? "";
-		const indent = " ".repeat(visibleWidth(prefix) + visibleWidth(label) + visibleWidth(spacing));
-		return [
-			fitLine(`${prefix}${theme.style("accent", `${label}${spacing}${head}`, { bold: true })}${affordance}`, width),
-			...wrapped.slice(1).map((line) => fitLine(`${indent}${theme.style("accent", line, { bold: true })}`, width)),
-		];
+		return windowOptionRows(layout, focusedIndex, rowBudget, width);
 	}
 
 	private ensureControl(): void {
 		const question = this.currentQuestion();
 		const state = this.currentState();
 		if (!question || !state) return;
-		if (state.mode === "text" && !this.input) this.rebuildTextInput(question, state);
+		if (state.mode === "text" && !this.text) this.rebuildTextInput(question, state, "Your answer");
 		if (state.mode === "select" && !this.list) this.rebuildSelectList(question, state);
 	}
 
@@ -924,59 +967,67 @@ class AskUserOverlayView implements Component {
 		const question = this.currentQuestion();
 		const state = this.currentState();
 		if (!question || !state) {
-			this.input = null;
+			this.text = null;
 			this.list = null;
 			return;
 		}
-		if (state.mode === "text") this.rebuildTextInput(question, state);
+		if (state.mode === "text") this.rebuildTextInput(question, state, "Your answer");
 		else this.rebuildSelectList(question, state);
 	}
 
-	private rebuildTextInput(question: AskUserQuestion, state: QuestionState): void {
-		const activeInput = new Input();
-		activeInput.setValue(state.inputValue || state.customAnswer || state.answer);
-		activeInput.onSubmit = (value) => {
-			const answer = value.trim();
-			if (answer.length === 0) {
-				this.status = "Enter an answer or press Esc to cancel.";
-				this.deps.requestRender();
-				return;
-			}
-			state.inputValue = answer;
-			// Verbatim, before any joining or trimming the display line does. The
-			// typed text is the answer; the one-line `answer` is a rendering of it.
-			state.rawValue = value;
-			if (questionHasOptions(question) && question.multi_select === true) {
-				state.customAnswer = answer;
-				this.commitCurrentAnswer();
-				return;
-			}
-			state.customAnswer = questionHasOptions(question) ? answer : "";
-			// The chosen labels and the typed text compose, so a question answered
-			// with an option that says "I will type it" keeps both. With nothing
-			// selected, which is the implicit Other path, this is the text alone.
-			state.answer = questionHasOptions(question) ? answerText(question, state.selected, state.customAnswer) : answer;
-			this.finishIfCompleteOrAdvance();
-		};
-		activeInput.onEscape = () => this.escapeFromTextInput(question, state);
-		this.input = activeInput;
+	private submitText(question: AskUserQuestion, state: QuestionState, value: string): void {
+		const answer = value.trim();
+		if (answer.length === 0) {
+			this.status = "Enter an answer or press Esc to cancel.";
+			this.deps.requestRender();
+			return;
+		}
+		state.inputValue = answer;
+		// Verbatim, before any joining or trimming the display line does. The
+		// typed text is the answer; the one-line `answer` is a rendering of it.
+		state.rawValue = value;
+		if (questionHasOptions(question) && question.multi_select === true) {
+			state.customAnswer = answer;
+			this.commitCurrentAnswer();
+			return;
+		}
+		state.customAnswer = questionHasOptions(question) ? answer : "";
+		// The chosen labels and the typed text compose, so a question answered
+		// with an option that says "I will type it" keeps both. With nothing
+		// selected, which is the implicit Other path, this is the text alone.
+		state.answer = questionHasOptions(question)
+			? answerText(question, state.selected, state.customAnswer)
+			: answer.replace(/\s*\n\s*/g, " ");
+		this.finishIfCompleteOrAdvance();
+	}
+
+	private rebuildTextInput(question: AskUserQuestion, state: QuestionState, caption: string): void {
+		const initial = state.inputValue || state.customAnswer || state.answer;
+		if (this.deps.tui) {
+			const editor = new AnswerEditor(this.deps.tui);
+			editor.caption = caption;
+			editor.setText(initial);
+			editor.onSubmit = (value) => this.submitText(question, state, value);
+			this.text = editor;
+		} else {
+			const input = new Input();
+			input.setValue(initial);
+			input.onSubmit = (value) => this.submitText(question, state, value);
+			this.text = new InputTextControl(input, caption);
+		}
 		this.list = null;
 	}
 
 	private rebuildSelectList(question: AskUserQuestion, state: QuestionState): void {
 		const items = optionItems(question, state.selected);
-		const activeList = new SelectList(
-			items,
-			Math.min(this.maxVisibleOptions(), Math.max(1, items.length)),
-			DEFAULT_SELECT_THEME,
-			{
-				minPrimaryColumnWidth: 24,
-				maxPrimaryColumnWidth: 38,
-			},
-		);
+		const activeList = new SelectList(items, Math.max(1, items.length), DEFAULT_SELECT_THEME, {
+			minPrimaryColumnWidth: MIN_LABEL_COLUMN,
+			maxPrimaryColumnWidth: MAX_LABEL_COLUMN,
+		});
 		activeList.onSelect = (item) => {
 			if (item.value === "other") {
-				this.openTextInput("Other answer");
+				if (!question.multi_select) state.selected = new Set();
+				this.openTextInput("Your answer");
 				return;
 			}
 			const optionIndex = optionIndexFromValue(item.value);
@@ -985,6 +1036,11 @@ class AskUserOverlayView implements Component {
 				this.toggleSelectionIndex(question, state, optionIndex);
 				return;
 			}
+			const label = question.options?.[optionIndex]?.label ?? item.label;
+			if (optionAsksForText(label)) {
+				this.chooseFocusedAndOpenText(question, state);
+				return;
+			}
 			state.selected = new Set<number>([optionIndex]);
 			// Choosing a plain option is a label-only answer, so the typed text
 			// clears with the choice: it was given for a label the operator has
@@ -1004,7 +1060,7 @@ class AskUserOverlayView implements Component {
 		};
 		const selectedIndex = this.preferredSelectedIndex(question, state, items);
 		if (selectedIndex >= 0) activeList.setSelectedIndex(selectedIndex);
-		this.input = null;
+		this.text = null;
 		this.list = activeList;
 	}
 
@@ -1049,6 +1105,7 @@ class AskUserOverlayView implements Component {
 			return;
 		}
 		state.inputValue = "";
+		state.selected = new Set(state.committedSelected);
 		state.mode = "select";
 		this.status = "";
 		this.rebuildSelectList(question, state);
@@ -1076,14 +1133,14 @@ class AskUserOverlayView implements Component {
 		state.mode = "select";
 	}
 
-	private openTextInput(nextStatus: string): void {
+	private openTextInput(caption: string): void {
 		const state = this.currentState();
 		const question = this.currentQuestion();
 		if (!state || !question) return;
 		this.syncActiveControl();
 		state.mode = "text";
-		this.status = nextStatus;
-		this.rebuildTextInput(question, state);
+		this.status = "";
+		this.rebuildTextInput(question, state, caption);
 		this.deps.requestRender();
 	}
 
@@ -1091,7 +1148,7 @@ class AskUserOverlayView implements Component {
 		const current = this.list?.getSelectedItem();
 		if (!current) return;
 		if (current.value === "other") {
-			this.openTextInput("Other answer");
+			this.openTextInput("Your answer");
 			return;
 		}
 		const optionIndex = optionIndexFromValue(current.value);
@@ -1111,7 +1168,7 @@ class AskUserOverlayView implements Component {
 	private commitMultiSelectOrOpenOther(state: QuestionState): void {
 		const current = this.list?.getSelectedItem();
 		if (current?.value === "other") {
-			this.openTextInput("Other answer");
+			this.openTextInput("Your answer");
 			return;
 		}
 		const optionIndex = current ? optionIndexFromValue(current.value) : null;
@@ -1138,6 +1195,8 @@ class AskUserOverlayView implements Component {
 
 	private finishIfCompleteOrAdvance(): void {
 		this.syncActiveControl();
+		const current = this.currentState();
+		if (current) current.committedSelected = new Set(current.selected);
 		if (this.allAnswered()) {
 			this.finish({ answers: this.answers() });
 			return;
@@ -1145,7 +1204,7 @@ class AskUserOverlayView implements Component {
 		const next = this.nextUnansweredIndex();
 		if (next !== null) {
 			this.index = next;
-			this.resetContentScroll();
+			this.resetQuestionScroll();
 			const nextState = this.currentState();
 			const nextQuestion = this.currentQuestion();
 			if (nextState && nextQuestion && !nextState.answer.trim()) nextState.mode = initialMode(nextQuestion);
@@ -1179,7 +1238,7 @@ class AskUserOverlayView implements Component {
 			const state = this.states[index];
 			const answer = state?.answer.trim();
 			if (!question || !state || !answer || answer.length === 0) continue;
-			const options = selectedOptionLabels(question, state.selected);
+			const options = selectedOptionLabels(question, state.committedSelected);
 			answers.push({
 				question: question.question,
 				answer,
@@ -1196,7 +1255,7 @@ class AskUserOverlayView implements Component {
 		this.parkTextMode();
 		this.index = (this.index + delta + this.questions.length) % this.questions.length;
 		this.status = "";
-		this.resetContentScroll();
+		this.resetQuestionScroll();
 		this.rebuildControl();
 		this.deps.requestRender();
 	}
@@ -1208,69 +1267,84 @@ class AskUserOverlayView implements Component {
 			const current = this.list.getSelectedItem();
 			if (current) state.focusedValue = current.value;
 		}
-		if (this.input) state.inputValue = this.input.getValue();
+		if (this.text) state.inputValue = this.text.getText();
 	}
 }
 
 /**
- * Show the ask_user overlay, on whichever surface the request calls for.
+ * The view without a frame, for layout tests: it renders the body rows the
+ * frame would wrap, at the width and row count the test names.
+ */
+export interface AskUserViewForTesting {
+	ask(questions: ReadonlyArray<AskUserQuestion>, presentation?: DecisionPresentation): Promise<AskUserResult>;
+	render(width: number): string[];
+	handleInput(data: string): void;
+	footerHint(): string;
+	cancel(): void;
+}
+
+export function createAskUserViewForTesting(deps: {
+	rows: number;
+	tui?: TUI;
+	onCancel?: () => void;
+}): AskUserViewForTesting {
+	const view = new AskUserOverlayView({
+		onCancel: deps.onCancel ?? (() => {}),
+		getTerminalRows: () => deps.rows,
+		requestRender: () => {},
+		...(deps.tui ? { tui: deps.tui } : {}),
+	});
+	return {
+		ask: (questions, presentation) => view.begin(questions, presentation),
+		render: (width) => view.render(width),
+		handleInput: (data) => view.handleInput(data),
+		footerHint: () => view.footerHint(),
+		cancel: () => view.cancel(),
+	};
+}
+
+/**
+ * Show the ask_user overlay.
  *
- * A box's anchor, width, and height budget are fixed when the engine mounts it,
- * so moving between surfaces means mounting a new frame around the same body and
- * dropping the old one. That happens at most once per round, when the shape of
- * the request actually changes; the new frame is shown before the old one is
- * hidden so the keyboard passes straight across instead of returning to the
- * composer for a frame.
+ * One frame for the whole interview: it sits above the composer, takes its
+ * width from the terminal, and its height from what the round has to say. A
+ * shape change between rounds is just the next render; nothing is remounted.
  */
 export function openAskUserOverlay(tui: TUI, deps: OpenAskUserOverlayDeps): AskUserOverlaySession {
-	let handle: OverlayHandle | null = null;
-	let mounted: AskUserSurface | null = null;
 	let closed = false;
 
 	const view = new AskUserOverlayView({
 		...deps,
 		getTerminalRows: () => tui.terminal?.rows ?? 0,
 		requestRender: () => tui.requestRender(),
-		onSurface: (surface) => mount(surface),
+		tui,
 	});
 
-	const mount = (surface: AskUserSurface): void => {
-		if (closed || mounted === surface) return;
-		const geometry = ASK_USER_SURFACE_GEOMETRY[surface];
-		const previous = handle;
-		handle = showClioOverlayFrame(tui, view, {
-			anchor: geometry.anchor,
-			width: geometry.width,
-			// A zero cap means the frame keeps its own budget, which is every row
-			// the terminal has left after the margins.
-			...(geometry.maxInnerRows > 0 ? { maxHeight: geometry.maxInnerRows + ASK_USER_FRAME_ROWS } : {}),
-			margin: geometry.margin,
-			// Not derived from the title: this modal swaps between a waiting title
-			// and a classified decision title without ever changing hands.
-			markerId: "ask-user",
-			title: () => (view.isDecisionPending() ? view.decisionTitle() : ASK_USER_WAITING_TITLE),
-			tone: () => (view.isDecisionPending() ? view.decisionTone() : undefined),
-			footerHint: () => view.footerHint(),
-		});
-		mounted = surface;
-		previous?.hide();
-	};
-
-	mount(view.currentSurface());
+	const handle = showClioOverlayFrame(tui, view, {
+		anchor: "bottom-center",
+		width: askUserBoxWidth(tui.terminal?.columns ?? 0),
+		margin: ASK_USER_MARGIN,
+		// Not derived from the title: this modal swaps between a waiting title
+		// and a classified decision title without ever changing hands.
+		markerId: "ask-user",
+		title: () => (view.isDecisionPending() ? view.decisionTitle() : ASK_USER_WAITING_TITLE),
+		tone: () => (view.isDecisionPending() ? view.decisionTone() : undefined),
+		footerHint: () => view.footerHint(),
+	});
 
 	const close = (): void => {
+		if (closed) return;
 		closed = true;
 		view.close();
-		handle?.hide();
-		handle = null;
+		handle.hide();
 	};
 	return {
-		setHidden: (hidden) => handle?.setHidden(hidden),
-		isHidden: () => handle?.isHidden() ?? true,
-		focus: () => handle?.focus(),
-		unfocus: (options) => (options ? handle?.unfocus(options) : handle?.unfocus()),
-		isFocused: () => handle?.isFocused() ?? false,
-		getBounds: () => handle?.getBounds(),
+		setHidden: (hidden) => handle.setHidden(hidden),
+		isHidden: () => (closed ? true : handle.isHidden()),
+		focus: () => handle.focus(),
+		unfocus: (options) => (options ? handle.unfocus(options) : handle.unfocus()),
+		isFocused: () => (closed ? false : handle.isFocused()),
+		getBounds: () => (closed ? undefined : handle.getBounds()),
 		ask: (questions, presentation) => view.begin(questions, presentation),
 		cancel: () => view.cancel(),
 		close,