@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/guardrail-overlay.js

@@ -0,0 +1,145 @@
+/**
+ * Guardrail Confirmation Overlay
+ *
+ * Shows when a guardrail with action='confirm' is triggered.
+ * User must approve or deny the risky operation.
+ */
+import chalk from 'chalk';
+import { getStyles } from '../themes/index.js';
+import { InlineOverlay } from './base/inline-overlay.js';
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+class GuardrailOverlayImpl extends InlineOverlay {
+    options;
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    getInitialState() {
+        return {
+            selectedIndex: 0, // Default to Deny (safer)
+        };
+    }
+    render() {
+        const s = getStyles();
+        const lines = [];
+        const cols = this.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        // Header with warning icon
+        lines.push(border);
+        lines.push(' ' + s.warning('⚠ Risky Operation Detected'));
+        lines.push('');
+        // Guardrail info
+        const category = this.options.category ? `[${this.options.category}]` : '';
+        lines.push(s.muted(` ${category} `) + chalk.bold(this.options.name));
+        lines.push('');
+        // Message
+        const msgLines = this.wrapText(this.options.message, cols - 4);
+        for (const line of msgLines) {
+            lines.push('   ' + s.muted(line));
+        }
+        lines.push('');
+        // Tool and matched input
+        lines.push(s.muted(' Tool: ') + s.primary(this.options.toolName));
+        // Show truncated matched input
+        const maxInputLen = cols - 12;
+        let displayInput = this.options.matchedInput;
+        if (displayInput.length > maxInputLen) {
+            displayInput = displayInput.substring(0, maxInputLen - 3) + '...';
+        }
+        // Replace newlines with visible markers
+        displayInput = displayInput.replace(/\n/g, '↵');
+        lines.push(s.muted(' Match: ') + s.warning(displayInput));
+        lines.push('');
+        // Action buttons
+        const denyLabel = this.state.selectedIndex === 0
+            ? s.error(' ❯ Deny ')
+            : s.muted('   Deny ');
+        const allowLabel = this.state.selectedIndex === 1
+            ? s.warning(' ❯ Allow ')
+            : s.muted('   Allow ');
+        lines.push(' ' + denyLabel + '  ' + allowLabel);
+        lines.push('');
+        // Footer
+        lines.push(s.muted(' ←/→ Select · Enter Confirm · Esc Deny'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C or Escape = Deny
+        if (this.isCtrlCKey(data) || this.isEscapeKey(data)) {
+            return { type: 'close', result: { approved: false } };
+        }
+        // Left/Right arrows or h/l for navigation
+        if (this.isLeftArrowKey(data) || data.toString() === 'h') {
+            this.state.selectedIndex = 0;
+            return { type: 'continue' };
+        }
+        if (this.isRightArrowKey(data) || data.toString() === 'l') {
+            this.state.selectedIndex = 1;
+            return { type: 'continue' };
+        }
+        // Tab to toggle
+        if (this.isTabKey(data)) {
+            this.state.selectedIndex = this.state.selectedIndex === 0 ? 1 : 0;
+            return { type: 'continue' };
+        }
+        // Enter to confirm selection
+        if (this.isEnterKey(data)) {
+            return {
+                type: 'close',
+                result: { approved: this.state.selectedIndex === 1 },
+            };
+        }
+        // 'd' or 'n' for Deny
+        const keyStr = data.toString().toLowerCase();
+        if (keyStr === 'd' || keyStr === 'n') {
+            return { type: 'close', result: { approved: false } };
+        }
+        // 'a' or 'y' for Allow
+        if (keyStr === 'a' || keyStr === 'y') {
+            return { type: 'close', result: { approved: true } };
+        }
+        return { type: 'continue' };
+    }
+    getCleanupSummary(result) {
+        const s = getStyles();
+        if (result.approved) {
+            return s.muted('Guardrail: ') + s.warning('Allowed ') + s.muted(this.options.name);
+        }
+        return s.muted('Guardrail: ') + s.error('Denied ') + s.muted(this.options.name);
+    }
+    /**
+     * Wrap text to fit within maxWidth
+     */
+    wrapText(text, maxWidth) {
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = '';
+        for (const word of words) {
+            if (currentLine.length + word.length + 1 <= maxWidth) {
+                currentLine += (currentLine ? ' ' : '') + word;
+            }
+            else {
+                if (currentLine)
+                    lines.push(currentLine);
+                currentLine = word;
+            }
+        }
+        if (currentLine)
+            lines.push(currentLine);
+        return lines;
+    }
+}
+// =============================================================================
+// Main Export
+// =============================================================================
+/**
+ * Show the guardrail confirmation overlay.
+ * Returns { approved: true } if user allows, { approved: false } if denied.
+ */
+export async function showGuardrailOverlay(options) {
+    const overlay = new GuardrailOverlayImpl(options);
+    return overlay.show();
+}

package/dist/ui/help-overlay-v2.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Help Overlay V2
+ *
+ * Displays available commands in a searchable, categorized list.
+ * Uses TabbedListOverlayV2 for the new Overlay interface.
+ *
+ * Features:
+ * - Tabs: All, Built-in, Custom
+ * - Search with / toggle
+ * - Detail view for full command information
+ * - Works with TerminalUI's overlay management
+ */
+import { TabbedListOverlayV2, BaseScreen } from './base/index.js';
+interface HelpItem {
+    name: string;
+    description: string;
+    type: 'builtin' | 'custom';
+    /** For custom commands */
+    prompt?: string;
+    location?: 'project' | 'personal';
+    /** Index in COMMANDS array for built-in commands */
+    commandIndex?: number;
+}
+/**
+ * Help overlay using the new Overlay interface.
+ * Displays available commands in a searchable, tabbed list.
+ */
+export declare class HelpOverlayV2 extends TabbedListOverlayV2<HelpItem> {
+    readonly type: "inline";
+    readonly id = "help-overlay-v2";
+    constructor();
+    protected createDetailScreen(item: HelpItem): BaseScreen | null;
+}
+export {};

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

@@ -0,0 +1,309 @@
+/**
+ * Help Overlay V2
+ *
+ * Displays available commands in a searchable, categorized list.
+ * Uses TabbedListOverlayV2 for the new Overlay interface.
+ *
+ * Features:
+ * - Tabs: All, Built-in, Custom
+ * - Search with / toggle
+ * - Detail view for full command information
+ * - Works with TerminalUI's overlay management
+ */
+import chalk from 'chalk';
+import * as terminal from './terminal.js';
+import { getHelpCommands, getCommandByIndex } from '../commands.js';
+import { getCustomCommandRegistry } from '../commands/index.js';
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isClose, renderBorder, wrapText, } from './base/index.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const VERSION = 'compilr.dev/agent';
+const PAGE_SIZE = 10;
+const TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'builtin', label: 'Built-in' },
+    { id: 'custom', label: 'Custom' },
+];
+// =============================================================================
+// Detail Screens
+// =============================================================================
+/**
+ * Built-in command detail screen
+ */
+class CommandDetailScreen extends BaseScreen {
+    item;
+    styles;
+    constructor(item, styles) {
+        super();
+        this.item = item;
+        this.styles = styles;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const maxLineWidth = cols - 2;
+        const border = renderBorder(cols, s);
+        const cmd = this.item.commandIndex !== undefined
+            ? getCommandByIndex(this.item.commandIndex)
+            : null;
+        const lines = [];
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('Command Reference'));
+        lines.push('');
+        if (!cmd) {
+            lines.push(s.error(' Command not found'));
+            lines.push(border);
+            lines.push(`  ${s.muted('q/Esc Back')}`);
+            lines.push(border);
+            return lines;
+        }
+        // Helper to truncate
+        const truncate = (line, max = maxLineWidth) => {
+            // eslint-disable-next-line no-control-regex
+            const stripped = line.replace(/\x1b\[[0-9;]*m/g, '');
+            if (stripped.length <= max)
+                return line;
+            let visibleLen = 0;
+            let cutIndex = 0;
+            for (let i = 0; i < line.length; i++) {
+                if (line[i] === '\x1b') {
+                    const end = line.indexOf('m', i);
+                    if (end !== -1) {
+                        i = end;
+                        continue;
+                    }
+                }
+                visibleLen++;
+                if (visibleLen >= max - 3) {
+                    cutIndex = i + 1;
+                    break;
+                }
+            }
+            return line.slice(0, cutIndex) + '...';
+        };
+        // Command name
+        lines.push(chalk.bold(` /${cmd.name}`));
+        lines.push('');
+        // Description
+        lines.push(' ' + s.primary('DESCRIPTION'));
+        lines.push(truncate('   ' + cmd.description));
+        lines.push('');
+        // Details
+        if (cmd.details) {
+            lines.push(' ' + s.primary('ABOUT'));
+            const maxWidth = Math.min(cols - 6, 70);
+            const words = cmd.details.split(' ');
+            let currentLine = '   ';
+            for (const word of words) {
+                if (currentLine.length + word.length + 1 > maxWidth) {
+                    lines.push(truncate(currentLine));
+                    currentLine = '   ' + word;
+                }
+                else {
+                    currentLine += (currentLine.length > 3 ? ' ' : '') + word;
+                }
+            }
+            if (currentLine.length > 3) {
+                lines.push(truncate(currentLine));
+            }
+            lines.push('');
+        }
+        // Aliases
+        if (cmd.aliases && cmd.aliases.length > 0) {
+            lines.push(' ' + s.primary('ALIASES'));
+            lines.push(truncate('   ' + cmd.aliases.map((a) => `/${a}`).join(', ')));
+            lines.push('');
+        }
+        // Examples
+        if (cmd.examples && cmd.examples.length > 0) {
+            lines.push(' ' + s.primary('EXAMPLES'));
+            for (const example of cmd.examples) {
+                if (example.description) {
+                    const paddedCode = example.code.padEnd(22);
+                    const exLine = `   ${s.muted(paddedCode)}${s.muted('·')} ${example.description}`;
+                    lines.push(truncate(exLine));
+                }
+                else {
+                    lines.push(truncate('   ' + s.muted(example.code)));
+                }
+            }
+            lines.push('');
+        }
+        // Interactions
+        if (cmd.interactions && cmd.interactions.length > 0) {
+            lines.push(' ' + s.primary('INTERACTIONS'));
+            for (const hint of cmd.interactions) {
+                lines.push(truncate('   ' + s.muted('• ' + hint)));
+            }
+            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) || isClose(data)) {
+            return popScreen();
+        }
+        return stay(false);
+    }
+    /**
+     * Minimum height for stable rendering.
+     * Covers: header(3) + name(2) + desc(3) + about(5) + aliases(3) + examples(6) + interactions(4) + footer(3) = 29
+     */
+    getMinHeight() {
+        return 25;
+    }
+}
+/**
+ * Custom command detail screen
+ */
+class CustomCommandDetailScreen extends BaseScreen {
+    item;
+    styles;
+    constructor(item, styles) {
+        super();
+        this.item = item;
+        this.styles = styles;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const registry = getCustomCommandRegistry();
+        const lines = [];
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('Custom Command Details'));
+        lines.push('');
+        // Command name
+        lines.push(chalk.bold(` /${this.item.name}`));
+        lines.push('');
+        // Location
+        lines.push(' ' + s.primary('LOCATION'));
+        const loc = this.item.location ?? 'personal';
+        lines.push(`   ${loc === 'project' ? 'Project' : 'Personal'} (${loc})`);
+        lines.push('');
+        // File path
+        lines.push(' ' + s.primary('FILE'));
+        const basePath = loc === 'project'
+            ? registry.getProjectDir()
+            : registry.getUserDir();
+        lines.push(s.muted(`   ${basePath}/${this.item.name}.md`));
+        lines.push('');
+        // Description
+        lines.push(' ' + s.primary('DESCRIPTION'));
+        lines.push(...wrapText(this.item.description, cols - 6, '   '));
+        lines.push('');
+        // Prompt
+        if (this.item.prompt) {
+            lines.push(' ' + s.primary('PROMPT TEMPLATE'));
+            lines.push(...wrapText(this.item.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) || isClose(data)) {
+            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 22;
+    }
+}
+// =============================================================================
+// Help Overlay V2 Class
+// =============================================================================
+/**
+ * Help overlay using the new Overlay interface.
+ * Displays available commands in a searchable, tabbed list.
+ */
+export class HelpOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'help-overlay-v2';
+    constructor() {
+        // Build unified items list
+        const items = [];
+        // Add built-in commands
+        const helpCommands = getHelpCommands();
+        for (let i = 0; i < helpCommands.length; i++) {
+            const cmd = helpCommands[i];
+            items.push({
+                name: cmd.name,
+                description: cmd.description,
+                type: 'builtin',
+                commandIndex: i,
+            });
+        }
+        // Add custom commands
+        const registry = getCustomCommandRegistry();
+        const customCommands = registry.getAll();
+        for (const cmd of customCommands) {
+            items.push({
+                name: `/${cmd.name}`,
+                description: cmd.description,
+                type: 'custom',
+                prompt: cmd.prompt,
+                location: cmd.location,
+            });
+        }
+        super({
+            title: VERSION,
+            tabs: TABS,
+            items,
+            pageSize: PAGE_SIZE,
+            filterByTab: (item, tabId) => {
+                if (tabId === 'all')
+                    return true;
+                if (tabId === 'builtin')
+                    return item.type === 'builtin';
+                if (tabId === 'custom')
+                    return item.type === 'custom';
+                return true;
+            },
+            getSearchText: (item) => `${item.name} ${item.description}`,
+            renderItem: (item, isSelected, styles) => {
+                const prefix = isSelected ? styles.primary(' > ') : '   ';
+                const name = isSelected
+                    ? styles.primary(item.name.padEnd(20))
+                    : styles.muted(item.name.padEnd(20));
+                const desc = styles.muted(item.description);
+                const badge = item.type === 'custom' ? styles.muted(' (custom)') : '';
+                return prefix + name + desc + badge;
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Details · Esc Exit search';
+                }
+                return 'Tab Filter · ↑↓/jk · ←→/hl Pages · / Search · Enter Details · q/Esc Close';
+            },
+            emptyMessage: 'No commands available.',
+            noResultsMessage: 'No commands match the search.',
+        });
+    }
+    createDetailScreen(item) {
+        const styles = this.getStyles();
+        if (item.type === 'builtin') {
+            return new CommandDetailScreen(item, styles);
+        }
+        return new CustomCommandDetailScreen(item, styles);
+    }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Help Overlay
+ *
+ * Displays available commands in a searchable, categorized list.
+ * Uses TabbedListOverlay for consistent UX patterns.
+ *
+ * Features:
+ * - Tabs: All, Built-in, Custom
+ * - Search with / toggle
+ * - Detail view for full command information
+ * - Info header with shortcuts
+ */
+/**
+ * Show the help overlay
+ */
+export declare function showHelp(): Promise<void>;