@herbertgao/pi-extensions 2026.8.6 → 2026.8.8

package/node_modules/@juicesharp/rpiv-ask-user-question/state/selectors/projections.ts

@@ -5,23 +5,32 @@ import type { SubmitPickerProps } from "../../view/components/submit-picker.js";
 import type { TabBarProps } from "../../view/components/tab-bar.js";
 import type { DialogProps } from "../../view/dialog-builder.js";
 import { displayLabel } from "../i18n-bridge.js";
-import type { GlobalSelector, PerTabSelector } from "./contract.js";
+import type { GlobalSelector, PerTabBindingContext, PerTabSelector } from "./contract.js";
 import { selectConfirmedIndicator } from "./derivations.js";
 
+function emptyMultiSelectProps(ctx: PerTabBindingContext): MultiSelectViewProps {
+	return {
+		rows: [],
+		other: {
+			active: false,
+			inputMode: false,
+			inputBuffer: ctx.inputBuffer,
+			inputCursorOffset: ctx.inputCursorOffset,
+		},
+		nextActive: false,
+		nextLabel: displayLabel("next"),
+	};
+}
+
+function nextLabelFor(ctx: PerTabBindingContext): string {
+	const isLastQuestion = ctx.i === ctx.questions.length - 1;
+	return isLastQuestion ? MULTI_SUBMIT_LABEL : displayLabel("next");
+}
+
 export const selectMultiSelectProps: PerTabSelector<MultiSelectViewProps> = (state, ctx) => {
 	const question = ctx.questions[ctx.i];
 	if (!question) {
-		return {
-			rows: [],
-			other: {
-				active: false,
-				inputMode: false,
-				inputBuffer: ctx.inputBuffer,
-				inputCursorOffset: ctx.inputCursorOffset,
-			},
-			nextActive: false,
-			nextLabel: displayLabel("next"),
-		};
+		return emptyMultiSelectProps(ctx);
 	}
 	const focused = ctx.activeView === "options";
 	const rows: { checked: boolean; active: boolean }[] = [];
@@ -33,8 +42,6 @@ export const selectMultiSelectProps: PerTabSelector<MultiSelectViewProps> = (sta
 	}
 	const otherActive = focused && state.optionIndex === question.options.length;
 	const nextActive = focused && state.optionIndex === question.options.length + 1;
-	const isLastQuestion = ctx.i === ctx.questions.length - 1;
-	const nextLabel = isLastQuestion ? MULTI_SUBMIT_LABEL : displayLabel("next");
 	return {
 		rows,
 		other: {
@@ -44,7 +51,7 @@ export const selectMultiSelectProps: PerTabSelector<MultiSelectViewProps> = (sta
 			inputCursorOffset: ctx.inputCursorOffset,
 		},
 		nextActive,
-		nextLabel,
+		nextLabel: nextLabelFor(ctx),
 	};
 };
 

package/node_modules/@juicesharp/rpiv-ask-user-question/state/state-reducer.ts

@@ -139,7 +139,17 @@ function switchTabResult(state: QuestionnaireState, nextTab: number, ctx: ApplyC
 }
 
 function doneFor(state: QuestionnaireState, ctx: ApplyContext, cancelled: boolean): ApplyResult {
-	const result: QuestionnaireResult = { answers: orderedAnswers(state, ctx.questions), cancelled };
+	// Global note lift: the Submit-tab note lives at the `questions.length` pseudo-index
+	// in `notesByTab` — question tabs only occupy 0..questions.length-1, so this can never
+	// cross-contaminate a per-question note. Attached regardless of `cancelled` (the
+	// reducer is truth; the envelope owns decline presentation), with cancel/submit/confirm
+	// sharing this single lift. Conditional spread keeps note-free results byte-identical.
+	const globalNote = state.notesByTab.get(ctx.questions.length);
+	const result: QuestionnaireResult = {
+		answers: orderedAnswers(state, ctx.questions),
+		cancelled,
+		...(globalNote && globalNote.length > 0 ? { globalNote } : {}),
+	};
 	return { state, effects: [{ kind: "done", result }] };
 }
 

package/node_modules/@juicesharp/rpiv-ask-user-question/state/state.ts

@@ -25,12 +25,20 @@ export interface QuestionnaireState {
 	/** Canonical mirror of the in-flight notes editor; runtime mirrors after `forward_notes_keystroke`. */
 	notesDraft: string;
 	/**
-	 * Collapsed mode: the questionnaire shrinks to a single hint row so the agent transcript
-	 * behind the bottom-anchored overlay becomes readable. Toggled by `Ctrl+]` from any state;
-	 * while true, every keystroke except cancel is swallowed (see `routeKey`). The overlay
-	 * stays focused so the expand key never falls through to an underlying overlay (e.g.
-	 * `/btw`) — that focus-restore property is the entire reason we render a collapsed row
-	 * instead of calling `OverlayHandle.setHidden(true)`.
+	 * Collapsed mode: the questionnaire gets out of the way so the agent transcript behind
+	 * the bottom-anchored overlay becomes readable. Toggled by the configured collapse key
+	 * from any state; while true, every keystroke except cancel is swallowed (see
+	 * `routeKey`). Two renderings, chosen by host capability:
+	 *
+	 * - Hosts with an `OverlayHandle` AND a raw `onTerminalInput` listener (real pi-tui):
+	 *   the `set_overlay_hidden` effect fully hides the overlay; the raw listener registered
+	 *   in `execute()` reopens it, because pi-tui routes no input to a hidden overlay.
+	 * - Hosts without the raw listener (or without a handle): the overlay stays visible and
+	 *   shrinks to a single hint row. The row keeps focus and input routing, so the same key
+	 *   expands it and Esc cancels, and the expand key never falls through to an underlying
+	 *   overlay (e.g. `/btw`). The session gates `set_overlay_hidden` on the listener's
+	 *   existence (`canReopenWhileHidden`) so a handle-bearing host without raw input can
+	 *   never hide the overlay into a state nothing can reopen.
 	 */
 	collapsed: boolean;
 }

package/node_modules/@juicesharp/rpiv-ask-user-question/tool/response-envelope.ts

@@ -9,12 +9,18 @@ export const ENVELOPE_SUFFIX = "You can now continue with the user's answers in
  * Map a `QuestionnaireResult` (or null/cancelled) to the LLM-facing tool envelope.
  * Pure of `(result, params)`; cancelled and "no segments" both fall to `DECLINE_MESSAGE`
  * so the model sees a single canonical "didn't answer" signal regardless of why.
+ * "No segments" means no answers AND no global note — the `global note:` segment is
+ * pushed before the zero-segments check, so a note-bearing submit with zero answers
+ * still yields the answered envelope.
  */
 export function buildQuestionnaireResponse(result: QuestionnaireResult | null | undefined, params: QuestionParams) {
 	if (!result || result.cancelled) {
+		// Decline text stays canonical even when a global note rides the cancelled result;
+		// the note survives in `details` (like partial `answers`) for replay consumers.
 		return buildToolResult(DECLINE_MESSAGE, {
 			answers: result?.answers ?? [],
 			cancelled: true,
+			...(result?.globalNote && result.globalNote.length > 0 ? { globalNote: result.globalNote } : {}),
 		});
 	}
 	const segments: string[] = [];
@@ -22,6 +28,11 @@ export function buildQuestionnaireResponse(result: QuestionnaireResult | null |
 		const a = result.answers.find((x) => x.questionIndex === i);
 		if (a) segments.push(buildAnswerSegment(a));
 	}
+	// Global note rides after the per-question segments: raw multiline echo (no
+	// reformatting), trailing period mirroring `buildAnswerSegment`'s shape.
+	if (result.globalNote && result.globalNote.length > 0) {
+		segments.push(`global note: ${result.globalNote}.`);
+	}
 	if (segments.length === 0) {
 		return buildToolResult(DECLINE_MESSAGE, { answers: result.answers, cancelled: true });
 	}

package/node_modules/@juicesharp/rpiv-ask-user-question/tool/types.ts

@@ -135,6 +135,17 @@ export type QuestionnaireError =
 export interface QuestionnaireResult {
 	answers: QuestionAnswer[];
 	cancelled: boolean;
+	/**
+	 * Global note authored on the Submit tab: `n` opens the shared notes editor there,
+	 * and the committed text lives at the `notesByTab[questions.length]` pseudo-index
+	 * (a slot no question tab can occupy) until `doneFor` lifts it onto the result —
+	 * attached on both submit and cancel, like per-question `answers[].notes`.
+	 * Conditional-spread contract, mirroring `QuestionAnswer.notes`: the key appears
+	 * only via conditional spread of a non-empty string — never assigned `undefined`,
+	 * never kept for an empty/whitespace-only draft — so note-free results stay
+	 * byte-identical (`!("globalNote" in result)` holds).
+	 */
+	globalNote?: string;
 	error?: QuestionnaireError;
 }
 

package/node_modules/@juicesharp/rpiv-ask-user-question/view/components/multi-select-view.ts

@@ -50,6 +50,12 @@ interface MultiSelectLayout {
 	focusedRange: [number, number];
 }
 
+/** Mutable row accumulator threaded through the append helpers during a layout miss. */
+interface MultiSelectBuild {
+	lines: string[];
+	focusedRange: [number, number];
+}
+
 export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
 	private props: MultiSelectViewProps;
 	private cachedLayout: { width: number; value: MultiSelectLayout } | undefined;
@@ -92,47 +98,55 @@ export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
 	private layout(width: number): MultiSelectLayout {
 		if (this.cachedLayout?.width === width) return this.cachedLayout.value;
 
-		const lines: string[] = [];
-		let focusedRange: [number, number] = [0, 0];
+		const build: MultiSelectBuild = { lines: [], focusedRange: [0, 0] };
 		const contentWidth = Math.max(1, width - this.prefixVisibleWidth());
 		const numberWidth = String(Math.max(1, this.question.options.length + 1)).length;
+
+		this.appendOptionRows(build, width, contentWidth, numberWidth);
+
+		const otherStart = build.lines.length;
+		build.lines.push(...this.renderOtherRow(contentWidth, numberWidth));
+		if (this.props.other.active) build.focusedRange = [otherStart, build.lines.length];
+
+		this.appendNextRow(build, width);
+
+		const value = { lines: build.lines, focusedRange: build.focusedRange };
+		this.cachedLayout = { width, value };
+		return value;
+	}
+
+	private appendOptionRows(build: MultiSelectBuild, width: number, contentWidth: number, numberWidth: number): void {
 		for (let i = 0; i < this.question.options.length; i++) {
 			const opt = this.question.options[i];
 			const row = this.props.rows[i];
 			if (!opt || !row) continue;
-			const start = lines.length;
+			const start = build.lines.length;
 			const pointer = row.active ? this.theme.fg("accent", ACTIVE_POINTER) : INACTIVE_POINTER;
 			// Checked and active rows share the accent hue, matching the dialog's selection rhythm.
 			const box = row.checked ? this.theme.fg("accent", CHECKED) : this.theme.fg("muted", UNCHECKED);
 			const label = truncateToWidth(opt.label, contentWidth, "…");
 			const styledLabel = row.active ? this.theme.fg("accent", this.theme.bold(label)) : label;
 			const number = String(i + 1).padStart(numberWidth, " ");
-			lines.push(
+			build.lines.push(
 				truncateToWidth(`${pointer}${number}${NUMBER_SEPARATOR}${box}${BOX_LABEL_GAP}${styledLabel}`, width, ""),
 			);
 			if (opt.description) {
 				for (const segment of wrapTextWithAnsi(opt.description, contentWidth)) {
-					lines.push(CONTINUATION_INDENT + this.theme.fg("muted", segment));
+					build.lines.push(CONTINUATION_INDENT + this.theme.fg("muted", segment));
 				}
 			}
-			if (row.active) focusedRange = [start, lines.length];
+			if (row.active) build.focusedRange = [start, build.lines.length];
 		}
+	}
 
-		const otherStart = lines.length;
-		lines.push(...this.renderOtherRow(contentWidth, numberWidth));
-		if (this.props.other.active) focusedRange = [otherStart, lines.length];
-
-		const nextStart = lines.length;
+	private appendNextRow(build: MultiSelectBuild, width: number): void {
+		const nextStart = build.lines.length;
 		const nextPointer = this.props.nextActive ? this.theme.fg("accent", ACTIVE_POINTER) : INACTIVE_POINTER;
 		const nextLabel = this.props.nextActive
 			? this.theme.fg("accent", this.theme.bold(this.props.nextLabel))
 			: this.props.nextLabel;
-		lines.push(truncateToWidth(`${nextPointer}${nextLabel}`, width, ""));
-		if (this.props.nextActive) focusedRange = [nextStart, lines.length];
-
-		const value = { lines, focusedRange };
-		this.cachedLayout = { width, value };
-		return value;
+		build.lines.push(truncateToWidth(`${nextPointer}${nextLabel}`, width, ""));
+		if (this.props.nextActive) build.focusedRange = [nextStart, build.lines.length];
 	}
 
 	private renderOtherRow(contentWidth: number, numberWidth: number): string[] {

package/node_modules/@juicesharp/rpiv-ask-user-question/view/components/preview/preview-block-renderer.ts

@@ -23,6 +23,17 @@ import type { PreviewLayoutMode } from "./preview-layout-decider.js";
  */
 export const NOTES_AFFORDANCE_TEXT = "Notes: press n to add notes";
 
+/** Content row budget for a layout mode: preview cap minus border + affordance overhead. */
+function contentBudgetFor(mode: PreviewLayoutMode): number {
+	const cap = mode === "side-by-side" ? MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE : MAX_PREVIEW_HEIGHT_STACKED;
+	return Math.max(1, cap - BORDER_VERTICAL_OVERHEAD - NOTES_AFFORDANCE_OVERHEAD);
+}
+
+/** Inner (padding-aware) content width for a total block width. */
+function innerWidthFor(width: number): number {
+	return Math.max(1, width - BORDER_HORIZONTAL_OVERHEAD - 2 * BORDER_INNER_PADDING_HORIZONTAL);
+}
+
 export interface PreviewBlockRendererConfig {
 	question: QuestionData;
 	theme: Theme;
@@ -66,9 +77,8 @@ export class PreviewBlockRenderer {
 	 * — the affordance overhead is constant, not gated by `focused`/`notesVisible`.
 	 */
 	blockHeight(width: number, optionIndex: number, mode: PreviewLayoutMode): number {
-		const cap = mode === "side-by-side" ? MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE : MAX_PREVIEW_HEIGHT_STACKED;
-		const contentBudget = Math.max(1, cap - BORDER_VERTICAL_OVERHEAD - NOTES_AFFORDANCE_OVERHEAD);
-		const innerWidth = Math.max(1, width - BORDER_HORIZONTAL_OVERHEAD - 2 * BORDER_INNER_PADDING_HORIZONTAL);
+		const contentBudget = contentBudgetFor(mode);
+		const innerWidth = innerWidthFor(width);
 		const rawRows = this.cache.bodyFor(optionIndex, innerWidth).length;
 		const contentRows = Math.min(rawRows, contentBudget);
 		return BORDER_VERTICAL_OVERHEAD + contentRows + NOTES_AFFORDANCE_OVERHEAD;
@@ -87,9 +97,8 @@ export class PreviewBlockRenderer {
 		focused: boolean,
 		notesVisible: boolean,
 	): string[] {
-		const cap = mode === "side-by-side" ? MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE : MAX_PREVIEW_HEIGHT_STACKED;
-		const contentBudget = Math.max(1, cap - BORDER_VERTICAL_OVERHEAD - NOTES_AFFORDANCE_OVERHEAD);
-		const maxInnerWidth = Math.max(1, width - BORDER_HORIZONTAL_OVERHEAD - 2 * BORDER_INNER_PADDING_HORIZONTAL);
+		const contentBudget = contentBudgetFor(mode);
+		const maxInnerWidth = innerWidthFor(width);
 
 		const raw = this.cache.bodyFor(optionIndex, maxInnerWidth);
 		const truncated = raw.length > contentBudget;

package/node_modules/@juicesharp/rpiv-ask-user-question/view/components/wrapping-select.ts

@@ -216,6 +216,20 @@ export class WrappingSelect implements Component {
 			return this.renderInlineInputRow(rowPrefix, continuationPrefix, contentWidth);
 		}
 
+		const { label, isConfirmed } = this.deriveConfirmedState(item, index);
+		const applySelectedStyle = isActive || isConfirmed;
+
+		return [
+			...this.renderLabelBlock(label, rowPrefix, continuationPrefix, contentWidth, applySelectedStyle),
+			...this.renderDescriptionBlock(item.description, continuationPrefix, contentWidth),
+		];
+	}
+
+	/**
+	 * Derive the confirmed-rendering facts for one row: the final label (custom draft
+	 * or confirmed-override aware) and whether the ✔ mark applies.
+	 */
+	private deriveConfirmedState(item: WrappingSelectItem, index: number): { label: string; isConfirmed: boolean } {
 		// Keep an in-flight custom draft visible even while the cursor browses another row.
 		// If it differs from a previously confirmed custom answer, omit the confirmation
 		// mark so the pending draft is not presented as committed.
@@ -230,12 +244,7 @@ export class WrappingSelect implements Component {
 		const label = isConfirmed
 			? `${this.confirmedLabelOverride ?? baseLabel}${WrappingSelect.CONFIRMED_MARK}`
 			: baseLabel;
-		const applySelectedStyle = isActive || isConfirmed;
-
-		return [
-			...this.renderLabelBlock(label, rowPrefix, continuationPrefix, contentWidth, applySelectedStyle),
-			...this.renderDescriptionBlock(item.description, continuationPrefix, contentWidth),
-		];
+		return { label, isConfirmed };
 	}
 
 	private buildRowPrefix(index: number, isActive: boolean, numberWidth: number): string {

package/node_modules/@juicesharp/rpiv-ask-user-question/view/dialog-builder.ts

@@ -1,5 +1,6 @@
 import { DynamicBorder, type Theme } from "@earendil-works/pi-coding-agent";
 import { type Component, Container, type Editor, Spacer } from "@earendil-works/pi-tui";
+import { DEFAULT_COLLAPSE_KEY, formatKeySpecForDisplay } from "../config.js";
 import type { QuestionnaireState } from "../state/state.js";
 import type { QuestionData } from "../tool/types.js";
 import type { PreviewPaneProps } from "./components/preview/preview-pane.js";
@@ -16,8 +17,21 @@ export const HINT_PART_TOGGLE = "Space to toggle";
 export const HINT_PART_NOTES = "n to add notes";
 export const HINT_PART_TAB = "Tab to switch questions";
 export const HINT_PART_CANCEL = "Esc to cancel";
-export const HINT_PART_COLLAPSE = "Ctrl+] to collapse";
-export const HINT_PART_EXPAND = "Ctrl+] to expand";
+/**
+ * Collapse/expand hint copy is templated on `KEY_PLACEHOLDER` because the
+ * shortcut is configurable (`collapseKey`) and `rpiv-i18n`'s `tr` has no
+ * interpolation — locale entries carry the same `{key}` placeholder and call
+ * sites `.replace()` it with `formatKeySpecForDisplay(collapseKey)` after
+ * lookup, so per-locale word order is preserved.
+ */
+export const KEY_PLACEHOLDER = "{key}";
+export const HINT_PART_COLLAPSE_TEMPLATE = `${KEY_PLACEHOLDER} to collapse`;
+export const HINT_PART_EXPAND_TEMPLATE = `${KEY_PLACEHOLDER} to expand`;
+/** Default-key (`Ctrl+]`) rendering of the collapse template, for tests and default-config assertions. */
+export const HINT_PART_COLLAPSE = HINT_PART_COLLAPSE_TEMPLATE.replace(
+	KEY_PLACEHOLDER,
+	formatKeySpecForDisplay(DEFAULT_COLLAPSE_KEY),
+);
 /**
  * `HINT_SINGLE` / `HINT_MULTI` are the resting core hint for NON-multiSelect
  * question tabs only: `buildHintText` drops `NOTES` while the notes editor is
@@ -33,8 +47,12 @@ export const HINT_SINGLE = [HINT_PART_ENTER, HINT_PART_NAV, HINT_PART_NOTES, HIN
 export const HINT_MULTI = [HINT_PART_ENTER, HINT_PART_NAV, HINT_PART_NOTES, HINT_PART_TAB, HINT_PART_CANCEL].join(
 	" · ",
 );
-/** Single-line footer shown by `QuestionnaireSession` when `state.collapsed === true`. Bypasses `buildHintText`. */
-export const COLLAPSED_HINT = [HINT_PART_EXPAND, HINT_PART_CANCEL].join(" · ");
+/**
+ * Template for the single-line footer shown by `QuestionnaireSession` when
+ * `state.collapsed === true`. Bypasses `buildHintText`; the session replaces
+ * `KEY_PLACEHOLDER` with the configured key's display form.
+ */
+export const COLLAPSED_HINT_TEMPLATE = [HINT_PART_EXPAND_TEMPLATE, HINT_PART_CANCEL].join(" · ");
 export const REVIEW_HEADING = "Review your answers";
 export const READY_PROMPT = "Ready to submit your answers?";
 export const INCOMPLETE_WARNING_PREFIX = "⚠ Answer remaining questions before submitting:";
@@ -43,6 +61,47 @@ const OVERFLOW_UP = "↑";
 const OVERFLOW_DOWN = "↓";
 const OVERFLOW_BOTH = "↕";
 
+/** No-overflow path: append the residual spacer rows after the footer. */
+function renderFitsTerminal(natural: string[], spacerRows: number): string[] {
+	return spacerRows > 0 ? [...natural, ...Array<string>(spacerRows).fill("")] : natural;
+}
+
+/** Terminal too small for any middle content — show just chrome, hard-clamped to termRows. */
+function renderChromeOnly(natural: string[], topFixed: number, bottomFixed: number, termRows: number): string[] {
+	const chromeOnly = [...natural.slice(0, topFixed), ...natural.slice(natural.length - bottomFixed)];
+	return chromeOnly.length > termRows ? chromeOnly.slice(0, termRows) : chromeOnly;
+}
+
+/** Scroll window start, centered on the focused option; top-anchored when there is no interactive focus. */
+function computeScrollStart(
+	bodyRange: [number, number] | undefined,
+	headingCount: number,
+	availableMiddle: number,
+	middleRows: number,
+): number {
+	if (!bodyRange) return 0;
+	const focusedRowInMiddle = headingCount + bodyRange[0];
+	const focusedHeight = bodyRange[1] - bodyRange[0];
+	// Center the focused item vertically in the available middle space.
+	const idealStart = focusedRowInMiddle - Math.floor(Math.max(0, availableMiddle - focusedHeight) / 2);
+	return Math.max(0, Math.min(idealStart, middleRows - availableMiddle));
+}
+
+/** Mark the scroll window edges with overflow arrows; combined ↕ on a single-row middle. */
+function decorateOverflow(scrollableMiddle: string[], hasUp: boolean, hasDown: boolean, theme: Theme): void {
+	if (hasUp && hasDown && scrollableMiddle.length === 1) {
+		// Single-row middle: combined ↕ avoids the prior collision where ↓ overwrote ↑.
+		scrollableMiddle[0] = theme.fg("dim", OVERFLOW_BOTH);
+		return;
+	}
+	if (hasUp && scrollableMiddle.length > 0) {
+		scrollableMiddle[0] = theme.fg("dim", OVERFLOW_UP);
+	}
+	if (hasDown && scrollableMiddle.length > 0) {
+		scrollableMiddle[scrollableMiddle.length - 1] = theme.fg("dim", OVERFLOW_DOWN);
+	}
+}
+
 export type DialogState = QuestionnaireState;
 
 /** Per-tick projection of dialog state. Written by the adapter; read by the strategy thunk. */
@@ -67,6 +126,13 @@ export interface DialogConfig {
 	getCurrentBodyHeight: (width: number) => number;
 	/** Terminal height getter. Mirrors `getTerminalWidth` — reads `tui.terminal.rows` at render time. */
 	getTerminalRows: () => number;
+	/**
+	 * Resolved collapse/expand key spec (`resolveCollapseKey` output: `"ctrl+]"`,
+	 * `"alt+o"`, or `"off"`). Construction-time config, NOT canonical state —
+	 * `QuestionnaireRuntime.collapseKey` must never reach view setProps consumers.
+	 * The footer hint interpolates it, and drops the collapse part when `"off"`.
+	 */
+	collapseKey: string;
 }
 
 /**
@@ -95,12 +161,14 @@ export class DialogView implements StatefulView<DialogProps> {
 			notesInput: config.notesInput,
 			isMulti: config.isMulti,
 			getCurrentBodyHeight: config.getCurrentBodyHeight,
+			collapseKey: config.collapseKey,
 		});
 		this.submitStrategy = config.isMulti
 			? new SubmitTabStrategy({
 					theme: config.theme,
 					questions: config.questions,
 					submitPicker: config.submitPicker,
+					notesInput: config.notesInput,
 				})
 			: undefined;
 		this.maxFooterRowCount = Math.max(this.questionStrategy.footerRowCount, this.submitStrategy?.footerRowCount ?? 0);
@@ -147,48 +215,28 @@ export class DialogView implements StatefulView<DialogProps> {
 		const termRows = this.config.getTerminalRows();
 
 		if (natural.length + spacerRows <= termRows) {
-			// No overflow — add residual spacer rows after footer.
-			return spacerRows > 0 ? [...natural, ...Array<string>(spacerRows).fill("")] : natural;
+			return renderFitsTerminal(natural, spacerRows);
 		}
 
 		// OVERFLOW — apply 3-region partition with scroll-to-focus.
 		const availableMiddle = Math.max(0, termRows - topFixed - bottomFixed);
 		if (availableMiddle === 0) {
-			// Terminal too small for any middle content — show just chrome.
-			const chromeOnly = [...natural.slice(0, topFixed), ...natural.slice(natural.length - bottomFixed)];
-			return chromeOnly.length > termRows ? chromeOnly.slice(0, termRows) : chromeOnly;
-		}
-
-		const bodyRange = strategy.focusedItemRowRange(width, state);
-
-		// Compute scroll window centered on the focused option.
-		let scrollStart: number;
-		if (bodyRange) {
-			const focusedRowInMiddle = headingCount + bodyRange[0];
-			const focusedHeight = bodyRange[1] - bodyRange[0];
-			// Center the focused item vertically in the available middle space.
-			const idealStart = focusedRowInMiddle - Math.floor(Math.max(0, availableMiddle - focusedHeight) / 2);
-			scrollStart = Math.max(0, Math.min(idealStart, middleRows - availableMiddle));
-		} else {
-			// No interactive focus (submit tab) — top-anchor the middle.
-			scrollStart = 0;
+			return renderChromeOnly(natural, topFixed, bottomFixed, termRows);
 		}
 
+		const scrollStart = computeScrollStart(
+			strategy.focusedItemRowRange(width, state),
+			headingCount,
+			availableMiddle,
+			middleRows,
+		);
 		const scrollableMiddle = natural.slice(topFixed + scrollStart, topFixed + scrollStart + availableMiddle);
-
-		const hasUp = scrollStart > 0;
-		const hasDown = scrollStart + availableMiddle < middleRows;
-		if (hasUp && hasDown && scrollableMiddle.length === 1) {
-			// Single-row middle: combined ↕ avoids the prior collision where ↓ overwrote ↑.
-			scrollableMiddle[0] = this.config.theme.fg("dim", OVERFLOW_BOTH);
-		} else {
-			if (hasUp && scrollableMiddle.length > 0) {
-				scrollableMiddle[0] = this.config.theme.fg("dim", OVERFLOW_UP);
-			}
-			if (hasDown && scrollableMiddle.length > 0) {
-				scrollableMiddle[scrollableMiddle.length - 1] = this.config.theme.fg("dim", OVERFLOW_DOWN);
-			}
-		}
+		decorateOverflow(
+			scrollableMiddle,
+			scrollStart > 0,
+			scrollStart + availableMiddle < middleRows,
+			this.config.theme,
+		);
 
 		const result = [
 			...natural.slice(0, topFixed),