@compilr-dev/cli 0.4.0

package/dist/ui/config-overlay.js

@@ -0,0 +1,977 @@
+/**
+ * Config Overlay
+ *
+ * Claude Code-style settings overlay with 3 tabs:
+ * - Status: Read-only info (version, model, provider, cwd, session)
+ * - Config: Interactive settings (toggle/cycle with Enter/Space)
+ * - Usage: Usage statistics with progress bars (mocked)
+ *
+ * Includes theme selector sub-screen with 418 themes.
+ */
+import chalk from 'chalk';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as terminal from './terminal.js';
+import { getCuratedThemes, getCurrentTheme, setCurrentTheme, searchAndFilterThemes, getThemeCount, clearStyleCache, getStyles, } from '../themes/index.js';
+import { getSettings, setSetting, permissionModeToDisplay, displayToPermissionMode, notificationModeToDisplay, displayToNotificationMode, } from '../settings/index.js';
+import { hasApiKey, settingsProviderToCredentialKey } from '../utils/credentials.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const VERSION = '2.0.57';
+const THEME_PAGE_SIZE = 12;
+const TABS = [
+    { id: 'status', label: 'Status' },
+    { id: 'config', label: 'Config' },
+    { id: 'usage', label: 'Usage' },
+];
+// Provider tabs for model selector
+const MODEL_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 (1.5 models retired April 2025, use 2.0+ only)
+    { 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' },
+];
+function getModelsForProvider(providerId) {
+    return MODEL_OPTIONS.filter(m => m.provider === providerId);
+}
+// =============================================================================
+// Config Items (loaded from settings)
+// =============================================================================
+function getConfigItems(currentModel) {
+    const currentTheme = getCurrentTheme();
+    const settings = getSettings();
+    // Find display name for current model
+    const modelOption = MODEL_OPTIONS.find(m => m.id === currentModel);
+    const modelDisplay = modelOption ? modelOption.name : currentModel || 'Default';
+    return [
+        { id: 'autoCompact', label: 'Auto-compact', type: 'boolean', value: settings.autoCompact },
+        { id: 'showTips', label: 'Show tips', type: 'boolean', value: settings.showTips },
+        { id: 'reviseCode', label: 'Revise code (checkpoints)', type: 'boolean', value: settings.reviseCode },
+        { id: 'verbose', label: 'Verbose output', type: 'boolean', value: settings.verbose },
+        { id: 'progressBar', label: 'Terminal progress bar', type: 'boolean', value: settings.progressBar },
+        {
+            id: 'permissionMode',
+            label: 'Default permission mode',
+            type: 'cycle',
+            value: permissionModeToDisplay(settings.permissionMode),
+            options: ['Default', 'Plan', 'Bypass prompts'],
+        },
+        { id: 'gitignore', label: 'Respect .gitignore in file picker', type: 'boolean', value: settings.gitignore },
+        { id: 'theme', label: 'Theme', type: 'submenu', value: currentTheme.name },
+        { id: 'model', label: 'Model', type: 'submenu', value: modelDisplay },
+        {
+            id: 'notifications',
+            label: 'Notifications',
+            type: 'cycle',
+            value: notificationModeToDisplay(settings.notifications),
+            options: ['Auto', 'Enabled', 'Disabled'],
+        },
+        {
+            id: 'outputStyle',
+            label: 'Output style',
+            type: 'cycle',
+            value: settings.outputStyle,
+            options: ['default', 'compact', 'verbose'],
+        },
+        {
+            id: 'editorMode',
+            label: 'Editor mode',
+            type: 'cycle',
+            value: settings.editorMode,
+            options: ['normal', 'vim', 'emacs'],
+        },
+        { id: 'autoInstall', label: 'Auto-install IDE extension', type: 'boolean', value: settings.autoInstall },
+    ];
+}
+// Unused helper function - removed to fix lint error
+// function getDefaultUsageStats(): UsageStats {
+//   return {
+//     inputTokens: 0,
+//     outputTokens: 0,
+//     requests: 0,
+//     contextUsed: 0,
+//     contextMax: 200000,
+//     messageCount: 0,
+//   };
+// }
+// =============================================================================
+// Rendering - Header
+// =============================================================================
+function renderHeader(state) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
+    // Tab row
+    let tabLine = ' Settings: ';
+    for (let i = 0; i < TABS.length; i++) {
+        const tab = TABS[i];
+        if (i === state.currentTab) {
+            tabLine += s.selected(` ${tab.label} `) + ' ';
+        }
+        else {
+            tabLine += s.muted(` ${tab.label} `) + ' ';
+        }
+    }
+    tabLine += s.muted('(tab to cycle)');
+    lines.push(tabLine);
+    lines.push('');
+    return lines;
+}
+// =============================================================================
+// Rendering - Status Tab
+// =============================================================================
+function renderStatusTab(state) {
+    const s = getStyles();
+    const lines = [];
+    const info = state.statusInfo;
+    // Calculate uptime
+    const uptimeMs = Date.now() - info.startTime.getTime();
+    const uptimeSecs = Math.floor(uptimeMs / 1000);
+    const uptimeMins = Math.floor(uptimeSecs / 60);
+    const uptimeStr = uptimeMins > 0
+        ? `${String(uptimeMins)}m ${String(uptimeSecs % 60)}s`
+        : `${String(uptimeSecs)}s`;
+    lines.push(` Version: ${s.primary(info.version)}`);
+    lines.push(` Session: ${s.muted(info.sessionId)}`);
+    lines.push(` Uptime: ${s.muted(uptimeStr)}`);
+    lines.push('');
+    lines.push(` Provider: ${s.primary(info.provider)}`);
+    lines.push(` Model: ${s.primary(info.model)}`);
+    lines.push(` Tools: ${s.muted(String(info.toolCount))}`);
+    lines.push('');
+    lines.push(` Cwd: ${s.muted(info.cwd)}`);
+    lines.push(` Memory: ${s.muted(info.memoryFile || 'none')}`);
+    lines.push(` Settings: ${s.muted('~/.compilr-dev/settings.json')}`);
+    return lines;
+}
+// =============================================================================
+// Rendering - Config Tab
+// =============================================================================
+function renderConfigTab(state) {
+    const s = getStyles();
+    const lines = [];
+    lines.push(chalk.bold(' Configure Claude Code preferences'));
+    lines.push('');
+    for (let i = 0; i < state.configItems.length; i++) {
+        const item = state.configItems[i];
+        const isSelected = i === state.selectedItem;
+        const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+        let valueStr;
+        if (item.type === 'boolean') {
+            valueStr = item.value ? s.success('true') : s.muted('false');
+        }
+        else if (item.type === 'submenu') {
+            valueStr = s.primary(String(item.value));
+        }
+        else {
+            valueStr = s.primary(String(item.value));
+        }
+        const labelStyled = isSelected
+            ? s.primary(item.label.padEnd(35))
+            : item.label.padEnd(35);
+        lines.push(prefix + labelStyled + valueStr);
+    }
+    return lines;
+}
+// =============================================================================
+// Rendering - Usage Tab
+// =============================================================================
+function renderUsageTab(state) {
+    const s = getStyles();
+    const lines = [];
+    const stats = state.usageStats;
+    // Format numbers with K suffix
+    const formatNum = (n) => {
+        if (n >= 1000)
+            return `${(n / 1000).toFixed(1)}k`;
+        return String(n);
+    };
+    lines.push(chalk.bold(' Session Tokens'));
+    lines.push(`   Input:  ${s.primary(formatNum(stats.inputTokens).padStart(8))}`);
+    lines.push(`   Output: ${s.primary(formatNum(stats.outputTokens).padStart(8))}`);
+    lines.push(`   Total:  ${s.primary(formatNum(stats.inputTokens + stats.outputTokens).padStart(8))}`);
+    lines.push('');
+    lines.push(chalk.bold(' Context Window'));
+    const contextPct = stats.contextMax > 0 ? stats.contextUsed / stats.contextMax : 0;
+    const contextPctDisplay = Math.round(contextPct * 100);
+    lines.push(`   ${renderProgressBar(contextPct, 30)} ${String(contextPctDisplay)}% used`);
+    lines.push(s.muted(`   ${formatNum(Math.round(stats.contextUsed))} / ${formatNum(stats.contextMax)} tokens`));
+    lines.push('');
+    lines.push(chalk.bold(' Session Activity'));
+    lines.push(`   Requests: ${s.primary(String(stats.requests))}`);
+    lines.push(`   Messages: ${s.primary(String(stats.messageCount))}`);
+    return lines;
+}
+function renderProgressBar(value, width) {
+    const s = getStyles();
+    const filled = Math.round(value * width);
+    const empty = width - filled;
+    let color = s.success;
+    if (value > 0.8)
+        color = s.error;
+    else if (value > 0.6)
+        color = s.warning;
+    return color('█'.repeat(filled)) + s.muted('░'.repeat(empty));
+}
+// =============================================================================
+// Rendering - Footer
+// =============================================================================
+function renderFooter(state) {
+    const s = getStyles();
+    const lines = [];
+    lines.push('');
+    if (state.currentTab === 1) {
+        // Config tab
+        lines.push(s.muted(' Enter/Space to change · Esc to exit'));
+    }
+    else {
+        lines.push(s.muted(' Esc to exit'));
+    }
+    return lines;
+}
+// =============================================================================
+// Rendering - Theme Selector (Curated)
+// =============================================================================
+function buildThemeCuratedLines(state) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    const currentTheme = getCurrentTheme();
+    const counts = getThemeCount();
+    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
+    lines.push('');
+    lines.push(chalk.bold(' Theme'));
+    lines.push('');
+    lines.push(' Choose a theme:');
+    lines.push('');
+    // Show curated themes
+    for (let i = 0; i < state.curatedThemes.length; i++) {
+        const theme = state.curatedThemes[i];
+        const isSelected = i === state.themeSelectedIndex;
+        const isCurrent = theme.id === currentTheme.id;
+        const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+        const num = `${(i + 1).toString().padStart(2)}. `;
+        const icon = theme.type === 'dark' ? '🌙' : '☀️';
+        const checkmark = isCurrent ? s.success(' ✓') : '';
+        const label = isSelected ? s.primary(theme.name) : theme.name;
+        lines.push(prefix + num + label.padEnd(30) + icon + checkmark);
+    }
+    // Separator
+    lines.push(s.muted('   ────────────────────────────────────'));
+    // Browse all option
+    const browseIndex = state.curatedThemes.length;
+    const isBrowseSelected = state.themeSelectedIndex === browseIndex;
+    const browsePrefix = isBrowseSelected ? s.primary(' ❯ ') : '   ';
+    const browseLabel = isBrowseSelected
+        ? s.primary(`Browse all ${String(counts.total)} themes...`)
+        : `Browse all ${String(counts.total)} themes...`;
+    lines.push(browsePrefix + browseLabel + '  →');
+    lines.push('');
+    // Preview with theme colors
+    const previewTheme = state.themeSelectedIndex < state.curatedThemes.length
+        ? state.curatedThemes[state.themeSelectedIndex]
+        : currentTheme;
+    lines.push(...renderThemePreview(previewTheme));
+    lines.push('');
+    lines.push(s.muted(' ↑↓ Navigate · 1-9,0 Quick select · Enter Select · Esc Back'));
+    return lines;
+}
+// =============================================================================
+// Rendering - Theme Selector (Browse All)
+// =============================================================================
+function buildThemeBrowseLines(state) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    const currentTheme = getCurrentTheme();
+    const counts = getThemeCount();
+    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
+    lines.push('');
+    lines.push(chalk.bold(` All Themes (${String(counts.total)})`));
+    lines.push('');
+    // Search box
+    const searchBox = ` Search: ${state.browseSearchQuery}█`;
+    lines.push(searchBox);
+    // Filter tabs
+    const filterAll = state.browseFilterType === 'all' ? s.selected(' All ') : s.muted(' All ');
+    const filterDark = state.browseFilterType === 'dark' ? s.selected(' Dark ') : s.muted(' Dark ');
+    const filterLight = state.browseFilterType === 'light' ? s.selected(' Light ') : s.muted(' Light ');
+    lines.push(` Filter: ${filterAll} ${filterDark} ${filterLight}  ${s.muted('(Tab to switch)')}`);
+    lines.push('');
+    // Results
+    const totalResults = state.browseResults.length;
+    const totalPages = Math.ceil(totalResults / THEME_PAGE_SIZE);
+    const startIndex = state.browseCurrentPage * THEME_PAGE_SIZE;
+    const endIndex = Math.min(startIndex + THEME_PAGE_SIZE, totalResults);
+    const pageResults = state.browseResults.slice(startIndex, endIndex);
+    if (totalResults === 0) {
+        lines.push(s.muted(' No themes found'));
+    }
+    else {
+        lines.push(s.muted(` Showing ${String(startIndex + 1)}-${String(endIndex)} of ${String(totalResults)}:`));
+        lines.push('');
+        for (let i = 0; i < pageResults.length; i++) {
+            const theme = pageResults[i];
+            const isSelected = i === state.browseSelectedIndex;
+            const isCurrent = theme.id === currentTheme.id;
+            const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+            const icon = theme.type === 'dark' ? '🌙' : '☀️';
+            const checkmark = isCurrent ? s.success(' ✓') : '';
+            const label = isSelected ? s.primary(theme.name) : theme.name;
+            lines.push(prefix + label.padEnd(35) + icon + checkmark);
+        }
+    }
+    lines.push('');
+    // Pagination
+    if (totalPages > 1) {
+        const pageInfo = `Page ${String(state.browseCurrentPage + 1)} of ${String(totalPages)}`;
+        const prevHint = state.browseCurrentPage > 0 ? '← ' : '  ';
+        const nextHint = state.browseCurrentPage < totalPages - 1 ? ' →' : '';
+        lines.push(s.muted(` ${prevHint}${pageInfo}${nextHint}`));
+    }
+    // Separator
+    lines.push(s.muted(' ────────────────────────────────────'));
+    // Back option
+    lines.push(s.muted(' ← Back to curated themes'));
+    lines.push('');
+    // Preview
+    if (pageResults.length > 0 && state.browseSelectedIndex < pageResults.length) {
+        lines.push(...renderThemePreview(pageResults[state.browseSelectedIndex]));
+    }
+    lines.push('');
+    lines.push(s.muted(' Type to search · ↑↓ Navigate · ←→ Pages · Tab Filter · Enter Select · Esc Back'));
+    return lines;
+}
+// =============================================================================
+// Rendering - Theme Preview
+// =============================================================================
+function renderThemePreview(theme) {
+    const s = getStyles();
+    const lines = [];
+    const colors = theme.colors;
+    lines.push(s.muted(' Preview:'));
+    // Use chalk for hex colors in preview
+    const primary = chalk.hex(colors.primary);
+    const secondary = chalk.hex(colors.secondary || colors.primary);
+    const muted = chalk.hex(colors.muted);
+    const fg = chalk.hex(colors.foreground);
+    lines.push(' ' + primary.bold('function') + ' ' + secondary('greet') + fg('() {'));
+    lines.push('   ' + muted('// Say hello'));
+    lines.push('   ' + fg('console.') + secondary('log') + fg('("Hello, ') + primary('World') + fg('!");'));
+    lines.push(' ' + fg('}'));
+    return lines;
+}
+// =============================================================================
+// Rendering - Model Selector
+// =============================================================================
+function buildModelSelectorLines(state) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    // Header with separator
+    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
+    // Tab row (similar to main config tabs)
+    let tabLine = ' Model: ';
+    for (let i = 0; i < MODEL_PROVIDER_TABS.length; i++) {
+        const tab = MODEL_PROVIDER_TABS[i];
+        const isCurrentProvider = tab.id === state.currentProvider;
+        const indicator = isCurrentProvider ? ' ✓' : '';
+        if (i === state.modelProviderTab) {
+            tabLine += s.selected(` ${tab.label}${indicator} `) + ' ';
+        }
+        else {
+            tabLine += s.muted(` ${tab.label}${indicator} `) + ' ';
+        }
+    }
+    tabLine += s.muted('(tab to switch)');
+    lines.push(tabLine);
+    lines.push('');
+    // Current provider info
+    const selectedProviderTab = MODEL_PROVIDER_TABS[state.modelProviderTab];
+    const isHotSwappable = selectedProviderTab.id === state.currentProvider;
+    if (isHotSwappable) {
+        lines.push(s.success(' Current provider - changes apply immediately'));
+    }
+    else {
+        lines.push(s.warning(' Different provider - restart required to apply'));
+    }
+    // Check if API key is configured for selected provider
+    if (selectedProviderTab.id !== 'ollama') {
+        const credKey = settingsProviderToCredentialKey(selectedProviderTab.id);
+        if (!hasApiKey(credKey)) {
+            lines.push(s.error(' ⚠ No API key configured - use /keys to set it'));
+        }
+    }
+    lines.push('');
+    // Models for selected provider
+    const models = getModelsForProvider(selectedProviderTab.id);
+    for (let i = 0; i < models.length; i++) {
+        const model = models[i];
+        const isSelected = i === state.modelSelectedIndex;
+        const isCurrentModel = model.id === state.statusInfo.model;
+        const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+        const checkmark = isCurrentModel ? s.success(' ✓') : '';
+        const label = isSelected ? s.primary(model.name) : model.name;
+        const desc = s.muted(` · ${model.description}`);
+        lines.push(prefix + label.padEnd(20) + desc + checkmark);
+    }
+    lines.push('');
+    // Footer
+    lines.push(s.muted(' Tab Provider · ↑↓ Model · Enter Select · Esc Back'));
+    return lines;
+}
+// =============================================================================
+// Unified Rendering
+// =============================================================================
+// Target height for consistent screen sizes (model selector is tallest at ~25 lines)
+const TARGET_HEIGHT = 25;
+function padToHeight(lines, targetHeight) {
+    while (lines.length < targetHeight) {
+        lines.push('');
+    }
+    return lines;
+}
+function buildLines(state) {
+    if (state.mode === 'theme-curated') {
+        return padToHeight(buildThemeCuratedLines(state), TARGET_HEIGHT);
+    }
+    if (state.mode === 'theme-browse') {
+        return padToHeight(buildThemeBrowseLines(state), TARGET_HEIGHT);
+    }
+    if (state.mode === 'model-selector') {
+        return padToHeight(buildModelSelectorLines(state), TARGET_HEIGHT);
+    }
+    const allLines = [];
+    allLines.push(...renderHeader(state));
+    switch (TABS[state.currentTab].id) {
+        case 'status':
+            allLines.push(...renderStatusTab(state));
+            break;
+        case 'config':
+            allLines.push(...renderConfigTab(state));
+            break;
+        case 'usage':
+            allLines.push(...renderUsageTab(state));
+            break;
+    }
+    allLines.push(...renderFooter(state));
+    return padToHeight(allLines, TARGET_HEIGHT);
+}
+function render(state, prevLineCount) {
+    const lines = buildLines(state);
+    // Clear previous content
+    terminal.clearLinesAbove(prevLineCount);
+    // Write new content
+    terminal.write(lines.join('\n'));
+    return lines.length;
+}
+// =============================================================================
+// Config Item Actions
+// =============================================================================
+function toggleOrCycleItem(state) {
+    const item = state.configItems[state.selectedItem];
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!item)
+        return;
+    if (item.type === 'boolean') {
+        item.value = !item.value;
+        // Persist boolean settings - id is always a valid settings key
+        switch (item.id) {
+            case 'autoCompact':
+                setSetting('autoCompact', item.value);
+                break;
+            case 'showTips':
+                setSetting('showTips', item.value);
+                break;
+            case 'reviseCode':
+                setSetting('reviseCode', item.value);
+                break;
+            case 'verbose':
+                setSetting('verbose', item.value);
+                break;
+            case 'progressBar':
+                setSetting('progressBar', item.value);
+                break;
+            case 'gitignore':
+                setSetting('gitignore', item.value);
+                break;
+            case 'autoInstall':
+                setSetting('autoInstall', item.value);
+                break;
+        }
+    }
+    else if (item.type === 'cycle' && item.options) {
+        const currentIndex = item.options.indexOf(String(item.value));
+        const nextIndex = (currentIndex + 1) % item.options.length;
+        item.value = item.options[nextIndex];
+        // Persist cycle settings
+        switch (item.id) {
+            case 'permissionMode':
+                setSetting('permissionMode', displayToPermissionMode(item.value));
+                break;
+            case 'notifications':
+                setSetting('notifications', displayToNotificationMode(item.value));
+                break;
+            case 'outputStyle':
+                setSetting('outputStyle', item.value);
+                break;
+            case 'editorMode':
+                setSetting('editorMode', item.value);
+                break;
+            // 'model' is not persisted (would need provider integration)
+        }
+    }
+    else if (item.type === 'submenu' && item.id === 'theme') {
+        // Enter theme selector (curated mode)
+        state.mode = 'theme-curated';
+        state.themeSelectedIndex = 0;
+        // Find current theme in curated list
+        const currentTheme = getCurrentTheme();
+        const curatedIndex = state.curatedThemes.findIndex((t) => t.id === currentTheme.id);
+        if (curatedIndex >= 0) {
+            state.themeSelectedIndex = curatedIndex;
+        }
+    }
+    else if (item.type === 'submenu' && item.id === 'model') {
+        // Enter model selector
+        state.mode = 'model-selector';
+        state.modelSelectedIndex = 0;
+        state.modelProviderTab = 0;
+        // Find current model and set provider tab accordingly
+        const currentModel = MODEL_OPTIONS.find((m) => m.id === state.statusInfo.model);
+        if (currentModel) {
+            const providerTabIndex = MODEL_PROVIDER_TABS.findIndex((p) => p.id === currentModel.provider);
+            if (providerTabIndex >= 0) {
+                state.modelProviderTab = providerTabIndex;
+            }
+            // Find model index within that provider's models
+            const providerModels = getModelsForProvider(currentModel.provider);
+            const modelIndex = providerModels.findIndex((m) => m.id === currentModel.id);
+            if (modelIndex >= 0) {
+                state.modelSelectedIndex = modelIndex;
+            }
+        }
+    }
+}
+// =============================================================================
+// Theme Selection Actions
+// =============================================================================
+function selectTheme(state, theme) {
+    setCurrentTheme(theme.id);
+    clearStyleCache();
+    // Update the config item value
+    const themeItem = state.configItems.find((item) => item.id === 'theme');
+    if (themeItem) {
+        themeItem.value = theme.name;
+    }
+}
+function updateBrowseResults(state) {
+    state.browseResults = searchAndFilterThemes(state.browseSearchQuery, state.browseFilterType);
+    state.browseSelectedIndex = 0;
+    state.browseCurrentPage = 0;
+}
+/**
+ * Show the config overlay
+ */
+export async function showConfigOverlay(options = {}) {
+    const curatedThemes = getCuratedThemes();
+    const result = {};
+    const state = {
+        mode: options.initialMode || 'tabs',
+        currentTab: 1, // Start on Config tab (like Claude Code)
+        selectedItem: 0,
+        scrollOffset: 0,
+        // Theme curated state
+        themeSelectedIndex: 0,
+        curatedThemes,
+        // Theme browse state
+        browseSearchQuery: '',
+        browseFilterType: 'all',
+        browseCurrentPage: 0,
+        browseSelectedIndex: 0,
+        browseResults: [],
+        // Model selector state
+        modelSelectedIndex: 0,
+        modelProviderTab: 0,
+        currentProvider: options.provider || 'unknown',
+        configItems: getConfigItems(options.model),
+        statusInfo: {
+            version: options.version || VERSION,
+            sessionId: options.sessionId || generateSessionId(),
+            cwd: options.cwd || process.cwd(),
+            model: options.model || 'unknown',
+            provider: options.provider || 'unknown',
+            toolCount: options.toolCount ?? 0,
+            startTime: options.startTime || new Date(),
+            memoryFile: findMemoryFile(options.cwd),
+        },
+        usageStats: {
+            inputTokens: options.inputTokens ?? 0,
+            outputTokens: options.outputTokens ?? 0,
+            requests: options.requests ?? 0,
+            contextUsed: options.contextUsed ?? 0,
+            contextMax: options.contextMax ?? 200000,
+            messageCount: options.messageCount ?? 0,
+        },
+        onModelChange: options.onModelChange,
+    };
+    // If starting in model-selector mode, initialize the provider tab and model index
+    if (options.initialMode === 'model-selector') {
+        // Find current model and set provider tab accordingly
+        const currentModel = MODEL_OPTIONS.find((m) => m.id === state.statusInfo.model);
+        if (currentModel) {
+            const providerTabIndex = MODEL_PROVIDER_TABS.findIndex((p) => p.id === currentModel.provider);
+            if (providerTabIndex >= 0) {
+                state.modelProviderTab = providerTabIndex;
+            }
+            // Find model index within that provider's models
+            const providerModels = getModelsForProvider(currentModel.provider);
+            const modelIndex = providerModels.findIndex((m) => m.id === currentModel.id);
+            if (modelIndex >= 0) {
+                state.modelSelectedIndex = modelIndex;
+            }
+        }
+    }
+    let lineCount = 0;
+    terminal.writeLine('');
+    terminal.hideCursor();
+    const wasRawMode = process.stdin.isRaw;
+    terminal.enableRawMode();
+    lineCount = render(state, 0);
+    return new Promise((resolve) => {
+        const cleanup = () => {
+            terminal.clearLinesAbove(lineCount);
+            terminal.writeLine('');
+            terminal.showCursor();
+            if (!wasRawMode) {
+                terminal.disableRawMode();
+            }
+            process.stdin.removeListener('data', onData);
+        };
+        const onData = (data) => {
+            const isEscape = data.length === 1 && data[0] === 0x1b;
+            const isTab = data.length === 1 && data[0] === 0x09;
+            const isUpArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x41;
+            const isDownArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x42;
+            const isLeftArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x44;
+            const isRightArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x43;
+            const isCtrlC = data.length === 1 && data[0] === 0x03;
+            const isEnter = data.length === 1 && (data[0] === 0x0d || data[0] === 0x0a);
+            const isSpace = data.length === 1 && data[0] === 0x20;
+            const isBackspace = data.length === 1 && (data[0] === 0x7f || data[0] === 0x08);
+            const char = data.toString();
+            const isNumberKey = /^[0-9]$/.test(char);
+            const isPrintable = data.length === 1 && data[0] >= 32 && data[0] < 127;
+            // ===== TABS MODE =====
+            if (state.mode === 'tabs') {
+                if (isEscape || isCtrlC) {
+                    cleanup();
+                    resolve(result);
+                    return;
+                }
+                if (isTab) {
+                    state.currentTab = (state.currentTab + 1) % TABS.length;
+                    state.selectedItem = 0;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Navigation only in Config tab
+                if (TABS[state.currentTab].id === 'config') {
+                    if (isUpArrow && state.selectedItem > 0) {
+                        state.selectedItem--;
+                        lineCount = render(state, lineCount);
+                        return;
+                    }
+                    if (isDownArrow && state.selectedItem < state.configItems.length - 1) {
+                        state.selectedItem++;
+                        lineCount = render(state, lineCount);
+                        return;
+                    }
+                    if (isEnter || isSpace) {
+                        toggleOrCycleItem(state);
+                        lineCount = render(state, lineCount);
+                        return;
+                    }
+                }
+                return;
+            }
+            // ===== THEME CURATED MODE =====
+            if (state.mode === 'theme-curated') {
+                const maxIndex = state.curatedThemes.length; // includes "Browse all" option
+                if (isCtrlC) {
+                    cleanup();
+                    resolve(result);
+                    return;
+                }
+                if (isEscape) {
+                    state.mode = 'tabs';
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isUpArrow && state.themeSelectedIndex > 0) {
+                    state.themeSelectedIndex--;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isDownArrow && state.themeSelectedIndex < maxIndex) {
+                    state.themeSelectedIndex++;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isEnter) {
+                    if (state.themeSelectedIndex === state.curatedThemes.length) {
+                        // "Browse all" selected
+                        state.mode = 'theme-browse';
+                        state.browseSearchQuery = '';
+                        state.browseFilterType = 'all';
+                        updateBrowseResults(state);
+                        lineCount = render(state, lineCount);
+                    }
+                    else {
+                        // Theme selected
+                        const theme = state.curatedThemes[state.themeSelectedIndex];
+                        selectTheme(state, theme);
+                        state.mode = 'tabs';
+                        lineCount = render(state, lineCount);
+                    }
+                    return;
+                }
+                // Quick select with number keys (1-9 = themes 1-9, 0 = theme 10)
+                if (isNumberKey) {
+                    const num = char === '0' ? 10 : parseInt(char, 10);
+                    if (num >= 1 && num <= state.curatedThemes.length) {
+                        const theme = state.curatedThemes[num - 1];
+                        selectTheme(state, theme);
+                        state.mode = 'tabs';
+                        lineCount = render(state, lineCount);
+                    }
+                    return;
+                }
+                return;
+            }
+            // ===== THEME BROWSE MODE =====
+            if (state.mode === 'theme-browse') {
+                const totalPages = Math.ceil(state.browseResults.length / THEME_PAGE_SIZE);
+                const pageResults = state.browseResults.slice(state.browseCurrentPage * THEME_PAGE_SIZE, (state.browseCurrentPage + 1) * THEME_PAGE_SIZE);
+                if (isCtrlC) {
+                    cleanup();
+                    resolve(result);
+                    return;
+                }
+                if (isEscape) {
+                    // Back to curated
+                    state.mode = 'theme-curated';
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Tab cycles filter
+                if (isTab) {
+                    const filters = ['all', 'dark', 'light'];
+                    const currentIdx = filters.indexOf(state.browseFilterType);
+                    state.browseFilterType = filters[(currentIdx + 1) % filters.length];
+                    updateBrowseResults(state);
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Navigation
+                if (isUpArrow && state.browseSelectedIndex > 0) {
+                    state.browseSelectedIndex--;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isDownArrow && state.browseSelectedIndex < pageResults.length - 1) {
+                    state.browseSelectedIndex++;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Page navigation
+                if (isLeftArrow && state.browseCurrentPage > 0) {
+                    state.browseCurrentPage--;
+                    state.browseSelectedIndex = 0;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isRightArrow && state.browseCurrentPage < totalPages - 1) {
+                    state.browseCurrentPage++;
+                    state.browseSelectedIndex = 0;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Select theme
+                if (isEnter && pageResults.length > 0) {
+                    const theme = pageResults[state.browseSelectedIndex];
+                    selectTheme(state, theme);
+                    state.mode = 'tabs';
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Backspace - delete search char
+                if (isBackspace && state.browseSearchQuery.length > 0) {
+                    state.browseSearchQuery = state.browseSearchQuery.slice(0, -1);
+                    updateBrowseResults(state);
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Type to search (printable chars except space which might conflict)
+                if (isPrintable && !isSpace) {
+                    state.browseSearchQuery += char;
+                    updateBrowseResults(state);
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                return;
+            }
+            // ===== MODEL SELECTOR MODE =====
+            // Mode is always 'model-selector' at this point since we're in the else block
+            {
+                const currentProviderTab = MODEL_PROVIDER_TABS[state.modelProviderTab];
+                const providerModels = getModelsForProvider(currentProviderTab.id);
+                const maxModelIndex = providerModels.length - 1;
+                if (isCtrlC) {
+                    cleanup();
+                    resolve(result);
+                    return;
+                }
+                if (isEscape) {
+                    // If we started in model-selector mode (via /model command), close entirely
+                    if (options.initialMode === 'model-selector') {
+                        cleanup();
+                        resolve(result);
+                        return;
+                    }
+                    state.mode = 'tabs';
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Tab to switch provider tabs
+                if (isTab) {
+                    state.modelProviderTab = (state.modelProviderTab + 1) % MODEL_PROVIDER_TABS.length;
+                    state.modelSelectedIndex = 0; // Reset model selection when switching tabs
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Left/Right arrows also switch provider tabs
+                if (isLeftArrow) {
+                    state.modelProviderTab = (state.modelProviderTab - 1 + MODEL_PROVIDER_TABS.length) % MODEL_PROVIDER_TABS.length;
+                    state.modelSelectedIndex = 0;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isRightArrow) {
+                    state.modelProviderTab = (state.modelProviderTab + 1) % MODEL_PROVIDER_TABS.length;
+                    state.modelSelectedIndex = 0;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isUpArrow && state.modelSelectedIndex > 0) {
+                    state.modelSelectedIndex--;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isDownArrow && state.modelSelectedIndex < maxModelIndex) {
+                    state.modelSelectedIndex++;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isEnter) {
+                    const selectedModel = providerModels[state.modelSelectedIndex];
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    if (selectedModel) {
+                        const isCurrentProvider = selectedModel.provider === state.currentProvider;
+                        // Update the config item display
+                        const modelItem = state.configItems.find((item) => item.id === 'model');
+                        if (modelItem) {
+                            modelItem.value = selectedModel.name;
+                        }
+                        // Update status info
+                        state.statusInfo.model = selectedModel.id;
+                        // Always persist model selection to settings
+                        setSetting('defaultProvider', selectedModel.provider);
+                        setSetting('defaultModel', selectedModel.id);
+                        if (isCurrentProvider) {
+                            result.modelChanged = selectedModel.id;
+                        }
+                        // Different provider: settings are saved, will take effect on restart
+                        // If we started in model-selector mode (via /model command), close entirely
+                        if (options.initialMode === 'model-selector') {
+                            cleanup();
+                            resolve(result);
+                            return;
+                        }
+                        // Going back to config tabs - don't call onModelChange callback here
+                        // as the overlay is still open. The model change will be reflected
+                        // in the config display, and the actual switch happens when overlay closes.
+                        state.mode = 'tabs';
+                        lineCount = render(state, lineCount);
+                    }
+                    return;
+                }
+                return;
+            }
+        };
+        process.stdin.on('data', onData);
+    });
+}
+// =============================================================================
+// Helpers
+// =============================================================================
+function generateSessionId() {
+    const chars = '0123456789abcdef';
+    let id = '';
+    for (let i = 0; i < 8; i++) {
+        id += chars[Math.floor(Math.random() * chars.length)];
+    }
+    id += '-';
+    for (let i = 0; i < 4; i++) {
+        id += chars[Math.floor(Math.random() * chars.length)];
+    }
+    id += '-';
+    for (let i = 0; i < 4; i++) {
+        id += chars[Math.floor(Math.random() * chars.length)];
+    }
+    id += '-';
+    for (let i = 0; i < 12; i++) {
+        id += chars[Math.floor(Math.random() * chars.length)];
+    }
+    return id;
+}
+/**
+ * Find memory/instruction file in cwd
+ * Checks for COMPILR.md, .compilr/instructions.md, etc.
+ */
+function findMemoryFile(cwd) {
+    const dir = cwd || process.cwd();
+    const candidates = [
+        'COMPILR.md',
+        '.compilr/instructions.md',
+        'CLAUDE.md', // Legacy support
+        '.claude/instructions.md', // Legacy support
+        'AGENTS.md',
+    ];
+    for (const candidate of candidates) {
+        const fullPath = path.join(dir, candidate);
+        if (fs.existsSync(fullPath)) {
+            return fullPath;
+        }
+    }
+    return null;
+}