@compilr-dev/cli 0.4.0

package/dist/ui/footer.js

@@ -0,0 +1,422 @@
+/**
+ * Footer Orchestrator
+ *
+ * Manages all persistent UI elements below the scrolling zone:
+ * - TodoZone (spinner + todo list)
+ * - Queued input display
+ * - InputPrompt
+ *
+ * Handles:
+ * - Coordinated rendering via single render loop
+ * - Event forwarding from InputPrompt
+ * - Clearing for scrolling output
+ * - State management for agent running/idle modes
+ */
+import { EventEmitter } from 'events';
+import { MODE_INFO } from './types.js';
+import { getStyles } from '../themes/index.js';
+import * as terminal from './terminal.js';
+import { TodoZone } from './todo-zone.js';
+import { InputPrompt, DEFAULT_COMMANDS } from './input-prompt-v2.js';
+// =============================================================================
+// Footer Class
+// =============================================================================
+export class Footer extends EventEmitter {
+    // Child components
+    todoZone;
+    inputPrompt;
+    // State
+    agentRunning = false;
+    mode;
+    lastRenderHeight = 0;
+    isRunning = false;
+    isPaused = false; // Prevents rendering even if callback is queued
+    cursorLineFromBottom = 0; // Track cursor position for clear()
+    // Render loop
+    renderInterval;
+    renderTimer = null;
+    needsRender = false;
+    constructor(options = {}) {
+        super();
+        this.renderInterval = options.renderInterval ?? 60; // 60ms = ~16fps
+        this.mode = options.initialMode ?? 'normal';
+        // Create child components
+        const s = getStyles();
+        this.todoZone = new TodoZone();
+        this.inputPrompt = new InputPrompt({
+            prompt: options.prompt ?? s.primaryBold('compilr>') + ' ',
+            showSeparators: options.showSeparators ?? true,
+            commands: DEFAULT_COMMANDS,
+        });
+        // Wire up TodoZone animation callback
+        this.todoZone.setAnimationCallback(() => {
+            this.needsRender = true;
+        });
+        // Wire up InputPrompt events
+        this.inputPrompt.on('submit', (input) => {
+            this.emit('submit', input);
+        });
+        this.inputPrompt.on('command', (command, args) => {
+            this.emit('command', command, args);
+        });
+        this.inputPrompt.on('cancel', () => {
+            this.emit('cancel');
+        });
+        this.inputPrompt.on('escape', () => {
+            this.emit('escape');
+        });
+        this.inputPrompt.on('modeChange', () => {
+            this.emit('modeChange');
+        });
+        this.inputPrompt.on('change', () => {
+            this.needsRender = true;
+        });
+    }
+    // ===========================================================================
+    // Public API
+    // ===========================================================================
+    /**
+     * Start the footer (begins render loop and input capture)
+     */
+    start() {
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        this.isPaused = false; // Ensure not paused when starting
+        // Start input capture
+        this.inputPrompt.start();
+        // Start render loop
+        this.render();
+        this.renderTimer = setInterval(() => {
+            if (this.needsRender && !this.isPaused) {
+                this.render();
+                this.needsRender = false;
+            }
+        }, this.renderInterval);
+    }
+    /**
+     * Stop the footer
+     */
+    stop() {
+        if (!this.isRunning)
+            return;
+        this.isRunning = false;
+        // Stop render loop
+        if (this.renderTimer) {
+            clearInterval(this.renderTimer);
+            this.renderTimer = null;
+        }
+        // Stop components
+        this.todoZone.dispose();
+        this.inputPrompt.stop();
+        // Clear rendered content
+        this.clear();
+    }
+    /**
+     * Set whether agent is running
+     * Enables/disables queue mode and spinner
+     */
+    setAgentRunning(running) {
+        const wasRunning = this.agentRunning;
+        this.agentRunning = running;
+        this.todoZone.setAgentRunning(running);
+        this.inputPrompt.setQueueMode(running);
+        // When stopping, immediately clear and re-render to remove spinner
+        // This prevents ghost spinner from render interval races
+        if (wasRunning && !running) {
+            this.clear();
+            this.render();
+        }
+        else {
+            this.needsRender = true;
+        }
+    }
+    /**
+     * Check if agent is running
+     */
+    isAgentRunning() {
+        return this.agentRunning;
+    }
+    /**
+     * Set the current mode
+     */
+    setMode(mode) {
+        this.mode = mode;
+        this.needsRender = true;
+    }
+    /**
+     * Get the current mode
+     */
+    getMode() {
+        return this.mode;
+    }
+    /**
+     * Update the todo list
+     */
+    setTodos(todos) {
+        this.todoZone.setTodos(todos);
+        this.needsRender = true;
+    }
+    /**
+     * Set the current tool being executed
+     */
+    setCurrentTool(tool) {
+        this.todoZone.setCurrentTool(tool);
+        this.needsRender = true;
+    }
+    /**
+     * Set a suggestion for the next action (ghost text in input prompt)
+     */
+    setSuggestion(action) {
+        this.inputPrompt.setSuggestion(action);
+        this.needsRender = true;
+    }
+    /**
+     * Set custom spinner text (overrides todo activeForm and random thinking word)
+     * Pass null to clear and use default behavior.
+     */
+    setSpinnerText(text) {
+        this.todoZone.setSpinnerText(text);
+        this.needsRender = true;
+    }
+    /**
+     * Add tokens to the spinner counter
+     */
+    addTokens(count) {
+        this.todoZone.addTokens(count);
+    }
+    /**
+     * Get queued inputs
+     */
+    getQueuedInputs() {
+        return this.inputPrompt.getQueuedInputs();
+    }
+    /**
+     * Pop the first queued input
+     */
+    popQueuedInput() {
+        const input = this.inputPrompt.popQueuedInput();
+        if (input !== null) {
+            this.needsRender = true;
+        }
+        return input;
+    }
+    /**
+     * Check if there are queued inputs
+     */
+    hasQueuedInput() {
+        return this.inputPrompt.hasQueuedInput();
+    }
+    /**
+     * Clear the queue
+     */
+    clearQueue() {
+        this.inputPrompt.clearQueue();
+        this.needsRender = true;
+    }
+    /**
+     * Clear footer before scrolling output
+     * Call this before writing to the scrolling zone
+     */
+    clearForOutput() {
+        this.clear();
+    }
+    /**
+     * Force an immediate render
+     */
+    forceRender() {
+        this.render();
+        this.needsRender = false;
+    }
+    /**
+     * Pause footer completely (for overlays)
+     * Stops render loop, input capture, and animation
+     */
+    pauseAnimation() {
+        // Set paused flag FIRST - this prevents any queued render callbacks from executing
+        this.isPaused = true;
+        // Stop render loop
+        if (this.renderTimer) {
+            clearInterval(this.renderTimer);
+            this.renderTimer = null;
+        }
+        // Stop input capture
+        this.inputPrompt.stop();
+        // Stop animation
+        this.todoZone.pauseAnimation();
+        // Clear footer from screen
+        this.clear();
+    }
+    /**
+     * Resume footer after pause
+     * Restarts render loop, input capture, and animation
+     */
+    resumeAnimation() {
+        // Clear paused flag FIRST
+        this.isPaused = false;
+        // Resume animation
+        this.todoZone.resumeAnimation();
+        // Restart input capture
+        this.inputPrompt.start();
+        // Restart render loop
+        this.render();
+        this.renderTimer = setInterval(() => {
+            if (this.needsRender && !this.isPaused) {
+                this.render();
+                this.needsRender = false;
+            }
+        }, this.renderInterval);
+    }
+    /**
+     * Get the height of last render
+     */
+    getLastRenderHeight() {
+        return this.lastRenderHeight;
+    }
+    /**
+     * Refresh the prompt with current theme colors
+     * Call after theme changes to apply new colors immediately
+     */
+    refreshPrompt() {
+        const s = getStyles();
+        this.inputPrompt.setPrompt(s.primaryBold('compilr>') + ' ');
+        this.needsRender = true;
+    }
+    // ===========================================================================
+    // Private: Rendering
+    // ===========================================================================
+    /**
+     * Clear the footer area
+     */
+    clear() {
+        if (this.lastRenderHeight > 0) {
+            // Move to start of current line
+            terminal.moveCursorToLineStart();
+            // First move DOWN to the last line of footer (cursor may be positioned in input area)
+            if (this.cursorLineFromBottom > 0) {
+                terminal.moveCursorDown(this.cursorLineFromBottom);
+            }
+            // Now move up to the first line of footer
+            terminal.moveCursorUp(this.lastRenderHeight - 1);
+            terminal.clearToEndOfScreen();
+        }
+        this.lastRenderHeight = 0;
+        this.cursorLineFromBottom = 0;
+    }
+    /**
+     * Render the entire footer
+     */
+    render() {
+        // Clear and redraw footer
+        this.clear();
+        const allLines = [];
+        // 1. Todo zone (spinner + todos)
+        const todoLines = this.todoZone.render();
+        allLines.push(...todoLines);
+        // 2. Queued inputs
+        const s = getStyles();
+        const queuedInputs = this.inputPrompt.getQueuedInputs();
+        for (const queued of queuedInputs) {
+            allLines.push(s.muted(`queued: "${queued}"`));
+        }
+        // 3. Input prompt
+        const inputLines = this.inputPrompt.render();
+        allLines.push(...inputLines);
+        // 4. Mode indicator (below input, before autocomplete)
+        allLines.push(this.renderModeIndicator());
+        // 5. Autocomplete dropdown (if active)
+        const autocompleteLines = this.inputPrompt.getAutocompleteLines();
+        allLines.push(...autocompleteLines);
+        // Write all lines
+        for (let i = 0; i < allLines.length; i++) {
+            terminal.write(allLines[i]);
+            if (i < allLines.length - 1) {
+                terminal.write('\n');
+            }
+        }
+        // Track height - account for line wrapping in terminal
+        const termWidth = process.stdout.columns || 80;
+        let actualTerminalRows = 0;
+        for (const line of allLines) {
+            // Strip ANSI codes to get visible length
+            // eslint-disable-next-line no-control-regex
+            const visibleLength = line.replace(/\x1b\[[0-9;]*m/g, '').length;
+            // Each line takes at least 1 row, plus extra rows if it wraps
+            actualTerminalRows += Math.max(1, Math.ceil(visibleLength / termWidth));
+        }
+        this.lastRenderHeight = actualTerminalRows;
+        // Position cursor within input prompt
+        // linesBeforeInput = todoLines + queuedInputs (mode indicator is now AFTER input)
+        this.positionCursor(allLines, todoLines.length + queuedInputs.length);
+    }
+    /**
+     * Render mode indicator line
+     */
+    renderModeIndicator() {
+        const s = getStyles();
+        const modeInfo = MODE_INFO[this.mode];
+        switch (this.mode) {
+            case 'normal':
+                // Subtle indicator in normal mode
+                return s.muted(`mode: ${modeInfo.label}  (Shift+Tab to change)`);
+            case 'auto-accept':
+                // Warning color for auto-accept
+                return s.warning(`⚡ mode: ${modeInfo.label}`) + s.muted('  (Shift+Tab to change)');
+            case 'plan':
+                // Different color for plan mode
+                return s.info(`📋 mode: ${modeInfo.label}`) + s.muted('  (Shift+Tab to change)');
+            default:
+                return s.muted(`mode: ${modeInfo.label}  (Shift+Tab to change)`);
+        }
+    }
+    /**
+     * Calculate how many terminal rows a line takes (accounting for wrapping)
+     */
+    getTerminalRowsForLine(line) {
+        const termWidth = process.stdout.columns || 80;
+        // Strip ANSI codes to get visible length
+        // eslint-disable-next-line no-control-regex
+        const visibleLength = line.replace(/\x1b\[[0-9;]*m/g, '').length;
+        // Each line takes at least 1 row, plus extra rows if it wraps
+        return Math.max(1, Math.ceil(visibleLength / termWidth));
+    }
+    /**
+     * Position cursor correctly within the input prompt
+     */
+    positionCursor(allLines, linesBeforeInput) {
+        const cursorInfo = this.inputPrompt.getCursorInfo();
+        // cursorInfo.row already accounts for:
+        // - Top separator (if enabled)
+        // - Wrapped lines within input
+        // cursorInfo.col is the column position within that terminal row
+        // Calculate terminal rows for lines BEFORE input (todo zone, queued inputs)
+        let rowsBeforeInput = 0;
+        for (let i = 0; i < linesBeforeInput; i++) {
+            rowsBeforeInput += this.getTerminalRowsForLine(allLines[i]);
+        }
+        // Calculate terminal rows for input section (including separators and wrapped lines)
+        const inputLines = this.inputPrompt.render();
+        let inputTotalRows = 0;
+        for (const line of inputLines) {
+            inputTotalRows += this.getTerminalRowsForLine(line);
+        }
+        // Calculate terminal rows for lines AFTER input (mode indicator, autocomplete)
+        let rowsAfterInput = 0;
+        const inputEndIndex = linesBeforeInput + inputLines.length;
+        for (let i = inputEndIndex; i < allLines.length; i++) {
+            rowsAfterInput += this.getTerminalRowsForLine(allLines[i]);
+        }
+        // Cursor target row from start of footer = rows before input + cursor row within input
+        const cursorRowFromStart = rowsBeforeInput + cursorInfo.row;
+        // Total rows to move up from end = total rows - cursor row - 1
+        const totalRows = rowsBeforeInput + inputTotalRows + rowsAfterInput;
+        const rowsToMoveUp = totalRows - cursorRowFromStart - 1;
+        if (rowsToMoveUp > 0) {
+            terminal.moveCursorUp(rowsToMoveUp);
+        }
+        // Track how far from bottom cursor is (for clear())
+        this.cursorLineFromBottom = rowsToMoveUp;
+        // Position cursor column (add 1 because terminal columns are 1-indexed)
+        terminal.moveCursorToColumn(cursorInfo.col + 1);
+    }
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * UI Module Exports
+ *
+ * Re-exports all UI components for easy importing.
+ */
+export * from './types.js';
+export * from './terminal.js';
+export * from './conversation.js';
+export * from './overlays.js';
+export * from './todo-zone.js';
+export * from './input-prompt-v2.js';
+export * from './footer.js';

package/dist/ui/index.js

@@ -0,0 +1,15 @@
+/**
+ * UI Module Exports
+ *
+ * Re-exports all UI components for easy importing.
+ */
+export * from './types.js';
+export * from './terminal.js';
+export * from './conversation.js';
+export * from './overlays.js';
+// Refactored components (event-driven, persistent footer)
+export * from './todo-zone.js';
+export * from './input-prompt-v2.js';
+export * from './footer.js';
+// Note: ephemeral.js and input-prompt.js are legacy and not re-exported
+// to avoid naming conflicts. Import directly if needed.

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

@@ -0,0 +1,24 @@
+/**
+ * Init Overlay
+ *
+ * Modal overlay for the /init wizard - creates new projects with structured workflow.
+ * Steps:
+ *   0. Project type (new vs existing)
+ *   1. Project name
+ *   2. Description
+ *   3. Repo pattern (single vs two-repo)
+ *   4. Tech stack
+ *   5. Coding standards
+ *   6. Initialize git?
+ *   7. Confirmation
+ */
+export interface InitResult {
+    created: boolean;
+    projectPath?: string;
+    docsPath?: string;
+    filesCreated?: string[];
+}
+/**
+ * Show the init wizard overlay
+ */
+export declare function showInitOverlay(): Promise<InitResult>;