@compilr-dev/cli 0.4.0 → 0.5.1

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/login-overlay-v2.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Login Overlay V2
+ *
+ * Branded login overlay that handles the device flow within the TerminalUI overlay system.
+ * Replaces the raw console.log login flow in index.ts with a proper overlay experience.
+ *
+ * Screens:
+ *   1. Welcome - Logo/mascot, "Press Enter to log in"
+ *   2. Waiting - Device code + URL, auto-polls for authorization
+ *   3. Success - "Logged in as user@email.com", auto-closes after 1.5s
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+type LoginScreen = 'welcome' | 'waiting' | 'success' | 'error';
+interface LoginState {
+    screen: LoginScreen;
+    userCode: string | null;
+    authUrl: string | null;
+    email: string | null;
+    errorMessage: string | null;
+    statusMessage: string;
+    version: string;
+}
+export interface LoginOverlayResult {
+    success: boolean;
+    email?: string;
+}
+export declare class LoginOverlayV2 extends BaseOverlayV2<LoginState, LoginOverlayResult> {
+    readonly type: "inline";
+    readonly id = "login-overlay-v2";
+    private abortController;
+    private loginPromise;
+    constructor(version?: string);
+    onMount(): void;
+    onUnmount(): void;
+    protected renderContent(context: RenderContext): string[];
+    private renderWelcomeScreen;
+    private renderWaitingScreen;
+    private renderSuccessScreen;
+    private renderErrorScreen;
+    handleKey(key: KeyEvent): OverlayAction<LoginOverlayResult>;
+    private handleWelcomeKey;
+    private handleWaitingKey;
+    private handleSuccessKey;
+    private handleErrorKey;
+    private startDeviceFlow;
+    getCloseSummary(_result: LoginOverlayResult): string | null;
+}
+export {};

package/dist/ui/overlay/impl/login-overlay-v2.js

@@ -0,0 +1,277 @@
+/**
+ * Login Overlay V2
+ *
+ * Branded login overlay that handles the device flow within the TerminalUI overlay system.
+ * Replaces the raw console.log login flow in index.ts with a proper overlay experience.
+ *
+ * Screens:
+ *   1. Welcome - Logo/mascot, "Press Enter to log in"
+ *   2. Waiting - Device code + URL, auto-polls for authorization
+ *   3. Success - "Logged in as user@email.com", auto-closes after 1.5s
+ */
+import { BaseOverlayV2, renderBorder } from '../../base/index.js';
+import { renderMascotWithLogo } from '../../mascot/renderer.js';
+import { getAuthManager } from '../../../auth/index.js';
+import { getAuthorizationUrl } from '../../../auth/api-client.js';
+import { openBrowser } from '../../../utils/open-browser.js';
+import { getSettings } from '../../../settings/index.js';
+import * as terminal from '../../terminal.js';
+// =============================================================================
+// Login Overlay V2
+// =============================================================================
+export class LoginOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'login-overlay-v2';
+    abortController;
+    loginPromise = null;
+    constructor(version) {
+        super({
+            screen: 'welcome',
+            userCode: null,
+            authUrl: null,
+            email: null,
+            errorMessage: null,
+            statusMessage: '',
+            version: version ?? '0.5.0',
+        });
+        this.abortController = new AbortController();
+        this.minHeight = 18;
+    }
+    // ===========================================================================
+    // Lifecycle
+    // ===========================================================================
+    onMount() {
+        // Clear any pre-login console output (agent debug lines, COMPILR.md loading, etc.)
+        terminal.clearScreen();
+    }
+    onUnmount() {
+        this.abortController.abort();
+    }
+    // ===========================================================================
+    // Rendering
+    // ===========================================================================
+    renderContent(context) {
+        const s = context.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        switch (this.state.screen) {
+            case 'welcome':
+                lines.push(...this.renderWelcomeScreen(s, border));
+                break;
+            case 'waiting':
+                lines.push(...this.renderWaitingScreen(s, border));
+                break;
+            case 'success':
+                lines.push(...this.renderSuccessScreen(s, border));
+                break;
+            case 'error':
+                lines.push(...this.renderErrorScreen(s, border));
+                break;
+        }
+        return lines;
+    }
+    renderWelcomeScreen(s, border) {
+        const lines = [];
+        const settings = getSettings();
+        // Logo with mascot
+        const logoLines = renderMascotWithLogo(settings.mascot, this.state.version, null);
+        for (const line of logoLines) {
+            lines.push(line);
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push('');
+        lines.push(`  ${s.primaryBold('Welcome to compilr')}`);
+        lines.push('');
+        lines.push(`  ${s.foreground('Please log in to continue.')}`);
+        lines.push(`  ${s.muted('No account? Sign up at:')} ${s.primary('https://compilr.dev/signup')}`);
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  Press Enter to open browser | Esc to exit'));
+        return lines;
+    }
+    renderWaitingScreen(s, border) {
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Log in to compilr')}`);
+        lines.push(border);
+        lines.push('');
+        lines.push(`  ${s.foreground('Open this URL in your browser:')}`);
+        lines.push('');
+        if (this.state.authUrl) {
+            lines.push(`  ${s.primary(this.state.authUrl)}`);
+        }
+        lines.push('');
+        if (this.state.userCode) {
+            lines.push(`  ${s.foreground('Your code:')}  ${s.primaryBold(this.state.userCode)}`);
+        }
+        lines.push('');
+        lines.push(`  ${s.muted(this.state.statusMessage || 'Waiting for authorization...')}`);
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  Esc to cancel'));
+        return lines;
+    }
+    renderSuccessScreen(s, border) {
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Log in to compilr')}`);
+        lines.push(border);
+        lines.push('');
+        lines.push(`  ${s.success('Logged in as')} ${s.primaryBold(this.state.email ?? '')}`);
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  Press Enter to continue'));
+        return lines;
+    }
+    renderErrorScreen(s, border) {
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Log in to compilr')}`);
+        lines.push(border);
+        lines.push('');
+        lines.push(`  ${s.error(this.state.errorMessage ?? 'Login failed')}`);
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  Enter to retry | Esc to exit'));
+        return lines;
+    }
+    // ===========================================================================
+    // Key Handling
+    // ===========================================================================
+    handleKey(key) {
+        // Ctrl+C always cancels
+        if (this.isInterruptKey(key)) {
+            this.abortController.abort();
+            return this.close({ success: false });
+        }
+        switch (this.state.screen) {
+            case 'welcome':
+                return this.handleWelcomeKey(key);
+            case 'waiting':
+                return this.handleWaitingKey(key);
+            case 'success':
+                return this.handleSuccessKey(key);
+            case 'error':
+                return this.handleErrorKey(key);
+            default:
+                return this.noAction();
+        }
+    }
+    handleWelcomeKey(key) {
+        if (key.name === 'escape') {
+            return this.close({ success: false });
+        }
+        if (this.isEnterKey(key)) {
+            // Start the device flow
+            void this.startDeviceFlow();
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    handleWaitingKey(key) {
+        if (key.name === 'escape') {
+            this.abortController.abort();
+            return this.close({ success: false });
+        }
+        return this.noAction();
+    }
+    handleSuccessKey(key) {
+        if (this.isEnterKey(key) || key.name === 'escape') {
+            return this.close({ success: true, email: this.state.email ?? undefined });
+        }
+        return this.noAction();
+    }
+    handleErrorKey(key) {
+        if (key.name === 'escape') {
+            return this.close({ success: false });
+        }
+        if (this.isEnterKey(key)) {
+            // Retry - reset and start fresh
+            this.abortController = new AbortController();
+            this.state.screen = 'welcome';
+            this.state.errorMessage = null;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Device Flow
+    // ===========================================================================
+    async startDeviceFlow() {
+        this.state.screen = 'waiting';
+        this.state.statusMessage = 'Starting login...';
+        this.requestRender();
+        const auth = getAuthManager();
+        this.loginPromise = auth.loginWithDeviceFlow({
+            onCodeReady: (userCode, _verificationUrl) => {
+                // Use client-side URL (respects COMPILR_WEB_URL env var)
+                const url = getAuthorizationUrl(userCode);
+                this.state.userCode = userCode;
+                this.state.authUrl = url;
+                this.state.statusMessage = 'Waiting for authorization...';
+                this.requestRender();
+            },
+            onStatusUpdate: (status) => {
+                switch (status) {
+                    case 'polling':
+                        // Silent - overlay already shows "Waiting..."
+                        break;
+                    case 'authorized':
+                        this.state.statusMessage = 'Authorization received!';
+                        this.requestRender();
+                        break;
+                    case 'expired':
+                        this.state.statusMessage = 'Authorization expired.';
+                        this.requestRender();
+                        break;
+                    case 'denied':
+                        this.state.statusMessage = 'Authorization denied.';
+                        this.requestRender();
+                        break;
+                }
+            },
+            onOpenBrowser: async (url) => {
+                const opened = await openBrowser(url);
+                if (opened) {
+                    this.state.statusMessage = 'Browser opened. Waiting for authorization...';
+                }
+                else {
+                    this.state.statusMessage = 'Please open the URL above in your browser.';
+                }
+                this.requestRender();
+                return opened;
+            },
+        }, this.abortController.signal);
+        try {
+            const result = await this.loginPromise;
+            if (result.success && result.user) {
+                this.state.screen = 'success';
+                this.state.email = result.user.email;
+                this.requestRender();
+            }
+            else {
+                this.state.screen = 'error';
+                this.state.errorMessage = result.error ?? 'Login failed';
+                this.requestRender();
+            }
+        }
+        catch {
+            // Aborted or network error
+            if (!this.abortController.signal.aborted) {
+                this.state.screen = 'error';
+                this.state.errorMessage = 'Login failed. Please try again.';
+                this.requestRender();
+            }
+        }
+    }
+    // ===========================================================================
+    // Close Summary
+    // ===========================================================================
+    getCloseSummary(_result) {
+        // No summary — the overlay already shows success/error on screen,
+        // and printing here causes a flash before the next overlay opens.
+        return null;
+    }
+}

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 {};