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

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

@@ -1,8 +1,8 @@
 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;
@@ -17,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 = '     ';
@@ -133,14 +133,14 @@ function diffLinePrefix(kind) {
             return ' ';
     }
 }
-function fitLine(content, maxWidth) {
+export function fitLine(content, maxWidth) {
     if (maxWidth <= 0)
         return '';
-    if (content.length <= maxWidth)
+    if (displayWidth(content) <= maxWidth)
         return content;
     if (maxWidth === 1)
         return '…';
-    return `${content.slice(0, maxWidth - 1)}…`;
+    return `${sliceToWidth(content, maxWidth - 1)}…`;
 }
 export function formatPromptDirectoryLabel(projectRoot, homeDir = process.env.HOME ?? '') {
     const trimmed = String(projectRoot ?? '').trim();
@@ -163,15 +163,18 @@ const CLIENT_SLASH_COMMANDS = [
     { command: '/model', description: 'Switch the active model' },
     { command: '/resume', description: 'Open the session picker to resume a previous session' },
     { command: '/jobs', description: 'Background jobs: pick to view output or kill' },
-    { command: '/clear', description: 'Clear conversation history' },
+    { command: '/new', description: 'start a new conversation; this session remains saved' },
     { command: '/exit', description: 'Quit the current session' },
 ];
 function buildModelPickerOptions(currentModelId, serverModels) {
     return serverModels.map((model) => ({
         id: model.id,
         label: model.label,
-        meta: model.id === currentModelId ? 'current' : '',
+        publicId: model.id,
+        costRating: model.costRating,
+        current: model.id === currentModelId,
         disabled: false,
+        note: model.description,
     }));
 }
 function getInputCommandToken(input) {
@@ -209,6 +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)
@@ -402,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 = [
@@ -543,7 +552,12 @@ 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' }));
+    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(''));
@@ -570,7 +584,7 @@ function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
     return lines;
 }
 function lineCharCount(row) {
-    return row.spans.reduce((total, item) => total + [...item.text].length, 0);
+    return row.spans.reduce((total, item) => total + displayWidth(item.text), 0);
 }
 function overlayPanelLine(row, width, color) {
     const padding = Math.max(0, width - lineCharCount(row));
@@ -598,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) {
@@ -677,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) {
@@ -729,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, nowMs) {
+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);
@@ -808,25 +866,61 @@ function buildOverlayLines(state, width, nowMs) {
     }
     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',
         }));
     }
@@ -873,7 +967,10 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, n
     const overlayActive = Boolean(state.approvalPrompt || state.sudoPrompt);
     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
@@ -892,7 +989,7 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, n
             lines: [...composerLines, plainLine(''), ...composerFooterLines(state)],
         });
     }
-    const overlayLines = buildOverlayLines(state, contentWidth, nowMs);
+    const overlayLines = buildOverlayLines(state, contentWidth, rows, nowMs);
     if (overlayLines.length > 0) {
         sections.push({ kind: 'overlay', lines: overlayLines });
     }

package/dist/src/ui/tui/markdown-render.js

@@ -1,6 +1,8 @@
-import { line, plainLine, span, wrapText } from './text.js';
-const TABLE_BORDER_WIDTH = 2;
-const TABLE_CELL_OVERHEAD_WIDTH = 3;
+import { displayWidth, line, padToWidth, plainLine, sliceToWidth, span, wrapText, wrapToWidth, } from './text.js';
+const MIN_TABLE_COLUMN_WIDTH = 3;
+function tableRowOverhead(columnCount) {
+    return 3 * columnCount + 1;
+}
 function parseInlineSegments(text) {
     const source = String(text ?? '');
     const segments = [];
@@ -110,45 +112,37 @@ function stripInlineFormattingForWidth(text) {
         .replace(/\*\*([^*]+)\*\*/g, '$1');
 }
 function fitTableColumnWidths(columnWidths, maxWidth) {
-    const widths = columnWidths.map((width) => Math.max(3, Math.floor(width)));
-    if (widths.length === 0)
-        return widths;
-    const overhead = TABLE_BORDER_WIDTH + widths.length * TABLE_CELL_OVERHEAD_WIDTH;
-    const budget = Math.max(widths.length * 3, maxWidth - overhead);
-    const total = widths.reduce((sum, width) => sum + width, 0);
-    if (total <= budget)
-        return widths;
-    let remaining = budget;
-    const scaled = widths.map((width) => {
-        const next = Math.max(3, Math.floor((width / total) * budget));
-        remaining -= next;
-        return next;
-    });
-    while (remaining > 0) {
-        let targetIndex = 0;
-        for (let index = 1; index < widths.length; index++) {
-            if (widths[index] - scaled[index] > widths[targetIndex] - scaled[targetIndex]) {
-                targetIndex = index;
-            }
-        }
-        scaled[targetIndex]++;
-        remaining--;
+    const columnCount = columnWidths.length;
+    if (columnCount === 0)
+        return [];
+    const natural = columnWidths.map((width) => Math.max(1, Math.floor(width)));
+    const budget = Math.floor(maxWidth) - tableRowOverhead(columnCount);
+    const total = natural.reduce((sum, width) => sum + width, 0);
+    if (budget >= total)
+        return natural;
+    const floorWidth = Math.max(1, Math.min(MIN_TABLE_COLUMN_WIDTH, Math.floor(budget / columnCount)));
+    const widths = natural.map((width) => Math.min(width, floorWidth));
+    let used = widths.reduce((sum, width) => sum + width, 0);
+    if (used > budget) {
+        const share = Math.max(1, Math.floor(budget / columnCount));
+        for (let index = 0; index < columnCount; index++)
+            widths[index] = share;
+        used = share * columnCount;
     }
-    while (remaining < 0) {
-        let targetIndex = -1;
-        for (let index = 0; index < scaled.length; index++) {
-            if (scaled[index] <= 3)
+    let remaining = budget - used;
+    while (remaining > 0) {
+        let grew = false;
+        for (let index = 0; index < columnCount && remaining > 0; index++) {
+            if (widths[index] >= natural[index])
                 continue;
-            if (targetIndex === -1 || scaled[index] > scaled[targetIndex]) {
-                targetIndex = index;
-            }
+            widths[index]++;
+            remaining--;
+            grew = true;
         }
-        if (targetIndex === -1)
+        if (!grew)
             break;
-        scaled[targetIndex]--;
-        remaining++;
     }
-    return scaled;
+    return widths;
 }
 function normalizeMarkdownTableCells(cells, columnCount) {
     return Array.from({ length: columnCount }, (_, index) => cells[index] ?? '');
@@ -176,7 +170,7 @@ function parseMarkdownTableBlock(lines, startIndex) {
     const normalizedHeaders = normalizeMarkdownTableCells(headers, columnCount);
     const columnWidths = normalizedHeaders.map((header, columnIndex) => {
         const values = [header, ...rows.map((row) => row[columnIndex] ?? '')];
-        return Math.max(3, ...values.map((value) => stripInlineFormattingForWidth(value).length));
+        return Math.max(MIN_TABLE_COLUMN_WIDTH, ...values.map((value) => displayWidth(stripInlineFormattingForWidth(value))));
     });
     return {
         nextIndex,
@@ -280,24 +274,33 @@ function wrapInlineToLines(text, width, bodyColor, prefix = '') {
         rowWidth = 0;
     };
     const appendSpan = (part) => {
-        const current = rows[rows.length - 1];
-        const limit = safeWidth - (indent ? prefix.length : 0);
+        let current = rows[rows.length - 1];
+        const limit = safeWidth - (rows.length === 1 && indent ? displayWidth(prefix) : 0);
         let remaining = part.text;
         while (remaining.length > 0) {
             const room = limit - rowWidth;
             if (room <= 0) {
                 startRow();
+                current = rows[rows.length - 1];
                 continue;
             }
-            if (remaining.length <= room) {
+            const width = displayWidth(remaining);
+            if (width <= room) {
                 current.push(span(remaining, styleFromSpan(part)));
-                rowWidth += remaining.length;
+                rowWidth += width;
                 remaining = '';
                 break;
             }
-            current.push(span(remaining.slice(0, room), styleFromSpan(part)));
-            remaining = remaining.slice(room);
+            const head = sliceToWidth(remaining, room);
+            if (displayWidth(head) > room && current.length > 0) {
+                startRow();
+                current = rows[rows.length - 1];
+                continue;
+            }
+            current.push(span(head, styleFromSpan(part)));
+            remaining = remaining.slice(head.length);
             startRow();
+            current = rows[rows.length - 1];
         }
     };
     for (const segment of segments) {
@@ -316,36 +319,35 @@ function wrapInlineToLines(text, width, bodyColor, prefix = '') {
         return line(...bodySpans);
     });
 }
-function padCell(text, width) {
-    const plain = stripInlineFormattingForWidth(text);
-    if (plain.length >= width)
-        return plain.slice(0, width);
-    return plain + ' '.repeat(width - plain.length);
-}
 function renderTableLines(table, width) {
     const columnWidths = fitTableColumnWidths(table.columnWidths, width);
+    const border = (left, joint, right) => line(span(left +
+        columnWidths.map((colWidth) => '─'.repeat(colWidth + 2)).join(joint) +
+        right, { color: 'cyan', dim: true }));
     const renderRow = (cells, bold) => {
-        const parts = columnWidths.map((colWidth, index) => span(` ${padCell(cells[index] ?? '', colWidth)} `, {
-            color: 'cyan',
-            bold,
-        }));
-        return line(span('│', { color: 'cyan' }), ...parts, span('│', { color: 'cyan' }));
+        const wrapped = columnWidths.map((colWidth, index) => wrapToWidth(stripInlineFormattingForWidth(cells[index] ?? ''), colWidth));
+        const height = Math.max(1, ...wrapped.map((cellLines) => cellLines.length));
+        const rows = [];
+        for (let row = 0; row < height; row++) {
+            const spans = [span('│', { color: 'cyan' })];
+            for (let column = 0; column < columnWidths.length; column++) {
+                const text = wrapped[column]?.[row] ?? '';
+                spans.push(span(` ${padToWidth(text, columnWidths[column])} `, {
+                    color: 'cyan',
+                    bold,
+                }));
+                spans.push(span('│', { color: 'cyan' }));
+            }
+            rows.push(line(...spans));
+        }
+        return rows;
     };
-    const separator = line(span('├' +
-        columnWidths.map((colWidth) => '─'.repeat(colWidth + 2)).join('┼') +
-        '┤', { color: 'cyan', dim: true }));
-    const top = line(span('┌' +
-        columnWidths.map((colWidth) => '─'.repeat(colWidth + 2)).join('┬') +
-        '┐', { color: 'cyan', dim: true }));
-    const bottom = line(span('└' +
-        columnWidths.map((colWidth) => '─'.repeat(colWidth + 2)).join('┴') +
-        '┘', { color: 'cyan', dim: true }));
     return [
-        top,
-        renderRow(table.headers, true),
-        separator,
-        ...table.rows.map((row) => renderRow(row, false)),
-        bottom,
+        border('┌', '┬', '┐'),
+        ...renderRow(table.headers, true),
+        border('├', '┼', '┤'),
+        ...table.rows.flatMap((row) => renderRow(row, false)),
+        border('└', '┴', '┘'),
     ];
 }
 function getEntryColor(kind) {
@@ -410,10 +412,7 @@ export function renderFormattedBodyLines(body, width, kind) {
         }
         if (formattedLine.kind === 'table' && formattedLine.table) {
             output.push(...renderTableLines(formattedLine.table, bodyWidth).map((tableLine) => {
-                const spans = tableLine.spans.map((part) => ({
-                    ...part,
-                    text: `  ${part.text}`,
-                }));
+                const spans = tableLine.spans.map((part, index) => index === 0 ? { ...part, text: `  ${part.text}` } : part);
                 return { spans };
             }));
             continue;