@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/iteration-limit-overlay-v2.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Iteration Limit Overlay (Refactored)
+ *
+ * Modal overlay shown when the agent reaches its iteration limit.
+ * Uses InlineOverlay base class for consistent lifecycle management.
+ */
+export type IterationLimitResult = {
+    continue: true;
+    additionalIterations: number;
+} | {
+    continue: false;
+};
+export interface IterationLimitOverlayOptions {
+    iteration: number;
+    maxIterations: number;
+    toolCallCount: number;
+}
+/**
+ * Show the iteration limit overlay
+ */
+export declare function showIterationLimitOverlay(options: IterationLimitOverlayOptions): Promise<IterationLimitResult>;

package/dist/ui/iteration-limit-overlay-v2.js

@@ -0,0 +1,114 @@
+/**
+ * Iteration Limit Overlay (Refactored)
+ *
+ * Modal overlay shown when the agent reaches its iteration limit.
+ * Uses InlineOverlay base class for consistent lifecycle management.
+ */
+import chalk from 'chalk';
+import { getStyles } from '../themes/index.js';
+import { InlineOverlay } from './base/inline-overlay.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const OPTIONS = [
+    { label: 'Yes, continue (+10 iterations)', key: '1', result: { continue: true, additionalIterations: 10 } },
+    { label: 'Yes, continue (+20 iterations)', key: '2', result: { continue: true, additionalIterations: 20 } },
+    { label: 'No, stop here', key: 'n', result: { continue: false } },
+];
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+class IterationLimitOverlayImpl extends InlineOverlay {
+    options;
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    getInitialState() {
+        return {
+            selectedIndex: 0, // Default to "Yes, continue (+10)"
+        };
+    }
+    render() {
+        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('Iteration Limit Reached'));
+        lines.push('');
+        // Stats
+        lines.push('  Iterations: ' + s.primary(String(this.options.iteration)) + ' / ' + s.muted(String(this.options.maxIterations)));
+        lines.push('  Tool calls: ' + s.primary(String(this.options.toolCallCount)));
+        lines.push('');
+        lines.push('  ' + s.muted('The agent has reached its iteration limit.'));
+        lines.push('  ' + s.muted('Would you like to continue?'));
+        lines.push('');
+        // Options
+        for (let i = 0; i < OPTIONS.length; i++) {
+            const isCursor = this.state.selectedIndex === i;
+            const prefix = isCursor ? ' ❯ ' : '   ';
+            const key = `[${OPTIONS[i].key}] `;
+            if (isCursor) {
+                lines.push(s.primary(prefix + key + OPTIONS[i].label));
+            }
+            else {
+                lines.push(s.muted(prefix + key + OPTIONS[i].label));
+            }
+        }
+        // Footer
+        lines.push('');
+        lines.push(s.muted(' ↑↓ Navigate · Enter Select · 1/2/n Quick select'));
+        // Bottom border
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C or Escape = stop
+        if (this.isCtrlCKey(data) || this.isEscapeKey(data)) {
+            return { type: 'close', result: { continue: false } };
+        }
+        // Quick keys
+        const key = data.toString();
+        if (key === '1') {
+            return { type: 'close', result: { continue: true, additionalIterations: 10 } };
+        }
+        if (key === '2') {
+            return { type: 'close', result: { continue: true, additionalIterations: 20 } };
+        }
+        if (key.toLowerCase() === 'n') {
+            return { type: 'close', result: { continue: false } };
+        }
+        // Arrow navigation
+        if (this.isUpArrowKey(data)) {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return { type: 'continue' };
+        }
+        if (this.isDownArrowKey(data)) {
+            this.state.selectedIndex = Math.min(OPTIONS.length - 1, this.state.selectedIndex + 1);
+            return { type: 'continue' };
+        }
+        if (this.isEnterKey(data)) {
+            return { type: 'close', result: OPTIONS[this.state.selectedIndex].result };
+        }
+        return { type: 'continue' };
+    }
+    getCleanupSummary(result) {
+        const s = getStyles();
+        if (result.continue) {
+            return s.muted('Iteration limit: ') + s.success(`Continuing (+${String(result.additionalIterations)})`);
+        }
+        return s.muted('Iteration limit: ') + s.error('Stopped');
+    }
+}
+// =============================================================================
+// Main Export
+// =============================================================================
+/**
+ * Show the iteration limit overlay
+ */
+export async function showIterationLimitOverlay(options) {
+    const overlay = new IterationLimitOverlayImpl(options);
+    return overlay.show();
+}

package/dist/ui/iteration-limit-overlay.d.ts

@@ -1,8 +1,8 @@
 /**
- * Iteration Limit Overlay
+ * Iteration Limit Overlay (Refactored)
  *
  * Modal overlay shown when the agent reaches its iteration limit.
- * Asks the user if they want to continue or stop execution.
+ * Uses InlineOverlay base class for consistent lifecycle management.
  */
 export type IterationLimitResult = {
     continue: true;

package/dist/ui/iteration-limit-overlay.js

@@ -1,61 +1,106 @@
 /**
- * Iteration Limit Overlay
+ * Iteration Limit Overlay (Refactored)
  *
  * Modal overlay shown when the agent reaches its iteration limit.
- * Asks the user if they want to continue or stop execution.
+ * Uses InlineOverlay base class for consistent lifecycle management.
  */
 import chalk from 'chalk';
-import * as terminal from './terminal.js';
 import { getStyles } from '../themes/index.js';
+import { InlineOverlay } from './base/inline-overlay.js';
 // =============================================================================
-// Rendering
+// Constants
 // =============================================================================
-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);
+const OPTIONS = [
+    { label: 'Yes, continue (+10 iterations)', key: '1', result: { continue: true, additionalIterations: 10 } },
+    { label: 'Yes, continue (+20 iterations)', key: '2', result: { continue: true, additionalIterations: 20 } },
+    { label: 'No, stop here', key: 'n', result: { continue: false } },
+];
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+class IterationLimitOverlayImpl extends InlineOverlay {
+    options;
+    constructor(options) {
+        super();
+        this.options = options;
     }
-    // Header
-    lines.push(border);
-    lines.push(' ' + s.warning('⚠') + ' ' + chalk.bold('Iteration Limit Reached'));
-    lines.push('');
-    // Stats
-    lines.push('  Iterations: ' + s.primary(String(options.iteration)) + ' / ' + s.muted(String(options.maxIterations)));
-    lines.push('  Tool calls: ' + s.primary(String(options.toolCallCount)));
-    lines.push('');
-    lines.push('  ' + s.muted('The agent has reached its iteration limit.'));
-    lines.push('  ' + s.muted('Would you like to continue?'));
-    lines.push('');
-    // Options
-    const optionLabels = ['Yes, continue (+10 iterations)', 'Yes, continue (+20 iterations)', 'No, stop here'];
-    const optionKeys = ['1', '2', 'n'];
-    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]));
+    getInitialState() {
+        return {
+            selectedIndex: 0, // Default to "Yes, continue (+10)"
+        };
+    }
+    render() {
+        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('Iteration Limit Reached'));
+        lines.push('');
+        // Stats
+        lines.push('  Iterations: ' + s.primary(String(this.options.iteration)) + ' / ' + s.muted(String(this.options.maxIterations)));
+        lines.push('  Tool calls: ' + s.primary(String(this.options.toolCallCount)));
+        lines.push('');
+        lines.push('  ' + s.muted('The agent has reached its iteration limit.'));
+        lines.push('  ' + s.muted('Would you like to continue?'));
+        lines.push('');
+        // Options
+        for (let i = 0; i < OPTIONS.length; i++) {
+            const isCursor = this.state.selectedIndex === i;
+            const prefix = isCursor ? ' ❯ ' : '   ';
+            const key = `[${OPTIONS[i].key}] `;
+            if (isCursor) {
+                lines.push(s.primary(prefix + key + OPTIONS[i].label));
+            }
+            else {
+                lines.push(s.muted(prefix + key + OPTIONS[i].label));
+            }
+        }
+        // Footer
+        lines.push('');
+        lines.push(s.muted(' ↑↓ Navigate · Enter Select · 1/2/n Quick select'));
+        // Bottom border
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C or Escape = stop
+        if (this.isCtrlCKey(data) || this.isEscapeKey(data)) {
+            return { type: 'close', result: { continue: false } };
+        }
+        // Quick keys
+        const key = data.toString();
+        if (key === '1') {
+            return { type: 'close', result: { continue: true, additionalIterations: 10 } };
+        }
+        if (key === '2') {
+            return { type: 'close', result: { continue: true, additionalIterations: 20 } };
+        }
+        if (key.toLowerCase() === 'n') {
+            return { type: 'close', result: { continue: false } };
+        }
+        // Arrow navigation
+        if (this.isUpArrowKey(data)) {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return { type: 'continue' };
         }
-        else {
-            lines.push(s.muted(prefix + key + optionLabels[i]));
+        if (this.isDownArrowKey(data)) {
+            this.state.selectedIndex = Math.min(OPTIONS.length - 1, this.state.selectedIndex + 1);
+            return { type: 'continue' };
         }
+        if (this.isEnterKey(data)) {
+            return { type: 'close', result: OPTIONS[this.state.selectedIndex].result };
+        }
+        return { type: 'continue' };
     }
-    // Footer
-    lines.push('');
-    lines.push(s.muted(' ↑↓ Navigate · Enter Select · 1/2/n Quick select'));
-    // Bottom border
-    lines.push(border);
-    // Pad with empty lines to maintain consistent height
-    while (lines.length < targetLineCount) {
-        lines.push('');
+    getCleanupSummary(result) {
+        const s = getStyles();
+        if (result.continue) {
+            return s.muted('Iteration limit: ') + s.success(`Continuing (+${String(result.additionalIterations)})`);
+        }
+        return s.muted('Iteration limit: ') + s.error('Stopped');
     }
-    // Render all lines
-    terminal.write(lines.join('\n'));
-    return lines.length;
 }
 // =============================================================================
 // Main Export
@@ -64,87 +109,6 @@ function render(options, state, previousLineCount = 0, targetLineCount = 0) {
  * Show the iteration limit overlay
  */
 export async function showIterationLimitOverlay(options) {
-    const state = {
-        selectedIndex: 0, // Default to "Yes, continue (+10)"
-    };
-    let lineCount = 0;
-    let maxLineCount = 0;
-    // 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();
-            if (result.continue) {
-                terminal.writeLine(s.muted(`Iteration limit: `) + s.success(`Continuing (+${String(result.additionalIterations)})`));
-            }
-            else {
-                terminal.writeLine(s.muted(`Iteration limit: `) + s.error(`Stopped`));
-            }
-            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 = stop
-            if (isCtrlC || isEscape) {
-                cleanup({ continue: false });
-                return;
-            }
-            // Quick keys
-            const key = data.toString();
-            if (key === '1') {
-                cleanup({ continue: true, additionalIterations: 10 });
-                return;
-            }
-            if (key === '2') {
-                cleanup({ continue: true, additionalIterations: 20 });
-                return;
-            }
-            if (key.toLowerCase() === 'n') {
-                cleanup({ continue: false });
-                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
-                if (state.selectedIndex === 0) {
-                    cleanup({ continue: true, additionalIterations: 10 });
-                }
-                else if (state.selectedIndex === 1) {
-                    cleanup({ continue: true, additionalIterations: 20 });
-                }
-                else {
-                    cleanup({ continue: false });
-                }
-                return;
-            }
-            // Re-render
-            lineCount = render(options, state, maxLineCount, maxLineCount);
-            maxLineCount = Math.max(maxLineCount, lineCount);
-        };
-        process.stdin.on('data', handleData);
-    });
+    const overlay = new IterationLimitOverlayImpl(options);
+    return overlay.show();
 }

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

@@ -0,0 +1,41 @@
+/**
+ * Keys Overlay V2
+ *
+ * API key management overlay using the new Overlay interface.
+ * Shows status of all providers and allows setting/deleting keys.
+ *
+ * Features:
+ * - List all providers with key status
+ * - Set new API keys
+ * - Delete stored keys
+ * - Works with TerminalUI's overlay management
+ */
+import { BaseOverlayV2 } from './base/index.js';
+import { getAllProviderStatuses } from '../utils/credentials.js';
+import type { RenderContext, OverlayAction, KeyEvent } from './overlay/index.js';
+export interface KeysOverlayV2Result {
+    /** Whether any keys were changed */
+    changed: boolean;
+}
+interface KeysState {
+    selectedIndex: number;
+    changed: boolean;
+    providers: ReturnType<typeof getAllProviderStatuses>;
+}
+/**
+ * Keys overlay using the new Overlay interface.
+ * Manages API keys for LLM providers.
+ */
+export declare class KeysOverlayV2 extends BaseOverlayV2<KeysState, KeysOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "keys-overlay-v2";
+    private readonly screenStack;
+    constructor();
+    protected renderContent(_context: RenderContext): string[];
+    render(context: RenderContext): {
+        lines: string[];
+        minHeight?: number;
+    };
+    handleKey(key: KeyEvent): OverlayAction<KeysOverlayV2Result>;
+}
+export {};

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

@@ -0,0 +1,248 @@
+/**
+ * Keys Overlay V2
+ *
+ * API key management overlay using the new Overlay interface.
+ * Shows status of all providers and allows setting/deleting keys.
+ *
+ * Features:
+ * - List all providers with key status
+ * - Set new API keys
+ * - Delete stored keys
+ * - Works with TerminalUI's overlay management
+ */
+import * as terminal from './terminal.js';
+import { BaseOverlayV2, BaseScreen, ScreenStack, stay, pushScreen, popScreen, closeOverlay, isEscape, isEnter, isCtrlC, isClose, isNavigateUp, isNavigateDown, isD, renderBorder, } from './base/index.js';
+import { InputFeature } from './features/index.js';
+import { getAllProviderStatuses, setApiKey, deleteApiKey, } from '../utils/credentials.js';
+// =============================================================================
+// Screens
+// =============================================================================
+/**
+ * List screen - shows all providers with their key status
+ */
+class ListScreen extends BaseScreen {
+    state;
+    getStyles;
+    getWidth;
+    constructor(state, getStyles, getWidth) {
+        super();
+        this.state = state;
+        this.getStyles = getStyles;
+        this.getWidth = getWidth;
+    }
+    render() {
+        const s = this.getStyles();
+        const cols = this.getWidth();
+        const border = renderBorder(cols, s);
+        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 ? s.primary(' > ') : '   ';
+            // Status indicator
+            let status;
+            if (p.provider === 'ollama') {
+                status = s.secondary('Local (no key needed)');
+            }
+            else if (p.hasKey) {
+                const source = p.fromEnv ? s.muted(' (env)') : '';
+                status = s.success(`● ${p.masked ?? '***'}`) + source;
+            }
+            else {
+                status = s.warning('○ Not set');
+            }
+            // Provider name
+            const name = isCursor ? s.primary(p.name.padEnd(18)) : s.muted(p.name.padEnd(18));
+            lines.push(`${prefix}${name} ${status}`);
+        }
+        // Footer
+        lines.push('');
+        lines.push(border);
+        lines.push(`  ${s.muted('up/down/jk Navigate . Enter Edit . d Delete . q/Esc Close')}`);
+        lines.push(border);
+        return lines;
+    }
+    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.getStyles, this.getWidth, 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
+ */
+class InputScreen extends BaseScreen {
+    state;
+    getStyles;
+    getWidth;
+    provider;
+    input;
+    constructor(state, getStyles, getWidth, provider) {
+        super();
+        this.state = state;
+        this.getStyles = getStyles;
+        this.getWidth = getWidth;
+        this.provider = provider;
+        this.input = new InputFeature({ placeholder: 'Paste or type your API key...' });
+    }
+    onEnter() {
+        terminal.showCursor();
+    }
+    onExit() {
+        terminal.hideCursor();
+    }
+    render() {
+        const s = this.getStyles();
+        const cols = this.getWidth();
+        const border = renderBorder(cols, s);
+        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('');
+        }
+        // Footer
+        lines.push(border);
+        lines.push(`  ${s.muted('Enter Save . Esc Cancel')}`);
+        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);
+    }
+    getMinHeight() {
+        return 12;
+    }
+}
+// =============================================================================
+// Keys Overlay V2 Class
+// =============================================================================
+/**
+ * Keys overlay using the new Overlay interface.
+ * Manages API keys for LLM providers.
+ */
+export class KeysOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'keys-overlay-v2';
+    screenStack;
+    constructor() {
+        const providers = getAllProviderStatuses();
+        const initialState = {
+            selectedIndex: 0,
+            changed: false,
+            providers,
+        };
+        super(initialState);
+        this.minHeight = 14;
+        this.screenStack = new ScreenStack();
+        this.screenStack.push(new ListScreen(this.state, () => this.getStyles(), () => this.termWidth));
+    }
+    renderContent(_context) {
+        const screen = this.screenStack.current();
+        return screen?.render() ?? [];
+    }
+    render(context) {
+        this.styles = context.styles;
+        this.termWidth = context.width;
+        const lines = this.renderContent(context);
+        const screen = this.screenStack.current();
+        const screenMinHeight = screen?.getMinHeight?.() ?? 0;
+        const effectiveMinHeight = Math.max(this.minHeight, screenMinHeight);
+        return effectiveMinHeight > 0 ? { lines, minHeight: effectiveMinHeight } : { lines };
+    }
+    handleKey(key) {
+        const data = key.raw;
+        const screen = this.screenStack.current();
+        if (!screen) {
+            return this.close({ changed: this.state.changed });
+        }
+        const result = screen.handleKey(data);
+        switch (result.action) {
+            case 'stay':
+                return result.render ? this.rerender() : this.noAction();
+            case 'push':
+                this.screenStack.push(result.screen);
+                return this.rerender();
+            case 'pop':
+                this.screenStack.pop();
+                return this.rerender();
+            case 'close':
+                return this.close(result.result);
+        }
+    }
+}