@compilr-dev/cli 0.4.0 → 0.5.0

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

@@ -0,0 +1,380 @@
+/**
+ * Permission Overlay V2
+ *
+ * Modal overlay for tool permission requests.
+ * Uses BaseOverlayV2 for the new TerminalUI-based REPL.
+ */
+import chalk from 'chalk';
+import { getStyles } from '../themes/index.js';
+import { BaseOverlayV2 } from './base/index.js';
+import * as terminal from './terminal.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') {
+        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 '[]';
+        const items = value.slice(0, 3).map((item) => {
+            if (typeof item === 'object' && item !== null) {
+                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.
+ */
+function formatArgs(toolName, args, maxWidth) {
+    const lines = [];
+    // Special handling for bash commands
+    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 edit tool
+    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}`);
+        }
+        // Diff is shown separately, don't show old/new text here
+        return lines;
+    }
+    // Special handling for write_file
+    if (toolName === 'write_file') {
+        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 content = args.content;
+        if (typeof content === 'string') {
+            const contentLines = content.split('\n').length;
+            lines.push(`Content: ${String(contentLines)} lines`);
+        }
+        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 (limit to 3)
+    const skipKeys = ['path', 'file_path', 'filePath', 'command', 'old_string', 'new_string', 'oldString', 'newString', 'content'];
+    let shown = 0;
+    for (const [key, value] of Object.entries(args)) {
+        if (skipKeys.includes(key))
+            continue;
+        if (shown >= 3) {
+            lines.push(`... +${String(Object.keys(args).length - shown - skipKeys.length)} more`);
+            break;
+        }
+        const valueStr = formatValue(value, maxWidth - key.length - 6);
+        lines.push(`${key}: ${valueStr}`);
+        shown++;
+    }
+    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') {
+            lines.push(`${key}:`);
+            const valueLines = value.split(/\r?\n/);
+            for (const valueLine of valueLines) {
+                if (valueLine.length <= maxWidth - 4) {
+                    lines.push(`  ${valueLine}`);
+                }
+                else {
+                    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 < Math.min(value.length, 10); 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)}`);
+                }
+            }
+            if (value.length > 10) {
+                lines.push(`  ... +${String(value.length - 10)} more items`);
+            }
+            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
+const DETAIL_VIEW_CONTENT_LINES = 15;
+// =============================================================================
+// Permission Overlay V2 Class
+// =============================================================================
+export class PermissionOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'permission-overlay-v2';
+    options;
+    constructor(options) {
+        // Initialize state before super call
+        const initialState = {
+            selectedIndex: 0, // Default to "Yes"
+            showingDetail: false,
+            detailScrollOffset: 0,
+            detailContentLines: [],
+        };
+        super(initialState);
+        this.options = options;
+        // Set minimum height for stable rendering
+        const diffLineCount = options.diffLines?.length ?? 0;
+        this.minHeight = 15 + diffLineCount;
+    }
+    renderContent(context) {
+        if (this.state.showingDetail) {
+            return this.renderDetailView(context);
+        }
+        return this.renderMainView(context);
+    }
+    renderMainView(context) {
+        const s = context.styles;
+        const lines = [];
+        const cols = terminal.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        // If there are diff lines, show them first
+        if (this.options.diffLines && this.options.diffLines.length > 0) {
+            for (const diffLine of this.options.diffLines) {
+                lines.push(diffLine);
+            }
+            lines.push('');
+        }
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.warning('⚠') + ' ' + chalk.bold('Permission Required'));
+        lines.push('');
+        // Tool info
+        lines.push('  Tool: ' + s.primary(this.options.toolName));
+        // Format and display args
+        const maxArgWidth = cols - 6;
+        const argLines = formatArgs(this.options.toolName, this.options.args, maxArgWidth);
+        for (const argLine of argLines) {
+            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 = this.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'));
+        lines.push(border);
+        return lines;
+    }
+    renderDetailView(context) {
+        const s = context.styles;
+        const cols = terminal.getTerminalWidth();
+        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(` (${this.options.toolName})`));
+        lines.push(border);
+        lines.push('');
+        // Content with scroll
+        const contentLines = this.state.detailContentLines;
+        const visibleLines = DETAIL_VIEW_CONTENT_LINES;
+        const endLine = Math.min(this.state.detailScrollOffset + visibleLines, contentLines.length);
+        for (let i = this.state.detailScrollOffset; i < endLine; i++) {
+            const line = contentLines[i];
+            const safeLine = line.length > cols - 4 ? line.slice(0, cols - 7) + '...' : line;
+            lines.push(' ' + safeLine);
+        }
+        // Pad to fixed height
+        const renderedLines = endLine - this.state.detailScrollOffset;
+        for (let i = renderedLines; i < DETAIL_VIEW_CONTENT_LINES; i++) {
+            lines.push('');
+        }
+        // Footer with scroll indicator
+        lines.push('');
+        const scrollInfo = contentLines.length > visibleLines
+            ? s.muted(` [${String(this.state.detailScrollOffset + 1)}-${String(endLine)}/${String(contentLines.length)}]`)
+            : '';
+        lines.push(border);
+        lines.push(s.muted(' ↑↓/PgUp/PgDn Scroll · q/Esc Back') + scrollInfo);
+        return lines;
+    }
+    handleKey(key) {
+        if (this.state.showingDetail) {
+            return this.handleDetailKey(key);
+        }
+        return this.handleMainKey(key);
+    }
+    handleMainKey(key) {
+        // Escape or Ctrl+C = deny
+        if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
+            return this.close('deny');
+        }
+        // Quick keys - use char for single letter presses
+        const keyStr = key.char?.toLowerCase() ?? '';
+        if (keyStr === 'y') {
+            return this.close('allow');
+        }
+        if (keyStr === 'n') {
+            return this.close('deny');
+        }
+        if (keyStr === 'a') {
+            return this.close('allow-always');
+        }
+        if (keyStr === 'd') {
+            // Switch to detail view
+            const cols = terminal.getTerminalWidth();
+            this.state.showingDetail = true;
+            this.state.detailScrollOffset = 0;
+            this.state.detailContentLines = formatArgsForDetail(this.options.toolName, this.options.args, cols - 4);
+            return this.rerender();
+        }
+        // Arrow navigation
+        if (key.name === 'up') {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return this.rerender();
+        }
+        if (key.name === 'down') {
+            this.state.selectedIndex = Math.min(2, this.state.selectedIndex + 1);
+            return this.rerender();
+        }
+        if (key.name === 'return') {
+            const results = ['allow', 'deny', 'allow-always'];
+            return this.close(results[this.state.selectedIndex]);
+        }
+        return this.rerender();
+    }
+    handleDetailKey(key) {
+        // q or Escape = go back to main view
+        const keyStr = key.char?.toLowerCase() ?? '';
+        if (keyStr === 'q' || key.name === 'escape') {
+            this.state.showingDetail = false;
+            return this.rerender();
+        }
+        // Scroll
+        const visibleLines = DETAIL_VIEW_CONTENT_LINES;
+        const maxOffset = Math.max(0, this.state.detailContentLines.length - visibleLines);
+        if (key.name === 'up') {
+            this.state.detailScrollOffset = Math.max(0, this.state.detailScrollOffset - 1);
+        }
+        else if (key.name === 'pageup') {
+            this.state.detailScrollOffset = Math.max(0, this.state.detailScrollOffset - visibleLines);
+        }
+        else if (key.name === 'down') {
+            this.state.detailScrollOffset = Math.min(maxOffset, this.state.detailScrollOffset + 1);
+        }
+        else if (key.name === 'pagedown') {
+            this.state.detailScrollOffset = Math.min(maxOffset, this.state.detailScrollOffset + visibleLines);
+        }
+        return this.rerender();
+    }
+    getCloseSummary(result) {
+        const s = getStyles();
+        const resultText = result === 'allow'
+            ? s.success('Allowed')
+            : result === 'allow-always'
+                ? s.primary('Always allowed')
+                : s.error('Denied');
+        return s.muted(`Permission: ${resultText}`);
+    }
+}

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 {