@thegitai/cli 1.0.0-preview.5 → 1.0.0-preview.51

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

@@ -1,8 +1,13 @@
-import { agentModeLabel } from '../../agent-mode.js';
-import { truncate } from '../../utils.js';
+import { agentModeColor, agentModeLabelTiers, agentModeShortLabel, } from '../../agent-mode.js';
+import { singleLinePreview, truncate } from '../../utils.js';
 import { formatClientTokenUsage } from '../repl.js';
+import { getHiddenSlashCommandCount, getSlashCommandSuggestions, } from '../slash-commands.js';
 import { renderFormattedBodyLines, renderPreformattedBodyLines, } from './markdown-render.js';
-import { displayWidth, line, plainLine, sliceToWidth, 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 { buildShortcutGroups, shortcutsPanelAvailable, } from './shortcuts.js';
+import { buildUserInputOverlayLines, } from './user-input.js';
+import { composerPromptLabel, frameContentWidth, splitComposerInput, } from './composer-layout.js';
 const WORKING_CLOCK_ICON = '◷';
 const BRAILLE_SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴'];
 const TODO_PANEL_MAX_ROWS = 12;
@@ -10,12 +15,41 @@ 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 FOOTER_HINT_MIN_GAP = 2;
+const FOOTER_HELP_HINT = '? for shortcuts';
+const FOOTER_CANCEL_HINT = 'esc cancels turn';
+const FOOTER_NOTIFICATIONS_ON = 'Notifications ON';
+const FOOTER_NOTIFICATIONS_OFF = 'Notifications OFF';
+export function footerNotificationHint(status) {
+    const text = String(status ?? '').trim();
+    if (text === 'Notifications on')
+        return FOOTER_NOTIFICATIONS_ON;
+    if (text === 'Notifications off')
+        return FOOTER_NOTIFICATIONS_OFF;
+    return '';
+}
+const FOOTER_CYCLE_HINT = ' (shift+tab to cycle)';
 const OVERLAY_PANEL_MAX_WIDTH = 86;
+const USER_INPUT_PANEL_MAX_WIDTH = 120;
 const OVERLAY_PANEL_MARGIN_LINES = 2;
+const OVERLAY_PANEL_MARGIN_MIN_ROWS = 30;
 const OVERLAY_BORDER_COLOR = 'yellow';
+const USER_INPUT_BORDER_COLOR = 'cyan';
 const OVERLAY_WARNING_COLOR = 'ansi256(208)';
 const MODEL_PICKER_PANEL_MAX_WIDTH = 144;
 const MODEL_PICKER_PANEL_MARGIN_LINES = 2;
@@ -23,75 +57,74 @@ const MODEL_PICKER_BORDER_COLOR = 'cyan';
 const MODEL_PICKER_ACCENT_COLOR = 'cyan';
 const MODEL_PICKER_HIGHLIGHT_BG = 'ansi256(87)';
 const MODEL_PICKER_META_INDENT = '     ';
-function splitComposerInput(input, cursor, width) {
-    const safeWidth = Math.max(1, width);
-    const normalizedCursor = Math.min(Math.max(cursor, 0), input.length);
-    const rows = [''];
-    let cursorRow = 0;
-    let cursorCol = 0;
-    let capturedCursor = false;
-    const captureCursor = () => {
-        if (capturedCursor)
-            return;
-        const current = rows[rows.length - 1] ?? '';
-        if (current.length >= safeWidth) {
-            rows.push('');
-            cursorRow = rows.length - 1;
-            cursorCol = 0;
+const COMPOSER_MARKER_PATTERN = /\[Image #\d+\]|\[Pasted Text: [^\]\n]*\]/g;
+function composerMarkerMask(text) {
+    const mask = new Array(text.length).fill(false);
+    for (const match of text.matchAll(COMPOSER_MARKER_PATTERN)) {
+        const start = match.index ?? 0;
+        for (let offset = start; offset < start + match[0].length; offset += 1) {
+            mask[offset] = true;
         }
-        else {
-            cursorRow = rows.length - 1;
-            cursorCol = current.length;
-        }
-        capturedCursor = true;
+    }
+    return mask;
+}
+function composerRowSpans(text, mask, cursorCol) {
+    const spans = [];
+    const push = (value, marker, cursor) => {
+        if (!value)
+            return;
+        spans.push(span(value, {
+            ...(marker ? { color: 'cyan' } : {}),
+            ...(cursor ? { inverse: true } : {}),
+        }));
     };
-    for (let index = 0; index < input.length; index += 1) {
-        const char = input[index] ?? '';
-        if (char !== '\n' &&
-            char !== '\r' &&
-            (rows[rows.length - 1]?.length ?? 0) >= safeWidth) {
-            rows.push('');
+    let cut = 0;
+    const flushTo = (end) => {
+        while (cut < end) {
+            const marker = mask[cut] ?? false;
+            let runEnd = cut + 1;
+            while (runEnd < end && (mask[runEnd] ?? false) === marker)
+                runEnd += 1;
+            push(text.slice(cut, runEnd), marker, false);
+            cut = runEnd;
         }
-        if (index === normalizedCursor) {
-            captureCursor();
-        }
-        if (char === '\r')
-            continue;
-        if (char === '\n') {
-            rows.push('');
-            continue;
-        }
-        rows[rows.length - 1] = `${rows[rows.length - 1] ?? ''}${char}`;
-    }
-    if (!capturedCursor) {
-        captureCursor();
+    };
+    if (cursorCol === null) {
+        flushTo(text.length);
+        return spans;
     }
-    return { cursorCol, cursorRow, rows };
+    flushTo(Math.min(cursorCol, text.length));
+    push(text[cursorCol] ?? ' ', mask[cursorCol] ?? false, true);
+    cut = Math.min(cursorCol + 1, text.length);
+    flushTo(text.length);
+    return spans;
 }
 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;
     const inputWidth = Math.max(1, width - labelWidth);
     const { cursorCol, cursorRow, rows } = splitComposerInput(input, cursor, inputWidth);
     const firstRow = Math.min(Math.max(cursorRow - COMPOSER_INPUT_MAX_ROWS + 1, 0), Math.max(rows.length - COMPOSER_INPUT_MAX_ROWS, 0));
+    const rowOffsets = [];
+    let consumed = 0;
+    for (const row of rows) {
+        rowOffsets.push(consumed);
+        consumed += row.length;
+    }
+    const mask = composerMarkerMask(rows.join(''));
     return rows
         .slice(firstRow, firstRow + COMPOSER_INPUT_MAX_ROWS)
         .map((text, index) => {
         const absoluteRow = firstRow + index;
+        const rowStart = rowOffsets[absoluteRow] ?? 0;
         const label = index === 0
             ? span(promptLabel, { color: 'cyan' })
             : span(' '.repeat(labelWidth));
-        if (absoluteRow !== cursorRow) {
-            return line(label, span(text));
-        }
-        const before = text.slice(0, cursorCol);
-        const cursorChar = text[cursorCol] ?? ' ';
-        const after = text.slice(cursorCol + 1);
-        return line(label, span(before), span(cursorChar, { inverse: true }), span(after));
+        return line(label, ...composerRowSpans(text, mask.slice(rowStart, rowStart + text.length), absoluteRow === cursorRow ? cursorCol : null));
     });
 }
 function getEntryColor(kind) {
@@ -157,15 +190,6 @@ export function formatPromptDirectoryLabel(projectRoot, homeDir = process.env.HO
 export function formatPromptSessionIdLabel(showSessionId, sessionId) {
     return showSessionId ? String(sessionId ?? '').trim() : '';
 }
-const CLIENT_SLASH_COMMANDS = [
-    { command: '/help', description: 'Show available chat commands' },
-    { command: '/usage', description: 'Show account usage percentage and reset times' },
-    { 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: '/exit', description: 'Quit the current session' },
-];
 function buildModelPickerOptions(currentModelId, serverModels) {
     return serverModels.map((model) => ({
         id: model.id,
@@ -177,41 +201,13 @@ function buildModelPickerOptions(currentModelId, serverModels) {
         note: model.description,
     }));
 }
-function getInputCommandToken(input) {
-    const trimmed = String(input ?? '').trimStart();
-    const match = trimmed.match(/^\/[^\s]*/);
-    const token = match?.[0] ?? '';
-    if (token.indexOf('/', 1) !== -1)
-        return '';
-    return token;
-}
-function scoreSlashCommand(option, token) {
-    if (option.command === token)
-        return 0;
-    if (option.command.startsWith(token))
-        return 1;
-    if (option.command.includes(token.slice(1)))
-        return 2;
-    if (option.description.toLowerCase().includes(token.slice(1)))
-        return 3;
-    return 4;
-}
-export function getSlashCommandSuggestions(input) {
-    const token = getInputCommandToken(input).toLowerCase();
-    if (!token)
-        return [];
-    const ranked = [...CLIENT_SLASH_COMMANDS].sort((a, b) => {
-        const scoreDiff = scoreSlashCommand(a, token) - scoreSlashCommand(b, token);
-        if (scoreDiff !== 0)
-            return scoreDiff;
-        return a.command.localeCompare(b.command);
-    });
-    const matches = ranked.filter((option) => scoreSlashCommand(option, token) < 4);
-    return (matches.length ? matches : ranked).slice(0, 5);
-}
+export { getSlashCommandSuggestions };
 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)
@@ -235,26 +231,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: '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 })));
     }
-    return line(span('  ○ ', { color: 'gray' }), span(text));
+    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;
@@ -268,19 +328,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;
 }
@@ -293,20 +350,45 @@ 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 ([^•]+))?$/);
+    const match = usage.match(/^Session tokens • in ([^•]+) • out ([^•]+)(?: • think ([^•]+))? • cache ([^•]+)(?: • write ([^•]+))?$/);
     if (!match) {
         return [plainLine(usage, { color: 'cyan' })];
     }
@@ -324,15 +406,16 @@ function tokenUsageLines(usage) {
     if (match[5]) {
         spans.push(span(' Write ', { color: 'gray' }), span(match[5].trim(), { color: 'yellow' }));
     }
-    if (match[6]) {
-        spans.push(span(' Index ', { color: 'gray' }), span(match[6].trim(), { color: 'blue' }));
-    }
     return [line(...spans)];
 }
+export const AGENT_MODE_LOCKED_STATUS = 'Mode locked while the agent is working';
 function footerTransientStatus(status) {
     const text = String(status ?? '').trim();
     if (!text)
         return null;
+    if (text === AGENT_MODE_LOCKED_STATUS) {
+        return { color: 'yellow', text, icon: '!' };
+    }
     if (text === 'Copied selection' || text === 'Copied link') {
         return { color: 'green', text, icon: '✓' };
     }
@@ -349,10 +432,11 @@ function backgroundJobIndicatorSpans(state) {
     if (runningCount === 0)
         return [];
     const noun = runningCount === 1 ? 'shell' : 'shells';
+    const hint = state.busy ? ' · ctrl+b' : ' · /jobs';
     return [
         span('   ', { color: 'gray', dim: true }),
         span(`● ${runningCount} ${noun} running`, { color: 'green', bold: true }),
-        span(' · /jobs', { color: 'gray', dim: true }),
+        span(hint, { color: 'gray', dim: true }),
     ];
 }
 function todoIndicatorSpans(state) {
@@ -372,9 +456,47 @@ function todoIndicatorSpans(state) {
         }),
     ];
 }
-function composerFooterLines(state) {
+function composerFooterRightHints(state) {
+    const cancelHint = state.busy && !state.queuedMessage && !state.userInputPrompt
+        ? FOOTER_CANCEL_HINT
+        : '';
+    const helpHint = shortcutsPanelAvailable(state) ? FOOTER_HELP_HINT : '';
+    const notifyHint = footerNotificationHint(state.transientStatus);
+    const join = (...parts) => parts.filter(Boolean).join('  ·  ');
+    const tiers = [];
+    if (notifyHint) {
+        tiers.push(join(cancelHint, notifyHint, helpHint));
+        tiers.push(join(notifyHint, helpHint));
+        tiers.push(join(cancelHint, notifyHint));
+        tiers.push(notifyHint);
+    }
+    if (cancelHint && helpHint)
+        tiers.push(`${cancelHint}  ·  ${helpHint}`);
+    if (cancelHint)
+        tiers.push(cancelHint);
+    if (helpHint)
+        tiers.push(helpHint);
+    tiers.push('');
+    return tiers.filter((tier, index) => tiers.indexOf(tier) === index);
+}
+export function fitComposerFooterRow({ modeLabels, modeLabelFallback, cycleHint, rightHints, leadWidth, tailWidth, contentWidth, }) {
+    const candidates = rightHints.flatMap((rightHint) => (cycleHint ? [cycleHint, ''] : ['']).flatMap((cycle) => modeLabels.map((modeLabel) => ({ modeLabel, cycleHint: cycle, rightHint }))));
+    const hasTail = (rightHint) => Boolean(rightHint) || tailWidth > 0;
+    const rowWidth = (choice, gap) => leadWidth +
+        displayWidth(choice.modeLabel) +
+        displayWidth(choice.cycleHint) +
+        (hasTail(choice.rightHint) ? gap : 0) +
+        displayWidth(choice.rightHint) +
+        tailWidth;
+    const chosen = candidates.find((choice) => rowWidth(choice, FOOTER_HINT_MIN_GAP) <= contentWidth) ?? { modeLabel: modeLabelFallback, cycleHint: '', rightHint: '' };
+    const gap = hasTail(chosen.rightHint)
+        ? Math.max(FOOTER_HINT_MIN_GAP, contentWidth - rowWidth(chosen, 0))
+        : 0;
+    return { ...chosen, gap };
+}
+function composerFooterLines(state, contentWidth) {
     const visibleSessionId = formatPromptSessionIdLabel(state.showSessionId, state.sessionId);
-    const transientStatus = footerTransientStatus(state.status);
+    const transientStatus = footerTransientStatus(state.transientStatus ?? null);
     const lines = [
         line(span('TheGitAI', { color: 'cyan', bold: true }), span(' • ', { color: 'gray', dim: true }), span(formatPromptDirectoryLabel(state.projectRoot), { color: 'cyan' }), ...(transientStatus
             ? [
@@ -392,11 +514,6 @@ function composerFooterLines(state) {
             ? [span(`   ${visibleSessionId}`, { color: 'gray', dim: true })]
             : []), ...backgroundJobIndicatorSpans(state), ...todoIndicatorSpans(state)),
         plainLine(''),
-        plainLine(formatModelLabel(state.currentModelId, state.serverModels), {
-            color: 'cyan',
-            dim: true,
-        }),
-        plainLine(''),
     ];
     if (state.exitConfirmUntil != null) {
         lines.push(plainLine(state.status || 'Press Ctrl+C again to quit.', {
@@ -405,28 +522,36 @@ 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 agentLabel = agentModeLabel(state.agentMode).padEnd(AGENT_MODE_LABEL_WIDTH);
     const tokenUsageText = state.tokenUsage || formatClientTokenUsage(null);
-    const footerSpans = [
-        span(helperText, { color: 'gray', dim: true }),
-        span(' '.repeat(Math.max(1, 8)), { color: 'gray', dim: true }),
-        span(agentLabel, {
-            color: state.agentMode === 'plan' ? 'yellow' : 'cyan',
-        }),
-        span(tokenUsageText, { color: 'cyan' }),
-    ];
-    lines.push(line(...footerSpans));
+    lines.push(composerFooterModeLine(state, contentWidth, formatModelLabel(state.currentModelId, state.serverModels), tokenUsageText
+        ? displayWidth(tokenUsageText) + FOOTER_USAGE_SEPARATOR.length
+        : 0, tokenUsageText
+        ? [
+            span(FOOTER_USAGE_SEPARATOR, mutedStyle()),
+            span(tokenUsageText, { color: 'cyan' }),
+        ]
+        : []));
     return lines;
 }
+function composerFooterModeLine(state, contentWidth, modelLabel, usageWidth, usageSpans) {
+    const lead = modelLabel ? `${modelLabel}${FOOTER_MODEL_SEPARATOR}` : '';
+    const row = fitComposerFooterRow({
+        modeLabels: agentModeLabelTiers(state.agentMode),
+        modeLabelFallback: agentModeShortLabel(state.agentMode),
+        cycleHint: state.busy ? '' : FOOTER_CYCLE_HINT,
+        rightHints: composerFooterRightHints(state),
+        leadWidth: displayWidth(lead),
+        tailWidth: usageWidth,
+        contentWidth,
+    });
+    const footerMuted = mutedStyle();
+    return line(...(lead ? [span(lead, { color: 'cyan', dim: true })] : []), span(row.modeLabel, {
+        color: agentModeColor(state.agentMode),
+        bold: state.agentMode === 'auto-accept',
+    }), ...(row.cycleHint ? [span(row.cycleHint, footerMuted)] : []), ...(row.gap ? [span(' '.repeat(row.gap), footerMuted)] : []), ...(row.rightHint ? [span(row.rightHint, footerMuted)] : []), ...usageSpans);
+}
+const FOOTER_USAGE_SEPARATOR = '  ';
+const FOOTER_MODEL_SEPARATOR = '   ';
 export function formatJobElapsed(elapsedMs) {
     const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000));
     if (totalSeconds < 60)
@@ -468,15 +593,29 @@ function jobStatusDescriptor(job, nowMs) {
         ? { glyph: '✓', color: 'green', text: `exited (0) · ran ${ran}` }
         : { glyph: '✖', color: 'red', text: `exited (${job.exitCode ?? 1}) · ran ${ran}` };
 }
-function buildJobsPickerLines(state, width, nowMs) {
+const JOBS_PICKER_CHROME_ROWS = 2;
+const JOBS_PICKER_MIN_ROWS = 8;
+function buildJobsPickerLines(state, width, height, nowMs) {
     const jobs = state.backgroundJobs ?? [];
+    const bodyBudget = Math.max(1, height - JOBS_PICKER_CHROME_ROWS);
     const lines = [
         plainLine('Background jobs', { color: 'cyan', bold: true }),
     ];
     if (jobs.length === 0) {
         lines.push(plainLine('No background jobs in this session.', { color: 'gray' }));
     }
-    for (const [index, job] of jobs.entries()) {
+    let start = 0;
+    let visible = jobs;
+    if (jobs.length > bodyBudget) {
+        start = Math.min(Math.max(0, state.jobsPickerIndex - Math.floor(bodyBudget / 2)), jobs.length - bodyBudget);
+        visible = jobs.slice(start, start + bodyBudget);
+        if (start > 0) {
+            lines.push(plainLine(`  … ${start} newer`, { color: 'gray', dim: true }));
+        }
+    }
+    const detailBudget = Math.max(0, bodyBudget - visible.length - (start > 0 ? 1 : 0));
+    for (const [offset, job] of visible.entries()) {
+        const index = start + offset;
         const selected = index === state.jobsPickerIndex;
         const expanded = state.jobsPickerExpandedId === job.id;
         const { glyph, color, text } = jobStatusDescriptor(job, nowMs);
@@ -485,10 +624,11 @@ function buildJobsPickerLines(state, width, nowMs) {
             bold: selected,
         }), span(` ${text}`, { color: 'gray' })));
         if (expanded) {
-            const detailLines = (job.detailLines ?? []).length
+            const allDetail = (job.detailLines ?? []).length
                 ? job.detailLines ?? []
                 : backgroundJobPreviewLines(job, 3);
-            if (detailLines.length === 0) {
+            const detailLines = allDetail.slice(-detailBudget);
+            if (detailBudget > 0 && detailLines.length === 0) {
                 lines.push(plainLine('    (no output captured)', { color: 'gray' }));
             }
             else {
@@ -501,22 +641,71 @@ function buildJobsPickerLines(state, width, nowMs) {
             }
         }
     }
+    const remaining = jobs.length - (start + visible.length);
+    if (remaining > 0) {
+        lines.push(plainLine(`  … ${remaining} older`, { color: 'gray', dim: true }));
+    }
     lines.push(plainLine('↑/↓ move    enter expand/collapse    k kill    esc close', {
         color: 'gray',
     }));
     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 buildRecoveryStatusLines(status, width) {
+    const [label = '', ...rest] = status.split(' · ');
+    const detail = rest.join(' · ');
+    const labelSpan = span(fitLine(label, Math.max(1, width - 2)), { color: 'yellow', bold: true });
+    if (!detail)
+        return [line(span('● ', { color: 'yellow' }), labelSpan)];
+    if (displayWidth(`● ${label} · ${detail}`) <= width) {
+        return [line(span('● ', { color: 'yellow' }), labelSpan, span(` · ${detail}`))];
+    }
+    return [
+        line(span('● ', { color: 'yellow' }), labelSpan),
+        ...wrapText(detail, Math.max(1, width - 2)).map((row) => plainLine(`  ${row}`)),
+    ];
+}
+function buildLiveLines(state, width, spinnerFrame, elapsedSeconds, nowMs) {
     if (!state.busy)
         return [];
     const lines = [plainLine('')];
@@ -546,11 +735,22 @@ 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' }));
+    if (state.recoveryStatus) {
+        lines.push(...buildRecoveryStatusLines(state.recoveryStatus, width));
+    }
+    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);
@@ -560,11 +760,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));
             }
         }
@@ -579,10 +780,24 @@ function overlayPanelLine(row, width, color) {
     const padding = Math.max(0, width - lineCharCount(row));
     return line(span('│ ', { color }), ...row.spans, span(' '.repeat(padding)), span(' │', { color }));
 }
-function buildOverlayPanel(rows, width, color) {
-    const panelWidth = Math.max(24, Math.min(width, OVERLAY_PANEL_MAX_WIDTH));
+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, maxWidth = OVERLAY_PANEL_MAX_WIDTH) {
+    const panelWidth = Math.max(24, Math.min(width, maxWidth));
     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 }),
@@ -603,7 +818,6 @@ function modelPickerPanelSideLine(content, innerWidth) {
 }
 const MODEL_PICKER_COST_WIDTH = 6;
 const MODEL_PICKER_MODEL_WIDTH = 42;
-const MODEL_PICKER_NUMBER_WIDTH = 4;
 const MODEL_PICKER_SEPARATOR = ' │ ';
 const MODEL_PICKER_WIDE_MIN_WIDTH = 78;
 function modelPickerTopBorder(panelWidth) {
@@ -630,7 +844,6 @@ function modelPickerCostText(rating) {
 }
 function modelPickerNotesWidth(innerWidth) {
     return Math.max(18, innerWidth -
-        MODEL_PICKER_NUMBER_WIDTH -
         MODEL_PICKER_MODEL_WIDTH -
         MODEL_PICKER_COST_WIDTH -
         MODEL_PICKER_SEPARATOR.length * 2);
@@ -653,12 +866,10 @@ function modelPickerItemLines(option, selected, innerWidth) {
         : selected
             ? { color: 'cyan', bold: true }
             : {};
-    const numberCell = modelPickerCell(String(option.publicId), MODEL_PICKER_NUMBER_WIDTH, { color: 'cyan', bold: selected, ...selectedStyle });
     const cost = modelPickerCostText(option.costRating);
     if (innerWidth < MODEL_PICKER_WIDE_MIN_WIDTH) {
-        const modelWidth = Math.max(12, innerWidth - MODEL_PICKER_NUMBER_WIDTH - MODEL_PICKER_COST_WIDTH - 2);
+        const modelWidth = Math.max(12, innerWidth - MODEL_PICKER_COST_WIDTH - 2);
         const row = [
-            numberCell,
             ...modelPickerModelSpans(option, selected, modelWidth, false, labelStyle, selectedStyle),
             span('  ', selectedStyle),
             modelPickerCell(cost, MODEL_PICKER_COST_WIDTH, selectedStyle),
@@ -668,7 +879,6 @@ function modelPickerItemLines(option, selected, innerWidth) {
         ];
     }
     const row = [
-        numberCell,
         ...modelPickerModelSpans(option, selected, MODEL_PICKER_MODEL_WIDTH, true, labelStyle, selectedStyle),
         span(MODEL_PICKER_SEPARATOR, { color: 'gray', ...selectedStyle }),
         modelPickerCell(cost, MODEL_PICKER_COST_WIDTH, selectedStyle),
@@ -685,9 +895,9 @@ function modelPickerItemLines(option, selected, innerWidth) {
 function modelPickerHeaderLine(innerWidth) {
     const heading = { color: MODEL_PICKER_ACCENT_COLOR, bold: true };
     if (innerWidth < MODEL_PICKER_WIDE_MIN_WIDTH) {
-        return line(modelPickerCell('#', MODEL_PICKER_NUMBER_WIDTH, heading), modelPickerCell('Model', Math.max(1, innerWidth - MODEL_PICKER_NUMBER_WIDTH), heading));
+        return line(modelPickerCell('Model', Math.max(1, innerWidth), heading));
     }
-    return line(modelPickerCell('#', MODEL_PICKER_NUMBER_WIDTH, heading), 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));
+    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, availableHeight) {
     const panelWidth = Math.max(28, Math.min(width, MODEL_PICKER_PANEL_MAX_WIDTH));
@@ -715,6 +925,71 @@ function buildModelPickerPanel(options, selectedIndex, width, availableHeight) {
     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];
 }
+const SHORTCUTS_PANEL_MAX_WIDTH = 96;
+const SHORTCUTS_KEY_COLUMN_MIN = 10;
+function shortcutsTopBorder(panelWidth) {
+    const fullTitle = ' TheGitAI - Keyboard & mouse ';
+    const compactTitle = ' Shortcuts ';
+    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 }));
+}
+export function buildShortcutsPanel(groups, width, availableHeight) {
+    const panelWidth = Math.max(28, Math.min(width, SHORTCUTS_PANEL_MAX_WIDTH));
+    const innerWidth = Math.max(1, panelWidth - 4);
+    const keyWidth = Math.max(SHORTCUTS_KEY_COLUMN_MIN, ...groups.flatMap((group) => group.rows.map((row) => displayWidth(row.keys))));
+    const side = (row) => overlayPanelLine(row, innerWidth, MODEL_PICKER_BORDER_COLOR);
+    const groupLines = (group, spaced) => [
+        ...(spaced ? [side(plainLine(''))] : []),
+        side(plainLine(fitLine(group.title, innerWidth), {
+            color: MODEL_PICKER_ACCENT_COLOR,
+            bold: true,
+        })),
+        ...group.rows.map((row) => side(line(span(`  ${row.keys}${' '.repeat(Math.max(0, keyWidth - displayWidth(row.keys)))}  `, { bold: true }), span(fitLine(row.description, Math.max(1, innerWidth - keyWidth - 4)), { color: 'gray' })))),
+    ];
+    const chromeRows = 4;
+    const budget = Math.max(1, availableHeight - chromeRows);
+    const spacedBody = groups.flatMap((group, index) => groupLines(group, index > 0));
+    const plainBody = groups.flatMap((group) => groupLines(group, false));
+    let body = spacedBody;
+    let hidden = 0;
+    if (spacedBody.length > budget) {
+        body = plainBody;
+        if (plainBody.length > budget) {
+            body = [];
+            hidden = groups.reduce((total, group) => total + group.rows.length, 0);
+            for (const group of groups) {
+                const whole = groupLines(group, false);
+                if (body.length + whole.length <= budget) {
+                    body = [...body, ...whole];
+                    hidden -= group.rows.length;
+                    continue;
+                }
+                const room = budget - body.length - 1;
+                if (room >= 1) {
+                    const kept = group.rows.slice(0, room);
+                    body = [...body, ...groupLines({ ...group, rows: kept }, false)];
+                    hidden -= kept.length;
+                }
+                break;
+            }
+        }
+    }
+    const hint = hidden > 0 ? `esc close  •  ${hidden} more in /help` : 'esc close';
+    return [
+        shortcutsTopBorder(panelWidth),
+        ...body,
+        plainLine(`├${'─'.repeat(panelWidth - 2)}┤`, {
+            color: MODEL_PICKER_BORDER_COLOR,
+        }),
+        side(plainLine(fitLine(hint, innerWidth), { color: 'gray' })),
+        plainLine(`╰${'─'.repeat(panelWidth - 2)}╯`, {
+            color: MODEL_PICKER_BORDER_COLOR,
+        }),
+    ];
+}
 function commandPaletteTopBorder(panelWidth) {
     const prefix = '╭─ Commands ';
     const suffix = '╮';
@@ -760,7 +1035,7 @@ function commandPaletteItemLines(option, selected, innerWidth) {
         modelPickerPanelSideLine(line(span(`${MODEL_PICKER_META_INDENT}${option.description}`, { color: 'gray' })), innerWidth),
     ];
 }
-function buildCommandPalettePanel(suggestions, selectedIndex, width) {
+function buildCommandPalettePanel(suggestions, selectedIndex, hiddenCount, width) {
     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(''));
@@ -779,13 +1054,117 @@ function buildCommandPalettePanel(suggestions, selectedIndex, width) {
             body.push(commandPaletteSeparatorLine(innerWidth));
         }
     });
+    if (hiddenCount > 0) {
+        body.push(commandPaletteSeparatorLine(innerWidth), modelPickerPanelSideLine(plainLine(`  ${hiddenCount} more  •  keep typing to narrow`, {
+            color: 'gray',
+            dim: true,
+        }), 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];
 }
+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.generatingImage
+        ? 'Generating image'
+        : 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 userInputPanelInnerWidth(width) {
+    return Math.max(1, Math.max(24, Math.min(width, USER_INPUT_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);
@@ -805,75 +1184,120 @@ function buildOverlayLines(state, width, height, nowMs) {
                 : line(span('         '), span(text, { color: OVERLAY_BORDER_COLOR })));
         });
         lines.push(plainLine(''));
-        if (prompt.prompt.trim()) {
-            lines.push(plainLine(prompt.prompt.trim(), { color: 'gray' }));
-        }
+        lines.push(...wrapText(SUDO_PASSWORD_ASSURANCE, innerWidth).map((text) => plainLine(text, { color: SUDO_ASSURANCE_COLOR })));
+        lines.push(plainLine(''));
         lines.push(line(span('Password: ', { color: 'cyan', bold: true }), span('•'.repeat(Math.min(prompt.passwordLength, passwordWidth)), {
             color: 'cyan',
         }), span(' ', { inverse: true })));
         lines.push(plainLine('Press Enter to submit, Escape to cancel', { color: 'gray' }));
-        return buildOverlayPanel(lines, width, OVERLAY_BORDER_COLOR);
+        return buildOverlayPanel(lines, width, OVERLAY_BORDER_COLOR, height);
+    }
+    if (state.userInputPrompt) {
+        if (height < 3) {
+            return [];
+        }
+        return buildOverlayPanel(buildUserInputOverlayLines(state.userInputPrompt, userInputPanelInnerWidth(width), overlayPanelContentBudget(height)), width, USER_INPUT_BORDER_COLOR, height, USER_INPUT_PANEL_MAX_WIDTH);
     }
     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.shortcutsOpen) {
+        lines.push(...buildShortcutsPanel(buildShortcutGroups(), width, height));
     }
     if (state.modelPickerOpen) {
         const options = buildModelPickerOptions(state.currentModelId, state.serverModels);
         lines.push(...buildModelPickerPanel(options, state.modelPickerIndex, width, height));
     }
     if (state.jobsPickerOpen) {
-        lines.push(...buildJobsPickerLines(state, width, nowMs));
+        lines.push(...buildJobsPickerLines(state, width, height, 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',
         }));
     }
@@ -885,13 +1309,22 @@ function buildOverlayLines(state, width, height, nowMs) {
         state.input.trimStart().startsWith('/') &&
         !state.input.includes(' ') &&
         suggestions.length > 0) {
-        lines.push(...buildCommandPalettePanel(suggestions, state.commandCursor, width));
+        lines.push(...buildCommandPalettePanel(suggestions, state.commandCursor, getHiddenSlashCommandCount(state.input), width));
     }
     return lines;
 }
 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 = frameContentWidth(cols);
+    const liveRows = buildLiveLines(state, contentWidth, spinnerFrame, elapsedSeconds, nowMs).length;
+    const overlayHeight = Math.max(0, rows - liveRows - composerFooterLines(state, contentWidth).length);
+    return {
+        width: userInputPanelInnerWidth(contentWidth),
+        maxRows: overlayPanelContentBudget(overlayHeight),
+    };
+}
 function sliceTranscriptLines(lines, maxLines, scrollOffset) {
     if (maxLines <= 0 || lines.length <= maxLines) {
         return lines;
@@ -902,33 +1335,43 @@ function sliceTranscriptLines(lines, maxLines, scrollOffset) {
     return lines.slice(start, start + maxLines);
 }
 export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, nowMs = 0) {
-    const contentWidth = Math.max(20, Math.floor(cols * 0.95) - 2);
+    const contentWidth = frameContentWidth(cols);
     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);
-    if (!state.resumePickerOpen && !state.modelPickerOpen && !state.jobsPickerOpen && !overlayActive) {
+    const overlayActive = Boolean(state.approvalPrompt || state.sudoPrompt || state.userInputPrompt);
+    if (!state.resumePickerOpen &&
+        !state.modelPickerOpen &&
+        !state.jobsPickerOpen &&
+        !state.shortcutsOpen &&
+        !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> ' : '❯ ';
+            const promptLabel = composerPromptLabel(state);
             const placeholder = state.busy
                 ? 'Type to queue the next message'
                 : 'Type a request or /help';
@@ -936,17 +1379,37 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, n
         }
         sections.push({
             kind: 'composer',
-            lines: [...composerLines, plainLine(''), ...composerFooterLines(state)],
+            lines: [...composerLines, plainLine(''), ...composerFooterLines(state, contentWidth)],
         });
     }
-    const overlayLines = buildOverlayLines(state, contentWidth, rows, nowMs);
+    if (state.userInputPrompt) {
+        sections.push({
+            kind: 'busyFooter',
+            lines: composerFooterLines(state, contentWidth),
+        });
+    }
+    const overlayHeight = state.userInputPrompt
+        ? Math.max(0, rows - countSectionLines(sections))
+        : state.jobsPickerOpen || state.shortcutsOpen
+            ? Math.max(Math.min(rows, JOBS_PICKER_MIN_ROWS), 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',