@compilr-dev/cli 0.5.0 → 0.5.2

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

@@ -12,9 +12,8 @@
  */
 import chalk from 'chalk';
 import * as terminal from '../../terminal.js';
-import { getHelpCommands, getCommandByIndex } from '../../../commands.js';
 import { getCustomCommandRegistry } from '../../../commands/index.js';
-import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isClose, renderBorder, wrapText, } from '../../base/index.js';
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isClose, renderBorder, wrapText, truncateAnsi, } from '../../base/index.js';
 // =============================================================================
 // Constants
 // =============================================================================
@@ -34,18 +33,20 @@ const TABS = [
 class CommandDetailScreen extends BaseScreen {
     item;
     styles;
-    constructor(item, styles) {
+    getCommand;
+    constructor(item, styles, getCommand) {
         super();
         this.item = item;
         this.styles = styles;
+        this.getCommand = getCommand;
     }
     render() {
         const s = this.styles;
         const cols = terminal.getTerminalWidth();
         const maxLineWidth = cols - 2;
         const border = renderBorder(cols, s);
-        const cmd = this.item.commandIndex !== undefined
-            ? getCommandByIndex(this.item.commandIndex)
+        const cmd = this.item.commandName
+            ? this.getCommand(this.item.commandName)
             : null;
         const lines = [];
         lines.push(border);
@@ -58,36 +59,12 @@ class CommandDetailScreen extends BaseScreen {
             lines.push(border);
             return lines;
         }
-        // Helper to truncate
-        const truncate = (line, max = maxLineWidth) => {
-            // eslint-disable-next-line no-control-regex
-            const stripped = line.replace(/\x1b\[[0-9;]*m/g, '');
-            if (stripped.length <= max)
-                return line;
-            let visibleLen = 0;
-            let cutIndex = 0;
-            for (let i = 0; i < line.length; i++) {
-                if (line[i] === '\x1b') {
-                    const end = line.indexOf('m', i);
-                    if (end !== -1) {
-                        i = end;
-                        continue;
-                    }
-                }
-                visibleLen++;
-                if (visibleLen >= max - 3) {
-                    cutIndex = i + 1;
-                    break;
-                }
-            }
-            return line.slice(0, cutIndex) + '...';
-        };
         // Command name
         lines.push(chalk.bold(` /${cmd.name}`));
         lines.push('');
         // Description
         lines.push(' ' + s.primary('DESCRIPTION'));
-        lines.push(truncate('   ' + cmd.description));
+        lines.push(truncateAnsi('   ' + cmd.description, maxLineWidth));
         lines.push('');
         // Details
         if (cmd.details) {
@@ -97,7 +74,7 @@ class CommandDetailScreen extends BaseScreen {
             let currentLine = '   ';
             for (const word of words) {
                 if (currentLine.length + word.length + 1 > maxWidth) {
-                    lines.push(truncate(currentLine));
+                    lines.push(truncateAnsi(currentLine, maxLineWidth));
                     currentLine = '   ' + word;
                 }
                 else {
@@ -105,14 +82,14 @@ class CommandDetailScreen extends BaseScreen {
                 }
             }
             if (currentLine.length > 3) {
-                lines.push(truncate(currentLine));
+                lines.push(truncateAnsi(currentLine, maxLineWidth));
             }
             lines.push('');
         }
         // Aliases
         if (cmd.aliases && cmd.aliases.length > 0) {
             lines.push(' ' + s.primary('ALIASES'));
-            lines.push(truncate('   ' + cmd.aliases.map((a) => `/${a}`).join(', ')));
+            lines.push(truncateAnsi('   ' + cmd.aliases.map((a) => `/${a}`).join(', '), maxLineWidth));
             lines.push('');
         }
         // Examples
@@ -122,10 +99,10 @@ class CommandDetailScreen extends BaseScreen {
                 if (example.description) {
                     const paddedCode = example.code.padEnd(22);
                     const exLine = `   ${s.muted(paddedCode)}${s.muted('·')} ${example.description}`;
-                    lines.push(truncate(exLine));
+                    lines.push(truncateAnsi(exLine, maxLineWidth));
                 }
                 else {
-                    lines.push(truncate('   ' + s.muted(example.code)));
+                    lines.push(truncateAnsi('   ' + s.muted(example.code), maxLineWidth));
                 }
             }
             lines.push('');
@@ -134,7 +111,7 @@ class CommandDetailScreen extends BaseScreen {
         if (cmd.interactions && cmd.interactions.length > 0) {
             lines.push(' ' + s.primary('INTERACTIONS'));
             for (const hint of cmd.interactions) {
-                lines.push(truncate('   ' + s.muted('• ' + hint)));
+                lines.push(truncateAnsi('   ' + s.muted('• ' + hint), maxLineWidth));
             }
             lines.push('');
         }
@@ -239,18 +216,18 @@ class CustomCommandDetailScreen extends BaseScreen {
 export class HelpOverlayV2 extends TabbedListOverlayV2 {
     type = 'inline';
     id = 'help-overlay-v2';
-    constructor() {
+    getCommandDetail;
+    constructor(options) {
         // Build unified items list
         const items = [];
         // Add built-in commands
-        const helpCommands = getHelpCommands();
-        for (let i = 0; i < helpCommands.length; i++) {
-            const cmd = helpCommands[i];
+        const helpCommands = options.getHelpCommands();
+        for (const cmd of helpCommands) {
             items.push({
                 name: cmd.name,
                 description: cmd.description,
                 type: 'builtin',
-                commandIndex: i,
+                commandName: cmd.name.startsWith('/') ? cmd.name.slice(1) : cmd.name,
             });
         }
         // Add custom commands
@@ -298,11 +275,12 @@ export class HelpOverlayV2 extends TabbedListOverlayV2 {
             emptyMessage: 'No commands available.',
             noResultsMessage: 'No commands match the search.',
         });
+        this.getCommandDetail = options.getCommand;
     }
     createDetailScreen(item) {
         const styles = this.getStyles();
         if (item.type === 'builtin') {
-            return new CommandDetailScreen(item, styles);
+            return new CommandDetailScreen(item, styles, this.getCommandDetail);
         }
         return new CustomCommandDetailScreen(item, styles);
     }

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

@@ -0,0 +1,63 @@
+/**
+ * MCP Overlay V2
+ *
+ * Shows connected MCP servers and their tools.
+ * Extends TabbedListOverlayV2 for consistent UI.
+ *
+ * Features:
+ * - Single tab (all servers)
+ * - Server list with status and tool count
+ * - Detail view with tool list
+ * - Restart/disconnect actions
+ * - Add server form (with hot-reload)
+ * - Empty state with config file instructions
+ */
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+import type { OverlayAction, KeyEvent, RenderContext } from '../types.js';
+import type { MCPManager, MCPClient, MCPToolDefinition, Agent } from '@compilr-dev/sdk';
+export interface MCPOverlayV2Result {
+    viewed: boolean;
+}
+interface MCPServerItem {
+    tabId: string;
+    name: string;
+    status: string;
+    transport: string;
+    transportDetail: string;
+    toolCount: number;
+    tools: MCPToolDefinition[];
+    client: MCPClient;
+}
+export declare class MCPOverlayV2 extends TabbedListOverlayV2<MCPServerItem, MCPOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "mcp-overlay-v2";
+    private readonly manager;
+    private readonly agent;
+    private readonly getManager;
+    private readonly projectRoot?;
+    private initialized;
+    private listMessage;
+    constructor(manager: MCPManager | null, agent: Agent | null, getManager: () => Promise<MCPManager>, projectRoot?: string);
+    /**
+     * Load server data on first render.
+     */
+    private loadItems;
+    /**
+     * Override render to load items on first call and handle empty state.
+     */
+    render(context: RenderContext): {
+        lines: string[];
+        minHeight?: number;
+    };
+    /**
+     * Render helpful empty state with config file instructions.
+     */
+    private renderEmptyState;
+    /**
+     * Handle custom keys (a/r/d) on the list screen.
+     * Only intercepts when the screen stack is at the root list screen.
+     */
+    handleKey(key: KeyEvent): OverlayAction<MCPOverlayV2Result>;
+    protected createDetailScreen(item: MCPServerItem): BaseScreen | null;
+}
+export {};