@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/commands-overlay.js

@@ -2,409 +2,438 @@
  * Commands Overlay
  *
  * Modal overlay for viewing and managing custom command definitions.
- * - List tab: Shows existing custom commands
- * - Wizard mode: Step-by-step command creation
+ * Uses TabbedListOverlay for consistent navigation patterns.
+ *
+ * Features:
+ * - Tabs: All, Project, Personal
+ * - Search with / toggle
+ * - Detail view for command information
+ * - Wizard for creating new commands
  */
 import chalk from 'chalk';
 import * as terminal from './terminal.js';
 import { getCustomCommandRegistry, } from '../commands/index.js';
-import { getStyles } from '../themes/index.js';
+import { TabbedListOverlay, BaseScreen, stay, popScreen, closeOverlay, isEscape, isEnter, isCtrlC, isNavigateUp, isNavigateDown, isBackspace, renderBorder, } from './base/index.js';
+// =============================================================================
+// Constants
 // =============================================================================
-// Rendering - List Mode
+const TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'project', label: 'Project' },
+    { id: 'personal', label: 'Personal' },
+];
+const PAGE_SIZE = 10;
 // =============================================================================
-function renderListHeader() {
-    const s = getStyles();
-    const lines = [];
-    const cols = terminal.getTerminalWidth();
-    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
-    lines.push(' ' + s.primaryBold('Custom Commands'));
-    lines.push('');
-    return lines;
+// Helpers
+// =============================================================================
+function isCreateItem(item) {
+    return 'type' in item;
+}
+function buildItemsList(registry) {
+    const commands = registry.getAll();
+    return [...commands, { type: 'create' }];
 }
-function renderCommandsList(state) {
-    const s = getStyles();
-    const lines = [];
-    const commands = state.registry.getAll();
-    if (commands.length === 0) {
-        lines.push(s.muted(' No custom commands found'));
+function defaultWizardState() {
+    return {
+        step: 'location',
+        location: 'project',
+        name: '',
+        description: '',
+        prompt: '',
+        selectedOption: 0,
+        inputBuffer: '',
+        error: null,
+    };
+}
+// =============================================================================
+// Detail Screen
+// =============================================================================
+class CommandDetailScreen extends BaseScreen {
+    command;
+    registry;
+    styles;
+    constructor(command, registry, styles) {
+        super();
+        this.command = command;
+        this.registry = registry;
+        this.styles = styles;
+    }
+    render() {
+        const s = this.styles;
+        const lines = [];
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const cmd = this.command;
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('Command Details'));
         lines.push('');
-        lines.push(state.selectedIndex === 0
-            ? s.primary(' ❯ Create new command')
-            : s.muted('   Create new command'));
+        // Command name
+        lines.push(chalk.bold(` /${cmd.name}`));
         lines.push('');
-        lines.push(s.muted(' Custom commands are stored in:'));
-        lines.push(s.muted(`   ${state.registry.getProjectDir()}/     (project)`));
-        lines.push(s.muted(`   ${state.registry.getUserDir()}/   (personal)`));
-    }
-    else {
-        lines.push(chalk.bold(' Available commands:'));
+        // Location
+        lines.push(' ' + s.primary('LOCATION'));
+        lines.push(`   ${cmd.location === 'project' ? 'Project' : 'Personal'} (${cmd.location})`);
+        lines.push('');
+        // File path
+        lines.push(' ' + s.primary('FILE'));
+        const basePath = cmd.location === 'project'
+            ? this.registry.getProjectDir()
+            : this.registry.getUserDir();
+        lines.push(s.muted(`   ${basePath}/${cmd.name}.md`));
         lines.push('');
-        for (let i = 0; i < commands.length; i++) {
-            const cmd = commands[i];
-            const isSelected = i === state.selectedIndex;
-            const prefix = isSelected ? s.primary(' ❯ ') : '   ';
-            const name = `/${cmd.name}`;
-            const nameStyled = isSelected ? s.primary(name.padEnd(25)) : name.padEnd(25);
-            const desc = s.muted(cmd.description.slice(0, 45) + (cmd.description.length > 45 ? '...' : ''));
-            const location = s.muted(` (${cmd.location})`);
-            lines.push(prefix + nameStyled + desc + location);
+        // Description
+        lines.push(' ' + s.primary('DESCRIPTION'));
+        lines.push(...this.wrapText(cmd.description, cols - 6, '   '));
+        lines.push('');
+        // Prompt
+        lines.push(' ' + s.primary('PROMPT TEMPLATE'));
+        lines.push(...this.wrapText(cmd.prompt, cols - 6, '   '));
+        lines.push('');
+        // Footer
+        lines.push(border);
+        lines.push(`  ${s.muted('q/Esc Back')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
         }
-        lines.push(s.muted(' ──────────────────────────────────'));
-        const createIdx = commands.length;
-        const isCreateSelected = state.selectedIndex === createIdx;
-        lines.push(isCreateSelected
-            ? s.primary(' ❯ Create new command')
-            : s.muted('   Create new command'));
+        if (isEscape(data) || data.toString() === 'q') {
+            return popScreen();
+        }
+        return stay(false);
     }
-    return lines;
-}
-function renderListFooter() {
-    const s = getStyles();
-    const lines = [];
-    lines.push('');
-    lines.push(s.muted(' ↑↓ Navigate · Enter Select · Esc Close'));
-    return lines;
-}
-function buildListLines(state) {
-    const allLines = [];
-    allLines.push(...renderListHeader());
-    allLines.push(...renderCommandsList(state));
-    allLines.push(...renderListFooter());
-    return allLines;
-}
-// =============================================================================
-// Rendering - Wizard Mode
-// =============================================================================
-function buildWizardLines(state) {
-    const s = getStyles();
-    const lines = [];
-    const cols = terminal.getTerminalWidth();
-    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
-    lines.push(' ' + s.primaryBold('Create new command'));
-    lines.push('');
-    switch (state.wizardStep) {
-        case 'location':
-            lines.push(chalk.bold(' Choose location'));
-            lines.push('');
-            lines.push(state.wizardSelectedOption === 0
-                ? s.primary(' ❯ 1. Project (.compilr-dev/commands/)')
-                : s.muted('   1. Project (.compilr-dev/commands/)'));
-            lines.push(state.wizardSelectedOption === 1
-                ? s.primary(' ❯ 2. Personal (~/.compilr-dev/commands/)')
-                : s.muted('   2. Personal (~/.compilr-dev/commands/)'));
-            lines.push('');
-            lines.push(s.muted(' Project commands are shared with your team.'));
-            lines.push(s.muted(' Personal commands apply to all your projects.'));
-            break;
-        case 'name':
-            lines.push(chalk.bold(' Command name'));
-            lines.push('');
-            lines.push(' Enter a unique name:');
-            lines.push(` > ${state.wizardInputBuffer}█`);
-            lines.push('');
-            if (state.wizardError) {
-                lines.push(s.error(` ${state.wizardError}`));
+    wrapText(text, maxWidth, indent) {
+        const words = text.split(' ');
+        const resultLines = [];
+        let currentLine = indent;
+        for (const word of words) {
+            if (currentLine.length + word.length + 1 > maxWidth) {
+                resultLines.push(currentLine);
+                currentLine = indent + word;
             }
             else {
-                lines.push(s.muted(' Use lowercase letters, numbers, hyphens (e.g., code-review)'));
-                lines.push(s.muted(' This becomes the command: /{name}'));
+                currentLine += (currentLine.length > indent.length ? ' ' : '') + word;
             }
-            break;
-        case 'description':
-            lines.push(chalk.bold(' Description'));
-            lines.push('');
-            lines.push(' Enter a short description:');
-            lines.push(` > ${state.wizardInputBuffer}█`);
-            lines.push('');
-            lines.push(s.muted(' This is shown in the help menu.'));
-            break;
-        case 'prompt':
-            lines.push(chalk.bold(' Prompt template'));
-            lines.push('');
-            lines.push(' Enter the prompt to send:');
-            lines.push(` > ${state.wizardInputBuffer}█`);
-            lines.push('');
-            lines.push(s.muted(' Use $1, $2 for positional args, $ARGUMENTS for all args.'));
-            lines.push(s.muted(' Example: "Review $1 for bugs and security issues"'));
-            break;
-        case 'confirm':
-            lines.push(chalk.bold(' Confirm'));
-            lines.push('');
-            lines.push(` Command:     ${s.primary('/' + state.wizardName)}`);
-            lines.push(` Location:    ${s.primary(state.wizardLocation === 'project' ? '.compilr-dev/commands/' : '~/.compilr-dev/commands/')}${state.wizardName}.md`);
-            lines.push('');
-            lines.push(chalk.bold(' Description:'));
-            lines.push(s.muted(`   ${state.wizardDescription.slice(0, 60)}${state.wizardDescription.length > 60 ? '...' : ''}`));
-            lines.push('');
-            lines.push(chalk.bold(' Prompt template:'));
-            lines.push(s.muted(`   ${state.wizardPrompt.slice(0, 60)}${state.wizardPrompt.length > 60 ? '...' : ''}`));
-            lines.push('');
-            lines.push(state.wizardSelectedOption === 0
-                ? s.primary(' ❯ Save')
-                : s.muted('   Save'));
-            lines.push(state.wizardSelectedOption === 1
-                ? s.primary(' ❯ Cancel')
-                : s.muted('   Cancel'));
-            break;
+        }
+        if (currentLine.length > indent.length) {
+            resultLines.push(currentLine);
+        }
+        return resultLines;
     }
-    lines.push('');
-    lines.push(s.muted(' Esc to go back'));
-    return lines;
 }
 // =============================================================================
-// Unified Rendering
+// Wizard Screen
 // =============================================================================
-function buildLines(state) {
-    if (state.mode === 'wizard') {
-        return buildWizardLines(state);
+class WizardScreen extends BaseScreen {
+    registry;
+    styles;
+    state;
+    constructor(registry, styles) {
+        super();
+        this.registry = registry;
+        this.styles = styles;
+        this.state = defaultWizardState();
     }
-    return buildListLines(state);
-}
-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;
-}
-// =============================================================================
-// Main Export
-// =============================================================================
-/**
- * Show the commands overlay
- */
-export async function showCommandsOverlay() {
-    const registry = getCustomCommandRegistry();
-    registry.load();
-    const state = {
-        mode: 'list',
-        selectedIndex: 0,
-        wizardStep: 'location',
-        wizardLocation: 'project',
-        wizardName: '',
-        wizardDescription: '',
-        wizardPrompt: '',
-        wizardSelectedOption: 0,
-        wizardInputBuffer: '',
-        wizardError: null,
-        registry,
-    };
-    let lineCount = 0;
-    terminal.writeLine('');
-    terminal.hideCursor();
-    const wasRawMode = process.stdin.isRaw;
-    terminal.enableRawMode();
-    lineCount = render(state, 0);
-    const getMaxIndex = () => {
-        return state.registry.getAll().length; // includes "Create new"
-    };
-    // Reset wizard state for a new creation
-    const resetWizard = () => {
-        state.wizardStep = 'location';
-        state.wizardLocation = 'project';
-        state.wizardName = '';
-        state.wizardDescription = '';
-        state.wizardPrompt = '';
-        state.wizardSelectedOption = 0;
-        state.wizardInputBuffer = '';
-        state.wizardError = null;
-    };
-    // Wizard: advance to next step
-    const wizardNextStep = () => {
-        switch (state.wizardStep) {
+    render() {
+        const s = this.styles;
+        const lines = [];
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('Create New Command'));
+        lines.push('');
+        switch (this.state.step) {
             case 'location':
-                state.wizardLocation = state.wizardSelectedOption === 0 ? 'project' : 'personal';
-                state.wizardStep = 'name';
-                state.wizardInputBuffer = '';
+                lines.push(chalk.bold(' Choose location'));
+                lines.push('');
+                lines.push(this.state.selectedOption === 0
+                    ? s.primary(' ❯ 1. Project (.compilr-dev/commands/)')
+                    : s.muted('   1. Project (.compilr-dev/commands/)'));
+                lines.push(this.state.selectedOption === 1
+                    ? s.primary(' ❯ 2. Personal (~/.compilr-dev/commands/)')
+                    : s.muted('   2. Personal (~/.compilr-dev/commands/)'));
+                lines.push('');
+                lines.push(s.muted(' Project commands are shared with your team.'));
+                lines.push(s.muted(' Personal commands apply to all your projects.'));
                 break;
             case 'name':
-                state.wizardName = state.wizardInputBuffer.trim();
-                state.wizardStep = 'description';
-                state.wizardInputBuffer = '';
+                lines.push(chalk.bold(' Command name'));
+                lines.push('');
+                lines.push(' Enter a unique name:');
+                lines.push(` > ${this.state.inputBuffer}█`);
+                lines.push('');
+                if (this.state.error) {
+                    lines.push(s.error(` ${this.state.error}`));
+                }
+                else {
+                    lines.push(s.muted(' Use lowercase letters, numbers, hyphens (e.g., code-review)'));
+                    lines.push(s.muted(' This becomes the command: /{name}'));
+                }
                 break;
             case 'description':
-                state.wizardDescription = state.wizardInputBuffer.trim();
-                state.wizardStep = 'prompt';
-                state.wizardInputBuffer = '';
+                lines.push(chalk.bold(' Description'));
+                lines.push('');
+                lines.push(' Enter a short description:');
+                lines.push(` > ${this.state.inputBuffer}█`);
+                lines.push('');
+                lines.push(s.muted(' This is shown in the help menu.'));
                 break;
             case 'prompt':
-                state.wizardPrompt = state.wizardInputBuffer.trim();
-                state.wizardStep = 'confirm';
-                state.wizardSelectedOption = 0;
+                lines.push(chalk.bold(' Prompt template'));
+                lines.push('');
+                lines.push(' Enter the prompt to send:');
+                lines.push(` > ${this.state.inputBuffer}█`);
+                lines.push('');
+                lines.push(s.muted(' Use $1, $2 for positional args, $ARGUMENTS for all args.'));
+                lines.push(s.muted(' Example: "Review $1 for bugs and security issues"'));
                 break;
             case 'confirm':
-                if (state.wizardSelectedOption === 0) {
-                    // Save
-                    try {
-                        registry.save({
-                            name: state.wizardName,
-                            description: state.wizardDescription,
-                            prompt: state.wizardPrompt,
-                        }, state.wizardLocation);
-                        // Success - go back to list
-                        registry.load();
-                        state.mode = 'list';
-                        state.selectedIndex = 0;
-                        return true; // Created successfully
-                    }
-                    catch (error) {
-                        state.wizardError = error.message;
-                    }
-                }
-                else {
-                    // Cancel - go back to list
-                    state.mode = 'list';
+                lines.push(chalk.bold(' Confirm'));
+                lines.push('');
+                lines.push(` Command:     ${s.primary('/' + this.state.name)}`);
+                lines.push(` Location:    ${s.primary(this.state.location === 'project' ? '.compilr-dev/commands/' : '~/.compilr-dev/commands/')}${this.state.name}.md`);
+                lines.push('');
+                lines.push(chalk.bold(' Description:'));
+                lines.push(s.muted(`   ${this.state.description.slice(0, 60)}${this.state.description.length > 60 ? '...' : ''}`));
+                lines.push('');
+                lines.push(chalk.bold(' Prompt template:'));
+                lines.push(s.muted(`   ${this.state.prompt.slice(0, 60)}${this.state.prompt.length > 60 ? '...' : ''}`));
+                lines.push('');
+                lines.push(this.state.selectedOption === 0
+                    ? s.primary(' ❯ Save')
+                    : s.muted('   Save'));
+                lines.push(this.state.selectedOption === 1
+                    ? s.primary(' ❯ Cancel')
+                    : s.muted('   Cancel'));
+                if (this.state.error) {
+                    lines.push('');
+                    lines.push(s.error(` ${this.state.error}`));
                 }
                 break;
         }
-        state.wizardError = null;
-        return false;
-    };
-    // Wizard: go back to previous step (or exit wizard)
-    const wizardPrevStep = () => {
-        switch (state.wizardStep) {
+        lines.push('');
+        lines.push(border);
+        lines.push(`  ${s.muted('Esc to go back')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C always closes
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
+        }
+        // Escape goes back one step (or exits wizard)
+        if (isEscape(data)) {
+            return this.handleBack();
+        }
+        // Input steps: name, description, prompt
+        if (['name', 'description', 'prompt'].includes(this.state.step)) {
+            return this.handleInputStep(data);
+        }
+        // Selection steps: location, confirm
+        if (['location', 'confirm'].includes(this.state.step)) {
+            return this.handleSelectionStep(data);
+        }
+        return stay();
+    }
+    handleBack() {
+        switch (this.state.step) {
             case 'location':
-                // Exit wizard, go back to list
-                state.mode = 'list';
-                break;
+                return popScreen();
             case 'name':
-                state.wizardStep = 'location';
-                state.wizardSelectedOption = state.wizardLocation === 'project' ? 0 : 1;
+                this.state.step = 'location';
+                this.state.selectedOption = this.state.location === 'project' ? 0 : 1;
                 break;
             case 'description':
-                state.wizardStep = 'name';
-                state.wizardInputBuffer = state.wizardName;
+                this.state.step = 'name';
+                this.state.inputBuffer = this.state.name;
                 break;
             case 'prompt':
-                state.wizardStep = 'description';
-                state.wizardInputBuffer = state.wizardDescription;
+                this.state.step = 'description';
+                this.state.inputBuffer = this.state.description;
                 break;
             case 'confirm':
-                state.wizardStep = 'prompt';
-                state.wizardInputBuffer = state.wizardPrompt;
+                this.state.step = 'prompt';
+                this.state.inputBuffer = this.state.prompt;
                 break;
         }
-        state.wizardError = null;
-    };
-    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 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 isCtrlC = data.length === 1 && data[0] === 0x03;
-            const isEnter = data.length === 1 && (data[0] === 0x0d || data[0] === 0x0a);
-            const isBackspace = data.length === 1 && (data[0] === 0x7f || data[0] === 0x08);
-            // ===== LIST MODE =====
-            if (state.mode === 'list') {
-                if (isEscape || isCtrlC) {
-                    cleanup();
-                    resolve();
-                    return;
-                }
-                if (isUpArrow && state.selectedIndex > 0) {
-                    state.selectedIndex--;
-                    lineCount = render(state, lineCount);
-                    return;
-                }
-                if (isDownArrow && state.selectedIndex < getMaxIndex()) {
-                    state.selectedIndex++;
-                    lineCount = render(state, lineCount);
-                    return;
-                }
-                if (isEnter) {
-                    const commands = state.registry.getAll();
-                    if (state.selectedIndex === commands.length) {
-                        // "Create new command" selected - enter wizard mode
-                        resetWizard();
-                        state.mode = 'wizard';
-                        lineCount = render(state, lineCount);
+        this.state.error = null;
+        return stay();
+    }
+    handleInputStep(data) {
+        const char = data.length === 1 && data[0] >= 0x20 && data[0] < 0x7f
+            ? String.fromCharCode(data[0])
+            : null;
+        if (isEnter(data)) {
+            if (this.state.inputBuffer.trim()) {
+                // Validate name
+                if (this.state.step === 'name') {
+                    const name = this.state.inputBuffer.trim();
+                    if (!/^[a-z][a-z0-9-]{1,29}$/.test(name)) {
+                        this.state.error = 'Invalid name. Use lowercase letters, numbers, hyphens (2-30 chars).';
+                        return stay();
+                    }
+                    if (this.registry.has(name)) {
+                        this.state.error = `Command "${name}" already exists.`;
+                        return stay();
                     }
-                    return;
                 }
-                return;
+                this.advanceStep();
             }
-            // ===== WIZARD MODE =====
-            // At this point, mode must be 'wizard' since we handled 'list' above
-            {
-                if (isCtrlC) {
-                    cleanup();
-                    resolve();
-                    return;
-                }
-                if (isEscape) {
-                    wizardPrevStep();
-                    lineCount = render(state, lineCount);
-                    return;
-                }
-                // Input steps: name, description, prompt
-                if (['name', 'description', 'prompt'].includes(state.wizardStep)) {
-                    if (isEnter) {
-                        if (state.wizardInputBuffer.trim()) {
-                            // Validate name
-                            if (state.wizardStep === 'name') {
-                                const name = state.wizardInputBuffer.trim();
-                                if (!/^[a-z][a-z0-9-]{1,29}$/.test(name)) {
-                                    state.wizardError = 'Invalid name. Use lowercase letters, numbers, hyphens (2-30 chars).';
-                                    lineCount = render(state, lineCount);
-                                    return;
-                                }
-                                if (registry.has(name)) {
-                                    state.wizardError = `Command "${name}" already exists.`;
-                                    lineCount = render(state, lineCount);
-                                    return;
-                                }
-                            }
-                            wizardNextStep();
-                            lineCount = render(state, lineCount);
-                        }
-                        return;
-                    }
-                    if (isBackspace) {
-                        state.wizardInputBuffer = state.wizardInputBuffer.slice(0, -1);
-                        state.wizardError = null;
-                        lineCount = render(state, lineCount);
-                        return;
+            return stay();
+        }
+        if (isBackspace(data)) {
+            this.state.inputBuffer = this.state.inputBuffer.slice(0, -1);
+            this.state.error = null;
+            return stay();
+        }
+        // Regular character input
+        if (char) {
+            this.state.inputBuffer += char;
+            this.state.error = null;
+        }
+        return stay();
+    }
+    handleSelectionStep(data) {
+        const maxOptions = 2;
+        if (isNavigateUp(data) && this.state.selectedOption > 0) {
+            this.state.selectedOption--;
+            return stay();
+        }
+        if (isNavigateDown(data) && this.state.selectedOption < maxOptions - 1) {
+            this.state.selectedOption++;
+            return stay();
+        }
+        if (isEnter(data)) {
+            if (this.state.step === 'confirm') {
+                if (this.state.selectedOption === 0) {
+                    // Save
+                    try {
+                        this.registry.save({
+                            name: this.state.name,
+                            description: this.state.description,
+                            prompt: this.state.prompt,
+                        }, this.state.location);
+                        // Reload registry and close overlay
+                        this.registry.load();
+                        // Close entire overlay - user can reopen to see new command
+                        return closeOverlay(undefined);
                     }
-                    // Regular character input
-                    const char = data.toString('utf-8');
-                    if (char.length === 1 && char.charCodeAt(0) >= 32) {
-                        state.wizardInputBuffer += char;
-                        state.wizardError = null;
-                        lineCount = render(state, lineCount);
+                    catch (error) {
+                        this.state.error = error.message;
+                        return stay();
                     }
-                    return;
                 }
-                // Selection steps: location, confirm
-                if (['location', 'confirm'].includes(state.wizardStep)) {
-                    const maxOptions = 2;
-                    if (isUpArrow && state.wizardSelectedOption > 0) {
-                        state.wizardSelectedOption--;
-                        lineCount = render(state, lineCount);
-                        return;
-                    }
-                    if (isDownArrow && state.wizardSelectedOption < maxOptions - 1) {
-                        state.wizardSelectedOption++;
-                        lineCount = render(state, lineCount);
-                        return;
-                    }
-                    if (isEnter) {
-                        wizardNextStep();
-                        lineCount = render(state, lineCount);
-                        return;
-                    }
+                else {
+                    // Cancel - go back to list
+                    return popScreen();
                 }
             }
-        };
-        process.stdin.on('data', onData);
-    });
+            else {
+                this.advanceStep();
+            }
+        }
+        return stay();
+    }
+    advanceStep() {
+        switch (this.state.step) {
+            case 'location':
+                this.state.location = this.state.selectedOption === 0 ? 'project' : 'personal';
+                this.state.step = 'name';
+                this.state.inputBuffer = '';
+                break;
+            case 'name':
+                this.state.name = this.state.inputBuffer.trim();
+                this.state.step = 'description';
+                this.state.inputBuffer = '';
+                break;
+            case 'description':
+                this.state.description = this.state.inputBuffer.trim();
+                this.state.step = 'prompt';
+                this.state.inputBuffer = '';
+                break;
+            case 'prompt':
+                this.state.prompt = this.state.inputBuffer.trim();
+                this.state.step = 'confirm';
+                this.state.selectedOption = 0;
+                break;
+        }
+        this.state.error = null;
+    }
+}
+// =============================================================================
+// Commands Overlay
+// =============================================================================
+class CommandsOverlay extends TabbedListOverlay {
+    registry;
+    constructor() {
+        const registry = getCustomCommandRegistry();
+        registry.load();
+        const items = buildItemsList(registry);
+        super({
+            title: 'Custom Commands',
+            tabs: TABS,
+            items,
+            pageSize: PAGE_SIZE,
+            filterByTab: (item, tabId) => {
+                // "Create new command" always shows
+                if (isCreateItem(item))
+                    return true;
+                // Filter by location
+                if (tabId === 'all')
+                    return true;
+                return item.location === tabId;
+            },
+            getSearchText: (item) => {
+                if (isCreateItem(item))
+                    return 'create new';
+                return `${item.name} ${item.description}`;
+            },
+            renderItem: (item, isSelected, styles) => {
+                const cols = terminal.getTerminalWidth();
+                if (isCreateItem(item)) {
+                    return isSelected
+                        ? styles.primary(' ❯ Create new command')
+                        : styles.muted('   Create new command');
+                }
+                const cmd = item;
+                const prefix = isSelected ? styles.primary(' ❯ ') : '   ';
+                const name = `/${cmd.name}`;
+                const nameStyled = isSelected ? styles.primary(name.padEnd(25)) : name.padEnd(25);
+                const maxDesc = Math.max(20, cols - 45);
+                const desc = cmd.description.slice(0, maxDesc) + (cmd.description.length > maxDesc ? '...' : '');
+                const descStyled = styles.muted(desc);
+                const location = styles.muted(` (${cmd.location})`);
+                return prefix + nameStyled + descStyled + location;
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Select · Esc Exit search';
+                }
+                return 'Tab Filter · ↑↓/jk · / Search · Enter Select · q/Esc Close';
+            },
+            emptyMessage: 'No custom commands found.',
+            noResultsMessage: 'No commands match the search.',
+            detailScreensFullScreen: false,
+        });
+        this.registry = registry;
+    }
+    createDetailScreen(item) {
+        if (isCreateItem(item)) {
+            return new WizardScreen(this.registry, this.styles);
+        }
+        return new CommandDetailScreen(item, this.registry, this.styles);
+    }
+}
+// =============================================================================
+// Export
+// =============================================================================
+/**
+ * Show the commands overlay
+ */
+export async function showCommandsOverlay() {
+    return new CommandsOverlay().show();
 }