@thegitai/cli 1.0.0-preview.12 → 1.0.0-preview.14

package/dist/src/ui/tui/build-frame.js

@@ -3,6 +3,7 @@ import { singleLinePreview, truncate } from '../../utils.js';
 import { formatClientTokenUsage } from '../repl.js';
 import { renderFormattedBodyLines, renderPreformattedBodyLines, } from './markdown-render.js';
 import { displayWidth, line, plainLine, sliceToWidth, span, wrapText, } from './text.js';
+import { buildUserInputOverlayLines, } from './user-input.js';
 const WORKING_CLOCK_ICON = '◷';
 const BRAILLE_SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴'];
 const TODO_PANEL_MAX_ROWS = 12;
@@ -10,12 +11,27 @@ const TODO_IN_PROGRESS_COLOR = 'ansi256(214)';
 const COMMAND_PREVIEW_LINES = 10;
 const WORKING_TOOL_PREVIEW_ROWS = 3;
 const TRANSCRIPT_DIFF_PREVIEW_LINES = 24;
+const APPROVAL_PREVIEW_MAX_ROWS = 20;
+const APPROVAL_PREVIEW_MIN_ROWS = 4;
+const APPROVAL_OVERLAY_CHROME_ROWS = 11;
+const APPROVAL_PADDING_CHROME_ROWS = 4;
+const APPROVAL_PADDING_MIN_ROWS = 30;
+const APPROVAL_SCROLLBAR_COLUMNS = 2;
+const APPROVAL_ACCENT_COLOR = 'cyan';
+const SUDO_PASSWORD_ASSURANCE = 'The model never sees this. Your password goes straight to sudo on this ' +
+    'computer, then is discarded — never sent to our servers, saved, or logged.';
+const SUDO_ASSURANCE_COLOR = 'ansi256(248)';
+const APPROVAL_SCROLL_STATUS_COLOR = 'ansi256(248)';
+const APPROVAL_SCROLLBAR_THUMB = '█';
+const APPROVAL_SCROLLBAR_TRACK = '░';
 const THINKING_NOTE_PREVIEW_ROWS = 3;
 const COMPOSER_INPUT_MAX_ROWS = 6;
 const AGENT_MODE_LABEL_WIDTH = 16;
 const OVERLAY_PANEL_MAX_WIDTH = 86;
 const OVERLAY_PANEL_MARGIN_LINES = 2;
+const OVERLAY_PANEL_MARGIN_MIN_ROWS = 30;
 const OVERLAY_BORDER_COLOR = 'yellow';
+const USER_INPUT_BORDER_COLOR = 'cyan';
 const OVERLAY_WARNING_COLOR = 'ansi256(208)';
 const MODEL_PICKER_PANEL_MAX_WIDTH = 144;
 const MODEL_PICKER_PANEL_MARGIN_LINES = 2;
@@ -318,18 +334,23 @@ export function renderTranscriptEntryLines(entry, width) {
         ? renderPreformattedBodyLines(entry.body, width, entry.kind)
         : renderFormattedBodyLines(entry.body, width, entry.kind)));
     if (entry.diffPreview) {
-        lines.push(plainLine(`  Added ${entry.diffPreview.added} line${entry.diffPreview.added === 1 ? '' : 's'}, removed ${entry.diffPreview.removed} line${entry.diffPreview.removed === 1 ? '' : 's'}`, { color: 'gray' }));
-        for (const diffLine of entry.diffPreview.lines.slice(0, TRANSCRIPT_DIFF_PREVIEW_LINES)) {
-            lines.push(line(span(`${diffLinePrefix(diffLine.kind)} `, { color: diffLineColor(diffLine.kind) }), span(fitLine(diffLine.content || ' ', width - 4), {
-                color: diffLineColor(diffLine.kind),
-            })));
-        }
+        lines.push(...renderDiffPreviewLines(entry.diffPreview, width));
     }
     if (entry.todoList && entry.todoList.length > 0) {
         lines.push(...renderTodoListLines(entry.todoList, width));
     }
     return lines;
 }
+function renderDiffPreviewLines(preview, width, maxDiffLines = TRANSCRIPT_DIFF_PREVIEW_LINES) {
+    return [
+        plainLine(`  Added ${preview.added} line${preview.added === 1 ? '' : 's'}, removed ${preview.removed} line${preview.removed === 1 ? '' : 's'}`, { color: 'gray' }),
+        ...preview.lines.slice(0, maxDiffLines).map((diffLine) => line(span(`${diffLinePrefix(diffLine.kind)} `, {
+            color: diffLineColor(diffLine.kind),
+        }), span(fitLine(diffLine.content || ' ', width - 4), {
+            color: diffLineColor(diffLine.kind),
+        }))),
+    ];
+}
 function tokenUsageLines(usage) {
     const match = usage.match(/^Session tokens • in ([^•]+) • out ([^•]+)(?: • think ([^•]+))? • cache ([^•]+)(?: • write ([^•]+))?(?: • index ([^•]+))?$/);
     if (!match) {
@@ -435,13 +456,15 @@ function composerFooterLines(state) {
         : state.input
             ? 'Enter queues • Esc cancels turn • Ctrl+C clears draft'
             : 'Enter queues • Esc / Ctrl+C cancel turn';
-    const helperText = state.busy
-        ? busyHelperText
-        : process.platform === 'win32'
-            ? 'Enter sends • Shift+Tab mode • Alt+V image • Esc cancel turn • Ctrl+C clears / quits'
-            : process.platform === 'darwin'
-                ? 'Enter sends • Shift+Tab mode • Ctrl+V image • Esc cancel turn • Ctrl+C clears / quits'
-                : 'Enter sends • Shift+Tab mode • Ctrl+V image • Esc cancel turn • Ctrl+C clears / quits';
+    const helperText = state.userInputPrompt
+        ? 'Answering agent questions • Ctrl+C cancels turn'
+        : state.busy
+            ? busyHelperText
+            : process.platform === 'win32'
+                ? 'Enter sends • Shift+Tab mode • Alt+V image • Esc cancel turn • Ctrl+C clears / quits'
+                : process.platform === 'darwin'
+                    ? 'Enter sends • Shift+Tab mode • Ctrl+V image • Esc cancel turn • Ctrl+C clears / quits'
+                    : 'Enter sends • Shift+Tab mode • Ctrl+V image • Esc cancel turn • Ctrl+C clears / quits';
     const agentLabel = agentModeLabel(state.agentMode).padEnd(AGENT_MODE_LABEL_WIDTH);
     const tokenUsageText = state.tokenUsage || formatClientTokenUsage(null);
     const footerSpans = [
@@ -605,12 +628,7 @@ function buildLiveLines(state, width, spinnerFrame, elapsedSeconds, nowMs) {
         }
         lines.push(plainLine(''));
     }
-    const busyLabel = state.analyzingImages > 0
-        ? state.analyzingImages > 1
-            ? 'Analyzing images'
-            : 'Analyzing image'
-        : 'Working';
-    lines.push(plainLine(`${WORKING_CLOCK_ICON} ${busyLabel} · ${elapsedSeconds < 60 ? `${elapsedSeconds}s` : `${Math.floor(elapsedSeconds / 60)}m ${String(elapsedSeconds % 60).padStart(2, '0')}s`}`, { color: 'yellow' }));
+    lines.push(plainLine(buildWorkingClockLine(state, elapsedSeconds), { color: 'yellow' }));
     const todos = state.todos ?? [];
     if (todos.length > 0) {
         lines.push(plainLine(''));
@@ -647,10 +665,24 @@ function overlayPanelLine(row, width, color) {
     const padding = Math.max(0, width - lineCharCount(row));
     return line(span('│ ', { color }), ...row.spans, span(' '.repeat(padding)), span(' │', { color }));
 }
-function buildOverlayPanel(rows, width, color) {
+function overlayPanelMarginLineCount(height) {
+    return height < OVERLAY_PANEL_MARGIN_MIN_ROWS
+        ? 0
+        : OVERLAY_PANEL_MARGIN_LINES;
+}
+function overlayPanelContentBudget(height) {
+    if (!Number.isFinite(height)) {
+        return Number.POSITIVE_INFINITY;
+    }
+    const margins = overlayPanelMarginLineCount(height) * 2;
+    return Math.max(1, Math.floor(height) - margins - 2);
+}
+function buildOverlayPanel(rows, width, color, height = Number.POSITIVE_INFINITY) {
     const panelWidth = Math.max(24, Math.min(width, OVERLAY_PANEL_MAX_WIDTH));
     const innerWidth = Math.max(1, panelWidth - 4);
-    const margin = Array.from({ length: OVERLAY_PANEL_MARGIN_LINES }, () => plainLine(''));
+    const margin = Array.from({
+        length: overlayPanelMarginLineCount(height),
+    }, () => plainLine(''));
     return [
         ...margin,
         plainLine(`╭${'─'.repeat(panelWidth - 2)}╮`, { color }),
@@ -850,10 +882,103 @@ function buildCommandPalettePanel(suggestions, selectedIndex, width) {
     body.push(modelPickerPanelSideLine(plainLine(''), innerWidth), modelPickerPanelSideLine(line(span('─'.repeat(innerWidth), { color: MODEL_PICKER_BORDER_COLOR })), innerWidth), modelPickerPanelSideLine(plainLine('↑/↓ choose  •  Tab or Enter accept  •  Esc cancel', { color: 'gray' }), innerWidth), plainLine(`╰${'─'.repeat(panelWidth - 2)}╯`, { color: MODEL_PICKER_BORDER_COLOR }));
     return [...margin, ...body, ...margin];
 }
+export function formatElapsedClock(elapsedSeconds) {
+    if (elapsedSeconds < 60)
+        return `${elapsedSeconds}s`;
+    return `${Math.floor(elapsedSeconds / 60)}m ${String(elapsedSeconds % 60).padStart(2, '0')}s`;
+}
+export function buildWorkingClockLine(state, elapsedSeconds) {
+    const elapsed = formatElapsedClock(elapsedSeconds);
+    if (state.busyPausedAt != null) {
+        return `${WORKING_CLOCK_ICON} Paused · ${elapsed} · waiting for your response`;
+    }
+    const label = state.analyzingImages > 0
+        ? state.analyzingImages > 1
+            ? 'Analyzing images'
+            : 'Analyzing image'
+        : 'Working';
+    return `${WORKING_CLOCK_ICON} ${label} · ${elapsed}`;
+}
+export function approvalPanelInnerWidth(width) {
+    return Math.max(1, Math.max(24, Math.min(width, OVERLAY_PANEL_MAX_WIDTH)) - 4);
+}
+export function approvalPaddingEnabled(height) {
+    return height >= APPROVAL_PADDING_MIN_ROWS;
+}
+export function approvalPreviewBudget(height) {
+    const chrome = APPROVAL_OVERLAY_CHROME_ROWS +
+        (approvalPaddingEnabled(height) ? APPROVAL_PADDING_CHROME_ROWS : 0);
+    return Math.max(APPROVAL_PREVIEW_MIN_ROWS, Math.min(APPROVAL_PREVIEW_MAX_ROWS, Math.floor(height / 2) - chrome));
+}
+export function approvalPreviewRows(prompt, innerWidth) {
+    const previewWidth = Math.max(8, innerWidth - APPROVAL_SCROLLBAR_COLUMNS);
+    if (prompt.diffPreview) {
+        return renderDiffPreviewLines(prompt.diffPreview, previewWidth, prompt.diffPreview.lines.length);
+    }
+    return wrapText(prompt.body, previewWidth).map((text) => plainLine(text, { color: OVERLAY_BORDER_COLOR }));
+}
+export function approvalScrollLimit(prompt, width, height) {
+    if (!prompt)
+        return 0;
+    return Math.max(0, approvalPreviewRows(prompt, approvalPanelInnerWidth(width)).length -
+        approvalPreviewBudget(height));
+}
+function approvalScrollbarGlyphs(totalRows, visibleRows, offset) {
+    const thumbRows = Math.max(1, Math.min(visibleRows, Math.round((visibleRows * visibleRows) / totalRows)));
+    const maxOffset = totalRows - visibleRows;
+    const thumbTop = maxOffset <= 0
+        ? 0
+        : Math.round((offset / maxOffset) * (visibleRows - thumbRows));
+    return Array.from({ length: visibleRows }, (_, index) => index >= thumbTop && index < thumbTop + thumbRows
+        ? APPROVAL_SCROLLBAR_THUMB
+        : APPROVAL_SCROLLBAR_TRACK);
+}
+function withScrollbarGlyph(target, glyph, column) {
+    const padding = Math.max(1, column - lineCharCount(target));
+    return {
+        spans: [
+            ...target.spans,
+            span(' '.repeat(padding)),
+            span(glyph, {
+                color: 'gray',
+                dim: glyph === APPROVAL_SCROLLBAR_TRACK,
+            }),
+        ],
+    };
+}
+export function buildApprovalPreviewWindow(prompt, innerWidth, height, requestedOffset) {
+    const rows = approvalPreviewRows(prompt, innerWidth);
+    const budget = approvalPreviewBudget(height);
+    if (rows.length <= budget) {
+        return {
+            firstVisibleRow: rows.length === 0 ? 0 : 1,
+            lastVisibleRow: rows.length,
+            lines: rows,
+            offset: 0,
+            totalRows: rows.length,
+        };
+    }
+    const offset = Math.max(0, Math.min(requestedOffset, rows.length - budget));
+    const visible = rows.slice(offset, offset + budget);
+    const glyphs = approvalScrollbarGlyphs(rows.length, budget, offset);
+    return {
+        firstVisibleRow: offset + 1,
+        lastVisibleRow: offset + visible.length,
+        lines: visible.map((target, index) => withScrollbarGlyph(target, glyphs[index], innerWidth - 1)),
+        offset,
+        totalRows: rows.length,
+    };
+}
+export function approvalScrollStatusLine(window) {
+    return `lines ${window.firstVisibleRow}–${window.lastVisibleRow} of ${window.totalRows} · PgUp/PgDn scrolls`;
+}
+export function rightAlignedLine(text, width, style = {}) {
+    return plainLine(`${' '.repeat(Math.max(0, width - displayWidth(text)))}${text}`, style);
+}
 function buildOverlayLines(state, width, height, nowMs) {
     const lines = [];
     const panelWidth = Math.max(24, Math.min(width, OVERLAY_PANEL_MAX_WIDTH));
-    const innerWidth = Math.max(1, panelWidth - 4);
+    const innerWidth = approvalPanelInnerWidth(width);
     if (state.sudoPrompt) {
         const prompt = state.sudoPrompt;
         const passwordWidth = Math.max(0, innerWidth - 11);
@@ -873,53 +998,65 @@ function buildOverlayLines(state, width, height, nowMs) {
                 : line(span('         '), span(text, { color: OVERLAY_BORDER_COLOR })));
         });
         lines.push(plainLine(''));
-        if (prompt.prompt.trim()) {
-            lines.push(plainLine(prompt.prompt.trim(), { color: 'gray' }));
-        }
+        lines.push(...wrapText(SUDO_PASSWORD_ASSURANCE, innerWidth).map((text) => plainLine(text, { color: SUDO_ASSURANCE_COLOR })));
+        lines.push(plainLine(''));
         lines.push(line(span('Password: ', { color: 'cyan', bold: true }), span('•'.repeat(Math.min(prompt.passwordLength, passwordWidth)), {
             color: 'cyan',
         }), span(' ', { inverse: true })));
         lines.push(plainLine('Press Enter to submit, Escape to cancel', { color: 'gray' }));
-        return buildOverlayPanel(lines, width, OVERLAY_BORDER_COLOR);
+        return buildOverlayPanel(lines, width, OVERLAY_BORDER_COLOR, height);
+    }
+    if (state.userInputPrompt) {
+        if (height < 3) {
+            return [];
+        }
+        return buildOverlayPanel(buildUserInputOverlayLines(state.userInputPrompt, innerWidth, overlayPanelContentBudget(height)), width, USER_INPUT_BORDER_COLOR, height);
     }
     if (state.approvalPrompt) {
         const prompt = state.approvalPrompt;
+        const padded = approvalPaddingEnabled(height);
         lines.push(plainLine(prompt.title, {
-            color: OVERLAY_BORDER_COLOR,
+            color: APPROVAL_ACCENT_COLOR,
             bold: true,
         }));
+        if (padded)
+            lines.push(plainLine(''));
         if (prompt.diffPreview && prompt.filePath) {
             lines.push(line(span('● ', { color: 'green' }), span('Update(', { bold: true }), span(prompt.filePath, { color: 'cyan', bold: true }), span(')', { bold: true })));
-            lines.push(...renderTranscriptEntryLines({
-                body: '',
-                diffPreview: prompt.diffPreview,
-                kind: 'diff',
-                title: '',
-            }, innerWidth));
         }
-        else {
-            lines.push(...wrapText(prompt.body, innerWidth).map((text) => plainLine(text, { color: OVERLAY_BORDER_COLOR })));
+        const previewWindow = buildApprovalPreviewWindow(prompt, innerWidth, height, state.approvalScrollOffset ?? 0);
+        lines.push(...previewWindow.lines);
+        if (padded)
+            lines.push(plainLine(''));
+        if (previewWindow.totalRows > previewWindow.lines.length) {
+            lines.push(rightAlignedLine(approvalScrollStatusLine(previewWindow), innerWidth, {
+                color: APPROVAL_SCROLL_STATUS_COLOR,
+            }));
+            if (padded)
+                lines.push(plainLine(''));
         }
         const options = [
-            { value: 'y', label: 'Approve once', color: 'green' },
-            { value: 'a', label: 'Approve all remaining actions', color: 'cyan' },
-            { value: 'n', label: 'Deny', color: 'red' },
+            { value: 'y', label: 'Approve once' },
+            { value: 'a', label: 'Approve all remaining actions' },
+            { value: 'n', label: 'Deny' },
         ];
         options.forEach((option, index) => {
             const selected = index === state.approvalCursor;
             lines.push(line(span(selected ? '› ' : '  ', {
-                color: selected ? OVERLAY_BORDER_COLOR : 'gray',
+                color: selected ? APPROVAL_ACCENT_COLOR : 'gray',
             }), span(option.value, {
-                color: selected ? OVERLAY_BORDER_COLOR : option.color,
-                bold: true,
+                color: selected ? APPROVAL_ACCENT_COLOR : undefined,
+                bold: selected,
             }), span(` ${option.label}`, {
-                color: selected ? OVERLAY_BORDER_COLOR : undefined,
+                color: selected ? APPROVAL_ACCENT_COLOR : undefined,
             })));
         });
+        if (padded)
+            lines.push(plainLine(''));
         lines.push(plainLine('Press y, a, or n • ↑/↓ moves • Enter confirms', {
             color: 'gray',
         }));
-        return buildOverlayPanel(lines, width, OVERLAY_BORDER_COLOR);
+        return buildOverlayPanel(lines, width, OVERLAY_BORDER_COLOR, height);
     }
     if (state.modelPickerOpen) {
         const options = buildModelPickerOptions(state.currentModelId, state.serverModels);
@@ -996,6 +1133,15 @@ function buildOverlayLines(state, width, height, nowMs) {
 function countSectionLines(sections) {
     return sections.reduce((sum, section) => sum + section.lines.length, 0);
 }
+export function userInputViewportForFrame(state, cols, rows, spinnerFrame, elapsedSeconds, nowMs = 0) {
+    const contentWidth = Math.max(20, Math.floor(cols * 0.95) - 2);
+    const liveRows = buildLiveLines(state, contentWidth, spinnerFrame, elapsedSeconds, nowMs).length;
+    const overlayHeight = Math.max(0, rows - liveRows - composerFooterLines(state).length);
+    return {
+        width: approvalPanelInnerWidth(contentWidth),
+        maxRows: overlayPanelContentBudget(overlayHeight),
+    };
+}
 function sliceTranscriptLines(lines, maxLines, scrollOffset) {
     if (maxLines <= 0 || lines.length <= maxLines) {
         return lines;
@@ -1021,7 +1167,7 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, n
     if (liveLines.length > 0) {
         sections.push({ kind: 'live', lines: liveLines });
     }
-    const overlayActive = Boolean(state.approvalPrompt || state.sudoPrompt);
+    const overlayActive = Boolean(state.approvalPrompt || state.sudoPrompt || state.userInputPrompt);
     if (!state.resumePickerOpen && !state.modelPickerOpen && !state.jobsPickerOpen && !overlayActive) {
         const composerLines = [];
         if (state.busy && state.status === 'Starting a new conversation...') {
@@ -1046,12 +1192,26 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, n
             lines: [...composerLines, plainLine(''), ...composerFooterLines(state)],
         });
     }
-    const overlayLines = buildOverlayLines(state, contentWidth, rows, nowMs);
+    if (state.userInputPrompt) {
+        sections.push({
+            kind: 'busyFooter',
+            lines: composerFooterLines(state),
+        });
+    }
+    const overlayHeight = state.userInputPrompt
+        ? Math.max(0, rows - countSectionLines(sections))
+        : rows;
+    const overlayLines = buildOverlayLines(state, contentWidth, overlayHeight, nowMs);
     if (overlayLines.length > 0) {
         sections.push({ kind: 'overlay', lines: overlayLines });
     }
     const reservedLines = countSectionLines(sections.filter((section) => section.kind !== 'transcript'));
-    const composerReserve = state.resumePickerOpen ? 0 : 4;
+    const composerReserve = state.resumePickerOpen ||
+        state.approvalPrompt ||
+        state.sudoPrompt ||
+        state.userInputPrompt
+        ? 0
+        : 4;
     const transcriptBudget = Math.max(1, rows - reservedLines - composerReserve - 1);
     const transcriptScrollLimit = Math.max(0, transcriptLines.length - transcriptBudget);
     const transcriptScrollOffset = Math.min(Math.max(state.transcriptScrollOffset, 0), transcriptScrollLimit);

package/dist/src/ui/tui/shell-input.js

@@ -1,6 +1,8 @@
 import { readClipboardImage, readClipboardText } from '../../core/clipboard.js';
 import { applySlashCommandSuggestion, buildModelPickerOptions, deleteAtCursor, deleteBeforeCursor, getApprovalChoiceForCursor, getInputCommandToken, getNextApprovalCursor, getNextModelPickerIndex, getSlashCommandSuggestions, insertAtCursor, isExactSlashCommandToken, navigatePromptHistory, resolveApprovalChoiceFromInput, shouldRemountLiveFrameForComposerInputChange, } from '../repl.js';
 import { buildPastePlaceholder, shouldCollapsePaste, } from '../paste-collapse.js';
+import { handleUserInputPromptEvent, } from './user-input.js';
+const APPROVAL_PREVIEW_PAGE_ROWS = 3;
 function isClipboardImagePasteKey(key) {
     if (process.platform === 'win32') {
         return ((key.ctrl || key.meta) &&
@@ -9,6 +11,20 @@ function isClipboardImagePasteKey(key) {
     }
     return key.ctrl && key.input === 'v' && !key.shift && !key.meta;
 }
+function applyUserInputPromptEvent(store, handlers, event) {
+    const current = store.getState();
+    if (!current.userInputPrompt)
+        return false;
+    const outcome = handleUserInputPromptEvent(current.userInputPrompt, event, handlers.getUserInputViewport?.());
+    store.update((state) => ({
+        ...state,
+        userInputPrompt: outcome.state,
+    }));
+    if (outcome.result) {
+        void handlers.onResolveUserInput?.(outcome.result);
+    }
+    return true;
+}
 function composerIsEmpty(state) {
     return (!state.input &&
         state.cursor === 0 &&
@@ -85,6 +101,31 @@ function pasteTextFromClipboard(store, handlers) {
     }
     insertPastedText(store, handlers, text);
 }
+function scrollTranscript(store, handlers, delta) {
+    if (delta === 0)
+        return;
+    store.update((current) => {
+        const limit = handlers.getTranscriptScrollLimit?.() ??
+            current.transcript.reduce((total, entry) => total + 2 + (entry.body ? entry.body.split('\n').length : 0), 0);
+        const next = current.transcriptScrollOffset + delta;
+        return {
+            ...current,
+            transcriptScrollOffset: Math.max(0, Math.min(next, limit)),
+        };
+    });
+}
+function scrollApprovalPreview(store, handlers, delta) {
+    if (delta === 0)
+        return;
+    store.update((current) => {
+        const limit = handlers.getApprovalScrollLimit?.() ?? 0;
+        const next = (current.approvalScrollOffset ?? 0) + delta;
+        return {
+            ...current,
+            approvalScrollOffset: Math.max(0, Math.min(next, limit)),
+        };
+    });
+}
 function filterResumeSessionsLocal(sessions, filter, serverModels) {
     const q = filter.trim().toLowerCase();
     if (!q)
@@ -99,6 +140,12 @@ function filterResumeSessionsLocal(sessions, filter, serverModels) {
 }
 export function handleShellKeyEvent(store, handlers, event) {
     if (event.kind === 'paste') {
+        if (applyUserInputPromptEvent(store, handlers, {
+            kind: 'paste',
+            text: event.text,
+        })) {
+            return;
+        }
         insertPastedText(store, handlers, event.text);
         return;
     }
@@ -121,22 +168,18 @@ export function handleShellKeyEvent(store, handlers, event) {
         return;
     }
     if (event.kind === 'contextMenu') {
+        if (store.getState().userInputPrompt) {
+            const text = (handlers.readClipboardText ?? readClipboardText)();
+            if (text) {
+                applyUserInputPromptEvent(store, handlers, { kind: 'paste', text });
+            }
+            return;
+        }
         pasteTextFromClipboard(store, handlers);
         return;
     }
     if (event.kind === 'transcriptScroll') {
-        const delta = Math.trunc(event.deltaLines);
-        if (delta !== 0) {
-            store.update((current) => {
-                const limit = handlers.getTranscriptScrollLimit?.() ??
-                    current.transcript.reduce((total, entry) => total + 2 + (entry.body ? entry.body.split('\n').length : 0), 0);
-                const next = current.transcriptScrollOffset + delta;
-                return {
-                    ...current,
-                    transcriptScrollOffset: Math.max(0, Math.min(next, limit)),
-                };
-            });
-        }
+        scrollTranscript(store, handlers, Math.trunc(event.deltaLines));
         return;
     }
     if (event.kind !== 'key')
@@ -153,6 +196,10 @@ export function handleShellKeyEvent(store, handlers, event) {
         }
     };
     if (key.ctrl && key.input === 'c') {
+        if (state.userInputPrompt) {
+            handlers.onCtrlC?.();
+            return;
+        }
         if (state.sudoPrompt) {
             handlers.onSudoPasswordInput({ kind: 'cancel' });
             return;
@@ -185,6 +232,10 @@ export function handleShellKeyEvent(store, handlers, event) {
         handlers.onRequestExit();
         return;
     }
+    if (state.userInputPrompt &&
+        applyUserInputPromptEvent(store, handlers, key)) {
+        return;
+    }
     if (state.sudoPrompt) {
         if (key.escape) {
             handlers.onSudoPasswordInput({ kind: 'cancel' });
@@ -208,7 +259,17 @@ export function handleShellKeyEvent(store, handlers, event) {
         return;
     }
     if (state.approvalPrompt) {
-        const directChoice = resolveApprovalChoiceFromInput(key.input);
+        if (key.pageUp || key.pageDown) {
+            const delta = key.pageUp ? -APPROVAL_PREVIEW_PAGE_ROWS : APPROVAL_PREVIEW_PAGE_ROWS;
+            if (key.shift) {
+                scrollTranscript(store, handlers, key.pageUp ? 8 : -8);
+            }
+            else {
+                scrollApprovalPreview(store, handlers, delta);
+            }
+            return;
+        }
+        const directChoice = key.ctrl || key.meta ? null : resolveApprovalChoiceFromInput(key.input);
         if (directChoice) {
             void handlers.onResolveApproval(directChoice);
             return;
@@ -233,15 +294,7 @@ export function handleShellKeyEvent(store, handlers, event) {
         return;
     }
     if (key.pageUp || key.pageDown) {
-        store.update((current) => {
-            const transcriptLines = handlers.getTranscriptScrollLimit?.() ??
-                current.transcript.reduce((total, entry) => total + 2 + (entry.body ? entry.body.split('\n').length : 0), 0);
-            const next = current.transcriptScrollOffset + (key.pageUp ? 8 : -8);
-            return {
-                ...current,
-                transcriptScrollOffset: Math.max(0, Math.min(next, transcriptLines)),
-            };
-        });
+        scrollTranscript(store, handlers, key.pageUp ? 8 : -8);
         return;
     }
     if (state.jobsPickerOpen) {