@compilr-dev/cli 0.5.0 → 0.5.2

package/dist/ui/overlay/impl/model-overlay-v2.js

@@ -6,113 +6,1138 @@
  *
  * Features:
  * - Tabs by provider (Claude, OpenAI, Gemini, Ollama)
- * - Hot-swap detection (same provider = immediate, different = restart)
+ * - Detail view for each model with:
+ *   - Tier info, provider, model name
+ *   - Editable model ID
+ *   - Test model (t), Set active (a), Reset default (d)
  * - API key status checking
  * - Persists selection to settings
  */
-import { TabbedListOverlayV2, } from '../../base/index.js';
-import { setSetting } from '../../../settings/index.js';
+import { TabbedListOverlayV2, BaseScreen, pushScreen, popScreen, closeOverlay, stay, renderBorder, } from '../../base/index.js';
+import { getSetting, setSetting } from '../../../settings/index.js';
 import { hasApiKey, settingsProviderToCredentialKey } from '../../../utils/credentials.js';
+import { TIER_INFO, getModelForTier, setTierOverride, clearTierOverride, validateModel, checkApiKeyStatus, getDefaultModelForTier, getModelInfo, getOthersProviders, getModelsForOthersProvider, getModelsForProvider, PROVIDER_METADATA, 
+// Ollama auto-detection
+listOllamaModels, } from '../../../models/index.js';
+import { hasApiKey as hasApiKeyForProvider, getMaskedKey, setApiKey, } from '../../../utils/credentials.js';
+import { isCtrlC, isEscape, isClose, isEnter } from '../../base/key-utils.js';
+import * as terminal from '../../terminal.js';
 // =============================================================================
 // Constants
 // =============================================================================
 const PAGE_SIZE = 10;
+const TIER_WIDTH = 14;
+const LABEL_WIDTH = 14;
+const MODEL_NAME_WIDTH = 28;
+/** Primary providers that show tier-based selection */
+const PRIMARY_PROVIDERS = ['claude', 'openai', 'gemini', 'ollama'];
 const PROVIDER_TABS = [
     { id: 'claude', label: 'Claude' },
     { id: 'openai', label: 'OpenAI' },
     { id: 'gemini', label: 'Gemini' },
-    { id: 'ollama', label: 'Ollama' },
-];
-const MODEL_OPTIONS = [
-    // Claude
-    { id: 'claude-sonnet-4-20250514', name: 'Sonnet 4', description: 'Best for everyday tasks', provider: 'claude' },
-    { id: 'claude-opus-4-20250514', name: 'Opus 4', description: 'Most capable for complex work', provider: 'claude' },
-    { id: 'claude-3-5-haiku-20241022', name: 'Haiku 3.5', description: 'Fastest for quick answers', provider: 'claude' },
-    // OpenAI
-    { id: 'gpt-4o', name: 'GPT-4o', description: 'Best overall', provider: 'openai' },
-    { id: 'gpt-4o-mini', name: 'GPT-4o Mini', description: 'Fast and affordable', provider: 'openai' },
-    // Gemini
-    { id: 'gemini-2.0-flash', name: 'Gemini 2.0 Flash', description: 'Fast multimodal', provider: 'gemini' },
-    { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash', description: 'Latest stable flash', provider: 'gemini' },
-    { id: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro', description: 'Most capable Gemini', provider: 'gemini' },
-    // Ollama
-    { id: 'llama3.2', name: 'Llama 3.2', description: 'Local model', provider: 'ollama' },
-    { id: 'mistral', name: 'Mistral', description: 'Local model', provider: 'ollama' },
-    { id: 'codellama', name: 'Code Llama', description: 'Code-focused local model', provider: 'ollama' },
+    { id: 'ollama', label: 'Ollama (local)' },
+    { id: 'others', label: 'Others' },
 ];
+/** All model tiers in display order */
+const ALL_TIERS = ['fast', 'balanced', 'powerful'];
+/**
+ * Get list items - tier items for primary providers, provider items for Others.
+ */
+function getListItems() {
+    const items = [];
+    // For each primary provider, add 3 tier items
+    for (const provider of PRIMARY_PROVIDERS) {
+        for (const tier of ALL_TIERS) {
+            // Get default model from registry
+            const defaultModel = getDefaultModelForTier(provider, tier);
+            // Get current model (may have user override)
+            const currentModelId = getModelForTier(provider, tier);
+            const currentModelInfo = getModelInfo(currentModelId);
+            items.push({
+                type: 'tier',
+                tier,
+                provider,
+                defaultModelId: defaultModel?.id ?? currentModelId,
+                defaultModelName: defaultModel?.displayName ?? currentModelId,
+                currentModelId,
+                currentModelName: currentModelInfo?.displayName ?? currentModelId,
+            });
+        }
+    }
+    // Get providers for "Others" tab
+    const providers = getOthersProviders();
+    for (const p of providers) {
+        items.push({
+            type: 'provider',
+            metadata: p,
+        });
+    }
+    return items;
+}
+// =============================================================================
+// Key Input Screen (for setting API keys from main list)
+// =============================================================================
+/**
+ * Simple screen for entering an API key.
+ * Used when pressing 's' from the main model list.
+ */
+class KeyInputScreen extends BaseScreen {
+    provider;
+    providerName;
+    styles;
+    onKeySaved;
+    keyInput = '';
+    cursorPos = 0;
+    constructor(provider, providerName, styles, onKeySaved) {
+        super();
+        this.provider = provider;
+        this.providerName = providerName;
+        this.styles = styles;
+        this.onKeySaved = onKeySaved;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Set API Key')}`);
+        lines.push(border);
+        lines.push('');
+        lines.push(`  Set API key for ${s.primary(this.providerName)}:`);
+        lines.push('');
+        // Input field
+        const beforeCursor = this.keyInput.slice(0, this.cursorPos);
+        const afterCursor = this.keyInput.slice(this.cursorPos);
+        const cursor = s.primary('█');
+        const placeholder = this.keyInput ? '' : s.muted('Paste or type your API key...');
+        lines.push(`  > ${beforeCursor}${cursor}${afterCursor}${placeholder}`);
+        lines.push('');
+        // Help text
+        const metadata = PROVIDER_METADATA[this.provider];
+        if (metadata.keyUrl) {
+            lines.push(`  ${s.muted(`Get key: ${metadata.keyUrl}`)}`);
+            lines.push('');
+        }
+        lines.push(border);
+        lines.push(`  ${s.muted('Enter Save · Esc Cancel')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes overlay
+        if (isCtrlC(data)) {
+            return closeOverlay();
+        }
+        // Escape goes back
+        if (isEscape(data)) {
+            return popScreen();
+        }
+        // Enter saves the key
+        if (isEnter(data)) {
+            const value = this.keyInput.trim();
+            if (value) {
+                const metadata = PROVIDER_METADATA[this.provider];
+                setApiKey(metadata.credentialKey, value);
+                this.onKeySaved();
+            }
+            return popScreen();
+        }
+        // Handle text input
+        const char = data.toString();
+        // Backspace
+        if (data[0] === 0x7f || data[0] === 0x08) {
+            if (this.cursorPos > 0) {
+                this.keyInput = this.keyInput.slice(0, this.cursorPos - 1) + this.keyInput.slice(this.cursorPos);
+                this.cursorPos--;
+            }
+            return stay(true);
+        }
+        // Left arrow
+        if (data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x44) {
+            if (this.cursorPos > 0)
+                this.cursorPos--;
+            return stay(true);
+        }
+        // Right arrow
+        if (data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x43) {
+            if (this.cursorPos < this.keyInput.length)
+                this.cursorPos++;
+            return stay(true);
+        }
+        // Printable characters
+        if (char.length === 1 && char.charCodeAt(0) >= 32 && char.charCodeAt(0) < 127) {
+            this.keyInput = this.keyInput.slice(0, this.cursorPos) + char + this.keyInput.slice(this.cursorPos);
+            this.cursorPos++;
+            return stay(true);
+        }
+        // Handle paste (multiple characters)
+        if (char.length > 1) {
+            const printable = char.replace(/[^\x20-\x7e]/g, '');
+            this.keyInput = this.keyInput.slice(0, this.cursorPos) + printable + this.keyInput.slice(this.cursorPos);
+            this.cursorPos += printable.length;
+            return stay(true);
+        }
+        return stay(false);
+    }
+    getMinHeight() {
+        return 12;
+    }
+}
+// =============================================================================
+// Others Tab - Provider Detail Screen (with 3-tier models)
+// =============================================================================
+/**
+ * Screen showing a specific "Others" provider's details and 3-tier models.
+ */
+class OthersProviderDetailScreen extends BaseScreen {
+    provider;
+    styles;
+    activeModel;
+    activeProvider;
+    requestRender;
+    selectedIndex = 0;
+    models;
+    editingKey = false;
+    keyInput = '';
+    keyCursorPos = 0;
+    message = null;
+    messageType = null;
+    constructor(provider, styles, activeModel, activeProvider, requestRender) {
+        super();
+        this.provider = provider;
+        this.styles = styles;
+        this.activeModel = activeModel;
+        this.activeProvider = activeProvider;
+        this.requestRender = requestRender;
+        this.models = getModelsForOthersProvider(provider.type);
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(`  ${s.primaryBold(this.provider.displayName)}`);
+        lines.push(border);
+        lines.push('');
+        // Provider info
+        const hasKey = hasApiKeyForProvider(this.provider.credentialKey);
+        const keyIndicator = hasKey ? s.success('● Set') : s.error('○ Not set');
+        const maskedKey = hasKey ? getMaskedKey(this.provider.credentialKey) : null;
+        const keyDisplay = maskedKey ? s.muted(` (${maskedKey})`) : '';
+        if (this.editingKey) {
+            const prefix = s.primary(' > ');
+            const label = 'API Key:'.padEnd(12);
+            const beforeCursor = this.keyInput.slice(0, this.keyCursorPos);
+            const afterCursor = this.keyInput.slice(this.keyCursorPos);
+            const cursor = s.primary('█');
+            lines.push(`${prefix}${s.muted(label)}${beforeCursor}${cursor}${afterCursor}`);
+        }
+        else {
+            lines.push(`  ${s.muted('API Key:'.padEnd(12))}${keyIndicator}${keyDisplay}`);
+        }
+        lines.push(`  ${s.muted('Endpoint:'.padEnd(12))}${s.muted(this.provider.endpoint)}`);
+        lines.push(`  ${s.muted('Env Var:'.padEnd(12))}${s.muted(this.provider.envVar)}`);
+        lines.push('');
+        // Models section
+        lines.push(`  ${s.muted('─── Models ───')}`);
+        lines.push('');
+        // Tier-first column layout (as per spec)
+        lines.push(`  ${s.muted('Tier'.padEnd(12))}${s.muted('Model')}`);
+        lines.push(`  ${s.muted('─'.repeat(40))}`);
+        for (let i = 0; i < this.models.length; i++) {
+            const model = this.models[i];
+            const isSelected = i === this.selectedIndex && !this.editingKey;
+            const prefix = isSelected ? s.primary(' > ') : '   ';
+            // Check if this model is active
+            const isActive = model.id === this.activeModel && this.provider.type === this.activeProvider;
+            const tierLabel = model.tier.padEnd(12);
+            const modelName = model.displayName;
+            const activeBadge = isActive ? s.success(' (active)') : '';
+            const tierStyle = isSelected ? s.primary : (str) => str;
+            const nameStyle = isSelected ? s.primary : (str) => str;
+            lines.push(`${prefix}${tierStyle(tierLabel)}${nameStyle(modelName)}${activeBadge}`);
+        }
+        lines.push('');
+        // Message display
+        if (this.message) {
+            const messageStyle = this.messageType === 'error'
+                ? s.error
+                : this.messageType === 'success'
+                    ? s.success
+                    : s.muted;
+            lines.push(`  ${messageStyle(this.message)}`);
+            lines.push('');
+        }
+        // Footer
+        lines.push(border);
+        if (this.editingKey) {
+            lines.push(`  ${s.muted('Enter Save · Esc Cancel')}`);
+        }
+        else {
+            lines.push(`  ${s.muted('↑↓ Select · Enter Details · s Set Key · Esc Back')}`);
+        }
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Clear message on any key
+        if (this.message && !this.editingKey) {
+            this.message = null;
+            this.messageType = null;
+        }
+        if (this.editingKey) {
+            return this.handleKeyEdit(data);
+        }
+        // Ctrl+C closes overlay
+        if (isCtrlC(data)) {
+            return closeOverlay();
+        }
+        // Esc goes back
+        if (isEscape(data) || isClose(data)) {
+            return popScreen();
+        }
+        // Check for arrow keys
+        if (data[0] === 0x1b && data[1] === 0x5b) {
+            // Up arrow
+            if (data[2] === 0x41) {
+                if (this.selectedIndex > 0) {
+                    this.selectedIndex--;
+                }
+                return stay(true);
+            }
+            // Down arrow
+            if (data[2] === 0x42) {
+                if (this.selectedIndex < this.models.length - 1) {
+                    this.selectedIndex++;
+                }
+                return stay(true);
+            }
+        }
+        const char = data.toString();
+        // j/k vim navigation
+        if (char === 'j' && this.selectedIndex < this.models.length - 1) {
+            this.selectedIndex++;
+            return stay(true);
+        }
+        if (char === 'k' && this.selectedIndex > 0) {
+            this.selectedIndex--;
+            return stay(true);
+        }
+        // 's' - set API key
+        if (char === 's') {
+            this.editingKey = true;
+            this.keyInput = '';
+            this.keyCursorPos = 0;
+            return stay(true);
+        }
+        // Enter - open model detail screen (consistent with other provider tabs)
+        if (isEnter(data)) {
+            const selectedModel = this.models[this.selectedIndex];
+            // Convert OthersProviderModel to TierItem for detail screen
+            const tierItem = {
+                type: 'tier',
+                tier: selectedModel.tier,
+                provider: this.provider.type,
+                defaultModelId: selectedModel.id,
+                defaultModelName: selectedModel.displayName,
+                currentModelId: getModelForTier(this.provider.type, selectedModel.tier),
+                currentModelName: selectedModel.displayName,
+            };
+            return pushScreen(new TierDetailScreen(tierItem, this.styles, this.activeModel, this.activeProvider, { status: 'offline', availableModels: new Set() }, // Others providers don't use Ollama state
+            this.requestRender));
+        }
+        return stay(false);
+    }
+    handleKeyEdit(data) {
+        // Escape - cancel edit
+        if (isEscape(data) || isCtrlC(data)) {
+            this.editingKey = false;
+            this.keyInput = '';
+            this.keyCursorPos = 0;
+            return stay(true);
+        }
+        // Enter - save key
+        if (isEnter(data)) {
+            const key = this.keyInput.trim();
+            if (key) {
+                // Import setApiKey dynamically to avoid circular deps
+                import('../../../utils/credentials.js').then(({ setApiKey }) => {
+                    setApiKey(this.provider.credentialKey, key);
+                    this.message = 'API key saved';
+                    this.messageType = 'success';
+                    this.requestRender();
+                }).catch(() => {
+                    this.message = 'Failed to save API key';
+                    this.messageType = 'error';
+                    this.requestRender();
+                });
+            }
+            this.editingKey = false;
+            this.keyInput = '';
+            this.keyCursorPos = 0;
+            return stay(true);
+        }
+        // Left arrow
+        if (data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x44) {
+            if (this.keyCursorPos > 0) {
+                this.keyCursorPos--;
+            }
+            return stay(true);
+        }
+        // Right arrow
+        if (data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x43) {
+            if (this.keyCursorPos < this.keyInput.length) {
+                this.keyCursorPos++;
+            }
+            return stay(true);
+        }
+        // Backspace
+        if (data[0] === 127 || data[0] === 8) {
+            if (this.keyCursorPos > 0) {
+                const before = this.keyInput.slice(0, this.keyCursorPos - 1);
+                const after = this.keyInput.slice(this.keyCursorPos);
+                this.keyInput = before + after;
+                this.keyCursorPos--;
+            }
+            return stay(true);
+        }
+        // Printable character
+        const char = data.toString();
+        if (char.length === 1 && char.charCodeAt(0) >= 32 && char.charCodeAt(0) < 127) {
+            const before = this.keyInput.slice(0, this.keyCursorPos);
+            const after = this.keyInput.slice(this.keyCursorPos);
+            this.keyInput = before + char + after;
+            this.keyCursorPos++;
+            return stay(true);
+        }
+        return stay(false);
+    }
+    getMinHeight() {
+        return 22;
+    }
+}
+const DEFAULT_OLLAMA_URL = 'http://localhost:11434';
+class TierDetailScreen extends BaseScreen {
+    tierItem;
+    styles;
+    state;
+    currentModelId;
+    currentOllamaUrl;
+    activeModel;
+    activeProvider;
+    ollamaState;
+    requestRenderFn;
+    /** Available models for cycling */
+    availableModels;
+    constructor(tierItem, styles, activeModel, activeProvider, ollamaState, requestRender) {
+        super();
+        this.tierItem = tierItem;
+        this.styles = styles;
+        this.activeModel = activeModel;
+        this.activeProvider = activeProvider;
+        this.ollamaState = ollamaState;
+        this.requestRenderFn = requestRender;
+        this.currentModelId = tierItem.currentModelId;
+        const settingUrl = getSetting('ollamaBaseUrl');
+        this.currentOllamaUrl = typeof settingUrl === 'string' ? settingUrl : DEFAULT_OLLAMA_URL;
+        this.state = {
+            editMode: false,
+            // For Ollama, start with URL field; otherwise just model
+            selectedField: tierItem.provider === 'ollama' ? 'url' : 'model',
+            editValue: '',
+            cursorPos: 0,
+            testing: false,
+            message: null,
+            messageType: null,
+        };
+        // Build available models list for cycling
+        this.availableModels = this.buildAvailableModels();
+    }
+    /**
+     * Build list of available models for this tier from registry.
+     * For Ollama: also includes locally installed models.
+     */
+    buildAvailableModels() {
+        const models = [];
+        const registryModels = getModelsForProvider(this.tierItem.provider);
+        // Add registry models (supported ones)
+        for (const model of registryModels) {
+            if (model.status !== 'supported')
+                continue;
+            const isDefault = model.id === this.tierItem.defaultModelId;
+            // For Ollama: check if locally available
+            let isLocal;
+            if (this.tierItem.provider === 'ollama') {
+                const modelName = model.id.toLowerCase();
+                const baseName = modelName.split(':')[0];
+                isLocal = this.ollamaState.availableModels.has(modelName) ||
+                    this.ollamaState.availableModels.has(baseName);
+            }
+            models.push({
+                id: model.id,
+                displayName: model.displayName,
+                isDefault,
+                isLocal,
+            });
+        }
+        // For Ollama: add any local models not in registry
+        if (this.tierItem.provider === 'ollama') {
+            const registryIds = new Set(models.map(m => m.id.toLowerCase()));
+            for (const localModel of this.ollamaState.availableModels) {
+                // Skip base names (we only want full model:tag names)
+                if (!localModel.includes(':') && this.ollamaState.availableModels.has(localModel + ':latest')) {
+                    continue;
+                }
+                if (!registryIds.has(localModel)) {
+                    models.push({
+                        id: localModel,
+                        displayName: localModel,
+                        isDefault: false,
+                        isLocal: true,
+                    });
+                }
+            }
+        }
+        // Sort: default first, then by name
+        models.sort((a, b) => {
+            if (a.isDefault && !b.isDefault)
+                return -1;
+            if (!a.isDefault && b.isDefault)
+                return 1;
+            return a.displayName.localeCompare(b.displayName);
+        });
+        return models;
+    }
+    /**
+     * Get current model index in available models list.
+     * Returns -1 if current model is custom (not in list).
+     */
+    getCurrentModelIndex() {
+        return this.availableModels.findIndex(m => m.id === this.currentModelId);
+    }
+    /**
+     * Cycle to next available model.
+     */
+    cycleToNextModel() {
+        if (this.availableModels.length === 0)
+            return;
+        const currentIndex = this.getCurrentModelIndex();
+        const nextIndex = (currentIndex + 1) % this.availableModels.length;
+        const nextModel = this.availableModels[nextIndex];
+        this.currentModelId = nextModel.id;
+        // Persist the change
+        if (nextModel.isDefault) {
+            clearTierOverride(this.tierItem.provider, this.tierItem.tier);
+        }
+        else {
+            setTierOverride(this.tierItem.provider, this.tierItem.tier, nextModel.id);
+        }
+    }
+    /**
+     * Cycle to previous available model.
+     */
+    cycleToPrevModel() {
+        if (this.availableModels.length === 0)
+            return;
+        const currentIndex = this.getCurrentModelIndex();
+        const prevIndex = currentIndex <= 0
+            ? this.availableModels.length - 1
+            : currentIndex - 1;
+        const prevModel = this.availableModels[prevIndex];
+        this.currentModelId = prevModel.id;
+        // Persist the change
+        if (prevModel.isDefault) {
+            clearTierOverride(this.tierItem.provider, this.tierItem.tier);
+        }
+        else {
+            setTierOverride(this.tierItem.provider, this.tierItem.tier, prevModel.id);
+        }
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Tier Configuration')}`);
+        lines.push(border);
+        lines.push('');
+        // Provider
+        const providerLabel = this.tierItem.provider.charAt(0).toUpperCase() + this.tierItem.provider.slice(1);
+        lines.push(`  ${s.muted('Provider:'.padEnd(LABEL_WIDTH))}${providerLabel}`);
+        // Tier
+        const tierInfo = TIER_INFO[this.tierItem.tier];
+        lines.push(`  ${s.muted('Tier:'.padEnd(LABEL_WIDTH))}${tierInfo.label} ${s.muted(`- ${tierInfo.shortDescription}`)}`);
+        lines.push('');
+        // API Key Status (not shown for Ollama - no auth needed)
+        if (this.tierItem.provider !== 'ollama') {
+            const keyStatus = checkApiKeyStatus(this.tierItem.provider);
+            const keyIndicator = keyStatus.hasKey ? s.success('● Set') : s.error('○ Not set');
+            const keyHint = !keyStatus.hasKey && keyStatus.hint ? s.warning(` (${keyStatus.hint})`) : '';
+            lines.push(`  ${s.muted('API Key:'.padEnd(LABEL_WIDTH))}${keyIndicator}${keyHint}`);
+            lines.push('');
+        }
+        // Ollama Server URL (only for Ollama provider)
+        if (this.tierItem.provider === 'ollama') {
+            const isUrlSelected = this.state.editMode && this.state.selectedField === 'url';
+            const sectionHeader = isUrlSelected ? s.primary('─── Server URL ───') : s.muted('─── Server URL ───');
+            lines.push(`  ${sectionHeader}`);
+            lines.push('');
+            // Default URL first (consistent order)
+            lines.push(`  ${s.muted('Default:'.padEnd(LABEL_WIDTH))}${s.muted(DEFAULT_OLLAMA_URL)}`);
+            // Current URL (editable)
+            const isDefaultUrl = this.currentOllamaUrl === DEFAULT_OLLAMA_URL;
+            if (isUrlSelected) {
+                const prefix = s.primary(' > ');
+                const beforeCursor = this.state.editValue.slice(0, this.state.cursorPos);
+                const afterCursor = this.state.editValue.slice(this.state.cursorPos);
+                const cursor = s.primary('█');
+                lines.push(`${prefix}${s.muted('Current:'.padEnd(LABEL_WIDTH - 3))}${beforeCursor}${cursor}${afterCursor}`);
+            }
+            else {
+                const urlStyle = isDefaultUrl ? (str) => str : s.success;
+                const urlBadge = isDefaultUrl ? '' : s.success(' (custom)');
+                lines.push(`  ${s.muted('Current:'.padEnd(LABEL_WIDTH))}${urlStyle(this.currentOllamaUrl)}${urlBadge}`);
+            }
+            lines.push('');
+        }
+        // Model ID section
+        const isModelSelected = this.state.editMode && this.state.selectedField === 'model';
+        const modelHeader = isModelSelected ? s.primary('─── Model ID ───') : s.muted('─── Model ID ───');
+        lines.push(`  ${modelHeader}`);
+        lines.push('');
+        // Default Model ID first (consistent order)
+        lines.push(`  ${s.muted('Default:'.padEnd(LABEL_WIDTH))}${s.muted(this.tierItem.defaultModelId)}`);
+        // Current Model ID (with cycling indicator)
+        const isOverride = this.currentModelId !== this.tierItem.defaultModelId;
+        const currentIndex = this.getCurrentModelIndex();
+        const isCustomModel = currentIndex === -1;
+        if (isModelSelected) {
+            // Edit mode - show text input
+            const prefix = s.primary(' > ');
+            const beforeCursor = this.state.editValue.slice(0, this.state.cursorPos);
+            const afterCursor = this.state.editValue.slice(this.state.cursorPos);
+            const cursor = s.primary('█');
+            lines.push(`${prefix}${s.muted('Current:'.padEnd(LABEL_WIDTH - 3))}${beforeCursor}${cursor}${afterCursor}`);
+        }
+        else {
+            // Normal mode - show current with cycling info
+            const currentStyle = isOverride ? s.success : (str) => str;
+            // Build badges
+            const badges = [];
+            if (isOverride && !isCustomModel)
+                badges.push(s.success('custom'));
+            if (isCustomModel)
+                badges.push(s.warning('manual'));
+            // Cycling indicator: (2/5) or (manual)
+            let cycleIndicator = '';
+            if (this.availableModels.length > 0) {
+                if (isCustomModel) {
+                    cycleIndicator = s.muted(` [manual]`);
+                }
+                else {
+                    cycleIndicator = s.muted(` [${String(currentIndex + 1)}/${String(this.availableModels.length)}]`);
+                }
+            }
+            // Get display name for current model
+            const currentModelInfo = this.availableModels.find(m => m.id === this.currentModelId);
+            const displayName = currentModelInfo?.displayName ?? this.currentModelId;
+            // For Ollama: show local availability
+            let localBadge = '';
+            if (this.tierItem.provider === 'ollama' && currentModelInfo) {
+                localBadge = currentModelInfo.isLocal ? s.success(' ●') : s.warning(' ○');
+            }
+            lines.push(`  ${s.muted('Current:'.padEnd(LABEL_WIDTH))}${currentStyle(displayName)}${localBadge}${cycleIndicator}`);
+        }
+        lines.push('');
+        // Active status
+        const isActive = this.currentModelId === this.activeModel && this.tierItem.provider === this.activeProvider;
+        if (isActive) {
+            lines.push(`  ${s.success('✓ This is the active model')}`);
+        }
+        lines.push('');
+        // Message display
+        if (this.state.message) {
+            const messageStyle = this.state.messageType === 'error'
+                ? s.error
+                : this.state.messageType === 'success'
+                    ? s.success
+                    : s.muted;
+            lines.push(`  ${messageStyle(this.state.message)}`);
+            lines.push('');
+        }
+        // Footer
+        lines.push(border);
+        if (this.state.testing) {
+            lines.push(`  ${s.warning('Testing model...')}`);
+        }
+        else if (this.state.editMode) {
+            const arrowHint = this.tierItem.provider === 'ollama' ? '↑↓ Switch field · ' : '';
+            lines.push(`  ${s.muted(`${arrowHint}Enter Save · Esc Cancel · Clear = Reset to default`)}`);
+        }
+        else {
+            // Show cycling hint if multiple models available
+            const cycleHint = this.availableModels.length > 1 ? '←→/Enter Cycle · ' : '';
+            lines.push(`  ${s.muted(`${cycleHint}e Manual · t Test · a Set Active · d Reset · Esc Back`)}`);
+        }
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Clear message on any key (except while testing)
+        if (this.state.message && !this.state.testing) {
+            this.state.message = null;
+            this.state.messageType = null;
+        }
+        if (this.state.testing) {
+            // Ignore keys while testing
+            return stay(false);
+        }
+        if (this.state.editMode) {
+            return this.handleEditKey(data);
+        }
+        return this.handleNavigateKey(data);
+    }
+    handleNavigateKey(data) {
+        // Ctrl+C closes overlay completely
+        if (isCtrlC(data)) {
+            return closeOverlay();
+        }
+        // Esc or q goes back to list
+        if (isEscape(data) || isClose(data)) {
+            return popScreen();
+        }
+        // Arrow keys for cycling through models
+        if (data[0] === 0x1b && data[1] === 0x5b) {
+            // Right arrow - cycle to next model
+            if (data[2] === 0x43) {
+                this.cycleToNextModel();
+                return stay(true);
+            }
+            // Left arrow - cycle to previous model
+            if (data[2] === 0x44) {
+                this.cycleToPrevModel();
+                return stay(true);
+            }
+        }
+        const char = data.toString();
+        // Enter/Space - cycle to next model (like config overlay)
+        if (isEnter(data) || char === ' ') {
+            if (this.availableModels.length > 1) {
+                this.cycleToNextModel();
+                return stay(true);
+            }
+            return stay(false);
+        }
+        // 'e' - enter manual edit mode
+        if (char === 'e') {
+            this.state.editMode = true;
+            // For Ollama, start with URL field; otherwise just model
+            if (this.tierItem.provider === 'ollama') {
+                this.state.selectedField = 'url';
+                this.state.editValue = this.currentOllamaUrl;
+                this.state.cursorPos = this.currentOllamaUrl.length;
+            }
+            else {
+                this.state.selectedField = 'model';
+                this.state.editValue = this.currentModelId;
+                this.state.cursorPos = this.currentModelId.length;
+            }
+            return stay(true);
+        }
+        // 't' - test model
+        if (char === 't') {
+            // Start async test (fire-and-forget)
+            void this.testModel();
+            return stay(true);
+        }
+        // 'a' - set as active
+        if (char === 'a') {
+            setSetting('defaultModel', this.currentModelId);
+            setSetting('defaultProvider', this.tierItem.provider);
+            const tierInfo = TIER_INFO[this.tierItem.tier];
+            this.state.message = `Set ${tierInfo.label} tier (${this.currentModelId}) as active`;
+            this.state.messageType = 'success';
+            return stay(true);
+        }
+        // 'd' - reset to default
+        if (char === 'd') {
+            if (this.currentModelId !== this.tierItem.defaultModelId) {
+                clearTierOverride(this.tierItem.provider, this.tierItem.tier);
+                this.currentModelId = this.tierItem.defaultModelId;
+                this.state.message = 'Reset to default';
+                this.state.messageType = 'info';
+            }
+            else {
+                this.state.message = 'Already using default';
+                this.state.messageType = 'info';
+            }
+            return stay(true);
+        }
+        return stay(false);
+    }
+    handleEditKey(data) {
+        // Escape - cancel edit
+        if (isEscape(data) || isCtrlC(data)) {
+            this.state.editMode = false;
+            this.state.editValue = '';
+            this.state.cursorPos = 0;
+            return stay(true);
+        }
+        // Check for escape sequences (arrow keys)
+        if (data[0] === 0x1b && data[1] === 0x5b) {
+            // Left arrow - move cursor left
+            if (data[2] === 0x44) {
+                if (this.state.cursorPos > 0) {
+                    this.state.cursorPos--;
+                }
+                return stay(true);
+            }
+            // Right arrow - move cursor right
+            if (data[2] === 0x43) {
+                if (this.state.cursorPos < this.state.editValue.length) {
+                    this.state.cursorPos++;
+                }
+                return stay(true);
+            }
+            // Up/Down arrows - switch between fields (only for Ollama)
+            if (this.tierItem.provider === 'ollama') {
+                // Up arrow
+                if (data[2] === 0x41) {
+                    if (this.state.selectedField === 'model') {
+                        this.state.selectedField = 'url';
+                        this.state.editValue = this.currentOllamaUrl;
+                        this.state.cursorPos = this.currentOllamaUrl.length;
+                    }
+                    return stay(true);
+                }
+                // Down arrow
+                if (data[2] === 0x42) {
+                    if (this.state.selectedField === 'url') {
+                        this.state.selectedField = 'model';
+                        this.state.editValue = this.currentModelId;
+                        this.state.cursorPos = this.currentModelId.length;
+                    }
+                    return stay(true);
+                }
+            }
+        }
+        // Enter - save current field
+        if (isEnter(data)) {
+            const newValue = this.state.editValue.trim();
+            if (this.state.selectedField === 'model') {
+                // Editing model ID
+                if (!newValue) {
+                    // Empty = reset to default
+                    clearTierOverride(this.tierItem.provider, this.tierItem.tier);
+                    this.currentModelId = this.tierItem.defaultModelId;
+                    this.state.message = 'Reset to default model';
+                    this.state.messageType = 'info';
+                }
+                else if (newValue !== this.currentModelId) {
+                    // Save new value
+                    setTierOverride(this.tierItem.provider, this.tierItem.tier, newValue);
+                    this.currentModelId = newValue;
+                    this.state.message = `Saved model. Press 't' to test.`;
+                    this.state.messageType = 'info';
+                }
+            }
+            else {
+                // Editing Ollama URL (selectedField === 'url')
+                if (!newValue || newValue === DEFAULT_OLLAMA_URL) {
+                    // Empty or default = clear override
+                    setSetting('ollamaBaseUrl', undefined);
+                    this.currentOllamaUrl = DEFAULT_OLLAMA_URL;
+                    this.state.message = 'Reset to default URL';
+                    this.state.messageType = 'info';
+                }
+                else if (newValue !== this.currentOllamaUrl) {
+                    // Save new URL
+                    setSetting('ollamaBaseUrl', newValue);
+                    this.currentOllamaUrl = newValue;
+                    this.state.message = `Saved URL. Press 't' to test.`;
+                    this.state.messageType = 'info';
+                }
+            }
+            this.state.editMode = false;
+            this.state.editValue = '';
+            this.state.cursorPos = 0;
+            return stay(true);
+        }
+        // Backspace - delete char before cursor
+        if (data[0] === 127 || data[0] === 8) {
+            if (this.state.cursorPos > 0) {
+                const before = this.state.editValue.slice(0, this.state.cursorPos - 1);
+                const after = this.state.editValue.slice(this.state.cursorPos);
+                this.state.editValue = before + after;
+                this.state.cursorPos--;
+            }
+            return stay(true);
+        }
+        // Printable character - insert at cursor position
+        const char = data.toString();
+        if (char.length === 1 && char.charCodeAt(0) >= 32 && char.charCodeAt(0) < 127) {
+            const before = this.state.editValue.slice(0, this.state.cursorPos);
+            const after = this.state.editValue.slice(this.state.cursorPos);
+            this.state.editValue = before + char + after;
+            this.state.cursorPos++;
+            return stay(true);
+        }
+        return stay(false);
+    }
+    async testModel() {
+        this.state.testing = true;
+        this.state.message = `Testing ${this.currentModelId}...`;
+        this.state.messageType = 'info';
+        try {
+            const result = await validateModel(this.tierItem.provider, this.currentModelId);
+            this.state.testing = false;
+            if (result.valid) {
+                this.state.message = `✓ Model '${this.currentModelId}' is valid and working`;
+                this.state.messageType = 'success';
+            }
+            else {
+                this.state.message = result.error || 'Model validation failed';
+                this.state.messageType = 'error';
+            }
+        }
+        catch (error) {
+            this.state.testing = false;
+            this.state.message = `Error: ${error instanceof Error ? error.message : 'Unknown error'}`;
+            this.state.messageType = 'error';
+        }
+        // Trigger re-render after async operation
+        this.requestRenderFn();
+    }
+    getMinHeight() {
+        // Ollama needs more height for the URL section
+        return this.tierItem.provider === 'ollama' ? 26 : 22;
+    }
+}
 // =============================================================================
 // Model Overlay V2 Class
 // =============================================================================
 /**
  * Model selection overlay using the new Overlay interface.
  * Displays available models in a tabbed list by provider.
+ * Others tab shows providers; selecting a provider shows its models.
  */
 export class ModelOverlayV2 extends TabbedListOverlayV2 {
     type = 'inline';
     id = 'model-overlay-v2';
-    currentModel;
-    currentProvider;
+    activeModel;
+    activeProvider;
+    /** Ollama auto-detection state */
+    ollamaState = {
+        status: 'loading',
+        availableModels: new Set(),
+    };
+    minHeight = 18;
     constructor(options = {}) {
-        const currentModel = options.currentModel ?? 'claude-sonnet-4-20250514';
-        const currentProvider = options.currentProvider ?? 'claude';
+        const activeModel = options.currentModel ?? 'claude-sonnet-4-5-20250929';
+        const activeProvider = options.currentProvider ?? 'claude';
         // Find the initial tab based on current provider
-        const initialTabIndex = PROVIDER_TABS.findIndex((t) => t.id === currentProvider);
+        const initialTabIndex = PROVIDER_TABS.findIndex((t) => t.id === activeProvider);
+        // Get list items - tier items for primary providers, provider items for Others
+        const listItems = getListItems();
         super({
             title: 'Select Model',
             tabs: PROVIDER_TABS,
-            items: MODEL_OPTIONS,
+            items: listItems,
             pageSize: PAGE_SIZE,
-            filterByTab: (item, tabId) => item.provider === tabId,
-            getSearchText: (item) => `${item.name} ${item.description} ${item.id}`,
+            filterByTab: (item, tabId) => {
+                if (tabId === 'others') {
+                    // "Others" tab shows provider items
+                    return item.type === 'provider';
+                }
+                // Primary provider tabs show tier items for that provider
+                return item.type === 'tier' && item.provider === tabId;
+            },
+            getSearchText: (item) => {
+                if (item.type === 'provider') {
+                    return `${item.metadata.displayName} ${item.metadata.description}`;
+                }
+                // TierItem
+                const tierInfo = TIER_INFO[item.tier];
+                return `${tierInfo.label} ${item.currentModelName} ${item.currentModelId}`;
+            },
             renderItem: (item, isSelected, styles) => {
-                const isCurrent = item.id === currentModel;
                 const prefix = isSelected ? styles.primary(' > ') : '   ';
-                // Check API key status for this provider
-                const providerType = item.provider;
-                const credKey = settingsProviderToCredentialKey(providerType);
-                const hasKey = item.provider === 'ollama' || hasApiKey(credKey);
-                const keyIndicator = hasKey ? styles.success('●') : styles.error('○');
-                const name = isSelected
-                    ? styles.primary(item.name.padEnd(18))
-                    : styles.muted(item.name.padEnd(18));
-                const desc = styles.muted(item.description);
-                const currentBadge = isCurrent ? styles.success(' (current)') : '';
-                return `${prefix}${keyIndicator} ${name}${desc}${currentBadge}`;
+                if (item.type === 'provider') {
+                    // Render provider item for Others tab
+                    const provider = item.metadata;
+                    const hasKey = hasApiKeyForProvider(provider.credentialKey);
+                    const keyIndicator = hasKey ? styles.success('●') : styles.error('○');
+                    const keyStatus = hasKey ? styles.muted('Configured') : styles.muted('Not configured');
+                    const name = isSelected
+                        ? styles.primary(provider.displayName.padEnd(20))
+                        : provider.displayName.padEnd(20);
+                    const desc = styles.muted(provider.description.substring(0, 30));
+                    return `${prefix}${keyIndicator} ${name}${desc}  ${keyStatus}`;
+                }
+                // Render tier item (tier-centric view)
+                const tierInfo = TIER_INFO[item.tier];
+                const isCustom = item.currentModelId !== item.defaultModelId;
+                // Check if this tier is active
+                const isActive = item.currentModelId === activeModel && item.provider === activeProvider;
+                // For Ollama, show availability status; for others, show API key status
+                let statusIndicator;
+                if (item.provider === 'ollama') {
+                    const isLocallyAvailable = this.ollamaState.availableModels.has(item.currentModelId.toLowerCase()) ||
+                        this.ollamaState.availableModels.has(item.currentModelId.split(':')[0].toLowerCase());
+                    statusIndicator = isLocallyAvailable ? styles.success('●') : styles.warning('○');
+                }
+                else {
+                    const credKey = settingsProviderToCredentialKey(item.provider);
+                    const hasKey = hasApiKey(credKey);
+                    statusIndicator = hasKey ? styles.success('●') : styles.error('○');
+                }
+                // Format: Tier | Model Name | Badges
+                const tierLabel = isSelected
+                    ? styles.primary(tierInfo.label.padEnd(TIER_WIDTH))
+                    : tierInfo.label.padEnd(TIER_WIDTH);
+                const modelName = item.currentModelName.padEnd(MODEL_NAME_WIDTH);
+                const activeBadge = isActive ? styles.success(' (active)') : '';
+                const customBadge = isCustom && !isActive ? styles.warning(' *') : '';
+                return `${prefix}${statusIndicator} ${tierLabel}${modelName}${activeBadge}${customBadge}`;
             },
             footerHints: (searchMode) => {
                 if (searchMode) {
-                    return 'Type to filter · ↑↓/jk Navigate · Enter Select · Esc Exit search';
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Details · Esc Exit search';
                 }
-                return 'Tab Provider · ↑↓/jk · / Search · Enter Select · q/Esc Close';
+                const currentTabId = PROVIDER_TABS[this.state.currentTab]?.id;
+                // "Others" tab doesn't have inline key setting (handled in provider detail)
+                if (currentTabId === 'others') {
+                    return 'Tab · ↑↓ · / Search · Enter Details · q Close';
+                }
+                // Ollama doesn't need API key
+                if (currentTabId === 'ollama') {
+                    return 'Tab · ↑↓ · / Search · Enter Details · q Close';
+                }
+                // Standard providers: show s Set Key option
+                return 'Tab · ↑↓ · / Search · Enter Details · s Set Key · q Close';
+            },
+            // Show API key status below tab bar for standard providers
+            renderSubHeader: (tabId, styles) => {
+                // Skip for "Others" tab (has its own detail screen)
+                if (tabId === 'others')
+                    return [];
+                // Ollama: show connection status
+                if (tabId === 'ollama') {
+                    const status = this.ollamaState.status;
+                    let indicator;
+                    switch (status) {
+                        case 'loading':
+                            indicator = styles.muted('◐ Detecting local models...');
+                            break;
+                        case 'connected': {
+                            const count = this.ollamaState.availableModels.size;
+                            indicator = styles.success(`● Ollama: ${String(count)} model${count !== 1 ? 's' : ''} available`);
+                            break;
+                        }
+                        case 'offline':
+                            indicator = styles.error('○ Ollama: Not running (start with: ollama serve)');
+                            break;
+                        case 'error':
+                            indicator = styles.error(`○ Ollama: ${this.ollamaState.error ?? 'Error'}`);
+                            break;
+                    }
+                    return [`  ${indicator}`, ''];
+                }
+                const keyStatus = checkApiKeyStatus(tabId);
+                const indicator = keyStatus.hasKey
+                    ? styles.success('● API Key: Set')
+                    : styles.error('○ API Key: Not set');
+                return [`  ${indicator}`, ''];
+            },
+            // Handle 's' key to set API key for current provider
+            handleCustomKey: (key, tabId) => {
+                const char = key.toString();
+                if (char === 's' && tabId !== 'others' && tabId !== 'ollama') {
+                    const providerName = PROVIDER_TABS.find(t => t.id === tabId)?.label ?? tabId;
+                    return {
+                        handled: true,
+                        pushScreen: new KeyInputScreen(tabId, providerName, this.getStyles(), () => { this.requestRender(); }),
+                    };
+                }
+                return { handled: false };
             },
             emptyMessage: 'No models available for this provider.',
             noResultsMessage: 'No models match the search.',
         });
-        this.currentModel = currentModel;
-        this.currentProvider = currentProvider;
+        this.activeModel = activeModel;
+        this.activeProvider = activeProvider;
         // Set initial tab based on current provider
         if (initialTabIndex >= 0) {
             this.state.currentTab = initialTabIndex;
             // Re-filter items for the selected tab
-            this.state.filteredItems = MODEL_OPTIONS.filter((item) => item.provider === PROVIDER_TABS[initialTabIndex]?.id);
+            const tabId = PROVIDER_TABS[initialTabIndex]?.id;
+            this.state.filteredItems = listItems.filter((item) => {
+                if (tabId === 'others') {
+                    return item.type === 'provider';
+                }
+                // Primary provider tabs show tier items for that provider
+                return item.type === 'tier' && item.provider === tabId;
+            });
         }
+        // Start fetching Ollama models in background
+        this.fetchOllamaModels();
     }
     /**
-     * Override to handle model selection on Enter.
+     * Fetch available Ollama models and update state.
      */
-    onItemSelected(item) {
-        if (item.id === this.currentModel) {
-            // Same model, no change
-            return undefined;
-        }
-        // Save to settings
-        setSetting('defaultModel', item.id);
-        setSetting('defaultProvider', item.provider);
-        const requiresRestart = item.provider !== this.currentProvider;
-        return {
-            modelChanged: item.id,
-            provider: item.provider,
-            requiresRestart,
-        };
+    fetchOllamaModels() {
+        listOllamaModels().then((result) => {
+            this.updateOllamaState(result);
+        }).catch(() => {
+            this.ollamaState.status = 'error';
+            this.ollamaState.error = 'Failed to fetch models';
+            this.requestRender();
+        });
+    }
+    /**
+     * Update Ollama state based on fetch result.
+     */
+    updateOllamaState(result) {
+        if (!result.ollamaRunning) {
+            this.ollamaState.status = 'offline';
+            this.ollamaState.availableModels.clear();
+            this.requestRender();
+            return;
+        }
+        if (!result.success) {
+            this.ollamaState.status = 'error';
+            this.ollamaState.error = result.error;
+            this.ollamaState.availableModels.clear();
+            this.requestRender();
+            return;
+        }
+        this.ollamaState.status = 'connected';
+        this.ollamaState.availableModels.clear();
+        // Add all available model names to the set
+        for (const model of result.models) {
+            const modelName = model.name.toLowerCase();
+            const baseName = modelName.split(':')[0];
+            this.ollamaState.availableModels.add(modelName);
+            this.ollamaState.availableModels.add(baseName);
+        }
+        this.requestRender();
+    }
+    /**
+     * Create detail screen for a list item.
+     * For tiers: shows TierDetailScreen to select model for that tier
+     * For providers: shows OthersProviderDetailScreen with provider's tier/models
+     */
+    createDetailScreen(item) {
+        if (item.type === 'provider') {
+            // Show provider detail screen with its tiers
+            return new OthersProviderDetailScreen(item.metadata, this.getStyles(), this.activeModel, this.activeProvider, () => { this.requestRender(); });
+        }
+        // TierItem - show tier detail screen
+        return new TierDetailScreen(item, this.getStyles(), this.activeModel, this.activeProvider, this.ollamaState, () => { this.requestRender(); });
     }
 }