@thegitai/cli 1.0.0-beta.1

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

@@ -0,0 +1,718 @@
+import { agentModeLabel } from '../../agent-mode.js';
+import { truncate } from '../../utils.js';
+import { formatClientTokenUsage } from '../repl.js';
+import { renderFormattedBodyLines, renderPreformattedBodyLines, } from './markdown-render.js';
+import { line, plainLine, span, wrapText } from './text.js';
+const WORKING_CLOCK_ICON = '◷';
+const BRAILLE_SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴'];
+const COMMAND_PREVIEW_LINES = 10;
+const WORKING_TOOL_PREVIEW_ROWS = 3;
+const TRANSCRIPT_DIFF_PREVIEW_LINES = 24;
+const THINKING_NOTE_PREVIEW_ROWS = 3;
+const COMPOSER_INPUT_MAX_ROWS = 6;
+const AGENT_MODE_LABEL_WIDTH = 16;
+const OVERLAY_PANEL_MAX_WIDTH = 86;
+const OVERLAY_PANEL_MARGIN_LINES = 2;
+const OVERLAY_BORDER_COLOR = 'yellow';
+const OVERLAY_WARNING_COLOR = 'ansi256(208)';
+const MODEL_PICKER_PANEL_MAX_WIDTH = 86;
+const MODEL_PICKER_PANEL_MARGIN_LINES = 2;
+const MODEL_PICKER_BORDER_COLOR = 'gray';
+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;
+        }
+        else {
+            cursorRow = rows.length - 1;
+            cursorCol = current.length;
+        }
+        capturedCursor = 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('');
+        }
+        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();
+    }
+    return { cursorCol, cursorRow, rows };
+}
+function buildComposerInputLines(input, cursor, promptLabel, placeholder, width) {
+    if (!input) {
+        return [
+            line(span(promptLabel, { color: 'cyan' }), span(' ', { inverse: true }), span(placeholder, { color: 'gray' })),
+        ];
+    }
+    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));
+    return rows
+        .slice(firstRow, firstRow + COMPOSER_INPUT_MAX_ROWS)
+        .map((text, index) => {
+        const absoluteRow = firstRow + index;
+        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));
+    });
+}
+function getEntryColor(kind) {
+    switch (kind) {
+        case 'assistant':
+        case 'diff':
+            return 'green';
+        case 'error':
+            return 'red';
+        case 'system':
+            return 'yellow';
+        case 'tool':
+            return 'blue';
+        case 'user':
+            return 'cyan';
+    }
+}
+function diffLineColor(kind) {
+    switch (kind) {
+        case 'add':
+            return 'green';
+        case 'remove':
+            return 'red';
+        case 'hunk':
+            return 'cyan';
+        case 'context':
+            return 'gray';
+    }
+}
+function diffLinePrefix(kind) {
+    switch (kind) {
+        case 'add':
+            return '+';
+        case 'remove':
+            return '-';
+        case 'hunk':
+            return '@@';
+        case 'context':
+            return ' ';
+    }
+}
+export function formatPromptDirectoryLabel(projectRoot, homeDir = process.env.HOME ?? '') {
+    const trimmed = String(projectRoot ?? '').trim();
+    if (!trimmed)
+        return '.';
+    const normalizedHome = String(homeDir ?? '').trim().replace(/\/+$/, '');
+    if (normalizedHome && trimmed === normalizedHome)
+        return '~';
+    if (normalizedHome && trimmed.startsWith(`${normalizedHome}/`)) {
+        return `~/${trimmed.slice(normalizedHome.length + 1)}`;
+    }
+    return trimmed;
+}
+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: '/clear', description: 'Clear conversation history' },
+    { 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' : '',
+        disabled: false,
+    }));
+}
+function getInputCommandToken(input) {
+    const trimmed = String(input ?? '').trimStart();
+    const match = trimmed.match(/^\/[^\s]*/);
+    return match?.[0] ?? '';
+}
+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);
+}
+function formatModelLabel(modelId, serverModels) {
+    return serverModels.find((model) => model.id === modelId)?.label ?? 'Unknown model';
+}
+function filterResumeSessions(sessions, filter, serverModels) {
+    const q = filter.trim().toLowerCase();
+    if (!q)
+        return sessions;
+    return sessions.filter((s) => {
+        const branch = (s.branch ?? '').toLowerCase();
+        const model = formatModelLabel(s.modelId, serverModels).toLowerCase();
+        const conv = s.lastUserMessage.toLowerCase();
+        return branch.includes(q) || model.includes(q) || conv.includes(q);
+    });
+}
+function formatRelativeTime(isoDate) {
+    const diff = Date.now() - new Date(isoDate).getTime();
+    const minutes = Math.floor(diff / 60000);
+    if (minutes < 1)
+        return 'just now';
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    return `${Math.floor(hours / 24)}d ago`;
+}
+export function renderTranscriptEntryLines(entry, width) {
+    const color = getEntryColor(entry.kind);
+    const lines = [
+        line(span('● ', { color }), span(entry.title, { color, bold: true })),
+    ];
+    lines.push(...(entry.preformatted
+        ? 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(truncate(diffLine.content || ' ', width - 4), {
+                color: diffLineColor(diffLine.kind),
+            })));
+        }
+    }
+    return lines;
+}
+function tokenUsageLines(usage) {
+    const match = usage.match(/^Session tokens • in ([^•]+) • out ([^•]+)(?: • think ([^•]+))? • cache ([^•]+)(?: • write ([^•]+))?(?: • index ([^•]+))?$/);
+    if (!match) {
+        return [plainLine(usage, { color: 'cyan' })];
+    }
+    const spans = [
+        span('Tokens', { color: 'cyan', bold: true }),
+        span(' In ', { color: 'gray' }),
+        span(match[1]?.trim() ?? '', { color: 'green' }),
+        span(' Out ', { color: 'gray' }),
+        span(match[2]?.trim() ?? '', { color: 'magenta' }),
+    ];
+    if (match[3]) {
+        spans.push(span(' Think ', { color: 'gray' }), span(match[3].trim(), { color: 'magenta' }));
+    }
+    spans.push(span(' Cache ', { color: 'gray' }), span(match[4]?.trim() ?? '', { color: 'yellow' }));
+    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)];
+}
+function footerTransientStatus(status) {
+    const text = String(status ?? '').trim();
+    if (!text)
+        return null;
+    if (text === 'Copied selection' || text === 'Copied link') {
+        return { color: 'green', text, icon: '✓' };
+    }
+    if (text === 'Opened link') {
+        return { color: 'cyan', text, icon: '↗' };
+    }
+    if (text === 'Could not open link' || text === 'Clipboard has no text to paste') {
+        return { color: 'yellow', text, icon: '!' };
+    }
+    return null;
+}
+function composerFooterLines(state) {
+    const visibleSessionId = formatPromptSessionIdLabel(state.showSessionId, state.sessionId);
+    const transientStatus = footerTransientStatus(state.status);
+    const lines = [
+        line(span('TheGitAI', { color: 'cyan', bold: true }), span(' • ', { color: 'gray', dim: true }), span(formatPromptDirectoryLabel(state.projectRoot), { color: 'cyan' }), ...(transientStatus
+            ? [
+                span('   ', { color: 'gray', dim: true }),
+                span(transientStatus.text, {
+                    color: transientStatus.color,
+                    bold: true,
+                }),
+                span(` ${transientStatus.icon}`, {
+                    color: transientStatus.color,
+                    bold: true,
+                }),
+            ]
+            : []), ...(visibleSessionId
+            ? [span(`   ${visibleSessionId}`, { color: 'gray', dim: true })]
+            : [])),
+        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.', {
+            color: 'red',
+            bold: true,
+        }));
+        return lines;
+    }
+    const helperText = state.busy
+        ? state.queuedMessage
+            ? 'Enter re-queues • ↑ edit queued • Esc cancels queued'
+            : 'Enter queues • Esc / Ctrl+C cancel turn'
+        : 'Enter sends • Shift+Tab mode • 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));
+    return lines;
+}
+function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
+    if (!state.busy)
+        return [];
+    const lines = [plainLine('')];
+    if (state.activeTurnInput) {
+        lines.push(...renderTranscriptEntryLines({
+            body: state.activeTurnInput,
+            kind: 'user',
+            preformatted: state.activeTurnInputPreformatted,
+            title: 'You',
+        }, 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 })] : [])));
+        }
+    }
+    const logLines = state.commandLog.slice(-COMMAND_PREVIEW_LINES);
+    if (logLines.length > 0) {
+        lines.push(plainLine(''));
+        for (const outputLine of logLines) {
+            lines.push(plainLine(outputLine, { color: 'gray', dim: true }));
+        }
+    }
+    lines.push(plainLine(''));
+    return lines;
+}
+function lineCharCount(row) {
+    return row.spans.reduce((total, item) => total + [...item.text].length, 0);
+}
+function overlayPanelLine(row, width, color) {
+    const padding = Math.max(0, width - lineCharCount(row));
+    return line(span('│ ', { color }), ...row.spans, span(' '.repeat(padding)), span(' │', { color }));
+}
+function buildOverlayPanel(rows, width, color) {
+    const panelWidth = Math.max(24, Math.min(width, OVERLAY_PANEL_MAX_WIDTH));
+    const innerWidth = Math.max(1, panelWidth - 4);
+    const margin = Array.from({ length: OVERLAY_PANEL_MARGIN_LINES }, () => plainLine(''));
+    return [
+        ...margin,
+        plainLine(`╭${'─'.repeat(panelWidth - 2)}╮`, { color }),
+        ...rows.map((row) => overlayPanelLine(row, innerWidth, color)),
+        plainLine(`╰${'─'.repeat(panelWidth - 2)}╯`, { color }),
+        ...margin,
+    ];
+}
+function padSpansToInnerWidth(spans, innerWidth, fill) {
+    const used = spans.reduce((total, part) => total + [...part.text].length, 0);
+    const pad = Math.max(0, innerWidth - used);
+    if (pad === 0)
+        return spans;
+    return [...spans, span(' '.repeat(pad), fill)];
+}
+function modelPickerPanelSideLine(content, innerWidth) {
+    return overlayPanelLine(content, innerWidth, MODEL_PICKER_BORDER_COLOR);
+}
+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 }));
+}
+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 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),
+    ];
+    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 buildModelPickerPanel(options, selectedIndex, 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(''));
+    const body = [
+        plainLine('TheGitAI - Model Selection', {
+            color: MODEL_PICKER_ACCENT_COLOR,
+            bold: true,
+        }),
+        plainLine(''),
+        modelPickerTopBorder(panelWidth),
+        modelPickerPanelSideLine(plainLine(''), innerWidth),
+    ];
+    options.forEach((option, index) => {
+        body.push(...modelPickerItemLines(option, index === selectedIndex, innerWidth));
+        if (index < options.length - 1) {
+            body.push(modelPickerSeparatorLine(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 }));
+    return [...margin, ...body, ...margin];
+}
+function commandPaletteTopBorder(panelWidth) {
+    const prefix = '╭─ Commands ';
+    const suffix = '╮';
+    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 commandPaletteItemLines(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(option.command, {
+                color: MODEL_PICKER_ACCENT_COLOR,
+                bold: true,
+                ...highlight,
+            }),
+        ], innerWidth, highlight);
+        const metaSpans = padSpansToInnerWidth([
+            span(`${MODEL_PICKER_META_INDENT}${option.description}`, {
+                color: 'gray',
+                ...highlight,
+            }),
+        ], innerWidth, highlight);
+        return [
+            modelPickerPanelSideLine(line(...titleSpans), innerWidth),
+            modelPickerPanelSideLine(line(...metaSpans), innerWidth),
+        ];
+    }
+    return [
+        modelPickerPanelSideLine(line(span('  ', { color: 'gray' }), span(option.command, { color: MODEL_PICKER_ACCENT_COLOR })), innerWidth),
+        modelPickerPanelSideLine(line(span(`${MODEL_PICKER_META_INDENT}${option.description}`, { color: 'gray' })), innerWidth),
+    ];
+}
+function buildCommandPalettePanel(suggestions, selectedIndex, 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(''));
+    const body = [
+        plainLine('TheGitAI - Commands', {
+            color: MODEL_PICKER_ACCENT_COLOR,
+            bold: true,
+        }),
+        plainLine(''),
+        commandPaletteTopBorder(panelWidth),
+        modelPickerPanelSideLine(plainLine(''), innerWidth),
+    ];
+    suggestions.forEach((suggestion, index) => {
+        body.push(...commandPaletteItemLines(suggestion, index === selectedIndex, innerWidth));
+        if (index < suggestions.length - 1) {
+            body.push(modelPickerSeparatorLine(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) {
+    const lines = [];
+    const panelWidth = Math.max(24, Math.min(width, OVERLAY_PANEL_MAX_WIDTH));
+    const innerWidth = Math.max(1, panelWidth - 4);
+    if (state.sudoPrompt) {
+        const prompt = state.sudoPrompt;
+        const passwordWidth = Math.max(0, innerWidth - 11);
+        lines.push(plainLine('Sudo Authentication Required', {
+            color: OVERLAY_BORDER_COLOR,
+            bold: true,
+        }));
+        lines.push(...wrapText('Agents can make mistakes. This command may change your system. Proceed at your own risk.', innerWidth).map((text) => plainLine(text, { color: OVERLAY_WARNING_COLOR })));
+        lines.push(plainLine(''));
+        const commandLines = wrapText(prompt.command, Math.max(1, innerWidth - 9));
+        commandLines.forEach((text, index) => {
+            lines.push(index === 0
+                ? line(span('Command: ', {
+                    color: OVERLAY_BORDER_COLOR,
+                    bold: true,
+                }), span(text, { color: OVERLAY_BORDER_COLOR }))
+                : 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(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);
+    }
+    if (state.approvalPrompt) {
+        const prompt = state.approvalPrompt;
+        lines.push(plainLine(prompt.title, {
+            color: OVERLAY_BORDER_COLOR,
+            bold: true,
+        }));
+        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 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 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,
+            })));
+        });
+        lines.push(plainLine('Press y, a, or n • ↑/↓ moves • Enter confirms', {
+            color: 'gray',
+        }));
+        return buildOverlayPanel(lines, width, OVERLAY_BORDER_COLOR);
+    }
+    if (state.modelPickerOpen) {
+        const options = buildModelPickerOptions(state.currentModelId, state.serverModels);
+        lines.push(...buildModelPickerPanel(options, state.modelPickerIndex, width));
+    }
+    if (state.resumePickerOpen) {
+        const filtered = filterResumeSessions(state.resumePickerSessions, state.resumePickerFilter, state.serverModels);
+        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()) {
+            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 }));
+        }
+        if (filtered.length === 0) {
+            lines.push(plainLine('No sessions match.', { color: 'gray' }));
+        }
+        lines.push(plainLine('↑/↓ move    enter resume    esc start new    ctrl+c quit', {
+            color: 'gray',
+        }));
+    }
+    const suggestions = getSlashCommandSuggestions(state.input);
+    if (!state.busy &&
+        !state.exiting &&
+        !state.modelPickerOpen &&
+        !state.resumePickerOpen &&
+        state.input.trimStart().startsWith('/') &&
+        !state.input.includes(' ') &&
+        suggestions.length > 0) {
+        lines.push(...buildCommandPalettePanel(suggestions, state.commandCursor, width));
+    }
+    return lines;
+}
+function countSectionLines(sections) {
+    return sections.reduce((sum, section) => sum + section.lines.length, 0);
+}
+function sliceTranscriptLines(lines, maxLines, scrollOffset) {
+    if (maxLines <= 0 || lines.length <= maxLines) {
+        return lines;
+    }
+    const maxOffset = Math.max(0, lines.length - maxLines);
+    const offset = Math.min(Math.max(scrollOffset, 0), maxOffset);
+    const start = Math.max(0, lines.length - maxLines - offset);
+    return lines.slice(start, start + maxLines);
+}
+export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds) {
+    const contentWidth = Math.max(20, Math.floor(cols * 0.95) - 2);
+    const gutter = Math.max(Math.floor((cols - contentWidth) / 2), 0);
+    const transcriptBlocks = state.transcript.map((entry) => renderTranscriptEntryLines(entry, contentWidth));
+    const transcriptLines = [];
+    transcriptBlocks.forEach((block, index) => {
+        if (index > 0) {
+            transcriptLines.push(plainLine(''));
+        }
+        transcriptLines.push(...block);
+    });
+    const sections = [];
+    const liveLines = buildLiveLines(state, contentWidth, spinnerFrame, elapsedSeconds);
+    if (liveLines.length > 0) {
+        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) {
+        const composerLines = [];
+        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
+                ? [span(` +${imageCount} img`, { color: 'gray', dim: true })]
+                : []), span('   ↑ edit · esc cancel', { color: 'gray', dim: true })));
+        }
+        else {
+            const promptLabel = state.busy ? 'queue> ' : '❯ ';
+            const placeholder = state.busy
+                ? 'Type to queue the next message'
+                : 'Type a request or /help';
+            composerLines.push(...buildComposerInputLines(state.input, state.cursor, promptLabel, placeholder, contentWidth));
+        }
+        sections.push({
+            kind: 'composer',
+            lines: [...composerLines, plainLine(''), ...composerFooterLines(state)],
+        });
+    }
+    const overlayLines = buildOverlayLines(state, contentWidth);
+    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 transcriptBudget = Math.max(1, rows - reservedLines - composerReserve - 1);
+    const transcriptScrollLimit = Math.max(0, transcriptLines.length - transcriptBudget);
+    const transcriptScrollOffset = Math.min(Math.max(state.transcriptScrollOffset, 0), transcriptScrollLimit);
+    sections.unshift({
+        kind: 'transcript',
+        lines: sliceTranscriptLines(transcriptLines, transcriptBudget, transcriptScrollOffset),
+    });
+    return {
+        cols,
+        rows,
+        gutter,
+        contentWidth,
+        spinnerFrame,
+        transcriptScrollLimit,
+        transcriptScrollOffset,
+        sections,
+    };
+}