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

package/dist/src/api/chat.js

@@ -160,7 +160,7 @@ function publicStatusMessage(data) {
         ? event.toolName
         : 'tool';
     if (event.phase === 'thinking')
-        return 'Thinking...';
+        return 'Exploring options...';
     if (event.phase === 'analyzing_image') {
         return (event.imageCount ?? 1) > 1 ? 'Analyzing images...' : 'Analyzing image...';
     }

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, renderTranscriptEntryLines, } 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,
@@ -1074,10 +1076,21 @@ function splitThinkingLines(text) {
         .filter(Boolean));
 }
 const LIVE_STATUS_PANEL_MAX_CHARS = 72;
+const TOOL_PROGRESS_STATUS_PATTERN = /^(?:Tool:\s|Running\s\S+(?:\slocally)?\.\.\.$)/i;
+export function isToolProgressStatus(status) {
+    return TOOL_PROGRESS_STATUS_PATTERN.test(String(status ?? '').trim());
+}
+function holdOrPickFallback(currentTitle) {
+    return THINKING_FALLBACK_PHRASES.includes(currentTitle.trim())
+        ? currentTitle
+        : pickThinkingFallbackPhrase();
+}
 function liveStatusPanelTitle(status) {
     const text = String(status ?? '').trim();
     if (!text || text.includes('\n'))
         return '';
+    if (isToolProgressStatus(text))
+        return '';
     return text.length <= LIVE_STATUS_PANEL_MAX_CHARS ? text : '';
 }
 function thinkingPanelFromStatus(status) {
@@ -1103,7 +1116,7 @@ function thinkingPanelFromStatus(status) {
     const bodyLines = rawLines.length > 1 && rawLines[0].length <= 72 ? rawLines.slice(1) : rawLines;
     return {
         title,
-        notes: splitThinkingLines(bodyLines.join('\n')).slice(-3),
+        notes: splitThinkingLines(bodyLines.join('\n')).slice(0, 3),
     };
 }
 export const EXIT_CTRL_C_CONFIRM_MESSAGE = 'Press Ctrl+C again to quit.';
@@ -1254,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,
@@ -1339,6 +1376,36 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
         let exitCtrlCArmed = false;
         let exitCtrlCTimer = null;
         let transientStatusTimer = null;
+        const THINKING_MIN_DWELL_MS = 3_000;
+        let thinkingAppliedAt = 0;
+        let pendingThinking = null;
+        const applyThinking = (next) => {
+            thinkingAppliedAt = Date.now();
+            pendingThinking = null;
+            store.update((current) => ({
+                ...current,
+                thinkingTitle: next.title || holdOrPickFallback(current.thinkingTitle),
+                thinkingNotes: next.notes,
+            }));
+        };
+        const queueThinkingUpdate = (next) => {
+            if (Date.now() - thinkingAppliedAt >= THINKING_MIN_DWELL_MS) {
+                applyThinking(next);
+                return;
+            }
+            pendingThinking = next;
+        };
+        const flushPendingThinking = () => {
+            if (!pendingThinking)
+                return;
+            if (Date.now() - thinkingAppliedAt < THINKING_MIN_DWELL_MS)
+                return;
+            applyThinking(pendingThinking);
+        };
+        const resetThinkingPacer = () => {
+            thinkingAppliedAt = 0;
+            pendingThinking = null;
+        };
         const done = new Promise((resolve) => {
             resolveDone = resolve;
         });
@@ -1378,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 () => {
@@ -1512,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 = () => {
@@ -1527,7 +1593,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             sudoPasswordBuffer = '';
             pendingResolve(null);
             store.update((current) => ({
-                ...current,
+                ...resumeBusyClock(current, Date.now()),
                 sudoPrompt: null,
             }));
         };
@@ -1538,6 +1604,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             dismissPendingApproval();
             dismissPendingSudoPassword();
             activeTurnGeneration += 1;
+            resetThinkingPacer();
             activeTurnAbort?.abort();
             activeTurnAbort = null;
             cancelActiveCommand();
@@ -1555,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,
@@ -1568,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;
@@ -1719,7 +1787,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 cleanupSudoPasswordPrompt = null;
             }
             store.update((current) => ({
-                ...current,
+                ...pauseBusyClock(current, Date.now()),
                 sudoPrompt: {
                     command,
                     passwordLength: 0,
@@ -1739,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,
                 }));
@@ -1753,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,
                 }));
@@ -1780,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,
@@ -1799,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);
@@ -2009,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...',
@@ -2025,6 +2096,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((next) => ({
                     ...next,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     resumePickerFilter: '',
                     resumePickerIndex: 0,
@@ -2048,6 +2120,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((next) => ({
                     ...next,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     resumePickerFilter: '',
                     resumePickerIndex: 0,
@@ -2273,6 +2346,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((current) => ({
                     ...current,
                     busy: true,
+                    busyPausedAt: null,
                     busySince: Date.now(),
                     imageAttachments: [],
                     queuedMessage: null,
@@ -2283,6 +2357,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                     store.update((current) => ({
                         ...current,
                         busy: false,
+                        busyPausedAt: null,
                         busySince: null,
                         status: 'Ready',
                     }));
@@ -2310,6 +2385,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 store.update((current) => ({
                     ...current,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     status: 'Ready',
                 }));
@@ -2335,12 +2411,14 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             };
             pendingTurnEntries = [];
             queueTurnEntry(userEntry);
+            resetThinkingPacer();
             store.update((current) => ({
                 ...current,
                 activeTurnInput: input,
                 activeTurnInputPreformatted: preformatted,
                 analyzingImages: 0,
                 busy: true,
+                busyPausedAt: null,
                 busySince: turnStartedAt,
                 clockNow: turnStartedAt,
                 status: 'Running turn...',
@@ -2402,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),
@@ -2423,6 +2502,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                     activeTurnInput: '',
                     activeTurnInputPreformatted: false,
                     busy: false,
+                    busyPausedAt: null,
                     busySince: null,
                     commandLog: [],
                     imageAttachments: [],
@@ -2474,16 +2554,18 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             store.update((current) => ({
                 ...current,
                 status: message,
-                thinkingTitle: panel ? panel.title : liveStatusPanelTitle(message),
-                thinkingNotes: panel ? panel.notes : [],
-                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),
+                notes: panel ? panel.notes : [],
+            });
         };
         session.onContextLog = (message) => {
             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) => {
@@ -2592,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));
@@ -2619,6 +2705,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
         const spinnerTimer = setInterval(() => {
             spinnerFrame = (spinnerFrame + 1) % 6;
             if (store.getState().busy) {
+                flushPendingThinking();
                 renderCurrentFrame();
             }
         }, 120);

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;
@@ -238,13 +252,35 @@ function formatRelativeTime(isoDate) {
         return `${hours}h ago`;
     return `${Math.floor(hours / 24)}d ago`;
 }
-function todoItemLine(item, width) {
+const TODO_IN_PROGRESS_FRAMES = [
+    '\u25CB',
+    '\u25D4',
+    '\u25D1',
+    '\u25D5',
+    '\u25CF',
+];
+const TODO_IN_PROGRESS_STATIC_GLYPH = '\u25D1';
+export const TODO_IN_PROGRESS_STEP_MS = 1_500;
+export function todoProgressTick(nowMs) {
+    return Math.floor(nowMs / TODO_IN_PROGRESS_STEP_MS);
+}
+function todoInProgressGlyph(progressTick) {
+    if (progressTick === null)
+        return TODO_IN_PROGRESS_STATIC_GLYPH;
+    const index = ((progressTick % TODO_IN_PROGRESS_FRAMES.length) +
+        TODO_IN_PROGRESS_FRAMES.length) %
+        TODO_IN_PROGRESS_FRAMES.length;
+    return TODO_IN_PROGRESS_FRAMES[index];
+}
+function todoItemLine(item, width, progressTick = null) {
     const text = fitLine(item.text, Math.max(8, width - 5));
     if (item.status === 'completed') {
         return line(span('  ✔ ', { color: 'green' }), span(text, { color: 'gray', dim: true }));
     }
     if (item.status === 'in_progress') {
-        return line(span('  ◐ ', { color: TODO_IN_PROGRESS_COLOR }), span(text, { color: TODO_IN_PROGRESS_COLOR, bold: true }));
+        return line(span(`  ${todoInProgressGlyph(progressTick)} `, {
+            color: TODO_IN_PROGRESS_COLOR,
+        }), span(text, { color: TODO_IN_PROGRESS_COLOR, bold: true }));
     }
     return line(span('  ○ ', { color: 'gray' }), span(text));
 }
@@ -252,7 +288,7 @@ export function formatTodoProgress(items) {
     const done = items.filter((item) => item.status === 'completed').length;
     return `${done}/${items.length} done`;
 }
-export function renderTodoListLines(items, width, { header = false } = {}) {
+export function renderTodoListLines(items, width, { header = false, progressTick = null } = {}) {
     if (items.length === 0)
         return [];
     const lines = [];
@@ -277,7 +313,7 @@ export function renderTodoListLines(items, width, { header = false } = {}) {
     const budget = itemRowBudget - (collapsedDone > 0 ? 1 : 0);
     const visible = remaining.length > budget ? remaining.slice(0, budget - 1) : remaining;
     for (const item of visible) {
-        lines.push(todoItemLine(item, width));
+        lines.push(todoItemLine(item, width, progressTick));
     }
     if (remaining.length > visible.length) {
         lines.push(plainLine(`  … +${remaining.length - visible.length} more`, {
@@ -296,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) {
@@ -512,17 +553,48 @@ function buildJobsPickerLines(state, width, nowMs) {
     }));
     return lines;
 }
+export const THINKING_FALLBACK_PHRASES = [
+    'Working out where to start...',
+    'Deciding what comes first...',
+    'Lining up the pieces...',
+    'Untangling the details...',
+    'Deciding what not to touch...',
+    'Checking what this would break...',
+    'Choosing the smaller change...',
+    'Picking the least clever option...',
+    'Resisting the obvious answer...',
+    'Trying the boring explanation first...',
+    'Checking whether the assumption holds...',
+    'Asking what would have to be true...',
+    'Reading it the way the machine would...',
+    'Testing the story against the code...',
+    'Working out what actually changed...',
+    'Finding the smallest thing that explains it...',
+    'Looking for the part that is not settled yet...',
+    'Making sure this is the simple version...',
+];
+export function pickThinkingFallbackPhrase() {
+    const index = Math.floor(Math.random() * THINKING_FALLBACK_PHRASES.length);
+    return THINKING_FALLBACK_PHRASES[index];
+}
+function withProgressEllipsis(title) {
+    const text = title.trim();
+    if (!text)
+        return text;
+    return /(?:\.\.\.|…)$/.test(text) ? text : `${text}...`;
+}
 function thinkingHeaderLine(spinnerFrame, title, width) {
     const spinner = `${BRAILLE_SPINNER_FRAMES[spinnerFrame % BRAILLE_SPINNER_FRAMES.length]} `;
-    const fittedTitle = title
-        ? fitLine(title, Math.max(8, width - spinner.length - 'Thinking'.length - 3))
+    const decorated = withProgressEllipsis(title);
+    const fittedTitle = decorated
+        ? fitLine(decorated, Math.max(8, width - spinner.length - 'Thinking'.length - 3))
         : '';
     return line(span(spinner, { color: 'green' }), span('Thinking', { color: 'green', bold: true }), ...(fittedTitle ? [span(` · ${fittedTitle}`, { color: 'ansi256(248)' })] : []));
 }
 function thinkingNoteLine(note, width) {
     return line(span('│  ', { color: 'green' }), span(fitLine(note, Math.max(8, width - 3)), { color: 'ansi256(248)' }));
 }
-function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
+function buildLiveLines(state, width, spinnerFrame, elapsedSeconds, nowMs) {
     if (!state.busy)
         return [];
     const lines = [plainLine('')];
@@ -552,16 +624,14 @@ function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
         }
         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(''));
-        lines.push(...renderTodoListLines(todos, width, { header: true }));
+        lines.push(...renderTodoListLines(todos, width, {
+            header: true,
+            progressTick: todoProgressTick(nowMs),
+        }));
     }
     const visibleTitle = state.thinkingTitle.trim();
     const visibleNotes = state.thinkingNotes.filter(Boolean);
@@ -571,11 +641,12 @@ function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
             const minimalText = visibleTitle && visibleTitle !== 'Thinking'
                 ? visibleTitle
                 : (visibleNotes[visibleNotes.length - 1] ?? '');
-            lines.push(thinkingHeaderLine(spinnerFrame, minimalText, width));
+            lines.push(thinkingHeaderLine(spinnerFrame, minimalText || THINKING_FALLBACK_PHRASES[0], width));
         }
         else {
-            lines.push(thinkingHeaderLine(spinnerFrame, visibleTitle, width));
-            for (const note of visibleNotes.slice(-THINKING_NOTE_PREVIEW_ROWS)) {
+            const headerTitle = visibleTitle && visibleTitle !== 'Thinking' ? visibleTitle : '';
+            lines.push(thinkingHeaderLine(spinnerFrame, headerTitle || THINKING_FALLBACK_PHRASES[0], width));
+            for (const note of visibleNotes.slice(0, THINKING_NOTE_PREVIEW_ROWS)) {
                 lines.push(thinkingNoteLine(note, width));
             }
         }
@@ -590,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 }),
@@ -793,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);
@@ -816,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);
@@ -960,7 +1132,7 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, n
         transcriptLines.push(...block);
     });
     const sections = [];
-    const liveLines = buildLiveLines(state, contentWidth, spinnerFrame, elapsedSeconds);
+    const liveLines = buildLiveLines(state, contentWidth, spinnerFrame, elapsedSeconds, nowMs);
     if (liveLines.length > 0) {
         sections.push({ kind: 'live', lines: liveLines });
     }
@@ -994,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.11",
+  "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.11",
-    "@thegitai/tui-darwin-x64": "1.0.0-preview.11",
-    "@thegitai/tui-linux-x64": "1.0.0-preview.11",
-    "@thegitai/tui-win32-x64": "1.0.0-preview.11",
+    "@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": {