@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/config-overlay.js

@@ -1,37 +1,34 @@
 /**
  * Config Overlay
  *
- * Claude Code-style settings overlay with 3 tabs:
+ * Claude Code-style settings overlay with 4 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)
+ * - Paths: Path configuration and safety settings
+ * - Usage: Usage statistics with progress bars
  *
- * Includes theme selector sub-screen with 418 themes.
+ * Theme, Model, and Mascot selection are delegated to standalone overlays.
  */
 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';
+import { isEscape, isTab, isShiftTab, isEnter, isSpace, isCtrlC, isQuit, isNavigateUp, isNavigateDown, isBackspace, getNumberKey, isPrintable, extractPrintable, } from './base/key-utils.js';
+import { getCurrentTheme, getStyles, } from '../themes/index.js';
+import { getSettings, setSetting, permissionModeToDisplay, displayToPermissionMode, notificationModeToDisplay, displayToNotificationMode, projectStartupModeToDisplay, displayToProjectStartupMode, } from '../settings/index.js';
+import { getResolvedPathConfig, setDeleteProtection, setProjectMatchRequired, setWorkspacePath, setProjectsPath, setDataPath, } from '../settings/paths.js';
+import { pauseForOverlay, resumeAfterOverlay } from './overlay-controller.js';
+import { MASCOT_LABELS, } from './mascot/index.js';
 // =============================================================================
 // Constants
 // =============================================================================
-const VERSION = '2.0.57';
-const THEME_PAGE_SIZE = 12;
+const VERSION = '0.4.0';
 const TABS = [
     { id: 'status', label: 'Status' },
     { id: 'config', label: 'Config' },
+    { id: 'paths', label: 'Paths' },
     { 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' },
@@ -49,9 +46,6 @@ const MODEL_OPTIONS = [
     { 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)
 // =============================================================================
@@ -99,6 +93,21 @@ function getConfigItems(currentModel) {
             options: ['normal', 'vim', 'emacs'],
         },
         { id: 'autoInstall', label: 'Auto-install IDE extension', type: 'boolean', value: settings.autoInstall },
+        {
+            id: 'startupMode',
+            label: 'Startup behavior',
+            type: 'cycle',
+            value: settings.startupMode === 'menu' ? 'Show menu' : 'Direct to REPL',
+            options: ['Show menu', 'Direct to REPL'],
+        },
+        {
+            id: 'projectStartup',
+            label: 'Auto-open project',
+            type: 'cycle',
+            value: projectStartupModeToDisplay(settings.projectStartup),
+            options: ['Last opened', 'Off'],
+        },
+        { id: 'mascot', label: 'Mascot', type: 'submenu', value: MASCOT_LABELS[settings.mascot] },
     ];
 }
 // Unused helper function - removed to fix lint error
@@ -131,7 +140,7 @@ function renderHeader(state) {
             tabLine += s.muted(` ${tab.label} `) + ' ';
         }
     }
-    tabLine += s.muted('(tab to cycle)');
+    tabLine += s.muted('(Tab · 1-4)');
     lines.push(tabLine);
     lines.push('');
     return lines;
@@ -233,216 +242,93 @@ function renderProgressBar(value, width) {
     return color('█'.repeat(filled)) + s.muted('░'.repeat(empty));
 }
 // =============================================================================
-// Rendering - Footer
+// Rendering - Paths Tab
 // =============================================================================
-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) {
+function renderPathsTab(state) {
     const s = getStyles();
     const lines = [];
+    const pathConfig = getResolvedPathConfig();
     const cols = terminal.getTerminalWidth();
-    const currentTheme = getCurrentTheme();
-    const counts = getThemeCount();
-    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
+    // Layout constants
+    const labelWidth = 24;
+    const valueWidth = Math.max(30, cols - labelWidth - 8);
+    lines.push(chalk.bold(' Path Configuration'));
     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;
+    // Helper to render a path item
+    const renderPathItem = (index, label, value) => {
+        const isSelected = state.pathSelectedItem === index;
         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))));
+        if (state.pathEditMode && isSelected) {
+            // Edit mode - show input field
+            const labelStyled = s.primary(label.padEnd(labelWidth));
+            const inputDisplay = state.pathEditInput + '█';
+            lines.push(`${prefix}${labelStyled}${inputDisplay}`);
+        }
+        else {
+            // Normal mode - show value
+            const labelStyled = isSelected ? s.primary(label.padEnd(labelWidth)) : label.padEnd(labelWidth);
+            const valueStyled = isSelected ? s.primary(value) : s.muted(value);
+            const truncatedValue = value.length > valueWidth ? value.slice(0, valueWidth - 3) + '...' : value;
+            lines.push(`${prefix}${labelStyled}${valueStyled === s.primary(value) ? s.primary(truncatedValue) : s.muted(truncatedValue)}`);
+        }
+    };
+    // Path items (0-2)
+    renderPathItem(0, 'Workspace path', pathConfig.workspacePath);
+    renderPathItem(1, 'Projects path', pathConfig.projectsPath);
+    renderPathItem(2, 'Data path', pathConfig.dataPath);
     lines.push('');
-    lines.push(chalk.bold(` All Themes (${String(counts.total)})`));
+    lines.push(chalk.bold(' Safety Settings'));
     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)')}`);
+    // Helper to render a toggle item with consistent alignment
+    const renderToggleItem = (index, label, enabled, hint) => {
+        const isSelected = state.pathSelectedItem === index;
+        const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+        const labelStyled = isSelected ? s.primary(label.padEnd(labelWidth)) : label.padEnd(labelWidth);
+        const valueStyled = enabled ? s.success('enabled'.padStart(10)) : s.warning('disabled'.padStart(10));
+        lines.push(`${prefix}${labelStyled}${valueStyled}`);
+        lines.push(s.muted(`      ${hint}`));
+    };
+    // Toggle items (3-4)
+    renderToggleItem(3, 'Delete protection', pathConfig.deleteProtection, 'Only allow file deletion within projects path');
+    renderToggleItem(4, 'CWD mismatch warning', pathConfig.requireProjectMatch, 'Warn when current directory differs from active project');
     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);
+    // Allowed paths (if any)
+    if (pathConfig.allowedPaths.length > 0) {
+        lines.push(chalk.bold(' Additional Allowed Paths'));
+        for (const allowed of pathConfig.allowedPaths) {
+            lines.push(`   ${s.muted('•')} ${allowed}`);
         }
+        lines.push('');
     }
-    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
+// Rendering - Footer
 // =============================================================================
-function buildModelSelectorLines(state) {
+function renderFooter(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} `) + ' ';
+    lines.push('');
+    const tabId = TABS[state.currentTab].id;
+    if (tabId === 'config') {
+        // Config tab
+        lines.push(s.muted(' ↑↓/jk Navigate · Enter/Space Change · q/Esc Close'));
+    }
+    else if (tabId === 'paths') {
+        // Paths tab
+        if (state.pathEditMode) {
+            lines.push(s.muted(' Type path · Enter Save · Esc Cancel'));
         }
         else {
-            tabLine += s.muted(` ${tab.label}${indicator} `) + ' ';
+            lines.push(s.muted(' ↑↓/jk Navigate · Enter Edit/Toggle · q/Esc Close'));
         }
     }
-    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(s.muted(' q/Esc Close'));
     }
-    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)
+// Target height for consistent screen sizes
 const TARGET_HEIGHT = 25;
 function padToHeight(lines, targetHeight) {
     while (lines.length < targetHeight) {
@@ -451,15 +337,6 @@ function padToHeight(lines, targetHeight) {
     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) {
@@ -469,6 +346,9 @@ function buildLines(state) {
         case 'config':
             allLines.push(...renderConfigTab(state));
             break;
+        case 'paths':
+            allLines.push(...renderPathsTab(state));
+            break;
         case 'usage':
             allLines.push(...renderUsageTab(state));
             break;
@@ -537,82 +417,41 @@ function toggleOrCycleItem(state) {
             case 'editorMode':
                 setSetting('editorMode', item.value);
                 break;
+            case 'startupMode':
+                setSetting('startupMode', item.value === 'Show menu' ? 'menu' : 'repl');
+                break;
+            case 'projectStartup':
+                setSetting('projectStartup', displayToProjectStartupMode(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;
-        }
+        // Request standalone theme overlay
+        state.requestSubOverlay = 'theme';
     }
     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;
-            }
-        }
+        // Request standalone model overlay
+        state.requestSubOverlay = 'model';
     }
-}
-// =============================================================================
-// 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;
+    else if (item.type === 'submenu' && item.id === 'mascot') {
+        // Request standalone mascot overlay
+        state.requestSubOverlay = 'mascot';
     }
 }
-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',
+        // Path settings state
+        pathSelectedItem: 0,
+        pathEditMode: false,
+        pathEditInput: '',
         configItems: getConfigItems(options.model),
         statusInfo: {
             version: options.version || VERSION,
@@ -632,300 +471,191 @@ export async function showConfigOverlay(options = {}) {
             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('');
+    let maxLineCount = 0;
+    // Pause footer and setup terminal
+    pauseForOverlay();
     terminal.hideCursor();
     const wasRawMode = process.stdin.isRaw;
     terminal.enableRawMode();
     lineCount = render(state, 0);
+    maxLineCount = lineCount;
     return new Promise((resolve) => {
         const cleanup = () => {
-            terminal.clearLinesAbove(lineCount);
-            terminal.writeLine('');
+            // Remove event listener first
+            process.stdin.removeListener('data', onData);
+            // Clear all lines (use maxLineCount to ensure complete cleanup)
+            if (maxLineCount > 0) {
+                terminal.clearLinesAbove(maxLineCount);
+            }
             terminal.showCursor();
             if (!wasRawMode) {
                 terminal.disableRawMode();
             }
-            process.stdin.removeListener('data', onData);
+            // Resume footer
+            resumeAfterOverlay();
         };
         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;
+            const char = extractPrintable(data);
+            // Handle path edit mode first (when editing a path in Paths tab)
+            if (state.pathEditMode) {
+                if (isEscape(data)) {
+                    // Cancel edit
+                    state.pathEditMode = false;
+                    state.pathEditInput = '';
                     lineCount = render(state, lineCount);
+                    maxLineCount = Math.max(maxLineCount, 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;
+                if (isEnter(data)) {
+                    // Save the path
+                    const newPath = state.pathEditInput.trim();
+                    if (newPath) {
+                        switch (state.pathSelectedItem) {
+                            case 0:
+                                setWorkspacePath(newPath);
+                                break;
+                            case 1:
+                                setProjectsPath(newPath);
+                                break;
+                            case 2:
+                                setDataPath(newPath);
+                                break;
+                        }
                     }
-                }
-                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';
+                    state.pathEditMode = false;
+                    state.pathEditInput = '';
                     lineCount = render(state, lineCount);
+                    maxLineCount = Math.max(maxLineCount, lineCount);
                     return;
                 }
-                if (isUpArrow && state.themeSelectedIndex > 0) {
-                    state.themeSelectedIndex--;
+                if (isBackspace(data)) {
+                    state.pathEditInput = state.pathEditInput.slice(0, -1);
                     lineCount = render(state, lineCount);
+                    maxLineCount = Math.max(maxLineCount, lineCount);
                     return;
                 }
-                if (isDownArrow && state.themeSelectedIndex < maxIndex) {
-                    state.themeSelectedIndex++;
+                if (isPrintable(data)) {
+                    state.pathEditInput += char;
                     lineCount = render(state, lineCount);
+                    maxLineCount = Math.max(maxLineCount, 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; // Ignore other keys in edit mode
+            }
+            // q or Esc closes (not in path edit mode)
+            if (isEscape(data) || isCtrlC(data) || isQuit(data)) {
+                cleanup();
+                resolve(result);
                 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);
+            // Tab switching: Tab for next, Shift+Tab for previous
+            if (isTab(data)) {
+                state.currentTab = (state.currentTab + 1) % TABS.length;
+                state.selectedItem = 0;
+                state.pathSelectedItem = 0;
+                lineCount = render(state, lineCount);
+                maxLineCount = Math.max(maxLineCount, lineCount);
+                return;
+            }
+            if (isShiftTab(data)) {
+                state.currentTab = (state.currentTab - 1 + TABS.length) % TABS.length;
+                state.selectedItem = 0;
+                state.pathSelectedItem = 0;
+                lineCount = render(state, lineCount);
+                maxLineCount = Math.max(maxLineCount, lineCount);
+                return;
+            }
+            // Number keys 1-4 to directly select tabs
+            const tabNumKey = getNumberKey(data);
+            if (tabNumKey !== null && tabNumKey >= 1 && tabNumKey <= TABS.length) {
+                state.currentTab = tabNumKey - 1;
+                state.selectedItem = 0;
+                state.pathSelectedItem = 0;
+                lineCount = render(state, lineCount);
+                maxLineCount = Math.max(maxLineCount, lineCount);
+                return;
+            }
+            // Navigation only in Config tab (↑↓ or j/k)
+            if (TABS[state.currentTab].id === 'config') {
+                if (isNavigateUp(data) && state.selectedItem > 0) {
+                    state.selectedItem--;
                     lineCount = render(state, lineCount);
+                    maxLineCount = Math.max(maxLineCount, lineCount);
                     return;
                 }
-                // Type to search (printable chars except space which might conflict)
-                if (isPrintable && !isSpace) {
-                    state.browseSearchQuery += char;
-                    updateBrowseResults(state);
+                if (isNavigateDown(data) && state.selectedItem < state.configItems.length - 1) {
+                    state.selectedItem++;
                     lineCount = render(state, lineCount);
+                    maxLineCount = Math.max(maxLineCount, 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') {
+                if (isEnter(data) || isSpace(data)) {
+                    toggleOrCycleItem(state);
+                    // Check if a sub-overlay was requested
+                    if (state.requestSubOverlay) {
+                        result.requestSubOverlay = state.requestSubOverlay;
                         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);
+                    maxLineCount = Math.max(maxLineCount, 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--;
+            }
+            // Navigation in Paths tab (5 items: 0-2 paths, 3-4 toggles)
+            if (TABS[state.currentTab].id === 'paths') {
+                const pathItemCount = 5; // 3 paths + 2 toggles
+                if (isNavigateUp(data) && state.pathSelectedItem > 0) {
+                    state.pathSelectedItem--;
                     lineCount = render(state, lineCount);
+                    maxLineCount = Math.max(maxLineCount, lineCount);
                     return;
                 }
-                if (isDownArrow && state.modelSelectedIndex < maxModelIndex) {
-                    state.modelSelectedIndex++;
+                if (isNavigateDown(data) && state.pathSelectedItem < pathItemCount - 1) {
+                    state.pathSelectedItem++;
                     lineCount = render(state, lineCount);
+                    maxLineCount = Math.max(maxLineCount, 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;
+                if (isEnter(data) || isSpace(data)) {
+                    const currentConfig = getResolvedPathConfig();
+                    if (state.pathSelectedItem <= 2) {
+                        // Path items (0-2) - enter edit mode
+                        state.pathEditMode = true;
+                        // Pre-populate with current value
+                        switch (state.pathSelectedItem) {
+                            case 0:
+                                state.pathEditInput = currentConfig.workspacePath;
+                                break;
+                            case 1:
+                                state.pathEditInput = currentConfig.projectsPath;
+                                break;
+                            case 2:
+                                state.pathEditInput = currentConfig.dataPath;
+                                break;
                         }
-                        // 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);
+                        maxLineCount = Math.max(maxLineCount, lineCount);
+                        return;
+                    }
+                    else if (state.pathSelectedItem === 3) {
+                        // Toggle delete protection
+                        setDeleteProtection(!currentConfig.deleteProtection);
+                        lineCount = render(state, lineCount);
+                        maxLineCount = Math.max(maxLineCount, lineCount);
+                        return;
+                    }
+                    else if (state.pathSelectedItem === 4) {
+                        // Toggle CWD match warning
+                        setProjectMatchRequired(!currentConfig.requireProjectMatch);
+                        lineCount = render(state, lineCount);
+                        maxLineCount = Math.max(maxLineCount, lineCount);
+                        return;
                     }
-                    return;
                 }
-                return;
             }
         };
         process.stdin.on('data', onData);