@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/overlays.js

@@ -9,451 +9,8 @@
  */
 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);
-    });
-}
+import { renderProgressBar, truncate } from './base/index.js';
 /**
  * Show a confirmation dialog
  */
@@ -503,7 +60,7 @@ export function showPermissionPrompt(tool, args) {
         terminal.writeLine('');
         terminal.writeLine('  Tool: ' + s.primary(tool));
         if (args) {
-            terminal.writeLine('  Args: ' + s.muted(args.slice(0, 60) + (args.length > 60 ? '...' : '')));
+            terminal.writeLine('  Args: ' + s.muted(truncate(args, 60)));
         }
         terminal.writeLine('');
         terminal.write(s.muted('  [') +
@@ -563,8 +120,9 @@ export function showPermissionPrompt(tool, args) {
  * Show context window usage stats
  */
 export function showContextStats(stats) {
+    const s = getStyles();
     const pct = (stats.utilization * 100).toFixed(1);
-    const bar = renderProgressBar(stats.utilization, 30);
+    const bar = renderProgressBar(stats.utilization, 30, s);
     terminal.writeLine('');
     terminal.writeLine(chalk.bold('Context Usage'));
     terminal.writeLine('');
@@ -574,20 +132,6 @@ export function showContextStats(stats) {
     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
  */

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

@@ -2,7 +2,7 @@
  * Permission Overlay
  *
  * Modal overlay for tool permission requests.
- * Uses the same pattern as ask-user-simple-overlay for consistent behavior.
+ * Renders inline above the footer using InlineOverlay base class.
  */
 export type PermissionResult = 'allow' | 'deny' | 'allow-always';
 export interface PermissionOverlayOptions {