@compilr-dev/cli 0.5.0 → 0.5.2

package/dist/ui/commands-overlay.js

@@ -1,439 +0,0 @@
-/**
- * Commands Overlay
- *
- * Modal overlay for viewing and managing custom command definitions.
- * 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 { TabbedListOverlay, BaseScreen, stay, popScreen, closeOverlay, isEscape, isEnter, isCtrlC, isNavigateUp, isNavigateDown, isBackspace, renderBorder, } from './base/index.js';
-// =============================================================================
-// Constants
-// =============================================================================
-const TABS = [
-    { id: 'all', label: 'All' },
-    { id: 'project', label: 'Project' },
-    { id: 'personal', label: 'Personal' },
-];
-const PAGE_SIZE = 10;
-// =============================================================================
-// Helpers
-// =============================================================================
-function isCreateItem(item) {
-    return 'type' in item;
-}
-function buildItemsList(registry) {
-    const commands = registry.getAll();
-    return [...commands, { type: 'create' }];
-}
-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('');
-        // Command name
-        lines.push(chalk.bold(` /${cmd.name}`));
-        lines.push('');
-        // 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('');
-        // 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);
-        }
-        if (isEscape(data) || data.toString() === 'q') {
-            return popScreen();
-        }
-        return stay(false);
-    }
-    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 {
-                currentLine += (currentLine.length > indent.length ? ' ' : '') + word;
-            }
-        }
-        if (currentLine.length > indent.length) {
-            resultLines.push(currentLine);
-        }
-        return resultLines;
-    }
-}
-// =============================================================================
-// Wizard Screen
-// =============================================================================
-class WizardScreen extends BaseScreen {
-    registry;
-    styles;
-    state;
-    constructor(registry, styles) {
-        super();
-        this.registry = registry;
-        this.styles = styles;
-        this.state = defaultWizardState();
-    }
-    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':
-                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':
-                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':
-                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':
-                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':
-                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;
-        }
-        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':
-                return popScreen();
-            case 'name':
-                this.state.step = 'location';
-                this.state.selectedOption = this.state.location === 'project' ? 0 : 1;
-                break;
-            case 'description':
-                this.state.step = 'name';
-                this.state.inputBuffer = this.state.name;
-                break;
-            case 'prompt':
-                this.state.step = 'description';
-                this.state.inputBuffer = this.state.description;
-                break;
-            case 'confirm':
-                this.state.step = 'prompt';
-                this.state.inputBuffer = this.state.prompt;
-                break;
-        }
-        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();
-                    }
-                }
-                this.advanceStep();
-            }
-            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);
-                    }
-                    catch (error) {
-                        this.state.error = error.message;
-                        return stay();
-                    }
-                }
-                else {
-                    // Cancel - go back to list
-                    return popScreen();
-                }
-            }
-            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();
-}

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

@@ -1,35 +0,0 @@
-/**
- * Config Overlay
- *
- * 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)
- * - Paths: Path configuration and safety settings
- * - Usage: Usage statistics with progress bars
- *
- * Theme, Model, and Mascot selection are delegated to standalone overlays.
- */
-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;
-}
-export interface ConfigOverlayResult {
-    modelChanged?: string;
-    requestSubOverlay?: 'theme' | 'model' | 'mascot';
-}
-/**
- * Show the config overlay
- */
-export declare function showConfigOverlay(options?: ConfigOverlayOptions): Promise<ConfigOverlayResult>;