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

package/dist/src/api/models.js

@@ -9,10 +9,15 @@ function sanitizeModelInfo(raw) {
     const value = raw;
     const id = Number(value.id);
     const label = String(value.label ?? '').trim();
-    if (!Number.isInteger(id) || id <= 0 || !label) {
+    const costRating = Number(value.costRating);
+    const description = String(value.description ?? '').trim();
+    if (!Number.isInteger(id) || id <= 0 || !label || !isCostRating(costRating)) {
         return null;
     }
-    return { id, label };
+    return { id, label, costRating, description };
+}
+function isCostRating(value) {
+    return Number.isInteger(value) && value >= 1 && value <= 3;
 }
 export function getModelsCachePath(env = process.env) {
     return path.join(getClientStateDir(env), 'models.json');

package/dist/src/ui/repl.js

@@ -1238,7 +1238,11 @@ export 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 getDefaultModelPickerIndex(currentModelId, serverModels) {

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

@@ -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 = 120;
 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 = '     ';
@@ -170,8 +170,11 @@ 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) {
@@ -598,77 +601,110 @@ 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) {
     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),
+        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));
-        }
     });
-    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 +713,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,7 +768,7 @@ 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 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thegitai/cli",
-  "version": "1.0.0-preview.2",
+  "version": "1.0.0-preview.3",
   "description": "TheGitAI CLI client (source-visible, proprietary)",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://thegit.ai",
@@ -25,10 +25,10 @@
     "@lydell/node-pty-linux-x64": "1.1.0",
     "@lydell/node-pty-win32-arm64": "1.1.0",
     "@lydell/node-pty-win32-x64": "1.1.0",
-    "@thegitai/tui-darwin-arm64": "1.0.0-preview.2",
-    "@thegitai/tui-darwin-x64": "1.0.0-preview.2",
-    "@thegitai/tui-linux-x64": "1.0.0-preview.2",
-    "@thegitai/tui-win32-x64": "1.0.0-preview.2",
+    "@thegitai/tui-darwin-arm64": "1.0.0-preview.3",
+    "@thegitai/tui-darwin-x64": "1.0.0-preview.3",
+    "@thegitai/tui-linux-x64": "1.0.0-preview.3",
+    "@thegitai/tui-win32-x64": "1.0.0-preview.3",
     "@vscode/ripgrep": "1.18.0"
   },
   "publishConfig": {