@compilr-dev/cli 0.4.0

package/dist/ui/permission-overlay.js

@@ -0,0 +1,494 @@
+/**
+ * Permission Overlay
+ *
+ * Modal overlay for tool permission requests.
+ * Uses the same pattern as ask-user-simple-overlay for consistent behavior.
+ */
+import chalk from 'chalk';
+import * as terminal from './terminal.js';
+import { getStyles } from '../themes/index.js';
+// =============================================================================
+// Helpers
+// =============================================================================
+/**
+ * Format a value for display, handling nested structures
+ * Replaces newlines with ↵ symbol to prevent multi-line rendering
+ */
+function formatValue(value, maxLen) {
+    if (typeof value === 'string') {
+        // Replace all newlines with ↵ to prevent multi-line rendering
+        const singleLine = value.replace(/\r?\n|\r/g, '↵');
+        return singleLine.length > maxLen ? singleLine.slice(0, maxLen) + '...' : singleLine;
+    }
+    if (typeof value === 'boolean' || typeof value === 'number') {
+        return String(value);
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return '[]';
+        // Show array contents briefly
+        const items = value.slice(0, 3).map((item) => {
+            if (typeof item === 'object' && item !== null) {
+                // For objects in array, show key highlights
+                const obj = item;
+                const keys = Object.keys(obj);
+                if (keys.length === 0)
+                    return '{}';
+                const preview = keys.slice(0, 2).map(k => {
+                    const v = obj[k];
+                    return `${k}: ${formatValue(v, 20)}`;
+                }).join(', ');
+                return `{${preview}${keys.length > 2 ? ', ...' : ''}}`;
+            }
+            return formatValue(item, 20);
+        });
+        const remaining = value.length - 3;
+        const suffix = remaining > 0 ? `, ... (+${String(remaining)} more)` : '';
+        return `[${items.join(', ')}${suffix}]`;
+    }
+    if (typeof value === 'object' && value !== null) {
+        const obj = value;
+        const keys = Object.keys(obj);
+        if (keys.length === 0)
+            return '{}';
+        const preview = keys.slice(0, 3).map(k => `${k}: ${formatValue(obj[k], 15)}`).join(', ');
+        return keys.length > 3 ? `{${preview}, ...}` : `{${preview}}`;
+    }
+    return String(value);
+}
+/**
+ * Format tool args for display.
+ * - For bash commands: show the command prominently
+ * - For file operations: show the path
+ * - For backlog operations: show action and details clearly
+ * - Strip JSON syntax for readability
+ */
+function formatArgs(toolName, args, maxWidth) {
+    const lines = [];
+    // Special handling for bash commands - show full command
+    if (toolName === 'bash' && typeof args.command === 'string') {
+        const cmd = args.command;
+        const prefix = 'Command: ';
+        const availableWidth = maxWidth - prefix.length - 4;
+        if (cmd.length <= availableWidth) {
+            lines.push(prefix + cmd);
+        }
+        else {
+            lines.push(prefix);
+            const maxCmdLength = availableWidth * 3;
+            const truncatedCmd = cmd.length > maxCmdLength
+                ? cmd.slice(0, maxCmdLength) + '...'
+                : cmd;
+            lines.push('  ' + truncatedCmd);
+        }
+        return lines;
+    }
+    // Special handling for backlog_write - show action details clearly
+    if (toolName === 'backlog_write') {
+        const action = args.action;
+        if (action) {
+            lines.push(`Action: ${action}`);
+        }
+        // For updates, show what's being changed
+        if (action === 'update' && args.id) {
+            lines.push(`Item: ${typeof args.id === 'string' ? args.id : JSON.stringify(args.id)}`);
+            if (args.updates && typeof args.updates === 'object') {
+                const updates = args.updates;
+                const changes = Object.entries(updates)
+                    .map(([k, v]) => `${k} → ${formatValue(v, 25)}`)
+                    .join(', ');
+                const maxChangesWidth = maxWidth - 14;
+                lines.push(`Changes: ${changes.length > maxChangesWidth ? changes.slice(0, maxChangesWidth - 3) + '...' : changes}`);
+            }
+        }
+        // For add, show what's being added
+        if (action === 'add' && args.item && typeof args.item === 'object') {
+            const item = args.item;
+            if (item.id)
+                lines.push(`ID: ${typeof item.id === 'string' ? item.id : JSON.stringify(item.id)}`);
+            if (item.title) {
+                const maxTitleLen = maxWidth - 12;
+                const titleStr = formatValue(item.title, maxTitleLen);
+                lines.push(`Title: ${titleStr}`);
+            }
+            if (item.type)
+                lines.push(`Type: ${typeof item.type === 'string' ? item.type : JSON.stringify(item.type)}`);
+        }
+        // For delete, show what's being removed
+        if (action === 'delete' && args.id) {
+            lines.push(`Deleting: ${typeof args.id === 'string' ? args.id : JSON.stringify(args.id)}`);
+        }
+        return lines;
+    }
+    // Special handling for edit tool - show what's being changed
+    if (toolName === 'edit') {
+        const path = args.path ?? args.file_path ?? args.filePath;
+        if (typeof path === 'string') {
+            const maxPathLen = maxWidth - 10;
+            const truncPath = path.length > maxPathLen ? '...' + path.slice(-(maxPathLen - 3)) : path;
+            lines.push(`File: ${truncPath}`);
+        }
+        const oldText = args.old_text ?? args.oldText ?? args.old_string ?? args.oldString;
+        const newText = args.new_text ?? args.newText ?? args.new_string ?? args.newString;
+        if (typeof oldText === 'string' && typeof newText === 'string') {
+            const maxPreview = maxWidth - 8; // "- " or "+ " plus buffer
+            lines.push(`- ${formatValue(oldText, maxPreview)}`);
+            lines.push(`+ ${formatValue(newText, maxPreview)}`);
+        }
+        return lines;
+    }
+    // Special handling for write_file - show path and content preview
+    if (toolName === 'write_file') {
+        const path = args.path ?? args.file_path ?? args.filePath;
+        if (typeof path === 'string') {
+            const maxPathLen = maxWidth - 10; // "File: " + buffer
+            const truncPath = path.length > maxPathLen ? '...' + path.slice(-(maxPathLen - 3)) : path;
+            lines.push(`File: ${truncPath}`);
+        }
+        const content = args.content;
+        if (typeof content === 'string') {
+            const maxContentLen = maxWidth - 15; // "Content: " + buffer
+            // Use formatValue to handle newline replacement
+            lines.push(`Content: ${formatValue(content, maxContentLen)}`);
+        }
+        return lines;
+    }
+    // For file operations, show path prominently
+    const path = args.path ?? args.file_path ?? args.filePath;
+    if (typeof path === 'string') {
+        const maxPathLen = maxWidth - 10;
+        const truncPath = path.length > maxPathLen ? '...' + path.slice(-(maxPathLen - 3)) : path;
+        lines.push('Path: ' + truncPath);
+    }
+    // Show other args in a clean format (key: value), one per line for clarity
+    const skipKeys = ['path', 'file_path', 'filePath', 'command'];
+    for (const [key, value] of Object.entries(args)) {
+        if (skipKeys.includes(key))
+            continue;
+        const valueStr = formatValue(value, maxWidth - key.length - 6);
+        const line = `${key}: ${valueStr}`;
+        // Truncate if too long
+        if (line.length > maxWidth - 4) {
+            lines.push(line.slice(0, maxWidth - 7) + '...');
+        }
+        else {
+            lines.push(line);
+        }
+    }
+    return lines;
+}
+/**
+ * Format args for detail view (no truncation, proper word wrapping)
+ */
+function formatArgsForDetail(toolName, args, maxWidth) {
+    const lines = [];
+    lines.push(`Tool: ${toolName}`);
+    lines.push('');
+    for (const [key, value] of Object.entries(args)) {
+        if (typeof value === 'string') {
+            // For strings, show full content with word wrapping
+            lines.push(`${key}:`);
+            // Split by newlines first, then wrap each line
+            const valueLines = value.split(/\r?\n/);
+            for (const valueLine of valueLines) {
+                if (valueLine.length <= maxWidth - 4) {
+                    lines.push(`  ${valueLine}`);
+                }
+                else {
+                    // Word wrap long lines
+                    let remaining = valueLine;
+                    while (remaining.length > 0) {
+                        const chunk = remaining.slice(0, maxWidth - 4);
+                        lines.push(`  ${chunk}`);
+                        remaining = remaining.slice(maxWidth - 4);
+                    }
+                }
+            }
+            lines.push('');
+        }
+        else if (Array.isArray(value)) {
+            lines.push(`${key}: [${String(value.length)} items]`);
+            for (let i = 0; i < value.length; i++) {
+                const item = value[i];
+                if (typeof item === 'object' && item !== null) {
+                    lines.push(`  [${String(i)}]:`);
+                    const itemObj = item;
+                    for (const [k, v] of Object.entries(itemObj)) {
+                        const vStr = typeof v === 'string' ? v : JSON.stringify(v);
+                        lines.push(`    ${k}: ${vStr.slice(0, maxWidth - 10)}`);
+                    }
+                }
+                else {
+                    lines.push(`  [${String(i)}]: ${String(item)}`);
+                }
+            }
+            lines.push('');
+        }
+        else if (typeof value === 'object' && value !== null) {
+            lines.push(`${key}:`);
+            for (const [k, v] of Object.entries(value)) {
+                const vStr = typeof v === 'string' ? v : JSON.stringify(v);
+                lines.push(`  ${k}: ${vStr.slice(0, maxWidth - 6)}`);
+            }
+            lines.push('');
+        }
+        else {
+            lines.push(`${key}: ${String(value)}`);
+        }
+    }
+    return lines;
+}
+// Fixed height for detail view overlay (predictable rendering)
+const DETAIL_VIEW_CONTENT_LINES = 15;
+// Note: Total = CONTENT_LINES + header(4) + footer(3) = 22 lines
+/**
+ * Render the detail view as an overlay (fixed height)
+ */
+function renderDetailView(options, state, contentLines, previousLineCount = 0) {
+    const s = getStyles();
+    const cols = terminal.getTerminalWidth();
+    // Clear previous render
+    if (previousLineCount > 0) {
+        terminal.clearLinesAbove(previousLineCount);
+    }
+    const lines = [];
+    const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+    // Header
+    lines.push(border);
+    lines.push(' ' + s.warning('⚠') + ' ' + chalk.bold('Permission Details') + s.muted(` (${options.toolName})`));
+    lines.push(border);
+    lines.push('');
+    // Fixed visible area
+    state.visibleLines = DETAIL_VIEW_CONTENT_LINES;
+    state.totalLines = contentLines.length;
+    // Show content with scroll
+    const endLine = Math.min(state.scrollOffset + state.visibleLines, contentLines.length);
+    for (let i = state.scrollOffset; i < endLine; i++) {
+        const line = contentLines[i];
+        // Truncate to prevent wrapping
+        const safeLine = line.length > cols - 4 ? line.slice(0, cols - 7) + '...' : line;
+        lines.push(' ' + safeLine);
+    }
+    // Pad to fixed height
+    const renderedLines = endLine - state.scrollOffset;
+    for (let i = renderedLines; i < DETAIL_VIEW_CONTENT_LINES; i++) {
+        lines.push('');
+    }
+    // Footer with scroll indicator
+    lines.push('');
+    const scrollInfo = contentLines.length > state.visibleLines
+        ? s.muted(` [${String(state.scrollOffset + 1)}-${String(endLine)}/${String(contentLines.length)}]`)
+        : '';
+    lines.push(border);
+    lines.push(s.muted(' ↑↓/PgUp/PgDn Scroll · q/Esc Back') + scrollInfo);
+    // Render all lines
+    terminal.write(lines.join('\n'));
+    return lines.length;
+}
+/**
+ * Show the detail view (blocking, returns when user presses q/Esc)
+ * Returns the line count so caller can clear it properly
+ */
+async function showDetailView(options) {
+    const cols = terminal.getTerminalWidth();
+    const contentLines = formatArgsForDetail(options.toolName, options.args, cols - 4);
+    const state = {
+        scrollOffset: 0,
+        totalLines: contentLines.length,
+        visibleLines: DETAIL_VIEW_CONTENT_LINES,
+    };
+    let lineCount = 0;
+    // Initial render (no previous lines to clear)
+    lineCount = renderDetailView(options, state, contentLines, 0);
+    return new Promise((resolve) => {
+        const handleData = (data) => {
+            const isEscape = data.length === 1 && data[0] === 0x1b;
+            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 isPageUp = data.length === 4 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x35 && data[3] === 0x7e;
+            const isPageDown = data.length === 4 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x36 && data[3] === 0x7e;
+            const key = data.toString().toLowerCase();
+            // q or Escape = go back
+            if (key === 'q' || isEscape) {
+                process.stdin.removeListener('data', handleData);
+                // Clear the detail view before returning
+                terminal.clearLinesAbove(lineCount);
+                resolve(lineCount);
+                return;
+            }
+            // Scroll up
+            if (isUpArrow) {
+                state.scrollOffset = Math.max(0, state.scrollOffset - 1);
+            }
+            else if (isPageUp) {
+                state.scrollOffset = Math.max(0, state.scrollOffset - state.visibleLines);
+            }
+            // Scroll down
+            else if (isDownArrow) {
+                const maxOffset = Math.max(0, state.totalLines - state.visibleLines);
+                state.scrollOffset = Math.min(maxOffset, state.scrollOffset + 1);
+            }
+            else if (isPageDown) {
+                const maxOffset = Math.max(0, state.totalLines - state.visibleLines);
+                state.scrollOffset = Math.min(maxOffset, state.scrollOffset + state.visibleLines);
+            }
+            // Re-render with previous line count
+            lineCount = renderDetailView(options, state, contentLines, lineCount);
+        };
+        process.stdin.on('data', handleData);
+    });
+}
+// =============================================================================
+// Rendering
+// =============================================================================
+function render(options, state, previousLineCount = 0, targetLineCount = 0) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+    // Clear previous render
+    if (previousLineCount > 0) {
+        terminal.clearLinesAbove(previousLineCount);
+    }
+    // Header
+    lines.push(border);
+    lines.push(' ' + s.warning('⚠') + ' ' + chalk.bold('Permission Required'));
+    lines.push('');
+    // Tool info
+    lines.push('  Tool: ' + s.primary(options.toolName));
+    // Format and display args
+    // Use cols - 6 to account for '  ' indent and buffer for safety
+    const maxArgWidth = cols - 6;
+    const argLines = formatArgs(options.toolName, options.args, maxArgWidth);
+    for (const argLine of argLines) {
+        // Final safety truncation to prevent any line from wrapping
+        const safeArg = argLine.length > maxArgWidth ? argLine.slice(0, maxArgWidth - 3) + '...' : argLine;
+        lines.push('  ' + s.muted(safeArg));
+    }
+    lines.push('');
+    // Options
+    const optionLabels = ['Yes, allow this', 'No, deny', 'Always allow this tool'];
+    const optionKeys = ['y', 'n', 'a'];
+    for (let i = 0; i < optionLabels.length; i++) {
+        const isCursor = state.selectedIndex === i;
+        const prefix = isCursor ? ' ❯ ' : '   ';
+        const key = `[${optionKeys[i]}] `;
+        if (isCursor) {
+            lines.push(s.primary(prefix + key + optionLabels[i]));
+        }
+        else {
+            lines.push(s.muted(prefix + key + optionLabels[i]));
+        }
+    }
+    // Footer
+    lines.push('');
+    lines.push(s.muted(' ↑↓ Navigate · Enter Select · y/n/a Quick select · ') + s.primary('d') + s.muted(' Details'));
+    // Bottom border
+    lines.push(border);
+    // Pad with empty lines to maintain consistent height
+    while (lines.length < targetLineCount) {
+        lines.push('');
+    }
+    // Render all lines
+    terminal.write(lines.join('\n'));
+    return lines.length;
+}
+// =============================================================================
+// Main Export
+// =============================================================================
+/**
+ * Show the permission overlay
+ */
+export async function showPermissionOverlay(options) {
+    const state = {
+        selectedIndex: 0, // Default to "Yes"
+    };
+    let lineCount = 0;
+    let maxLineCount = 0;
+    // NOTE: Footer is already paused by the caller (index.ts handler calls sharedState.pauseFooter)
+    // Do NOT call pauseForOverlay() here - it causes double-pause issues
+    // Ensure we start from a fresh line
+    terminal.writeLine('');
+    terminal.hideCursor();
+    const wasRawMode = process.stdin.isRaw;
+    terminal.enableRawMode();
+    // Initial render
+    lineCount = render(options, state, 0);
+    maxLineCount = Math.max(maxLineCount, lineCount);
+    return new Promise((resolve) => {
+        const cleanup = (result) => {
+            terminal.clearLinesAbove(maxLineCount);
+            // Show result summary
+            const s = getStyles();
+            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(''); // Blank line for separation
+            terminal.showCursor();
+            if (!wasRawMode) {
+                terminal.disableRawMode();
+            }
+            process.stdin.removeListener('data', handleData);
+            resolve(result);
+        };
+        const handleData = (data) => {
+            const isEscape = data.length === 1 && data[0] === 0x1b;
+            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 or Escape = deny
+            if (isCtrlC || isEscape) {
+                cleanup('deny');
+                return;
+            }
+            // Quick keys
+            const key = data.toString().toLowerCase();
+            if (key === 'y') {
+                cleanup('allow');
+                return;
+            }
+            if (key === 'n') {
+                cleanup('deny');
+                return;
+            }
+            if (key === 'a') {
+                cleanup('allow-always');
+                return;
+            }
+            if (key === 'd') {
+                // Show detail view, then return to permission overlay
+                process.stdin.removeListener('data', handleData);
+                // First clear the current permission overlay
+                terminal.clearLinesAbove(maxLineCount);
+                void showDetailView(options).then(() => {
+                    // Detail view already cleared itself, just re-render permission overlay
+                    lineCount = render(options, state, 0);
+                    maxLineCount = lineCount;
+                    process.stdin.on('data', handleData);
+                });
+                return;
+            }
+            // Arrow navigation
+            if (isUpArrow) {
+                state.selectedIndex = Math.max(0, state.selectedIndex - 1);
+            }
+            else if (isDownArrow) {
+                state.selectedIndex = Math.min(2, state.selectedIndex + 1);
+            }
+            else if (isEnter) {
+                // Select based on current index
+                const results = ['allow', 'deny', 'allow-always'];
+                cleanup(results[state.selectedIndex]);
+                return;
+            }
+            // Re-render
+            lineCount = render(options, state, maxLineCount, maxLineCount);
+            maxLineCount = Math.max(maxLineCount, lineCount);
+        };
+        process.stdin.on('data', handleData);
+    });
+}

package/dist/ui/terminal.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Terminal Utilities
+ *
+ * Low-level terminal operations using ANSI escape codes.
+ * Pure functions with no state.
+ */
+/**
+ * Set terminal window title
+ */
+export declare function setTitle(title: string): void;
+/**
+ * Get terminal width (columns)
+ */
+export declare function getTerminalWidth(): number;
+/**
+ * Get terminal height (rows)
+ */
+export declare function getTerminalHeight(): number;
+/**
+ * Move cursor up N lines
+ */
+export declare function moveCursorUp(n: number): void;
+/**
+ * Move cursor down N lines
+ */
+export declare function moveCursorDown(n: number): void;
+/**
+ * Move cursor to column (1-indexed)
+ */
+export declare function moveCursorToColumn(col: number): void;
+/**
+ * Move cursor to beginning of line
+ */
+export declare function moveCursorToLineStart(): void;
+/**
+ * Save cursor position
+ */
+export declare function saveCursor(): void;
+/**
+ * Restore cursor position
+ */
+export declare function restoreCursor(): void;
+/**
+ * Hide cursor
+ */
+export declare function hideCursor(): void;
+/**
+ * Show cursor
+ */
+export declare function showCursor(): void;
+/**
+ * Clear current line
+ */
+export declare function clearLine(): void;
+/**
+ * Clear from cursor to end of screen
+ */
+export declare function clearToEndOfScreen(): void;
+/**
+ * Clear N lines above cursor (including current line)
+ * Moves cursor up, clears to end of screen, cursor ends at top
+ */
+export declare function clearLinesAbove(count: number): void;
+/**
+ * Clear entire screen
+ */
+export declare function clearScreen(): void;
+/**
+ * Calculate how many physical (visual) lines a string occupies
+ * given terminal width and starting column.
+ *
+ * @param text - The text to measure (may contain newlines)
+ * @param termWidth - Terminal width in columns
+ * @param startCol - Starting column position (0-indexed)
+ * @returns Number of physical lines occupied
+ */
+export declare function calculatePhysicalLines(text: string, termWidth: number, startCol?: number): number;
+/**
+ * Calculate physical layout of text with cursor position
+ *
+ * @param text - The text to analyze
+ * @param cursorPos - Cursor position in the text (character index)
+ * @param termWidth - Terminal width
+ * @param startCol - Starting column (for prompt prefix)
+ */
+export declare function calculateCursorPosition(text: string, cursorPos: number, termWidth: number, startCol?: number): {
+    row: number;
+    col: number;
+};
+/**
+ * Create a horizontal line spanning terminal width
+ *
+ * @param char - Character to use (default: '─')
+ * @returns String of repeated characters
+ */
+export declare function horizontalLine(char?: string): string;
+/**
+ * Enable raw mode for stdin
+ * In raw mode, input is available character by character
+ */
+export declare function enableRawMode(): void;
+/**
+ * Disable raw mode for stdin and pause it
+ */
+export declare function disableRawMode(): void;
+/**
+ * Write to stdout without newline
+ */
+export declare function write(text: string): void;
+/**
+ * Write line to stdout with newline
+ */
+export declare function writeLine(text?: string): void;
+/**
+ * Ring terminal bell
+ */
+export declare function bell(): void;