@compilr-dev/cli 0.5.0 → 0.5.1

package/dist/ui/commands-overlay-v2.js

@@ -1,441 +0,0 @@
-/**
- * Commands Overlay V2
- *
- * Modal overlay for viewing and managing custom command definitions.
- * Uses TabbedListOverlayV2 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 { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isEnter, isCtrlC, isNavigateUp, isNavigateDown, isBackspace, renderBorder, wrapText, } from './base/index.js';
-import { InputFeature } from './features/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,
-        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'));
-        const descLines = wrapText(cmd.description, cols - 6, '   ');
-        lines.push(...descLines);
-        lines.push('');
-        // Prompt
-        lines.push(' ' + s.primary('PROMPT TEMPLATE'));
-        const promptLines = wrapText(cmd.prompt, cols - 6, '   ');
-        lines.push(...promptLines);
-        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);
-    }
-    /**
-     * Minimum height for stable rendering.
-     * Covers: header(3) + name(2) + location(3) + file(3) + desc(5) + prompt(5) + footer(3) = 24
-     */
-    getMinHeight() {
-        return 24;
-    }
-}
-// =============================================================================
-// Wizard Screen
-// =============================================================================
-class WizardScreen extends BaseScreen {
-    registry;
-    styles;
-    state;
-    input;
-    constructor(registry, styles) {
-        super();
-        this.registry = registry;
-        this.styles = styles;
-        this.state = defaultWizardState();
-        this.input = new InputFeature({ placeholder: '' });
-    }
-    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.input.render(s)}`);
-                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.input.render(s)}`);
-                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.input.render(s)}`);
-                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)}`);
-                const locationPath = this.state.location === 'project'
-                    ? '.compilr-dev/commands/'
-                    : '~/.compilr-dev/commands/';
-                lines.push(` Location:    ${s.primary(locationPath)}${this.state.name}.md`);
-                lines.push('');
-                lines.push(chalk.bold(' Description:'));
-                const descPreview = this.state.description.slice(0, 60) +
-                    (this.state.description.length > 60 ? '...' : '');
-                lines.push(s.muted(`   ${descPreview}`));
-                lines.push('');
-                lines.push(chalk.bold(' Prompt template:'));
-                const promptPreview = this.state.prompt.slice(0, 60) +
-                    (this.state.prompt.length > 60 ? '...' : '');
-                lines.push(s.muted(`   ${promptPreview}`));
-                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.input.value = this.state.name;
-                break;
-            case 'prompt':
-                this.state.step = 'description';
-                this.input.value = this.state.description;
-                break;
-            case 'confirm':
-                this.state.step = 'prompt';
-                this.input.value = this.state.prompt;
-                break;
-        }
-        this.state.error = null;
-        return stay();
-    }
-    handleInputStep(data) {
-        if (isEnter(data)) {
-            const value = this.input.trimmedValue;
-            if (value) {
-                // Validate name
-                if (this.state.step === 'name') {
-                    if (!/^[a-z][a-z0-9-]{1,29}$/.test(value)) {
-                        this.state.error = 'Invalid name. Use lowercase letters, numbers, hyphens (2-30 chars).';
-                        return stay();
-                    }
-                    if (this.registry.has(value)) {
-                        this.state.error = `Command "${value}" already exists.`;
-                        return stay();
-                    }
-                }
-                this.advanceStep();
-            }
-            return stay();
-        }
-        if (isBackspace(data)) {
-            const result = this.input.handleKey(data);
-            if (result.handled) {
-                this.state.error = null;
-                return stay(result.render);
-            }
-            return stay(false);
-        }
-        // Regular character input
-        const result = this.input.handleKey(data);
-        if (result.handled) {
-            this.state.error = null;
-            return stay(result.render);
-        }
-        return stay(false);
-    }
-    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);
-                        this.registry.load();
-                        return closeOverlay({ created: this.state.name });
-                    }
-                    catch (error) {
-                        this.state.error = error.message;
-                        return stay();
-                    }
-                }
-                else {
-                    return popScreen();
-                }
-            }
-            else {
-                this.advanceStep();
-            }
-        }
-        return stay(false);
-    }
-    advanceStep() {
-        switch (this.state.step) {
-            case 'location':
-                this.state.location = this.state.selectedOption === 0 ? 'project' : 'personal';
-                this.state.step = 'name';
-                this.input.clear();
-                break;
-            case 'name':
-                this.state.name = this.input.trimmedValue;
-                this.state.step = 'description';
-                this.input.clear();
-                break;
-            case 'description':
-                this.state.description = this.input.trimmedValue;
-                this.state.step = 'prompt';
-                this.input.clear();
-                break;
-            case 'prompt':
-                this.state.prompt = this.input.trimmedValue;
-                this.state.step = 'confirm';
-                this.state.selectedOption = 0;
-                break;
-        }
-        this.state.error = null;
-    }
-    /**
-     * Minimum height for stable rendering.
-     * Covers: header(3) + form fields (up to 12) + options(4) + footer(3) = 22
-     */
-    getMinHeight() {
-        return 22;
-    }
-}
-// =============================================================================
-// Commands Overlay V2
-// =============================================================================
-/**
- * Commands overlay using TabbedListOverlayV2.
- * Displays custom commands in a searchable, tabbed list.
- */
-export class CommandsOverlayV2 extends TabbedListOverlayV2 {
-    type = 'inline';
-    id = 'commands-overlay-v2';
-    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.',
-        });
-        this.registry = registry;
-    }
-    createDetailScreen(item) {
-        if (isCreateItem(item)) {
-            return new WizardScreen(this.registry, this.getStyles());
-        }
-        return new CommandDetailScreen(item, this.registry, this.getStyles());
-    }
-}

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

@@ -1,16 +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
- */
-/**
- * Show the commands overlay
- */
-export declare function showCommandsOverlay(): Promise<void>;