@zergai/ztc 0.2.6-dev.36101352252 → 0.2.7-dev.36236183737

package/dist/ui/widgets/questionnaire.js

@@ -5,8 +5,10 @@
  */
 import { displayWidth, sanitizeTerminalText } from '../core/text_width.js';
 import { isControlKey } from '../core/input.js';
+import { backspace, createEmptyState, deleteForward, deleteWordBackward, deleteWordForward, getPlainText, insertText, killToLineEnd, killToLineStart, moveLeft, moveRight, moveToEnd, moveToLineEnd, moveToLineStart, moveToStart, moveVertical, moveWordLeft, moveWordRight, } from '../core/input_segments.js';
 import { box, text } from '../core/index.js';
 import { TERMINAL_THEME } from '../views/theme.js';
+import { renderLineWithCursorTokens, wrapInputSegments } from '../views/input_area.js';
 import { bottomBorder, framedLine, lineText, topBorder, } from './panel_frame.js';
 const graphemes = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 const RAW_DELETE_INPUT = new Set(['\x7f', '\b', '\x08']);
@@ -97,6 +99,8 @@ export class QuestionnaireWidget {
     otherMode = false;
     otherValue = '';
     textValues = {};
+    optionNotes = new Map();
+    editingOptionNote = false;
     constructor(host) {
         this.host = host;
     }
@@ -116,6 +120,8 @@ export class QuestionnaireWidget {
         this.otherMode = false;
         this.otherValue = '';
         this.textValues = {};
+        this.optionNotes.clear();
+        this.editingOptionNote = false;
         // Pre-fill defaults
         for (let i = 0; i < data.questions.length; i++) {
             const q = data.questions[i];
@@ -146,6 +152,8 @@ export class QuestionnaireWidget {
         this.otherMode = false;
         this.otherValue = '';
         this.textValues = {};
+        this.optionNotes.clear();
+        this.editingOptionNote = false;
     }
     isActive() {
         return this.active !== null;
@@ -160,7 +168,8 @@ export class QuestionnaireWidget {
             const answeredIndex = question.options.findIndex((option) => option.value === answer);
             this.optionIndex = answeredIndex >= 0
                 ? answeredIndex
-                : (this.active.allowOther ? question.options.length : 0);
+                : (this.active.allowOther && !(this.active.allowOptionNotes && question.type === 'select')
+                    ? question.options.length : 0);
         }
         else {
             // Unanswered question: land on the recommended option when the agent
@@ -169,6 +178,34 @@ export class QuestionnaireWidget {
         }
         this.otherMode = false;
         this.otherValue = '';
+        this.editingOptionNote = false;
+    }
+    getOptionNote() {
+        return this.optionNotes.get(this.tabIndex) ?? createEmptyState();
+    }
+    setOptionNote(state) {
+        this.optionNotes.set(this.tabIndex, state);
+        this.host.render();
+    }
+    selectHighlightedOption(question) {
+        const option = question.options?.[this.optionIndex];
+        if (option)
+            this.answers[question.name] = option.value;
+    }
+    saveOptionNotes() {
+        if (!this.active?.allowOptionNotes)
+            return;
+        this.active.questions.forEach((question, index) => {
+            if (question.type !== 'select')
+                return;
+            const note = getPlainText((this.optionNotes.get(index) ?? createEmptyState()).segments);
+            // A note cleared after a failed submit must not resurface from the
+            // earlier attempt.
+            if (note.trim())
+                this.answers[`${question.name}_note`] = note;
+            else
+                delete this.answers[`${question.name}_note`];
+        });
     }
     submitAnswers() {
         if (!this.active)
@@ -184,6 +221,7 @@ export class QuestionnaireWidget {
             else
                 delete this.answers[question.name];
         }
+        this.saveOptionNotes();
         const firstMissing = questions.findIndex(question => question.required === true && !this.answers[question.name]);
         if (firstMissing >= 0) {
             this.host.setToast(`"${questions[firstMissing].question}" is required`, 3000);
@@ -242,12 +280,101 @@ export class QuestionnaireWidget {
         }
         return null;
     }
+    handleOptionNoteInput(input, key, question) {
+        if (!this.active?.allowOptionNotes || question.type !== 'select')
+            return false;
+        if (isControlKey(input, key, 'c')) {
+            const callback = this.active.callback;
+            this.cancel();
+            this.host.render();
+            void Promise.resolve(callback(null)).catch(() => { });
+            return true;
+        }
+        if (!this.editingOptionNote) {
+            // A printable key starts the note for the highlighted option. Letter
+            // shortcuts must not steal the first character of the user's prose.
+            if (input && !key.ctrl && !key.meta && !key.escape && !key.return && !key.tab
+                && !key.backspace && !key.delete && !key.upArrow && !key.downArrow
+                && !key.leftArrow && !key.rightArrow && !key.home && !key.end
+                && !/^[\x00-\x1f\x7f]$/.test(input)) {
+                this.selectHighlightedOption(question);
+                this.editingOptionNote = true;
+                this.setOptionNote(insertText(this.getOptionNote(), input.replace(/\r\n?/g, '\n')));
+                return true;
+            }
+            return false;
+        }
+        if (key.escape) {
+            this.editingOptionNote = false;
+            this.host.render();
+            return true;
+        }
+        if (key.return) {
+            if (key.shift) {
+                this.setOptionNote(insertText(this.getOptionNote(), '\n'));
+            }
+            else {
+                this.selectHighlightedOption(question);
+                this.editingOptionNote = false;
+                this.advanceOrSubmit();
+            }
+            return true;
+        }
+        if (key.tab) {
+            this.editingOptionNote = false;
+            this.goToQuestion((this.tabIndex + 1) % this.active.questions.length);
+            this.host.render();
+            return true;
+        }
+        const state = this.getOptionNote();
+        if ((key.meta && RAW_DELETE_INPUT.has(input)) || isControlKey(input, key, 'w')
+            || (key.backspace && (key.meta || key.ctrl))) {
+            this.setOptionNote(deleteWordBackward(state));
+        }
+        else if (key.backspace) {
+            this.setOptionNote(backspace(state));
+        }
+        else if (key.delete && (key.meta || key.ctrl)) {
+            this.setOptionNote(deleteWordForward(state));
+        }
+        else if (key.delete) {
+            this.setOptionNote(deleteForward(state));
+        }
+        else if (key.leftArrow) {
+            this.setOptionNote(key.meta || key.ctrl ? moveWordLeft(state) : moveLeft(state));
+        }
+        else if (key.rightArrow) {
+            this.setOptionNote(key.meta || key.ctrl ? moveWordRight(state) : moveRight(state));
+        }
+        else if (key.upArrow || key.downArrow) {
+            this.setOptionNote(moveVertical(state, key.upArrow ? -1 : 1).state);
+        }
+        else if (key.home || isControlKey(input, key, 'a')) {
+            this.setOptionNote(key.meta ? moveToStart(state) : moveToLineStart(state));
+        }
+        else if (key.end || isControlKey(input, key, 'e')) {
+            this.setOptionNote(key.meta ? moveToEnd(state) : moveToLineEnd(state));
+        }
+        else if (isControlKey(input, key, 'u')) {
+            this.setOptionNote(killToLineStart(state).state);
+        }
+        else if (isControlKey(input, key, 'k')) {
+            this.setOptionNote(killToLineEnd(state).state);
+        }
+        else if (input && !key.ctrl && !key.meta && !/^[\x00-\x1f\x7f]$/.test(input)) {
+            // Multi-character paste is one insertion, including its newlines.
+            this.setOptionNote(insertText(state, input.replace(/\r\n?/g, '\n')));
+        }
+        return true;
+    }
     handleInput(input, key) {
         if (!this.active)
             return;
         const questions = this.active.questions;
         const totalTabs = questions.length;
         const currentQ = questions[this.tabIndex];
+        if (currentQ && this.handleOptionNoteInput(input, key, currentQ))
+            return;
         // If in "Other" text input mode for select/multiselect
         if (this.otherMode && currentQ) {
             if (key.escape) {
@@ -407,7 +534,8 @@ export class QuestionnaireWidget {
         // Navigate options within current question tab: Up/Down
         if (currentQ && (currentQ.type === 'select' || currentQ.type === 'multiselect')) {
             const opts = currentQ.options || [];
-            const totalOpts = opts.length + (this.active.allowOther ? 1 : 0);
+            const totalOpts = opts.length + (this.active.allowOther
+                && !(this.active.allowOptionNotes && currentQ.type === 'select') ? 1 : 0);
             if (key.upArrow || input === 'k') {
                 this.optionIndex = Math.max(0, this.optionIndex - 1);
                 this.host.render();
@@ -441,7 +569,8 @@ export class QuestionnaireWidget {
             if (key.return) {
                 const idx = this.optionIndex;
                 // "Other" option
-                if (this.active.allowOther && idx === opts.length) {
+                if (this.active.allowOther && !(this.active.allowOptionNotes && currentQ.type === 'select')
+                    && idx === opts.length) {
                     this.otherMode = true;
                     this.otherValue = '';
                     this.host.render();
@@ -465,7 +594,7 @@ export class QuestionnaireWidget {
             // printable character auto-jumps to Other with that character
             // already captured in `otherValue`. See the analogous block in
             // select.ts for the detailed rationale.
-            if (this.active.allowOther &&
+            if (this.active.allowOther && !this.active.allowOptionNotes &&
                 currentQ.type === 'select' &&
                 !this.otherMode &&
                 input &&
@@ -502,7 +631,7 @@ export class QuestionnaireWidget {
     buildSurface(cols, maxRows) {
         if (!this.active)
             return { content: '', view: box([], {}), lineCount: 0 };
-        const { title, questions, allowOther } = this.active;
+        const { title, questions, allowOther, allowOptionNotes } = this.active;
         const question = questions[this.tabIndex];
         if (!question)
             return { content: '', view: box([], {}), lineCount: 0 };
@@ -541,9 +670,29 @@ export class QuestionnaireWidget {
             progress.push({ text: ` · ${question.header}`, style: { color: TERMINAL_THEME.subtle } });
         }
         lines.push(framed(progress));
-        const questionLines = wrapText(question.question, innerWidth, 2);
+        // One content column for the whole card. The question, every option label,
+        // and every description start at this same column; the selection caret,
+        // number, and state marker are outdented into the gutter to its left. Lining
+        // them up separately made the card read as ragged (labels at 7, descriptions
+        // at 3, the question at 0).
+        // Size the outgoing gutter to the widest option prefix this question renders
+        // (`› 12. ○ ` is one cell wider than `› 1. ○ `), so the question text and
+        // every option label land on the same column.
+        // Mirror the exact option gutter, including its marker width: a multiselect
+        // checkbox (`[✓]`) is two cells wider than the select radio (`○`), so a
+        // hardcoded radio here put the question one column off its own labels.
+        const optionCount = question.options?.length ?? 1;
+        const widestIndex = allowOther ? optionCount + 1 : optionCount;
+        const numberWidth = String(Math.max(1, widestIndex)).length;
+        const markerWidth = question.type === 'multiselect' ? displayWidth('[✓]') : displayWidth('○');
+        // caret + space + (padded number) + space + marker + space
+        const gutter = ' '.repeat(displayWidth('› ') + numberWidth + 1 + 1 + markerWidth + 1);
+        const questionLines = wrapText(question.question, innerWidth - gutter.length, 2);
         for (const questionLine of questionLines) {
-            lines.push(framed([{ text: questionLine, style: { color: TERMINAL_THEME.text, bold: true } }]));
+            lines.push(framed([
+                { text: gutter },
+                { text: questionLine, style: { color: TERMINAL_THEME.text, bold: true } },
+            ]));
         }
         // The box is sized to the question it renders (capped by the caller's
         // budget). Filling the whole budget left the transcript hidden behind a
@@ -616,14 +765,19 @@ export class QuestionnaireWidget {
                     ? (chosen ? '[✓]' : '[ ]')
                     : (chosen ? '●' : '○');
                 const badge = option.recommended ? ' ★ recommended' : '';
-                const prefix = `${highlighted ? '›' : ' '} ${index + 1}. ${marker} `;
+                // Gutter = caret + number + marker, then the content column. The number is
+                // padded to the widest index in this question so `10.` does not step one
+                // cell right of `1.`: the label column must be identical for every row.
+                const numberWidth = String(Math.max(1, options.length)).length;
+                const indexLabel = `${index + 1}.`.padStart(numberWidth + 1);
+                const prefix = `${highlighted ? '›' : ' '} ${indexLabel} ${marker} `;
                 const labelWidth = Math.max(1, innerWidth - displayWidth(prefix) - displayWidth(badge));
                 const row = [
                     {
                         text: highlighted ? '›' : ' ',
                         style: highlighted ? { color: TERMINAL_THEME.info, bold: true } : undefined,
                     },
-                    { text: ` ${index + 1}. `, style: { color: TERMINAL_THEME.subtle } },
+                    { text: ` ${indexLabel} `, style: { color: TERMINAL_THEME.subtle } },
                     {
                         text: marker,
                         style: chosen
@@ -642,26 +796,29 @@ export class QuestionnaireWidget {
                     // reading to choose between options. The row budget decides how much
                     // of the option LIST is visible; it never cuts the highlighted
                     // description short.
-                    const descriptionWidth = Math.max(1, innerWidth - 3);
+                    // Same content column as the label above and the question at the top.
+                    const descriptionWidth = Math.max(1, innerWidth - displayWidth(prefix));
                     for (const line of wrapText(option.description, descriptionWidth, Number.MAX_SAFE_INTEGER)) {
                         rows.push(framed([
-                            { text: '   ' },
+                            { text: ' '.repeat(displayWidth(prefix)) },
                             { text: line, style: { color: TERMINAL_THEME.muted, dimColor: true } },
                         ], TERMINAL_THEME.bgElevated));
                     }
                 }
                 return { rows };
             });
-            if (allowOther) {
+            if (allowOther && !(allowOptionNotes && question.type === 'select')) {
                 const otherIndex = options.length;
                 const highlighted = this.optionIndex === otherIndex;
-                const prefix = `${highlighted ? '›' : ' '} ${otherIndex + 1}. ○ `;
+                const numberWidth = String(Math.max(1, otherIndex + 1)).length;
+                const indexLabel = `${otherIndex + 1}.`.padStart(numberWidth + 1);
+                const prefix = `${highlighted ? '›' : ' '} ${indexLabel} ○ `;
                 const rows = [framed([
                         {
                             text: highlighted ? '›' : ' ',
                             style: highlighted ? { color: TERMINAL_THEME.info, bold: true } : undefined,
                         },
-                        { text: ` ${otherIndex + 1}. `, style: { color: TERMINAL_THEME.subtle } },
+                        { text: ` ${indexLabel} `, style: { color: TERMINAL_THEME.subtle } },
                         { text: '○', style: { color: TERMINAL_THEME.muted } },
                         { text: ' ' },
                         {
@@ -670,19 +827,55 @@ export class QuestionnaireWidget {
                         },
                     ], highlighted ? TERMINAL_THEME.bgElevated : undefined)];
                 if (highlighted) {
+                    // Same content column as the option labels above.
                     rows.push(framed([
-                        { text: '   ' },
+                        { text: ' '.repeat(displayWidth(prefix)) },
                         { text: 'Enter a custom answer.', style: { color: TERMINAL_THEME.muted, dimColor: true } },
                     ], TERMINAL_THEME.bgElevated));
                 }
                 blocks.push({ rows });
             }
+            const noteEnabled = allowOptionNotes && question.type === 'select';
+            const noteEditorRows = noteEnabled
+                ? bodyRows >= 3 ? Math.min(5, bodyRows - 2)
+                    : this.editingOptionNote ? bodyRows : 0
+                : 0;
+            const noteLabelRows = noteEditorRows > 0 && bodyRows >= 3 ? 1 : 0;
+            const optionRows = bodyRows - noteEditorRows - noteLabelRows;
             const selectedBlock = Math.min(this.optionIndex, Math.max(0, blocks.length - 1));
-            const window = windowOptionBlocks(blocks, bodyRows, selectedBlock);
+            const window = windowOptionBlocks(blocks, optionRows, selectedBlock);
             body.push(...window.rows);
             if (blocks.length > 0 && (window.start > 0 || window.end < blocks.length - 1)) {
                 optionPosition = `option ${selectedBlock + 1}/${blocks.length}`;
             }
+            if (noteEditorRows > 0) {
+                if (noteLabelRows > 0) {
+                    body.push(framed([{ text: 'Additional context (optional)', style: { color: TERMINAL_THEME.info, bold: true } }]));
+                }
+                const note = this.getOptionNote();
+                const wrapped = wrapInputSegments(note.segments, note.cursor, innerWidth, 2);
+                const firstLine = this.editingOptionNote
+                    ? Math.max(0, wrapped.cursorLine - noteEditorRows + 1)
+                    : Math.max(0, wrapped.lines.length - noteEditorRows);
+                const visible = wrapped.lines.slice(firstLine, firstLine + noteEditorRows);
+                const lastLine = firstLine + visible.length;
+                visible.forEach((line, index) => {
+                    const sourceLine = firstLine + index;
+                    const prefix = sourceLine === 0 ? '❯ '
+                        : index === 0 && firstLine > 0 ? '↥ '
+                            : sourceLine === lastLine - 1 && lastLine < wrapped.lines.length ? '↧ ' : '  ';
+                    const segments = [
+                        { text: prefix, style: { color: TERMINAL_THEME.info, bold: true } },
+                    ];
+                    if (note.segments.length === 0 && !this.editingOptionNote) {
+                        segments.push({ text: 'Type to add a note', style: { color: TERMINAL_THEME.subtle } });
+                    }
+                    else {
+                        segments.push(...renderLineWithCursorTokens(line, wrapped.cursorCol, this.editingOptionNote && sourceLine === wrapped.cursorLine).map(token => ({ text: token.text, style: token.style })));
+                    }
+                    body.push(framed(segments));
+                });
+            }
         }
         if (spacerRows > 0)
             lines.push(blank());
@@ -699,6 +892,11 @@ export class QuestionnaireWidget {
         else if (question.type === 'text') {
             hint = `${isLast ? 'Enter submit' : 'Enter next'} · ←/→ questions · Esc cancel`;
         }
+        else if (allowOptionNotes && question.type === 'select') {
+            hint = this.editingOptionNote
+                ? `Enter ${isLast ? 'submit' : 'next'} · Shift+Enter newline · Esc options`
+                : `↑↓ options · Type note · Enter ${isLast ? 'submit' : 'next'} · Esc cancel`;
+        }
         else if (question.type === 'multiselect') {
             hint = `↑↓ move · Space toggle · ${isLast ? 'Enter submit' : 'Enter next'} · Esc cancel`;
         }

package/dist/ui/widgets/resume_panel.d.ts

@@ -88,6 +88,15 @@ export declare class ResumePanelWidget {
     private previewViewportRows;
     private lastBodyRows;
     private lastInnerWidth;
+    /**
+     * Column the painted frame starts on, in surface coordinates.
+     *
+     * Zero unless the terminal is wide enough to trigger the shared cap, in which
+     * case it is that centring margin. The wheel bands add it back: a notch lands
+     * in terminal columns, so without it a capped page would scroll from a pane
+     * that is no longer under the pointer.
+     */
+    private frameInset;
     /** Pane geometry from the last paint; see `panelSplit()`. */
     private lastSplit;
     private loading;

package/dist/ui/widgets/resume_panel.js

@@ -14,12 +14,11 @@
  * row: moving the selection reloads the transcript preview, and the row itself
  * grows a one-line snippet under it.
  */
-import { box, text } from '../core/index.js';
 import { displayWidth, padEndDisplay } from '../core/text_width.js';
 import { TERMINAL_THEME } from '../views/theme.js';
 import { fuzzyMatch, rankFuzzy } from '../../utils/fuzzy_match.js';
 import { buildTranscriptLines, messageLines as renderMessageLines, previewSnippet, transcriptHeaderText, windowedLines, TRANSCRIPT_PANE_MIN_BODY_ROWS, TRANSCRIPT_PANE_MIN_WIDTH, } from './transcript_preview.js';
-import { bodyBand, bottomBorder, clipText, dropLastGrapheme, fitSegments, formatRelativeTime, framedLine, isInsideBand, joinColumns, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, WHEEL_LINES, } from './panel_frame.js';
+import { bodyBand, bottomBorder, clipText, dropLastGrapheme, fitSegments, formatRelativeTime, framedLine, isInsideBand, joinColumns, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, WHEEL_LINES, buildWidgetFrameView, widgetFrameGeometry, } from './panel_frame.js';
 export { formatRelativeTime };
 const TAB_LABELS = {
     workspace: 'This workspace',
@@ -61,6 +60,15 @@ export class ResumePanelWidget {
     previewViewportRows = 1;
     lastBodyRows = 1;
     lastInnerWidth = 78;
+    /**
+     * Column the painted frame starts on, in surface coordinates.
+     *
+     * Zero unless the terminal is wide enough to trigger the shared cap, in which
+     * case it is that centring margin. The wheel bands add it back: a notch lands
+     * in terminal columns, so without it a capped page would scroll from a pane
+     * that is no longer under the pointer.
+     */
+    frameInset = 0;
     /** Pane geometry from the last paint; see `panelSplit()`. */
     lastSplit = null;
     loading = false;
@@ -661,6 +669,8 @@ export class ResumePanelWidget {
             scroll: this.previewScroll,
             viewportRows: this.previewViewportRows,
             focused: this.focus === 'preview',
+            // One cell of the heading's column is the gutter between the two panes.
+            maxWidth: Math.max(8, this.previewPaneWidth() - 1),
         });
     }
     /** The bubble list for the highlighted row, cached by (row, width, status). */
@@ -742,17 +752,7 @@ export class ResumePanelWidget {
         const lines = this.buildSurfaceLines(cols, maxRows);
         return {
             content: lines.map(lineText).join('\n'),
-            view: box(lines.map(line => box(line.segments.map(segment => text(segment.text, segment.style)), {
-                flexDirection: 'row',
-                height: 1,
-                flexShrink: 0,
-                backgroundColor: line.backgroundColor,
-            })), {
-                flexDirection: 'column',
-                height: lines.length,
-                flexShrink: 0,
-                backgroundColor: TERMINAL_THEME.bg,
-            }),
+            view: buildWidgetFrameView(lines, this.frameInset),
             lineCount: lines.length,
         };
     }
@@ -768,7 +768,8 @@ export class ResumePanelWidget {
         // The host embeds the surface in a `paddingX: 1` column, so `cols - 2` is
         // the full usable width. No cap: the transcript pane should absorb every
         // extra column instead of leaving dead space on wide terminals.
-        const width = Math.max(1, termCols - 2);
+        const { width, inset } = widgetFrameGeometry(termCols);
+        this.frameInset = inset;
         const height = Math.max(1, Math.floor(maxRows ?? 20));
         const innerWidth = Math.max(0, width - 4);
         this.lastInnerWidth = innerWidth;
@@ -809,7 +810,7 @@ export class ResumePanelWidget {
                 lines.push(framedLine(row ? row.segments : [], width));
             }
             // No transcript pane at this size, so only the list is a wheel target.
-            this.listBand = bodyBand(listTop, lines.length - 1, innerWidth);
+            this.listBand = bodyBand(listTop, lines.length - 1, innerWidth, this.frameInset);
             this.previewBand = null;
         }
         else if (split.placement === 'bottom') {
@@ -846,7 +847,7 @@ export class ResumePanelWidget {
                 lines.push(framedLine(previewRow ? previewRow.segments : [], width));
             }
             // Stacked, the panes share the width and are told apart by rows.
-            const bands = stackedBands({ top: stackedListTop, bottom: stackedListBottom }, { top: stackedPreviewTop, bottom: lines.length - 1 }, innerWidth);
+            const bands = stackedBands({ top: stackedListTop, bottom: stackedListBottom }, { top: stackedPreviewTop, bottom: lines.length - 1 }, innerWidth, this.frameInset);
             this.listBand = bands.list;
             this.previewBand = bands.preview;
         }
@@ -888,7 +889,7 @@ export class ResumePanelWidget {
                 ], width));
             }
             // Both panes start at the shared heading row and differ only in columns.
-            const bands = sideBySideBands(sideBandTop, lines.length - 1, listWidth, paneWidth);
+            const bands = sideBySideBands(sideBandTop, lines.length - 1, listWidth, paneWidth, this.frameInset);
             this.listBand = bands.list;
             this.previewBand = bands.preview;
         }

package/dist/ui/widgets/rewind_panel.d.ts

@@ -37,6 +37,15 @@ export interface RewindPanelSurface {
 export declare class RewindPanelWidget {
     private host;
     private active;
+    /**
+     * Column the painted frame starts on, in surface coordinates.
+     *
+     * Zero unless the terminal is wide enough to trigger the shared cap, in which
+     * case it is that centring margin. The wheel bands add it back: a notch lands
+     * in terminal columns, so without it a capped page would scroll from a pane
+     * that is no longer under the pointer.
+     */
+    private frameInset;
     private selectedIndex;
     private focus;
     /** First preview line to draw; only read when `previewAtTail` is false. */

package/dist/ui/widgets/rewind_panel.js

@@ -18,10 +18,9 @@
  * handling, and renders a framed surface. Only the visible window of prompts is
  * built, and the selection always stays inside it.
  */
-import { box, text } from '../core/index.js';
 import { padEndDisplay } from '../core/text_width.js';
 import { TERMINAL_THEME } from '../views/theme.js';
-import { bottomBorder, clipText, fitSegments, formatRelativeTime, framedLine, isInsideBand, joinColumns, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, WHEEL_LINES, } from './panel_frame.js';
+import { bottomBorder, clipText, fitSegments, formatRelativeTime, framedLine, isInsideBand, joinColumns, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, WHEEL_LINES, buildWidgetFrameView, widgetFrameGeometry, } from './panel_frame.js';
 import { buildBubbleLines } from './transcript_preview.js';
 /** Rows each entry claims in the list (prompt line + detail line). */
 const ENTRY_ROWS = 2;
@@ -65,6 +64,15 @@ function isCtrlKey(input, key, letter) {
 export class RewindPanelWidget {
     host;
     active = null;
+    /**
+     * Column the painted frame starts on, in surface coordinates.
+     *
+     * Zero unless the terminal is wide enough to trigger the shared cap, in which
+     * case it is that centring margin. The wheel bands add it back: a notch lands
+     * in terminal columns, so without it a capped page would scroll from a pane
+     * that is no longer under the pointer.
+     */
+    frameInset = 0;
     selectedIndex = 0;
     focus = 'list';
     /** First preview line to draw; only read when `previewAtTail` is false. */
@@ -264,17 +272,7 @@ export class RewindPanelWidget {
         const lines = this.buildSurfaceLines(cols, maxRows);
         return {
             content: lines.map(lineText).join('\n'),
-            view: box(lines.map(line => box(line.segments.map(segment => text(segment.text, segment.style)), {
-                flexDirection: 'row',
-                height: 1,
-                flexShrink: 0,
-                backgroundColor: line.backgroundColor,
-            })), {
-                flexDirection: 'column',
-                height: lines.length,
-                flexShrink: 0,
-                backgroundColor: TERMINAL_THEME.bg,
-            }),
+            view: buildWidgetFrameView(lines, this.frameInset),
             lineCount: lines.length,
         };
     }
@@ -289,7 +287,8 @@ export class RewindPanelWidget {
         const termCols = Math.max(1, Math.floor(cols || process.stdout.columns || 80));
         // The host embeds the surface in a `paddingX: 1` column, so `cols - 2` is
         // the usable width, same convention as the resume panel.
-        const width = Math.max(1, termCols - 2);
+        const { width, inset } = widgetFrameGeometry(termCols);
+        this.frameInset = inset;
         const height = Math.max(1, Math.floor(maxRows ?? 20));
         const innerWidth = Math.max(0, width - 4);
         const nowMs = this.active.now ? this.active.now() : Date.now();
@@ -353,7 +352,7 @@ export class RewindPanelWidget {
                     ...fitSegments(previewRow?.segments ?? [], previewWidth),
                 ], width));
             }
-            this.paneBands = sideBySideBands(sideBandTop, lines.length - 1, split.listWidth, previewWidth);
+            this.paneBands = sideBySideBands(sideBandTop, lines.length - 1, split.listWidth, previewWidth, this.frameInset);
         }
         else if (split.placement === 'bottom') {
             this.pushPaneHeader(lines, width, [{
@@ -377,7 +376,7 @@ export class RewindPanelWidget {
             for (let index = 0; index < split.previewRows; index += 1) {
                 lines.push(framedLine(previewRows[index]?.segments ?? [], width));
             }
-            this.paneBands = stackedBands({ top: stackedListTop, bottom: stackedListBottom }, { top: stackedPreviewTop, bottom: lines.length - 1 }, innerWidth);
+            this.paneBands = stackedBands({ top: stackedListTop, bottom: stackedListBottom }, { top: stackedPreviewTop, bottom: lines.length - 1 }, innerWidth, this.frameInset);
         }
         else {
             this.pushPaneHeader(lines, width, [{

package/dist/ui/widgets/select.d.ts

@@ -30,6 +30,12 @@ export declare class SelectWidget {
     private checked;
     private otherMode;
     private otherValue;
+    /**
+     * Columns the option gutter claims before the label: the `❯ `/`  ` pointer
+     * plus the state marker and its separator. Every body row (question, label,
+     * description, Other hint) is indented by this, so the card has one left edge.
+     */
+    private static labelColumn;
     constructor(host: WidgetHost);
     /**
      * Returns true if the option at the given index can be selected/activated.