pi-ask-popup 0.1.0

package/src/view/components/preview/preview-layout-decider.ts

@@ -0,0 +1,219 @@
+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` is the
+ *      tighter of the preview-width safety limit and `MAX_LEFT_RATIO`
+ *
+ * Invariants (hold at side-by-side widths, paneWidth ≥ PREVIEW_MIN_WIDTH — the only
+ * mode that consumes this value; narrower panes can pull both ceilings under MIN_LEFT):
+ *   - Floor: result ≥ MIN_LEFT (ratioCeiling ≥ 50 once paneWidth ≥ 100)
+ *   - Options cap: left column ≤ paneWidth × MAX_LEFT_RATIO
+ *   - Preview floor: right column ≥ MIN_PREVIEW_WIDTH — enforced transitively by the
+ *     MAX_LEFT_RATIO cap (right column keeps ≥ paneWidth/2 − GAP ≥ 48 cols);
+ *     previewSafetyCeiling is defensive depth that binds only if MAX_LEFT_RATIO
+ *     ever rises above ~0.53
+ *   - 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.
+ * Donation obeys the same `MAX_LEFT_RATIO` cap as the label-driven path; the preview
+ * composer right-aligns narrower boxes inside the remaining column.
+ */
+export function crossTabLeftWidthWithDonation(
+  tabs: ReadonlyArray<{ multiSelect?: boolean }>,
+  itemsByTab: ReadonlyArray<readonly WrappingSelectItem[]>,
+  questions: readonly QuestionData[],
+  paneWidth: number,
+): number {
+  const labelDriven = crossTabMaxLeftWidth(tabs, itemsByTab, paneWidth);
+  const previewBudget = crossTabPreviewBudget(questions, paneWidth);
+  const slackDonation = paneWidth - PREVIEW_COLUMN_GAP - previewBudget;
+  // At side-by-side widths the ratio ceiling is always the tighter bound
+  // (paneWidth/2 ≤ paneWidth − GAP − MIN_PREVIEW_WIDTH once paneWidth ≥ 94);
+  // previewSafetyCeiling stays as defensive depth should MAX_LEFT_RATIO grow.
+  const previewSafetyCeiling = paneWidth - PREVIEW_COLUMN_GAP - MIN_PREVIEW_WIDTH;
+  const ratioCeiling = Math.floor(paneWidth * MAX_LEFT_RATIO);
+  const ceiling = Math.min(previewSafetyCeiling, ratioCeiling);
+  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/src/view/components/preview/preview-pane.ts

@@ -0,0 +1,240 @@
+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 boxWidth = Math.max(1, visibleWidth(contentLines[0] ?? ""));
+    const boxAlignedPad = Math.max(PREVIEW_PADDING_LEFT, colWidth - boxWidth);
+    return contentLines.map((line) => {
+      if (line === "") return "";
+      // A line wider than the box (a long-locale notes affordance) slides left to
+      // stay fully visible; truncation engages only when the column itself runs out.
+      const pad = Math.max(
+        PREVIEW_PADDING_LEFT,
+        Math.min(boxAlignedPad, colWidth - visibleWidth(line)),
+      );
+      return `${" ".repeat(pad)}${truncateToWidth(line, colWidth - pad, "")}`;
+    });
+  }
+}

package/src/view/components/submit-picker.ts

@@ -0,0 +1,66 @@
+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/src/view/components/tab-bar.ts

@@ -0,0 +1,70 @@
+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`.
+ */
+/**
+ * Marks a tab that carries a note.
+ *
+ * It occupies the separator slot between the answered box and the label rather
+ * than being appended, so a segment is the same width noted or not. Appending
+ * it would add one cell per tab, and four tabs at the schema's 16-character
+ * header limit already put this bar at 99 columns: four suffixes would push it
+ * to 103, past the 100 columns previews require. `truncateToWidth` below is
+ * called with an empty ellipsis and drops the tail, so what would go missing is
+ * the Submit tab, silently.
+ */
+export const NOTED_MARKER = "*";
+
+export interface TabBarProps {
+  /** One per author-defined question, in order. */
+  tabs: ReadonlyArray<{ label: string; answered: boolean; active: boolean; noted: 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.noted ? NOTED_MARKER : " "}${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, ""];
+  }
+}