@astralyn/pi 0.87.4 → 0.87.6

package/dist/extensions/question/dialog.js

@@ -1,22 +1,27 @@
 import "./keybindings.js";
-import { Editor, Markdown, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { CURSOR_MARKER, Editor, Markdown, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
 import { keyLabel as configuredKeyLabel } from "../../modes/interactive/components/keybinding-hints.js";
 import { getMarkdownTheme } from "../../modes/interactive/theme/theme.js";
+import { DetailPane } from "./detail-pane.js";
 import { ruleBorder, wrapWithPrefix } from "./dialog-primitives.js";
 import { QUESTION_LIMITS } from "./limits.js";
+import { moreOptionsHint, windowItems } from "./option-window.js";
 import { PreviewLinesCache, WidthCachedRender } from "./render-cache.js";
 import { displayOptions, firstUnanswered, hasAnswer, hasMultiAnswer, newQuestionState, orderedAnswers, } from "./state.js";
-const PREVIEW_MAX_LINES = 16;
 /**
- * Estimated non-preview rows in the stacked (narrow) layout: top/bottom rules,
- * tab strip + blank, question line + blank, up to 5 option rows with
- * descriptions, the "Chat about this" row, warning slot, and the hint line.
- * Reserved so the preview clamps short of the terminal height.
+ * The dialog replaces the editor in the bottom dock, and the dock grows with its
+ * content. Capping the dialog at half the terminal keeps the transcript (often the
+ * assistant reply the question refers to) readable while the dialog is open.
  */
-const PREVIEW_CHROME_ROWS = 18;
+const DIALOG_MAX_FRACTION = 0.5;
+const DIALOG_MIN_ROWS = 16;
 const VIEWPORT_SCROLL_STEP = 4;
-function applyVerticalViewport(lines, width, terminalRows, theme, options = {}) {
-    const maxRows = Math.max(1, Math.floor(terminalRows));
+function dialogRowBudget(terminalRows) {
+    const rows = Math.max(1, Math.floor(terminalRows));
+    return Math.min(rows, Math.max(DIALOG_MIN_ROWS, Math.floor(rows * DIALOG_MAX_FRACTION)));
+}
+/** Clamp `lines` to `maxRows` between the first and last line, scrolling around the anchor. */
+function applyVerticalViewport(lines, width, maxRows, theme, options = {}) {
     if (lines.length <= maxRows)
         return { lines, start: 0, maxStart: 0 };
     if (maxRows < 5) {
@@ -60,6 +65,7 @@ export function createQuestionDialog(questions, signal) {
         let finished = false;
         const cache = new WidthCachedRender();
         const previewCache = new PreviewLinesCache();
+        const details = new DetailPane();
         const states = questions.map(() => newQuestionState());
         const optionsByQuestion = questions.map((question) => displayOptions(question));
         const editorTheme = {
@@ -111,6 +117,7 @@ export function createQuestionDialog(questions, signal) {
             editor.focused = dialogFocused && inputMode !== undefined;
         }
         function setCurrentIdx(index) {
+            details.reset();
             currentIdx = Math.max(0, Math.min(questions.length - 1, index));
             view = "question";
             inputMode = undefined;
@@ -160,6 +167,7 @@ export function createQuestionDialog(questions, signal) {
             setCurrentIdx(missing);
         }
         function beginCustomInput() {
+            details.reset();
             const state = currentState();
             inputMode = "custom";
             noteTarget = undefined;
@@ -182,6 +190,7 @@ export function createQuestionDialog(questions, signal) {
             state.warning = undefined;
         }
         function beginNotesInput() {
+            details.reset();
             const question = currentQuestion();
             const state = currentState();
             const option = focusedOption();
@@ -357,6 +366,13 @@ export function createQuestionDialog(questions, signal) {
                     setCurrentIdx(currentIdx - 1);
                 return;
             }
+            if (keyMatches(data, "app.question.pageUp") || keyMatches(data, "app.question.pageDown")) {
+                // Resolve the current pane's height even if another key arrived before a redraw.
+                render(tui.terminal.columns);
+                details.page(keyMatches(data, "app.question.pageUp") ? -1 : 1);
+                refresh();
+                return;
+            }
             if (keyMatches(data, "tui.editor.cursorRight")) {
                 if (currentIdx < questions.length - 1)
                     setCurrentIdx(currentIdx + 1);
@@ -473,20 +489,9 @@ export function createQuestionDialog(questions, signal) {
                     : theme.fg(firstUnanswered(states) === undefined ? "success" : "dim", " ✓ Submit "),
             ].join(" ");
             wrapWithPrefix(" ", tabs, renderWidth, lines);
-            lines.push("");
         }
-        function previewLines(previewText, width, terminalRows) {
-            const maxLines = Math.max(4, Math.min(PREVIEW_MAX_LINES, terminalRows - PREVIEW_CHROME_ROWS));
-            return previewCache.get(previewText, width, maxLines, () => {
-                const markdown = new Markdown(previewText, 1, 0, getMarkdownTheme());
-                const rendered = markdown.render(Math.max(1, width));
-                if (rendered.length <= maxLines)
-                    return rendered;
-                return [
-                    ...rendered.slice(0, maxLines),
-                    theme.fg("dim", truncateToWidth(`… ${rendered.length - maxLines} preview lines hidden`, Math.max(1, width))),
-                ];
-            });
+        function previewLines(previewText, width) {
+            return previewCache.get(previewText, width, () => new Markdown(previewText, 1, 0, getMarkdownTheme()).render(Math.max(1, width)));
         }
         /** Multi-select checkbox marker; the other row shows no box until a custom answer exists. */
         function multiMarker(option, checked, hasCustomAnswer) {
@@ -510,15 +515,90 @@ export function createQuestionDialog(questions, signal) {
             }
             wrapWithPrefix(" ", theme.fg("dim", joinHints(keyAction("tui.select.confirm", "submit"), keyAction("tui.select.cancel", "edit last question"), keyGroupAction(["tui.select.up", "tui.select.down"], "scroll"))), renderWidth, lines);
         }
+        /** Chat row, warning, and key hints: always visible below the scrolling option area. */
+        function renderQuestionFooter(renderWidth, digitRange) {
+            const state = currentState();
+            const isMulti = currentQuestion().multiSelect === true;
+            const lines = [];
+            const chatPrefix = footerFocused ? theme.fg("accent", "→") : " ";
+            wrapWithPrefix(`${chatPrefix} `, theme.fg(footerFocused ? "accent" : "text", "Chat about this"), renderWidth, lines);
+            if (state.warning) {
+                lines.push("");
+                wrapWithPrefix(" ", theme.fg("warning", state.warning), renderWidth, lines);
+            }
+            let hints;
+            if (inputMode === "notes") {
+                hints = joinHints(editorSubmitAction("save notes"), keyAction("tui.select.cancel", "back"));
+            }
+            else if (inputMode === "custom") {
+                hints = joinHints(editorSubmitAction(isMulti ? "save custom answer" : "continue"), keyAction("tui.select.cancel", "back"));
+            }
+            else if (footerFocused) {
+                hints = joinHints(keyAction("tui.select.confirm", "discuss"), keyAction("tui.select.up", "return to options"), keyAction("tui.select.cancel", "cancel"));
+            }
+            else if (isMulti) {
+                hints = joinHints(keyGroupAction(["tui.select.up", "tui.select.down"], "navigate"), `${digitRange} toggle`, keyAction("app.list.toggle", "toggle focused"), keyAction("tui.input.tab", "notes/custom"), keyAction("tui.select.confirm", "continue"), questions.length > 1
+                    ? keyGroupAction(["tui.editor.cursorLeft", "tui.editor.cursorRight"], "questions")
+                    : "", keyAction("tui.select.cancel", "cancel"));
+            }
+            else {
+                hints = joinHints(keyGroupAction(["tui.select.up", "tui.select.down"], "navigate"), `${digitRange} select`, keyAction("tui.input.tab", "notes/custom"), keyAction("tui.select.confirm", "select"), questions.length > 1
+                    ? keyGroupAction(["tui.editor.cursorLeft", "tui.editor.cursorRight"], "questions")
+                    : "", keyAction("tui.select.cancel", "cancel"));
+            }
+            // Wrap between actions, so a key stays beside the action it performs.
+            let hintLine = "";
+            for (const hint of hints.split(" • ")) {
+                const joined = hintLine ? `${hintLine} • ${hint}` : hint;
+                if (hintLine && visibleWidth(joined) > renderWidth - 1) {
+                    wrapWithPrefix(" ", theme.fg("dim", hintLine), renderWidth, lines);
+                    hintLine = hint;
+                }
+                else
+                    hintLine = joined;
+            }
+            if (hintLine)
+                wrapWithPrefix(" ", theme.fg("dim", hintLine), renderWidth, lines);
+            lines.push(ruleBorder(theme, renderWidth));
+            return lines;
+        }
+        /**
+         * Show whole items from `optionLines` in `rows` rows around `focus`, with
+         * "more options" hints on the sides that have hidden items. `focusRow` is the
+         * row of the focused item's first line.
+         */
+        function windowOptionLines(optionLines, items, focus, rows, width) {
+            const window = windowItems(items, focus, rows);
+            const rowsBefore = (count) => items.slice(0, count).reduce((sum, item) => sum + item.height, 0);
+            const from = rowsBefore(window.first);
+            const block = optionLines.slice(from, rowsBefore(window.last + 1));
+            const visible = applyVerticalViewport(block, width, window.contentRows, theme, {
+                anchorLine: Math.max(0, block.findIndex((line) => line.includes(CURSOR_MARKER))),
+            }).lines;
+            if (!window.showAbove && !window.showBelow)
+                return { rows: visible, focusRow: rowsBefore(focus) - from };
+            const hint = (direction, count) => theme.fg("dim", ` ${truncateToWidth(moreOptionsHint(direction, count), Math.max(1, width - 1))}`);
+            const spare = Array.from({ length: Math.max(0, window.contentRows - visible.length) }, () => "");
+            return {
+                rows: [
+                    ...(window.showAbove ? [hint("up", window.hiddenAbove)] : []),
+                    ...visible,
+                    ...(window.showBelow ? [hint("down", window.hiddenBelow)] : []),
+                    ...spare,
+                ],
+                focusRow: (window.showAbove ? 1 : 0) + rowsBefore(focus) - from,
+            };
+        }
         function compute(width, terminalRows) {
             const lines = [];
             const renderWidth = Math.max(1, width);
+            const maxRows = dialogRowBudget(terminalRows);
             lines.push(ruleBorder(theme, renderWidth));
             renderTabs(renderWidth, lines);
             if (view === "review") {
                 renderReview(renderWidth, lines);
                 lines.push(ruleBorder(theme, renderWidth));
-                const viewport = applyVerticalViewport(lines, renderWidth, terminalRows, theme, {
+                const viewport = applyVerticalViewport(lines, renderWidth, maxRows, theme, {
                     preferredStart: reviewScrollOffset,
                 });
                 reviewMaxScrollOffset = viewport.maxStart;
@@ -529,16 +609,20 @@ export function createQuestionDialog(questions, signal) {
             const state = currentState();
             const options = currentOptions();
             const isMulti = question.multiSelect === true;
-            const digitRange = `1-${Math.min(9, options.length)}`;
-            wrapWithPrefix(" ", `${theme.fg("accent", question.header)}  ${theme.fg("text", question.question)}`, renderWidth, lines);
-            lines.push("");
+            wrapWithPrefix(" ", theme.fg("text", question.question), renderWidth, lines);
+            // The pinned head and footer leave one bounded area for choices and reading.
+            const footerLines = renderQuestionFooter(renderWidth, `1-${Math.min(9, options.length)}`);
+            const areaRows = Math.max(1, maxRows - lines.length - footerLines.length);
+            const sideBySide = !inputMode && renderWidth >= 72;
+            // Measure every authored label, reserving the six-column prefix and a checkmark.
+            // Saved answers and focus changes must not move the divider or reflow the preview.
+            const listWidth = sideBySide
+                ? Math.min(Math.floor((renderWidth - 3) / 2), Math.max(24, ...options.map((option, index) => 6 + visibleWidth(`${index + 1}. ${option.label.replace(/\s+/gu, " ")}`) + 2)))
+                : renderWidth;
+            const detailWidth = sideBySide ? renderWidth - listWidth - 3 : renderWidth;
             const optionLines = [];
-            let focusedOptionStart = 0;
-            let focusedOptionEnd = 0;
-            let inputAnchorOffset;
-            const hasPreview = inputMode === undefined && !isMulti && options.some((option) => option.kind === "option" && option.preview);
-            const showPreviewSideBySide = hasPreview && renderWidth >= 60;
-            const listWidth = showPreviewSideBySide ? Math.max(20, Math.floor(renderWidth * 0.4)) : renderWidth;
+            const items = [];
+            let focusItem = footerFocused ? options.length - 1 : state.optionIndex;
             for (let index = 0; index < options.length; index++) {
                 const option = options[index];
                 const focused = !footerFocused && index === state.optionIndex;
@@ -556,91 +640,77 @@ export function createQuestionDialog(questions, signal) {
                     ? (state.customAnswer?.text ??
                         (state.singleAnswer?.kind === "custom" ? state.singleAnswer.answer : undefined))
                     : undefined;
-                const labelText = customText ? `${option.label}  ✎ ${customText}` : option.label;
+                const labelText = (customText ? `${option.label}  ✎ ${customText}` : option.label).replace(/\s+/gu, " ");
                 const label = `${index + 1}. ${labelText}${selectedSingle ? " ✓" : ""}${note}`;
                 const color = focused ? "accent" : selectedSingle || checked ? "success" : "text";
-                if (focused)
-                    focusedOptionStart = optionLines.length;
-                wrapWithPrefix(`${focusArrow} ${marker} `, theme.fg(color, label), listWidth, optionLines);
-                if (option.kind === "option" && option.description) {
-                    wrapWithPrefix("       ", theme.fg("muted", option.description), listWidth, optionLines);
-                }
-                if (focused)
-                    focusedOptionEnd = optionLines.length;
+                const row = truncateToWidth(`${focusArrow} ${marker} ${theme.fg(color, label)}`, listWidth);
+                optionLines.push(focused ? theme.bg("selectedBg", row + " ".repeat(Math.max(0, listWidth - visibleWidth(row)))) : row);
+                items.push({ height: 1, countsAsOption: true });
             }
             if (inputMode) {
-                optionLines.push("");
+                const start = optionLines.length;
                 const label = inputMode === "notes" ? `Notes for ${noteTarget ?? "option"}:` : "Your answer:";
-                wrapWithPrefix(" ", theme.fg("muted", label), listWidth, optionLines);
+                optionLines.push(theme.fg("muted", truncateToWidth(` ${label}`, listWidth)));
                 for (const line of editor.render(Math.max(1, listWidth - 2)))
                     optionLines.push(` ${line}`);
-                inputAnchorOffset = Math.max(0, optionLines.length - 1);
-            }
-            const optionListStartLine = lines.length;
-            if (showPreviewSideBySide) {
-                const gap = 2;
-                const rightWidth = renderWidth - listWidth - gap;
-                const focused = options[state.optionIndex];
-                const previewText = focused?.kind === "option" && focused.preview ? focused.preview : "";
-                const preview = previewText
-                    ? previewLines(previewText, rightWidth, terminalRows)
-                    : [theme.fg("dim", "(no preview)")];
-                const rightLines = [...Array.from({ length: focusedOptionStart }, () => ""), ...preview];
-                const maxRows = Math.max(optionLines.length, rightLines.length);
-                const pad = " ".repeat(gap);
-                for (let row = 0; row < maxRows; row++) {
-                    const left = row < optionLines.length ? optionLines[row] : "";
-                    const leftPadded = left + " ".repeat(Math.max(0, listWidth - visibleWidth(left)));
-                    const right = row < rightLines.length ? rightLines[row] : "";
-                    lines.push(`${leftPadded}${pad}${right}`);
-                }
+                items.push({ height: optionLines.length - start, countsAsOption: false });
+                focusItem = items.length - 1;
+            }
+            const regionStart = lines.length;
+            let focusRow;
+            if (inputMode) {
+                const windowed = windowOptionLines(optionLines, items, focusItem, areaRows, renderWidth);
+                focusRow = windowed.focusRow;
+                lines.push(...windowed.rows);
             }
             else {
-                if (hasPreview) {
-                    const focused = options[state.optionIndex];
-                    const previewText = focused?.kind === "option" && focused.preview ? focused.preview : "";
-                    if (previewText) {
-                        optionLines.splice(focusedOptionEnd, 0, "", ruleBorder(theme, renderWidth, "dim"), ...previewLines(previewText, renderWidth, terminalRows));
+                const option = options[state.optionIndex];
+                const content = [];
+                const hasPreview = !footerFocused && !isMulti && option.kind === "option" && Boolean(option.preview);
+                const title = footerFocused ? "Chat about this" : `${hasPreview ? "Preview" : "Details"} · ${option.label}`;
+                // The compact list may elide a long label; its full text stays readable here.
+                if (!footerFocused &&
+                    visibleWidth(`${state.optionIndex + 1}. ${option.label.replace(/\s+/gu, " ")}`) > listWidth - 6) {
+                    wrapWithPrefix(" ", theme.fg("text", option.label), detailWidth, content);
+                }
+                if (footerFocused) {
+                    wrapWithPrefix(" ", theme.fg("muted", "Discuss this question before choosing an answer."), detailWidth, content);
+                }
+                else if (option.kind === "option") {
+                    wrapWithPrefix(" ", theme.fg("muted", option.description), detailWidth, content);
+                    const note = state.notesByOption.get(option.label);
+                    if (note)
+                        wrapWithPrefix(" ", theme.fg("success", `Note: ${note}`), detailWidth, content);
+                    if (hasPreview && option.preview)
+                        content.push("", ...previewLines(option.preview, detailWidth));
+                }
+                else {
+                    const custom = state.customAnswer?.text ??
+                        (state.singleAnswer?.kind === "custom" ? state.singleAnswer.answer : undefined);
+                    wrapWithPrefix(" ", theme.fg("muted", custom || "Write your own answer instead of choosing an option."), detailWidth, content);
+                }
+                // On narrow screens reserve reading space first, then show as many compact
+                // choices as fit. The focused choice always remains in the list window.
+                const optionRows = sideBySide ? areaRows : Math.max(1, Math.min(options.length, areaRows - 4));
+                const detailRows = sideBySide ? areaRows : Math.max(1, areaRows - optionRows);
+                const left = windowOptionLines(optionLines, items, focusItem, optionRows, listWidth);
+                const right = details.render(`${currentIdx}:${state.optionIndex}:${footerFocused}`, title, content, detailWidth, detailRows, keyGroupAction(["app.question.pageUp", "app.question.pageDown"], "scroll"), theme);
+                focusRow = left.focusRow;
+                if (sideBySide) {
+                    for (let row = 0; row < Math.max(left.rows.length, right.length); row++) {
+                        const leftText = left.rows[row] ?? "";
+                        const leftPadded = leftText + " ".repeat(Math.max(0, listWidth - visibleWidth(leftText)));
+                        lines.push(`${leftPadded}${theme.fg("dim", " │ ")}${right[row] ?? ""}`);
                     }
                 }
-                lines.push(...optionLines);
-            }
-            lines.push("");
-            const chatLine = lines.length;
-            const chatPrefix = footerFocused ? theme.fg("accent", "→") : " ";
-            wrapWithPrefix(`${chatPrefix} `, theme.fg(footerFocused ? "accent" : "text", "Chat about this"), renderWidth, lines);
-            let warningLine;
-            if (state.warning) {
-                lines.push("");
-                warningLine = lines.length;
-                wrapWithPrefix(" ", theme.fg("warning", state.warning), renderWidth, lines);
-            }
-            lines.push("");
-            if (inputMode === "notes") {
-                wrapWithPrefix(" ", theme.fg("dim", joinHints(editorSubmitAction("save notes"), keyAction("tui.select.cancel", "back"))), renderWidth, lines);
-            }
-            else if (inputMode === "custom") {
-                const hint = isMulti ? "save custom answer" : "continue";
-                wrapWithPrefix(" ", theme.fg("dim", joinHints(editorSubmitAction(hint), keyAction("tui.select.cancel", "back"))), renderWidth, lines);
-            }
-            else if (footerFocused) {
-                wrapWithPrefix(" ", theme.fg("dim", joinHints(keyAction("tui.select.confirm", "discuss"), keyAction("tui.select.up", "return to options"), keyAction("tui.select.cancel", "cancel"))), renderWidth, lines);
-            }
-            else if (isMulti) {
-                wrapWithPrefix(" ", theme.fg("dim", joinHints(`${digitRange} toggle`, keyAction("app.list.toggle", "toggle focused"), keyAction("tui.input.tab", "notes/custom"), keyAction("tui.select.confirm", "continue"), keyGroupAction(["tui.editor.cursorLeft", "tui.editor.cursorRight"], "questions"), keyAction("tui.select.cancel", "cancel"))), renderWidth, lines);
-            }
-            else {
-                wrapWithPrefix(" ", theme.fg("dim", joinHints(`${digitRange} select`, keyAction("tui.input.tab", "notes/custom"), keyAction("tui.select.confirm", "select"), keyGroupAction(["tui.editor.cursorLeft", "tui.editor.cursorRight"], "questions"), keyAction("tui.select.cancel", "cancel"))), renderWidth, lines);
+                else {
+                    lines.push(...left.rows, ...right);
+                }
             }
-            lines.push(ruleBorder(theme, renderWidth));
-            let anchorLine = optionListStartLine + focusedOptionStart;
-            if (inputAnchorOffset !== undefined)
-                anchorLine = optionListStartLine + inputAnchorOffset;
-            else if (warningLine !== undefined)
-                anchorLine = warningLine;
-            else if (footerFocused)
-                anchorLine = chatLine;
-            return applyVerticalViewport(lines, renderWidth, terminalRows, theme, { anchorLine }).lines;
+            const anchorLine = regionStart + focusRow;
+            lines.push(...footerLines);
+            // Only a terminal too short for the pinned rows has lines left to drop here.
+            return applyVerticalViewport(lines, renderWidth, maxRows, theme, { anchorLine }).lines;
         }
         return {
             get focused() {