@compilr-dev/cli 0.4.0

package/dist/ui/overlays.js

@@ -0,0 +1,627 @@
+/**
+ * Overlays
+ *
+ * Modal overlays that temporarily take over the screen.
+ * - Help menu
+ * - Confirmation dialogs
+ * - Permission prompts
+ * - Context stats
+ */
+import chalk from 'chalk';
+import * as terminal from './terminal.js';
+import { getHelpCommands, getCommandByIndex } from '../commands.js';
+import { getCustomCommandRegistry } from '../commands/index.js';
+import { getStyles } from '../themes/index.js';
+// =============================================================================
+// Version
+// =============================================================================
+const VERSION = 'compilr.dev/agent';
+const TABS = [
+    { id: 'general', label: 'general' },
+    { id: 'commands', label: 'commands' },
+    { id: 'custom-commands', label: 'custom-commands' },
+];
+// Use central command registry
+const COMMANDS = getHelpCommands();
+const MAX_VISIBLE_COMMANDS = 10; // Maximum commands to show at once
+function renderHelpHeader(state) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
+    let tabLine = ' ' + s.primaryBold(VERSION) + '  ';
+    for (let i = 0; i < TABS.length; i++) {
+        const tab = TABS[i];
+        if (i === state.currentTab) {
+            tabLine += s.selected(` ${tab.label} `) + '  ';
+        }
+        else {
+            tabLine += s.muted(` ${tab.label} `) + '  ';
+        }
+    }
+    tabLine += s.muted('(tab to cycle)');
+    lines.push(tabLine);
+    lines.push('');
+    return lines;
+}
+function renderGeneralTab() {
+    const s = getStyles();
+    const lines = [];
+    lines.push(' An AI assistant that understands your codebase, makes edits with your permission, and executes commands — right from your terminal.');
+    lines.push('');
+    lines.push(chalk.bold(' Shortcuts'));
+    const shortcuts = [
+        ['/ for commands', 'Enter to submit'],
+        ['↑↓ for history', 'Esc to cancel'],
+        ['Tab to autocomplete', 'Ctrl+C to exit'],
+    ];
+    for (const [left, right] of shortcuts) {
+        lines.push(' ' + s.primary(left.padEnd(25)) + s.primary(right));
+    }
+    lines.push('');
+    lines.push(chalk.bold(' Features'));
+    lines.push(' ' + s.muted('• Multi-LLM support (Claude, OpenAI, Gemini, Ollama)'));
+    lines.push(' ' + s.muted('• Tool execution with permission prompts'));
+    lines.push(' ' + s.muted('• Context management and compaction'));
+    lines.push(' ' + s.muted('• Slash command autocomplete'));
+    lines.push(''); // Padding to match commands tab height
+    lines.push('');
+    return lines;
+}
+function renderCommandsTab(state) {
+    const s = getStyles();
+    const lines = [];
+    const totalCommands = COMMANDS.length;
+    const visibleCount = Math.min(MAX_VISIBLE_COMMANDS, totalCommands);
+    lines.push(chalk.bold(' Browse available commands:') + s.muted(` (${String(totalCommands)} total)`));
+    lines.push('');
+    // Show up arrow if can scroll up
+    if (state.scrollOffset > 0) {
+        lines.push(s.muted(' ↑ more above'));
+    }
+    else {
+        lines.push('');
+    }
+    const visibleCommands = COMMANDS.slice(state.scrollOffset, state.scrollOffset + visibleCount);
+    for (let i = 0; i < visibleCommands.length; i++) {
+        const cmd = visibleCommands[i];
+        const globalIndex = state.scrollOffset + i;
+        const isSelected = globalIndex === state.selectedCommand;
+        const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+        const name = isSelected ? s.primary(cmd.name.padEnd(20)) : s.muted(cmd.name.padEnd(20));
+        const desc = s.muted(cmd.description);
+        lines.push(prefix + name + desc);
+    }
+    // Pad to fixed height when fewer commands than max
+    for (let i = visibleCommands.length; i < visibleCount; i++) {
+        lines.push('');
+    }
+    // Show down arrow if can scroll down
+    if (state.scrollOffset + visibleCount < totalCommands) {
+        lines.push(s.muted(' ↓ more below'));
+    }
+    else {
+        lines.push('');
+    }
+    return lines;
+}
+function renderCustomCommandsTab(state) {
+    const s = getStyles();
+    const lines = [];
+    const registry = getCustomCommandRegistry();
+    const commands = registry.getAll();
+    const totalCommands = commands.length;
+    const visibleCount = Math.min(MAX_VISIBLE_COMMANDS, totalCommands);
+    lines.push(chalk.bold(' Custom commands:') + (totalCommands > 0 ? s.muted(` (${String(totalCommands)} total)`) : ''));
+    lines.push('');
+    if (commands.length === 0) {
+        lines.push(s.muted(' No custom commands found'));
+        lines.push('');
+        lines.push(s.muted(' Create commands with /commands'));
+        lines.push(s.muted(' or add .md files to:'));
+        lines.push(s.muted(`   ${registry.getProjectDir()}/`));
+        lines.push(s.muted(`   ${registry.getUserDir()}/`));
+        // Pad to match expected height
+        for (let i = 0; i < 6; i++) {
+            lines.push('');
+        }
+    }
+    else {
+        // Show up arrow if can scroll up
+        if (state.customScrollOffset > 0) {
+            lines.push(s.muted(' ↑ more above'));
+        }
+        else {
+            lines.push('');
+        }
+        const visibleCommands = commands.slice(state.customScrollOffset, state.customScrollOffset + visibleCount);
+        for (let i = 0; i < visibleCommands.length; i++) {
+            const cmd = visibleCommands[i];
+            const globalIndex = state.customScrollOffset + i;
+            const isSelected = globalIndex === state.selectedCustomCommand;
+            const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+            const name = `/${cmd.name}`.padEnd(18);
+            const desc = cmd.description.slice(0, 35) + (cmd.description.length > 35 ? '...' : '');
+            const location = ` (${cmd.location})`;
+            if (isSelected) {
+                lines.push(prefix + s.primary(name) + s.muted(desc) + s.muted(location));
+            }
+            else {
+                lines.push(prefix + s.muted(name + desc + location));
+            }
+        }
+        // Pad to fixed height when fewer commands than max
+        for (let i = visibleCommands.length; i < visibleCount; i++) {
+            lines.push('');
+        }
+        // Show down arrow if can scroll down
+        if (state.customScrollOffset + visibleCount < totalCommands) {
+            lines.push(s.muted(' ↓ more below'));
+        }
+        else {
+            lines.push('');
+        }
+        lines.push('');
+        lines.push(s.muted(' Use /commands to manage custom commands'));
+    }
+    return lines;
+}
+function renderCommandDetail(commandIndex) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    const maxLineWidth = cols - 2; // Leave margin for safety
+    const cmd = getCommandByIndex(commandIndex);
+    // Helper to truncate a line to prevent wrapping
+    const truncate = (line, max = maxLineWidth) => {
+        // Strip ANSI codes for length calculation
+        // eslint-disable-next-line no-control-regex
+        const stripped = line.replace(/\x1b\[[0-9;]*m/g, '');
+        if (stripped.length <= max)
+            return line;
+        // Find where to cut (accounting for ANSI codes)
+        let visibleLen = 0;
+        let cutIndex = 0;
+        for (let i = 0; i < line.length; i++) {
+            if (line[i] === '\x1b') {
+                // Skip ANSI sequence
+                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) + '...';
+    };
+    if (!cmd) {
+        lines.push(s.error(' Command not found'));
+        return lines;
+    }
+    // Command name header
+    lines.push(chalk.bold(` /${cmd.name}`));
+    lines.push('');
+    // Description
+    lines.push(' ' + s.primary('DESCRIPTION'));
+    lines.push(truncate('   ' + cmd.description));
+    lines.push('');
+    // Details (word-wrapped)
+    if (cmd.details) {
+        lines.push(' ' + s.primary('ABOUT'));
+        const maxWidth = Math.min(cols - 6, 70); // Cap at 70 chars for readability
+        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 (structured format)
+    if (cmd.examples && cmd.examples.length > 0) {
+        lines.push(' ' + s.primary('EXAMPLES'));
+        for (const example of cmd.examples) {
+            if (example.description) {
+                // Format: /command     · description
+                // Pad the raw string before applying styles
+                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 (new section)
+    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('');
+    }
+    // Pad to consistent height (at least 12 lines for content)
+    while (lines.length < 12) {
+        lines.push('');
+    }
+    return lines;
+}
+function renderHelpFooter(showingDetail) {
+    const s = getStyles();
+    const lines = [];
+    lines.push('');
+    if (showingDetail) {
+        lines.push(s.muted(' Esc to go back'));
+    }
+    else {
+        lines.push(s.muted(' For more help: https://github.com/scozzola/compilr-dev-cli'));
+        lines.push('');
+        lines.push(s.muted(' Enter for details · Esc to exit'));
+    }
+    return lines;
+}
+function buildHelpLines(state) {
+    const allLines = [];
+    const s = getStyles();
+    const cols = terminal.getTerminalWidth();
+    // If showing command detail, render that instead
+    if (state.showingDetail) {
+        allLines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
+        allLines.push(' ' + s.primaryBold('Command Reference'));
+        allLines.push('');
+        allLines.push(...renderCommandDetail(state.detailCommandIndex));
+        allLines.push(...renderHelpFooter(true));
+        return allLines;
+    }
+    allLines.push(...renderHelpHeader(state));
+    switch (TABS[state.currentTab].id) {
+        case 'general':
+            allLines.push(...renderGeneralTab());
+            break;
+        case 'commands':
+            allLines.push(...renderCommandsTab(state));
+            break;
+        case 'custom-commands':
+            allLines.push(...renderCustomCommandsTab(state));
+            break;
+    }
+    allLines.push(...renderHelpFooter(false));
+    return allLines;
+}
+function renderHelpMenu(state, prevLineCount) {
+    const lines = buildHelpLines(state);
+    if (prevLineCount > 0) {
+        terminal.moveCursorToLineStart();
+        if (prevLineCount > 1) {
+            terminal.moveCursorUp(prevLineCount - 1);
+        }
+        terminal.clearToEndOfScreen();
+    }
+    terminal.write(lines.join('\n'));
+    return lines.length;
+}
+/**
+ * Show the tabbed help menu
+ */
+export function showHelp() {
+    return new Promise((resolve) => {
+        const state = {
+            currentTab: 0,
+            selectedCommand: 0,
+            scrollOffset: 0,
+            selectedCustomCommand: 0,
+            customScrollOffset: 0,
+            showingDetail: false,
+            detailCommandIndex: 0,
+        };
+        let lineCount = 0;
+        terminal.writeLine('');
+        terminal.hideCursor();
+        const wasRawMode = process.stdin.isRaw;
+        terminal.enableRawMode();
+        lineCount = renderHelpMenu(state, 0);
+        const cleanup = () => {
+            if (lineCount > 0) {
+                terminal.moveCursorUp(lineCount);
+                terminal.clearToEndOfScreen();
+            }
+            terminal.writeLine('');
+            terminal.showCursor();
+            if (!wasRawMode) {
+                terminal.disableRawMode();
+            }
+            process.stdin.removeListener('data', onData);
+            process.stdout.removeListener('resize', onResize);
+        };
+        const onData = (data) => {
+            const isEscape = data.length === 1 && data[0] === 0x1b;
+            const isTab = data.length === 1 && data[0] === 0x09;
+            const isUpArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x41;
+            const isDownArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x42;
+            const isCtrlC = data.length === 1 && data[0] === 0x03;
+            const isEnter = data.length === 1 && (data[0] === 0x0d || data[0] === 0x0a);
+            // Ctrl+C always exits
+            if (isCtrlC) {
+                cleanup();
+                resolve();
+                return;
+            }
+            // If showing command detail view
+            if (state.showingDetail) {
+                if (isEscape) {
+                    // Go back to commands list
+                    state.showingDetail = false;
+                    lineCount = renderHelpMenu(state, lineCount);
+                    return;
+                }
+                // Ignore other keys in detail view
+                return;
+            }
+            // Escape exits the help menu (when not in detail view)
+            if (isEscape) {
+                cleanup();
+                resolve();
+                return;
+            }
+            // Enter shows command detail (for commands tab only)
+            if (isEnter && TABS[state.currentTab].id === 'commands') {
+                state.showingDetail = true;
+                state.detailCommandIndex = state.selectedCommand;
+                lineCount = renderHelpMenu(state, lineCount);
+                return;
+            }
+            if (isTab) {
+                state.currentTab = (state.currentTab + 1) % TABS.length;
+                // Reset scroll when switching tabs
+                if (TABS[state.currentTab].id === 'commands') {
+                    state.selectedCommand = 0;
+                    state.scrollOffset = 0;
+                }
+                else if (TABS[state.currentTab].id === 'custom-commands') {
+                    state.selectedCustomCommand = 0;
+                    state.customScrollOffset = 0;
+                }
+                lineCount = renderHelpMenu(state, lineCount);
+                return;
+            }
+            // Handle arrow navigation for commands tab
+            if (TABS[state.currentTab].id === 'commands') {
+                const visibleCount = Math.min(MAX_VISIBLE_COMMANDS, COMMANDS.length);
+                if (isUpArrow && state.selectedCommand > 0) {
+                    state.selectedCommand--;
+                    if (state.selectedCommand < state.scrollOffset) {
+                        state.scrollOffset = state.selectedCommand;
+                    }
+                    lineCount = renderHelpMenu(state, lineCount);
+                }
+                if (isDownArrow && state.selectedCommand < COMMANDS.length - 1) {
+                    state.selectedCommand++;
+                    if (state.selectedCommand >= state.scrollOffset + visibleCount) {
+                        state.scrollOffset = state.selectedCommand - visibleCount + 1;
+                    }
+                    lineCount = renderHelpMenu(state, lineCount);
+                }
+            }
+            // Handle arrow navigation for custom commands tab
+            if (TABS[state.currentTab].id === 'custom-commands') {
+                const registry = getCustomCommandRegistry();
+                const customCommands = registry.getAll();
+                const totalCustom = customCommands.length;
+                if (totalCustom > 0) {
+                    const visibleCount = Math.min(MAX_VISIBLE_COMMANDS, totalCustom);
+                    if (isUpArrow && state.selectedCustomCommand > 0) {
+                        state.selectedCustomCommand--;
+                        if (state.selectedCustomCommand < state.customScrollOffset) {
+                            state.customScrollOffset = state.selectedCustomCommand;
+                        }
+                        lineCount = renderHelpMenu(state, lineCount);
+                    }
+                    if (isDownArrow && state.selectedCustomCommand < totalCustom - 1) {
+                        state.selectedCustomCommand++;
+                        if (state.selectedCustomCommand >= state.customScrollOffset + visibleCount) {
+                            state.customScrollOffset = state.selectedCustomCommand - visibleCount + 1;
+                        }
+                        lineCount = renderHelpMenu(state, lineCount);
+                    }
+                }
+            }
+        };
+        const onResize = () => {
+            lineCount = renderHelpMenu(state, lineCount);
+        };
+        process.stdin.on('data', onData);
+        process.stdout.on('resize', onResize);
+    });
+}
+/**
+ * Show a confirmation dialog
+ */
+export function showConfirmation(message, options = {}) {
+    const s = getStyles();
+    const confirmText = options.confirmText ?? 'Yes';
+    const cancelText = options.cancelText ?? 'No';
+    return new Promise((resolve) => {
+        terminal.writeLine('');
+        terminal.write(s.warning('? ') + message + ' ');
+        terminal.write(s.muted(`[${confirmText}/${cancelText}] `));
+        terminal.hideCursor();
+        const wasRawMode = process.stdin.isRaw;
+        terminal.enableRawMode();
+        const cleanup = (result) => {
+            terminal.writeLine(result ? s.success(confirmText) : s.error(cancelText));
+            terminal.showCursor();
+            if (!wasRawMode) {
+                terminal.disableRawMode();
+            }
+            process.stdin.removeListener('data', onData);
+            resolve(result);
+        };
+        const onData = (data) => {
+            const key = data.toString().toLowerCase();
+            if (key === 'y' || key === '\r' || key === '\n') {
+                cleanup(true);
+            }
+            else if (key === 'n' || key === '\x1b' || key === '\x03') {
+                cleanup(false);
+            }
+        };
+        process.stdin.on('data', onData);
+    });
+}
+// =============================================================================
+// Permission Prompt
+// =============================================================================
+/**
+ * Show permission prompt for tool execution
+ */
+export function showPermissionPrompt(tool, args) {
+    const s = getStyles();
+    return new Promise((resolve) => {
+        terminal.writeLine('');
+        terminal.writeLine(s.warning('⚠ ') + chalk.bold('Permission Required'));
+        terminal.writeLine('');
+        terminal.writeLine('  Tool: ' + s.primary(tool));
+        if (args) {
+            terminal.writeLine('  Args: ' + s.muted(args.slice(0, 60) + (args.length > 60 ? '...' : '')));
+        }
+        terminal.writeLine('');
+        terminal.write(s.muted('  [') +
+            s.success('y') +
+            s.muted(']es  [') +
+            s.error('n') +
+            s.muted(']o  [') +
+            s.primary('a') +
+            s.muted(']lways  '));
+        terminal.hideCursor();
+        const wasRawMode = process.stdin.isRaw;
+        terminal.enableRawMode();
+        const renderedLines = 6;
+        const cleanup = (result) => {
+            // Clear the prompt
+            terminal.moveCursorToLineStart();
+            terminal.moveCursorUp(renderedLines - 1);
+            terminal.clearToEndOfScreen();
+            // Show result
+            const resultText = result === 'allow'
+                ? s.success('Allowed')
+                : result === 'allow-always'
+                    ? s.primary('Always allowed')
+                    : s.error('Denied');
+            terminal.writeLine(s.muted(`Permission: ${resultText}`));
+            terminal.writeLine(''); // Add blank line after permission result for separation
+            terminal.showCursor();
+            if (!wasRawMode) {
+                terminal.disableRawMode();
+            }
+            process.stdin.removeListener('data', onData);
+            resolve(result);
+        };
+        const onData = (data) => {
+            const key = data.toString().toLowerCase();
+            if (key === 'y' || key === '\r' || key === '\n') {
+                cleanup('allow');
+            }
+            else if (key === 'n' || key === '\x1b') {
+                cleanup('deny');
+            }
+            else if (key === 'a') {
+                cleanup('allow-always');
+            }
+            else if (key === '\x03') {
+                // Ctrl+C
+                cleanup('deny');
+            }
+        };
+        process.stdin.on('data', onData);
+    });
+}
+// =============================================================================
+// Context Stats Display
+// =============================================================================
+/**
+ * Show context window usage stats
+ */
+export function showContextStats(stats) {
+    const pct = (stats.utilization * 100).toFixed(1);
+    const bar = renderProgressBar(stats.utilization, 30);
+    terminal.writeLine('');
+    terminal.writeLine(chalk.bold('Context Usage'));
+    terminal.writeLine('');
+    terminal.writeLine(`  Tokens: ${stats.tokens.toLocaleString()} / ${stats.maxTokens.toLocaleString()}`);
+    terminal.writeLine(`  Usage:  ${bar} ${pct}%`);
+    terminal.writeLine(`  Messages: ${String(stats.messages)}`);
+    terminal.writeLine(`  Turns: ${String(stats.turns)}`);
+    terminal.writeLine('');
+}
+/**
+ * Render a progress bar
+ */
+function renderProgressBar(value, width) {
+    const s = getStyles();
+    const filled = Math.round(value * width);
+    const empty = width - filled;
+    let color = s.success;
+    if (value > 0.8)
+        color = s.error;
+    else if (value > 0.6)
+        color = s.warning;
+    return color('█'.repeat(filled)) + s.muted('░'.repeat(empty));
+}
+/**
+ * Show session token usage
+ */
+export function showTokenUsage(usage) {
+    terminal.writeLine('');
+    terminal.writeLine(chalk.bold('Token Usage'));
+    terminal.writeLine('');
+    terminal.writeLine(`  Input:  ${usage.inputTokens.toLocaleString()} tokens`);
+    terminal.writeLine(`  Output: ${usage.outputTokens.toLocaleString()} tokens`);
+    terminal.writeLine(`  Total:  ${usage.totalTokens.toLocaleString()} tokens`);
+    if (usage.estimatedCost !== undefined) {
+        terminal.writeLine(`  Cost:   $${usage.estimatedCost.toFixed(4)}`);
+    }
+    terminal.writeLine('');
+}
+// =============================================================================
+// Tool List Display
+// =============================================================================
+/**
+ * Show available tools in compact column format
+ */
+export function showTools(tools) {
+    const s = getStyles();
+    terminal.writeLine('');
+    terminal.writeLine(chalk.bold('Available Tools') + s.muted(` (${String(tools.length)})`));
+    terminal.writeLine('');
+    // Display in 3 columns
+    const colWidth = 20;
+    const cols = 3;
+    const names = tools.map((t) => t.name);
+    for (let i = 0; i < names.length; i += cols) {
+        const row = names.slice(i, i + cols);
+        const formatted = row.map((name) => s.primary(name.padEnd(colWidth))).join('');
+        terminal.writeLine('  ' + formatted);
+    }
+    terminal.writeLine('');
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Permission Overlay
+ *
+ * Modal overlay for tool permission requests.
+ * Uses the same pattern as ask-user-simple-overlay for consistent behavior.
+ */
+export type PermissionResult = 'allow' | 'deny' | 'allow-always';
+export interface PermissionOverlayOptions {
+    toolName: string;
+    args: Record<string, unknown>;
+    description?: string;
+}
+/**
+ * Show the permission overlay
+ */
+export declare function showPermissionOverlay(options: PermissionOverlayOptions): Promise<PermissionResult>;