@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/terminal-ui.js

@@ -0,0 +1,2296 @@
+/**
+ * TerminalUI - Single Renderer for Terminal Applications
+ *
+ * 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
+ * - Manages overlays (render, input routing)
+ * - REPL emits events, doesn't manage rendering timing
+ *
+ * Key principles:
+ * - NO scroll regions (preserves terminal scrollback)
+ * - Deterministic render cycle
+ * - All output goes through TerminalUI (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';
+import { LiveRegion } from './live-region.js';
+import { renderMarkdown } from './conversation.js';
+export const DEFAULT_TERMINAL_UI_CONFIG = {
+    verbose: false,
+    theme: 'default',
+    showMascot: true,
+};
+// =============================================================================
+// 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 TerminalUI extends EventEmitter {
+    // Configuration
+    promptPrefix;
+    promptPrefixLen;
+    config;
+    // Conversation history (for re-rendering on config change)
+    conversationHistory = [];
+    // Input state (multiline)
+    lines = [''];
+    currentLine = 0;
+    cursorPos = 0;
+    mode;
+    projectName = null;
+    todos = [];
+    spinnerText = null;
+    spinnerFrame = 0;
+    agentRunning = false;
+    queuedInputs = [];
+    agentMessageQueue = [];
+    currentTool = null;
+    // LiveRegion for running tools (bash, subagents)
+    liveRegion = new LiveRegion();
+    // 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;
+    // Todo visibility (Ctrl+T to toggle)
+    showTodos = true;
+    // View mode (Ctrl+O to toggle verbose view)
+    // normal: compact output
+    // verbose-temp: temporarily show last N items verbose (any key returns to normal)
+    viewMode = 'normal';
+    // Spinner animation - CRT monitor fill effect
+    spinnerFrames = MASCOT.crt;
+    spinnerTimer = null;
+    // Overlay stack (supports nested overlays)
+    overlayStack = [];
+    overlayResolvers = new Map();
+    overlayRenderState = { lineCount: 0, maxLineCount: 0 };
+    // Buffer for items printed while overlay is active (to prevent cursor corruption)
+    overlayPrintBuffer = [];
+    constructor(options = {}) {
+        super();
+        const s = getStyles();
+        this.promptPrefix = options.prompt ?? s.primaryBold('compilr>') + ' ';
+        this.promptPrefixLen = getVisibleLength(this.promptPrefix);
+        this.mode = options.initialMode ?? 'normal';
+        this.config = { ...DEFAULT_TERMINAL_UI_CONFIG, ...options.config };
+    }
+    // ===========================================================================
+    // 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.
+     * Items are stored in conversation history for re-rendering when config changes.
+     *
+     * IMPORTANT: When an overlay is active, items are buffered and rendered after
+     * the overlay closes. This prevents cursor position corruption that causes
+     * ghost lines and visual artifacts.
+     */
+    print(item) {
+        // Store in history for re-render capability
+        this.conversationHistory.push(item);
+        // If overlay is active, buffer the item to render later
+        // This prevents output from corrupting overlay cursor tracking
+        if (this.hasActiveOverlay()) {
+            this.overlayPrintBuffer.push(item);
+            return;
+        }
+        // IMPORTANT: If needsRender is true, render FIRST to update lastRenderHeight.
+        // This prevents ghost lines when footer height changed (e.g., spinner started)
+        // but render loop hasn't fired yet. Without this, clear() uses stale height.
+        if (this.needsRender) {
+            this.render();
+            this.needsRender = false;
+        }
+        // Clear footer, render item, re-render footer
+        this.clear();
+        this.renderItem(item);
+        this.render();
+    }
+    /**
+     * Render a single item to the console.
+     * Config-aware: respects verbose, showMascot settings.
+     */
+    renderItem(item) {
+        const s = getStyles();
+        switch (item.type) {
+            case 'user-message':
+                console.log('');
+                console.log(s.primaryBold('> ') + item.text);
+                console.log(''); // Trailing blank for separation
+                break;
+            case 'agent-text': {
+                // Render markdown for proper formatting (headers, lists, bold, code, etc.)
+                const rendered = renderMarkdown(item.text);
+                // Prefix agent messages with mascot expression (if enabled)
+                if (this.config.showMascot) {
+                    const expr = item.expression ? MASCOT[item.expression] : MASCOT.neutral;
+                    // Only prefix the first line with mascot
+                    const lines = rendered.split('\n');
+                    if (lines.length > 0) {
+                        console.log(s.primary(expr) + s.muted(' > ') + lines[0]);
+                        for (let i = 1; i < lines.length; i++) {
+                            console.log(lines[i]);
+                        }
+                    }
+                }
+                else {
+                    console.log(rendered);
+                }
+                console.log(''); // Trailing blank for separation
+                break;
+            }
+            case 'thinking':
+                // Only show thinking in verbose mode
+                if (this.config.verbose) {
+                    console.log(s.muted(`∴ Thinking…`));
+                    console.log('');
+                    // Indent thinking text
+                    const lines = item.text.split('\n');
+                    for (const line of lines) {
+                        console.log(s.muted(`  ${line}`));
+                    }
+                    console.log('');
+                }
+                // If not verbose, skip entirely (but still stored in history)
+                break;
+            case 'tool-start': {
+                // Truncate long params (e.g., long bash commands)
+                const maxLen = Math.min(60, terminal.getTerminalWidth() - 15);
+                let params = item.params;
+                // Handle multi-line params
+                const nlIdx = params.indexOf('\n');
+                if (nlIdx !== -1) {
+                    const first = params.slice(0, nlIdx).trim();
+                    const count = params.split('\n').length;
+                    params = first.length > 0 ? `${first}… (${String(count)} lines)` : `(${String(count)} line script)`;
+                }
+                // Truncate if still too long
+                if (params.length > maxLen) {
+                    params = params.slice(0, maxLen) + '…';
+                }
+                console.log(s.info(`● ${item.name}`) + s.muted(`(${params})`));
+                break;
+            }
+            case 'tool-result': {
+                // Truncate long params (e.g., long bash commands)
+                const maxParamsLen = Math.min(60, terminal.getTerminalWidth() - 15);
+                let paramsDisplay = item.params;
+                // Handle multi-line params (show first line + count)
+                const newlineIdx = paramsDisplay.indexOf('\n');
+                if (newlineIdx !== -1) {
+                    const firstLine = paramsDisplay.slice(0, newlineIdx).trim();
+                    const lineCount = paramsDisplay.split('\n').length;
+                    paramsDisplay = firstLine.length > 0
+                        ? `${firstLine}… (${String(lineCount)} lines)`
+                        : `(${String(lineCount)} line script)`;
+                }
+                // Truncate if still too long
+                if (paramsDisplay.length > maxParamsLen) {
+                    paramsDisplay = paramsDisplay.slice(0, maxParamsLen) + '…';
+                }
+                console.log(s.info(`● ${item.name}`) + s.muted(`(${paramsDisplay})`));
+                if (item.content) {
+                    const lines = item.content.split('\n').filter((l) => l.length > 0);
+                    const maxPreviewLines = 3;
+                    if (this.config.verbose) {
+                        // Verbose: show all lines
+                        for (const line of lines) {
+                            console.log(s.muted(`  ⎿  ${line}`));
+                        }
+                    }
+                    else if (lines.length > 0) {
+                        // Compact: show first few lines + hidden count
+                        const previewLines = lines.slice(0, maxPreviewLines);
+                        const hiddenCount = lines.length - maxPreviewLines;
+                        for (let i = 0; i < previewLines.length; i++) {
+                            if (i === 0) {
+                                console.log(s.muted(`  ⎿  ${previewLines[i]}`));
+                            }
+                            else {
+                                console.log(s.muted(`     ${previewLines[i]}`));
+                            }
+                        }
+                        if (hiddenCount > 0) {
+                            console.log(s.muted(`     … +${String(hiddenCount)} lines`) + s.muted(' (ctrl+o to expand)'));
+                        }
+                    }
+                    else {
+                        // No output lines
+                        const expandHint = s.muted(' (ctrl+o to expand)');
+                        if (item.success === false) {
+                            console.log(s.error(`  ⎿  ${item.summary}`) + expandHint);
+                        }
+                        else {
+                            console.log(s.muted(`  ⎿  ${item.summary}`) + expandHint);
+                        }
+                    }
+                }
+                else {
+                    // No content, just show summary
+                    if (item.success === false) {
+                        console.log(s.error(`  ⎿  ${item.summary}`));
+                    }
+                    else {
+                        console.log(s.muted(`  ⎿  ${item.summary}`));
+                    }
+                }
+                console.log('');
+                break;
+            }
+            case 'tool-error': {
+                // Truncate long params
+                const maxErrLen = Math.min(60, terminal.getTerminalWidth() - 15);
+                let errParams = item.params;
+                const errNlIdx = errParams.indexOf('\n');
+                if (errNlIdx !== -1) {
+                    const errFirst = errParams.slice(0, errNlIdx).trim();
+                    const errCount = errParams.split('\n').length;
+                    errParams = errFirst.length > 0 ? `${errFirst}… (${String(errCount)} lines)` : `(${String(errCount)} line script)`;
+                }
+                if (errParams.length > maxErrLen) {
+                    errParams = errParams.slice(0, maxErrLen) + '…';
+                }
+                console.log(s.info(`● ${item.name}`) + s.muted(`(${errParams})`));
+                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.
+                    //
+                    // ⚠️ WARNING: This cursor manipulation is fragile!
+                    // It assumes the previous item was user-message which adds a trailing blank.
+                    // If we add items that don't add trailing blanks, or if the rendering
+                    // order changes, this could cause visual artifacts (overwriting content).
+                    // If issues arise, consider tracking the last printed item type instead.
+                    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;
+        }
+    }
+    /**
+     * 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();
+            // Let render loop handle it
+        }
+        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 - LiveRegion (subagents, bash commands)
+    // ===========================================================================
+    /**
+     * Add a subagent to the live region.
+     */
+    addSubagent(id, agentType, description) {
+        const item = {
+            id,
+            type: 'subagent',
+            status: 'running',
+            startTime: Date.now(),
+            agentType,
+            description,
+            toolCount: 0,
+            tokenCount: 0,
+            lastAction: '',
+            lastActionDetails: [],
+        };
+        this.liveRegion.addItem(item);
+        // Let render loop handle it (same as addBashCommand)
+        this.needsRender = true;
+    }
+    /**
+     * Update a subagent's tool usage.
+     */
+    updateSubagentTool(id, toolName, summary) {
+        const item = this.liveRegion.getItem(id);
+        if (item && item.type === 'subagent') {
+            const newAction = `${toolName}: ${summary}`;
+            // Add previous action to history (for expanded view)
+            const updatedDetails = item.lastAction
+                ? [...item.lastActionDetails, item.lastAction]
+                : [...item.lastActionDetails];
+            this.liveRegion.updateItem(id, {
+                toolCount: item.toolCount + 1,
+                lastAction: newAction,
+                lastActionDetails: updatedDetails,
+            });
+            this.needsRender = true;
+        }
+    }
+    /**
+     * Mark a subagent as completed.
+     */
+    completeSubagent(id, success, tokenCount, _error) {
+        const item = this.liveRegion.getItem(id);
+        if (item && item.type === 'subagent') {
+            this.liveRegion.updateItem(id, {
+                status: success ? 'done' : 'error',
+                tokenCount: tokenCount ?? item.tokenCount,
+                endTime: Date.now(),
+            });
+            this.liveRegion.completeItem(id, success ? 'done' : 'error');
+            this.needsRender = true;
+        }
+    }
+    /**
+     * Remove a subagent and return it for committing to scrolling zone.
+     */
+    removeSubagent(id) {
+        const item = this.liveRegion.removeItem(id);
+        this.needsRender = true;
+        return item;
+    }
+    /**
+     * Clear all subagents from live region.
+     */
+    clearLiveRegion() {
+        this.liveRegion.clear();
+        this.needsRender = true;
+    }
+    /**
+     * Toggle expanded view in live region (Ctrl+O).
+     */
+    toggleLiveRegionExpanded() {
+        this.liveRegion.toggleExpanded();
+        this.needsRender = true;
+    }
+    /**
+     * Check if live region has items.
+     */
+    hasLiveItems() {
+        return this.liveRegion.hasItems();
+    }
+    /**
+     * Get live region for direct access if needed.
+     */
+    getLiveRegion() {
+        return this.liveRegion;
+    }
+    // ===========================================================================
+    // Live Region - Bash Commands
+    // ===========================================================================
+    /**
+     * Add a bash command to the live region.
+     */
+    addBashCommand(id, command) {
+        const item = {
+            id,
+            type: 'bash',
+            status: 'running',
+            startTime: Date.now(),
+            command,
+            output: [],
+        };
+        this.liveRegion.addItem(item);
+        this.needsRender = true;
+    }
+    /**
+     * Add output line to a bash command.
+     */
+    updateBashOutput(id, line) {
+        const item = this.liveRegion.getItem(id);
+        if (item && item.type === 'bash') {
+            item.output.push(line);
+            this.liveRegion.updateItem(id, { output: [...item.output] });
+            this.needsRender = true;
+        }
+    }
+    /**
+     * Mark a bash command as completed.
+     */
+    completeBashCommand(id, exitCode) {
+        const item = this.liveRegion.getItem(id);
+        if (item && item.type === 'bash') {
+            this.liveRegion.updateItem(id, {
+                status: exitCode === 0 ? 'done' : 'error',
+                exitCode,
+                endTime: Date.now(),
+            });
+            this.liveRegion.completeItem(id, exitCode === 0 ? 'done' : 'error');
+            this.needsRender = true;
+        }
+    }
+    /**
+     * Remove a bash command and commit it to the scrolling zone.
+     */
+    commitBashCommand(id) {
+        const item = this.liveRegion.removeItem(id);
+        if (item && item.type === 'bash') {
+            const output = item.output.join('\n') || '(no output)';
+            const exitCode = item.exitCode ?? 0;
+            // Print the bash output to scrolling zone
+            this.print({
+                type: 'tool-result',
+                name: 'Bash',
+                params: item.command,
+                summary: exitCode === 0 ? 'Completed' : `Exit code ${String(exitCode)}`,
+                content: output,
+                success: exitCode === 0,
+            });
+        }
+        this.needsRender = true;
+    }
+    /**
+     * Remove a subagent and commit it to the scrolling zone.
+     * This is the atomic equivalent of commitBashCommand for subagents.
+     * The result content comes from tool_end, not from the LiveRegion item.
+     */
+    commitSubagent(id, resultContent, success) {
+        // Remove from LiveRegion FIRST (no needsRender yet - that's the key!)
+        const item = this.liveRegion.removeItem(id);
+        if (item && item.type === 'subagent') {
+            // Build summary from item stats
+            const toolCount = item.toolCount;
+            const tokenCount = item.tokenCount;
+            const duration = item.endTime
+                ? Math.round((item.endTime - item.startTime) / 1000)
+                : Math.round((Date.now() - item.startTime) / 1000);
+            const tokenStr = tokenCount > 0 ? `, ${this.formatTokens(tokenCount)} tokens` : '';
+            const summary = `${String(toolCount)} tool calls${tokenStr}, ${String(duration)}s`;
+            // Print atomically (uses current lastRenderHeight before it changes)
+            this.print({
+                type: 'tool-result',
+                name: item.agentType,
+                params: item.description,
+                summary,
+                content: resultContent.length > 200 ? resultContent : undefined,
+                success,
+            });
+            // Reset spinner text
+            this.spinnerText = null;
+        }
+        // Set needsRender AFTER print (same pattern as commitBashCommand)
+        this.needsRender = true;
+        return item;
+    }
+    /**
+     * Format token count (e.g., 5000 -> "5.0k")
+     */
+    formatTokens(tokens) {
+        if (tokens >= 1000) {
+            return `${(tokens / 1000).toFixed(1)}k`;
+        }
+        return String(tokens);
+    }
+    /**
+     * Toggle todo list visibility (Ctrl+T)
+     */
+    toggleTodos() {
+        this.showTodos = !this.showTodos;
+        this.needsRender = true;
+    }
+    /**
+     * Set todo list visibility
+     */
+    setShowTodos(show) {
+        this.showTodos = show;
+        this.needsRender = true;
+    }
+    /**
+     * Get todo list visibility
+     */
+    getShowTodos() {
+        return this.showTodos;
+    }
+    /**
+     * Toggle verbose view mode (Ctrl+O)
+     * Shows conversation in verbose mode temporarily.
+     * Any key returns to normal view.
+     */
+    toggleVerboseView() {
+        if (this.viewMode === 'normal') {
+            this.viewMode = 'verbose-temp';
+            this.reRenderConversationVerbose(true);
+        }
+        else {
+            this.viewMode = 'normal';
+            this.reRenderConversationVerbose(false);
+        }
+    }
+    /**
+     * Re-render conversation with temporary verbose setting.
+     */
+    reRenderConversationVerbose(verbose) {
+        const s = getStyles();
+        // Clear screen and scrollback buffer
+        process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
+        // Reset footer state
+        this.lastRenderHeight = 0;
+        this.cursorLineFromBottom = 0;
+        // Show mode indicator at top
+        if (verbose) {
+            console.log(s.info(`[Verbose View Mode] Press any key to return to normal view`));
+            console.log('');
+        }
+        // Re-render all items with temporary verbose override
+        const originalVerbose = this.config.verbose;
+        this.config.verbose = verbose;
+        for (const item of this.conversationHistory) {
+            this.renderItem(item);
+        }
+        // Restore original config
+        this.config.verbose = originalVerbose;
+        // Footer will be re-rendered by the render loop
+        this.needsRender = true;
+    }
+    // ===========================================================================
+    // Public API - Config
+    // ===========================================================================
+    /**
+     * Update configuration at runtime.
+     * If verbose changes, re-renders the entire conversation.
+     */
+    setConfig(newConfig) {
+        const oldVerbose = this.config.verbose;
+        this.config = { ...this.config, ...newConfig };
+        // If verbose changed, re-render entire conversation
+        if (newConfig.verbose !== undefined && newConfig.verbose !== oldVerbose) {
+            this.reRenderConversation();
+        }
+        // Theme change requires prompt refresh
+        if (newConfig.theme !== undefined) {
+            this.refreshPrompt();
+        }
+        this.needsRender = true;
+    }
+    /**
+     * Get current configuration.
+     */
+    getConfig() {
+        return { ...this.config };
+    }
+    /**
+     * Re-render entire conversation with current config.
+     * Called when verbose mode changes.
+     */
+    reRenderConversation() {
+        // Clear screen AND scrollback buffer, then move to home
+        // \x1b[2J - clear entire screen
+        // \x1b[3J - clear scrollback buffer (prevents accumulation)
+        // \x1b[H  - move cursor to home position
+        process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
+        // Reset footer state since we cleared everything
+        this.lastRenderHeight = 0;
+        this.cursorLineFromBottom = 0;
+        // Re-render all items with new config
+        for (const item of this.conversationHistory) {
+            this.renderItem(item);
+        }
+        // Footer will be re-rendered by the render loop
+        this.needsRender = true;
+    }
+    // ===========================================================================
+    // Public API - Conversation History
+    // ===========================================================================
+    /**
+     * Clear conversation history.
+     * Called by /clear command.
+     */
+    clearConversationHistory() {
+        this.conversationHistory = [];
+    }
+    /**
+     * Get conversation history (copy).
+     */
+    getConversationHistory() {
+        return [...this.conversationHistory];
+    }
+    // ===========================================================================
+    // Public API - Overlays
+    // ===========================================================================
+    /**
+     * Check if an overlay is currently active.
+     */
+    hasActiveOverlay() {
+        return this.overlayStack.length > 0;
+    }
+    /**
+     * Get the currently active overlay (if any).
+     */
+    getActiveOverlay() {
+        return this.overlayStack.length > 0
+            ? this.overlayStack[this.overlayStack.length - 1]
+            : null;
+    }
+    /**
+     * Show an overlay and wait for result.
+     * Returns promise that resolves when overlay closes.
+     */
+    async showOverlay(overlay) {
+        // Check if we're pushing onto an existing overlay (stack has items before this push)
+        const isPushingOntoExisting = this.overlayStack.length > 0;
+        // 1. If pushing onto existing overlay, clear its render first
+        if (isPushingOntoExisting) {
+            this.clearOverlayRender();
+        }
+        // 2. Push overlay onto stack
+        this.overlayStack.push(overlay);
+        // 3. Call onMount lifecycle (alternate screen overlays enter alternate screen here)
+        await overlay.onMount?.();
+        // 4. Switch render mode based on overlay type
+        // Skip for alternate screen overlays - they manage their own screen buffer
+        if (!overlay.usesAlternateScreen) {
+            if (overlay.type === 'fullscreen') {
+                this.enterFullscreenOverlayMode();
+            }
+            else {
+                this.enterInlineOverlayMode();
+            }
+        }
+        // 5. Initial render
+        this.renderOverlay();
+        // 6. Wait for close
+        return new Promise((resolve) => {
+            this.overlayResolvers.set(overlay.id, resolve);
+        });
+    }
+    /**
+     * Close current overlay with result.
+     * Called internally when overlay returns close action.
+     */
+    closeCurrentOverlay(result, cancelled) {
+        const overlay = this.overlayStack.pop();
+        if (!overlay)
+            return;
+        // Check if overlay uses alternate screen (manages its own screen buffer)
+        const usesAlternateScreen = overlay.usesAlternateScreen === true;
+        // 1. Call onUnmount lifecycle (this exits alternate screen if used)
+        overlay.onUnmount?.();
+        // 2. Get close summary before clearing (needs overlay reference)
+        const summary = (!cancelled && result !== null)
+            ? overlay.getCloseSummary?.(result)
+            : null;
+        // 3. Restore render mode FIRST (clears overlay from screen)
+        if (this.overlayStack.length === 0) {
+            // Skip exitOverlayMode for alternate screen overlays - exiting alternate
+            // screen already restored the main screen, clearing would corrupt it
+            if (usesAlternateScreen) {
+                // Just reset state, skip clearing AND skip re-rendering footer
+                // (alternate screen restore already put the screen back to its previous state)
+                this.overlayRenderState = { lineCount: 0, maxLineCount: 0 };
+                this.flushOverlayPrintBuffer();
+                // Don't call render() - the footer was restored by alternate screen exit
+            }
+            else {
+                this.exitOverlayMode();
+            }
+        }
+        else {
+            // Popping back to parent overlay:
+            // 1. Clear the child overlay's render (skip for alternate screen)
+            if (!usesAlternateScreen) {
+                this.clearOverlayRender();
+            }
+            // 2. Reset render state for parent
+            this.overlayRenderState = { lineCount: 0, maxLineCount: 0 };
+            // 3. Re-render parent overlay
+            this.renderOverlay();
+        }
+        // 4. Show close summary AFTER clearing overlay
+        if (summary) {
+            this.print({ type: 'info', message: summary });
+        }
+        // 5. Resolve promise
+        const resolver = this.overlayResolvers.get(overlay.id);
+        resolver?.(result);
+        this.overlayResolvers.delete(overlay.id);
+    }
+    /**
+     * Enter fullscreen overlay mode.
+     * Clears screen and prepares for overlay rendering.
+     */
+    enterFullscreenOverlayMode() {
+        // Clear footer first
+        this.clear();
+        // Clear screen for fullscreen overlay
+        process.stdout.write('\x1b[2J\x1b[H');
+        // Reset overlay render state (both lineCount and maxLineCount)
+        this.overlayRenderState = { lineCount: 0, maxLineCount: 0 };
+    }
+    /**
+     * Enter inline overlay mode.
+     * Clears footer but keeps conversation visible.
+     */
+    enterInlineOverlayMode() {
+        // Clear footer to make room for inline overlay
+        this.clear();
+        // Reset overlay render state (both lineCount and maxLineCount)
+        this.overlayRenderState = { lineCount: 0, maxLineCount: 0 };
+    }
+    /**
+     * Exit overlay mode and restore normal rendering.
+     */
+    exitOverlayMode() {
+        // Clear overlay content (uses maxLineCount to ensure all lines are cleared)
+        this.clearOverlayRender();
+        // Reset state
+        this.overlayRenderState = { lineCount: 0, maxLineCount: 0 };
+        // Flush any items that were buffered while overlay was active
+        this.flushOverlayPrintBuffer();
+        // Re-render footer
+        this.render();
+    }
+    /**
+     * Flush items that were buffered while an overlay was active.
+     * Called after overlay closes to render any pending output.
+     */
+    flushOverlayPrintBuffer() {
+        if (this.overlayPrintBuffer.length === 0)
+            return;
+        // Render all buffered items
+        for (const item of this.overlayPrintBuffer) {
+            this.renderItem(item);
+        }
+        // Clear the buffer
+        this.overlayPrintBuffer = [];
+    }
+    /**
+     * Clear previous overlay render.
+     * Uses maxLineCount to ensure all lines are cleared even if content shrank between renders.
+     */
+    clearOverlayRender() {
+        // Use maxLineCount to handle cases where overlay content varied between renders
+        const linesToClear = this.overlayRenderState.maxLineCount;
+        if (linesToClear > 0) {
+            // Move cursor up to start of overlay
+            process.stdout.write(`\x1b[${String(linesToClear)}A`);
+            // Move to column 1
+            process.stdout.write('\r');
+            // Clear from cursor to end of screen
+            process.stdout.write('\x1b[J');
+        }
+    }
+    /**
+     * Render the active overlay.
+     */
+    renderOverlay() {
+        const overlay = this.getActiveOverlay();
+        if (!overlay)
+            return;
+        const termWidth = terminal.getTerminalWidth();
+        const termHeight = terminal.getTerminalHeight();
+        const s = getStyles();
+        const context = {
+            width: termWidth,
+            height: termHeight,
+            styles: s,
+        };
+        const content = overlay.render(context);
+        if (overlay.type === 'fullscreen') {
+            this.renderFullscreenOverlay(content, termWidth);
+        }
+        else {
+            this.renderInlineOverlay(content, termWidth);
+        }
+    }
+    /**
+     * Render fullscreen overlay.
+     *
+     * CRITICAL: Cursor positioning must be consistent between renders.
+     * Same logic as renderInlineOverlay - pad to maxLineCount for consistency.
+     */
+    renderFullscreenOverlay(content, termWidth) {
+        // Clear previous render
+        this.clearOverlayRender();
+        // Calculate physical lines
+        let physicalLines = 0;
+        for (const line of content.lines) {
+            const visibleLen = getVisibleLength(line);
+            physicalLines += Math.max(1, Math.ceil(visibleLen / termWidth));
+        }
+        // Update maxLineCount BEFORE padding (track the natural maximum)
+        const contentMinHeight = content.minHeight ?? 0;
+        const naturalHeight = Math.max(physicalLines, contentMinHeight);
+        this.overlayRenderState.maxLineCount = Math.max(this.overlayRenderState.maxLineCount, naturalHeight);
+        // CRITICAL: Pad to maxLineCount for consistent cursor positioning
+        const targetHeight = this.overlayRenderState.maxLineCount;
+        const paddedLines = [...content.lines];
+        while (physicalLines < targetHeight) {
+            paddedLines.push('');
+            physicalLines++;
+        }
+        // Update lineCount to actual rendered height
+        this.overlayRenderState.lineCount = physicalLines;
+        // Render lines
+        for (let i = 0; i < paddedLines.length; i++) {
+            process.stdout.write(paddedLines[i]);
+            if (i < paddedLines.length - 1) {
+                process.stdout.write('\n');
+            }
+        }
+        // Position cursor if specified
+        if (content.cursorPosition) {
+            const { line, column } = content.cursorPosition;
+            // Move to the correct line (relative from end)
+            const linesFromEnd = paddedLines.length - 1 - line;
+            if (linesFromEnd > 0) {
+                process.stdout.write(`\x1b[${String(linesFromEnd)}A`);
+            }
+            process.stdout.write(`\x1b[${String(column)}G`);
+        }
+        terminal.showCursor();
+    }
+    /**
+     * Render inline overlay (above footer).
+     *
+     * CRITICAL: Cursor positioning must be consistent between renders.
+     * After rendering, cursor MUST be at maxLineCount position, not at
+     * actual content height. Otherwise, the next clear will move cursor
+     * up by maxLineCount from the wrong position, causing "ghost lines".
+     */
+    renderInlineOverlay(content, termWidth) {
+        // Clear previous render
+        this.clearOverlayRender();
+        // Calculate physical lines
+        let physicalLines = 0;
+        for (const line of content.lines) {
+            const visibleLen = getVisibleLength(line);
+            physicalLines += Math.max(1, Math.ceil(visibleLen / termWidth));
+        }
+        // Update maxLineCount BEFORE padding (track the natural maximum)
+        const contentMinHeight = content.minHeight ?? 0;
+        const naturalHeight = Math.max(physicalLines, contentMinHeight);
+        this.overlayRenderState.maxLineCount = Math.max(this.overlayRenderState.maxLineCount, naturalHeight);
+        // CRITICAL: Pad to maxLineCount, not just minHeight!
+        // This ensures cursor position is consistent between renders.
+        // Without this, going from tall content (e.g., detail screen with 25 lines)
+        // to short content (e.g., main list with 20 lines) leaves cursor at line 20,
+        // but next clear moves up 25 lines → cursor goes to line -5 → ghost lines!
+        const targetHeight = this.overlayRenderState.maxLineCount;
+        const paddedLines = [...content.lines];
+        while (physicalLines < targetHeight) {
+            paddedLines.push('');
+            physicalLines++;
+        }
+        // Update lineCount to actual rendered height
+        this.overlayRenderState.lineCount = physicalLines;
+        // Render lines (each line ends with \n for consistent cursor positioning)
+        for (const line of paddedLines) {
+            process.stdout.write(line + '\n');
+        }
+        terminal.showCursor();
+    }
+    /**
+     * Process overlay action returned by handleKey.
+     */
+    processOverlayAction(action) {
+        switch (action.type) {
+            case 'none':
+                // Do nothing
+                break;
+            case 'render':
+                this.renderOverlay();
+                break;
+            case 'close':
+                if (action.cancelled) {
+                    this.closeCurrentOverlay(null, true);
+                }
+                else {
+                    this.closeCurrentOverlay(action.result ?? null, false);
+                }
+                break;
+            case 'push':
+                if (action.overlay) {
+                    void this.showOverlay(action.overlay);
+                }
+                break;
+            case 'pop':
+                this.closeCurrentOverlay(null, true);
+                break;
+        }
+    }
+    // ===========================================================================
+    // 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 - Agent message queue
+    // ===========================================================================
+    /**
+     * Queue a message to be sent to the agent.
+     * Used by commands that need to invoke the agent programmatically.
+     */
+    queueAgentMessage(options) {
+        this.agentMessageQueue.push(options);
+    }
+    /**
+     * Pop the next agent message from the queue.
+     */
+    popAgentMessage() {
+        return this.agentMessageQueue.shift() ?? null;
+    }
+    /**
+     * Check if there are queued agent messages.
+     */
+    hasAgentMessage() {
+        return this.agentMessageQueue.length > 0;
+    }
+    /**
+     * Clear all queued agent messages.
+     */
+    clearAgentMessageQueue() {
+        this.agentMessageQueue = [];
+    }
+    // ===========================================================================
+    // 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();
+        // Move cursor to TOP of footer
+        // cursorRowFromTop = which row the cursor is on (1-indexed from top of footer)
+        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;
+        }
+        // Don't render footer when overlay is active
+        if (this.hasActiveOverlay()) {
+            return;
+        }
+        const termWidth = terminal.getTerminalWidth();
+        const s = getStyles();
+        // Build all lines in order
+        const lines = [];
+        // 0. LiveRegion (if has items) - rendered at top of footer
+        if (this.liveRegion.hasItems()) {
+            const liveLines = this.liveRegion.render({
+                width: termWidth,
+                verbose: this.config.verbose,
+                showTokens: true,
+            });
+            for (const line of liveLines) {
+                lines.push({
+                    content: line,
+                    physicalLines: getPhysicalLineCount(line, termWidth),
+                });
+            }
+            // Blank line after live region for spacing
+            if (liveLines.length > 0) {
+                lines.push({ content: '', physicalLines: 1 });
+            }
+        }
+        // 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 (show if there are todos AND showTodos is true)
+        if (this.todos.length > 0 && this.showTodos) {
+            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...';
+        // Build hints
+        const hints = ['esc to interrupt'];
+        if (this.todos.length > 0 && this.showTodos) {
+            hints.push('ctrl+t to hide todos');
+        }
+        else if (this.todos.length > 0 && !this.showTodos) {
+            hints.push('ctrl+t to show todos');
+        }
+        const hintsText = hints.length > 0 ? ` (${hints.join(' · ')})` : '';
+        // Format: [CRT scanner] text (hints)
+        return s.muted(`${frame} ${text}${hintsText}`);
+    }
+    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() {
+        // In verbose-temp mode, escape returns to normal
+        if (this.viewMode === 'verbose-temp') {
+            this.viewMode = 'normal';
+            this.reRenderConversationVerbose(false);
+            return;
+        }
+        // Route escape to active overlay if present
+        const overlay = this.getActiveOverlay();
+        if (overlay) {
+            const keyEvent = {
+                raw: Buffer.from([0x1b]),
+                name: 'escape',
+                ctrl: false,
+                shift: false,
+                meta: false,
+            };
+            const actionOrPromise = overlay.handleKey(keyEvent);
+            // Handle both sync and async handleKey
+            if (actionOrPromise instanceof Promise) {
+                actionOrPromise
+                    .then((action) => { this.processOverlayAction(action); })
+                    .catch((err) => { console.error('Overlay handleKey error:', err); });
+            }
+            else {
+                this.processOverlayAction(actionOrPromise);
+            }
+            return;
+        }
+        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');
+        }
+    }
+    /**
+     * Handle keypress when overlay is active.
+     * Converts keyboard event to KeyEvent and routes to overlay.
+     */
+    handleOverlayKeypress(str, key) {
+        const overlay = this.getActiveOverlay();
+        if (!overlay)
+            return;
+        // Build KeyEvent from keypress data
+        const rawData = key.sequence ?? str;
+        const keyName = key.name ?? (str ? str.toLowerCase() : '');
+        const keyEvent = {
+            raw: Buffer.from(rawData),
+            name: keyName,
+            char: str && str.length === 1 && str.charCodeAt(0) >= 32 ? str : undefined,
+            ctrl: key.ctrl ?? false,
+            shift: key.shift ?? false,
+            meta: key.meta ?? false,
+        };
+        const actionOrPromise = overlay.handleKey(keyEvent);
+        // Handle both sync and async handleKey
+        if (actionOrPromise instanceof Promise) {
+            actionOrPromise
+                .then((action) => { this.processOverlayAction(action); })
+                .catch((err) => { console.error('Overlay handleKey error:', err); });
+        }
+        else {
+            this.processOverlayAction(actionOrPromise);
+        }
+    }
+    handleKeypress(str, key) {
+        // Route to active overlay if present
+        if (this.hasActiveOverlay()) {
+            this.handleOverlayKeypress(str, key);
+            return;
+        }
+        // In verbose-temp mode, any key (except Ctrl+O) returns to normal
+        if (this.viewMode === 'verbose-temp') {
+            // Ctrl+O toggles back
+            if (key.ctrl && key.name === 'o') {
+                this.toggleVerboseView();
+                this.toggleLiveRegionExpanded();
+                return;
+            }
+            // Any other key returns to normal
+            this.viewMode = 'normal';
+            this.reRenderConversationVerbose(false);
+            // Don't consume the key - let it be processed normally
+        }
+        // Ctrl+C - interrupt/exit
+        if (key.ctrl && key.name === 'c') {
+            this.emit('interrupt');
+            return;
+        }
+        // Ctrl+T - toggle todo list visibility
+        if (key.ctrl && key.name === 't') {
+            this.toggleTodos();
+            return;
+        }
+        // Ctrl+O - toggle verbose view mode AND LiveRegion expansion
+        if (key.ctrl && key.name === 'o') {
+            this.toggleVerboseView();
+            this.toggleLiveRegionExpanded();
+            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;
+        }
+    }
+}