@compilr-dev/cli 0.4.0 → 0.5.0

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

@@ -0,0 +1,441 @@
+/**
+ * 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

@@ -2,8 +2,13 @@
  * 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
  */
 /**
  * Show the commands overlay