pi-ask-popup 0.1.0 → 0.2.0

package/src/state/build-questionnaire.ts

@@ -10,7 +10,10 @@ import {
 import { MultiSelectView } from "../view/components/multi-select-view.js";
 import { OptionListView } from "../view/components/option-list-view.js";
 import { PreviewBlockRenderer } from "../view/components/preview/preview-block-renderer.js";
-import { crossTabLeftWidthWithDonation } from "../view/components/preview/preview-layout-decider.js";
+import {
+  crossTabLeftWidthWithDonation,
+  memoizeByPaneWidth,
+} from "../view/components/preview/preview-layout-decider.js";
 import { PreviewPane, type PreviewPaneProps } from "../view/components/preview/preview-pane.js";
 import { SubmitPicker } from "../view/components/submit-picker.js";
 import { TabBar } from "../view/components/tab-bar.js";
@@ -121,8 +124,29 @@ class QuestionnaireBuilder {
   private readonly markdownTheme = getMarkdownTheme();
   private readonly notesInput: Editor;
   private readonly inlineInput: Editor;
-  private readonly getTerminalWidth = () => this.tui.terminal.columns;
-  private readonly getTerminalRows = () => this.tui.terminal.rows;
+  /**
+   * Terminal size for the frame being painted, refreshed by `beginFrame` and
+   * read back by everything in that frame.
+   *
+   * Components used to reach `tui.terminal` themselves, each at the moment it
+   * happened to run: the pane deciding side-by-side against one reading, the
+   * dialog cutting the scroll window against a later one. A resize landing
+   * between the two split the frame in half. One read at the top of
+   * `DialogView.render` cannot.
+   *
+   * Do not debounce this. A drag fires a resize every few milliseconds, but
+   * each one only reaches `tui.requestRender()`, which sets a flag, schedules
+   * on `process.nextTick` and holds a 16 ms floor between paints. The widths in
+   * between are never painted and never reach a cache; a debounce on top would
+   * buy nothing and delay the frame the user is dragging towards.
+   */
+  private readonly frameTerminal = { columns: 0, rows: 0 };
+  private readonly beginFrame = (): void => {
+    this.frameTerminal.columns = this.tui.terminal.columns;
+    this.frameTerminal.rows = this.tui.terminal.rows;
+  };
+  private readonly getFrameTerminalWidth = () => this.frameTerminal.columns;
+  private readonly getFrameTerminalRows = () => this.frameTerminal.rows;
 
   constructor(config: QuestionnaireBuildConfig) {
     this.tui = config.tui;
@@ -133,6 +157,9 @@ class QuestionnaireBuilder {
     this.initialState = config.initialState;
     this.getCurrentTab = config.getCurrentTab;
     this.collapseKey = config.collapseKey;
+    // Seeded here so a pane that renders before any frame begins sees a real
+    // terminal rather than a zero-width one.
+    this.beginFrame();
 
     this.selectTheme = this.makeSelectTheme();
     const textEditorTheme = editorTheme(this.theme);
@@ -185,7 +212,7 @@ class QuestionnaireBuilder {
     });
     const preview = new PreviewPane({
       question,
-      getTerminalWidth: this.getTerminalWidth,
+      getFrameTerminalWidth: this.getFrameTerminalWidth,
       optionListView: optionList,
       previewBlock,
     });
@@ -215,8 +242,11 @@ class QuestionnaireBuilder {
     // objects first, as upstream did, only produced a shape that already
     // existed -- and produced it with an explicit undefined, which is a
     // different type from an absent key here.
-    const globalLeftWidth = (paneWidth: number): number =>
-      crossTabLeftWidthWithDonation(questions, itemsByTab, questions, paneWidth);
+    // Memoized: the questions and their rows are fixed for the life of the
+    // questionnaire, so the donation is pure of the pane width alone.
+    const globalLeftWidth = memoizeByPaneWidth((paneWidth: number): number =>
+      crossTabLeftWidthWithDonation(questions, itemsByTab, questions, paneWidth),
+    );
     for (const tab of tabs) {
       tab.preview.setGlobalLeftWidth(globalLeftWidth);
     }
@@ -235,7 +265,9 @@ class QuestionnaireBuilder {
       let max = 0;
       for (const tab of tabs) {
         const h = tab.bodyHeights(width).max;
-        if (h > max) max = h;
+        if (h > max) {
+          max = h;
+        }
       }
       return Math.max(1, max);
     };
@@ -277,7 +309,8 @@ class QuestionnaireBuilder {
         ...(submitPicker === undefined ? {} : { submitPicker }),
         getBodyHeight: heights.global,
         getCurrentBodyHeight: heights.current,
-        getTerminalRows: this.getTerminalRows,
+        beginFrame: this.beginFrame,
+        getFrameTerminalRows: this.getFrameTerminalRows,
         collapseKey: this.collapseKey,
       },
       { state: this.initialState, activePreviewPane },
@@ -312,6 +345,10 @@ class QuestionnaireBuilder {
       }),
       perTabBinding({
         resolve: (tab) => tab.multiSelect,
+        // Gated like the other two. A write to an inactive tab's view clears the
+        // layout it cached, and nothing was going to read the result: the props
+        // for an inactive tab only change while that tab is the active one.
+        predicate: isActiveTab,
         select: selectMultiSelectProps,
       }),
     ];

package/src/state/external-editor.ts

@@ -1,5 +1,5 @@
 import { spawn } from "node:child_process";
-import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 
@@ -23,7 +23,9 @@ function runEditor(command: string, file: string): Promise<void> {
   const [editor, ...args] = command.split(" ");
   // Unreachable given the caller's check, but the destructure is typed as
   // possibly-undefined and a bare assertion here would be worse.
-  if (!editor) return Promise.reject(new Error("External editor command is empty"));
+  if (!editor) {
+    return Promise.reject(new Error("External editor command is empty"));
+  }
 
   return new Promise((resolve, reject) => {
     const child = spawn(editor, [...args, file], {
@@ -51,6 +53,11 @@ function runEditor(command: string, file: string): Promise<void> {
  * editor, a failed temp write, anything at all must not leave the user in a
  * stopped TUI with no way back.
  *
+ * Every filesystem step is async. The TUI is stopped anyway, so nothing here is
+ * painting, but the event loop is shared with the rest of Pi and blocking it on
+ * a temp write over a slow or network-backed `TMPDIR` stalls every other
+ * extension in the process.
+ *
  * One trailing newline is stripped, matching Pi's main editor flow: most editors
  * add one on save, and keeping it would silently append a blank line to every
  * answer that went through here.
@@ -64,31 +71,36 @@ export async function editWithExternalEditor(
   // TUI has already been stopped, makes a misconfigured editor command flash
   // the screen off and back on before reporting a problem that was knowable
   // from the start.
-  if (command.trim().length === 0) throw new Error("External editor command is empty");
+  if (command.trim().length === 0) {
+    throw new Error("External editor command is empty");
+  }
 
-  const tempDir = mkdtempSync(join(tmpdir(), "pi-ask-popup-"));
+  const tempDir = await mkdtemp(join(tmpdir(), "pi-ask-popup-"));
   const tempFile = join(tempDir, "answer.md");
   let tuiStopped = false;
 
   try {
-    writeFileSync(tempFile, value, "utf8");
+    await writeFile(tempFile, value, "utf8");
     tui.stop();
     tuiStopped = true;
     process.stdout.write(
       `Launching external editor: ${command}\nPi will resume when the editor exits.\n`,
     );
     await runEditor(command, tempFile);
-    return readFileSync(tempFile, "utf8").replace(/\r?\n$/, "");
+    return (await readFile(tempFile, "utf8")).replace(/\r?\n$/, "");
   } finally {
-    try {
-      rmSync(tempDir, { recursive: true, force: true });
-    } catch {
-      // Best effort. A temp directory left behind is a nuisance; a TUI left
-      // stopped because cleanup threw is a hung session.
-    }
+    // The terminal comes back before the cleanup, not after. Both are in the
+    // finally, but a slow or wedged unlink must not be what stands between the
+    // user and a working screen.
     if (tuiStopped) {
       tui.start();
       tui.requestRender(true);
     }
+    try {
+      await rm(tempDir, { recursive: true, force: true });
+    } catch {
+      // Best effort. A temp directory left behind is a nuisance; a failed
+      // cleanup that propagated would replace the answer with an error.
+    }
   }
 }

package/src/state/key-router.ts

@@ -2,6 +2,13 @@ import { Key, matchesKey } from "@earendil-works/pi-tui";
 import type { QuestionAnswer } from "../tool/types.js";
 import { ROW_INTENT_META } from "./row-intent.js";
 import type { QuestionnaireRuntime, QuestionnaireState } from "./state.js";
+type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonValue[]
+  | { readonly [key: string]: JsonValue };
 
 const KEYBIND_UP = "tui.select.up";
 const KEYBIND_DOWN = "tui.select.down";
@@ -59,14 +66,20 @@ function isConfirm(kb: QuestionnaireKeybindings, data: string): boolean {
 }
 
 export function wrapTab(index: number, total: number): number {
-  if (total <= 0) return 0;
+  if (total <= 0) {
+    return 0;
+  }
   return ((index % total) + total) % total;
 }
 
 export function allAnswered(state: QuestionnaireState, runtime: QuestionnaireRuntime): boolean {
-  if (runtime.questions.length === 0) return false;
+  if (runtime.questions.length === 0) {
+    return false;
+  }
   for (let i = 0; i < runtime.questions.length; i++) {
-    if (!state.answers.has(i)) return false;
+    if (!state.answers.has(i)) {
+      return false;
+    }
   }
   return true;
 }
@@ -79,8 +92,12 @@ function computeAutoAdvanceTab(
   state: QuestionnaireState,
   runtime: QuestionnaireRuntime,
 ): number | undefined {
-  if (!runtime.isMulti) return undefined;
-  if (state.currentTab < runtime.questions.length - 1) return state.currentTab + 1;
+  if (!runtime.isMulti) {
+    return undefined;
+  }
+  if (state.currentTab < runtime.questions.length - 1) {
+    return state.currentTab + 1;
+  }
   return runtime.questions.length;
 }
 
@@ -89,7 +106,9 @@ function buildSingleSelectAnswer(
   runtime: QuestionnaireRuntime,
 ): QuestionAnswer | null {
   const q = runtime.questions[state.currentTab];
-  if (!q) return null;
+  if (!q) {
+    return null;
+  }
 
   const item = runtime.currentItem;
 
@@ -102,7 +121,9 @@ function buildSingleSelectAnswer(
       answer: label.length > 0 ? label : null,
     };
   }
-  if (!item) return null;
+  if (!item) {
+    return null;
+  }
   if (item.kind === "other") {
     return null;
   }
@@ -117,16 +138,36 @@ function buildSingleSelectAnswer(
   };
 }
 
+function isString(value: JsonValue | undefined): value is string {
+  return typeof value === "string";
+}
+
+/**
+ * The ticked labels, plus the typed row's text when there is any.
+ *
+ * The typed row has no checkbox of its own to consult: text in it IS the tick,
+ * which is why an empty or whitespace-only draft contributes nothing. The text
+ * comes from the live editor rather than the reducer's copy, which is only
+ * refreshed when the user navigates off the row.
+ */
 function buildMultiSelected(state: QuestionnaireState, runtime: QuestionnaireRuntime): string[] {
   const q = runtime.questions[state.currentTab];
-  if (!q) return [];
+  if (!q) {
+    return [];
+  }
   const out: string[] = [];
   for (let i = 0; i < q.options.length; i++) {
     if (state.multiSelectChecked.has(i)) {
       const label = q.options[i]?.label;
-      if (typeof label === "string") out.push(label);
+      if (isString(label)) {
+        out.push(label);
+      }
     }
   }
+  const typed = runtime.inputBuffer.trim();
+  if (typed.length > 0 && !out.includes(typed)) {
+    out.push(typed);
+  }
   return out;
 }
 
@@ -135,7 +176,9 @@ function tabSwitchAction(
   state: QuestionnaireState,
   runtime: QuestionnaireRuntime,
 ): QuestionnaireAction | null {
-  if (!runtime.isMulti) return null;
+  if (!runtime.isMulti) {
+    return null;
+  }
   const total = totalTabs(runtime);
   if (matchesKey(data, Key.tab) || matchesKey(data, Key.right)) {
     return { kind: "tab_switch", nextTab: wrapTab(state.currentTab + 1, total) };
@@ -174,14 +217,22 @@ function prevNavOnUp(
 // the user can read the now-uncovered transcript without accidentally mutating
 // answers or notes. The collapse toggle itself is already handled above.
 function routeCollapsed(kb: QuestionnaireKeybindings, data: string): QuestionnaireAction {
-  if (kb.matches(data, KEYBIND_CANCEL)) return { kind: "cancel" };
+  if (kb.matches(data, KEYBIND_CANCEL)) {
+    return { kind: "cancel" };
+  }
   return { kind: "ignore" };
 }
 
 function routeNotesMode(kb: QuestionnaireKeybindings, data: string): QuestionnaireAction {
-  if (kb.matches(data, KEYBIND_CANCEL)) return { kind: "notes_exit" };
-  if (kb.matches(data, KEYBIND_NEW_LINE)) return { kind: "notes_forward", data };
-  if (isConfirm(kb, data)) return { kind: "notes_exit" };
+  if (kb.matches(data, KEYBIND_CANCEL)) {
+    return { kind: "notes_exit" };
+  }
+  if (kb.matches(data, KEYBIND_NEW_LINE)) {
+    return { kind: "notes_forward", data };
+  }
+  if (isConfirm(kb, data)) {
+    return { kind: "notes_exit" };
+  }
   return { kind: "notes_forward", data };
 }
 
@@ -193,22 +244,50 @@ function routeInputMode(
 ): QuestionnaireAction {
   // Newline takes precedence over confirmation if a user configuration binds
   // the same physical key to both semantic actions.
-  if (kb.matches(data, KEYBIND_NEW_LINE)) return { kind: "ignore" };
+  if (kb.matches(data, KEYBIND_NEW_LINE)) {
+    return { kind: "ignore" };
+  }
   if (isConfirm(kb, data)) {
+    // On a multi-select question, Enter here commits the question the way the
+    // Next row does, and `buildMultiSelected` carries the typed text along with
+    // whatever boxes are ticked. It used to commit the text ALONE, discarding
+    // every tick the user had made.
+    if (runtime.questions[state.currentTab]?.multiSelect === true) {
+      return {
+        kind: "multi_confirm",
+        selected: buildMultiSelected(state, runtime),
+        autoAdvanceTab: computeAutoAdvanceTab(state, runtime),
+      };
+    }
     const answer = buildSingleSelectAnswer(state, runtime);
-    if (!answer) return { kind: "ignore" };
+    if (!answer) {
+      return { kind: "ignore" };
+    }
     return { kind: "confirm", answer, autoAdvanceTab: computeAutoAdvanceTab(state, runtime) };
   }
   // Treat Pi's Ctrl+U line-kill binding as an explicit whole-draft clear,
   // independent of the current cursor position.
-  if (kb.matches(data, KEYBIND_CLEAR)) return { kind: "input_clear" };
-  if (kb.matches(data, KEYBIND_EXTERNAL_EDITOR))
+  if (kb.matches(data, KEYBIND_CLEAR)) {
+    return { kind: "input_clear" };
+  }
+  if (kb.matches(data, KEYBIND_EXTERNAL_EDITOR)) {
     return { kind: "input_edit", value: runtime.inputBuffer };
-  if (kb.matches(data, KEYBIND_CANCEL)) return { kind: "cancel" };
-  if (kb.matches(data, KEYBIND_EDITOR_UP) && runtime.canMoveInputUp) return { kind: "ignore" };
-  if (kb.matches(data, KEYBIND_EDITOR_DOWN) && runtime.canMoveInputDown) return { kind: "ignore" };
-  if (kb.matches(data, KEYBIND_UP)) return prevNavOnUp(state, runtime);
-  if (kb.matches(data, KEYBIND_DOWN)) return nextNavOnDown(state, runtime);
+  }
+  if (kb.matches(data, KEYBIND_CANCEL)) {
+    return { kind: "cancel" };
+  }
+  if (kb.matches(data, KEYBIND_EDITOR_UP) && runtime.canMoveInputUp) {
+    return { kind: "ignore" };
+  }
+  if (kb.matches(data, KEYBIND_EDITOR_DOWN) && runtime.canMoveInputDown) {
+    return { kind: "ignore" };
+  }
+  if (kb.matches(data, KEYBIND_UP)) {
+    return prevNavOnUp(state, runtime);
+  }
+  if (kb.matches(data, KEYBIND_DOWN)) {
+    return nextNavOnDown(state, runtime);
+  }
   return { kind: "ignore" };
 }
 
@@ -218,12 +297,17 @@ function routeSubmitTab(
   state: QuestionnaireState,
   runtime: QuestionnaireRuntime,
 ): QuestionnaireAction {
-  if (kb.matches(data, KEYBIND_CANCEL)) return { kind: "cancel" };
+  if (kb.matches(data, KEYBIND_CANCEL)) {
+    return { kind: "cancel" };
+  }
   const tab = tabSwitchAction(data, state, runtime);
-  if (tab) return tab;
+  if (tab) {
+    return tab;
+  }
   if (kb.matches(data, KEYBIND_UP) || kb.matches(data, KEYBIND_DOWN)) {
     const delta = kb.matches(data, KEYBIND_DOWN) ? 1 : -1;
     const next = wrapTab(state.submitChoiceIndex + delta, 2);
+    // SAFETY: safe cast — value is validated at boundary or test fixture with known shape.
     return { kind: "submit_nav", nextIndex: (next === 1 ? 1 : 0) as 0 | 1 };
   }
   if (isConfirm(kb, data)) {
@@ -257,20 +341,28 @@ function routeMultiSelectTab(
   // `blocksMultiToggle` (the Next sentinel) or `activatesInputMode` (the "Type
   // something." row — it is an inline input, not a checkable option).
   if (data === SPACE_KEY) {
-    if (focusedMeta?.blocksMultiToggle) return { kind: "ignore" };
-    if (focusedMeta?.activatesInputMode) return { kind: "ignore" };
+    if (focusedMeta?.blocksMultiToggle) {
+      return { kind: "ignore" };
+    }
+    if (focusedMeta?.activatesInputMode) {
+      return { kind: "ignore" };
+    }
     return { kind: "toggle", index: state.optionIndex };
   }
   if (isConfirm(kb, data)) {
     // Enter on the "Type something." row is handled by the inputMode block above
     // (→ confirm kind:"custom"). Defensive: never enter the toggle/multi_confirm
     // path for an inputMode-activating row.
-    if (focusedMeta?.activatesInputMode) return { kind: "ignore" };
+    if (focusedMeta?.activatesInputMode) {
+      return { kind: "ignore" };
+    }
     // Enter on a regular row toggles (matching Space) — committing the question is now
     // gated behind explicit focus on a row whose META declares `autoSubmitsInMulti`
     // (the Next sentinel), so Enter on options is a no-cost way to flip checkboxes
     // without leaving the keyboard home row.
-    if (!focusedMeta?.autoSubmitsInMulti) return { kind: "toggle", index: state.optionIndex };
+    if (!focusedMeta?.autoSubmitsInMulti) {
+      return { kind: "toggle", index: state.optionIndex };
+    }
     // Enter on Next: carry autoAdvanceTab so the host can advance to the next tab in
     // multi-question mode, OR submit the dialog in single-question mode
     // (autoAdvanceTab === undefined when !isMulti). Without this, a single multi-select
@@ -281,7 +373,9 @@ function routeMultiSelectTab(
       autoAdvanceTab: computeAutoAdvanceTab(state, runtime),
     };
   }
-  if (kb.matches(data, KEYBIND_CANCEL)) return { kind: "cancel" };
+  if (kb.matches(data, KEYBIND_CANCEL)) {
+    return { kind: "cancel" };
+  }
   return { kind: "ignore" };
 }
 
@@ -293,10 +387,14 @@ function routeSingleSelectTab(
 ): QuestionnaireAction {
   if (isConfirm(kb, data)) {
     const answer = buildSingleSelectAnswer(state, runtime);
-    if (!answer) return { kind: "ignore" };
+    if (!answer) {
+      return { kind: "ignore" };
+    }
     return { kind: "confirm", answer, autoAdvanceTab: computeAutoAdvanceTab(state, runtime) };
   }
-  if (kb.matches(data, KEYBIND_CANCEL)) return { kind: "cancel" };
+  if (kb.matches(data, KEYBIND_CANCEL)) {
+    return { kind: "cancel" };
+  }
   return { kind: "ignore" };
 }
 
@@ -329,28 +427,39 @@ export function routeKey(
   // undefined into matchesKey reaches parseKeyId().toLowerCase() and crashes the
   // entire host process, so keep the runtime boundary defensive even though the
   // TypeScript contract requires a string. The "off" literal is deliberate:
-  // importing COLLAPSE_KEY_OFF would pull ../config.js (and its rpiv-config
-  // loader graph) into this pure module for a string that cannot change.
+  // importing COLLAPSE_KEY_OFF would pull ../config.js (and its config loader
+  // graph) into this pure module for a string that cannot change.
   if (
-    typeof runtime.collapseKey === "string" &&
+    isString(runtime.collapseKey) &&
     runtime.collapseKey !== "off" &&
+    // SAFETY: safe cast — value is validated at boundary or test fixture with known shape.
     matchesKey(data, runtime.collapseKey as Parameters<typeof matchesKey>[1])
   ) {
     return { kind: "toggle_collapsed" };
   }
 
-  if (state.collapsed) return routeCollapsed(kb, data);
-  if (state.notesVisible) return routeNotesMode(kb, data);
-  if (state.inputMode) return routeInputMode(kb, data, state, runtime);
+  if (state.collapsed) {
+    return routeCollapsed(kb, data);
+  }
+  if (state.notesVisible) {
+    return routeNotesMode(kb, data);
+  }
+  if (state.inputMode) {
+    return routeInputMode(kb, data, state, runtime);
+  }
   if (runtime.isMulti && state.currentTab === runtime.questions.length) {
     return routeSubmitTab(kb, data, state, runtime);
   }
 
   const tab = tabSwitchAction(data, state, runtime);
-  if (tab) return tab;
+  if (tab) {
+    return tab;
+  }
 
   const q = runtime.questions[state.currentTab];
-  if (!q) return { kind: "ignore" };
+  if (!q) {
+    return { kind: "ignore" };
+  }
 
   // Universal `n` activation (FR-1): the notes editor opens on every question tab
   // (single- or multi-select, preview or no-preview). The blocks above already
@@ -373,6 +482,8 @@ export function routeKey(
     return nextNavOnDown(state, runtime);
   }
 
-  if (q.multiSelect) return routeMultiSelectTab(kb, data, state, runtime);
+  if (q.multiSelect) {
+    return routeMultiSelectTab(kb, data, state, runtime);
+  }
   return routeSingleSelectTab(kb, data, state, runtime);
 }