@compilr-dev/cli 0.4.0

package/dist/ui/commands-overlay.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Commands Overlay
+ *
+ * Modal overlay for viewing and managing custom command definitions.
+ * - List tab: Shows existing custom commands
+ * - Wizard mode: Step-by-step command creation
+ */
+/**
+ * Show the commands overlay
+ */
+export declare function showCommandsOverlay(): Promise<void>;

package/dist/ui/commands-overlay.js

@@ -0,0 +1,410 @@
+/**
+ * Commands Overlay
+ *
+ * Modal overlay for viewing and managing custom command definitions.
+ * - List tab: Shows existing custom commands
+ * - Wizard mode: Step-by-step command creation
+ */
+import chalk from 'chalk';
+import * as terminal from './terminal.js';
+import { getCustomCommandRegistry, } from '../commands/index.js';
+import { getStyles } from '../themes/index.js';
+// =============================================================================
+// Rendering - List Mode
+// =============================================================================
+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;
+}
+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'));
+        lines.push('');
+        lines.push(state.selectedIndex === 0
+            ? s.primary(' ❯ Create new command')
+            : s.muted('   Create new command'));
+        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:'));
+        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);
+        }
+        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'));
+    }
+    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}`));
+            }
+            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':
+            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;
+    }
+    lines.push('');
+    lines.push(s.muted(' Esc to go back'));
+    return lines;
+}
+// =============================================================================
+// Unified Rendering
+// =============================================================================
+function buildLines(state) {
+    if (state.mode === 'wizard') {
+        return buildWizardLines(state);
+    }
+    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) {
+            case 'location':
+                state.wizardLocation = state.wizardSelectedOption === 0 ? 'project' : 'personal';
+                state.wizardStep = 'name';
+                state.wizardInputBuffer = '';
+                break;
+            case 'name':
+                state.wizardName = state.wizardInputBuffer.trim();
+                state.wizardStep = 'description';
+                state.wizardInputBuffer = '';
+                break;
+            case 'description':
+                state.wizardDescription = state.wizardInputBuffer.trim();
+                state.wizardStep = 'prompt';
+                state.wizardInputBuffer = '';
+                break;
+            case 'prompt':
+                state.wizardPrompt = state.wizardInputBuffer.trim();
+                state.wizardStep = 'confirm';
+                state.wizardSelectedOption = 0;
+                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';
+                }
+                break;
+        }
+        state.wizardError = null;
+        return false;
+    };
+    // Wizard: go back to previous step (or exit wizard)
+    const wizardPrevStep = () => {
+        switch (state.wizardStep) {
+            case 'location':
+                // Exit wizard, go back to list
+                state.mode = 'list';
+                break;
+            case 'name':
+                state.wizardStep = 'location';
+                state.wizardSelectedOption = state.wizardLocation === 'project' ? 0 : 1;
+                break;
+            case 'description':
+                state.wizardStep = 'name';
+                state.wizardInputBuffer = state.wizardName;
+                break;
+            case 'prompt':
+                state.wizardStep = 'description';
+                state.wizardInputBuffer = state.wizardDescription;
+                break;
+            case 'confirm':
+                state.wizardStep = 'prompt';
+                state.wizardInputBuffer = state.wizardPrompt;
+                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);
+                    }
+                    return;
+                }
+                return;
+            }
+            // ===== 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;
+                    }
+                    // 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);
+                    }
+                    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;
+                    }
+                }
+            }
+        };
+        process.stdin.on('data', onData);
+    });
+}

package/dist/ui/config-overlay.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+export interface ConfigOverlayOptions {
+    version?: string;
+    sessionId?: string;
+    cwd?: string;
+    model?: string;
+    provider?: string;
+    toolCount?: number;
+    startTime?: Date;
+    inputTokens?: number;
+    outputTokens?: number;
+    requests?: number;
+    contextUsed?: number;
+    contextMax?: number;
+    messageCount?: number;
+    onModelChange?: (model: string) => void;
+    initialMode?: 'tabs' | 'model-selector';
+}
+export interface ConfigOverlayResult {
+    modelChanged?: string;
+}
+/**
+ * Show the config overlay
+ */
+export declare function showConfigOverlay(options?: ConfigOverlayOptions): Promise<ConfigOverlayResult>;