@compilr-dev/cli 0.4.0 → 0.5.0

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

@@ -3,6 +3,7 @@
  *
  * Modal overlay for managing API keys.
  * Shows status of all providers and allows setting/deleting keys.
+ * Refactored to use BaseOverlay + ScreenStack + InputFeature.
  */
 export interface KeysOverlayResult {
     /** Whether any keys were changed */

package/dist/ui/keys-overlay.js

@@ -3,31 +3,37 @@
  *
  * Modal overlay for managing API keys.
  * Shows status of all providers and allows setting/deleting keys.
+ * Refactored to use BaseOverlay + ScreenStack + InputFeature.
  */
 import * as terminal from './terminal.js';
-import { getStyles } from '../themes/index.js';
+import { BaseOverlay, BaseScreen, ScreenStack, stay, pushScreen, popScreen, closeOverlay, isEscape, isEnter, isCtrlC, isClose, isNavigateUp, isNavigateDown, isD, } from './base/index.js';
+import { InputFeature } from './features/index.js';
 import { getAllProviderStatuses, setApiKey, deleteApiKey, } from '../utils/credentials.js';
-// =============================================================================
-// Rendering
-// =============================================================================
-function render(state, previousLineCount = 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);
+import { debugLog } from '../utils/debug-log.js';
+/**
+ * List screen - shows all providers with their key status
+ */
+class ListScreen extends BaseScreen {
+    state;
+    styles;
+    constructor(state, styles) {
+        super();
+        this.state = state;
+        this.styles = styles;
     }
-    // Header
-    lines.push(border);
-    lines.push(' ' + s.primaryBold('API Keys'));
-    lines.push('');
-    if (state.mode === 'list') {
-        // List mode - show all providers
-        for (let i = 0; i < state.providers.length; i++) {
-            const p = state.providers[i];
-            const isCursor = state.selectedIndex === i;
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('API Keys'));
+        lines.push('');
+        // Provider list
+        for (let i = 0; i < this.state.providers.length; i++) {
+            const p = this.state.providers[i];
+            const isCursor = this.state.selectedIndex === i;
             const prefix = isCursor ? ' ❯ ' : '   ';
             // Status indicator
             let status;
@@ -46,136 +52,192 @@ function render(state, previousLineCount = 0) {
             const line = `${prefix}${name.padEnd(22)} ${status}`;
             lines.push(line);
         }
+        // Footer
         lines.push('');
-        lines.push(s.muted(' ↑↓ Navigate · Enter Edit · d Delete · Esc Close'));
+        lines.push(s.muted(' ↑↓/jk Navigate · Enter Edit · d Delete · q/Esc Close'));
+        lines.push(border);
+        return lines;
     }
-    else {
-        // Input mode - show key entry
-        const provider = state.providers.find(p => p.provider === state.editingProvider);
-        if (provider) {
-            lines.push(` Set API key for ${s.primaryBold(provider.name)}:`);
-            lines.push('');
-            lines.push(` > ${state.inputBuffer}${s.primary('▋')}`);
-            lines.push('');
-            lines.push(s.muted(` Get key: ${provider.keyUrl}`));
+    handleKey(data) {
+        // Close keys
+        if (isCtrlC(data) || isClose(data)) {
+            return closeOverlay({ changed: this.state.changed });
+        }
+        // Navigation up
+        if (isNavigateUp(data)) {
+            if (this.state.selectedIndex > 0) {
+                this.state.selectedIndex--;
+                return stay();
+            }
+            return stay(false);
+        }
+        // Navigation down
+        if (isNavigateDown(data)) {
+            if (this.state.selectedIndex < this.state.providers.length - 1) {
+                this.state.selectedIndex++;
+                return stay();
+            }
+            return stay(false);
+        }
+        // Enter - edit selected provider
+        if (isEnter(data)) {
+            const selected = this.state.providers[this.state.selectedIndex];
+            if (selected.provider !== 'ollama') {
+                return pushScreen(new InputScreen(this.state, this.styles, selected.provider));
+            }
+            return stay(false);
+        }
+        // Delete key
+        if (isD(data)) {
+            const selected = this.state.providers[this.state.selectedIndex];
+            if (selected.provider !== 'ollama' && selected.hasKey && !selected.fromEnv) {
+                deleteApiKey(selected.provider);
+                this.state.providers = getAllProviderStatuses();
+                this.state.changed = true;
+                return stay();
+            }
+            return stay(false);
+        }
+        return stay(false);
+    }
+}
+/**
+ * Input screen - text input for entering API key using InputFeature
+ */
+class InputScreen extends BaseScreen {
+    state;
+    styles;
+    provider;
+    input;
+    constructor(state, styles, provider) {
+        super();
+        this.state = state;
+        this.styles = styles;
+        this.provider = provider;
+        this.input = new InputFeature({ placeholder: 'Paste or type your API key...' });
+    }
+    onEnter() {
+        terminal.showCursor();
+    }
+    onExit() {
+        terminal.hideCursor();
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        const lines = [];
+        const providerInfo = this.state.providers.find(p => p.provider === this.provider);
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('API Keys'));
+        lines.push('');
+        // Input prompt
+        lines.push(` Set API key for ${s.primary(providerInfo?.name ?? this.provider)}:`);
+        lines.push('');
+        lines.push(' ' + this.input.render(s));
+        lines.push('');
+        // Help text
+        if (providerInfo?.keyUrl) {
+            lines.push(s.muted(` Get key: ${providerInfo.keyUrl}`));
             lines.push('');
-            lines.push(s.muted(' Enter Save · Esc Cancel'));
+        }
+        // Footer
+        lines.push(s.muted(' Enter Save · Esc Cancel · ←→ Move cursor'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes overlay
+        if (isCtrlC(data)) {
+            return closeOverlay({ changed: this.state.changed });
+        }
+        // Escape goes back to list
+        if (isEscape(data)) {
+            return popScreen();
+        }
+        // Enter saves the key
+        if (isEnter(data)) {
+            const value = this.input.trimmedValue;
+            if (value) {
+                setApiKey(this.provider, value);
+                this.state.providers = getAllProviderStatuses();
+                this.state.changed = true;
+            }
+            return popScreen();
+        }
+        // Let InputFeature handle the key
+        const result = this.input.handleKey(data);
+        if (result.handled) {
+            return stay(result.render);
+        }
+        return stay(false);
+    }
+}
+// =============================================================================
+// Overlay Class
+// =============================================================================
+class KeysOverlay extends BaseOverlay {
+    screenStack;
+    constructor() {
+        debugLog('KeysOverlay:constructor', 'start');
+        debugLog('KeysOverlay:constructor', 'calling getAllProviderStatuses');
+        const providers = getAllProviderStatuses();
+        debugLog('KeysOverlay:constructor', 'getAllProviderStatuses done');
+        super({
+            lineCount: 0,
+            maxLineCount: 0,
+            selectedIndex: 0,
+            changed: false,
+            providers,
+        });
+        debugLog('KeysOverlay:constructor', 'super() done');
+        this.screenStack = new ScreenStack();
+        this.screenStack.push(new ListScreen(this.state, this.styles));
+        debugLog('KeysOverlay:constructor', 'end');
+    }
+    render() {
+        const screen = this.screenStack.current();
+        return screen?.render() ?? [];
+    }
+    handleKey(data) {
+        const screen = this.screenStack.current();
+        if (!screen) {
+            this.close({ changed: this.state.changed });
+            return;
+        }
+        const result = screen.handleKey(data);
+        switch (result.action) {
+            case 'stay':
+                if (result.render) {
+                    this.update();
+                }
+                break;
+            case 'push':
+                this.screenStack.push(result.screen);
+                this.update();
+                break;
+            case 'pop':
+                this.screenStack.pop();
+                this.update();
+                break;
+            case 'close':
+                this.close(result.result);
+                break;
         }
     }
-    // Bottom border
-    lines.push(border);
-    // Render all lines
-    terminal.write(lines.join('\n'));
-    return lines.length;
 }
 // =============================================================================
-// Main Export
+// Export Function (Backward Compatible)
 // =============================================================================
 /**
  * Show the keys management overlay
  */
 export async function showKeysOverlay() {
-    const state = {
-        mode: 'list',
-        selectedIndex: 0,
-        editingProvider: null,
-        inputBuffer: '',
-        cancelled: false,
-        providers: getAllProviderStatuses(),
-    };
-    let lineCount = 0;
-    let changed = false;
-    // Initial render
-    lineCount = render(state, lineCount);
-    return new Promise((resolve) => {
-        const stdin = process.stdin;
-        stdin.setRawMode(true);
-        stdin.resume();
-        const cleanup = () => {
-            stdin.removeListener('data', handleKey);
-            stdin.setRawMode(false);
-            stdin.pause();
-            // Clear the overlay
-            terminal.clearLinesAbove(lineCount);
-        };
-        const handleKey = (data) => {
-            const key = data.toString();
-            if (state.mode === 'list') {
-                // List mode key handling
-                switch (key) {
-                    case '\x1B': // Escape
-                    case 'q':
-                        cleanup();
-                        resolve({ changed });
-                        return;
-                    case '\x1B[A': // Up arrow
-                        if (state.selectedIndex > 0) {
-                            state.selectedIndex--;
-                        }
-                        break;
-                    case '\x1B[B': // Down arrow
-                        if (state.selectedIndex < state.providers.length - 1) {
-                            state.selectedIndex++;
-                        }
-                        break;
-                    case '\r': // Enter - edit selected
-                    case '\n': {
-                        const selected = state.providers[state.selectedIndex];
-                        if (selected.provider !== 'ollama') {
-                            state.mode = 'input';
-                            state.editingProvider = selected.provider;
-                            state.inputBuffer = '';
-                        }
-                        break;
-                    }
-                    case 'd':
-                    case 'D': {
-                        // Delete key for selected provider
-                        const selected = state.providers[state.selectedIndex];
-                        if (selected.provider !== 'ollama' && selected.hasKey && !selected.fromEnv) {
-                            deleteApiKey(selected.provider);
-                            state.providers = getAllProviderStatuses();
-                            changed = true;
-                        }
-                        break;
-                    }
-                }
-            }
-            else {
-                // Input mode key handling
-                if (key === '\x1B') {
-                    // Escape - cancel input
-                    state.mode = 'list';
-                    state.editingProvider = null;
-                    state.inputBuffer = '';
-                }
-                else if (key === '\r' || key === '\n') {
-                    // Enter - save key
-                    if (state.inputBuffer.trim() && state.editingProvider) {
-                        setApiKey(state.editingProvider, state.inputBuffer.trim());
-                        state.providers = getAllProviderStatuses();
-                        changed = true;
-                    }
-                    state.mode = 'list';
-                    state.editingProvider = null;
-                    state.inputBuffer = '';
-                }
-                else if (key === '\x7F' || key === '\b') {
-                    // Backspace
-                    state.inputBuffer = state.inputBuffer.slice(0, -1);
-                }
-                else {
-                    // Handle paste (multiple characters) or single printable character
-                    // Filter to only printable ASCII characters
-                    const printable = key.split('').filter(c => c >= ' ' && c <= '~').join('');
-                    if (printable.length > 0) {
-                        state.inputBuffer += printable;
-                    }
-                }
-            }
-            // Re-render
-            lineCount = render(state, lineCount);
-        };
-        stdin.on('data', handleKey);
-    });
+    debugLog('showKeysOverlay', 'creating overlay');
+    const overlay = new KeysOverlay();
+    debugLog('showKeysOverlay', 'calling show()');
+    const result = await overlay.show();
+    debugLog('showKeysOverlay', 'show() returned');
+    return result;
 }

package/dist/ui/line-utils.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Unified Line Utilities
+ *
+ * Single source of truth for ANSI stripping, visible length calculation,
+ * and physical line counting. Prevents inconsistencies between components.
+ *
+ * Key insight: Different ANSI patterns were causing height miscalculations:
+ * - Footer used: /\x1b\[[0-9;]*m/g (only matches 'm' terminator)
+ * - InputPrompt used: /\x1B\[[0-9;]*[a-zA-Z]/g (matches all terminators)
+ *
+ * The correct pattern matches all SGR (Select Graphic Rendition) sequences
+ * including colors, styles, cursor movements, etc.
+ */
+/**
+ * Unified ANSI escape sequence pattern.
+ * Matches all SGR sequences: CSI (Control Sequence Introducer) followed by
+ * parameters and a terminating letter (m for colors, but also J, K, H, etc.)
+ */
+export declare const ANSI_PATTERN: RegExp;
+/**
+ * Strip all ANSI escape codes from a string.
+ * Returns the visible text only.
+ */
+export declare function stripAnsi(str: string): string;
+/**
+ * Get the visible length of a string (excluding ANSI codes).
+ * This is what the terminal actually displays.
+ */
+export declare function getVisibleLength(str: string): number;
+/**
+ * Calculate how many physical terminal lines a single logical line occupies.
+ * Accounts for wrapping when content exceeds terminal width.
+ *
+ * @param line - The line content (may contain ANSI codes)
+ * @param termWidth - Terminal width in columns
+ * @returns Number of physical lines (always >= 1)
+ *
+ * Example:
+ *   termWidth = 80
+ *   line = "hello" (5 chars) → 1 line
+ *   line = "x".repeat(100) (100 chars) → 2 lines (wraps at 80)
+ *   line = "" (0 chars) → 1 line (empty still takes a line)
+ */
+export declare function getPhysicalLineCount(line: string, termWidth: number): number;
+/**
+ * Calculate how many physical terminal lines a line takes when starting
+ * at a specific column offset (e.g., after a prompt prefix).
+ *
+ * @param text - The text content (may contain ANSI codes)
+ * @param startCol - Starting column (0-indexed, e.g., prompt length)
+ * @param termWidth - Terminal width in columns
+ * @returns Number of physical lines
+ *
+ * Example:
+ *   termWidth = 80, startCol = 10 (after "compilr> ")
+ *   text = "hello" (5 chars) → 1 line (10 + 5 = 15 < 80)
+ *   text = "x".repeat(75) → 2 lines (10 + 75 = 85, wraps)
+ */
+export declare function getPhysicalLineCountWithOffset(text: string, startCol: number, termWidth: number): number;
+/**
+ * Calculate total physical lines for an array of logical lines.
+ *
+ * @param lines - Array of line strings (may contain ANSI codes)
+ * @param termWidth - Terminal width in columns
+ * @returns Total number of physical lines
+ */
+export declare function getTotalPhysicalLines(lines: string[], termWidth: number): number;
+/**
+ * Get detailed height information for each line.
+ * Useful for debugging and understanding exactly how lines wrap.
+ *
+ * @param lines - Array of line strings
+ * @param termWidth - Terminal width
+ * @returns Array of { visibleLength, physicalLines } for each line
+ */
+export declare function getLineHeightDetails(lines: string[], termWidth: number): Array<{
+    visibleLength: number;
+    physicalLines: number;
+}>;
+/**
+ * Truncate a string to a maximum visible length, preserving ANSI codes.
+ * Adds ellipsis if truncated.
+ *
+ * @param str - String to truncate (may contain ANSI codes)
+ * @param maxLen - Maximum visible length
+ * @returns Truncated string with ellipsis if needed
+ */
+export declare function truncateWithAnsi(str: string, maxLen: number): string;

package/dist/ui/line-utils.js

@@ -0,0 +1,150 @@
+/**
+ * Unified Line Utilities
+ *
+ * Single source of truth for ANSI stripping, visible length calculation,
+ * and physical line counting. Prevents inconsistencies between components.
+ *
+ * Key insight: Different ANSI patterns were causing height miscalculations:
+ * - Footer used: /\x1b\[[0-9;]*m/g (only matches 'm' terminator)
+ * - InputPrompt used: /\x1B\[[0-9;]*[a-zA-Z]/g (matches all terminators)
+ *
+ * The correct pattern matches all SGR (Select Graphic Rendition) sequences
+ * including colors, styles, cursor movements, etc.
+ */
+// =============================================================================
+// ANSI Handling
+// =============================================================================
+/**
+ * Unified ANSI escape sequence pattern.
+ * Matches all SGR sequences: CSI (Control Sequence Introducer) followed by
+ * parameters and a terminating letter (m for colors, but also J, K, H, etc.)
+ */
+// eslint-disable-next-line no-control-regex
+export const ANSI_PATTERN = /\x1b\[[0-9;]*[A-Za-z]/g;
+/**
+ * Strip all ANSI escape codes from a string.
+ * Returns the visible text only.
+ */
+export function stripAnsi(str) {
+    return str.replace(ANSI_PATTERN, '');
+}
+/**
+ * Get the visible length of a string (excluding ANSI codes).
+ * This is what the terminal actually displays.
+ */
+export function getVisibleLength(str) {
+    return stripAnsi(str).length;
+}
+// =============================================================================
+// Physical Line Calculation
+// =============================================================================
+/**
+ * Calculate how many physical terminal lines a single logical line occupies.
+ * Accounts for wrapping when content exceeds terminal width.
+ *
+ * @param line - The line content (may contain ANSI codes)
+ * @param termWidth - Terminal width in columns
+ * @returns Number of physical lines (always >= 1)
+ *
+ * Example:
+ *   termWidth = 80
+ *   line = "hello" (5 chars) → 1 line
+ *   line = "x".repeat(100) (100 chars) → 2 lines (wraps at 80)
+ *   line = "" (0 chars) → 1 line (empty still takes a line)
+ */
+export function getPhysicalLineCount(line, termWidth) {
+    const visibleLength = getVisibleLength(line);
+    if (visibleLength === 0)
+        return 1; // Empty line still takes 1 row
+    return Math.ceil(visibleLength / termWidth);
+}
+/**
+ * Calculate how many physical terminal lines a line takes when starting
+ * at a specific column offset (e.g., after a prompt prefix).
+ *
+ * @param text - The text content (may contain ANSI codes)
+ * @param startCol - Starting column (0-indexed, e.g., prompt length)
+ * @param termWidth - Terminal width in columns
+ * @returns Number of physical lines
+ *
+ * Example:
+ *   termWidth = 80, startCol = 10 (after "compilr> ")
+ *   text = "hello" (5 chars) → 1 line (10 + 5 = 15 < 80)
+ *   text = "x".repeat(75) → 2 lines (10 + 75 = 85, wraps)
+ */
+export function getPhysicalLineCountWithOffset(text, startCol, termWidth) {
+    const visibleLength = getVisibleLength(text);
+    if (visibleLength === 0)
+        return 1;
+    const totalLen = startCol + visibleLength;
+    return Math.ceil(totalLen / termWidth) || 1;
+}
+/**
+ * Calculate total physical lines for an array of logical lines.
+ *
+ * @param lines - Array of line strings (may contain ANSI codes)
+ * @param termWidth - Terminal width in columns
+ * @returns Total number of physical lines
+ */
+export function getTotalPhysicalLines(lines, termWidth) {
+    let total = 0;
+    for (const line of lines) {
+        total += getPhysicalLineCount(line, termWidth);
+    }
+    return total;
+}
+/**
+ * Get detailed height information for each line.
+ * Useful for debugging and understanding exactly how lines wrap.
+ *
+ * @param lines - Array of line strings
+ * @param termWidth - Terminal width
+ * @returns Array of { visibleLength, physicalLines } for each line
+ */
+export function getLineHeightDetails(lines, termWidth) {
+    return lines.map(line => {
+        const visibleLength = getVisibleLength(line);
+        const physicalLines = visibleLength === 0 ? 1 : Math.ceil(visibleLength / termWidth);
+        return { visibleLength, physicalLines };
+    });
+}
+// =============================================================================
+// Truncation
+// =============================================================================
+/**
+ * Truncate a string to a maximum visible length, preserving ANSI codes.
+ * Adds ellipsis if truncated.
+ *
+ * @param str - String to truncate (may contain ANSI codes)
+ * @param maxLen - Maximum visible length
+ * @returns Truncated string with ellipsis if needed
+ */
+export function truncateWithAnsi(str, maxLen) {
+    const visible = stripAnsi(str);
+    if (visible.length <= maxLen)
+        return str;
+    // We need to find the position in the original string that corresponds
+    // to maxLen-1 visible characters (leaving room for ellipsis)
+    let visibleCount = 0;
+    let i = 0;
+    while (i < str.length && visibleCount < maxLen - 1) {
+        // Check if we're at an ANSI escape sequence
+        if (str[i] === '\x1b' && str[i + 1] === '[') {
+            // Skip the entire ANSI sequence
+            // eslint-disable-next-line no-control-regex
+            const match = str.slice(i).match(/^\x1b\[[0-9;]*[A-Za-z]/);
+            if (match) {
+                i += match[0].length;
+                continue;
+            }
+        }
+        visibleCount++;
+        i++;
+    }
+    // Include any trailing ANSI reset codes
+    const remainder = str.slice(i);
+    // eslint-disable-next-line no-control-regex
+    const resetMatch = remainder.match(/^(\x1b\[[0-9;]*m)*/);
+    const resets = resetMatch ? resetMatch[0] : '';
+    return str.slice(0, i) + '…' + resets;
+}