@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/overlay/impl/init-setup-overlay-v2.js

@@ -0,0 +1,97 @@
+/**
+ * Init Setup Overlay V2 (Placeholder)
+ *
+ * Shows current CLI configuration status and directs users to /config.
+ * This is a placeholder - full setup wizard will be implemented in a future session.
+ *
+ * Displays:
+ * - API key status for each provider
+ * - Current settings summary
+ * - Instructions for configuration
+ */
+import { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
+import { renderBorder } from '../../base/index.js';
+import { hasApiKey, getMaskedKey, isKeyFromEnv } from '../../../utils/credentials.js';
+import { getSettings } from '../../../settings/index.js';
+import * as terminal from '../../terminal.js';
+// =============================================================================
+// Init Setup Overlay V2
+// =============================================================================
+export class InitSetupOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'init-setup-overlay-v2';
+    constructor() {
+        super({});
+        this.minHeight = 24;
+    }
+    renderContent(_context) {
+        const s = this.getStyles();
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const settings = getSettings();
+        // Header
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('CLI SETUP STATUS')}`);
+        lines.push(border);
+        lines.push('');
+        // API Keys Section
+        lines.push(`  ${s.secondary('API Keys')}`);
+        lines.push('');
+        const providers = [
+            { key: 'anthropic', name: 'Anthropic (Claude)', envVar: 'ANTHROPIC_API_KEY' },
+            { key: 'openai', name: 'OpenAI', envVar: 'OPENAI_API_KEY' },
+            { key: 'google', name: 'Google AI (Gemini)', envVar: 'GOOGLE_API_KEY' },
+        ];
+        for (const provider of providers) {
+            const has = hasApiKey(provider.key);
+            const fromEnv = isKeyFromEnv(provider.key);
+            const masked = getMaskedKey(provider.key);
+            let status;
+            if (has) {
+                if (fromEnv) {
+                    status = s.success(`✓ From env (${provider.envVar})`);
+                }
+                else {
+                    status = s.success(`✓ Configured (${masked ?? '***'})`);
+                }
+            }
+            else {
+                status = s.muted('○ Not configured');
+            }
+            lines.push(`    ${provider.name.padEnd(22)} ${status}`);
+        }
+        // Ollama (always available)
+        lines.push(`    ${'Ollama (Local)'.padEnd(22)} ${s.muted('○ No key needed')}`);
+        lines.push('');
+        // Current Settings Summary
+        lines.push(`  ${s.secondary('Current Settings')}`);
+        lines.push('');
+        lines.push(`    Default provider:    ${s.primary(settings.defaultProvider)}`);
+        lines.push(`    Default model:       ${s.primary(settings.defaultModel ?? 'auto')}`);
+        lines.push(`    Startup mode:        ${s.primary(settings.startupMode)}`);
+        lines.push(`    Project auto-open:   ${s.primary(settings.projectStartup)}`);
+        lines.push('');
+        // Instructions
+        lines.push(border);
+        lines.push('');
+        lines.push(`  ${s.secondary('To configure the CLI:')}`);
+        lines.push('');
+        lines.push(`    ${s.primary('/config')}     Open settings overlay`);
+        lines.push(`    ${s.primary('/keys')}       Manage API keys`);
+        lines.push(`    ${s.primary('/theme')}      Change color theme`);
+        lines.push(`    ${s.primary('/model')}      Select AI model`);
+        lines.push('');
+        lines.push(s.muted('  Settings are stored in ~/.compilr-dev/'));
+        lines.push('');
+        // Footer
+        lines.push(border);
+        lines.push(s.muted('  Press any key to close'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(_key) {
+        // Any key closes
+        return this.close({ dismissed: true });
+    }
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Iteration Limit Overlay V2
+ *
+ * Modal overlay shown when the agent reaches its iteration limit.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+export type IterationLimitResultV2 = {
+    continue: true;
+    additionalIterations: number;
+} | {
+    continue: false;
+};
+export interface IterationLimitOptionsV2 {
+    iteration: number;
+    maxIterations: number;
+    toolCallCount: number;
+}
+interface IterationLimitState {
+    selectedIndex: number;
+}
+export declare class IterationLimitOverlayV2 extends BaseOverlayV2<IterationLimitState, IterationLimitResultV2> {
+    readonly type: "inline";
+    readonly id = "iteration-limit-overlay-v2";
+    private readonly options;
+    constructor(options: IterationLimitOptionsV2);
+    protected renderContent(context: RenderContext): string[];
+    handleKey(key: KeyEvent): OverlayAction<IterationLimitResultV2>;
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result: IterationLimitResultV2): string | null;
+}
+export {};

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

@@ -0,0 +1,105 @@
+/**
+ * Iteration Limit Overlay V2
+ *
+ * Modal overlay shown when the agent reaches its iteration limit.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ */
+import chalk from 'chalk';
+import { BaseOverlayV2, renderBorder } from '../../base/index.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
+// =============================================================================
+export class IterationLimitOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'iteration-limit-overlay-v2';
+    options;
+    constructor(options) {
+        super({
+            selectedIndex: 0, // Default to "Yes, continue (+10)"
+        });
+        this.options = options;
+        this.minHeight = 14; // Prevent jitter
+    }
+    renderContent(context) {
+        const s = context.styles;
+        const lines = [];
+        const cols = context.width;
+        const border = renderBorder(cols, s);
+        // 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(' Up/Down Navigate | Enter Select | 1/2/n Quick select'));
+        // Bottom border
+        lines.push(border);
+        return lines;
+    }
+    handleKey(key) {
+        // Ctrl+C or Escape = stop
+        if ((key.ctrl && key.name === 'c') || key.name === 'escape') {
+            return this.close({ continue: false });
+        }
+        // Quick keys
+        if (key.char === '1') {
+            return this.close({ continue: true, additionalIterations: 10 });
+        }
+        if (key.char === '2') {
+            return this.close({ continue: true, additionalIterations: 20 });
+        }
+        if (key.char?.toLowerCase() === 'n') {
+            return this.close({ continue: false });
+        }
+        // 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(OPTIONS.length - 1, this.state.selectedIndex + 1);
+            return this.rerender();
+        }
+        if (key.name === 'return') {
+            return this.close(OPTIONS[this.state.selectedIndex].result);
+        }
+        return this.noAction();
+    }
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result) {
+        const s = this.getStyles();
+        if (result.continue) {
+            return s.muted('Iteration limit: ') + s.success(`Continuing (+${String(result.additionalIterations)})`);
+        }
+        return s.muted('Iteration limit: ') + s.error('Stopped');
+    }
+}

package/dist/ui/overlay/impl/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 '../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/overlay/impl/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);
+        }
+    }
+}

package/dist/ui/overlay/impl/mascot-overlay-v2.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Mascot Overlay V2
+ *
+ * Mascot selection overlay using the new Overlay interface.
+ * Shows all mascot expressions with live preview.
+ *
+ * Features:
+ * - All mascot expressions
+ * - Live preview
+ * - Persists selection to settings
+ * - Works with TerminalUI's overlay management
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import { type MascotSetting } from '../../mascot/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../index.js';
+export interface MascotOverlayV2Options {
+    /** Current mascot setting (for highlighting current selection) */
+    currentMascot?: MascotSetting;
+}
+export interface MascotOverlayV2Result {
+    /** Selected mascot (if changed) */
+    mascotChanged?: MascotSetting;
+}
+interface MascotState {
+    /** Selected mascot index */
+    selectedIndex: number;
+    /** Current mascot for checkmark display */
+    currentMascot: MascotSetting;
+}
+/**
+ * Mascot overlay using the new Overlay interface.
+ * Displays mascot options with live preview.
+ */
+export declare class MascotOverlayV2 extends BaseOverlayV2<MascotState, MascotOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "mascot-overlay-v2";
+    constructor(options?: MascotOverlayV2Options);
+    protected renderContent(context: RenderContext): string[];
+    handleKey(key: KeyEvent): OverlayAction<MascotOverlayV2Result>;
+}
+export {};