@thegitai/cli 1.0.0-preview.2 → 1.0.0-preview.21

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

@@ -1,8 +1,10 @@
 import { agentModeLabel } from '../../agent-mode.js';
-import { truncate } from '../../utils.js';
+import { singleLinePreview, truncate } from '../../utils.js';
 import { formatClientTokenUsage } from '../repl.js';
 import { renderFormattedBodyLines, renderPreformattedBodyLines, } from './markdown-render.js';
-import { line, plainLine, span, wrapText } from './text.js';
+import { displayWidth, line, padToWidth, plainLine, sliceToWidth, span, wrapText, } from './text.js';
+import { isDarkTerminalBackground, mutedColor, mutedStyle } from './terminal-theme.js';
+import { buildUserInputOverlayLines, } from './user-input.js';
 const WORKING_CLOCK_ICON = '◷';
 const BRAILLE_SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴'];
 const TODO_PANEL_MAX_ROWS = 12;
@@ -10,16 +12,31 @@ 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 = 86;
+const MODEL_PICKER_PANEL_MAX_WIDTH = 144;
 const MODEL_PICKER_PANEL_MARGIN_LINES = 2;
-const MODEL_PICKER_BORDER_COLOR = 'gray';
+const MODEL_PICKER_BORDER_COLOR = 'cyan';
 const MODEL_PICKER_ACCENT_COLOR = 'cyan';
 const MODEL_PICKER_HIGHLIGHT_BG = 'ansi256(87)';
 const MODEL_PICKER_META_INDENT = '     ';
@@ -71,7 +88,7 @@ function splitComposerInput(input, cursor, width) {
 function buildComposerInputLines(input, cursor, promptLabel, placeholder, width) {
     if (!input) {
         return [
-            line(span(promptLabel, { color: 'cyan' }), span(' ', { inverse: true }), span(placeholder, { color: 'gray' })),
+            line(span(promptLabel, { color: 'cyan' }), span(' ', { inverse: true }), span(placeholder, { color: mutedColor() })),
         ];
     }
     const labelWidth = promptLabel.length;
@@ -133,14 +150,14 @@ function diffLinePrefix(kind) {
             return ' ';
     }
 }
-function fitLine(content, maxWidth) {
+export function fitLine(content, maxWidth) {
     if (maxWidth <= 0)
         return '';
-    if (content.length <= maxWidth)
+    if (displayWidth(content) <= maxWidth)
         return content;
     if (maxWidth === 1)
         return '…';
-    return `${content.slice(0, maxWidth - 1)}…`;
+    return `${sliceToWidth(content, maxWidth - 1)}…`;
 }
 export function formatPromptDirectoryLabel(projectRoot, homeDir = process.env.HOME ?? '') {
     const trimmed = String(projectRoot ?? '').trim();
@@ -163,15 +180,18 @@ const CLIENT_SLASH_COMMANDS = [
     { command: '/model', description: 'Switch the active model' },
     { command: '/resume', description: 'Open the session picker to resume a previous session' },
     { command: '/jobs', description: 'Background jobs: pick to view output or kill' },
-    { command: '/clear', description: 'Clear conversation history' },
+    { command: '/new', description: 'start a new conversation; this session remains saved' },
     { command: '/exit', description: 'Quit the current session' },
 ];
 function buildModelPickerOptions(currentModelId, serverModels) {
     return serverModels.map((model) => ({
         id: model.id,
         label: model.label,
-        meta: model.id === currentModelId ? 'current' : '',
+        publicId: model.id,
+        costRating: model.costRating,
+        current: model.id === currentModelId,
         disabled: false,
+        note: model.description,
     }));
 }
 function getInputCommandToken(input) {
@@ -209,6 +229,9 @@ export function getSlashCommandSuggestions(input) {
 function formatModelLabel(modelId, serverModels) {
     return serverModels.find((model) => model.id === modelId)?.label ?? 'Unknown model';
 }
+function pickerModelLabel(modelId, serverModels) {
+    return formatModelLabel(modelId, serverModels).replace(/\s*\([^)]*\)\s*$/, '');
+}
 function filterResumeSessions(sessions, filter, serverModels) {
     const q = filter.trim().toLowerCase();
     if (!q)
@@ -232,26 +255,90 @@ 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 }));
+        return line(span('  ✔ ', { color: 'green' }), span(text, mutedStyle()));
     }
     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: mutedColor() }), isDarkTerminalBackground()
+        ? span(text, { color: mutedColor() })
+        : span(text));
+}
+const TURN_MESSAGE_PANEL_MAX_ROWS = 6;
+const TURN_MESSAGE_LABEL = {
+    queued: 'queued',
+    sending: 'Processing . . .',
+    delivered: 'delivered',
+};
+function turnMessageLine(message, width, progressTick) {
+    const DECORATION = 6;
+    const budget = Math.max(1, width - DECORATION);
+    const preferredLabel = Math.max(...Object.values(TURN_MESSAGE_LABEL).map((value) => displayWidth(value)));
+    const labelWidth = Math.min(Math.max(1, Math.floor(budget / 2)), Math.max(preferredLabel, displayWidth(message.note ?? '')));
+    const label = fitLine(message.note ?? TURN_MESSAGE_LABEL[message.state], labelWidth);
+    const textWidth = Math.max(1, budget - labelWidth);
+    const text = padToWidth(fitLine(`"${message.text}"`, textWidth), textWidth);
+    if (message.state === 'delivered') {
+        return line(span('  ● ', { color: 'green' }), span(text, { color: 'gray', dim: true }), span(`  ${label}`, { color: 'green' }));
+    }
+    if (message.state === 'sending') {
+        return line(span(`  ${todoInProgressGlyph(progressTick)} `, {
+            color: TODO_IN_PROGRESS_COLOR,
+        }), span(text, { color: TODO_IN_PROGRESS_COLOR, bold: true }), span(`  ${label}`, { color: TODO_IN_PROGRESS_COLOR }));
     }
-    return line(span('  ○ ', { color: 'gray' }), span(text));
+    return line(span('  ○ ', { color: 'cyan' }), span(text, { color: 'cyan' }), span(`  ${label}`, { color: 'gray' }));
+}
+export function buildTurnMessageLines(messages, width, progressTick = null) {
+    if (messages.length === 0)
+        return [];
+    const lines = [
+        line(span('Your messages', { color: 'cyan', bold: true })),
+    ];
+    const visible = messages.slice(-(TURN_MESSAGE_PANEL_MAX_ROWS - 1));
+    const hidden = messages.length - visible.length;
+    if (hidden > 0) {
+        lines.push(line(span(`  ● ${hidden} earlier`, { color: 'gray', dim: true })));
+    }
+    for (const message of visible) {
+        lines.push(turnMessageLine(message, width, progressTick));
+    }
+    return lines;
 }
 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 = [];
     if (header) {
-        lines.push(line(span('To-dos', { color: 'cyan', bold: true }), span(` · ${formatTodoProgress(items)}`, { color: 'gray' })));
+        lines.push(line(span('To-dos', { color: 'cyan', bold: true }), span(` · ${formatTodoProgress(items)}`, { color: mutedColor() })));
     }
     const itemRowBudget = TODO_PANEL_MAX_ROWS - (header ? 1 : 0);
     let collapsedDone = 0;
@@ -265,19 +352,16 @@ export function renderTodoListLines(items, width, { header = false } = {}) {
         collapsedDone = Math.min(over, leadingDone);
     }
     if (collapsedDone > 0) {
-        lines.push(line(span('  ✔ ', { color: 'green' }), span(`${collapsedDone} completed`, { color: 'gray', dim: true })));
+        lines.push(line(span('  ✔ ', { color: 'green' }), span(`${collapsedDone} completed`, mutedStyle())));
     }
     const remaining = items.slice(collapsedDone);
     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`, {
-            color: 'gray',
-            dim: true,
-        }));
+        lines.push(plainLine(`  … +${remaining.length - visible.length} more`, mutedStyle()));
     }
     return lines;
 }
@@ -290,18 +374,43 @@ 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;
 }
+const transcriptEntryLineCache = new WeakMap();
+const MAX_CACHED_TRANSCRIPT_WIDTHS = 2;
+function cachedTranscriptEntryLines(entry, width) {
+    let byWidth = transcriptEntryLineCache.get(entry);
+    if (!byWidth) {
+        byWidth = new Map();
+        transcriptEntryLineCache.set(entry, byWidth);
+    }
+    const cached = byWidth.get(width);
+    if (cached)
+        return cached;
+    const lines = renderTranscriptEntryLines(entry, width);
+    if (byWidth.size >= MAX_CACHED_TRANSCRIPT_WIDTHS) {
+        const oldest = byWidth.keys().next().value;
+        if (oldest !== undefined)
+            byWidth.delete(oldest);
+    }
+    byWidth.set(width, lines);
+    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) {
@@ -402,20 +511,26 @@ function composerFooterLines(state) {
         }));
         return lines;
     }
-    const helperText = state.busy
-        ? state.queuedMessage
-            ? 'Enter re-queues • ↑ edit queued • Esc cancels queued'
-            : 'Enter queues • Esc / Ctrl+C cancel turn'
-        : process.platform === 'win32'
-            ? 'Enter sends • Shift+Tab mode • Alt+V image • Esc cancel turn • Ctrl+C quits'
-            : process.platform === 'darwin'
-                ? 'Enter sends • Shift+Tab mode • Ctrl+V image • Esc cancel turn • Ctrl+C quits'
-                : 'Enter sends • Shift+Tab mode • Ctrl+V image • Esc cancel turn • Ctrl+C quits';
+    const busyHelperText = state.queuedMessage
+        ? 'Enter sends it to the agent • ↑ edit • Esc / Ctrl+C discard'
+        : state.input
+            ? 'Enter queues • Esc cancels turn • Ctrl+C clears draft'
+            : 'Enter queues • Esc / Ctrl+C cancel turn';
+    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 footerMuted = mutedStyle();
     const footerSpans = [
-        span(helperText, { color: 'gray', dim: true }),
-        span(' '.repeat(Math.max(1, 8)), { color: 'gray', dim: true }),
+        span(helperText, footerMuted),
+        span(' '.repeat(Math.max(1, 8)), footerMuted),
         span(agentLabel, {
             color: state.agentMode === 'plan' ? 'yellow' : 'cyan',
         }),
@@ -503,17 +618,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('')];
@@ -543,11 +689,19 @@ function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
         }
         lines.push(plainLine(''));
     }
-    lines.push(plainLine(`${WORKING_CLOCK_ICON} Working · ${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 turnMessages = state.turnMessages ?? [];
+    if (turnMessages.length > 0) {
+        lines.push(plainLine(''));
+        lines.push(...buildTurnMessageLines(turnMessages, width, todoProgressTick(nowMs)));
+    }
     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);
@@ -557,11 +711,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));
             }
         }
@@ -570,16 +725,30 @@ function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
     return lines;
 }
 function lineCharCount(row) {
-    return row.spans.reduce((total, item) => total + [...item.text].length, 0);
+    return row.spans.reduce((total, item) => total + displayWidth(item.text), 0);
 }
 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 }),
@@ -598,77 +767,113 @@ function padSpansToInnerWidth(spans, innerWidth, fill) {
 function modelPickerPanelSideLine(content, innerWidth) {
     return overlayPanelLine(content, innerWidth, MODEL_PICKER_BORDER_COLOR);
 }
+const MODEL_PICKER_COST_WIDTH = 6;
+const MODEL_PICKER_MODEL_WIDTH = 42;
+const MODEL_PICKER_SEPARATOR = ' │ ';
+const MODEL_PICKER_WIDE_MIN_WIDTH = 78;
 function modelPickerTopBorder(panelWidth) {
-    const prefix = '╭─ Models ';
-    const suffix = '╮';
-    const dashCount = Math.max(0, panelWidth - prefix.length - suffix.length);
-    return line(span('╭─ ', { color: MODEL_PICKER_BORDER_COLOR }), span('Models', { color: MODEL_PICKER_ACCENT_COLOR, bold: true }), span(` ${'─'.repeat(dashCount)}╮`, { color: MODEL_PICKER_BORDER_COLOR }));
+    const fullTitle = ' TheGitAI - Model Selection ';
+    const compactTitle = ' Model Selection ';
+    const title = panelWidth >= fullTitle.length + 4 ? fullTitle : compactTitle;
+    const available = Math.max(0, panelWidth - 2 - [...title].length);
+    const left = Math.floor(available / 2);
+    const right = available - left;
+    return line(span(`╭${'─'.repeat(left)}`, { color: MODEL_PICKER_BORDER_COLOR }), span(title, { color: MODEL_PICKER_ACCENT_COLOR, bold: true }), span(`${'─'.repeat(right)}╮`, { color: MODEL_PICKER_BORDER_COLOR }));
+}
+function modelPickerDivider(panelWidth) {
+    return plainLine(`├${'─'.repeat(panelWidth - 2)}┤`, {
+        color: MODEL_PICKER_BORDER_COLOR,
+    });
+}
+function modelPickerCell(text, width, style = {}) {
+    const fitted = fitLine(text, width);
+    return span(`${fitted}${' '.repeat(Math.max(0, width - [...fitted].length))}`, style);
+}
+function modelPickerCostText(rating) {
+    const steps = Math.max(1, Math.min(3, Math.round(rating)));
+    return '$'.repeat(steps);
+}
+function modelPickerNotesWidth(innerWidth) {
+    return Math.max(18, innerWidth -
+        MODEL_PICKER_MODEL_WIDTH -
+        MODEL_PICKER_COST_WIDTH -
+        MODEL_PICKER_SEPARATOR.length * 2);
+}
+function modelPickerModelSpans(option, selected, width, showCurrentTag, labelStyle, selectedStyle) {
+    const tag = option.current && showCurrentTag ? ' (current)' : '';
+    const labelWidth = Math.max(1, width - [...tag].length);
+    const label = fitLine(`${selected ? '▶ ' : '  '}${option.label}`, labelWidth);
+    const used = [...label].length + [...tag].length;
+    return [
+        span(label, { ...labelStyle, ...selectedStyle }),
+        span(tag, { color: 'gray', ...selectedStyle }),
+        span(' '.repeat(Math.max(0, width - used)), selectedStyle),
+    ];
 }
 function modelPickerItemLines(option, selected, innerWidth) {
-    const highlight = { bgColor: MODEL_PICKER_HIGHLIGHT_BG };
-    if (selected) {
-        const titleSpans = padSpansToInnerWidth([
-            span('▌', {
-                color: MODEL_PICKER_ACCENT_COLOR,
-                bold: true,
-                ...highlight,
-            }),
-            span('▶ ', {
-                color: MODEL_PICKER_ACCENT_COLOR,
-                bold: true,
-                ...highlight,
-            }),
-            span('o ', { color: MODEL_PICKER_ACCENT_COLOR, ...highlight }),
-            span(option.label, {
-                color: MODEL_PICKER_ACCENT_COLOR,
-                bold: true,
-                ...highlight,
-            }),
-        ], innerWidth, highlight);
-        const lines = [modelPickerPanelSideLine(line(...titleSpans), innerWidth)];
-        if (option.meta) {
-            const metaSpans = padSpansToInnerWidth([
-                span(`${MODEL_PICKER_META_INDENT}${option.meta}`, {
-                    color: 'gray',
-                    ...highlight,
-                }),
-            ], innerWidth, highlight);
-            lines.push(modelPickerPanelSideLine(line(...metaSpans), innerWidth));
-        }
-        return lines;
+    const selectedStyle = selected ? { bgColor: MODEL_PICKER_HIGHLIGHT_BG } : {};
+    const labelStyle = option.disabled
+        ? { color: 'gray' }
+        : selected
+            ? { color: 'cyan', bold: true }
+            : {};
+    const cost = modelPickerCostText(option.costRating);
+    if (innerWidth < MODEL_PICKER_WIDE_MIN_WIDTH) {
+        const modelWidth = Math.max(12, innerWidth - MODEL_PICKER_COST_WIDTH - 2);
+        const row = [
+            ...modelPickerModelSpans(option, selected, modelWidth, false, labelStyle, selectedStyle),
+            span('  ', selectedStyle),
+            modelPickerCell(cost, MODEL_PICKER_COST_WIDTH, selectedStyle),
+        ];
+        return [
+            modelPickerPanelSideLine(line(...padSpansToInnerWidth(row, innerWidth, selectedStyle)), innerWidth),
+        ];
     }
-    const labelColor = option.disabled ? 'gray' : MODEL_PICKER_ACCENT_COLOR;
-    const lines = [
-        modelPickerPanelSideLine(line(span('  o ', { color: labelColor }), span(option.label, { color: labelColor, bold: !option.disabled })), innerWidth),
+    const row = [
+        ...modelPickerModelSpans(option, selected, MODEL_PICKER_MODEL_WIDTH, true, labelStyle, selectedStyle),
+        span(MODEL_PICKER_SEPARATOR, { color: 'gray', ...selectedStyle }),
+        modelPickerCell(cost, MODEL_PICKER_COST_WIDTH, selectedStyle),
+        span(MODEL_PICKER_SEPARATOR, { color: 'gray', ...selectedStyle }),
+        modelPickerCell(option.note, modelPickerNotesWidth(innerWidth), {
+            color: 'gray',
+            ...selectedStyle,
+        }),
+    ];
+    return [
+        modelPickerPanelSideLine(line(...padSpansToInnerWidth(row, innerWidth, selectedStyle)), innerWidth),
     ];
-    if (option.meta) {
-        lines.push(modelPickerPanelSideLine(line(span(`${MODEL_PICKER_META_INDENT}${option.meta}`, { color: 'gray' })), innerWidth));
-    }
-    return lines;
 }
-function modelPickerSeparatorLine(innerWidth) {
-    return modelPickerPanelSideLine(line(span('┈'.repeat(Math.max(1, innerWidth)), { color: 'gray', dim: true })), innerWidth);
+function modelPickerHeaderLine(innerWidth) {
+    const heading = { color: MODEL_PICKER_ACCENT_COLOR, bold: true };
+    if (innerWidth < MODEL_PICKER_WIDE_MIN_WIDTH) {
+        return line(modelPickerCell('Model', Math.max(1, innerWidth), heading));
+    }
+    return line(modelPickerCell('Model', MODEL_PICKER_MODEL_WIDTH, heading), span(MODEL_PICKER_SEPARATOR, { color: 'gray' }), modelPickerCell('Cost', MODEL_PICKER_COST_WIDTH, heading), span(MODEL_PICKER_SEPARATOR, { color: 'gray' }), modelPickerCell('Notes', modelPickerNotesWidth(innerWidth), heading));
 }
-function buildModelPickerPanel(options, selectedIndex, width) {
+function buildModelPickerPanel(options, selectedIndex, width, availableHeight) {
     const panelWidth = Math.max(28, Math.min(width, MODEL_PICKER_PANEL_MAX_WIDTH));
     const innerWidth = Math.max(1, panelWidth - 4);
-    const margin = Array.from({ length: MODEL_PICKER_PANEL_MARGIN_LINES }, () => plainLine(''));
+    const compactBodyLineCount = options.length + 6;
+    const spacerLineCount = Math.max(0, options.length - 1);
+    const useRowSpacing = compactBodyLineCount + spacerLineCount <= availableHeight;
+    const bodyLineCount = compactBodyLineCount + (useRowSpacing ? spacerLineCount : 0);
+    const marginLineCount = Math.max(0, Math.min(MODEL_PICKER_PANEL_MARGIN_LINES, Math.floor((availableHeight - bodyLineCount) / 2)));
+    const margin = Array.from({ length: marginLineCount }, () => plainLine(''));
     const body = [
-        plainLine('TheGitAI - Model Selection', {
-            color: MODEL_PICKER_ACCENT_COLOR,
-            bold: true,
-        }),
-        plainLine(''),
         modelPickerTopBorder(panelWidth),
-        modelPickerPanelSideLine(plainLine(''), innerWidth),
+        modelPickerPanelSideLine(modelPickerHeaderLine(innerWidth), innerWidth),
+        modelPickerDivider(panelWidth),
     ];
     options.forEach((option, index) => {
         body.push(...modelPickerItemLines(option, index === selectedIndex, innerWidth));
-        if (index < options.length - 1) {
-            body.push(modelPickerSeparatorLine(innerWidth));
+        if (useRowSpacing && index < options.length - 1) {
+            body.push(modelPickerPanelSideLine(plainLine(''), innerWidth));
         }
     });
-    body.push(modelPickerPanelSideLine(plainLine(''), innerWidth), modelPickerPanelSideLine(line(span('─'.repeat(innerWidth), { color: MODEL_PICKER_BORDER_COLOR })), innerWidth), modelPickerPanelSideLine(plainLine('↑/↓ choose  •  Enter select  •  Esc cancel', { color: 'gray' }), innerWidth), plainLine(`╰${'─'.repeat(panelWidth - 2)}╯`, { color: MODEL_PICKER_BORDER_COLOR }));
+    const fullHint = '↑/↓ navigate  •  Enter select  •  Esc cancel';
+    const compactHint = '↑/↓  •  enter  •  esc';
+    const hint = [...fullHint].length <= innerWidth ? fullHint : compactHint;
+    body.push(modelPickerDivider(panelWidth), modelPickerPanelSideLine(plainLine(fitLine(hint, innerWidth), { color: 'gray' }), innerWidth), plainLine(`╰${'─'.repeat(panelWidth - 2)}╯`, { color: MODEL_PICKER_BORDER_COLOR }));
     return [...margin, ...body, ...margin];
 }
 function commandPaletteTopBorder(panelWidth) {
@@ -677,6 +882,9 @@ function commandPaletteTopBorder(panelWidth) {
     const dashCount = Math.max(0, panelWidth - prefix.length - suffix.length);
     return line(span('╭─ ', { color: MODEL_PICKER_BORDER_COLOR }), span('Commands', { color: MODEL_PICKER_ACCENT_COLOR, bold: true }), span(` ${'─'.repeat(dashCount)}╮`, { color: MODEL_PICKER_BORDER_COLOR }));
 }
+function commandPaletteSeparatorLine(innerWidth) {
+    return modelPickerPanelSideLine(line(span('┈'.repeat(Math.max(1, innerWidth)), { color: 'gray', dim: true })), innerWidth);
+}
 function commandPaletteItemLines(option, selected, innerWidth) {
     const highlight = { bgColor: MODEL_PICKER_HIGHLIGHT_BG };
     if (selected) {
@@ -729,16 +937,109 @@ function buildCommandPalettePanel(suggestions, selectedIndex, width) {
     suggestions.forEach((suggestion, index) => {
         body.push(...commandPaletteItemLines(suggestion, index === selectedIndex, innerWidth));
         if (index < suggestions.length - 1) {
-            body.push(modelPickerSeparatorLine(innerWidth));
+            body.push(commandPaletteSeparatorLine(innerWidth));
         }
     });
     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];
 }
-function buildOverlayLines(state, width, nowMs) {
+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);
@@ -758,75 +1059,117 @@ function buildOverlayLines(state, width, 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' },
-        ];
-        options.forEach((option, index) => {
+        const options = (prompt.options ?? []).map((option) => option.label);
+        options.forEach((label, index) => {
             const selected = index === state.approvalCursor;
             lines.push(line(span(selected ? '› ' : '  ', {
-                color: selected ? OVERLAY_BORDER_COLOR : 'gray',
-            }), span(option.value, {
-                color: selected ? OVERLAY_BORDER_COLOR : option.color,
-                bold: true,
-            }), span(` ${option.label}`, {
-                color: selected ? OVERLAY_BORDER_COLOR : undefined,
+                color: selected ? APPROVAL_ACCENT_COLOR : 'gray',
+            }), span(label, {
+                color: selected ? APPROVAL_ACCENT_COLOR : undefined,
+                bold: selected,
             })));
         });
-        lines.push(plainLine('Press y, a, or n • ↑/↓ moves • Enter confirms', {
+        if (padded)
+            lines.push(plainLine(''));
+        lines.push(plainLine('↑/↓ moves • Enter confirms • Esc denies', {
             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);
-        lines.push(...buildModelPickerPanel(options, state.modelPickerIndex, width));
+        lines.push(...buildModelPickerPanel(options, state.modelPickerIndex, width, height));
     }
     if (state.jobsPickerOpen) {
         lines.push(...buildJobsPickerLines(state, width, nowMs));
     }
     if (state.resumePickerOpen) {
         const filtered = filterResumeSessions(state.resumePickerSessions, state.resumePickerFilter, state.serverModels);
+        const pickerWidth = Math.max(20, width - 2);
+        const divider = () => plainLine('─'.repeat(pickerWidth), { color: 'gray', dim: true });
         lines.push(plainLine('Resume a previous session', { color: 'cyan', bold: true }));
         lines.push(line(span('Search: ', { color: 'gray' }), span(state.resumePickerFilter, {}), span('█', { color: 'gray' })));
-        for (const [index, session] of filtered.entries()) {
+        lines.push(divider());
+        const maxCards = Math.max(2, Math.min(filtered.length, Math.floor((height - 10) / 3)));
+        let start = 0;
+        if (filtered.length > maxCards) {
+            start = Math.min(Math.max(0, state.resumePickerIndex - Math.floor(maxCards / 2)), filtered.length - maxCards);
+        }
+        const visible = filtered.slice(start, start + maxCards);
+        if (start > 0) {
+            lines.push(plainLine(`  … ${start} newer`, { color: 'gray', dim: true }));
+        }
+        for (const [offset, session] of visible.entries()) {
+            const index = start + offset;
             const selected = index === state.resumePickerIndex;
-            const color = selected ? 'cyan' : undefined;
-            const model = truncate(formatModelLabel(session.modelId, state.serverModels), 26);
-            lines.push(plainLine(`${selected ? '› ' : '  '}${formatRelativeTime(session.updatedAt).padEnd(11)} ${(session.branch ?? '(no branch)').slice(0, 13).padEnd(14)} ${model.padEnd(26)} ${(session.lastUserMessage.slice(0, 40) || '(empty)')}`, { color, bold: selected }));
+            const prompt = singleLinePreview(session.lastUserMessage, pickerWidth) ||
+                session.name ||
+                `Session ${session.id}`;
+            lines.push(line(span(selected ? '› ' : '  ', { color: 'cyan' }), span(fitLine(prompt, Math.max(10, pickerWidth - 2)), selected
+                ? { color: 'cyan', bold: true }
+                : session.lastUserMessage
+                    ? {}
+                    : { color: 'gray', dim: true })));
+            const meta = [
+                formatRelativeTime(session.updatedAt),
+                pickerModelLabel(session.modelId, state.serverModels),
+                session.branch ?? null,
+            ]
+                .filter(Boolean)
+                .join(' · ');
+            lines.push(line(span('    '), span(fitLine(meta, Math.max(10, pickerWidth - 4)), {
+                color: selected ? 'cyan' : 'gray',
+                dim: !selected,
+            })));
+            if (offset < visible.length - 1)
+                lines.push(plainLine(''));
+        }
+        const remaining = filtered.length - (start + visible.length);
+        if (remaining > 0) {
+            lines.push(plainLine(`  … ${remaining} older`, { color: 'gray', dim: true }));
         }
         if (filtered.length === 0) {
             lines.push(plainLine('No sessions match.', { color: 'gray' }));
         }
-        lines.push(plainLine('↑/↓ move    enter resume    esc start new    ctrl+c quit', {
+        lines.push(divider());
+        lines.push(plainLine('↑/↓ move · enter resume · esc start new · ctrl+c quit', {
             color: 'gray',
         }));
     }
@@ -845,6 +1188,15 @@ function buildOverlayLines(state, width, 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;
@@ -857,28 +1209,34 @@ function sliceTranscriptLines(lines, maxLines, scrollOffset) {
 export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, nowMs = 0) {
     const contentWidth = Math.max(20, Math.floor(cols * 0.95) - 2);
     const gutter = Math.max(Math.floor((cols - contentWidth) / 2), 0);
-    const transcriptBlocks = state.transcript.map((entry) => renderTranscriptEntryLines(entry, contentWidth));
-    const transcriptLines = [];
-    transcriptBlocks.forEach((block, index) => {
-        if (index > 0) {
-            transcriptLines.push(plainLine(''));
-        }
-        transcriptLines.push(...block);
-    });
+    const buildTranscriptLines = (wrapWidth) => {
+        const blocks = state.transcript.map((entry) => cachedTranscriptEntryLines(entry, wrapWidth));
+        const lines = [];
+        blocks.forEach((block, index) => {
+            if (index > 0) {
+                lines.push(plainLine(''));
+            }
+            lines.push(...block);
+        });
+        return lines;
+    };
+    let transcriptLines = buildTranscriptLines(contentWidth);
     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 });
     }
-    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.queuedMessage) {
-            const preview = truncate(state.queuedMessage.body.trim().replace(/\s+/g, ' '), 60);
+        if (state.busy && state.status === 'Starting a new conversation...') {
+            composerLines.push(line(span('Starting a new conversation…', { color: 'gray', dim: true })));
+        }
+        else if (state.queuedMessage) {
             const imageCount = state.queuedMessage.imageAttachments.length;
-            composerLines.push(line(span(`↳ Queued · "${preview}"`, { color: 'gray', dim: true }), ...(imageCount > 0
-                ? [span(` +${imageCount} img`, { color: 'gray', dim: true })]
-                : []), span('   ↑ edit · esc cancel', { color: 'gray', dim: true })));
+            composerLines.push(line(span('Queued', { color: 'cyan', bold: true }), span('  Enter', { color: 'cyan', bold: true }), span(imageCount > 0
+                ? ' sends it with the next prompt'
+                : ' sends it to the agent now', { color: 'gray' }), span('  ·  ↑', { color: 'cyan', bold: true }), span(' edit', { color: 'gray' }), span('  ·  Esc', { color: 'cyan', bold: true }), span(' discard', { color: 'gray' })));
         }
         else {
             const promptLabel = state.busy ? 'queue> ' : '❯ ';
@@ -892,14 +1250,32 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, n
             lines: [...composerLines, plainLine(''), ...composerFooterLines(state)],
         });
     }
-    const overlayLines = buildOverlayLines(state, contentWidth, 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);
+    let transcriptScrollLimit = Math.max(0, transcriptLines.length - transcriptBudget);
+    if (transcriptScrollLimit > 0 && contentWidth > 2) {
+        transcriptLines = buildTranscriptLines(contentWidth - 2);
+        transcriptScrollLimit = Math.max(0, transcriptLines.length - transcriptBudget);
+    }
     const transcriptScrollOffset = Math.min(Math.max(state.transcriptScrollOffset, 0), transcriptScrollLimit);
     sections.unshift({
         kind: 'transcript',