pi-ask-popup 0.1.0 → 0.2.0

package/src/view/components/preview/preview-pane.ts

@@ -59,7 +59,13 @@ export interface PreviewPaneProps {
 
 export interface PreviewPaneConfig {
   question: QuestionData;
-  getTerminalWidth: () => number;
+  /**
+   * The frame's terminal width, snapshotted by `DialogView.render` before
+   * anything paints. Not a live read of `tui.terminal.columns`: two components
+   * deciding layout from two different readings of one frame is the bug this
+   * closes.
+   */
+  getFrameTerminalWidth: () => number;
   optionListView: OptionListView;
   previewBlock: PreviewBlockRenderer;
 }
@@ -74,11 +80,13 @@ export interface PreviewPaneConfig {
  *
  * `naturalHeight` and `maxNaturalHeight` query both children's heights; `render`
  * combines them via `decideLayout` (mode threaded into both calls — never
- * re-derived).
+ * re-derived). The probes ask `OptionListView.measureHeight`, not `render`, so
+ * one frame's three passes over the option list cost one wrap at each distinct
+ * width and no discarded rows.
  */
 export class PreviewPane implements StatefulView<PreviewPaneProps>, Component {
   private readonly question: QuestionData;
-  private readonly getTerminalWidth: () => number;
+  private readonly getFrameTerminalWidth: () => number;
   private readonly optionListView: OptionListView;
   private readonly previewBlock: PreviewBlockRenderer;
   private props: PreviewPaneProps;
@@ -93,7 +101,7 @@ export class PreviewPane implements StatefulView<PreviewPaneProps>, Component {
 
   constructor(config: PreviewPaneConfig) {
     this.question = config.question;
-    this.getTerminalWidth = config.getTerminalWidth;
+    this.getFrameTerminalWidth = config.getFrameTerminalWidth;
     this.optionListView = config.optionListView;
     this.previewBlock = config.previewBlock;
     this.props = { notesVisible: false, selectedIndex: 0, focused: false, inputMode: false };
@@ -119,17 +127,25 @@ export class PreviewPane implements StatefulView<PreviewPaneProps>, Component {
   }
 
   render(width: number): string[] {
-    if (this.question.multiSelect === true) return this.optionListView.render(width);
+    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);
+    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);
+    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);
+    const mode = decideLayout(this.getFrameTerminalWidth(), width);
+    if (mode === "side-by-side") {
+      return this.renderSideBySide(width, mode);
+    }
 
     // Stacked: options + blank gap + preview block.
     return [
@@ -146,53 +162,79 @@ export class PreviewPane implements StatefulView<PreviewPaneProps>, Component {
   }
 
   focusedItemRowRange(width: number): [number, number] {
-    if (this.question.multiSelect === true) return this.optionListView.focusedItemRowRange(width);
-    if (!this.previewBlock.hasAnyPreview()) return this.optionListView.focusedItemRowRange(width);
+    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);
+    if (this.props.inputMode) {
+      return this.optionListView.focusedItemRowRange(width);
+    }
+    const mode = decideLayout(this.getFrameTerminalWidth(), 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;
+    if (this.question.multiSelect === true) {
+      return this.optionListView.measureHeight(width);
+    }
+    if (!this.previewBlock.hasAnyPreview()) {
+      return this.optionListView.measureHeight(width);
+    }
     // `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);
+    if (this.props.inputMode) {
+      return this.optionListView.measureHeight(width);
+    }
+    const mode = decideLayout(this.getFrameTerminalWidth(), width);
     const adaptiveLeft = this.getAdaptiveLeft(width);
     const { optionsWidth, previewWidth } = bodyWidths(width, mode, adaptiveLeft);
-    const optionsHeight = this.optionListView.render(optionsWidth).length;
+    const optionsHeight = this.optionListView.measureHeight(optionsWidth);
     const previewBlockHeight = this.previewBlock.blockHeight(
       previewWidth,
       this.props.selectedIndex,
       mode,
     );
-    if (mode === "side-by-side") return Math.max(optionsHeight, previewBlockHeight);
+    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;
+    if (this.question.multiSelect === true) {
+      return this.optionListView.measureHeight(width);
+    }
+    if (!this.previewBlock.hasAnyPreview()) {
+      return this.optionListView.measureHeight(width);
+    }
     // `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);
+    if (this.props.inputMode) {
+      return this.optionListView.measureHeight(width);
+    }
+    const mode = decideLayout(this.getFrameTerminalWidth(), width);
     const adaptiveLeft = this.getAdaptiveLeft(width);
     const { optionsWidth, previewWidth } = bodyWidths(width, mode, adaptiveLeft);
-    const optionsHeight = this.optionListView.render(optionsWidth).length;
+    const optionsHeight = this.optionListView.measureHeight(optionsWidth);
     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 (h > maxPreviewBlock) {
+        maxPreviewBlock = h;
+      }
+    }
+    if (mode === "side-by-side") {
+      return Math.max(optionsHeight, maxPreviewBlock);
     }
-    if (mode === "side-by-side") return Math.max(optionsHeight, maxPreviewBlock);
     return optionsHeight + STACKED_GAP_ROWS + maxPreviewBlock;
   }
 
@@ -227,7 +269,9 @@ export class PreviewPane implements StatefulView<PreviewPaneProps>, Component {
     const boxWidth = Math.max(1, visibleWidth(contentLines[0] ?? ""));
     const boxAlignedPad = Math.max(PREVIEW_PADDING_LEFT, colWidth - boxWidth);
     return contentLines.map((line) => {
-      if (line === "") return "";
+      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(

package/src/view/components/tab-bar.ts

@@ -1,5 +1,5 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import type { StatefulView } from "../stateful-view.js";
 
 /**
@@ -16,12 +16,13 @@ import type { StatefulView } from "../stateful-view.js";
  * 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.
+ * to 103, past the 100 columns previews require.
  */
 export const NOTED_MARKER = "*";
 
+/** Shown in place of the question tabs that did not fit. */
+export const TAB_OVERFLOW_ELLIPSIS = "…";
+
 export interface TabBarProps {
   /** One per author-defined question, in order. */
   tabs: ReadonlyArray<{ label: string; answered: boolean; active: boolean; noted: boolean }>;
@@ -44,6 +45,19 @@ export class TabBar implements StatefulView<TabBarProps> {
 
   invalidate(): void {}
 
+  /**
+   * Question tabs absorb the truncation; the Submit pill does not.
+   *
+   * Four 16-character headers put this bar past 99 columns, so a narrower
+   * terminal always drops something. Trimming the joined line from the right
+   * dropped Submit first, and a user who cannot see Submit cannot finish the
+   * questionnaire. The tail is reserved, the question tabs are trimmed to what
+   * is left, and `TAB_OVERFLOW_ELLIPSIS` marks the tabs that went missing.
+   *
+   * Below the tail's own width there is nothing left to reserve — the whole
+   * line is clipped, as before, so the caller's `visibleWidth <= width`
+   * invariant survives every terminal size.
+   */
   render(width: number): string[] {
     const pieces: string[] = [" ← "];
 
@@ -61,10 +75,14 @@ export class TabBar implements StatefulView<TabBarProps> {
     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 tail = `${submitStyled} →`;
+    const tailWidth = visibleWidth(tail);
+    const head = pieces.join("");
 
-    const tabLine = truncateToWidth(pieces.join(""), width, "");
-    return [tabLine, ""];
+    if (width <= tailWidth) {
+      return [truncateToWidth(`${head}${tail}`, width, ""), ""];
+    }
+    const headLine = truncateToWidth(head, width - tailWidth, TAB_OVERFLOW_ELLIPSIS);
+    return [`${headLine}${tail}`, ""];
   }
 }

package/src/view/components/wrapping-select.ts

@@ -38,12 +38,24 @@ export interface WrappingSelectOptions {
   totalItemsForNumbering?: number;
 }
 
+/** One width's worth of rendered rows, plus where each item sits in them. */
+interface RenderedRows {
+  lines: string[];
+  rangeByIndex: Map<number, [number, 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;
+  /**
+   * Widths kept in the render memo before it is dropped wholesale. A frame asks
+   * for two or three (full pane, side-by-side left column, height probes); the
+   * rest of the entries are old terminal sizes from a resize drag.
+   */
+  private static readonly RENDER_CACHE_MAX_WIDTHS = 8;
 
   private readonly items: readonly WrappingSelectItem[];
   private readonly maxVisible: number;
@@ -68,6 +80,18 @@ export class WrappingSelect implements Component {
    * prior answer was custom text, we render that text instead (e.g. `4. Hello ✔`).
    */
   private confirmedLabelOverride: string | undefined = undefined;
+  /**
+   * Rendered rows and row boundaries per width, valid while
+   * `renderStateSignature()` holds.
+   *
+   * One frame calls `render` two or three times at different widths — the
+   * option list, the height probes in `PreviewPane`, the side-by-side left
+   * column — and every call re-wrapped every visible row. The signature covers
+   * all the mutable state a row can read, so the props write that happens each
+   * tick with unchanged values keeps the memo warm instead of dropping it.
+   */
+  private readonly renderCache = new Map<number, RenderedRows>();
+  private renderCacheSignature: string | undefined = undefined;
 
   constructor(
     items: readonly WrappingSelectItem[],
@@ -127,64 +151,111 @@ export class WrappingSelect implements Component {
   /** Intentionally empty — input is routed at the container level. */
   handleInput(_data: string): void {}
 
-  invalidate(): void {}
+  invalidate(): void {
+    this.renderCache.clear();
+  }
 
   render(width: number): string[] {
-    if (this.items.length === 0) return [];
+    // A copy, because callers own what they get back: `PreviewPane` hands this
+    // array straight up to the dialog, which decorates rows in place.
+    return [...this.cachedRows(width).lines];
+  }
+
+  /**
+   * Row count at `width` without handing out the rows.
+   *
+   * Reads the same memo `render` fills, so `measureHeight(w) ===
+   * render(w).length` by construction — the height probes in `PreviewPane`
+   * relied on that parity while paying for an array copy to get it.
+   */
+  measureHeight(width: number): number {
+    return this.cachedRows(width).lines.length;
+  }
+
+  /** The memo. Returns the stored rows themselves — callers must not mutate them. */
+  private cachedRows(width: number): RenderedRows {
+    const signature = this.renderStateSignature();
+    if (signature !== this.renderCacheSignature) {
+      this.renderCache.clear();
+      this.renderCacheSignature = signature;
+    }
+    const cached = this.renderCache.get(width);
+    if (cached !== undefined) {
+      return cached;
+    }
+    const rendered = this.renderRows(width);
+    if (this.renderCache.size >= WrappingSelect.RENDER_CACHE_MAX_WIDTHS) {
+      this.renderCache.clear();
+    }
+    this.renderCache.set(width, rendered);
+    return rendered;
+  }
+
+  /**
+   * Every mutable input a rendered row reads. `items`, `maxVisible` and `theme`
+   * are constructor-fixed, so they stay out. A NUL separator keeps a buffer
+   * containing the separator from colliding with the next field.
+   */
+  private renderStateSignature(): string {
+    return [
+      this.selectedIndex,
+      this.focused,
+      this.confirmedIndex ?? -1,
+      this.confirmedLabelOverride ?? "",
+      this.inputCursorOffset ?? -1,
+      this.numberStartOffset,
+      this.totalItemsForNumbering,
+      this.inputBuffer,
+    ].join("\u0000");
+  }
+
+  /**
+   * The single pass. Rows and the row range each item occupies come out
+   * together, because they are the same walk: counting an item's rows any other
+   * way means rendering it a second time and throwing the strings away.
+   */
+  private renderRows(width: number): RenderedRows {
+    if (this.items.length === 0) {
+      return { lines: [], rangeByIndex: new Map() };
+    }
 
     const { startIndex, endIndex } = this.computeVisibleWindow();
     const numberWidth = String(Math.max(1, this.totalItemsForNumbering)).length;
     const lines: string[] = [];
+    const rangeByIndex = new Map<number, [number, number]>();
 
     for (let i = startIndex; i < endIndex; i++) {
       const item = this.items[i];
-      if (!item) continue;
+      if (!item) {
+        continue;
+      }
       const isActive = i === this.selectedIndex && this.focused;
+      const start = lines.length;
       lines.push(...this.renderItem(item, i, isActive, width, numberWidth));
+      rangeByIndex.set(i, [start, lines.length]);
     }
 
     if (this.hasItemsOutsideWindow(startIndex, endIndex)) {
       lines.push(this.theme.scrollInfo(`  (${this.selectedIndex + 1}/${this.items.length})`));
     }
-    return lines;
+    return { lines, rangeByIndex };
   }
 
   /**
-   * 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.
+   * The [startRow, endRow) range the focused item occupies in `render(width)`.
+   *
+   * Read out of the same memo the rows come from. It used to re-render every
+   * item in the window to count their rows and drop the strings, on every frame
+   * the dialog anchored its scroll window — which was every frame.
+   *
+   * `[0, 1]` when the selection is outside the visible window: there is no
+   * range to report, and the first row is the safe thing to anchor on.
    */
   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;
+    if (this.items.length === 0) {
+      return [0, 0];
     }
-    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;
+    return this.cachedRows(width).rangeByIndex.get(this.selectedIndex) ?? [0, 1];
   }
 
   private computeVisibleWindow(): { startIndex: number; endIndex: number } {
@@ -306,7 +377,9 @@ export class WrappingSelect implements Component {
     continuationPrefix: string,
     contentWidth: number,
   ): string[] {
-    if (!description) return [];
+    if (!description) {
+      return [];
+    }
     const wrapped = wrapTextWithAnsi(description, contentWidth);
     return wrapped.map((segment) => `${continuationPrefix}${this.theme.description(segment)}`);
   }

package/src/view/dialog-builder.ts

@@ -18,6 +18,13 @@ export const HINT_PART_NAV = "↑/↓ to navigate";
 export const HINT_PART_NEW_LINE = "Shift+Enter for newline";
 export const HINT_PART_CLEAR = "Ctrl+U to clear";
 export const HINT_PART_TOGGLE = "Space to toggle";
+/**
+ * Replaces ENTER while the typed row of a multi-select question has the
+ * keyboard. Enter there commits the question, the way the Next row does, rather
+ * than choosing a single answer — and Space belongs to the draft, so the resting
+ * "Space to toggle" is dropped alongside this.
+ */
+export const HINT_PART_ENTER_CONFIRM = "Enter to confirm";
 export const HINT_PART_NOTES = "n to add notes";
 /** Replaces the add form once the tab already has a note. See `buildHintText`. */
 export const HINT_PART_NOTES_EDIT = "n to edit notes";
@@ -103,7 +110,9 @@ function computeScrollStart(
   availableMiddle: number,
   middleRows: number,
 ): number {
-  if (!bodyRange) return 0;
+  if (!bodyRange) {
+    return 0;
+  }
   const focusedRowInMiddle = headingCount + bodyRange[0];
   const focusedHeight = bodyRange[1] - bodyRange[0];
   const idealStart =
@@ -122,13 +131,19 @@ function decorateOverflow(
   hasDown: boolean,
   theme: Theme,
 ): void {
-  if (scrollableMiddle.length === 0) return;
+  if (scrollableMiddle.length === 0) {
+    return;
+  }
   if (hasUp && hasDown && scrollableMiddle.length === 1) {
     scrollableMiddle[0] = theme.fg("dim", OVERFLOW_BOTH);
     return;
   }
-  if (hasUp) scrollableMiddle[0] = theme.fg("dim", OVERFLOW_UP);
-  if (hasDown) scrollableMiddle[scrollableMiddle.length - 1] = theme.fg("dim", OVERFLOW_DOWN);
+  if (hasUp) {
+    scrollableMiddle[0] = theme.fg("dim", OVERFLOW_UP);
+  }
+  if (hasDown) {
+    scrollableMiddle[scrollableMiddle.length - 1] = theme.fg("dim", OVERFLOW_DOWN);
+  }
 }
 
 export type DialogState = QuestionnaireState;
@@ -154,7 +169,14 @@ export interface DialogConfig {
   /** Body height of the tab showing right now. The difference is absorbed outside the border. */
   getCurrentBodyHeight: (width: number) => number;
   /** Terminal height, read at render time — the mirror of the width getter. */
-  getTerminalRows: () => number;
+  /**
+   * Snapshot the terminal size for the frame about to be painted. Called first
+   * thing in `render`, before any child renders or is measured, so every
+   * component in the frame decides against the same terminal.
+   */
+  beginFrame: () => void;
+  /** The size `beginFrame` last snapshotted. */
+  getFrameTerminalRows: () => number;
   /**
    * Resolved collapse key (`"ctrl+]"`, `"alt+o"`, `"off"`). Construction-time
    * config, deliberately not canonical state: the runtime's copy must never
@@ -219,6 +241,10 @@ export class DialogView implements StatefulView<DialogProps> {
   invalidate(): void {}
 
   render(width: number): string[] {
+    // First, before any child renders or is measured: the whole frame decides
+    // against one terminal size.
+    this.config.beginFrame();
+
     const state = this.liveProps.state;
     const onSubmit = this.config.isMulti && state.currentTab === this.config.questions.length;
     const strategy = onSubmit && this.submitStrategy ? this.submitStrategy : this.questionStrategy;
@@ -258,7 +284,7 @@ export class DialogView implements StatefulView<DialogProps> {
         strategy.restingNoteRowCount(state),
     );
 
-    const termRows = this.config.getTerminalRows();
+    const termRows = this.config.getFrameTerminalRows();
 
     if (natural.length + spacerRows <= termRows) {
       return renderFitsTerminal(natural, spacerRows);
@@ -307,16 +333,24 @@ export class DialogView implements StatefulView<DialogProps> {
     const border = () => new DynamicBorder((s) => theme.fg("accent", s));
 
     container.addChild(border());
-    if (isMulti && tabBar) container.addChild(tabBar);
+    if (isMulti && tabBar) {
+      container.addChild(tabBar);
+    }
     container.addChild(new Spacer(1));
 
-    for (const c of headingRowCache) container.addChild(c);
+    for (const c of headingRowCache) {
+      container.addChild(c);
+    }
     container.addChild(strategy.bodyComponent(state));
     container.addChild(new Spacer(1));
-    for (const c of strategy.midRows(state)) container.addChild(c);
+    for (const c of strategy.midRows(state)) {
+      container.addChild(c);
+    }
 
     container.addChild(border());
-    for (const c of strategy.footerRows(state)) container.addChild(c);
+    for (const c of strategy.footerRows(state)) {
+      container.addChild(c);
+    }
 
     // The residual spacer lives in render(), not here: whether it applies
     // depends on overflow, which the container cannot see.

package/src/view/props-adapter.ts

@@ -22,7 +22,9 @@ function getInputCursorOffset(input: Editor): number {
   const lines = input.getLines();
   const cursor = input.getCursor();
   let offset = cursor.col;
-  for (let i = 0; i < cursor.line; i++) offset += (lines[i]?.length ?? 0) + 1;
+  for (let i = 0; i < cursor.line; i++) {
+    offset += (lines[i]?.length ?? 0) + 1;
+  }
   return offset;
 }
 
@@ -82,7 +84,9 @@ export class QuestionnairePropsAdapter {
     // so there is always a tab. Skipping the tick beats asserting non-null and
     // throwing out of a render path if that ever stops being true.
     const activePreviewPane = this.tabsByIndex[paneIndex]?.preview ?? firstTab?.preview;
-    if (!activePreviewPane) return;
+    if (!activePreviewPane) {
+      return;
+    }
 
     const ctx: BindingContext = {
       questions: this.questions,
@@ -94,13 +98,27 @@ export class QuestionnairePropsAdapter {
       activePreviewPane,
     };
 
-    for (const binding of this.globalBindings) binding.apply(state, ctx);
+    for (const binding of this.globalBindings) {
+      binding.apply(state, ctx);
+    }
+
+    // Collapsed, the overlay is one dim row and no tab is on screen. The
+    // per-tab writes would only clear caches for a frame nobody sees; expanding
+    // dispatches, which brings the whole loop back with current state.
+    if (state.collapsed) {
+      this.tui.requestRender();
+      return;
+    }
 
     for (let i = 0; i < this.tabsByIndex.length; i++) {
       const tab = this.tabsByIndex[i];
-      if (!tab) continue;
+      if (!tab) {
+        continue;
+      }
       const tabCtx: PerTabBindingContext = { ...ctx, tab, i };
-      for (const binding of this.perTabBindings) binding.apply(state, tabCtx);
+      for (const binding of this.perTabBindings) {
+        binding.apply(state, tabCtx);
+      }
     }
 
     this.tui.requestRender();
@@ -113,12 +131,16 @@ export class QuestionnairePropsAdapter {
    * refresh them. Walks the same registries `apply()` does, then the extras.
    */
   invalidate(): void {
-    for (const b of this.globalBindings) b.invalidate();
+    for (const b of this.globalBindings) {
+      b.invalidate();
+    }
     for (const tab of this.tabsByIndex) {
       tab.optionList.invalidate();
       tab.preview.invalidate();
       tab.multiSelect?.invalidate();
     }
-    for (const x of this.extraInvalidatables) x.invalidate();
+    for (const x of this.extraInvalidatables) {
+      x.invalidate();
+    }
   }
 }