@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/footer-v2.js

@@ -0,0 +1,1349 @@
+/**
+ * Footer V2 - UI Orchestrator
+ *
+ * Single point of control for all terminal UI:
+ * - Owns all rendering decisions (when to clear, when to render)
+ * - Owns all UI state (agentRunning, todos, currentTool, etc.)
+ * - Provides output methods that handle clear/render automatically
+ * - REPL just emits events, doesn't manage rendering timing
+ *
+ * Key principles:
+ * - NO scroll regions (preserves terminal scrollback)
+ * - Deterministic render cycle
+ * - All output goes through footer (no external console.log)
+ */
+import { EventEmitter } from 'events';
+import * as readline from 'readline';
+import * as terminal from './terminal.js';
+import { getPhysicalLineCount, getVisibleLength } from './line-utils.js';
+import { getStyles } from '../themes/index.js';
+import { MODE_INFO } from './types.js';
+import { getAutocompleteCommands } from '../commands.js';
+import { getFileMatches, extractAtMention, replaceAtMention, } from './file-autocomplete.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const MAX_VISIBLE_COMMANDS = 10;
+// =============================================================================
+// Mascot Expressions
+// =============================================================================
+/**
+ * Inline mascot expressions for agent identity and state feedback.
+ * Used to prefix agent messages and in spinner animations.
+ */
+export const MASCOT = {
+    // Core expressions
+    neutral: '[•_•]', // Default state - regular messages
+    thinking: '[°_°]', // Processing/thinking
+    searching: '[◐_◐]', // Searching/scanning files
+    success: '[^_^]', // Task completed successfully
+    error: '[×_×]', // Error occurred
+    confused: '[?_?]', // Needs clarification
+    working: '[•̀_•́]', // Actively working on task
+    // CRT monitor animation frames (subtle scanner effect)
+    crt: ['[░░░]', '[▒░░]', '[░▒░]', '[░░▒]', '[░▒░]', '[▒░░]'],
+};
+// =============================================================================
+// Fuzzy Matching
+// =============================================================================
+/**
+ * Calculate fuzzy match score for a query against a target string.
+ * Higher score = better match. Returns -1 if no match.
+ */
+function fuzzyMatchScore(query, target) {
+    const queryLower = query.toLowerCase();
+    const targetLower = target.toLowerCase();
+    // Exact prefix match - highest priority (score 1000+)
+    if (targetLower.startsWith(queryLower)) {
+        return 1000 + (100 - target.length); // Shorter commands rank higher
+    }
+    // Contiguous substring match - high priority (score 500+)
+    if (targetLower.includes(queryLower)) {
+        const index = targetLower.indexOf(queryLower);
+        return 500 + (100 - index); // Earlier matches rank higher
+    }
+    // Fuzzy match - characters appear in order (score 100+)
+    let queryIdx = 0;
+    let consecutiveBonus = 0;
+    let lastMatchIdx = -1;
+    for (let i = 0; i < targetLower.length && queryIdx < queryLower.length; i++) {
+        if (targetLower[i] === queryLower[queryIdx]) {
+            if (lastMatchIdx === i - 1) {
+                consecutiveBonus += 10;
+            }
+            lastMatchIdx = i;
+            queryIdx++;
+        }
+    }
+    if (queryIdx === queryLower.length) {
+        return 100 + consecutiveBonus + (100 - target.length);
+    }
+    return -1;
+}
+/**
+ * Filter and rank commands matching input using fuzzy matching
+ */
+function filterCommands(input, commands) {
+    const scored = commands
+        .map((cmd) => ({
+        cmd,
+        score: fuzzyMatchScore(input, cmd.command),
+    }))
+        .filter((item) => item.score >= 0);
+    scored.sort((a, b) => b.score - a.score);
+    return scored.map((item) => item.cmd);
+}
+// =============================================================================
+// Footer V2 Class
+// =============================================================================
+export class FooterV2 extends EventEmitter {
+    // Configuration
+    promptPrefix;
+    promptPrefixLen;
+    // Input state (multiline)
+    lines = [''];
+    currentLine = 0;
+    cursorPos = 0;
+    mode;
+    projectName = null;
+    todos = [];
+    spinnerText = null;
+    spinnerFrame = 0;
+    agentRunning = false;
+    queuedInputs = [];
+    currentTool = null;
+    // Command autocomplete state (for /commands)
+    autocomplete = {
+        active: false,
+        matches: [],
+        selectedIndex: 0,
+        scrollOffset: 0,
+    };
+    // File autocomplete state (for @paths)
+    fileAutocomplete = {
+        active: false,
+        matches: [],
+        selectedIndex: 0,
+        scrollOffset: 0,
+        partial: '',
+    };
+    // History state
+    history = [];
+    historyIndex = -1;
+    savedInput = '';
+    // Render tracking
+    lastRenderHeight = 0;
+    cursorLineFromBottom = 0;
+    isRunning = false;
+    isPaused = false;
+    renderTimer = null;
+    needsRender = false;
+    // Double Esc detection
+    lastEscapeTime = 0;
+    // Ghost text suggestion
+    suggestion = null;
+    // Spinner animation - CRT monitor fill effect
+    spinnerFrames = MASCOT.crt;
+    spinnerTimer = null;
+    constructor(options = {}) {
+        super();
+        const s = getStyles();
+        this.promptPrefix = options.prompt ?? s.primaryBold('compilr>') + ' ';
+        this.promptPrefixLen = getVisibleLength(this.promptPrefix);
+        this.mode = options.initialMode ?? 'normal';
+    }
+    // ===========================================================================
+    // Input value helpers
+    // ===========================================================================
+    /** Get the full input value (all lines joined with newlines) */
+    getInputValue() {
+        return this.lines.join('\n');
+    }
+    /** Get the current line content */
+    getCurrentLineContent() {
+        return this.lines[this.currentLine];
+    }
+    /** Clear input and reset to single empty line */
+    clearInput() {
+        this.lines = [''];
+        this.currentLine = 0;
+        this.cursorPos = 0;
+    }
+    // ===========================================================================
+    // Lifecycle
+    // ===========================================================================
+    start() {
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        this.isPaused = false;
+        // Start keyboard input handling
+        this.startKeyboardCapture();
+        // Initial render
+        this.render();
+        // Start render loop (60ms = ~16fps)
+        this.renderTimer = setInterval(() => {
+            if (this.needsRender && !this.isPaused) {
+                this.render();
+                this.needsRender = false;
+            }
+        }, 60);
+    }
+    stop() {
+        if (!this.isRunning)
+            return;
+        this.isRunning = false;
+        // Stop render loop
+        if (this.renderTimer) {
+            clearInterval(this.renderTimer);
+            this.renderTimer = null;
+        }
+        // Stop spinner
+        this.stopSpinnerAnimation();
+        // Stop keyboard capture
+        this.stopKeyboardCapture();
+        // Clear footer
+        this.clear();
+    }
+    // ===========================================================================
+    // Public API - Output (THE KEY METHODS)
+    // ===========================================================================
+    /**
+     * Print a semantic item to the scrolling zone.
+     * FooterV2 handles all formatting based on the item type.
+     */
+    print(item) {
+        const s = getStyles();
+        this.clear();
+        switch (item.type) {
+            case 'user-message':
+                console.log('');
+                console.log(s.primaryBold('> ') + item.text);
+                console.log(''); // Trailing blank for separation
+                break;
+            case 'agent-text': {
+                // Prefix agent messages with mascot expression (accent colored) and separator
+                const expr = item.expression ? MASCOT[item.expression] : MASCOT.neutral;
+                console.log(s.primary(expr) + s.muted(' > ') + item.text);
+                console.log(''); // Trailing blank for separation
+                break;
+            }
+            case 'tool-start':
+                console.log(s.info(`● ${item.name}`) + s.muted(`(${item.params})`));
+                break;
+            case 'tool-result':
+                console.log(s.info(`● ${item.name}`) + s.muted(`(${item.params})`));
+                if (item.success === false) {
+                    console.log(s.error(`  ⎿  ${item.result}`));
+                }
+                else {
+                    console.log(s.muted(`  ⎿  ${item.result}`));
+                }
+                console.log('');
+                break;
+            case 'tool-error':
+                console.log(s.info(`● ${item.name}`) + s.muted(`(${item.params})`));
+                console.log(s.error(`  ⎿  Error: ${item.error}`));
+                console.log('');
+                break;
+            case 'interrupted': {
+                // Show what was ongoing (if provided)
+                if (item.action) {
+                    console.log(s.info(`● ${item.action}`));
+                }
+                else {
+                    // No action means interrupted right after user message
+                    // Move cursor up to consume the trailing blank from user-message
+                    process.stdout.write('\x1b[1A'); // Move up one line
+                }
+                // Show interrupted line with mascot
+                const suggestion = item.suggestion ?? 'What should I do instead?';
+                console.log(s.warning(`  ⎿  ${MASCOT.confused} Interrupted - ${suggestion}`));
+                console.log('');
+                // Also set as ghost text suggestion
+                this.setSuggestion(suggestion);
+                break;
+            }
+            case 'error':
+                console.log(s.error(`${MASCOT.error} ${item.message}`));
+                console.log('');
+                break;
+            case 'success':
+                console.log(s.success(`${MASCOT.success} ${item.message}`));
+                console.log('');
+                break;
+            case 'info':
+                console.log(s.info(item.message));
+                console.log('');
+                break;
+            case 'warning':
+                console.log(s.warning(item.message));
+                console.log('');
+                break;
+            case 'raw':
+                console.log(item.text);
+                break;
+            case 'raw-lines':
+                for (const line of item.lines) {
+                    console.log(line);
+                }
+                break;
+        }
+        this.render();
+    }
+    /**
+     * Execute a callback that outputs to terminal.
+     * Handles clear → callback → render automatically.
+     * Use this for complex output that needs multiple console.log calls.
+     * @deprecated Prefer using print() with PrintableItem
+     */
+    output(callback) {
+        this.clear();
+        callback();
+        this.render();
+    }
+    // ===========================================================================
+    // Public API - State setters
+    // ===========================================================================
+    setAgentRunning(running) {
+        const wasRunning = this.agentRunning;
+        this.agentRunning = running;
+        if (running && !wasRunning) {
+            this.startSpinnerAnimation();
+        }
+        else if (!running && wasRunning) {
+            this.stopSpinnerAnimation();
+            this.currentTool = null;
+        }
+        this.needsRender = true;
+    }
+    isAgentRunning() {
+        return this.agentRunning;
+    }
+    setTodos(todos) {
+        this.todos = todos;
+        this.needsRender = true;
+    }
+    getTodos() {
+        return [...this.todos];
+    }
+    setSpinnerText(text) {
+        this.spinnerText = text;
+        this.needsRender = true;
+    }
+    setCurrentTool(tool) {
+        this.currentTool = tool;
+        if (tool) {
+            this.spinnerText = tool;
+        }
+        this.needsRender = true;
+    }
+    setMode(mode) {
+        this.mode = mode;
+        this.needsRender = true;
+    }
+    getMode() {
+        return this.mode;
+    }
+    setProjectName(name) {
+        this.projectName = name;
+        this.needsRender = true;
+    }
+    getProjectName() {
+        return this.projectName;
+    }
+    /**
+     * Set ghost text suggestion (shown when input is empty)
+     */
+    setSuggestion(text) {
+        this.suggestion = text;
+        this.needsRender = true;
+    }
+    getSuggestion() {
+        return this.suggestion;
+    }
+    clearSuggestion() {
+        this.suggestion = null;
+        this.needsRender = true;
+    }
+    // ===========================================================================
+    // Public API - Input queue
+    // ===========================================================================
+    getQueuedInputs() {
+        return [...this.queuedInputs];
+    }
+    popQueuedInput() {
+        if (this.queuedInputs.length === 0)
+            return null;
+        const input = this.queuedInputs.shift();
+        this.needsRender = true;
+        return input ?? null;
+    }
+    hasQueuedInput() {
+        return this.queuedInputs.length > 0;
+    }
+    clearQueue() {
+        this.queuedInputs = [];
+        this.needsRender = true;
+    }
+    // ===========================================================================
+    // Public API - Animation control (for overlays)
+    // ===========================================================================
+    /**
+     * Pause footer completely (for overlays)
+     */
+    pauseAnimation() {
+        this.isPaused = true;
+        // Stop render loop
+        if (this.renderTimer) {
+            clearInterval(this.renderTimer);
+            this.renderTimer = null;
+        }
+        // Stop spinner
+        this.stopSpinnerAnimation();
+        // Stop keyboard capture
+        this.stopKeyboardCapture();
+        // Clear footer from screen
+        this.clear();
+    }
+    /**
+     * Resume footer after pause
+     */
+    resumeAnimation() {
+        this.isPaused = false;
+        // Resume spinner if agent running
+        if (this.agentRunning) {
+            this.startSpinnerAnimation();
+        }
+        // Restart keyboard capture
+        this.startKeyboardCapture();
+        // Restart render loop
+        this.render();
+        this.renderTimer = setInterval(() => {
+            if (this.needsRender && !this.isPaused) {
+                this.render();
+                this.needsRender = false;
+            }
+        }, 60);
+    }
+    /**
+     * Restart input after command
+     */
+    restartInput() {
+        this.render();
+    }
+    /**
+     * Refresh prompt with theme colors
+     */
+    refreshPrompt() {
+        const s = getStyles();
+        this.promptPrefix = s.primaryBold('compilr>') + ' ';
+        this.promptPrefixLen = getVisibleLength(this.promptPrefix);
+        this.needsRender = true;
+    }
+    // ===========================================================================
+    // Public API - Legacy compatibility (for gradual migration)
+    // ===========================================================================
+    /**
+     * @deprecated Use print() or output() instead
+     */
+    clearForOutput() {
+        this.clear();
+    }
+    /**
+     * @deprecated Use print() or output() instead
+     */
+    forceRender() {
+        this.render();
+        this.needsRender = false;
+    }
+    // ===========================================================================
+    // Private - Rendering
+    // ===========================================================================
+    clear() {
+        if (this.lastRenderHeight === 0)
+            return;
+        terminal.moveCursorToLineStart();
+        const cursorRowFromTop = this.lastRenderHeight - this.cursorLineFromBottom;
+        const rowsToMoveUp = cursorRowFromTop - 1;
+        if (rowsToMoveUp > 0) {
+            terminal.moveCursorUp(rowsToMoveUp);
+        }
+        terminal.clearToEndOfScreen();
+        this.lastRenderHeight = 0;
+        this.cursorLineFromBottom = 0;
+    }
+    render() {
+        if (!this.isRunning || this.isPaused)
+            return;
+        const termWidth = terminal.getTerminalWidth();
+        const s = getStyles();
+        // Build all lines in order
+        const lines = [];
+        // 1. Header: Spinner (when running) or "Todos" (when idle with todos)
+        if (this.agentRunning) {
+            const spinnerLine = this.buildSpinnerLine();
+            lines.push({
+                content: spinnerLine,
+                physicalLines: getPhysicalLineCount(spinnerLine, termWidth),
+            });
+        }
+        else if (this.todos.length > 0) {
+            const headerLine = s.muted('Todos');
+            lines.push({
+                content: headerLine,
+                physicalLines: 1,
+            });
+        }
+        // 2. Todo list (always show if there are todos)
+        if (this.todos.length > 0) {
+            for (const todo of this.todos) {
+                const todoLine = this.buildTodoLine(todo);
+                lines.push({
+                    content: todoLine,
+                    physicalLines: getPhysicalLineCount(todoLine, termWidth),
+                });
+            }
+            // Blank line after todos for spacing
+            lines.push({ content: '', physicalLines: 1 });
+        }
+        // 3. Queued inputs (show multiline as single line with ↵ indicator)
+        for (const queued of this.queuedInputs) {
+            const displayText = queued.replace(/\n/g, ' ↵ ');
+            const queuedLine = s.muted(`queued: "${displayText}"`);
+            lines.push({
+                content: queuedLine,
+                physicalLines: getPhysicalLineCount(queuedLine, termWidth),
+            });
+        }
+        // 4. Top separator
+        const separator = '─'.repeat(termWidth);
+        lines.push({ content: separator, physicalLines: 1 });
+        // 5. Input prompt (multiline support)
+        const continuationPrompt = s.muted('   \\ ');
+        const continuationPromptLen = getVisibleLength(continuationPrompt);
+        const cursorLineIndex = lines.length + this.currentLine; // Index where cursor is
+        for (let i = 0; i < this.lines.length; i++) {
+            const linePrompt = i === 0 ? this.promptPrefix : continuationPrompt;
+            const linePromptLen = i === 0 ? this.promptPrefixLen : continuationPromptLen;
+            const lineContent = this.lines[i];
+            // Show ghost text on first line when input is empty and no autocomplete
+            let fullLine;
+            let totalLen;
+            if (i === 0 &&
+                lineContent === '' &&
+                this.lines.length === 1 &&
+                this.suggestion &&
+                !this.autocomplete.active &&
+                !this.fileAutocomplete.active) {
+                // Build: [prompt][suggestion]...[↵ send]
+                const rightHint = '↵ send';
+                const leftContent = linePrompt + s.muted(this.suggestion);
+                const leftLen = linePromptLen + this.suggestion.length;
+                const rightLen = rightHint.length;
+                const padding = Math.max(1, termWidth - leftLen - rightLen);
+                fullLine = leftContent + ' '.repeat(padding) + s.muted(rightHint);
+                totalLen = termWidth; // Full width
+            }
+            else {
+                fullLine = linePrompt + lineContent;
+                totalLen = linePromptLen + getVisibleLength(lineContent);
+            }
+            const physicalLines = totalLen === 0 ? 1 : Math.ceil(totalLen / termWidth) || 1;
+            lines.push({
+                content: fullLine,
+                physicalLines,
+            });
+        }
+        // 6. Bottom separator
+        lines.push({ content: separator, physicalLines: 1 });
+        // 7. Mode indicator
+        const modeLine = this.buildModeLine(termWidth);
+        lines.push({
+            content: modeLine,
+            physicalLines: getPhysicalLineCount(modeLine, termWidth),
+        });
+        // 8. Autocomplete dropdown (if active) - file autocomplete takes priority
+        const fileAutocompleteLines = this.buildFileAutocompleteLines(termWidth);
+        const autocompleteLines = fileAutocompleteLines.length > 0
+            ? fileAutocompleteLines
+            : this.buildAutocompleteLines(termWidth);
+        for (const line of autocompleteLines) {
+            lines.push({
+                content: line,
+                physicalLines: getPhysicalLineCount(line, termWidth),
+            });
+        }
+        // Calculate total physical height
+        let totalPhysicalLines = 0;
+        for (const line of lines) {
+            totalPhysicalLines += line.physicalLines;
+        }
+        // Clear existing footer
+        this.clear();
+        // Write all lines
+        for (let i = 0; i < lines.length; i++) {
+            terminal.write(lines[i].content);
+            if (i < lines.length - 1) {
+                terminal.write('\n');
+            }
+        }
+        // Calculate cursor position (for multiline, position on the line where cursor is)
+        let rowsAfterCursor = 0;
+        for (let i = cursorLineIndex + 1; i < lines.length; i++) {
+            rowsAfterCursor += lines[i].physicalLines;
+        }
+        if (rowsAfterCursor > 0) {
+            terminal.moveCursorUp(rowsAfterCursor);
+        }
+        // Calculate column within current line
+        const currentLinePromptLen = this.currentLine === 0 ? this.promptPrefixLen : continuationPromptLen;
+        const totalPos = currentLinePromptLen + this.cursorPos;
+        const cursorCol = (totalPos % termWidth) + 1;
+        terminal.moveCursorToColumn(cursorCol);
+        terminal.showCursor();
+        this.lastRenderHeight = totalPhysicalLines;
+        this.cursorLineFromBottom = rowsAfterCursor;
+    }
+    // ===========================================================================
+    // Private - Line builders
+    // ===========================================================================
+    buildSpinnerLine() {
+        const s = getStyles();
+        const frame = this.spinnerFrames[this.spinnerFrame % this.spinnerFrames.length];
+        const text = this.currentTool ?? this.spinnerText ?? 'Thinking...';
+        // Format: [CRT scanner] text (single monitor animation, no double mascot)
+        return s.muted(`${frame} ${text}`);
+    }
+    buildTodoLine(todo) {
+        const s = getStyles();
+        const icon = todo.status === 'completed' ? '✓' :
+            todo.status === 'in_progress' ? '→' : '☐';
+        const style = todo.status === 'completed' ? s.muted :
+            todo.status === 'in_progress' ? s.info : s.muted;
+        return style(`${icon} ${todo.content}`);
+    }
+    buildModeLine(termWidth) {
+        const s = getStyles();
+        const modeInfo = MODE_INFO[this.mode];
+        let leftPart;
+        switch (this.mode) {
+            case 'normal':
+                leftPart = s.muted(`mode: ${modeInfo.label}  (Shift+Tab to change)`);
+                break;
+            case 'auto-accept':
+                leftPart = s.warning(`mode: ${modeInfo.label}`) + s.muted('  (Shift+Tab to change)');
+                break;
+            case 'plan':
+                leftPart = s.info(`mode: ${modeInfo.label}`) + s.muted('  (Shift+Tab to change)');
+                break;
+            default:
+                leftPart = s.muted(`mode: ${modeInfo.label}  (Shift+Tab to change)`);
+        }
+        if (!this.projectName) {
+            return leftPart;
+        }
+        const projectText = `Project: ${this.projectName}`;
+        const rightPart = s.muted(projectText);
+        const leftVisible = getVisibleLength(leftPart);
+        const padding = Math.max(2, termWidth - leftVisible - projectText.length);
+        return leftPart + ' '.repeat(padding) + rightPart;
+    }
+    buildAutocompleteLines(termWidth) {
+        if (!this.autocomplete.active || this.autocomplete.matches.length === 0) {
+            return [];
+        }
+        const s = getStyles();
+        const lines = [];
+        const { matches, selectedIndex, scrollOffset } = this.autocomplete;
+        const visible = matches.slice(scrollOffset, scrollOffset + MAX_VISIBLE_COMMANDS);
+        const total = matches.length;
+        // Show scroll indicator if there are more items above
+        if (scrollOffset > 0) {
+            lines.push(s.muted(`  ↑ ${String(scrollOffset)} more above`));
+        }
+        for (let i = 0; i < visible.length; i++) {
+            const cmd = visible[i];
+            const actualIndex = scrollOffset + i;
+            const isSelected = actualIndex === selectedIndex;
+            const prefix = isSelected ? s.primary('❯ ') : '  ';
+            const name = isSelected ? s.primaryBold(cmd.command) : cmd.command;
+            // Truncate if too long
+            const baseLen = getVisibleLength(prefix) + getVisibleLength(name) + 3; // 3 for ' - '
+            const maxDescLen = termWidth - baseLen - 2;
+            const truncatedDesc = cmd.description.length > maxDescLen
+                ? cmd.description.slice(0, maxDescLen - 1) + '…'
+                : cmd.description;
+            lines.push(`${prefix}${name} ${s.muted('- ' + truncatedDesc)}`);
+        }
+        // Show scroll indicator if there are more items below
+        const belowCount = total - scrollOffset - visible.length;
+        if (belowCount > 0) {
+            lines.push(s.muted(`  ↓ ${String(belowCount)} more below`));
+        }
+        return lines;
+    }
+    buildFileAutocompleteLines(termWidth) {
+        if (!this.fileAutocomplete.active || this.fileAutocomplete.matches.length === 0) {
+            return [];
+        }
+        const s = getStyles();
+        const lines = [];
+        const { matches, selectedIndex, scrollOffset } = this.fileAutocomplete;
+        const visible = matches.slice(scrollOffset, scrollOffset + MAX_VISIBLE_COMMANDS);
+        const total = matches.length;
+        // Show scroll indicator if there are more items above
+        if (scrollOffset > 0) {
+            lines.push(s.muted(`  ↑ ${String(scrollOffset)} more above`));
+        }
+        for (let i = 0; i < visible.length; i++) {
+            const file = visible[i];
+            const actualIndex = scrollOffset + i;
+            const isSelected = actualIndex === selectedIndex;
+            const prefix = isSelected ? s.primary('❯ ') : '  ';
+            const icon = file.isDirectory ? '📁 ' : '📄 ';
+            const name = isSelected ? s.primaryBold(file.path) : file.path;
+            // Truncate if too long
+            const baseLen = getVisibleLength(prefix) + 3 + getVisibleLength(file.path); // 3 for icon
+            if (baseLen > termWidth - 2) {
+                const maxLen = termWidth - getVisibleLength(prefix) - 5; // 3 for icon, 2 for padding
+                const truncatedPath = file.path.length > maxLen
+                    ? '…' + file.path.slice(-(maxLen - 1))
+                    : file.path;
+                const truncatedName = isSelected ? s.primaryBold(truncatedPath) : truncatedPath;
+                lines.push(`${prefix}${icon}${truncatedName}`);
+            }
+            else {
+                lines.push(`${prefix}${icon}${name}`);
+            }
+        }
+        // Show scroll indicator if there are more items below
+        const belowCount = total - scrollOffset - visible.length;
+        if (belowCount > 0) {
+            lines.push(s.muted(`  ↓ ${String(belowCount)} more below`));
+        }
+        return lines;
+    }
+    // ===========================================================================
+    // Private - Cursor calculations
+    // ===========================================================================
+    // ===========================================================================
+    // Private - Autocomplete
+    // ===========================================================================
+    updateAutocomplete() {
+        const currentLine = this.getCurrentLineContent();
+        // Check for @ file path autocomplete first (works on any line)
+        const atMention = extractAtMention(currentLine, this.cursorPos);
+        if (atMention !== null) {
+            // File autocomplete mode - disable command autocomplete
+            this.autocomplete.active = false;
+            this.autocomplete.matches = [];
+            this.autocomplete.selectedIndex = 0;
+            this.autocomplete.scrollOffset = 0;
+            // Enable file autocomplete
+            this.fileAutocomplete.active = true;
+            this.fileAutocomplete.partial = atMention;
+            this.fileAutocomplete.matches = getFileMatches(atMention);
+            if (this.fileAutocomplete.selectedIndex >= this.fileAutocomplete.matches.length) {
+                this.fileAutocomplete.selectedIndex = Math.max(0, this.fileAutocomplete.matches.length - 1);
+                this.fileAutocomplete.scrollOffset = 0;
+            }
+            return;
+        }
+        // Reset file autocomplete
+        this.fileAutocomplete.active = false;
+        this.fileAutocomplete.matches = [];
+        this.fileAutocomplete.selectedIndex = 0;
+        this.fileAutocomplete.scrollOffset = 0;
+        this.fileAutocomplete.partial = '';
+        // Activate command autocomplete when first line starts with /
+        const firstLine = this.lines[0];
+        if (this.currentLine === 0 && firstLine.startsWith('/')) {
+            this.autocomplete.active = true;
+            const freshCommands = getAutocompleteCommands();
+            this.autocomplete.matches = filterCommands(firstLine, freshCommands);
+            // Reset selection if it's out of bounds
+            if (this.autocomplete.selectedIndex >= this.autocomplete.matches.length) {
+                this.autocomplete.selectedIndex = Math.max(0, this.autocomplete.matches.length - 1);
+                this.autocomplete.scrollOffset = 0;
+            }
+        }
+        else {
+            this.autocomplete.active = false;
+            this.autocomplete.matches = [];
+            this.autocomplete.selectedIndex = 0;
+            this.autocomplete.scrollOffset = 0;
+        }
+    }
+    acceptAutocomplete() {
+        // File autocomplete takes priority (works on current line)
+        if (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) {
+            const selectedFile = this.fileAutocomplete.matches[this.fileAutocomplete.selectedIndex];
+            const currentLine = this.getCurrentLineContent();
+            const result = replaceAtMention(currentLine, this.cursorPos, selectedFile.path);
+            this.lines[this.currentLine] = result.input;
+            this.cursorPos = result.cursorPos;
+            this.fileAutocomplete.active = false;
+            this.fileAutocomplete.matches = [];
+            this.fileAutocomplete.selectedIndex = 0;
+            this.fileAutocomplete.scrollOffset = 0;
+            this.fileAutocomplete.partial = '';
+            // Check if still in @ context (e.g., directory selected, might want to continue)
+            this.updateAutocomplete();
+            return;
+        }
+        // Command autocomplete (works on first line only)
+        if (this.autocomplete.active && this.autocomplete.matches.length > 0) {
+            const selected = this.autocomplete.matches[this.autocomplete.selectedIndex];
+            this.lines[0] = selected.command;
+            this.currentLine = 0;
+            this.cursorPos = this.lines[0].length;
+            this.autocomplete.active = false;
+            this.autocomplete.matches = [];
+            this.autocomplete.selectedIndex = 0;
+            this.autocomplete.scrollOffset = 0;
+        }
+    }
+    closeAutocomplete() {
+        // Close file autocomplete
+        this.fileAutocomplete.active = false;
+        this.fileAutocomplete.matches = [];
+        this.fileAutocomplete.selectedIndex = 0;
+        this.fileAutocomplete.scrollOffset = 0;
+        this.fileAutocomplete.partial = '';
+        // Close command autocomplete
+        this.autocomplete.active = false;
+        this.autocomplete.matches = [];
+        this.autocomplete.selectedIndex = 0;
+        this.autocomplete.scrollOffset = 0;
+    }
+    navigateAutocompleteUp() {
+        // File autocomplete navigation takes priority
+        if (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) {
+            if (this.fileAutocomplete.selectedIndex > 0) {
+                this.fileAutocomplete.selectedIndex--;
+                if (this.fileAutocomplete.selectedIndex < this.fileAutocomplete.scrollOffset) {
+                    this.fileAutocomplete.scrollOffset = this.fileAutocomplete.selectedIndex;
+                }
+                return true;
+            }
+            return false;
+        }
+        // Command autocomplete navigation
+        if (!this.autocomplete.active || this.autocomplete.matches.length === 0) {
+            return false;
+        }
+        if (this.autocomplete.selectedIndex > 0) {
+            this.autocomplete.selectedIndex--;
+            // Adjust scroll if selection goes above visible area
+            if (this.autocomplete.selectedIndex < this.autocomplete.scrollOffset) {
+                this.autocomplete.scrollOffset = this.autocomplete.selectedIndex;
+            }
+            return true;
+        }
+        return false;
+    }
+    navigateAutocompleteDown() {
+        // File autocomplete navigation takes priority
+        if (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) {
+            if (this.fileAutocomplete.selectedIndex < this.fileAutocomplete.matches.length - 1) {
+                this.fileAutocomplete.selectedIndex++;
+                const maxVisibleIndex = this.fileAutocomplete.scrollOffset + MAX_VISIBLE_COMMANDS - 1;
+                if (this.fileAutocomplete.selectedIndex > maxVisibleIndex) {
+                    this.fileAutocomplete.scrollOffset = this.fileAutocomplete.selectedIndex - MAX_VISIBLE_COMMANDS + 1;
+                }
+                return true;
+            }
+            return false;
+        }
+        // Command autocomplete navigation
+        if (!this.autocomplete.active || this.autocomplete.matches.length === 0) {
+            return false;
+        }
+        if (this.autocomplete.selectedIndex < this.autocomplete.matches.length - 1) {
+            this.autocomplete.selectedIndex++;
+            // Adjust scroll if selection goes below visible area
+            const maxVisibleIndex = this.autocomplete.scrollOffset + MAX_VISIBLE_COMMANDS - 1;
+            if (this.autocomplete.selectedIndex > maxVisibleIndex) {
+                this.autocomplete.scrollOffset = this.autocomplete.selectedIndex - MAX_VISIBLE_COMMANDS + 1;
+            }
+            return true;
+        }
+        return false;
+    }
+    // ===========================================================================
+    // Private - History
+    // ===========================================================================
+    addToHistory(input) {
+        const trimmed = input.trim();
+        // Don't add empty or duplicate consecutive entries
+        if (trimmed && (this.history.length === 0 || this.history[this.history.length - 1] !== trimmed)) {
+            this.history.push(trimmed);
+        }
+    }
+    navigateHistoryUp() {
+        if (this.autocomplete.active)
+            return false;
+        if (this.history.length === 0)
+            return false;
+        // Save current input when starting to navigate
+        if (this.historyIndex === -1) {
+            this.savedInput = this.getInputValue();
+        }
+        // Navigate to older entry
+        if (this.historyIndex < this.history.length - 1) {
+            this.historyIndex++;
+            const historyEntry = this.history[this.history.length - 1 - this.historyIndex];
+            // History entries are single-line (newlines stripped on save)
+            this.lines = [historyEntry];
+            this.currentLine = 0;
+            this.cursorPos = historyEntry.length;
+            return true;
+        }
+        return false;
+    }
+    navigateHistoryDown() {
+        if (this.autocomplete.active)
+            return false;
+        if (this.historyIndex < 0)
+            return false;
+        this.historyIndex--;
+        if (this.historyIndex === -1) {
+            // Restore saved input (may be multiline)
+            this.lines = this.savedInput.split('\n');
+            if (this.lines.length === 0)
+                this.lines = [''];
+            this.currentLine = this.lines.length - 1;
+            this.cursorPos = this.lines[this.currentLine].length;
+        }
+        else {
+            // Navigate to newer entry
+            const historyEntry = this.history[this.history.length - 1 - this.historyIndex];
+            this.lines = [historyEntry];
+            this.currentLine = 0;
+            this.cursorPos = historyEntry.length;
+        }
+        return true;
+    }
+    resetHistoryNavigation() {
+        this.historyIndex = -1;
+        this.savedInput = '';
+    }
+    // ===========================================================================
+    // Private - Spinner animation
+    // ===========================================================================
+    startSpinnerAnimation() {
+        if (this.spinnerTimer)
+            return;
+        this.spinnerTimer = setInterval(() => {
+            this.spinnerFrame++;
+            this.needsRender = true;
+        }, 200); // Slower, more relaxed animation
+    }
+    stopSpinnerAnimation() {
+        if (this.spinnerTimer) {
+            clearInterval(this.spinnerTimer);
+            this.spinnerTimer = null;
+        }
+        this.spinnerFrame = 0;
+    }
+    // ===========================================================================
+    // Private - Keyboard handling
+    // ===========================================================================
+    keyHandler = null;
+    dataHandler = null;
+    startKeyboardCapture() {
+        if (this.keyHandler)
+            return; // Already capturing
+        readline.emitKeypressEvents(process.stdin);
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(true);
+        }
+        // Handle raw data for reliable Escape and Option+Arrow detection
+        this.dataHandler = (data) => {
+            if (!this.isRunning || this.isPaused)
+                return;
+            // Pure Escape key is a single byte 0x1B
+            if (data.length === 1 && data[0] === 0x1b) {
+                this.handleEscape();
+                return;
+            }
+            // Mac Option+Left (word left): ESC b or ESC [ 1 ; 9 D
+            const isOptionLeft = (data.length === 2 && data[0] === 0x1b && data[1] === 0x62) ||
+                (data.length === 6 &&
+                    data[0] === 0x1b &&
+                    data[1] === 0x5b &&
+                    data[2] === 0x31 &&
+                    data[3] === 0x3b &&
+                    data[4] === 0x39 &&
+                    data[5] === 0x44);
+            // Mac Option+Right (word right): ESC f or ESC [ 1 ; 9 C
+            const isOptionRight = (data.length === 2 && data[0] === 0x1b && data[1] === 0x66) ||
+                (data.length === 6 &&
+                    data[0] === 0x1b &&
+                    data[1] === 0x5b &&
+                    data[2] === 0x31 &&
+                    data[3] === 0x3b &&
+                    data[4] === 0x39 &&
+                    data[5] === 0x43);
+            if (isOptionLeft) {
+                this.handleWordLeft();
+                return;
+            }
+            if (isOptionRight) {
+                this.handleWordRight();
+                return;
+            }
+            // Home/Cmd+Left: Ctrl+A (\x01) or ESC [ H
+            const isHome = (data.length === 1 && data[0] === 0x01) ||
+                (data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x48);
+            // End/Cmd+Right: Ctrl+E (\x05) or ESC [ F
+            const isEnd = (data.length === 1 && data[0] === 0x05) ||
+                (data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x46);
+            if (isHome) {
+                this.cursorPos = 0;
+                this.needsRender = true;
+                return;
+            }
+            if (isEnd) {
+                this.cursorPos = this.lines[this.currentLine].length;
+                this.needsRender = true;
+                return;
+            }
+        };
+        this.keyHandler = (str, key) => {
+            if (!this.isRunning || this.isPaused)
+                return;
+            // Skip escape here - handled by dataHandler
+            if (key.name === 'escape')
+                return;
+            this.handleKeypress(str, key);
+        };
+        process.stdin.on('data', this.dataHandler);
+        process.stdin.on('keypress', this.keyHandler);
+        process.stdin.resume();
+    }
+    stopKeyboardCapture() {
+        if (this.dataHandler) {
+            process.stdin.removeListener('data', this.dataHandler);
+            this.dataHandler = null;
+        }
+        if (this.keyHandler) {
+            process.stdin.removeListener('keypress', this.keyHandler);
+            this.keyHandler = null;
+        }
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(false);
+        }
+    }
+    /**
+     * Handle word left (Option+Left) - move cursor to previous word boundary
+     */
+    handleWordLeft() {
+        const line = this.lines[this.currentLine];
+        if (this.cursorPos > 0) {
+            let pos = this.cursorPos;
+            // Skip spaces
+            while (pos > 0 && line[pos - 1] === ' ')
+                pos--;
+            // Skip word
+            while (pos > 0 && line[pos - 1] !== ' ')
+                pos--;
+            this.cursorPos = pos;
+            this.needsRender = true;
+        }
+        else if (this.currentLine > 0) {
+            // Move to end of previous line
+            this.currentLine--;
+            this.cursorPos = this.lines[this.currentLine].length;
+            this.needsRender = true;
+        }
+    }
+    /**
+     * Handle word right (Option+Right) - move cursor to next word boundary
+     */
+    handleWordRight() {
+        const line = this.lines[this.currentLine];
+        if (this.cursorPos < line.length) {
+            let pos = this.cursorPos;
+            // Skip word
+            while (pos < line.length && line[pos] !== ' ')
+                pos++;
+            // Skip spaces
+            while (pos < line.length && line[pos] === ' ')
+                pos++;
+            this.cursorPos = pos;
+            this.needsRender = true;
+        }
+        else if (this.currentLine < this.lines.length - 1) {
+            // Move to start of next line
+            this.currentLine++;
+            this.cursorPos = 0;
+            this.needsRender = true;
+        }
+    }
+    /**
+     * Handle Escape key - called from raw data handler for reliable detection
+     */
+    handleEscape() {
+        const now = Date.now();
+        const timeSinceLastEsc = now - this.lastEscapeTime;
+        const isDoubleEsc = timeSinceLastEsc < 500;
+        this.lastEscapeTime = now;
+        if (this.fileAutocomplete.active) {
+            // 1. Close file autocomplete first
+            this.closeAutocomplete();
+            this.needsRender = true;
+        }
+        else if (this.autocomplete.active) {
+            // 2. Close command autocomplete
+            this.closeAutocomplete();
+            this.needsRender = true;
+        }
+        else if (isDoubleEsc && this.getInputValue().length > 0) {
+            // 3. Double Esc clears input (if there's content)
+            this.clearInput();
+            this.resetHistoryNavigation();
+            this.needsRender = true;
+        }
+        else if (this.agentRunning) {
+            // 4. Single Esc cancels agent
+            this.emit('cancel');
+        }
+        else {
+            // 5. Single Esc emits escape
+            this.emit('escape');
+        }
+    }
+    handleKeypress(str, key) {
+        // Ctrl+C - interrupt/exit
+        if (key.ctrl && key.name === 'c') {
+            this.emit('interrupt');
+            return;
+        }
+        // Tab - accept suggestion, or autocomplete
+        if (key.name === 'tab' && !key.shift) {
+            // Accept ghost text suggestion if input is empty
+            if (this.suggestion && this.getInputValue() === '') {
+                this.lines[0] = this.suggestion;
+                this.cursorPos = this.suggestion.length;
+                this.suggestion = null;
+                this.needsRender = true;
+                return;
+            }
+            if (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) {
+                this.acceptAutocomplete();
+                this.needsRender = true;
+                return;
+            }
+            if (this.autocomplete.active && this.autocomplete.matches.length > 0) {
+                this.acceptAutocomplete();
+                this.needsRender = true;
+                return;
+            }
+            // Otherwise ignore tab (or could insert spaces)
+            return;
+        }
+        // Enter - handle multiline continuation, autocomplete, then execute
+        if (key.name === 'return') {
+            // Check for backslash continuation at end of current line
+            const currentLine = this.getCurrentLineContent();
+            if (currentLine.endsWith('\\')) {
+                // Remove backslash and add new line
+                this.lines[this.currentLine] = currentLine.slice(0, -1);
+                this.lines.push('');
+                this.currentLine++;
+                this.cursorPos = 0;
+                this.closeAutocomplete();
+                this.resetHistoryNavigation();
+                this.needsRender = true;
+                return;
+            }
+            // If file autocomplete is active, accept the selection and submit
+            if (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) {
+                this.acceptAutocomplete();
+                // Fall through to submit the message
+            }
+            // If command autocomplete is active, accept the selection first
+            if (this.autocomplete.active && this.autocomplete.matches.length > 0) {
+                this.acceptAutocomplete();
+                // Fall through to execute the command
+            }
+            let input = this.getInputValue().trim();
+            // If input is empty but we have a ghost text suggestion, accept it
+            if (!input && this.suggestion) {
+                input = this.suggestion;
+                this.suggestion = null;
+            }
+            if (input) {
+                // Add to history before processing (store as single line for history)
+                this.addToHistory(input.replace(/\n/g, ' '));
+                this.resetHistoryNavigation();
+                if (this.agentRunning) {
+                    this.queuedInputs.push(input);
+                    this.needsRender = true;
+                }
+                else if (input.startsWith('/')) {
+                    const spaceIndex = input.indexOf(' ');
+                    const cmd = spaceIndex > 0 ? input.slice(1, spaceIndex) : input.slice(1);
+                    const args = spaceIndex > 0 ? input.slice(spaceIndex + 1) : '';
+                    this.closeAutocomplete();
+                    this.emit('command', cmd, args);
+                }
+                else {
+                    this.emit('submit', input);
+                }
+                this.clearInput();
+                this.closeAutocomplete();
+                this.needsRender = true;
+            }
+            return;
+        }
+        // Arrow Up - autocomplete > multiline navigation > history
+        if (key.name === 'up') {
+            // 1. Autocomplete navigation takes priority
+            if (this.navigateAutocompleteUp()) {
+                this.needsRender = true;
+                return;
+            }
+            // 2. Navigate to previous line in multiline input
+            if (this.currentLine > 0) {
+                this.currentLine--;
+                // Try to keep same cursor position, but clamp to line length
+                this.cursorPos = Math.min(this.cursorPos, this.lines[this.currentLine].length);
+                this.needsRender = true;
+                return;
+            }
+            // 3. History navigation (only when at first line)
+            if (this.navigateHistoryUp()) {
+                this.closeAutocomplete();
+                this.needsRender = true;
+            }
+            return;
+        }
+        // Arrow Down - autocomplete > multiline navigation > history
+        if (key.name === 'down') {
+            // 1. Autocomplete navigation takes priority
+            if (this.navigateAutocompleteDown()) {
+                this.needsRender = true;
+                return;
+            }
+            // 2. Navigate to next line in multiline input
+            if (this.currentLine < this.lines.length - 1) {
+                this.currentLine++;
+                // Try to keep same cursor position, but clamp to line length
+                this.cursorPos = Math.min(this.cursorPos, this.lines[this.currentLine].length);
+                this.needsRender = true;
+                return;
+            }
+            // 3. History forward (only when at last line)
+            if (this.historyIndex >= 0 && this.navigateHistoryDown()) {
+                this.needsRender = true;
+            }
+            return;
+        }
+        // Backspace
+        if (key.name === 'backspace') {
+            if (this.cursorPos > 0) {
+                // Delete character in current line
+                const line = this.lines[this.currentLine];
+                this.lines[this.currentLine] = line.slice(0, this.cursorPos - 1) + line.slice(this.cursorPos);
+                this.cursorPos--;
+                this.resetHistoryNavigation();
+                this.updateAutocomplete();
+                this.needsRender = true;
+            }
+            else if (this.currentLine > 0) {
+                // At start of line - merge with previous line
+                const currentLine = this.lines[this.currentLine];
+                const prevLine = this.lines[this.currentLine - 1];
+                this.lines[this.currentLine - 1] = prevLine + currentLine;
+                this.lines.splice(this.currentLine, 1);
+                this.currentLine--;
+                this.cursorPos = prevLine.length;
+                this.resetHistoryNavigation();
+                this.updateAutocomplete();
+                this.needsRender = true;
+            }
+            return;
+        }
+        // Delete
+        if (key.name === 'delete') {
+            const line = this.lines[this.currentLine];
+            if (this.cursorPos < line.length) {
+                // Delete character in current line
+                this.lines[this.currentLine] = line.slice(0, this.cursorPos) + line.slice(this.cursorPos + 1);
+                this.resetHistoryNavigation();
+                this.updateAutocomplete();
+                this.needsRender = true;
+            }
+            else if (this.currentLine < this.lines.length - 1) {
+                // At end of line - merge with next line
+                const nextLine = this.lines[this.currentLine + 1];
+                this.lines[this.currentLine] = line + nextLine;
+                this.lines.splice(this.currentLine + 1, 1);
+                this.resetHistoryNavigation();
+                this.updateAutocomplete();
+                this.needsRender = true;
+            }
+            return;
+        }
+        // Arrow keys (left/right for cursor movement with multiline support)
+        if (key.name === 'left') {
+            if (this.cursorPos > 0) {
+                this.cursorPos--;
+                this.needsRender = true;
+            }
+            else if (this.currentLine > 0) {
+                // Move to end of previous line
+                this.currentLine--;
+                this.cursorPos = this.lines[this.currentLine].length;
+                this.needsRender = true;
+            }
+            return;
+        }
+        if (key.name === 'right') {
+            const lineLen = this.lines[this.currentLine].length;
+            if (this.cursorPos < lineLen) {
+                this.cursorPos++;
+                this.needsRender = true;
+            }
+            else if (this.currentLine < this.lines.length - 1) {
+                // Move to start of next line
+                this.currentLine++;
+                this.cursorPos = 0;
+                this.needsRender = true;
+            }
+            return;
+        }
+        if (key.name === 'home') {
+            this.cursorPos = 0;
+            this.needsRender = true;
+            return;
+        }
+        if (key.name === 'end') {
+            this.cursorPos = this.lines[this.currentLine].length;
+            this.needsRender = true;
+            return;
+        }
+        // Shift+Tab - mode change
+        if (key.shift && key.name === 'tab') {
+            this.emit('modeChange');
+            return;
+        }
+        // Regular character
+        if (str && str.length === 1 && str.charCodeAt(0) >= 32) {
+            // Clear ghost text suggestion when user starts typing
+            if (this.suggestion) {
+                this.suggestion = null;
+            }
+            const line = this.lines[this.currentLine];
+            this.lines[this.currentLine] =
+                line.slice(0, this.cursorPos) + str + line.slice(this.cursorPos);
+            this.cursorPos++;
+            this.resetHistoryNavigation();
+            this.updateAutocomplete();
+            this.needsRender = true;
+        }
+    }
+}