pi-cc-extensions 0.8.8 → 0.8.9

package/extensions/ask-user-question/view/components/preview/preview-box-renderer.ts

@@ -0,0 +1,86 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+const ANSI_SGR_RE = /\x1b\[[0-9;]*m/g;
+const ANSI_OSC8_RE = /\x1b\]8;[^\x07\x1b]*(?:\x07|\x1b\\)/g;
+const FENCE_MARKER_RE = /^`{3}/;
+
+/** Top + bottom border rows consumed by `renderBorderedBox`. */
+export const BORDER_VERTICAL_OVERHEAD = 2;
+/** Left + right vertical bar columns (`│ ... │`) consumed by `renderBorderedBox`. */
+export const BORDER_HORIZONTAL_OVERHEAD = 2;
+/** Inner horizontal padding (1 col) between each border bar and content area. */
+export const BORDER_INNER_PADDING_HORIZONTAL = 1;
+/** Floor for the preview box's inner content width — CC parity (`PreviewBox.minWidth`). */
+export const BOX_MIN_CONTENT_WIDTH = 40;
+
+/**
+ * Drops fenced-code-block marker lines (` ``` ` opener/closer) from rendered markdown.
+ * pi-tui's Markdown emits literal opening ` ```lang ` and closing ` ``` ` lines around
+ * code blocks; this strip leaves only the highlighted code body. Inline code
+ * (`codespan`) is unaffected — pi-tui already renders it without backticks.
+ */
+export function stripFenceMarkers(lines: readonly string[]): string[] {
+	return lines.filter((line) => {
+		const clean = line.replace(ANSI_SGR_RE, "").replace(ANSI_OSC8_RE, "");
+		return !FENCE_MARKER_RE.test(clean);
+	});
+}
+
+/**
+ * Wraps `lines` in a 4-sided ASCII border with 1 col of inner horizontal padding.
+ * Layout per content row: `│` + ` ` + content padded to `contentInner` + ` ` + `│`,
+ * where `contentInner = width - BORDER_HORIZONTAL_OVERHEAD - 2 * BORDER_INNER_PADDING_HORIZONTAL`.
+ * Top/bottom dash runs span corner-to-corner (`width - BORDER_HORIZONTAL_OVERHEAD`). When
+ * `hidden > 0`, the bottom-row dash run is replaced with ` ✂ ── N lines hidden ── ` (corners stay).
+ */
+export function renderBorderedBox(
+	lines: readonly string[],
+	width: number,
+	colorFn: (s: string) => string,
+	hidden = 0,
+): string[] {
+	const dashSpan = Math.max(1, width - BORDER_HORIZONTAL_OVERHEAD);
+	const contentInner = Math.max(1, dashSpan - 2 * BORDER_INNER_PADDING_HORIZONTAL);
+	const pad = " ".repeat(BORDER_INNER_PADDING_HORIZONTAL);
+	const top = colorFn(`┌${"─".repeat(dashSpan)}┐`);
+	const out: string[] = [top];
+	for (const line of lines) {
+		const padded = truncateToWidth(line, contentInner, "", true);
+		out.push(`${colorFn("│")}${pad}${padded}${pad}${colorFn("│")}`);
+	}
+	if (hidden > 0) {
+		const indicator = ` ✂ ── ${hidden} lines hidden ── `;
+		const space = dashSpan - indicator.length;
+		const leftFill = "─".repeat(Math.max(0, Math.floor(space / 2)));
+		const rightFill = "─".repeat(Math.max(0, dashSpan - leftFill.length - indicator.length));
+		out.push(colorFn(`└${leftFill}${indicator}${rightFill}┘`));
+	} else {
+		out.push(colorFn(`└${"─".repeat(dashSpan)}┘`));
+	}
+	return out;
+}
+
+/**
+ * Compute box dimensions from content lines. Pure of args.
+ *
+ * CC parity:
+ *   contentWidth = max(minWidth, widestRenderedLine)
+ *   boxWidth     = min(contentWidth + 4, effectiveMaxWidth)
+ *
+ * Trailing whitespace is stripped before measuring because pi-tui's
+ * `Markdown.render(width)` pads every line to `width`, which would otherwise force
+ * the box to fill the whole column allocation.
+ */
+export function computeBoxDimensions(
+	contentLines: readonly string[],
+	maxInnerWidth: number,
+): { innerWidth: number; boxWidth: number } {
+	let widest = Math.min(BOX_MIN_CONTENT_WIDTH, maxInnerWidth);
+	for (const line of contentLines) {
+		const w = visibleWidth(line.replace(/\s+$/, ""));
+		if (w > widest) widest = w;
+	}
+	const innerWidth = Math.min(widest, maxInnerWidth);
+	const boxWidth = innerWidth + BORDER_HORIZONTAL_OVERHEAD + 2 * BORDER_INNER_PADDING_HORIZONTAL;
+	return { innerWidth, boxWidth };
+}

package/extensions/ask-user-question/view/components/preview/preview-layout-decider.ts

@@ -0,0 +1,200 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+import type { QuestionData } from "../../../tool/types.js";
+import type { WrappingSelectItem } from "../wrapping-select.js";
+import { BORDER_HORIZONTAL_OVERHEAD, BORDER_INNER_PADDING_HORIZONTAL } from "./preview-box-renderer.js";
+
+/** Min terminal/pane width for the side-by-side layout to engage. */
+export const PREVIEW_MIN_WIDTH = 100;
+/** Visual gap between options column and preview column in side-by-side. */
+export const PREVIEW_COLUMN_GAP = 2;
+/** 1 col padding inside the preview column (between gap and `│`). */
+export const PREVIEW_PADDING_LEFT = 1;
+/** Empty rows between options and preview blocks in stacked (narrow) layout. */
+export const STACKED_GAP_ROWS = 1;
+
+/** Floor for the adaptive left column width — prevents collapse on short labels. */
+export const MIN_LEFT = 30;
+/** Ceiling ratio: left column never exceeds this fraction of pane width. */
+export const MAX_LEFT_RATIO = 0.5;
+/** Floor for the preview column width — prevents right-side collapse on narrow terminals. */
+export const MIN_PREVIEW_WIDTH = 45;
+/** visibleWidth(" ✔") = 2 (space + ✔ codepoint). Reserved on the longest-label measurement
+ *  so a confirmed row never gets truncated when MIN_LEFT clamps the column. */
+export const CONFIRMED_OVERHEAD = 2;
+
+export type PreviewLayoutMode = "side-by-side" | "stacked";
+
+/**
+ * Decide layout mode from terminal + pane widths. Pure of inputs.
+ *
+ * The terminal-width gate is the AND check from the previous `preview-pane.ts` —
+ * lifted here so the decision is computed ONCE per render and threaded explicitly
+ * through `previewBlockHeight`. Removes the bug class where `previewBlockHeight`
+ * re-derived `sideBySide` from a column width (already < pane width post-split),
+ * capping height too short.
+ */
+export function decideLayout(terminalWidth: number, paneWidth: number): PreviewLayoutMode {
+	return terminalWidth >= PREVIEW_MIN_WIDTH && paneWidth >= PREVIEW_MIN_WIDTH ? "side-by-side" : "stacked";
+}
+
+/**
+ * Compute the adaptive left column width from option labels.
+ * Pure function — deterministic for a given (items, totalForNumbering, paneWidth).
+ *
+ * Pipeline:
+ *   1. Measure: longest visible label width + prefix overhead + confirmed-mark overhead
+ *   2. Clamp: floor MIN_LEFT, ceiling paneWidth * MAX_LEFT_RATIO
+ *   3. Safety net: never exceed available = paneWidth - GAP - MIN_PREVIEW_WIDTH
+ */
+export function adaptiveLeftWidth(
+	items: readonly WrappingSelectItem[],
+	totalForNumbering: number,
+	paneWidth: number,
+): number {
+	const prefixW = String(Math.max(1, totalForNumbering)).length + 4; // digits + "❯ " + ". "
+	const confirmedOverhead = CONFIRMED_OVERHEAD; // visibleWidth(" ✔") = 2 (space + ✔ codepoint)
+	let maxLabel = 0;
+	for (const item of items) {
+		const w = visibleWidth(item.label);
+		if (w > maxLabel) maxLabel = w;
+	}
+	const desired = maxLabel + prefixW + confirmedOverhead;
+	const ratioCapped = Math.min(desired, Math.floor(paneWidth * MAX_LEFT_RATIO));
+	const available = paneWidth - PREVIEW_COLUMN_GAP - MIN_PREVIEW_WIDTH;
+	return Math.max(MIN_LEFT, Math.min(ratioCapped, Math.max(1, available)));
+}
+
+/**
+ * Cross-tab maximum left-column width. Aggregates `adaptiveLeftWidth` over every tab
+ * and returns the widest result, so the options column stays stable on tab switch.
+ *
+ * Pure function — `tabs.length` MUST equal `itemsByTab.length`. Numbering uses
+ * `items.length` for every tab (the chat row slot that once added +1 on single-select
+ * has been removed).
+ * Floor is `MIN_LEFT` so an all-empty input still produces a usable column.
+ */
+export function crossTabMaxLeftWidth(
+	tabs: ReadonlyArray<{ multiSelect?: boolean }>,
+	itemsByTab: ReadonlyArray<readonly WrappingSelectItem[]>,
+	paneWidth: number,
+): number {
+	let max = MIN_LEFT;
+	for (let i = 0; i < tabs.length; i++) {
+		const items = itemsByTab[i] ?? [];
+		const totalForNumbering = items.length;
+		const tabWidth = adaptiveLeftWidth(items, totalForNumbering, paneWidth);
+		if (tabWidth > max) max = tabWidth;
+	}
+	return max;
+}
+
+/**
+ * Source-line probe: measures the widest source line across all options' previews.
+ * Returns 0 when no option carries a preview.
+ *
+ * V1 heuristic — works well for tree/table/heading/list content where source-line
+ * width ≈ rendered width. Paragraphs overstate (source width "wants" the full pane);
+ * the worst case is "donation does nothing useful" — fallback to the label-driven path.
+ * Upgrade path: replace with a render-width probe that invokes Markdown at a probe width.
+ *
+ * Pure function — O(total chars) per question; no Markdown invocation, no cache interaction.
+ */
+export function previewSourceWidth(question: QuestionData): number {
+	let max = 0;
+	for (const option of question.options) {
+		const text = option.preview;
+		if (!text) continue;
+		for (const line of text.split("\n")) {
+			const w = visibleWidth(line);
+			if (w > max) max = w;
+		}
+	}
+	return max;
+}
+
+/**
+ * Cross-tab/cross-option preview budget. Iterates all questions, computes each question's
+ * preview appetite via `previewSourceWidth`, adds box + padding overhead (5 cols), and
+ * returns the widest result. Floor is `MIN_PREVIEW_WIDTH` so a previewless question still
+ * reserves a usable column. Ceiling ensures the left column retains its `MIN_LEFT` floor.
+ *
+ * Pure function — same cross-tab max pattern as `crossTabMaxLeftWidth`.
+ */
+export function crossTabPreviewBudget(questions: readonly QuestionData[], paneWidth: number): number {
+	let max = MIN_PREVIEW_WIDTH;
+	for (const question of questions) {
+		const rawWidth = previewSourceWidth(question);
+		const capped = Math.min(rawWidth, paneWidth - PREVIEW_COLUMN_GAP - MIN_LEFT);
+		const budget = capped + BORDER_HORIZONTAL_OVERHEAD + 2 * BORDER_INNER_PADDING_HORIZONTAL + PREVIEW_PADDING_LEFT;
+		if (budget > max) max = budget;
+	}
+	return max;
+}
+
+/**
+ * Cross-tab left-column width with slack donation. Combines the label-driven width
+ * (from `crossTabMaxLeftWidth`) with the slack donated by narrow previews.
+ *
+ * Pipeline:
+ *   1. `labelDriven` = `crossTabMaxLeftWidth(tabs, itemsByTab, paneWidth)`
+ *   2. `previewBudget` = `crossTabPreviewBudget(questions, paneWidth)`
+ *   3. `slackDonation` = `paneWidth − GAP − previewBudget`
+ *   4. Return `min(max(labelDriven, slackDonation), ceiling)` where `ceiling = paneWidth − GAP − MIN_PREVIEW_WIDTH`
+ *
+ * Invariants:
+ *   - Floor: result ≥ MIN_LEFT (labelDriven ≥ MIN_LEFT)
+ *   - Preview floor: right column ≥ MIN_PREVIEW_WIDTH (ceiling enforces this)
+ *   - Cross-tab stability: both reductions are tab-independent
+ *   - Determinism: pure of (questions, itemsByTab, paneWidth)
+ *
+ * `crossTabMaxLeftWidth` is NOT replaced — it continues to exist as the primitive.
+ * `MAX_LEFT_RATIO` caps the label-driven path inside `adaptiveLeftWidth`; donation
+ * operates above the cap when preview slack is available.
+ */
+export function crossTabLeftWidthWithDonation(
+	tabs: ReadonlyArray<{ multiSelect?: boolean }>,
+	itemsByTab: ReadonlyArray<readonly WrappingSelectItem[]>,
+	questions: readonly QuestionData[],
+	paneWidth: number,
+): number {
+	const labelDriven = crossTabMaxLeftWidth(tabs, itemsByTab, paneWidth);
+	// Compact-content guard: labels at MIN_LEFT fit below the floor, so widening
+	// the column would only inject dead space between the option list and the
+	// preview box. Skip donation and preserve the compact intent.
+	if (labelDriven <= MIN_LEFT) return labelDriven;
+	const previewBudget = crossTabPreviewBudget(questions, paneWidth);
+	const slackDonation = paneWidth - PREVIEW_COLUMN_GAP - previewBudget;
+	const ceiling = paneWidth - PREVIEW_COLUMN_GAP - MIN_PREVIEW_WIDTH;
+	return Math.min(Math.max(labelDriven, slackDonation), Math.max(1, ceiling));
+}
+
+/**
+ * Width allocation for side-by-side mode.
+ * `adaptiveLeft` is the pre-computed left column width (from `adaptiveLeftWidth`,
+ * cross-tab aggregated). The Math.max(1, ...) calls keep both columns >= 1 col on
+ * extreme inputs.
+ */
+export function columnWidths(
+	paneWidth: number,
+	adaptiveLeft: number,
+): { leftWidth: number; rightWidth: number; gap: number } {
+	const gap = PREVIEW_COLUMN_GAP;
+	const leftWidth = Math.min(adaptiveLeft, Math.max(1, paneWidth - gap - 1));
+	const rightWidth = Math.max(1, paneWidth - leftWidth - gap);
+	return { leftWidth, rightWidth, gap };
+}
+
+/**
+ * Returns the widths actually passed to `options.render` and `previewLines` inside
+ * `render()`. Stacked uses the full pane width for both; side-by-side splits via
+ * `columnWidths`, with the preview column offset by `PREVIEW_PADDING_LEFT`.
+ */
+export function bodyWidths(
+	paneWidth: number,
+	mode: PreviewLayoutMode,
+	adaptiveLeft: number,
+): { optionsWidth: number; previewWidth: number } {
+	if (mode === "stacked") return { optionsWidth: paneWidth, previewWidth: paneWidth };
+	const { leftWidth, rightWidth } = columnWidths(paneWidth, adaptiveLeft);
+	return { optionsWidth: leftWidth, previewWidth: Math.max(1, rightWidth - PREVIEW_PADDING_LEFT) };
+}

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

@@ -0,0 +1,226 @@
+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/extensions/ask-user-question/view/components/submit-picker.ts

@@ -0,0 +1,64 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+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 ? SUBMIT_LABEL : 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/extensions/ask-user-question/view/components/tab-bar.ts

@@ -0,0 +1,57 @@
+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, ""];
+	}
+}