pi-ask-popup 0.1.0 → 0.2.0

package/src/tool/response-envelope.ts

@@ -9,6 +9,8 @@ import type {
 export const DECLINE_MESSAGE = "User declined to answer questions";
 export const TIMED_OUT_MESSAGE =
   "Questionnaire timed out — the user did not respond within the configured timeout. The user never saw a decline; do NOT treat this as a rejection. Ask the questions as plain chat text instead or retry.";
+export const HOST_ERROR_MESSAGE =
+  "The host replied with a value that was never offered, so the questionnaire could not be completed. Nobody declined and nobody answered — do NOT treat this as a rejection. Ask the questions as plain chat text instead.";
 export const ENVELOPE_PREFIX = "User has answered your questions:";
 export const ENVELOPE_SUFFIX = "You can now continue with the user's answers in mind.";
 /** Opens the segment for a note whose question was never answered. */
@@ -37,39 +39,69 @@ export function buildQuestionnaireResponse(
   params: QuestionParams,
 ): ToolResult {
   if (result?.error === "timed_out") {
-    return buildToolResult(TIMED_OUT_MESSAGE, {
+    const details: QuestionnaireResult = {
       answers: result.answers,
       cancelled: true,
       error: "timed_out",
-      ...(result.globalNote && result.globalNote.length > 0
-        ? { globalNote: result.globalNote }
-        : {}),
-      ...(result.unansweredNotes && result.unansweredNotes.length > 0
-        ? { unansweredNotes: result.unansweredNotes }
-        : {}),
-    });
+    };
+    if (result.globalNote && result.globalNote.length > 0) {
+      (details as { globalNote: string }).globalNote = result.globalNote;
+    }
+    if (result.unansweredNotes && result.unansweredNotes.length > 0) {
+      (details as { unansweredNotes: typeof result.unansweredNotes }).unansweredNotes =
+        result.unansweredNotes;
+    }
+    return buildToolResult(TIMED_OUT_MESSAGE, details);
+  }
+  if (result?.error === "host_error") {
+    // A broken host is not a decision. Sharing the decline text would tell the
+    // model the user said no, when the user was never shown a working dialog.
+    const details: QuestionnaireResult = {
+      answers: result.answers,
+      cancelled: true,
+      error: "host_error",
+    };
+    if (result.hostErrorDetail && result.hostErrorDetail.length > 0) {
+      (details as { hostErrorDetail: string }).hostErrorDetail = result.hostErrorDetail;
+      return buildToolResult(
+        `${HOST_ERROR_MESSAGE} (host sent: ${result.hostErrorDetail})`,
+        details,
+      );
+    }
+    return buildToolResult(HOST_ERROR_MESSAGE, details);
   }
   if (!result || result.cancelled) {
     // The decline text stays canonical even when a global note rides a
     // cancelled result. The note survives in `details`, like partial answers.
-    return buildToolResult(DECLINE_MESSAGE, {
+    const details: QuestionnaireResult = {
       answers: result?.answers ?? [],
       cancelled: true,
-      ...(result?.error ? { error: result.error } : {}),
-      ...(result?.globalNote && result.globalNote.length > 0
-        ? { globalNote: result.globalNote }
-        : {}),
-      ...(result?.unansweredNotes && result.unansweredNotes.length > 0
-        ? { unansweredNotes: result.unansweredNotes }
-        : {}),
-    });
+    };
+    if (result?.error) {
+      (details as { error: typeof result.error }).error = result.error;
+    }
+    if (result?.globalNote && result.globalNote.length > 0) {
+      (details as { globalNote: string }).globalNote = result.globalNote;
+    }
+    if (result?.unansweredNotes && result.unansweredNotes.length > 0) {
+      (details as { unansweredNotes: typeof result.unansweredNotes }).unansweredNotes =
+        result.unansweredNotes;
+    }
+    return buildToolResult(DECLINE_MESSAGE, details);
   }
 
+  // Indexed once rather than scanned per question. Both sides are keyed by
+  // `questionIndex`, which is what the loop below asks for, and it is the same
+  // shape `orderedAnswers` uses in the reducer. A first entry wins, so a
+  // duplicated index reads as the earlier `find` did.
+  const answerByIndex = byQuestionIndex(result.answers);
+  const noteByIndex = byQuestionIndex(result.unansweredNotes ?? []);
+
   const segments: string[] = [];
   // Iterate the questions rather than the answers so segments always follow the
   // order the model asked in, whatever order the user filled tabs.
   for (let i = 0; i < params.questions.length; i++) {
-    const a = result.answers.find((x) => x.questionIndex === i);
+    const a = answerByIndex.get(i);
     if (a) {
       segments.push(buildAnswerSegment(a));
       continue;
@@ -78,8 +110,10 @@ export function buildQuestionnaireResponse(
     // emitted here rather than grouped at the end. Because this loop runs
     // before the "nothing to report" check below, a questionnaire submitted
     // with nothing but such a note counts as answered rather than declined.
-    const n = result.unansweredNotes?.find((x) => x.questionIndex === i);
-    if (n) segments.push(buildUnansweredNoteSegment(n));
+    const n = noteByIndex.get(i);
+    if (n) {
+      segments.push(buildUnansweredNoteSegment(n));
+    }
   }
   if (result.globalNote && result.globalNote.length > 0) {
     // Raw multiline echo, no reformatting, trailing period matching the shape
@@ -92,14 +126,29 @@ export function buildQuestionnaireResponse(
   return buildToolResult(`${ENVELOPE_PREFIX} ${segments.join(" ")} ${ENVELOPE_SUFFIX}`, result);
 }
 
+/** First entry per `questionIndex` wins, which is what `Array.find` did. */
+function byQuestionIndex<T extends { questionIndex: number }>(items: readonly T[]): Map<number, T> {
+  const out = new Map<number, T>();
+  for (const item of items) {
+    if (!out.has(item.questionIndex)) {
+      out.set(item.questionIndex, item);
+    }
+  }
+  return out;
+}
+
 /**
  * One answer as an envelope segment: `"question"="answer"`, optionally followed
  * by the preview the user was looking at and the note they wrote.
  */
 export function buildAnswerSegment(a: QuestionAnswer): string {
   const parts: string[] = [`"${a.question}"="${formatAnswerScalar(a, "envelope")}"`];
-  if (a.preview && a.preview.length > 0) parts.push(`selected preview: ${a.preview}`);
-  if (a.notes && a.notes.length > 0) parts.push(`user notes: ${a.notes}`);
+  if (a.preview && a.preview.length > 0) {
+    parts.push(`selected preview: ${a.preview}`);
+  }
+  if (a.notes && a.notes.length > 0) {
+    parts.push(`user notes: ${a.notes}`);
+  }
   return `${parts.join(". ")}.`;
 }
 

package/src/tool/types.ts

@@ -1,6 +1,14 @@
 import { type Static, Type } from "typebox";
 import { LABELS_BY_KIND, ROW_INTENT_META } from "../state/row-intent.js";
 
+type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonValue[]
+  | { readonly [key: string]: JsonValue };
+
 export const MAX_QUESTIONS = 4;
 export const MIN_OPTIONS = 2;
 export const MAX_OPTIONS = 4;
@@ -106,7 +114,10 @@ export type QuestionParams = Static<typeof QuestionParamsSchema>;
  * - `custom` — the user typed free text in the "Type something." row.
  *   `answer` is the text, or null when they committed nothing.
  * - `multi` — the user committed multi-select choices. `selected` carries the
- *   chosen labels and `answer` is null.
+ *   chosen labels and `answer` is null. Text typed on the "Type something." row
+ *   appears in `selected` too, as its own trimmed entry: on a multi-select
+ *   question that row counts as chosen whenever it holds text, so an answer can
+ *   be several authored labels plus one thing the user wrote.
  */
 export interface QuestionAnswer {
   questionIndex: number;
@@ -154,7 +165,8 @@ export type QuestionnaireError =
   | "reserved_label"
   | "session_load_failed"
   | "stale_module_cache"
-  | "timed_out";
+  | "timed_out"
+  | "host_error";
 
 export interface QuestionnaireResult {
   answers: QuestionAnswer[];
@@ -184,10 +196,22 @@ export interface QuestionnaireResult {
    */
   unansweredNotes?: UnansweredNote[];
   error?: QuestionnaireError;
+  /**
+   * What the host actually sent, on a `host_error` result. Quoted into the
+   * envelope so whoever reads the transcript can see which value was rejected
+   * rather than guessing at the malfunction.
+   *
+   * Same conditional-spread contract as `globalNote`: present only alongside
+   * `error: "host_error"`, never assigned `undefined`.
+   */
+  hostErrorDetail?: string;
 }
 
 export function isQuestionnaireResult(value: unknown): value is QuestionnaireResult {
-  if (!value || typeof value !== "object") return false;
-  const v = value as Record<string, unknown>;
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  // SAFETY: boundary check for QuestionnaireResult; value is validated as object with required fields before use.
+  const v = value as Record<string, JsonValue>;
   return Array.isArray(v.answers) && typeof v.cancelled === "boolean";
 }

package/src/view/component-binding.ts

@@ -44,7 +44,9 @@ export function globalBinding<P>(spec: ComponentBinding<P>): BoundGlobalBinding
 export function perTabBinding<P>(spec: PerTabBinding<P>): BoundPerTabBinding {
   return {
     apply: (state, ctx) => {
-      if (spec.predicate && !spec.predicate(state, ctx)) return;
+      if (spec.predicate && !spec.predicate(state, ctx)) {
+        return;
+      }
       spec.resolve(ctx.tab)?.setProps(spec.select(state, ctx));
     },
   };

package/src/view/components/inline-input.ts

@@ -27,7 +27,9 @@ export interface RenderInlineInputOptions {
  * Mirrors the original wrapping-select.resolveOffset exactly.
  */
 function resolveCursorOffset(buffer: string, requested: number | undefined): number {
-  if (requested !== undefined && requested >= 0 && requested <= buffer.length) return requested;
+  if (requested !== undefined && requested >= 0 && requested <= buffer.length) {
+    return requested;
+  }
   return buffer.length;
 }
 

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

@@ -20,6 +20,13 @@ export const MULTI_SUBMIT_LABEL = "Submit";
 export interface MultiSelectOtherRowProps {
   /** The "Type something." row is the focused row (optionIndex === options.length). */
   active: boolean;
+  /**
+   * The typed text counts as a selection, which on this row means only that
+   * there is some. Drawn with the same ✔ as an option: the row is as chosen as
+   * a ticked box, and the box used to be painted permanently empty while the
+   * text under it was on its way to the model.
+   */
+  checked: boolean;
   /** `state.inputMode` — true once the row has focus and keystrokes append to the buffer. */
   inputMode: boolean;
   /** Live inline-input buffer (read from `runtime.inputBuffer` / `ctx.inputBuffer`). */
@@ -66,7 +73,13 @@ export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
   ) {
     this.props = {
       rows: [],
-      other: { active: false, inputMode: false, inputBuffer: "", inputCursorOffset: undefined },
+      other: {
+        active: false,
+        checked: false,
+        inputMode: false,
+        inputBuffer: "",
+        inputCursorOffset: undefined,
+      },
       nextActive: false,
       nextLabel: ROW_INTENT_META.next.label,
     };
@@ -96,7 +109,9 @@ export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
   }
 
   private layout(width: number): MultiSelectLayout {
-    if (this.cachedLayout?.width === width) return this.cachedLayout.value;
+    if (this.cachedLayout?.width === width) {
+      return this.cachedLayout.value;
+    }
 
     const build: MultiSelectBuild = { lines: [], focusedRange: [0, 0] };
     const contentWidth = Math.max(1, width - this.prefixVisibleWidth());
@@ -106,7 +121,9 @@ export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
 
     const otherStart = build.lines.length;
     build.lines.push(...this.renderOtherRow(contentWidth, numberWidth));
-    if (this.props.other.active) build.focusedRange = [otherStart, build.lines.length];
+    if (this.props.other.active) {
+      build.focusedRange = [otherStart, build.lines.length];
+    }
 
     this.appendNextRow(build, width);
 
@@ -124,7 +141,9 @@ export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
     for (let i = 0; i < this.question.options.length; i++) {
       const opt = this.question.options[i];
       const row = this.props.rows[i];
-      if (!opt || !row) continue;
+      if (!opt || !row) {
+        continue;
+      }
       const start = build.lines.length;
       const pointer = row.active ? this.theme.fg("accent", ACTIVE_POINTER) : INACTIVE_POINTER;
       // Checked and active rows share the accent hue, matching the dialog's selection rhythm.
@@ -146,7 +165,9 @@ export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
           build.lines.push(CONTINUATION_INDENT + this.theme.fg("muted", segment));
         }
       }
-      if (row.active) build.focusedRange = [start, build.lines.length];
+      if (row.active) {
+        build.focusedRange = [start, build.lines.length];
+      }
     }
   }
 
@@ -159,13 +180,17 @@ export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
       ? this.theme.fg("accent", this.theme.bold(this.props.nextLabel))
       : this.props.nextLabel;
     build.lines.push(truncateToWidth(`${nextPointer}${nextLabel}`, width, ""));
-    if (this.props.nextActive) build.focusedRange = [nextStart, build.lines.length];
+    if (this.props.nextActive) {
+      build.focusedRange = [nextStart, build.lines.length];
+    }
   }
 
   private renderOtherRow(contentWidth: number, numberWidth: number): string[] {
     const other = this.props.other;
     const pointer = other.active ? this.theme.fg("accent", ACTIVE_POINTER) : INACTIVE_POINTER;
-    const box = this.theme.fg("muted", UNCHECKED);
+    const box = other.checked
+      ? this.theme.fg("accent", CHECKED)
+      : this.theme.fg("muted", UNCHECKED);
     const number = String(this.question.options.length + 1).padStart(numberWidth, " ");
     const rowPrefix = `${pointer}${number}${NUMBER_SEPARATOR}${box}${BOX_LABEL_GAP}`;
     const continuationPrefix = " ".repeat(visibleWidth(rowPrefix));

package/src/view/components/option-list-view.ts

@@ -71,6 +71,11 @@ export class OptionListView implements StatefulView<OptionListViewProps> {
     return this.select.render(width);
   }
 
+  /** Row count at `width`, equal to `render(width).length`, without building the rows. */
+  measureHeight(width: number): number {
+    return this.select.measureHeight(width);
+  }
+
   focusedItemRowRange(width: number): [number, number] {
     return this.select.focusedItemRowRange(width);
   }

package/src/view/components/preview/markdown-content-cache.ts

@@ -3,37 +3,65 @@ import { Markdown, type MarkdownTheme, visibleWidth } from "@earendil-works/pi-t
 import type { QuestionData } from "../../../tool/types.js";
 import { stripFenceMarkers } from "./preview-box-renderer.js";
 
+export type MarkdownFactory = (text: string, markdownTheme: MarkdownTheme) => Markdown;
+
 /** CC parity in side-by-side layout. */
 export const MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE = 20;
 /** Preserves narrow-terminal protection in stacked layout. */
 export const MAX_PREVIEW_HEIGHT_STACKED = 15;
 export const NO_PREVIEW_TEXT = "No preview available";
+/** Fallback body line when a preview's markdown fails to render (untrusted input boundary). */
+export const PREVIEW_RENDER_FAILED_TEXT = "Preview failed to render";
 /** 1 blank separator + 1 affordance text row reserved when `hasAnyPreview` (height stability of the affordance row's offset relative to the box). */
 export const NOTES_AFFORDANCE_OVERHEAD = 2;
 
 /**
- * Per-question cache for rendered markdown previews. Width-keyed: switching the
- * inner width invalidates every cached `Markdown`'s render output (pi-tui's
- * `Markdown.render(width)` re-wraps when width changes).
+ * One entry per option that carries a preview. `md` is built once and kept for
+ * the life of the cache; `lines` are the stripped rows it last produced, and
+ * `width` is the inner width they were produced at.
+ */
+interface PreviewEntry {
+  md: ReturnType<MarkdownFactory>;
+  width: number | undefined;
+  lines: string[] | undefined;
+}
+
+/**
+ * Per-question cache for rendered markdown previews, keyed per option.
  *
- * Replaces the inline `previewTexts`, `markdownCache`, `cachedWidth` triple from
- * the previous monolithic `preview-pane.ts`. One Markdown per option, lazy on
- * first request, never re-constructed — count semantics frozen by tests.
+ * Width used to be tracked for the cache as a whole: any change invalidated
+ * every `Markdown` it held, so a resize drag re-wrapped all four options one by
+ * one through the `maxNaturalHeight` loop even though the frame only measured
+ * some of them. Each option now remembers the width it was rendered at, so a
+ * width flip costs a re-render of the options that frame actually asks for and
+ * nothing else. It also holds the stripped rows, which spares the second strip
+ * when `blockHeight` and `renderBlock` ask for the same option in one frame.
+ *
+ * One Markdown per option, lazy on first request, never re-constructed — count
+ * semantics frozen by tests.
  */
 export class MarkdownContentCache {
   private readonly previewTexts: Map<number, string>;
-  private readonly markdownCache: Map<number, Markdown>;
-  private cachedWidth: number | undefined;
+  private readonly markdownCache: Map<number, PreviewEntry>;
   private readonly theme: Theme;
   private readonly markdownTheme: MarkdownTheme;
+  private readonly markdownFactory: MarkdownFactory;
 
-  constructor(question: QuestionData, theme: Theme, markdownTheme: MarkdownTheme) {
+  constructor(
+    question: QuestionData,
+    theme: Theme,
+    markdownTheme: MarkdownTheme,
+    markdownFactory: MarkdownFactory = (text, mt) => new Markdown(text, 0, 0, mt),
+  ) {
     this.theme = theme;
     this.markdownTheme = markdownTheme;
+    this.markdownFactory = markdownFactory;
     this.previewTexts = new Map();
     for (let i = 0; i < question.options.length; i++) {
       const raw = question.options[i]?.preview;
-      if (raw && raw.length > 0) this.previewTexts.set(i, raw);
+      if (raw && raw.length > 0) {
+        this.previewTexts.set(i, raw);
+      }
     }
     this.markdownCache = new Map();
   }
@@ -47,30 +75,54 @@ export class MarkdownContentCache {
   }
 
   /**
-   * Compute the body lines for a given option at a given inner width. Width changes
-   * invalidate the per-Markdown render cache.
+   * Body lines for one option at one inner width. A repeat request at the width
+   * the option was last rendered at returns the stored rows.
+   *
+   * Untrusted boundary: `preview` is model-authored markdown and this is the only
+   * place it reaches the render path. A `Markdown` that throws (malformed input,
+   * width edge cases) must not take the overlay down with it, so the render is
+   * wrapped and a single dim fallback line is returned instead. There is no
+   * notify channel from the view layer — the fallback line IS the diagnostic.
+   * A failed render stores nothing, so the next frame tries again.
    */
   bodyFor(optionIndex: number, innerWidth: number): string[] {
-    if (this.cachedWidth !== innerWidth) {
-      for (const md of this.markdownCache.values()) md.invalidate();
-      this.cachedWidth = innerWidth;
-    }
     const text = this.previewTexts.get(optionIndex);
     if (!text) {
       const placeholder = this.theme.fg("dim", NO_PREVIEW_TEXT);
       const pad = Math.max(0, innerWidth - visibleWidth(placeholder));
       return [placeholder + " ".repeat(pad)];
     }
-    let md = this.markdownCache.get(optionIndex);
-    if (!md) {
-      md = new Markdown(text, 0, 0, this.markdownTheme);
-      this.markdownCache.set(optionIndex, md);
+    let entry = this.markdownCache.get(optionIndex);
+    if (!entry) {
+      entry = {
+        md: this.markdownFactory(text, this.markdownTheme),
+        width: undefined,
+        lines: undefined,
+      };
+      this.markdownCache.set(optionIndex, entry);
+    }
+    if (entry.lines !== undefined && entry.width === innerWidth) {
+      // A copy: the rows travel into the box renderer and out to the pane, and
+      // the cache is the only thing that may hold the originals.
+      return [...entry.lines];
+    }
+    try {
+      const lines = stripFenceMarkers(entry.md.render(innerWidth));
+      entry.width = innerWidth;
+      entry.lines = lines;
+      return [...lines];
+    } catch {
+      entry.width = undefined;
+      entry.lines = undefined;
+      return [this.theme.fg("dim", PREVIEW_RENDER_FAILED_TEXT)];
     }
-    return stripFenceMarkers(md.render(innerWidth));
   }
 
   invalidate(): void {
-    for (const md of this.markdownCache.values()) md.invalidate();
-    this.cachedWidth = undefined;
+    for (const entry of this.markdownCache.values()) {
+      entry.md.invalidate();
+      entry.width = undefined;
+      entry.lines = undefined;
+    }
   }
 }

package/src/view/components/preview/preview-block-renderer.ts

@@ -5,6 +5,7 @@ import {
   MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE,
   MAX_PREVIEW_HEIGHT_STACKED,
   MarkdownContentCache,
+  type MarkdownFactory,
   NOTES_AFFORDANCE_OVERHEAD,
 } from "./markdown-content-cache.js";
 import {
@@ -38,6 +39,7 @@ export interface PreviewBlockRendererConfig {
   question: QuestionData;
   theme: Theme;
   markdownTheme: MarkdownTheme;
+  markdownFactory?: MarkdownFactory;
 }
 
 /**
@@ -56,7 +58,12 @@ export class PreviewBlockRenderer {
 
   constructor(config: PreviewBlockRendererConfig) {
     this.theme = config.theme;
-    this.cache = new MarkdownContentCache(config.question, config.theme, config.markdownTheme);
+    this.cache = new MarkdownContentCache(
+      config.question,
+      config.theme,
+      config.markdownTheme,
+      config.markdownFactory,
+    );
   }
 
   hasAnyPreview(): boolean {

package/src/view/components/preview/preview-box-renderer.ts

@@ -73,14 +73,13 @@ export function renderBorderedBox(
  * `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 } {
+export function computeBoxDimensions(contentLines: readonly string[], maxInnerWidth: 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;
+    if (w > widest) {
+      widest = w;
+    }
   }
   const innerWidth = Math.min(widest, maxInnerWidth);
   const boxWidth = innerWidth + BORDER_HORIZONTAL_OVERHEAD + 2 * BORDER_INNER_PADDING_HORIZONTAL;

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

@@ -61,7 +61,9 @@ export function adaptiveLeftWidth(
   let maxLabel = 0;
   for (const item of items) {
     const w = visibleWidth(item.label);
-    if (w > maxLabel) maxLabel = w;
+    if (w > maxLabel) {
+      maxLabel = w;
+    }
   }
   const desired = maxLabel + prefixW + confirmedOverhead;
   const ratioCapped = Math.min(desired, Math.floor(paneWidth * MAX_LEFT_RATIO));
@@ -88,7 +90,9 @@ export function crossTabMaxLeftWidth(
     const items = itemsByTab[i] ?? [];
     const totalForNumbering = items.length;
     const tabWidth = adaptiveLeftWidth(items, totalForNumbering, paneWidth);
-    if (tabWidth > max) max = tabWidth;
+    if (tabWidth > max) {
+      max = tabWidth;
+    }
   }
   return max;
 }
@@ -108,10 +112,14 @@ export function previewSourceWidth(question: QuestionData): number {
   let max = 0;
   for (const option of question.options) {
     const text = option.preview;
-    if (!text) continue;
+    if (!text) {
+      continue;
+    }
     for (const line of text.split("\n")) {
       const w = visibleWidth(line);
-      if (w > max) max = w;
+      if (w > max) {
+        max = w;
+      }
     }
   }
   return max;
@@ -138,7 +146,9 @@ export function crossTabPreviewBudget(
       BORDER_HORIZONTAL_OVERHEAD +
       2 * BORDER_INNER_PADDING_HORIZONTAL +
       PREVIEW_PADDING_LEFT;
-    if (budget > max) max = budget;
+    if (budget > max) {
+      max = budget;
+    }
   }
   return max;
 }
@@ -187,16 +197,45 @@ export function crossTabLeftWidthWithDonation(
   return Math.min(Math.max(labelDriven, slackDonation), Math.max(1, ceiling));
 }
 
+/**
+ * Widths kept before the memo below is dropped wholesale. A frame asks for one;
+ * the rest of the entries are old terminal sizes from a resize drag.
+ */
+const PANE_WIDTH_MEMO_MAX_ENTRIES = 16;
+
+/**
+ * Memoize a pane-width computation. For `crossTabLeftWidthWithDonation` and
+ * `crossTabPreviewBudget`, whose other inputs are fixed for the life of a
+ * questionnaire: both scan every tab, every option and every preview source
+ * line, and the pane width only changes on resize, yet the callers ask four to
+ * five times a frame (`focusedItemRowRange`, `naturalHeight`,
+ * `maxNaturalHeight`, `renderSideBySide`).
+ */
+export function memoizeByPaneWidth(
+  compute: (paneWidth: number) => number,
+): (paneWidth: number) => number {
+  const cache = new Map<number, number>();
+  return (paneWidth: number): number => {
+    const hit = cache.get(paneWidth);
+    if (hit !== undefined) {
+      return hit;
+    }
+    const value = compute(paneWidth);
+    if (cache.size >= PANE_WIDTH_MEMO_MAX_ENTRIES) {
+      cache.clear();
+    }
+    cache.set(paneWidth, value);
+    return value;
+  };
+}
+
 /**
  * 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 } {
+export function columnWidths(paneWidth: number, adaptiveLeft: 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);
@@ -208,12 +247,10 @@ export function columnWidths(
  * `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 };
+export function bodyWidths(paneWidth: number, mode: PreviewLayoutMode, adaptiveLeft: 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) };
 }