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

package/dist/src/executor.js

@@ -596,7 +596,7 @@ export function commandUsesSudo(command) {
 }
 export function sudoPromptFromTail(text) {
     const tail = text.slice(-1000).replace(/\x1b\[[0-9;?]*[A-Za-z]/g, '');
-    const match = tail.match(/(?:\[sudo\][^\r\n]*password[^\r\n]*: ?|sudo[^\r\n]*password[^\r\n]*: ?|password[^\r\n]*: ?)$/i);
+    const match = tail.match(/(?:\[sudo\][^\r\n]*password[^\r\n]*: ?|\[?sudo[^\r\n]*password[^\r\n]*: ?|password[^\r\n]*: ?)$/i);
     return match?.[0] ?? null;
 }
 function isSudoPromptLine(text) {

package/dist/src/ui/repl.js

@@ -1,5 +1,5 @@
 import { createRatatuiBridge } from './tui/bridge.js';
-import { buildTuiFrame, formatJobElapsed, formatTodoProgress, pickThinkingFallbackPhrase, renderTranscriptEntryLines, THINKING_FALLBACK_PHRASES, } from './tui/build-frame.js';
+import { approvalScrollLimit, buildTuiFrame, formatJobElapsed, formatTodoProgress, pickThinkingFallbackPhrase, renderTranscriptEntryLines, THINKING_FALLBACK_PHRASES, } from './tui/build-frame.js';
 import { createTerminalTitleController } from './tui/terminal-title.js';
 import { captureTerminalWrites, releaseTerminalWrites, } from './tui/terminal-writes.js';
 export { getSlashCommandSuggestions } from './tui/build-frame.js';
@@ -966,9 +966,11 @@ function createInitialShellState(session, serverModels, debugUi) {
         analyzingImages: 0,
         approvalCursor: getDefaultApprovalCursor(),
         approvalPrompt: null,
+        approvalScrollOffset: 0,
         autoYes: session.autoYes,
         backgroundJobs: [],
         busy: false,
+        busyPausedAt: null,
         busySince: null,
         clockNow: Date.now(),
         commandCursor: 0,
@@ -1265,6 +1267,30 @@ export function resolveApprovalChoiceFromInput(input) {
         return 'n';
     return null;
 }
+export function pauseBusyClock(state, nowMs) {
+    if (state.busySince === null || state.busyPausedAt !== null)
+        return state;
+    return { ...state, busyPausedAt: nowMs };
+}
+export function resumeBusyClock(state, nowMs) {
+    if (state.busyPausedAt === null)
+        return state;
+    return {
+        ...state,
+        busyPausedAt: null,
+        busySince: state.busySince === null
+            ? null
+            : state.busySince + Math.max(0, nowMs - state.busyPausedAt),
+    };
+}
+export function busyElapsedMs(state, nowMs) {
+    if (state.busySince === null)
+        return null;
+    return Math.max(0, (state.busyPausedAt ?? nowMs) - state.busySince);
+}
+export function busyElapsedSeconds(state, nowMs) {
+    return Math.floor((busyElapsedMs(state, nowMs) ?? 0) / 1000);
+}
 export function buildModelPickerOptions(currentModelId, serverModels) {
     return serverModels.map((model) => ({
         id: model.id,
@@ -1419,9 +1445,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 return;
             const state = store.getState();
             syncTerminalTitle();
-            const elapsedSeconds = state.busySince
-                ? Math.max(0, Math.floor((Date.now() - state.busySince) / 1000))
-                : 0;
+            const elapsedSeconds = busyElapsedSeconds(state, Date.now());
             bridge.render(buildTuiFrame(state, terminalCols, terminalRows, spinnerFrame, elapsedSeconds, Date.now()));
         };
         const remountTui = async () => {
@@ -1553,9 +1577,10 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             resolveApprovalChoice = null;
             pendingResolve('n');
             store.update((current) => ({
-                ...current,
+                ...resumeBusyClock(current, Date.now()),
                 approvalCursor: getDefaultApprovalCursor(),
                 approvalPrompt: null,
+                approvalScrollOffset: 0,
             }));
         };
         const dismissPendingSudoPassword = () => {
@@ -1568,7 +1593,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             sudoPasswordBuffer = '';
             pendingResolve(null);
             store.update((current) => ({
-                ...current,
+                ...resumeBusyClock(current, Date.now()),
                 sudoPrompt: null,
             }));
         };
@@ -1597,6 +1622,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 activeTurnInput: '',
                 activeTurnInputPreformatted: false,
                 busy: false,
+                busyPausedAt: null,
                 busySince: null,
                 commandLog: [],
                 cursor: queued ? queued.body.length : current.cursor,
@@ -1610,7 +1636,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 thinkingTitle: '',
                 thinkingNotes: [],
                 workingTools: [],
-                tokenUsage: formatClientTokenUsage(current.busySince == null ? null : Date.now() - current.busySince, latestUsageSummary),
+                tokenUsage: formatClientTokenUsage(busyElapsedMs(current, Date.now()), latestUsageSummary),
             }));
             appendStaticEntries(cancelledEntries);
             lastTurnStartedAt = null;
@@ -1761,7 +1787,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 cleanupSudoPasswordPrompt = null;
             }
             store.update((current) => ({
-                ...current,
+                ...pauseBusyClock(current, Date.now()),
                 sudoPrompt: {
                     command,
                     passwordLength: 0,
@@ -1781,7 +1807,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 cleanupSudoPasswordPrompt = null;
                 sudoPasswordBuffer = '';
                 store.update((current) => ({
-                    ...current,
+                    ...resumeBusyClock(current, Date.now()),
                     sudoPrompt: null,
                     status: current.sudoPrompt?.returnStatus ?? current.status,
                 }));
@@ -1795,7 +1821,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 cleanupSudoPasswordPrompt = null;
                 sudoPasswordBuffer = '';
                 store.update((current) => ({
-                    ...current,
+                    ...resumeBusyClock(current, Date.now()),
                     sudoPrompt: null,
                     status: current.sudoPrompt?.returnStatus ?? current.status,
                 }));
@@ -1822,8 +1848,9 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             }
             resolveApprovalChoice = resolve;
             store.update((current) => ({
-                ...current,
+                ...pauseBusyClock(current, Date.now()),
                 approvalCursor: getDefaultApprovalCursor(),
+                approvalScrollOffset: 0,
                 approvalPrompt: {
                     title,
                     body,
@@ -1841,9 +1868,10 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             const pendingResolve = resolveApprovalChoice;
             resolveApprovalChoice = null;
             store.update((next) => ({
-                ...next,
+                ...resumeBusyClock(next, Date.now()),
                 approvalCursor: getDefaultApprovalCursor(),
                 approvalPrompt: null,
+                approvalScrollOffset: 0,
                 status: current.approvalPrompt?.returnStatus ?? next.status,
             }));
             pendingResolve?.(choice);
@@ -2051,6 +2079,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             store.update((next) => ({
                 ...next,
                 busy: true,
+                busyPausedAt: null,
                 busySince: resumeStartedAt,
                 clockNow: resumeStartedAt,
                 status: 'Loading session...',
@@ -2067,6 +2096,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((next) => ({
                     ...next,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     resumePickerFilter: '',
                     resumePickerIndex: 0,
@@ -2090,6 +2120,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((next) => ({
                     ...next,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     resumePickerFilter: '',
                     resumePickerIndex: 0,
@@ -2315,6 +2346,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((current) => ({
                     ...current,
                     busy: true,
+                    busyPausedAt: null,
                     busySince: Date.now(),
                     imageAttachments: [],
                     queuedMessage: null,
@@ -2325,6 +2357,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                     store.update((current) => ({
                         ...current,
                         busy: false,
+                        busyPausedAt: null,
                         busySince: null,
                         status: 'Ready',
                     }));
@@ -2352,6 +2385,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((current) => ({
                     ...current,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     status: 'Ready',
                 }));
@@ -2384,6 +2418,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 activeTurnInputPreformatted: preformatted,
                 analyzingImages: 0,
                 busy: true,
+                busyPausedAt: null,
                 busySince: turnStartedAt,
                 clockNow: turnStartedAt,
                 status: 'Running turn...',
@@ -2445,6 +2480,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((current) => ({
                     ...current,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     status: result.waitingForApproval ? 'Awaiting approval' : 'Ready',
                     tokenUsage: formatClientTokenUsage(Date.now() - turnStartedAt, latestUsageSummary),
@@ -2466,6 +2502,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                     activeTurnInput: '',
                     activeTurnInputPreformatted: false,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     commandLog: [],
                     imageAttachments: [],
@@ -2517,7 +2554,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             store.update((current) => ({
                 ...current,
                 status: message,
-                tokenUsage: formatClientTokenUsage(current.busySince == null ? null : Date.now() - current.busySince, latestUsageSummary),
+                tokenUsage: formatClientTokenUsage(busyElapsedMs(current, Date.now()), latestUsageSummary),
             }));
             queueThinkingUpdate({
                 title: panel ? panel.title : liveStatusPanelTitle(message),
@@ -2528,7 +2565,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             store.update((current) => ({
                 ...current,
                 contextStatus: message,
-                tokenUsage: formatClientTokenUsage(current.busySince == null ? null : Date.now() - current.busySince, latestUsageSummary),
+                tokenUsage: formatClientTokenUsage(busyElapsedMs(current, Date.now()), latestUsageSummary),
             }));
         };
         session.onToolEvent = (event) => {
@@ -2637,6 +2674,10 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             return choice === 'y';
         };
         const shellInputHandlers = {
+            getApprovalScrollLimit: () => {
+                const contentWidth = Math.max(20, Math.floor(terminalCols * 0.95) - 2);
+                return approvalScrollLimit(store.getState().approvalPrompt, contentWidth, terminalRows);
+            },
             getTranscriptScrollLimit: () => {
                 const contentWidth = Math.max(20, Math.floor(terminalCols * 0.95) - 2);
                 const blocks = store.getState().transcript.map((entry) => renderTranscriptEntryLines(entry, contentWidth));

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

@@ -10,11 +10,25 @@ 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 OVERLAY_WARNING_COLOR = 'ansi256(208)';
 const MODEL_PICKER_PANEL_MAX_WIDTH = 144;
@@ -318,18 +332,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) {
@@ -605,12 +624,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 +661,12 @@ 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 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: height < OVERLAY_PANEL_MARGIN_MIN_ROWS ? 0 : OVERLAY_PANEL_MARGIN_LINES,
+    }, () => plainLine(''));
     return [
         ...margin,
         plainLine(`╭${'─'.repeat(panelWidth - 2)}╮`, { color }),
@@ -850,10 +866,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 +982,59 @@ 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.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);
@@ -1051,7 +1166,7 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, n
         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 ? 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,7 @@
 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';
+const APPROVAL_PREVIEW_PAGE_ROWS = 3;
 function isClipboardImagePasteKey(key) {
     if (process.platform === 'win32') {
         return ((key.ctrl || key.meta) &&
@@ -85,6 +86,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)
@@ -125,18 +151,7 @@ export function handleShellKeyEvent(store, handlers, event) {
         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')
@@ -208,7 +223,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 +258,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thegitai/cli",
-  "version": "1.0.0-preview.12",
+  "version": "1.0.0-preview.13",
   "description": "TheGitAI is an AI coding agent for your terminal. It indexes your repository, writes and edits files, runs commands, and builds features with you.",
   "keywords": [
     "ai",
@@ -37,10 +37,10 @@
     "@lydell/node-pty-linux-x64": "1.1.0",
     "@lydell/node-pty-win32-arm64": "1.1.0",
     "@lydell/node-pty-win32-x64": "1.1.0",
-    "@thegitai/tui-darwin-arm64": "1.0.0-preview.12",
-    "@thegitai/tui-darwin-x64": "1.0.0-preview.12",
-    "@thegitai/tui-linux-x64": "1.0.0-preview.12",
-    "@thegitai/tui-win32-x64": "1.0.0-preview.12",
+    "@thegitai/tui-darwin-arm64": "1.0.0-preview.13",
+    "@thegitai/tui-darwin-x64": "1.0.0-preview.13",
+    "@thegitai/tui-linux-x64": "1.0.0-preview.13",
+    "@thegitai/tui-win32-x64": "1.0.0-preview.13",
     "@vscode/ripgrep": "1.18.0"
   },
   "publishConfig": {