@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/input-prompt.js

@@ -1,83 +1,174 @@
 /**
- * Input Prompt
+ * Input Prompt v2 (Event-Driven)
  *
- * @deprecated This module is superseded by input-prompt-v2.ts which uses
- * event-driven architecture for non-blocking input with queue mode support.
- * This file is kept for reference and may be removed in a future cleanup.
+ * Refactored input handling with event-driven architecture.
+ * - Emits events instead of blocking with getInput()
+ * - Supports queue mode for capturing input during agent execution
+ * - Always captures keystrokes (no blocking)
  *
- * Self-contained input handling with multiline support, autocomplete,
- * history navigation, and proper visual line navigation.
+ * Events:
+ * - 'submit' - User pressed Enter with input
+ * - 'command' - User submitted a slash command
+ * - 'cancel' - User pressed Ctrl+C
+ * - 'escape' - User pressed Esc (for aborting agent)
+ * - 'change' - Input text changed
  */
-import pc from 'picocolors';
+import { EventEmitter } from 'events';
+import { Chalk } from 'chalk';
+import { getStyles } from '../themes/index.js';
 import * as terminal from './terminal.js';
+import { getFileMatches, extractAtMention, replaceAtMention, extractDollarMention, replaceDollarMention, } from './file-autocomplete.js';
+import { debugRender } from '../utils/debug-log.js';
+import { stripAnsi as unifiedStripAnsi, getPhysicalLineCountWithOffset, } from './line-utils.js';
 // =============================================================================
 // Constants
 // =============================================================================
+// Force color output (level 3 = 24-bit true color)
+const chalk = new Chalk({ level: 3 });
 const MAX_VISIBLE_COMMANDS = 10;
 // =============================================================================
-// Default Commands
+// Default Commands (from central registry)
 // =============================================================================
-export const DEFAULT_COMMANDS = [
-    { command: '/help', description: 'Show available commands' },
-    { command: '/exit', description: 'Quit the demo' },
-    { command: '/clear', description: 'Clear conversation history' },
-    { command: '/compact', description: 'Summarize old messages' },
-    { command: '/tools', description: 'List available tools' },
-    { command: '/tokens', description: 'Show session token usage' },
-    { command: '/context', description: 'Show context window usage' },
-];
+export const DEFAULT_COMMANDS = [];
 // =============================================================================
 // Helper Functions
 // =============================================================================
 /**
  * Strip ANSI codes from string
+ * Uses unified line-utils for consistent behavior across components.
  */
 export function stripAnsi(str) {
-    // eslint-disable-next-line no-control-regex
-    return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, '');
+    return unifiedStripAnsi(str);
+}
+/**
+ * Format input text with syntax highlighting for special prefixes.
+ * - $agent references: bold + secondary color
+ * - @path references: secondary color
+ * - /commands: primary color
+ */
+function formatInputText(text) {
+    const s = getStyles();
+    let result = text;
+    // Format $agent references - bold + secondary
+    // Match $word at word boundaries (not inside other text)
+    result = result.replace(/(?<![$\w])\$([a-zA-Z_][a-zA-Z0-9_]*)\b/g, (_match, agentId) => chalk.bold(s.secondary(`$${agentId}`)));
+    // Format @path references - secondary (not bold, paths can be long)
+    // Match @word or @path/to/file patterns
+    result = result.replace(/(?<![@\w])@([\w./-]+)/g, (_match, path) => s.secondary(`@${path}`));
+    // Format /commands at start of input - primary color
+    // Only match at start of line (after optional whitespace)
+    result = result.replace(/^(\s*)(\/[a-zA-Z][a-zA-Z0-9_-]*)/g, (_match, space, cmd) => space + s.primary(cmd));
+    return result;
 }
 /**
  * Calculate physical lines for wrapped text
+ * Uses unified line-utils for consistent behavior across components.
  */
 function calcPhysicalLines(text, startCol, termWidth) {
-    if (text.length === 0)
-        return 1;
-    const totalLen = startCol + text.length;
-    return Math.ceil(totalLen / termWidth) || 1;
+    return getPhysicalLineCountWithOffset(text, startCol, termWidth);
 }
 /**
- * Filter commands matching input
+ * 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]) {
+            // Bonus for consecutive matches
+            if (lastMatchIdx === i - 1) {
+                consecutiveBonus += 10;
+            }
+            lastMatchIdx = i;
+            queryIdx++;
+        }
+    }
+    // All query characters found in order
+    if (queryIdx === queryLower.length) {
+        return 100 + consecutiveBonus + (100 - target.length);
+    }
+    // No match
+    return -1;
+}
+/**
+ * Filter and rank commands matching input using fuzzy matching
  */
 function filterCommands(input, commands) {
-    const lower = input.toLowerCase();
-    return commands.filter((cmd) => cmd.command.toLowerCase().startsWith(lower));
+    // Score all commands
+    const scored = commands
+        .map((cmd) => ({
+        cmd,
+        score: fuzzyMatchScore(input, cmd.command),
+    }))
+        .filter((item) => item.score >= 0);
+    // Sort by score (highest first)
+    scored.sort((a, b) => b.score - a.score);
+    return scored.map((item) => item.cmd);
 }
 // =============================================================================
 // Input Prompt Class
 // =============================================================================
-export class InputPrompt {
+export class InputPrompt extends EventEmitter {
     // Configuration
     prompt;
     promptLen;
     showSeparators;
     commands;
-    getTodos;
+    getAgentSuggestions;
+    getCommands;
     // Input state
     state = {
         lines: [''],
         currentLine: 0,
         cursorPos: 0,
     };
-    // Autocomplete
+    // Command autocomplete (for /commands)
     autocomplete = {
         active: false,
         matches: [],
         selectedIndex: 0,
+        scrollOffset: 0,
+    };
+    // File autocomplete (for @paths)
+    fileAutocomplete = {
+        active: false,
+        matches: [],
+        selectedIndex: 0,
+        scrollOffset: 0,
+        partial: '',
+    };
+    // Agent autocomplete (for $agents)
+    agentAutocomplete = {
+        active: false,
+        matches: [],
+        selectedIndex: 0,
+        scrollOffset: 0,
+        partial: '',
+        startPos: 0,
+        lineIndex: 0,
     };
     // History
     history = [];
     historyIndex = -1;
     savedInput = '';
+    // Queue mode
+    queueMode = false;
+    queuedInputs = [];
     // Rendering tracking
     renderedLines = 0;
     dropdownLines = 0;
@@ -85,29 +176,56 @@ export class InputPrompt {
     hasSeparators = false;
     // Control
     isRunning = false;
-    resolveInput = null;
+    // Double Esc detection
+    lastEscTime = 0;
+    DOUBLE_ESC_THRESHOLD_MS = 500; // 500ms window for double Esc
+    // Suggestion (ghost text for next action)
+    suggestion = null;
     constructor(options = {}) {
-        this.prompt = options.prompt ?? pc.cyan('❯ ');
+        super();
+        this.prompt = options.prompt ?? getStyles().primary('❯ ');
         this.promptLen = stripAnsi(this.prompt).length;
         this.showSeparators = options.showSeparators ?? true;
         this.commands = options.commands ?? DEFAULT_COMMANDS;
-        this.getTodos = options.getTodos;
+        this.getAgentSuggestions = options.getAgentSuggestions;
+        this.getCommands = options.getCommands;
     }
     // ===========================================================================
     // Public API
     // ===========================================================================
     /**
-     * Get input from user (async)
-     * Returns when user submits or cancels
+     * Update the prompt string (for dynamic theme changes)
      */
-    async getInput() {
-        return new Promise((resolve) => {
-            this.resolveInput = resolve;
-            this.start();
-        });
+    setPrompt(prompt) {
+        this.prompt = prompt;
+        this.promptLen = stripAnsi(prompt).length;
+    }
+    /**
+     * Set a suggestion for the next action (ghost text)
+     */
+    setSuggestion(action) {
+        this.suggestion = action;
+    }
+    /**
+     * Get the current suggestion
+     */
+    getSuggestion() {
+        return this.suggestion;
+    }
+    /**
+     * Clear the current suggestion
+     */
+    clearSuggestion() {
+        this.suggestion = null;
+    }
+    /**
+     * Set the callback to get available team agents for $ autocomplete
+     */
+    setAgentSuggestionsCallback(callback) {
+        this.getAgentSuggestions = callback;
     }
     /**
-     * Start input mode
+     * Start input capture (non-blocking, event-driven)
      */
     start() {
         if (this.isRunning)
@@ -115,17 +233,67 @@ export class InputPrompt {
         this.isRunning = true;
         terminal.enableRawMode();
         this.resetState();
-        this.render();
         process.stdin.on('data', this.handleData);
     }
     /**
-     * Stop input mode
+     * Stop input capture
      */
     stop() {
+        if (!this.isRunning)
+            return;
         this.isRunning = false;
         terminal.disableRawMode();
         process.stdin.removeListener('data', this.handleData);
     }
+    /**
+     * Check if running
+     */
+    isActive() {
+        return this.isRunning;
+    }
+    /**
+     * Enable/disable queue mode
+     * In queue mode, Enter adds to queue instead of emitting 'submit'
+     */
+    setQueueMode(enabled) {
+        this.queueMode = enabled;
+    }
+    /**
+     * Check if in queue mode
+     */
+    isQueueMode() {
+        return this.queueMode;
+    }
+    /**
+     * Get all queued inputs (FIFO order)
+     */
+    getQueuedInputs() {
+        return [...this.queuedInputs];
+    }
+    /**
+     * Pop the first queued input
+     */
+    popQueuedInput() {
+        return this.queuedInputs.shift() ?? null;
+    }
+    /**
+     * Check if there are queued inputs
+     */
+    hasQueuedInput() {
+        return this.queuedInputs.length > 0;
+    }
+    /**
+     * Get number of queued inputs
+     */
+    getQueueLength() {
+        return this.queuedInputs.length;
+    }
+    /**
+     * Clear the queue
+     */
+    clearQueue() {
+        this.queuedInputs = [];
+    }
     /**
      * Get current buffer value
      */
@@ -139,37 +307,235 @@ export class InputPrompt {
         this.state.lines = value.split('\n');
         this.state.currentLine = this.state.lines.length - 1;
         this.state.cursorPos = this.state.lines[this.state.currentLine].length;
-        if (this.isRunning) {
-            this.updateAutocomplete();
-            this.render();
+        this.updateAutocomplete();
+    }
+    /**
+     * Clear input buffer
+     */
+    clearInput() {
+        this.state = {
+            lines: [''],
+            currentLine: 0,
+            cursorPos: 0,
+        };
+        this.autocomplete = {
+            active: false,
+            matches: [],
+            selectedIndex: 0,
+            scrollOffset: 0,
+        };
+        this.fileAutocomplete = {
+            active: false,
+            matches: [],
+            selectedIndex: 0,
+            scrollOffset: 0,
+            partial: '',
+        };
+        this.agentAutocomplete = {
+            active: false,
+            matches: [],
+            selectedIndex: 0,
+            scrollOffset: 0,
+            partial: '',
+            startPos: 0,
+            lineIndex: 0,
+        };
+    }
+    /**
+     * Add command to history
+     */
+    addToHistory(input) {
+        if (input.trim() && (this.history.length === 0 || this.history[this.history.length - 1] !== input)) {
+            this.history.push(input);
         }
     }
     /**
-     * Clear the rendered area
+     * Render the input prompt - returns array of lines
+     * Does NOT write to terminal (Footer handles that)
      */
-    clear() {
-        this.clearDropdown();
-        if (this.linesAboveCursor > 0) {
-            terminal.moveCursorToLineStart();
-            terminal.moveCursorUp(this.linesAboveCursor);
+    render() {
+        const lines = [];
+        // Top separator
+        if (this.showSeparators) {
+            lines.push(this.getSeparatorLine());
         }
-        terminal.clearToEndOfScreen();
-        this.renderedLines = 0;
-        this.linesAboveCursor = 0;
+        // Input lines
+        const s = getStyles();
+        for (let i = 0; i < this.state.lines.length; i++) {
+            const linePrompt = i === 0 ? this.prompt : s.muted('   \\ ');
+            const lineContent = this.state.lines[i];
+            // Show suggestion as ghost text on first line when input is empty
+            if (i === 0 && lineContent === '' && this.suggestion && !this.autocomplete.active && !this.fileAutocomplete.active) {
+                const hint = s.muted(' (tab to accept)');
+                lines.push(linePrompt + s.muted(this.suggestion) + hint);
+            }
+            else {
+                // Format special prefixes: $agent, @path, /command
+                const formattedContent = formatInputText(lineContent);
+                lines.push(linePrompt + formattedContent);
+            }
+        }
+        // Bottom separator
+        if (this.showSeparators) {
+            lines.push(this.getSeparatorLine());
+        }
+        return lines;
     }
     /**
-     * Get number of rendered lines
+     * Get the cursor position info for rendering
      */
-    getRenderedLines() {
-        return this.renderedLines + this.dropdownLines + (this.showSeparators ? 2 : 0);
+    getCursorInfo() {
+        const termWidth = terminal.getTerminalWidth();
+        const currentLinePromptLen = this.state.currentLine === 0 ? this.promptLen : 5;
+        const cursorAbsPos = currentLinePromptLen + this.state.cursorPos;
+        // Calculate which row within input (accounting for separators)
+        let row = this.showSeparators ? 1 : 0; // Start after top separator
+        for (let i = 0; i < this.state.currentLine; i++) {
+            const lp = i === 0 ? this.promptLen : 5;
+            row += calcPhysicalLines(this.state.lines[i], lp, termWidth);
+        }
+        row += Math.floor(cursorAbsPos / termWidth);
+        const col = cursorAbsPos % termWidth;
+        debugRender('InputPrompt:getCursorInfo', `termWidth=${String(termWidth)} cursorPos=${String(this.state.cursorPos)} currentLine=${String(this.state.currentLine)} promptLen=${String(this.promptLen)}`);
+        debugRender('InputPrompt:getCursorInfo', `cursorAbsPos=${String(cursorAbsPos)} row=${String(row)} col=${String(col)}`);
+        return { row, col };
     }
     /**
-     * Add command to history
+     * Get autocomplete dropdown lines (if active)
      */
-    addToHistory(input) {
-        if (input.trim() && (this.history.length === 0 || this.history[this.history.length - 1] !== input)) {
-            this.history.push(input);
+    getAutocompleteLines() {
+        const s = getStyles();
+        // Agent autocomplete takes highest priority
+        if (this.agentAutocomplete.active && this.agentAutocomplete.matches.length > 0) {
+            const lines = [];
+            const offset = this.agentAutocomplete.scrollOffset;
+            const visible = this.agentAutocomplete.matches.slice(offset, offset + MAX_VISIBLE_COMMANDS);
+            const total = this.agentAutocomplete.matches.length;
+            // Show scroll indicator if there are more items above
+            if (offset > 0) {
+                lines.push(s.muted(`  ↑ ${String(offset)} more above`));
+            }
+            for (let i = 0; i < visible.length; i++) {
+                const agent = visible[i];
+                const actualIndex = offset + i;
+                const isSelected = actualIndex === this.agentAutocomplete.selectedIndex;
+                const prefix = isSelected ? s.primary('❯ ') : '  ';
+                const mascot = agent.mascot + ' ';
+                const name = isSelected ? s.primary(chalk.bold('$' + agent.id)) : '$' + agent.id;
+                const desc = s.muted(` - ${agent.displayName}`);
+                lines.push(`${prefix}${mascot}${name}${desc}`);
+            }
+            // Show scroll indicator if there are more items below
+            const remaining = total - offset - visible.length;
+            if (remaining > 0) {
+                lines.push(s.muted(`  ↓ ${String(remaining)} more below`));
+            }
+            return lines;
+        }
+        // File autocomplete takes second priority
+        if (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) {
+            const lines = [];
+            const offset = this.fileAutocomplete.scrollOffset;
+            const visible = this.fileAutocomplete.matches.slice(offset, offset + MAX_VISIBLE_COMMANDS);
+            const total = this.fileAutocomplete.matches.length;
+            // Show scroll indicator if there are more items above
+            if (offset > 0) {
+                lines.push(s.muted(`  ↑ ${String(offset)} more above`));
+            }
+            for (let i = 0; i < visible.length; i++) {
+                const file = visible[i];
+                const actualIndex = offset + i;
+                const isSelected = actualIndex === this.fileAutocomplete.selectedIndex;
+                const prefix = isSelected ? s.primary('❯ ') : '  ';
+                const icon = file.isDirectory ? s.warning('📁 ') : s.info('📄 ');
+                const name = isSelected ? s.primary(chalk.bold(file.path)) : file.path;
+                lines.push(`${prefix}${icon}${name}`);
+            }
+            // Show scroll indicator if there are more items below
+            const remaining = total - offset - visible.length;
+            if (remaining > 0) {
+                lines.push(s.muted(`  ↓ ${String(remaining)} more below`));
+            }
+            return lines;
+        }
+        // Command autocomplete
+        if (!this.autocomplete.active || this.autocomplete.matches.length === 0) {
+            return [];
         }
+        const lines = [];
+        const offset = this.autocomplete.scrollOffset;
+        const visible = this.autocomplete.matches.slice(offset, offset + MAX_VISIBLE_COMMANDS);
+        const total = this.autocomplete.matches.length;
+        // Show scroll indicator if there are more items above
+        if (offset > 0) {
+            lines.push(s.muted(`  ↑ ${String(offset)} more above`));
+        }
+        for (let i = 0; i < visible.length; i++) {
+            const cmd = visible[i];
+            const actualIndex = offset + i;
+            const isSelected = actualIndex === this.autocomplete.selectedIndex;
+            const prefix = isSelected ? s.primary('❯ ') : '  ';
+            const name = isSelected ? s.primary(chalk.bold(cmd.command)) : cmd.command;
+            const desc = s.muted(` - ${cmd.description}`);
+            lines.push(`${prefix}${name}${desc}`);
+        }
+        // Show scroll indicator if there are more items below
+        const remaining = total - offset - visible.length;
+        if (remaining > 0) {
+            lines.push(s.muted(`  ↓ ${String(remaining)} more below`));
+        }
+        return lines;
+    }
+    /**
+     * Check if autocomplete is showing
+     */
+    isAutocompleteActive() {
+        return ((this.autocomplete.active && this.autocomplete.matches.length > 0) ||
+            (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) ||
+            (this.agentAutocomplete.active && this.agentAutocomplete.matches.length > 0));
+    }
+    /**
+     * Get height of rendered content
+     */
+    getHeight() {
+        let height = this.state.lines.length;
+        if (this.showSeparators)
+            height += 2;
+        return height;
+    }
+    // ===========================================================================
+    // Legacy API (for backwards compatibility during migration)
+    // ===========================================================================
+    /**
+     * @deprecated Use event-driven start() instead
+     * Kept for backwards compatibility during migration
+     */
+    async getInput() {
+        return new Promise((resolve) => {
+            const onSubmit = (input) => {
+                cleanup();
+                resolve({ action: 'submit', value: input });
+            };
+            const onCommand = (command, args) => {
+                cleanup();
+                resolve({ action: 'command', command, args });
+            };
+            const onCancel = () => {
+                cleanup();
+                resolve({ action: 'cancel' });
+            };
+            const cleanup = () => {
+                this.removeListener('submit', onSubmit);
+                this.removeListener('command', onCommand);
+                this.removeListener('cancel', onCancel);
+            };
+            this.on('submit', onSubmit);
+            this.on('command', onCommand);
+            this.on('cancel', onCancel);
+            if (!this.isRunning) {
+                this.start();
+            }
+        });
     }
     // ===========================================================================
     // Private: State Management
@@ -184,6 +550,23 @@ export class InputPrompt {
             active: false,
             matches: [],
             selectedIndex: 0,
+            scrollOffset: 0,
+        };
+        this.fileAutocomplete = {
+            active: false,
+            matches: [],
+            selectedIndex: 0,
+            scrollOffset: 0,
+            partial: '',
+        };
+        this.agentAutocomplete = {
+            active: false,
+            matches: [],
+            selectedIndex: 0,
+            scrollOffset: 0,
+            partial: '',
+            startPos: 0,
+            lineIndex: 0,
         };
         this.historyIndex = -1;
         this.savedInput = '';
@@ -194,229 +577,89 @@ export class InputPrompt {
     }
     updateAutocomplete() {
         const fullInput = this.getValue();
+        const currentLine = this.state.lines[this.state.currentLine];
+        const cursorPos = this.state.cursorPos;
+        // Check for @ file path autocomplete first
+        const atMention = extractAtMention(currentLine, cursorPos);
+        if (atMention !== null) {
+            // File autocomplete mode
+            this.autocomplete.active = false;
+            this.autocomplete.matches = [];
+            this.autocomplete.selectedIndex = 0;
+            this.autocomplete.scrollOffset = 0;
+            this.agentAutocomplete.active = false;
+            this.agentAutocomplete.matches = [];
+            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 = '';
+        // Check for $ agent autocomplete (anywhere in the current line)
+        if (this.getAgentSuggestions) {
+            const currentLine = this.state.lines[this.state.currentLine];
+            const dollarMention = extractDollarMention(currentLine, this.state.cursorPos);
+            if (dollarMention !== null) {
+                const partial = dollarMention.partial.toLowerCase();
+                const allAgents = this.getAgentSuggestions();
+                // Filter agents by partial match
+                const matches = allAgents.filter(agent => agent.id.toLowerCase().startsWith(partial) ||
+                    agent.displayName.toLowerCase().includes(partial));
+                if (matches.length > 0) {
+                    this.agentAutocomplete.active = true;
+                    this.agentAutocomplete.partial = partial;
+                    this.agentAutocomplete.matches = matches;
+                    this.agentAutocomplete.startPos = dollarMention.startPos;
+                    this.agentAutocomplete.lineIndex = this.state.currentLine;
+                    if (this.agentAutocomplete.selectedIndex >= matches.length) {
+                        this.agentAutocomplete.selectedIndex = Math.max(0, matches.length - 1);
+                        this.agentAutocomplete.scrollOffset = 0;
+                    }
+                    // Reset other autocompletes
+                    this.autocomplete.active = false;
+                    this.autocomplete.matches = [];
+                    return;
+                }
+            }
+        }
+        // Reset agent autocomplete
+        this.agentAutocomplete.active = false;
+        this.agentAutocomplete.matches = [];
+        this.agentAutocomplete.selectedIndex = 0;
+        this.agentAutocomplete.scrollOffset = 0;
+        this.agentAutocomplete.partial = '';
+        this.agentAutocomplete.startPos = 0;
+        this.agentAutocomplete.lineIndex = 0;
+        // Check for / command autocomplete
         if (fullInput.startsWith('/') && this.state.lines.length === 1) {
             this.autocomplete.active = true;
-            this.autocomplete.matches = filterCommands(fullInput, this.commands);
+            // Refresh commands dynamically to include newly created custom commands
+            const freshCommands = this.getCommands?.() ?? this.commands;
+            this.autocomplete.matches = filterCommands(fullInput, freshCommands);
             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;
         }
     }
-    // ===========================================================================
-    // Private: Layout Calculation
-    // ===========================================================================
-    /**
-     * Get physical layout of current buffer
-     */
-    getPhysicalLayout() {
-        const termWidth = terminal.getTerminalWidth();
-        const lines = [];
-        let cursorRow = 0;
-        let cursorCol = 0;
-        let totalRows = 0;
-        for (let i = 0; i < this.state.lines.length; i++) {
-            const linePromptLen = i === 0 ? this.promptLen : 5; // "   \ "
-            const lineText = this.state.lines[i];
-            const physicalLines = calcPhysicalLines(lineText, linePromptLen, termWidth);
-            for (let p = 0; p < physicalLines; p++) {
-                const start = p * termWidth - (p === 0 ? 0 : linePromptLen);
-                const end = start + termWidth;
-                lines.push(lineText.slice(Math.max(0, start), end));
-            }
-            if (i === this.state.currentLine) {
-                const cursorAbsPos = linePromptLen + this.state.cursorPos;
-                cursorRow = totalRows + Math.floor(cursorAbsPos / termWidth);
-                cursorCol = cursorAbsPos % termWidth;
-            }
-            totalRows += physicalLines;
-        }
-        return { lines, cursorRow, cursorCol, totalRows };
-    }
-    // ===========================================================================
-    // Private: Rendering
-    // ===========================================================================
     getSeparatorLine() {
-        return pc.dim('─'.repeat(terminal.getTerminalWidth()));
-    }
-    renderTodos() {
-        if (!this.getTodos)
-            return 0;
-        const todos = this.getTodos();
-        if (todos.length === 0)
-            return 0;
-        let linesRendered = 0;
-        // Group todos by status for display
-        const inProgress = todos.filter(t => t.status === 'in_progress');
-        const pending = todos.filter(t => t.status === 'pending');
-        const completed = todos.filter(t => t.status === 'completed');
-        // Show in-progress task prominently
-        for (const todo of inProgress) {
-            const label = todo.activeForm || todo.content;
-            terminal.write(pc.cyan('⟳ ') + pc.bold(label) + '\n');
-            linesRendered++;
-        }
-        // Show pending tasks
-        for (const todo of pending) {
-            terminal.write(pc.dim('○ ') + pc.dim(todo.content) + '\n');
-            linesRendered++;
-        }
-        // Show completed tasks (dimmed)
-        for (const todo of completed) {
-            terminal.write(pc.green('✓ ') + pc.dim(pc.strikethrough(todo.content)) + '\n');
-            linesRendered++;
-        }
-        if (linesRendered > 0) {
-            terminal.write('\n');
-            linesRendered++;
-        }
-        return linesRendered;
-    }
-    render() {
-        const termWidth = terminal.getTerminalWidth();
-        // Clear previous render
-        this.clearDropdown();
-        if (this.linesAboveCursor > 0) {
-            terminal.moveCursorToLineStart();
-            terminal.moveCursorUp(this.linesAboveCursor);
-        }
-        else {
-            terminal.moveCursorToLineStart();
-        }
-        terminal.clearToEndOfScreen();
-        // Render todos (above input area)
-        let physicalLinesRendered = 0;
-        physicalLinesRendered += this.renderTodos();
-        // Render top separator
-        if (this.showSeparators) {
-            terminal.write(this.getSeparatorLine() + '\n');
-            physicalLinesRendered += 1;
-        }
-        // Render input lines
-        let physicalLinesBeforeCursor = 0;
-        for (let i = 0; i < this.state.lines.length; i++) {
-            const linePrompt = i === 0 ? this.prompt : pc.dim('   \\ ');
-            const linePromptLen = i === 0 ? this.promptLen : 5;
-            if (i < this.state.currentLine) {
-                physicalLinesBeforeCursor += calcPhysicalLines(this.state.lines[i], linePromptLen, termWidth);
-            }
-            terminal.write(linePrompt + this.state.lines[i]);
-            if (i < this.state.lines.length - 1) {
-                terminal.write('\n');
-            }
-        }
-        // Render bottom separator
-        if (this.showSeparators) {
-            terminal.write('\n' + this.getSeparatorLine());
-        }
-        // Track state
-        this.renderedLines = this.state.lines.length;
-        this.hasSeparators = this.showSeparators;
-        // Position cursor
-        const currentLinePromptLen = this.state.currentLine === 0 ? this.promptLen : 5;
-        const cursorAbsPos = currentLinePromptLen + this.state.cursorPos;
-        const currentLinePhysical = calcPhysicalLines(this.state.lines[this.state.currentLine], currentLinePromptLen, termWidth);
-        const cursorPhysicalRow = Math.floor(cursorAbsPos / termWidth);
-        // Move up from bottom to cursor position
-        let linesToMoveUp = this.showSeparators ? 1 : 0;
-        for (let i = this.state.currentLine + 1; i < this.state.lines.length; i++) {
-            const lp = i === 0 ? this.promptLen : 5;
-            linesToMoveUp += calcPhysicalLines(this.state.lines[i], lp, termWidth);
-        }
-        linesToMoveUp += currentLinePhysical - 1 - cursorPhysicalRow;
-        if (linesToMoveUp > 0) {
-            terminal.moveCursorUp(linesToMoveUp);
-        }
-        const cursorCol = (cursorAbsPos % termWidth) + 1;
-        terminal.moveCursorToColumn(cursorCol);
-        // Track cursor position for next render
-        this.linesAboveCursor = physicalLinesRendered + physicalLinesBeforeCursor + cursorPhysicalRow;
-        // Render dropdown
-        this.renderDropdown();
-    }
-    renderDropdown() {
-        if (!this.autocomplete.active || this.autocomplete.matches.length === 0) {
-            this.dropdownLines = 0;
-            return;
-        }
-        const termWidth = terminal.getTerminalWidth();
-        const currentLinePromptLen = this.state.currentLine === 0 ? this.promptLen : 5;
-        // Move down past remaining input lines and bottom separator
-        let linesToMoveDown = this.state.lines.length - 1 - this.state.currentLine;
-        if (this.hasSeparators)
-            linesToMoveDown += 1;
-        // Account for wrapped lines
-        for (let i = this.state.currentLine; i < this.state.lines.length; i++) {
-            const lp = i === 0 ? this.promptLen : 5;
-            const physical = calcPhysicalLines(this.state.lines[i], lp, termWidth);
-            if (i === this.state.currentLine) {
-                const cursorAbsPos = currentLinePromptLen + this.state.cursorPos;
-                const cursorRow = Math.floor(cursorAbsPos / termWidth);
-                linesToMoveDown += physical - 1 - cursorRow;
-            }
-            else {
-                linesToMoveDown += physical - 1;
-            }
-        }
-        if (linesToMoveDown > 0) {
-            terminal.moveCursorDown(linesToMoveDown);
-        }
-        terminal.write('\n');
-        const visible = this.autocomplete.matches.slice(0, MAX_VISIBLE_COMMANDS);
-        for (let i = 0; i < visible.length; i++) {
-            const cmd = visible[i];
-            const isSelected = i === this.autocomplete.selectedIndex;
-            const prefix = isSelected ? pc.cyan('❯ ') : '  ';
-            const name = isSelected ? pc.cyan(pc.bold(cmd.command)) : cmd.command;
-            const desc = pc.dim(` - ${cmd.description}`);
-            terminal.write(`${prefix}${name}${desc}\n`);
-        }
-        // Move back up to cursor position
-        this.dropdownLines = visible.length;
-        const linesToMoveUp = this.dropdownLines + linesToMoveDown + 1;
-        terminal.moveCursorUp(linesToMoveUp);
-        const cursorAbsPos = currentLinePromptLen + this.state.cursorPos;
-        const cursorCol = (cursorAbsPos % termWidth) + 1;
-        terminal.moveCursorToColumn(cursorCol);
-    }
-    clearDropdown() {
-        if (this.dropdownLines === 0)
-            return;
-        const termWidth = terminal.getTerminalWidth();
-        const currentLinePromptLen = this.state.currentLine === 0 ? this.promptLen : 5;
-        // Move down past remaining lines and separator
-        let linesToMoveDown = this.state.lines.length - 1 - this.state.currentLine;
-        if (this.hasSeparators)
-            linesToMoveDown += 1;
-        for (let i = this.state.currentLine; i < this.state.lines.length; i++) {
-            const lp = i === 0 ? this.promptLen : 5;
-            const physical = calcPhysicalLines(this.state.lines[i], lp, termWidth);
-            if (i === this.state.currentLine) {
-                const cursorAbsPos = currentLinePromptLen + this.state.cursorPos;
-                const cursorRow = Math.floor(cursorAbsPos / termWidth);
-                linesToMoveDown += physical - 1 - cursorRow;
-            }
-            else {
-                linesToMoveDown += physical - 1;
-            }
-        }
-        if (linesToMoveDown > 0) {
-            terminal.moveCursorDown(linesToMoveDown);
-        }
-        terminal.write('\n');
-        // Clear dropdown lines
-        for (let i = 0; i < this.dropdownLines; i++) {
-            terminal.clearLine();
-            terminal.write('\n');
-        }
-        // Move back up
-        const linesToMoveUp = this.dropdownLines + linesToMoveDown + 1;
-        terminal.moveCursorUp(linesToMoveUp);
-        this.dropdownLines = 0;
+        const s = getStyles();
+        return s.muted('─'.repeat(terminal.getTerminalWidth()));
     }
     // ===========================================================================
     // Private: Input Handling
@@ -433,7 +676,10 @@ export class InputPrompt {
         const isEnter = key === '\r' || key === '\n';
         const isBackspace = key === '\x7f' || key === '\b';
         const isTab = key === '\t';
+        const isShiftTab = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x5a;
         const isCtrlC = key === '\x03';
+        const isCtrlO = key === '\x0f'; // Ctrl+O for toggle subagent expand
+        const isCtrlB = key === '\x02'; // Ctrl+B for background tasks
         const isUpArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x41;
         const isDownArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x42;
         const isLeftArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x44;
@@ -460,16 +706,50 @@ export class InputPrompt {
         const isEnd = key === '\x05' || (data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x46);
         // Ctrl+C - cancel
         if (isCtrlC) {
-            this.finishInput({ action: 'cancel' });
+            this.emit('cancel');
+            return;
+        }
+        // Ctrl+O - toggle subagent expand (only when agent is running)
+        if (isCtrlO) {
+            this.emit('toggleSubagentExpand');
+            return;
+        }
+        // Ctrl+B - show background tasks overlay
+        if (isCtrlB) {
+            this.emit('showTasks');
             return;
         }
-        // Escape - close autocomplete
+        // Escape - close autocomplete, double Esc clears input, or emit escape for agent abort
         if (isEscape) {
-            if (this.autocomplete.active) {
-                this.clearDropdown();
+            const now = Date.now();
+            const isDoubleEsc = now - this.lastEscTime < this.DOUBLE_ESC_THRESHOLD_MS;
+            this.lastEscTime = now;
+            if (this.agentAutocomplete.active) {
+                // First priority: close agent autocomplete
+                this.agentAutocomplete.active = false;
+                this.agentAutocomplete.matches = [];
+                this.emit('change', this.getValue());
+            }
+            else if (this.fileAutocomplete.active) {
+                // Second priority: close file autocomplete
+                this.fileAutocomplete.active = false;
+                this.fileAutocomplete.matches = [];
+                this.emit('change', this.getValue());
+            }
+            else if (this.autocomplete.active) {
+                // Third priority: close command autocomplete
                 this.autocomplete.active = false;
                 this.autocomplete.matches = [];
-                this.render();
+                this.emit('change', this.getValue());
+            }
+            else if (isDoubleEsc && this.getValue().length > 0) {
+                // Fourth priority: double Esc clears input (if there's content)
+                this.clearInput();
+                this.emit('change', this.getValue());
+            }
+            else {
+                // Fifth priority: emit escape for agent abort
+                this.emit('escape');
             }
             return;
         }
@@ -478,6 +758,11 @@ export class InputPrompt {
             this.handleEnter();
             return;
         }
+        // Shift+Tab - cycle modes
+        if (isShiftTab) {
+            this.emit('modeChange');
+            return;
+        }
         // Tab - accept autocomplete or insert spaces
         if (isTab) {
             this.handleTab();
@@ -512,12 +797,12 @@ export class InputPrompt {
         // Home/End
         if (isHome) {
             this.state.cursorPos = 0;
-            this.render();
+            this.emit('change', this.getValue());
             return;
         }
         if (isEnd) {
             this.state.cursorPos = this.state.lines[this.state.currentLine].length;
-            this.render();
+            this.emit('change', this.getValue());
             return;
         }
         // Backspace
@@ -532,13 +817,17 @@ export class InputPrompt {
                 .filter((c) => c.charCodeAt(0) >= 32)
                 .join('');
             if (printable.length > 0) {
+                // Clear suggestion when user starts typing
+                if (this.suggestion) {
+                    this.suggestion = null;
+                }
                 const line = this.state.lines[this.state.currentLine];
                 this.state.lines[this.state.currentLine] =
                     line.slice(0, this.state.cursorPos) + printable + line.slice(this.state.cursorPos);
                 this.state.cursorPos += printable.length;
                 this.historyIndex = -1;
                 this.updateAutocomplete();
-                this.render();
+                this.emit('change', this.getValue());
             }
         }
     }
@@ -551,35 +840,114 @@ export class InputPrompt {
             this.state.currentLine++;
             this.state.cursorPos = 0;
             this.autocomplete.active = false;
-            this.clearDropdown();
-            this.render();
+            this.emit('change', this.getValue());
+            return;
+        }
+        // Agent autocomplete selection - replace with $agentId and add space
+        if (this.agentAutocomplete.active && this.agentAutocomplete.matches.length > 0) {
+            const selectedAgent = this.agentAutocomplete.matches[this.agentAutocomplete.selectedIndex];
+            const lineIdx = this.agentAutocomplete.lineIndex;
+            const line = this.state.lines[lineIdx];
+            const result = replaceDollarMention(line, this.state.cursorPos, selectedAgent.id);
+            this.state.lines[lineIdx] = result.input;
+            this.state.currentLine = lineIdx;
+            this.state.cursorPos = result.cursorPos;
+            this.agentAutocomplete.active = false;
+            this.agentAutocomplete.matches = [];
+            this.emit('change', this.getValue());
+            // Return - let user type message after selecting agent
             return;
         }
-        // Autocomplete selection
+        // File autocomplete selection - accept the path and continue
+        if (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) {
+            const selectedFile = this.fileAutocomplete.matches[this.fileAutocomplete.selectedIndex];
+            const result = replaceAtMention(currentLine, this.state.cursorPos, selectedFile.path);
+            this.state.lines[this.state.currentLine] = result.input;
+            this.state.cursorPos = result.cursorPos;
+            this.fileAutocomplete.active = false;
+            this.fileAutocomplete.matches = [];
+            // Don't return - fall through to submit
+        }
+        // Command autocomplete selection - accept the command and continue to execute it
         if (this.autocomplete.active && this.autocomplete.matches.length > 0) {
             this.state.lines[0] = this.autocomplete.matches[this.autocomplete.selectedIndex].command;
             this.state.cursorPos = this.state.lines[0].length;
+            this.autocomplete.active = false;
+            // Don't return - fall through to execute the command
         }
         const input = this.getValue();
+        // Empty input - ignore
+        if (!input.trim()) {
+            return;
+        }
+        // Add to history
+        this.addToHistory(input);
+        // Queue mode - add to queue instead of emitting
+        if (this.queueMode) {
+            this.queuedInputs.push(input);
+            this.clearInput();
+            this.emit('change', this.getValue());
+            return;
+        }
         // Check if it's a command
         if (input.startsWith('/')) {
             const parts = input.slice(1).split(/\s+/);
             const command = parts[0];
             const args = parts.slice(1).join(' ');
-            this.finishInput({ action: 'command', command, args });
+            this.clearInput();
+            this.emit('command', command, args);
         }
         else {
-            this.finishInput({ action: 'submit', value: input });
+            // Strip @ prefix from file paths (autocomplete uses @ but agent doesn't need it)
+            // Matches @word or @path/to/file patterns
+            const cleanedInput = input.replace(/(?<![@\w])@([\w./-]+)/g, '$1');
+            this.clearInput();
+            this.emit('submit', cleanedInput);
         }
     }
     handleTab() {
+        // Accept suggestion if present and input is empty
+        if (this.suggestion && this.getValue() === '') {
+            this.state.lines[0] = this.suggestion;
+            this.state.cursorPos = this.suggestion.length;
+            this.suggestion = null;
+            this.emit('change', this.getValue());
+            return;
+        }
+        // Agent autocomplete completion - replace with $agentId and add space
+        if (this.agentAutocomplete.active && this.agentAutocomplete.matches.length > 0) {
+            const selectedAgent = this.agentAutocomplete.matches[this.agentAutocomplete.selectedIndex];
+            const lineIdx = this.agentAutocomplete.lineIndex;
+            const line = this.state.lines[lineIdx];
+            const result = replaceDollarMention(line, this.state.cursorPos, selectedAgent.id);
+            this.state.lines[lineIdx] = result.input;
+            this.state.currentLine = lineIdx;
+            this.state.cursorPos = result.cursorPos;
+            this.agentAutocomplete.active = false;
+            this.agentAutocomplete.matches = [];
+            this.emit('change', this.getValue());
+            return;
+        }
+        // File autocomplete completion
+        if (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) {
+            const selectedFile = this.fileAutocomplete.matches[this.fileAutocomplete.selectedIndex];
+            const currentLine = this.state.lines[this.state.currentLine];
+            const result = replaceAtMention(currentLine, this.state.cursorPos, selectedFile.path);
+            this.state.lines[this.state.currentLine] = result.input;
+            this.state.cursorPos = result.cursorPos;
+            this.fileAutocomplete.active = false;
+            this.fileAutocomplete.matches = [];
+            this.updateAutocomplete(); // Check if still in @ context (e.g., directory selected)
+            this.emit('change', this.getValue());
+            return;
+        }
+        // Command autocomplete completion
         if (this.autocomplete.active && this.autocomplete.matches.length > 0) {
             this.state.lines[this.state.currentLine] =
                 this.autocomplete.matches[this.autocomplete.selectedIndex].command;
             this.state.cursorPos = this.state.lines[this.state.currentLine].length;
             this.autocomplete.active = false;
             this.autocomplete.matches = [];
-            this.clearDropdown();
         }
         else {
             // Insert 2 spaces
@@ -590,13 +958,37 @@ export class InputPrompt {
             this.historyIndex = -1;
             this.updateAutocomplete();
         }
-        this.render();
+        this.emit('change', this.getValue());
     }
     handleArrowUp() {
-        // Autocomplete navigation
+        // Agent autocomplete navigation
+        if (this.agentAutocomplete.active && this.agentAutocomplete.selectedIndex > 0) {
+            this.agentAutocomplete.selectedIndex--;
+            // Adjust scroll offset if selection goes above visible area
+            if (this.agentAutocomplete.selectedIndex < this.agentAutocomplete.scrollOffset) {
+                this.agentAutocomplete.scrollOffset = this.agentAutocomplete.selectedIndex;
+            }
+            this.emit('change', this.getValue());
+            return;
+        }
+        // File autocomplete navigation
+        if (this.fileAutocomplete.active && this.fileAutocomplete.selectedIndex > 0) {
+            this.fileAutocomplete.selectedIndex--;
+            // Adjust scroll offset if selection goes above visible area
+            if (this.fileAutocomplete.selectedIndex < this.fileAutocomplete.scrollOffset) {
+                this.fileAutocomplete.scrollOffset = this.fileAutocomplete.selectedIndex;
+            }
+            this.emit('change', this.getValue());
+            return;
+        }
+        // Command autocomplete navigation
         if (this.autocomplete.active && this.autocomplete.selectedIndex > 0) {
             this.autocomplete.selectedIndex--;
-            this.render();
+            // Adjust scroll offset if selection goes above visible area
+            if (this.autocomplete.selectedIndex < this.autocomplete.scrollOffset) {
+                this.autocomplete.scrollOffset = this.autocomplete.selectedIndex;
+            }
+            this.emit('change', this.getValue());
             return;
         }
         const termWidth = terminal.getTerminalWidth();
@@ -609,7 +1001,7 @@ export class InputPrompt {
             const newAbsPos = (currentPhysicalRow - 1) * termWidth + cursorColInRow;
             this.state.cursorPos = Math.max(0, newAbsPos - currentLinePromptLen);
             this.state.cursorPos = Math.min(this.state.cursorPos, this.state.lines[this.state.currentLine].length);
-            this.render();
+            this.emit('change', this.getValue());
             return;
         }
         // Navigate to previous logical line
@@ -622,7 +1014,7 @@ export class InputPrompt {
             const targetAbsPos = lastRowStart + cursorColInRow;
             this.state.cursorPos = Math.max(0, targetAbsPos - prevLinePromptLen);
             this.state.cursorPos = Math.min(this.state.cursorPos, prevLineLen);
-            this.render();
+            this.emit('change', this.getValue());
             return;
         }
         // History navigation (at top of input)
@@ -636,17 +1028,45 @@ export class InputPrompt {
                 this.state.lines = [historyEntry];
                 this.state.currentLine = 0;
                 this.state.cursorPos = historyEntry.length;
-                this.render();
+                this.emit('change', this.getValue());
             }
         }
     }
     handleArrowDown() {
-        // Autocomplete navigation
+        // Agent autocomplete navigation
+        if (this.agentAutocomplete.active &&
+            this.agentAutocomplete.selectedIndex < this.agentAutocomplete.matches.length - 1) {
+            this.agentAutocomplete.selectedIndex++;
+            // Adjust scroll offset if selection goes below visible area
+            const maxVisibleIndex = this.agentAutocomplete.scrollOffset + MAX_VISIBLE_COMMANDS - 1;
+            if (this.agentAutocomplete.selectedIndex > maxVisibleIndex) {
+                this.agentAutocomplete.scrollOffset = this.agentAutocomplete.selectedIndex - MAX_VISIBLE_COMMANDS + 1;
+            }
+            this.emit('change', this.getValue());
+            return;
+        }
+        // File autocomplete navigation
+        if (this.fileAutocomplete.active &&
+            this.fileAutocomplete.selectedIndex < this.fileAutocomplete.matches.length - 1) {
+            this.fileAutocomplete.selectedIndex++;
+            // Adjust scroll offset if selection goes below visible area
+            const maxVisibleIndex = this.fileAutocomplete.scrollOffset + MAX_VISIBLE_COMMANDS - 1;
+            if (this.fileAutocomplete.selectedIndex > maxVisibleIndex) {
+                this.fileAutocomplete.scrollOffset = this.fileAutocomplete.selectedIndex - MAX_VISIBLE_COMMANDS + 1;
+            }
+            this.emit('change', this.getValue());
+            return;
+        }
+        // Command autocomplete navigation
         if (this.autocomplete.active &&
-            this.autocomplete.selectedIndex < this.autocomplete.matches.length - 1 &&
-            this.autocomplete.selectedIndex < MAX_VISIBLE_COMMANDS - 1) {
+            this.autocomplete.selectedIndex < this.autocomplete.matches.length - 1) {
             this.autocomplete.selectedIndex++;
-            this.render();
+            // Adjust scroll offset 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;
+            }
+            this.emit('change', this.getValue());
             return;
         }
         const termWidth = terminal.getTerminalWidth();
@@ -660,7 +1080,7 @@ export class InputPrompt {
             const newAbsPos = (currentPhysicalRow + 1) * termWidth + cursorColInRow;
             this.state.cursorPos = Math.max(0, newAbsPos - currentLinePromptLen);
             this.state.cursorPos = Math.min(this.state.cursorPos, this.state.lines[this.state.currentLine].length);
-            this.render();
+            this.emit('change', this.getValue());
             return;
         }
         // Navigate to next logical line
@@ -670,7 +1090,7 @@ export class InputPrompt {
             const nextLineLen = this.state.lines[this.state.currentLine].length;
             this.state.cursorPos = Math.max(0, cursorColInRow - nextLinePromptLen);
             this.state.cursorPos = Math.min(this.state.cursorPos, nextLineLen);
-            this.render();
+            this.emit('change', this.getValue());
             return;
         }
         // History forward
@@ -688,29 +1108,29 @@ export class InputPrompt {
                 this.state.cursorPos = historyEntry.length;
             }
             this.updateAutocomplete();
-            this.render();
+            this.emit('change', this.getValue());
         }
     }
     handleArrowLeft() {
         if (this.state.cursorPos > 0) {
             this.state.cursorPos--;
-            terminal.write('\x1B[D');
+            this.emit('change', this.getValue());
         }
         else if (this.state.currentLine > 0) {
             this.state.currentLine--;
             this.state.cursorPos = this.state.lines[this.state.currentLine].length;
-            this.render();
+            this.emit('change', this.getValue());
         }
     }
     handleArrowRight() {
         if (this.state.cursorPos < this.state.lines[this.state.currentLine].length) {
             this.state.cursorPos++;
-            terminal.write('\x1B[C');
+            this.emit('change', this.getValue());
         }
         else if (this.state.currentLine < this.state.lines.length - 1) {
             this.state.currentLine++;
             this.state.cursorPos = 0;
-            this.render();
+            this.emit('change', this.getValue());
         }
     }
     handleWordLeft() {
@@ -722,12 +1142,12 @@ export class InputPrompt {
             while (pos > 0 && line[pos - 1] !== ' ')
                 pos--;
             this.state.cursorPos = pos;
-            this.render();
+            this.emit('change', this.getValue());
         }
         else if (this.state.currentLine > 0) {
             this.state.currentLine--;
             this.state.cursorPos = this.state.lines[this.state.currentLine].length;
-            this.render();
+            this.emit('change', this.getValue());
         }
     }
     handleWordRight() {
@@ -739,12 +1159,12 @@ export class InputPrompt {
             while (pos < line.length && line[pos] === ' ')
                 pos++;
             this.state.cursorPos = pos;
-            this.render();
+            this.emit('change', this.getValue());
         }
         else if (this.state.currentLine < this.state.lines.length - 1) {
             this.state.currentLine++;
             this.state.cursorPos = 0;
-            this.render();
+            this.emit('change', this.getValue());
         }
     }
     handleBackspace() {
@@ -755,7 +1175,7 @@ export class InputPrompt {
                 line.slice(0, this.state.cursorPos - 1) + line.slice(this.state.cursorPos);
             this.state.cursorPos--;
             this.updateAutocomplete();
-            this.render();
+            this.emit('change', this.getValue());
         }
         else if (this.state.currentLine > 0) {
             const currentLine = this.state.lines[this.state.currentLine];
@@ -765,36 +1185,7 @@ export class InputPrompt {
             this.state.currentLine--;
             this.state.cursorPos = prevLine.length;
             this.updateAutocomplete();
-            this.render();
-        }
-    }
-    finishInput(result) {
-        // Clear display
-        this.clearDropdown();
-        if (this.linesAboveCursor > 0) {
-            terminal.moveCursorToLineStart();
-            terminal.moveCursorUp(this.linesAboveCursor);
-        }
-        terminal.clearToEndOfScreen();
-        // Print clean input (without separators)
-        for (let i = 0; i < this.state.lines.length; i++) {
-            const linePrompt = i === 0 ? this.prompt : pc.dim('   \\ ');
-            terminal.write(linePrompt + this.state.lines[i]);
-            if (i < this.state.lines.length - 1) {
-                terminal.write('\n');
-            }
-        }
-        terminal.writeLine('');
-        // Save to history if submitting
-        if (result.action === 'submit' || result.action === 'command') {
-            const input = this.getValue();
-            this.addToHistory(input);
-        }
-        // Stop and resolve
-        this.stop();
-        if (this.resolveInput) {
-            this.resolveInput(result);
-            this.resolveInput = null;
+            this.emit('change', this.getValue());
         }
     }
 }