@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/permission-overlay.js

@@ -2,13 +2,14 @@
  * 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.
  */
 import chalk from 'chalk';
-import * as terminal from './terminal.js';
 import { getStyles } from '../themes/index.js';
+import { InlineOverlay } from './base/inline-overlay.js';
+import { truncate } from './base/index.js';
 // =============================================================================
-// Helpers
+// Helpers (unchanged from original)
 // =============================================================================
 /**
  * Format a value for display, handling nested structures
@@ -16,9 +17,8 @@ import { getStyles } from '../themes/index.js';
  */
 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;
+        return truncate(singleLine, maxLen);
     }
     if (typeof value === 'boolean' || typeof value === 'number') {
         return String(value);
@@ -26,18 +26,19 @@ function formatValue(value, maxLen) {
     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 preview = keys
+                    .slice(0, 2)
+                    .map((k) => {
                     const v = obj[k];
                     return `${k}: ${formatValue(v, 20)}`;
-                }).join(', ');
+                })
+                    .join(', ');
                 return `{${preview}${keys.length > 2 ? ', ...' : ''}}`;
             }
             return formatValue(item, 20);
@@ -51,21 +52,20 @@ function formatValue(value, maxLen) {
         const keys = Object.keys(obj);
         if (keys.length === 0)
             return '{}';
-        const preview = keys.slice(0, 3).map(k => `${k}: ${formatValue(obj[k], 15)}`).join(', ');
+        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
+    // Special handling for bash commands
     if (toolName === 'bash' && typeof args.command === 'string') {
         const cmd = args.command;
         const prefix = 'Command: ';
@@ -76,51 +76,13 @@ function formatArgs(toolName, args, maxWidth) {
         else {
             lines.push(prefix);
             const maxCmdLength = availableWidth * 3;
-            const truncatedCmd = cmd.length > maxCmdLength
-                ? cmd.slice(0, maxCmdLength) + '...'
-                : cmd;
+            const truncatedCmd = truncate(cmd, maxCmdLength);
             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
+    // Note: backlog_write special handling removed - tool deprecated in favor of workitem_* tools
+    // Special handling for edit tool
     if (toolName === 'edit') {
         const path = args.path ?? args.file_path ?? args.filePath;
         if (typeof path === 'string') {
@@ -131,24 +93,23 @@ function formatArgs(toolName, args, maxWidth) {
         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
+            const maxPreview = maxWidth - 8;
             lines.push(`- ${formatValue(oldText, maxPreview)}`);
             lines.push(`+ ${formatValue(newText, maxPreview)}`);
         }
         return lines;
     }
-    // Special handling for write_file - show path and content preview
+    // 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; // "File: " + buffer
+            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 maxContentLen = maxWidth - 15; // "Content: " + buffer
-            // Use formatValue to handle newline replacement
+            const maxContentLen = maxWidth - 15;
             lines.push(`Content: ${formatValue(content, maxContentLen)}`);
         }
         return lines;
@@ -160,16 +121,15 @@ function formatArgs(toolName, args, maxWidth) {
         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
+    // Show other args
     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) + '...');
+            lines.push(truncate(line, maxWidth - 4));
         }
         else {
             lines.push(line);
@@ -186,16 +146,13 @@ function formatArgsForDetail(toolName, args, maxWidth) {
     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);
@@ -238,160 +195,181 @@ function formatArgsForDetail(toolName, args, maxWidth) {
     }
     return lines;
 }
-// Fixed height for detail view overlay (predictable rendering)
+// Fixed height for detail view
 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);
+// =============================================================================
+// Permission Overlay Class
+// =============================================================================
+class PermissionOverlayImpl extends InlineOverlay {
+    options;
+    constructor(options) {
+        super();
+        this.options = options;
     }
-    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);
+    getInitialState() {
+        return {
+            selectedIndex: 0, // Default to "Yes"
+            showingDetail: false,
+            detailScrollOffset: 0,
+            detailContentLines: [],
+        };
     }
-    // Pad to fixed height
-    const renderedLines = endLine - state.scrollOffset;
-    for (let i = renderedLines; i < DETAIL_VIEW_CONTENT_LINES; i++) {
-        lines.push('');
+    render() {
+        if (this.state.showingDetail) {
+            return this.renderDetailView();
+        }
+        return this.renderMainView();
     }
-    // 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);
+    renderMainView() {
+        const s = getStyles();
+        const lines = [];
+        const cols = this.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        // 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 = truncate(argLine, maxArgWidth);
+            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 if (isPageDown) {
-                const maxOffset = Math.max(0, state.totalLines - state.visibleLines);
-                state.scrollOffset = Math.min(maxOffset, state.scrollOffset + state.visibleLines);
+            else {
+                lines.push(s.muted(prefix + key + optionLabels[i]));
             }
-            // 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);
+        }
+        // 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;
     }
-    // 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));
+    renderDetailView() {
+        const s = getStyles();
+        const cols = this.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 = truncate(line, cols - 4);
+            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;
     }
-    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]));
+    handleKey(data) {
+        if (this.state.showingDetail) {
+            return this.handleDetailKey(data);
         }
-        else {
-            lines.push(s.muted(prefix + key + optionLabels[i]));
+        return this.handleMainKey(data);
+    }
+    handleMainKey(data) {
+        // Escape or Ctrl+C = deny
+        if (this.isEscapeKey(data) || this.isCtrlCKey(data)) {
+            return { type: 'close', result: 'deny' };
+        }
+        // Quick keys
+        const key = data.toString().toLowerCase();
+        if (key === 'y') {
+            return { type: 'close', result: 'allow' };
+        }
+        if (key === 'n') {
+            return { type: 'close', result: 'deny' };
+        }
+        if (key === 'a') {
+            return { type: 'close', result: 'allow-always' };
+        }
+        if (key === 'd') {
+            // Switch to detail view
+            const cols = this.getTerminalWidth();
+            this.state.showingDetail = true;
+            this.state.detailScrollOffset = 0;
+            this.state.detailContentLines = formatArgsForDetail(this.options.toolName, this.options.args, cols - 4);
+            return { type: 'continue' };
         }
+        // Arrow navigation
+        if (this.isUpArrowKey(data)) {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+        }
+        else if (this.isDownArrowKey(data)) {
+            this.state.selectedIndex = Math.min(2, this.state.selectedIndex + 1);
+        }
+        else if (this.isEnterKey(data)) {
+            const results = ['allow', 'deny', 'allow-always'];
+            return { type: 'close', result: results[this.state.selectedIndex] };
+        }
+        return { type: 'continue' };
     }
-    // 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('');
+    handleDetailKey(data) {
+        const key = data.toString().toLowerCase();
+        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;
+        // q or Escape = go back to main view
+        if (key === 'q' || this.isEscapeKey(data)) {
+            this.state.showingDetail = false;
+            return { type: 'continue' };
+        }
+        // Scroll
+        const visibleLines = DETAIL_VIEW_CONTENT_LINES;
+        const maxOffset = Math.max(0, this.state.detailContentLines.length - visibleLines);
+        if (this.isUpArrowKey(data)) {
+            this.state.detailScrollOffset = Math.max(0, this.state.detailScrollOffset - 1);
+        }
+        else if (isPageUp) {
+            this.state.detailScrollOffset = Math.max(0, this.state.detailScrollOffset - visibleLines);
+        }
+        else if (this.isDownArrowKey(data)) {
+            this.state.detailScrollOffset = Math.min(maxOffset, this.state.detailScrollOffset + 1);
+        }
+        else if (isPageDown) {
+            this.state.detailScrollOffset = Math.min(maxOffset, this.state.detailScrollOffset + visibleLines);
+        }
+        return { type: 'continue' };
+    }
+    getCleanupSummary(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}`);
     }
-    // Render all lines
-    terminal.write(lines.join('\n'));
-    return lines.length;
 }
 // =============================================================================
 // Main Export
@@ -400,95 +378,6 @@ function render(options, state, previousLineCount = 0, targetLineCount = 0) {
  * 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);
-    });
+    const overlay = new PermissionOverlayImpl(options);
+    return overlay.show();
 }