@thegitai/cli 1.0.0-beta.9 → 1.0.0-preview.10

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

@@ -1,10 +1,12 @@
 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, plainLine, sliceToWidth, span, wrapText, } from './text.js';
 const WORKING_CLOCK_ICON = '◷';
 const BRAILLE_SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴'];
+const TODO_PANEL_MAX_ROWS = 12;
+const TODO_IN_PROGRESS_COLOR = 'ansi256(214)';
 const COMMAND_PREVIEW_LINES = 10;
 const WORKING_TOOL_PREVIEW_ROWS = 3;
 const TRANSCRIPT_DIFF_PREVIEW_LINES = 24;
@@ -15,9 +17,9 @@ const OVERLAY_PANEL_MAX_WIDTH = 86;
 const OVERLAY_PANEL_MARGIN_LINES = 2;
 const OVERLAY_BORDER_COLOR = 'yellow';
 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 = '     ';
@@ -131,6 +133,15 @@ function diffLinePrefix(kind) {
             return ' ';
     }
 }
+export function fitLine(content, maxWidth) {
+    if (maxWidth <= 0)
+        return '';
+    if (displayWidth(content) <= maxWidth)
+        return content;
+    if (maxWidth === 1)
+        return '…';
+    return `${sliceToWidth(content, maxWidth - 1)}…`;
+}
 export function formatPromptDirectoryLabel(projectRoot, homeDir = process.env.HOME ?? '') {
     const trimmed = String(projectRoot ?? '').trim();
     if (!trimmed)
@@ -151,21 +162,28 @@ const CLIENT_SLASH_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: '/clear', description: 'Clear conversation history' },
+    { command: '/jobs', description: 'Background jobs: pick to view output or kill' },
+    { 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) {
     const trimmed = String(input ?? '').trimStart();
     const match = trimmed.match(/^\/[^\s]*/);
-    return match?.[0] ?? '';
+    const token = match?.[0] ?? '';
+    if (token.indexOf('/', 1) !== -1)
+        return '';
+    return token;
 }
 function scoreSlashCommand(option, token) {
     if (option.command === token)
@@ -194,6 +212,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)
@@ -217,6 +238,55 @@ function formatRelativeTime(isoDate) {
         return `${hours}h ago`;
     return `${Math.floor(hours / 24)}d ago`;
 }
+function todoItemLine(item, width) {
+    const text = fitLine(item.text, Math.max(8, width - 5));
+    if (item.status === 'completed') {
+        return line(span('  ✔ ', { color: 'green' }), span(text, { color: 'gray', dim: true }));
+    }
+    if (item.status === 'in_progress') {
+        return line(span('  ◐ ', { color: TODO_IN_PROGRESS_COLOR }), span(text, { color: TODO_IN_PROGRESS_COLOR, bold: true }));
+    }
+    return line(span('  ○ ', { color: 'gray' }), span(text));
+}
+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 } = {}) {
+    if (items.length === 0)
+        return [];
+    const lines = [];
+    if (header) {
+        lines.push(line(span('To-dos', { color: 'cyan', bold: true }), span(` · ${formatTodoProgress(items)}`, { color: 'gray' })));
+    }
+    const itemRowBudget = TODO_PANEL_MAX_ROWS - (header ? 1 : 0);
+    let collapsedDone = 0;
+    if (items.length > itemRowBudget) {
+        const over = items.length - (itemRowBudget - 1);
+        let leadingDone = 0;
+        while (leadingDone < items.length &&
+            items[leadingDone].status === 'completed') {
+            leadingDone += 1;
+        }
+        collapsedDone = Math.min(over, leadingDone);
+    }
+    if (collapsedDone > 0) {
+        lines.push(line(span('  ✔ ', { color: 'green' }), span(`${collapsedDone} completed`, { color: 'gray', dim: true })));
+    }
+    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));
+    }
+    if (remaining.length > visible.length) {
+        lines.push(plainLine(`  … +${remaining.length - visible.length} more`, {
+            color: 'gray',
+            dim: true,
+        }));
+    }
+    return lines;
+}
 export function renderTranscriptEntryLines(entry, width) {
     const color = getEntryColor(entry.kind);
     const lines = [
@@ -228,11 +298,14 @@ export function renderTranscriptEntryLines(entry, width) {
     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(truncate(diffLine.content || ' ', width - 4), {
+            lines.push(line(span(`${diffLinePrefix(diffLine.kind)} `, { color: diffLineColor(diffLine.kind) }), span(fitLine(diffLine.content || ' ', width - 4), {
                 color: diffLineColor(diffLine.kind),
             })));
         }
     }
+    if (entry.todoList && entry.todoList.length > 0) {
+        lines.push(...renderTodoListLines(entry.todoList, width));
+    }
     return lines;
 }
 function tokenUsageLines(usage) {
@@ -274,6 +347,34 @@ function footerTransientStatus(status) {
     }
     return null;
 }
+function backgroundJobIndicatorSpans(state) {
+    const runningCount = (state.backgroundJobs ?? []).filter((job) => job.status === 'running').length;
+    if (runningCount === 0)
+        return [];
+    const noun = runningCount === 1 ? 'shell' : 'shells';
+    return [
+        span('   ', { color: 'gray', dim: true }),
+        span(`● ${runningCount} ${noun} running`, { color: 'green', bold: true }),
+        span(' · /jobs', { color: 'gray', dim: true }),
+    ];
+}
+function todoIndicatorSpans(state) {
+    if (state.busy)
+        return [];
+    const items = state.todos ?? [];
+    if (items.length === 0)
+        return [];
+    const done = items.filter((item) => item.status === 'completed').length;
+    if (done >= items.length)
+        return [];
+    return [
+        span('   ', { color: 'gray', dim: true }),
+        span(`◐ ${done}/${items.length} to-dos`, {
+            color: TODO_IN_PROGRESS_COLOR,
+            bold: true,
+        }),
+    ];
+}
 function composerFooterLines(state) {
     const visibleSessionId = formatPromptSessionIdLabel(state.showSessionId, state.sessionId);
     const transientStatus = footerTransientStatus(state.status);
@@ -292,7 +393,7 @@ function composerFooterLines(state) {
             ]
             : []), ...(visibleSessionId
             ? [span(`   ${visibleSessionId}`, { color: 'gray', dim: true })]
-            : [])),
+            : []), ...backgroundJobIndicatorSpans(state), ...todoIndicatorSpans(state)),
         plainLine(''),
         plainLine(formatModelLabel(state.currentModelId, state.serverModels), {
             color: 'cyan',
@@ -307,15 +408,18 @@ function composerFooterLines(state) {
         }));
         return lines;
     }
+    const busyHelperText = state.queuedMessage
+        ? 'Enter re-queues • ↑ edit queued • Esc / Ctrl+C clear queued'
+        : state.input
+            ? 'Enter queues • Esc cancels turn • Ctrl+C clears draft'
+            : 'Enter queues • Esc / Ctrl+C cancel turn';
     const helperText = state.busy
-        ? state.queuedMessage
-            ? 'Enter re-queues • ↑ edit queued • Esc cancels queued'
-            : 'Enter queues • Esc / Ctrl+C cancel turn'
+        ? busyHelperText
         : process.platform === 'win32'
-            ? 'Enter sends • Shift+Tab mode • Alt+V image • Esc cancel turn • Ctrl+C quits'
+            ? '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 quits'
-                : '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 clears / quits'
+                : 'Enter sends • Shift+Tab mode • Ctrl+V image • Esc cancel turn • Ctrl+C clears / quits';
     const agentLabel = agentModeLabel(state.agentMode).padEnd(AGENT_MODE_LABEL_WIDTH);
     const tokenUsageText = state.tokenUsage || formatClientTokenUsage(null);
     const footerSpans = [
@@ -329,6 +433,95 @@ function composerFooterLines(state) {
     lines.push(line(...footerSpans));
     return lines;
 }
+export function formatJobElapsed(elapsedMs) {
+    const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000));
+    if (totalSeconds < 60)
+        return `${totalSeconds}s`;
+    const minutes = Math.floor(totalSeconds / 60);
+    if (minutes < 60) {
+        return `${minutes}m${String(totalSeconds % 60).padStart(2, '0')}s`;
+    }
+    return `${Math.floor(minutes / 60)}h${String(minutes % 60).padStart(2, '0')}m`;
+}
+function backgroundJobPreviewLines(job, maxTailLines) {
+    const lines = [];
+    const first = String(job.firstOutputLine ?? '').trim();
+    if (first) {
+        lines.push(first);
+    }
+    for (const outputLine of (job.tailLines ?? []).slice(-maxTailLines)) {
+        const trimmed = String(outputLine ?? '').trim();
+        if (!trimmed)
+            continue;
+        if (lines.length === 1 && trimmed === first)
+            continue;
+        lines.push(trimmed);
+    }
+    return lines;
+}
+function jobStatusDescriptor(job, nowMs) {
+    const ran = formatJobElapsed((job.endedAt ?? (nowMs > 0 ? nowMs : Date.now())) - job.startedAt);
+    if (job.status === 'running') {
+        return { glyph: '●', color: 'green', text: `running · ${ran}` };
+    }
+    if (job.status === 'killed') {
+        return { glyph: '■', color: 'gray', text: `killed · ran ${ran}` };
+    }
+    if (job.status === 'error') {
+        return { glyph: '✖', color: 'red', text: 'failed to start' };
+    }
+    return job.exitCode === 0
+        ? { 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 = state.backgroundJobs ?? [];
+    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()) {
+        const selected = index === state.jobsPickerIndex;
+        const expanded = state.jobsPickerExpandedId === job.id;
+        const { glyph, color, text } = jobStatusDescriptor(job, nowMs);
+        lines.push(line(span(selected ? '› ' : '  ', { color: selected ? 'cyan' : 'gray' }), span(`${glyph} `, { color }), span(job.id.padEnd(6), { color: selected ? 'cyan' : undefined, bold: selected }), span(` ${truncate(job.command, Math.max(12, width - 34)).padEnd(Math.max(12, Math.min(40, width - 34)))}`, {
+            color: selected ? 'cyan' : undefined,
+            bold: selected,
+        }), span(` ${text}`, { color: 'gray' })));
+        if (expanded) {
+            const detailLines = (job.detailLines ?? []).length
+                ? job.detailLines ?? []
+                : backgroundJobPreviewLines(job, 3);
+            if (detailLines.length === 0) {
+                lines.push(plainLine('    (no output captured)', { color: 'gray' }));
+            }
+            else {
+                for (const outputLine of detailLines) {
+                    lines.push(line(span('    │ ', { color: 'gray', dim: true }), span(truncate(outputLine, Math.max(8, width - 8)), {
+                        color: 'gray',
+                        dim: true,
+                    })));
+                }
+            }
+        }
+    }
+    lines.push(plainLine('↑/↓ move    enter expand/collapse    k kill    esc close', {
+        color: 'gray',
+    }));
+    return lines;
+}
+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))
+        : '';
+    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) {
     if (!state.busy)
         return [];
@@ -342,39 +535,56 @@ function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
         }, width));
         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' }));
-    const visibleTitle = state.thinkingTitle.trim();
-    const visibleNotes = state.thinkingNotes.filter(Boolean).slice(-THINKING_NOTE_PREVIEW_ROWS);
-    if (visibleTitle || visibleNotes.length > 0) {
-        lines.push(plainLine(''));
-        lines.push(line(span(`${BRAILLE_SPINNER_FRAMES[spinnerFrame % BRAILLE_SPINNER_FRAMES.length]} `, {
-            color: 'green',
-        }), span('Thinking', { color: 'green', bold: true }), ...(visibleTitle ? [span(` · ${visibleTitle}`, { color: 'ansi256(248)' })] : [])));
-        for (const note of visibleNotes) {
-            lines.push(line(span('│  ', { color: 'green' }), span(note, { color: 'ansi256(248)' })));
-        }
-    }
     const toolEntries = state.workingTools.slice(-WORKING_TOOL_PREVIEW_ROWS);
     if (toolEntries.length > 0) {
-        lines.push(plainLine(''));
         for (const entry of toolEntries) {
             const color = getEntryColor(entry.kind);
             const body = entry.body.split('\n')[0]?.trim();
             lines.push(line(span('● ', { color }), span(entry.title, { color, bold: true }), ...(body ? [span(` ${truncate(body, 140)}`, { color })] : [])));
         }
+        lines.push(plainLine(''));
     }
     const logLines = state.commandLog.slice(-COMMAND_PREVIEW_LINES);
     if (logLines.length > 0) {
-        lines.push(plainLine(''));
+        lines.push(plainLine('⋮ output', { color: 'gray', dim: true }));
         for (const outputLine of logLines) {
             lines.push(plainLine(outputLine, { color: 'gray', dim: true }));
         }
+        lines.push(plainLine(''));
+    }
+    const busyLabel = state.analyzingImages > 0
+        ? state.analyzingImages > 1
+            ? 'Analyzing images'
+            : 'Analyzing image'
+        : 'Working';
+    lines.push(plainLine(`${WORKING_CLOCK_ICON} ${busyLabel} · ${elapsedSeconds < 60 ? `${elapsedSeconds}s` : `${Math.floor(elapsedSeconds / 60)}m ${String(elapsedSeconds % 60).padStart(2, '0')}s`}`, { color: 'yellow' }));
+    const todos = state.todos ?? [];
+    if (todos.length > 0) {
+        lines.push(plainLine(''));
+        lines.push(...renderTodoListLines(todos, width, { header: true }));
+    }
+    const visibleTitle = state.thinkingTitle.trim();
+    const visibleNotes = state.thinkingNotes.filter(Boolean);
+    if (visibleTitle || visibleNotes.length > 0) {
+        lines.push(plainLine(''));
+        if (todos.length > 0) {
+            const minimalText = visibleTitle && visibleTitle !== 'Thinking'
+                ? visibleTitle
+                : (visibleNotes[visibleNotes.length - 1] ?? '');
+            lines.push(thinkingHeaderLine(spinnerFrame, minimalText, width));
+        }
+        else {
+            lines.push(thinkingHeaderLine(spinnerFrame, visibleTitle, width));
+            for (const note of visibleNotes.slice(-THINKING_NOTE_PREVIEW_ROWS)) {
+                lines.push(thinkingNoteLine(note, width));
+            }
+        }
     }
     lines.push(plainLine(''));
     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));
@@ -402,77 +612,118 @@ 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_NUMBER_WIDTH = 4;
+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_NUMBER_WIDTH -
+        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 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 row = [
+            numberCell,
+            ...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 = [
+        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),
+        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_PICKER_NUMBER_WIDTH, heading), modelPickerCell('Model', Math.max(1, innerWidth - MODEL_PICKER_NUMBER_WIDTH), 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));
 }
-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) {
@@ -481,6 +732,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) {
@@ -533,13 +787,13 @@ 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) {
+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);
@@ -612,22 +866,61 @@ function buildOverlayLines(state, width) {
     }
     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',
         }));
     }
@@ -655,7 +948,7 @@ function sliceTranscriptLines(lines, maxLines, scrollOffset) {
     const start = Math.max(0, lines.length - maxLines - offset);
     return lines.slice(start, start + maxLines);
 }
-export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds) {
+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));
@@ -672,12 +965,12 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds) {
         sections.push({ kind: 'live', lines: liveLines });
     }
     const overlayActive = Boolean(state.approvalPrompt || state.sudoPrompt);
-    // Composer stays visible while busy unless a blocking overlay is active. When
-    // one message is already queued, the queued chip is shown here in place of the
-    // input box (only one message is ever held) so there is no empty prompt.
-    if (!state.resumePickerOpen && !state.modelPickerOpen && !overlayActive) {
+    if (!state.resumePickerOpen && !state.modelPickerOpen && !state.jobsPickerOpen && !overlayActive) {
         const composerLines = [];
-        if (state.queuedMessage) {
+        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 preview = truncate(state.queuedMessage.body.trim().replace(/\s+/g, ' '), 60);
             const imageCount = state.queuedMessage.imageAttachments.length;
             composerLines.push(line(span(`↳ Queued · "${preview}"`, { color: 'gray', dim: true }), ...(imageCount > 0
@@ -696,7 +989,7 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds) {
             lines: [...composerLines, plainLine(''), ...composerFooterLines(state)],
         });
     }
-    const overlayLines = buildOverlayLines(state, contentWidth);
+    const overlayLines = buildOverlayLines(state, contentWidth, rows, nowMs);
     if (overlayLines.length > 0) {
         sections.push({ kind: 'overlay', lines: overlayLines });
     }