@garygentry/feature-forge 0.2.13 → 0.3.0

package/adapters/pi/extensions/ask-user-question/view/components/preview/preview-pane.ts

@@ -0,0 +1,228 @@
+// GENERATED — DO NOT EDIT. Source: adapter-src/pi/extensions/ask-user-question/view/components/preview/preview-pane.ts
+// Regenerate with: python3 scripts/build-adapters.py
+import { type Component, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { QuestionData } from "../../../tool/types.js";
+import type { StatefulView } from "../../stateful-view.js";
+import type { OptionListView } from "../option-list-view.js";
+import type { PreviewBlockRenderer } from "./preview-block-renderer.js";
+import {
+	bodyWidths,
+	columnWidths,
+	decideLayout,
+	PREVIEW_PADDING_LEFT,
+	type PreviewLayoutMode,
+	STACKED_GAP_ROWS,
+} from "./preview-layout-decider.js";
+
+// ----- Re-exports for test imports — keep `./preview-pane.js` as the public surface -----
+export {
+	MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE,
+	MAX_PREVIEW_HEIGHT_STACKED,
+	NO_PREVIEW_TEXT,
+	NOTES_AFFORDANCE_OVERHEAD,
+} from "./markdown-content-cache.js";
+export { NOTES_AFFORDANCE_TEXT, PreviewBlockRenderer } from "./preview-block-renderer.js";
+export {
+	BORDER_HORIZONTAL_OVERHEAD,
+	BORDER_INNER_PADDING_HORIZONTAL,
+	BORDER_VERTICAL_OVERHEAD,
+	BOX_MIN_CONTENT_WIDTH,
+	renderBorderedBox,
+	stripFenceMarkers,
+} from "./preview-box-renderer.js";
+export {
+	PREVIEW_COLUMN_GAP,
+	PREVIEW_MIN_WIDTH,
+	PREVIEW_PADDING_LEFT,
+	STACKED_GAP_ROWS,
+} from "./preview-layout-decider.js";
+
+/**
+ * Per-tick projection of PreviewPane state. Replaces the prior
+ * `setNotesVisible(boolean)` sliver-setter and the sibling reads of
+ * `optionListView.getSelectedIndex()` / `isFocused()`. The pane now reads
+ * `selectedIndex` and `focused` from its own props — both derived from
+ * canonical state via `selectPreviewPaneProps`. `OptionListView` and
+ * `PreviewPane` see the same source of truth without the cross-component
+ * live read.
+ */
+export interface PreviewPaneProps {
+	notesVisible: boolean;
+	selectedIndex: number;
+	focused: boolean;
+	/**
+	 * True while the "other" (custom-answer) row is focused and accepting input
+	 * (`state.inputMode`, set by the reducer via `ROW_INTENT_META.other.activatesInputMode`).
+	 * Surfaced by `selectPreviewPaneProps` from canonical state; drives the full-width
+	 * early-returns below so the inline input isn't cramped into the narrow left column.
+	 */
+	inputMode: boolean;
+}
+
+export interface PreviewPaneConfig {
+	question: QuestionData;
+	getTerminalWidth: () => number;
+	optionListView: OptionListView;
+	previewBlock: PreviewBlockRenderer;
+}
+
+/**
+ * Thin layout composer. Receives `selectedIndex` / `focused` / `notesVisible`
+ * via `setProps` per tick (computed by `selectPreviewPaneProps` from canonical
+ * state). Delegates option-side rendering to `OptionListView` (which still
+ * owns its render-time state — input buffer, confirmedIndex) and preview-side
+ * rendering to `PreviewBlockRenderer` (which owns the markdown cache and
+ * bordered-box composition).
+ *
+ * `naturalHeight` and `maxNaturalHeight` query both children's heights; `render`
+ * combines them via `decideLayout` (mode threaded into both calls — never
+ * re-derived).
+ */
+export class PreviewPane implements StatefulView<PreviewPaneProps>, Component {
+	private readonly question: QuestionData;
+	private readonly getTerminalWidth: () => number;
+	private readonly optionListView: OptionListView;
+	private readonly previewBlock: PreviewBlockRenderer;
+	private props: PreviewPaneProps;
+	/**
+	 * Cross-tab max left-width getter. Set exactly once by `buildQuestionnaire.injectGlobalLeftWidth`
+	 * before any render. Initialized to a throwing sentinel so missing injection is a hard fail
+	 * rather than a silent fallback to a magic constant — render is illegal until injected.
+	 */
+	private globalLeftWidth: (paneWidth: number) => number = () => {
+		throw new Error("PreviewPane.setGlobalLeftWidth must be called before render()");
+	};
+
+	constructor(config: PreviewPaneConfig) {
+		this.question = config.question;
+		this.getTerminalWidth = config.getTerminalWidth;
+		this.optionListView = config.optionListView;
+		this.previewBlock = config.previewBlock;
+		this.props = { notesVisible: false, selectedIndex: 0, focused: false, inputMode: false };
+	}
+
+	setGlobalLeftWidth(getter: (paneWidth: number) => number): void {
+		this.globalLeftWidth = getter;
+	}
+
+	private getAdaptiveLeft(paneWidth: number): number {
+		return this.globalLeftWidth(paneWidth);
+	}
+
+	setProps(props: PreviewPaneProps): void {
+		this.props = props;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {
+		this.previewBlock.invalidate();
+		this.optionListView.invalidate();
+	}
+
+	render(width: number): string[] {
+		if (this.question.multiSelect === true) return this.optionListView.render(width);
+		// Spec: hide the preview pane entirely when no option carries a `preview`.
+		if (!this.previewBlock.hasAnyPreview()) return this.optionListView.render(width);
+		// `inputMode` (typing on the "other" custom-answer row): the preview is irrelevant —
+		// the row sits at index `options.length`, out of bounds for any option's preview — so
+		// render the option list at the full pane width instead of the cramped left column.
+		// Side-by-side + preview block resume verbatim on nav-away (inputMode clears).
+		if (this.props.inputMode) return this.optionListView.render(width);
+
+		const mode = decideLayout(this.getTerminalWidth(), width);
+		if (mode === "side-by-side") return this.renderSideBySide(width, mode);
+
+		// Stacked: options + blank gap + preview block.
+		return [
+			...this.optionListView.render(width),
+			...Array(STACKED_GAP_ROWS).fill(""),
+			...this.previewBlock.renderBlock(
+				width,
+				this.props.selectedIndex,
+				mode,
+				this.props.focused,
+				this.props.notesVisible,
+			),
+		];
+	}
+
+	focusedItemRowRange(width: number): [number, number] {
+		if (this.question.multiSelect === true) return this.optionListView.focusedItemRowRange(width);
+		if (!this.previewBlock.hasAnyPreview()) return this.optionListView.focusedItemRowRange(width);
+		// `inputMode`: compute the focused row range against the FULL pane width (not the
+		// side-by-side leftWidth), mirroring `render`'s full-width option list.
+		if (this.props.inputMode) return this.optionListView.focusedItemRowRange(width);
+		const mode = decideLayout(this.getTerminalWidth(), width);
+		if (mode === "stacked") return this.optionListView.focusedItemRowRange(width);
+		const adaptiveLeft = this.getAdaptiveLeft(width);
+		const { leftWidth } = columnWidths(width, adaptiveLeft);
+		return this.optionListView.focusedItemRowRange(leftWidth);
+	}
+
+	naturalHeight(width: number): number {
+		if (this.question.multiSelect === true) return this.optionListView.render(width).length;
+		if (!this.previewBlock.hasAnyPreview()) return this.optionListView.render(width).length;
+		// `inputMode`: height is the full-width option list only (no preview block) — preserves
+		// the `naturalHeight === render.length` parity invariant.
+		if (this.props.inputMode) return this.optionListView.render(width).length;
+		const mode = decideLayout(this.getTerminalWidth(), width);
+		const adaptiveLeft = this.getAdaptiveLeft(width);
+		const { optionsWidth, previewWidth } = bodyWidths(width, mode, adaptiveLeft);
+		const optionsHeight = this.optionListView.render(optionsWidth).length;
+		const previewBlockHeight = this.previewBlock.blockHeight(previewWidth, this.props.selectedIndex, mode);
+		if (mode === "side-by-side") return Math.max(optionsHeight, previewBlockHeight);
+		return optionsHeight + STACKED_GAP_ROWS + previewBlockHeight;
+	}
+
+	maxNaturalHeight(width: number): number {
+		if (this.question.multiSelect === true) return this.optionListView.render(width).length;
+		if (!this.previewBlock.hasAnyPreview()) return this.optionListView.render(width).length;
+		// `inputMode`: like naturalHeight — full-width option list only, so the
+		// `maxNaturalHeight >= naturalHeight` parity invariant holds (both equal the list height).
+		if (this.props.inputMode) return this.optionListView.render(width).length;
+		const mode = decideLayout(this.getTerminalWidth(), width);
+		const adaptiveLeft = this.getAdaptiveLeft(width);
+		const { optionsWidth, previewWidth } = bodyWidths(width, mode, adaptiveLeft);
+		const optionsHeight = this.optionListView.render(optionsWidth).length;
+		let maxPreviewBlock = 0;
+		for (let i = 0; i < this.question.options.length; i++) {
+			const h = this.previewBlock.blockHeight(previewWidth, i, mode);
+			if (h > maxPreviewBlock) maxPreviewBlock = h;
+		}
+		if (mode === "side-by-side") return Math.max(optionsHeight, maxPreviewBlock);
+		return optionsHeight + STACKED_GAP_ROWS + maxPreviewBlock;
+	}
+
+	private renderSideBySide(width: number, mode: PreviewLayoutMode): string[] {
+		const adaptiveLeft = this.getAdaptiveLeft(width);
+		const { leftWidth, rightWidth, gap } = columnWidths(width, adaptiveLeft);
+		const leftLines = this.optionListView.render(leftWidth);
+		const rightLines = this.renderPaddedPreviewLines(rightWidth, mode);
+		const rows = Math.max(leftLines.length, rightLines.length);
+		const gapStr = " ".repeat(gap);
+		const out: string[] = [];
+		for (let i = 0; i < rows; i++) {
+			const leftRaw = leftLines[i] ?? "";
+			const rightRaw = rightLines[i] ?? "";
+			const leftClamped = truncateToWidth(leftRaw, leftWidth, "");
+			const leftPad = " ".repeat(Math.max(0, leftWidth - visibleWidth(leftClamped)));
+			const joined = `${leftClamped}${leftPad}${gapStr}${rightRaw}`;
+			out.push(truncateToWidth(joined, width, ""));
+		}
+		return out;
+	}
+
+	private renderPaddedPreviewLines(colWidth: number, mode: PreviewLayoutMode): string[] {
+		const inner = Math.max(1, colWidth - PREVIEW_PADDING_LEFT);
+		const contentLines = this.previewBlock.renderBlock(
+			inner,
+			this.props.selectedIndex,
+			mode,
+			this.props.focused,
+			this.props.notesVisible,
+		);
+		const pad = " ".repeat(PREVIEW_PADDING_LEFT);
+		return contentLines.map((l) => (l === "" ? "" : `${pad}${l}`));
+	}
+}

package/adapters/pi/extensions/ask-user-question/view/components/submit-picker.ts

@@ -0,0 +1,67 @@
+// GENERATED — DO NOT EDIT. Source: adapter-src/pi/extensions/ask-user-question/view/components/submit-picker.ts
+// Regenerate with: python3 scripts/build-adapters.py
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { t } from "../../state/i18n-bridge.js";
+import type { StatefulView } from "../stateful-view.js";
+
+const ACTIVE_POINTER = "❯ ";
+const INACTIVE_POINTER = "  ";
+const NUMBER_SEPARATOR = ". ";
+
+export const SUBMIT_LABEL = "Submit answers";
+export const CANCEL_LABEL = "Cancel";
+
+/**
+ * Per-tick projection of SubmitPicker state. The picker is a fixed 2-row
+ * structure (Submit / Cancel) — labels are static, only the active marker
+ * varies per tick. `selectSubmitPickerProps` precomputes `active` per row.
+ */
+export interface SubmitPickerProps {
+	/** Per-row active flag. Length always 2: row 0 = Submit, row 1 = Cancel. */
+	rows: ReadonlyArray<{ active: boolean }>;
+}
+
+/**
+ * Static 2-row picker rendered on the Submit Tab. Row 0 = "Submit answers", Row 1 = "Cancel".
+ *
+ * - Active pointer (❯) follows `props.rows[i].active` per tick.
+ * - Both rows render in normal style at all times — D1 (revised) allows partial submission,
+ *   so Submit is never dimmed or visually marked as unselectable. The warning header in
+ *   `buildSubmitContainer` is the sole signal of incompleteness.
+ * - `naturalHeight(width)` is state-INDEPENDENT and returns a constant 2, so the
+ *   chrome-mirror layout in `buildSubmitContainer` can subtract a fixed 2 lines without
+ *   re-rendering.
+ */
+export class SubmitPicker implements StatefulView<SubmitPickerProps> {
+	private props: SubmitPickerProps;
+
+	constructor(private readonly theme: Theme) {
+		this.props = { rows: [{ active: false }, { active: false }] };
+	}
+
+	setProps(props: SubmitPickerProps): void {
+		this.props = props;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	naturalHeight(_width: number): number {
+		return 2;
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+		for (let i = 0; i < 2; i++) {
+			const text = i === 0 ? t("submit.label", SUBMIT_LABEL) : t("submit.cancel", CANCEL_LABEL);
+			const active = this.props.rows[i]?.active ?? false;
+			const pointer = active ? ACTIVE_POINTER : INACTIVE_POINTER;
+			const number = `${i + 1}${NUMBER_SEPARATOR}`;
+			const label = active ? this.theme.fg("accent", this.theme.bold(text)) : this.theme.fg("text", text);
+			lines.push(truncateToWidth(`${pointer}${number}${label}`, width, ""));
+		}
+		return lines;
+	}
+}

package/adapters/pi/extensions/ask-user-question/view/components/tab-bar.ts

@@ -0,0 +1,59 @@
+// GENERATED — DO NOT EDIT. Source: adapter-src/pi/extensions/ask-user-question/view/components/tab-bar.ts
+// Regenerate with: python3 scripts/build-adapters.py
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { StatefulView } from "../stateful-view.js";
+
+/**
+ * Per-tick projection of TabBar state. The selector
+ * (`selectTabBarProps`) hoists every render-time derivation
+ * (`allAnswered`, `answered`, `isActive`, `submitActive`) into props so
+ * `render()` is pure styling. Replaces the prior `setConfig(TabBarConfig)`
+ * snowflake and the inline `+ 1` magic at `props-adapter.ts:127`.
+ */
+export interface TabBarProps {
+	/** One per author-defined question, in order. */
+	tabs: ReadonlyArray<{ label: string; answered: boolean; active: boolean }>;
+	/** Submit-tab state. `allAnswered` drives the success/dim color picker. */
+	submit: { active: boolean; allAnswered: boolean };
+}
+
+export class TabBar implements StatefulView<TabBarProps> {
+	private props: TabBarProps;
+
+	constructor(private readonly theme: Theme) {
+		this.props = { tabs: [], submit: { active: false, allAnswered: false } };
+	}
+
+	setProps(props: TabBarProps): void {
+		this.props = props;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const pieces: string[] = [" ← "];
+
+		for (const tab of this.props.tabs) {
+			const box = tab.answered ? "■" : "□";
+			const rawSeg = ` ${box} ${tab.label} `;
+			const styled = tab.active
+				? this.theme.bg("selectedBg", this.theme.fg("text", rawSeg))
+				: this.theme.fg(tab.answered ? "success" : "muted", rawSeg);
+			pieces.push(styled);
+			pieces.push(" ");
+		}
+
+		const submitText = " ✓ Submit ";
+		const submitStyled = this.props.submit.active
+			? this.theme.bg("selectedBg", this.theme.fg("text", submitText))
+			: this.theme.fg(this.props.submit.allAnswered ? "success" : "dim", submitText);
+		pieces.push(submitStyled);
+		pieces.push(" →");
+
+		const tabLine = truncateToWidth(pieces.join(""), width, "");
+		return [tabLine, ""];
+	}
+}

package/adapters/pi/extensions/ask-user-question/view/components/wrapping-select.ts

@@ -0,0 +1,293 @@
+// GENERATED — DO NOT EDIT. Source: adapter-src/pi/extensions/ask-user-question/view/components/wrapping-select.ts
+// Regenerate with: python3 scripts/build-adapters.py
+import type { Component } from "@earendil-works/pi-tui";
+import { visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { renderInlineInputRow } from "./inline-input.js";
+
+/**
+ * Row-intent discriminated union. `kind` is the single discriminator —
+ * pre-1.0.3 boolean flags have been removed (see `banned-flags.test.ts`).
+ * Modeled after `QuestionnaireAction` (`key-router.ts:13-32`) and `Effect`
+ * (`state-reducer.ts:26-32`) — pure literal-tagged variants, no shared base,
+ * exhaustive-`switch` enforcement via non-`void` returns.
+ *
+ * Variant semantics:
+ * - `option`: a regular author-defined option row.
+ * - `other`: the inline free-text input row appended to every question
+ *   (label is "Type something."). Renders as inline `Input` when active.
+ * - `next`: the explicit commit-and-advance row appended to multi-select questions
+ *   (label is "Next"). Renders without a number / checkbox.
+ */
+export type WrappingSelectItem =
+	| { kind: "option"; label: string; description?: string }
+	| { kind: "other"; label: string; description?: string }
+	| { kind: "next"; label: string; description?: string };
+
+export interface WrappingSelectTheme {
+	selectedText: (text: string) => string;
+	description: (text: string) => string;
+	scrollInfo: (text: string) => string;
+}
+
+/**
+ * Numbering controls.
+ *
+ * Use `numberStartOffset` + `totalItemsForNumbering` when a list is logically a slice of a
+ * larger numbered sequence — e.g. to start numbering at an offset and pad the column as
+ * if the list were part of a longer continuous numbered sequence.
+ */
+export interface WrappingSelectOptions {
+	/** Start numbering at this offset + 1 (default 0 → rows labeled 1, 2, 3 …). */
+	numberStartOffset?: number;
+	/** Override the total used to pad the number column (useful when items span multiple lists). */
+	totalItemsForNumbering?: number;
+}
+
+export class WrappingSelect implements Component {
+	private static readonly ACTIVE_POINTER = "❯ ";
+	private static readonly INACTIVE_POINTER = "  ";
+	private static readonly NUMBER_SEPARATOR = ". ";
+	private static readonly CONFIRMED_MARK = " ✔";
+	private static readonly MIN_CONTENT_WIDTH = 1;
+
+	private readonly items: readonly WrappingSelectItem[];
+	private readonly maxVisible: number;
+	private readonly theme: WrappingSelectTheme;
+	private numberStartOffset: number;
+	private totalItemsForNumbering: number;
+
+	private selectedIndex = 0;
+	private focused = true;
+	private inputBuffer = "";
+	private inputCursorOffset: number | undefined = undefined;
+	/**
+	 * Index of the row that was previously confirmed for this list (e.g. the user's prior
+	 * answer when re-entering a multi-question tab). Renders `<label> ✔` in the active-row
+	 * styling but WITHOUT the `❯` pointer — pointer is reserved for the live cursor. When
+	 * `selectedIndex === confirmedIndex && focused`, the active rendering wins (no double-mark).
+	 */
+	private confirmedIndex: number | undefined = undefined;
+	/**
+	 * When set together with `confirmedIndex`, replaces the row's static label at render time.
+	 * Used for the `kind: "other"` sentinel — its label is "Type something." but if the user's
+	 * prior answer was custom text, we render that text instead (e.g. `4. Hello ✔`).
+	 */
+	private confirmedLabelOverride: string | undefined = undefined;
+
+	constructor(
+		items: readonly WrappingSelectItem[],
+		maxVisible: number,
+		theme: WrappingSelectTheme,
+		options: WrappingSelectOptions = {},
+	) {
+		this.items = items;
+		this.maxVisible = Math.max(1, maxVisible);
+		this.theme = theme;
+		this.numberStartOffset = options.numberStartOffset ?? 0;
+		this.totalItemsForNumbering = options.totalItemsForNumbering ?? items.length;
+	}
+
+	/**
+	 * Update the numbering offset + total padding width without rebuilding the component.
+	 * Lets the host realign the number column when the underlying item set changes.
+	 */
+	setNumbering(numberStartOffset: number, totalItemsForNumbering: number): void {
+		this.numberStartOffset = numberStartOffset;
+		this.totalItemsForNumbering = Math.max(1, totalItemsForNumbering);
+	}
+
+	setSelectedIndex(index: number): void {
+		this.selectedIndex = Math.max(0, Math.min(index, this.items.length - 1));
+	}
+
+	setFocused(focused: boolean): void {
+		this.focused = focused;
+	}
+
+	/**
+	 * Mark a previously-confirmed row. Pass `undefined` to clear. `labelOverride` replaces
+	 * the row's static `item.label` at render time — used for the `kind: "other"` sentinel so
+	 * the row reads `Hello ✔` instead of `Type something. ✔` when the prior answer was custom
+	 * text.
+	 */
+	setConfirmedIndex(index: number | undefined, labelOverride?: string): void {
+		if (index === undefined) {
+			this.confirmedIndex = undefined;
+			this.confirmedLabelOverride = undefined;
+			return;
+		}
+		this.confirmedIndex = Math.max(0, Math.min(index, this.items.length - 1));
+		this.confirmedLabelOverride = labelOverride;
+	}
+
+	setInputBuffer(text: string): void {
+		this.inputBuffer = text;
+	}
+
+	/** Set the cursor offset for the inline input row. `undefined` → end-of-buffer fallback. */
+	setInputCursorOffset(offset: number | undefined): void {
+		this.inputCursorOffset = offset;
+	}
+
+	/** Intentionally empty — input is routed at the container level. */
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		if (this.items.length === 0) return [];
+
+		const { startIndex, endIndex } = this.computeVisibleWindow();
+		const numberWidth = String(Math.max(1, this.totalItemsForNumbering)).length;
+		const lines: string[] = [];
+
+		for (let i = startIndex; i < endIndex; i++) {
+			const item = this.items[i];
+			if (!item) continue;
+			const isActive = i === this.selectedIndex && this.focused;
+			lines.push(...this.renderItem(item, i, isActive, width, numberWidth));
+		}
+
+		if (this.hasItemsOutsideWindow(startIndex, endIndex)) {
+			lines.push(this.theme.scrollInfo(`  (${this.selectedIndex + 1}/${this.items.length})`));
+		}
+		return lines;
+	}
+
+	/**
+	 * Returns the [startRow, endRow) range of the focused (selected) item within
+	 * the output of `render(width)`. Computed by iterating the visible window and
+	 * summing per-item row counts — O(maxVisible) per call.
+	 */
+	focusedItemRowRange(width: number): [number, number] {
+		if (this.items.length === 0) return [0, 0];
+		const { startIndex, endIndex } = this.computeVisibleWindow();
+		const numberWidth = String(Math.max(1, this.totalItemsForNumbering)).length;
+		let row = 0;
+		for (let i = startIndex; i < endIndex; i++) {
+			const item = this.items[i];
+			if (!item) continue;
+			const isActive = i === this.selectedIndex && this.focused;
+			const itemRowCount = this.computeItemRowCount(item, i, isActive, width, numberWidth);
+			if (i === this.selectedIndex) {
+				return [row, row + itemRowCount];
+			}
+			row += itemRowCount;
+		}
+		return [0, 1];
+	}
+
+	/**
+	 * Per-item row count. Delegates to `renderItem().length` so `renderItem` remains
+	 * the single source of truth for per-item row math — eliminates the prior shadow-copy
+	 * that risked silent miscounts when new `kind` values branch in `renderItem` but not here.
+	 */
+	private computeItemRowCount(
+		item: WrappingSelectItem,
+		index: number,
+		isActive: boolean,
+		width: number,
+		numberWidth: number,
+	): number {
+		return this.renderItem(item, index, isActive, width, numberWidth).length;
+	}
+
+	private computeVisibleWindow(): { startIndex: number; endIndex: number } {
+		const half = Math.floor(this.maxVisible / 2);
+		const startIndex = Math.max(0, Math.min(this.selectedIndex - half, this.items.length - this.maxVisible));
+		const endIndex = Math.min(startIndex + this.maxVisible, this.items.length);
+		return { startIndex, endIndex };
+	}
+
+	private hasItemsOutsideWindow(startIndex: number, endIndex: number): boolean {
+		return startIndex > 0 || endIndex < this.items.length;
+	}
+
+	private renderItem(
+		item: WrappingSelectItem,
+		index: number,
+		isActive: boolean,
+		width: number,
+		numberWidth: number,
+	): string[] {
+		const rowPrefix = this.buildRowPrefix(index, isActive, numberWidth);
+		const continuationPrefix = " ".repeat(visibleWidth(rowPrefix));
+		const contentWidth = Math.max(WrappingSelect.MIN_CONTENT_WIDTH, width - visibleWidth(rowPrefix));
+
+		if (this.shouldRenderAsInlineInput(item, isActive)) {
+			return this.renderInlineInputRow(rowPrefix, continuationPrefix, contentWidth);
+		}
+
+		// Confirmed row gets a trailing ` ✔` and accent+bold styling; pointer is independent
+		// (still ❯ when active). When `index === confirmedIndex` AND `isActive`, both `❯` and
+		// `✔` appear on the same row — load-bearing for the case where the prior answer was
+		// row 0 (cursor resets to 0 on tab-back, so the confirmed row IS the active row).
+		// Optional `confirmedLabelOverride` replaces the static label (used for `kind: "other"`
+		// + `kind: "custom"` answer); the inline-input branch above still wins for `kind: "other" + isActive`.
+		const isConfirmed = index === this.confirmedIndex;
+		const label = isConfirmed
+			? `${this.confirmedLabelOverride ?? item.label}${WrappingSelect.CONFIRMED_MARK}`
+			: item.label;
+		const applySelectedStyle = isActive || isConfirmed;
+
+		return [
+			...this.renderLabelBlock(label, rowPrefix, continuationPrefix, contentWidth, applySelectedStyle),
+			...this.renderDescriptionBlock(item.description, continuationPrefix, contentWidth),
+		];
+	}
+
+	private buildRowPrefix(index: number, isActive: boolean, numberWidth: number): string {
+		const pointer = isActive ? WrappingSelect.ACTIVE_POINTER : WrappingSelect.INACTIVE_POINTER;
+		const displayNumber = this.numberStartOffset + index + 1;
+		const paddedNumber = String(displayNumber).padStart(numberWidth, " ");
+		return `${pointer}${paddedNumber}${WrappingSelect.NUMBER_SEPARATOR}`;
+	}
+
+	private shouldRenderAsInlineInput(item: WrappingSelectItem, isActive: boolean): boolean {
+		return item.kind === "other" && isActive;
+	}
+
+	/**
+	 * Render the inline input row across one or more lines, wrapping at `contentWidth`.
+	 * Delegates to the shared `renderInlineInputRow` helper (`./inline-input.ts`) so the
+	 * single-select wrap path and the multi-select single-line path share one cursor-
+	 * building core. The `multiline: true` path is byte-identical to the pre-extraction
+	 * output (cursor rationale lives in `inline-input.ts`).
+	 */
+	private renderInlineInputRow(rowPrefix: string, continuationPrefix: string, contentWidth: number): string[] {
+		return renderInlineInputRow({
+			buffer: this.inputBuffer,
+			cursorOffset: this.inputCursorOffset,
+			rowPrefix,
+			continuationPrefix,
+			contentWidth,
+			selectedText: this.theme.selectedText,
+			multiline: true,
+		});
+	}
+
+	private renderLabelBlock(
+		label: string,
+		rowPrefix: string,
+		continuationPrefix: string,
+		contentWidth: number,
+		applySelectedStyle: boolean,
+	): string[] {
+		const wrapped = wrapTextWithAnsi(label, contentWidth);
+		return wrapped.map((segment, index) => {
+			const prefix = index === 0 ? rowPrefix : continuationPrefix;
+			const line = `${prefix}${segment}`;
+			return applySelectedStyle ? this.theme.selectedText(line) : line;
+		});
+	}
+
+	private renderDescriptionBlock(
+		description: string | undefined,
+		continuationPrefix: string,
+		contentWidth: number,
+	): string[] {
+		if (!description) return [];
+		const wrapped = wrapTextWithAnsi(description, contentWidth);
+		return wrapped.map((segment) => `${continuationPrefix}${this.theme.description(segment)}`);
+	}
+}