@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/overlay/impl/changelog-overlay-v2.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Changelog Overlay V2
+ *
+ * Browsable release notes overlay.
+ * Extends TabbedListOverlayV2 for consistent UI with other overlays.
+ *
+ * Features:
+ * - Single tab (all releases)
+ * - Searchable release list
+ * - Detail view with categorized changes (added/changed/fixed)
+ */
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+import { type Release } from '../../../changelog/releases.js';
+export interface ChangelogOverlayV2Result {
+    viewed: boolean;
+}
+/**
+ * Release list item with tab association for filtering.
+ */
+interface ReleaseListItem extends Release {
+    tabId: string;
+}
+/**
+ * Changelog overlay with release list and categorized detail views.
+ * Extends TabbedListOverlayV2 for consistent look with other overlays.
+ */
+export declare class ChangelogOverlayV2 extends TabbedListOverlayV2<ReleaseListItem, ChangelogOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "changelog-overlay-v2";
+    constructor();
+    /**
+     * Build items on first render.
+     */
+    private buildItemsIfNeeded;
+    /**
+     * Override render to build items on first call.
+     */
+    render(context: import('../index.js').RenderContext): {
+        lines: string[];
+        minHeight?: number;
+    };
+    protected createDetailScreen(item: ReleaseListItem): BaseScreen | null;
+}
+export {};

package/dist/ui/overlay/impl/changelog-overlay-v2.js

@@ -0,0 +1,165 @@
+/**
+ * Changelog Overlay V2
+ *
+ * Browsable release notes overlay.
+ * Extends TabbedListOverlayV2 for consistent UI with other overlays.
+ *
+ * Features:
+ * - Single tab (all releases)
+ * - Searchable release list
+ * - Detail view with categorized changes (added/changed/fixed)
+ */
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isQuit, renderBorder, } from '../../base/index.js';
+import { RELEASES } from '../../../changelog/releases.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 8;
+// =============================================================================
+// Detail Screen (Categorized Changes)
+// =============================================================================
+/**
+ * Shows categorized changes for a single release.
+ */
+class ViewingScreen extends BaseScreen {
+    release;
+    styles;
+    getWidth;
+    constructor(release, styles, getWidth) {
+        super();
+        this.release = release;
+        this.styles = styles;
+        this.getWidth = getWidth;
+    }
+    getMinHeight() {
+        return 20;
+    }
+    render() {
+        const s = this.styles;
+        const cols = this.getWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        const titleText = `v${this.release.version} — ${this.release.date}`;
+        const titleStyled = s.primaryBold(titleText);
+        lines.push(border);
+        lines.push(` ${titleStyled}`);
+        lines.push('');
+        // Group changes by category
+        const added = this.release.changes.filter((c) => c.category === 'added');
+        const changed = this.release.changes.filter((c) => c.category === 'changed');
+        const fixed = this.release.changes.filter((c) => c.category === 'fixed');
+        if (added.length > 0) {
+            lines.push(s.secondary('  Added:'));
+            for (const change of added) {
+                lines.push(`    ${s.muted('+')} ${change.text}`);
+            }
+            lines.push('');
+        }
+        if (changed.length > 0) {
+            lines.push(s.secondary('  Changed:'));
+            for (const change of changed) {
+                lines.push(`    ${s.muted('~')} ${change.text}`);
+            }
+            lines.push('');
+        }
+        if (fixed.length > 0) {
+            lines.push(s.secondary('  Fixed:'));
+            for (const change of fixed) {
+                lines.push(`    ${s.muted('*')} ${change.text}`);
+            }
+            lines.push('');
+        }
+        // Pad to consistent height
+        while (lines.length < 16) {
+            lines.push('');
+        }
+        // Navigation footer
+        lines.push(border);
+        lines.push(s.muted('  q/Esc back'));
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes overlay completely
+        if (isCtrlC(data)) {
+            return closeOverlay({ viewed: true });
+        }
+        // Back to release list
+        if (isEscape(data) || isQuit(data)) {
+            return popScreen();
+        }
+        return stay(false);
+    }
+}
+// =============================================================================
+// Changelog Overlay V2 Class
+// =============================================================================
+/**
+ * Changelog overlay with release list and categorized detail views.
+ * Extends TabbedListOverlayV2 for consistent look with other overlays.
+ */
+export class ChangelogOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'changelog-overlay-v2';
+    constructor() {
+        const tabs = [
+            { id: 'all', label: 'All' },
+        ];
+        super({
+            title: 'Changelog',
+            tabs,
+            items: [], // Will be populated on first render
+            pageSize: PAGE_SIZE,
+            filterByTab: () => true,
+            getSearchText: (item) => `${item.version} ${item.date} ${item.highlights.join(' ')}`,
+            renderItem: (item, isSelected, styles) => {
+                const prefix = isSelected ? styles.primary(' ► ') : '   ';
+                // Pad raw text BEFORE applying styles to ensure consistent column widths
+                const versionPadded = `v${item.version}`.padEnd(10);
+                const datePadded = item.date.padEnd(14);
+                const summary = item.highlights.slice(0, 2).join(', ');
+                // Apply styles after padding
+                const version = isSelected ? styles.primary(versionPadded) : versionPadded;
+                const date = styles.muted(datePadded);
+                const desc = styles.muted(summary);
+                return `${prefix}${version} ${date} ${desc}`;
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter View · Esc Exit search';
+                }
+                return '↑↓/jk · / Search · Enter View · q/Esc Close';
+            },
+            emptyMessage: 'No releases available.',
+            noResultsMessage: 'No releases match the search.',
+            showCount: false,
+        });
+        this.minHeight = 18;
+    }
+    /**
+     * Build items on first render.
+     */
+    buildItemsIfNeeded() {
+        if (this.state.items.length > 0)
+            return;
+        const items = RELEASES.map((release) => ({
+            ...release,
+            tabId: 'all',
+        }));
+        this.state.items = items;
+        this.state.filteredItems = [...items];
+    }
+    /**
+     * Override render to build items on first call.
+     */
+    render(context) {
+        this.styles = context.styles;
+        this.termWidth = context.width;
+        this.buildItemsIfNeeded();
+        return super.render(context);
+    }
+    createDetailScreen(item) {
+        const styles = this.getStyles();
+        return new ViewingScreen(item, styles, () => this.termWidth);
+    }
+}

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

@@ -0,0 +1,33 @@
+/**
+ * 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 { type CustomCommand } from '../../../commands/index.js';
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+export interface CommandsOverlayV2Result {
+    /** Command that was created (if any) */
+    created?: string;
+}
+type CommandItem = CustomCommand | {
+    type: 'create';
+};
+/**
+ * Commands overlay using TabbedListOverlayV2.
+ * Displays custom commands in a searchable, tabbed list.
+ */
+export declare class CommandsOverlayV2 extends TabbedListOverlayV2<CommandItem, CommandsOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "commands-overlay-v2";
+    private readonly registry;
+    constructor();
+    protected createDetailScreen(item: CommandItem): BaseScreen | null;
+}
+export {};

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

@@ -0,0 +1,439 @@
+/**
+ * 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, truncate, 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 = truncate(this.state.description, 60);
+                lines.push(s.muted(`   ${descPreview}`));
+                lines.push('');
+                lines.push(chalk.bold(' Prompt template:'));
+                const promptPreview = truncate(this.state.prompt, 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 = truncate(cmd.description, 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());
+    }
+}