@compilr-dev/cli 0.5.0 → 0.5.2

package/dist/ui/input-prompt.js

@@ -14,21 +14,22 @@
  * - 'change' - Input text changed
  */
 import { EventEmitter } from 'events';
-import chalk from 'chalk';
+import { Chalk } from 'chalk';
 import { getStyles } from '../themes/index.js';
 import * as terminal from './terminal.js';
-import { getAutocompleteCommands } from '../commands.js';
-import { getFileMatches, extractAtMention, replaceAtMention, } from './file-autocomplete.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 (from central registry)
 // =============================================================================
-export const DEFAULT_COMMANDS = getAutocompleteCommands();
+export const DEFAULT_COMMANDS = [];
 // =============================================================================
 // Helper Functions
 // =============================================================================
@@ -39,6 +40,26 @@ export const DEFAULT_COMMANDS = getAutocompleteCommands();
 export function stripAnsi(str) {
     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.
@@ -108,6 +129,8 @@ export class InputPrompt extends EventEmitter {
     promptLen;
     showSeparators;
     commands;
+    getAgentSuggestions;
+    getCommands;
     // Input state
     state = {
         lines: [''],
@@ -129,6 +152,16 @@ export class InputPrompt extends EventEmitter {
         scrollOffset: 0,
         partial: '',
     };
+    // Agent autocomplete (for $agents)
+    agentAutocomplete = {
+        active: false,
+        matches: [],
+        selectedIndex: 0,
+        scrollOffset: 0,
+        partial: '',
+        startPos: 0,
+        lineIndex: 0,
+    };
     // History
     history = [];
     historyIndex = -1;
@@ -154,6 +187,8 @@ export class InputPrompt extends EventEmitter {
         this.promptLen = stripAnsi(this.prompt).length;
         this.showSeparators = options.showSeparators ?? true;
         this.commands = options.commands ?? DEFAULT_COMMANDS;
+        this.getAgentSuggestions = options.getAgentSuggestions;
+        this.getCommands = options.getCommands;
     }
     // ===========================================================================
     // Public API
@@ -183,6 +218,12 @@ export class InputPrompt extends EventEmitter {
     clearSuggestion() {
         this.suggestion = null;
     }
+    /**
+     * Set the callback to get available team agents for $ autocomplete
+     */
+    setAgentSuggestionsCallback(callback) {
+        this.getAgentSuggestions = callback;
+    }
     /**
      * Start input capture (non-blocking, event-driven)
      */
@@ -290,6 +331,15 @@ export class InputPrompt extends EventEmitter {
             scrollOffset: 0,
             partial: '',
         };
+        this.agentAutocomplete = {
+            active: false,
+            matches: [],
+            selectedIndex: 0,
+            scrollOffset: 0,
+            partial: '',
+            startPos: 0,
+            lineIndex: 0,
+        };
     }
     /**
      * Add command to history
@@ -320,7 +370,9 @@ export class InputPrompt extends EventEmitter {
                 lines.push(linePrompt + s.muted(this.suggestion) + hint);
             }
             else {
-                lines.push(linePrompt + lineContent);
+                // Format special prefixes: $agent, @path, /command
+                const formattedContent = formatInputText(lineContent);
+                lines.push(linePrompt + formattedContent);
             }
         }
         // Bottom separator
@@ -353,7 +405,34 @@ export class InputPrompt extends EventEmitter {
      */
     getAutocompleteLines() {
         const s = getStyles();
-        // File autocomplete takes priority
+        // 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;
@@ -412,7 +491,8 @@ export class InputPrompt extends EventEmitter {
      */
     isAutocompleteActive() {
         return ((this.autocomplete.active && this.autocomplete.matches.length > 0) ||
-            (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0));
+            (this.fileAutocomplete.active && this.fileAutocomplete.matches.length > 0) ||
+            (this.agentAutocomplete.active && this.agentAutocomplete.matches.length > 0));
     }
     /**
      * Get height of rendered content
@@ -479,6 +559,15 @@ export class InputPrompt extends EventEmitter {
             scrollOffset: 0,
             partial: '',
         };
+        this.agentAutocomplete = {
+            active: false,
+            matches: [],
+            selectedIndex: 0,
+            scrollOffset: 0,
+            partial: '',
+            startPos: 0,
+            lineIndex: 0,
+        };
         this.historyIndex = -1;
         this.savedInput = '';
         this.renderedLines = 0;
@@ -498,6 +587,8 @@ export class InputPrompt extends EventEmitter {
             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);
@@ -513,11 +604,46 @@ export class InputPrompt extends EventEmitter {
         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;
             // Refresh commands dynamically to include newly created custom commands
-            const freshCommands = getAutocompleteCommands();
+            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);
@@ -553,6 +679,7 @@ export class InputPrompt extends EventEmitter {
         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;
@@ -587,30 +714,41 @@ export class InputPrompt extends EventEmitter {
             this.emit('toggleSubagentExpand');
             return;
         }
+        // Ctrl+B - show background tasks overlay
+        if (isCtrlB) {
+            this.emit('showTasks');
+            return;
+        }
         // Escape - close autocomplete, double Esc clears input, or emit escape for agent abort
         if (isEscape) {
             const now = Date.now();
             const isDoubleEsc = now - this.lastEscTime < this.DOUBLE_ESC_THRESHOLD_MS;
             this.lastEscTime = now;
-            if (this.fileAutocomplete.active) {
-                // First priority: close file autocomplete
+            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) {
-                // Second priority: close command autocomplete
+                // Third priority: close command autocomplete
                 this.autocomplete.active = false;
                 this.autocomplete.matches = [];
                 this.emit('change', this.getValue());
             }
             else if (isDoubleEsc && this.getValue().length > 0) {
-                // Third priority: double Esc clears input (if there's content)
+                // Fourth priority: double Esc clears input (if there's content)
                 this.clearInput();
                 this.emit('change', this.getValue());
             }
             else {
-                // Fourth priority: emit escape for agent abort
+                // Fifth priority: emit escape for agent abort
                 this.emit('escape');
             }
             return;
@@ -705,6 +843,21 @@ export class InputPrompt extends EventEmitter {
             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;
+        }
         // 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];
@@ -745,8 +898,11 @@ export class InputPrompt extends EventEmitter {
             this.emit('command', command, args);
         }
         else {
+            // 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', input);
+            this.emit('submit', cleanedInput);
         }
     }
     handleTab() {
@@ -758,6 +914,20 @@ export class InputPrompt extends EventEmitter {
             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];
@@ -791,6 +961,16 @@ export class InputPrompt extends EventEmitter {
         this.emit('change', this.getValue());
     }
     handleArrowUp() {
+        // 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--;
@@ -853,6 +1033,18 @@ export class InputPrompt extends EventEmitter {
         }
     }
     handleArrowDown() {
+        // 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) {

package/dist/ui/keyboard-handler.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Keyboard input handler.
+ *
+ * Extracted from TerminalUI — owns keyboard capture, escape handling,
+ * overlay key routing, and the main keypress dispatch loop. Accesses
+ * sub-controllers (input, autocomplete, overlay, status bar) directly
+ * through the host interface.
+ */
+import type { InputController } from './input-controller.js';
+import type { AutocompleteController } from './autocomplete-controller.js';
+import type { OverlayManager } from './overlay-manager.js';
+import type { StatusBarController } from './status-bar-controller.js';
+import type { Overlay } from './overlay/index.js';
+export interface KeyboardHandlerHost {
+    isGuardActive(): boolean;
+    isAgentRunning(): boolean;
+    getViewMode(): 'normal' | 'verbose-temp';
+    setViewMode(mode: 'normal' | 'verbose-temp'): void;
+    requestRender(): void;
+    emit(event: string, ...args: unknown[]): void;
+    readonly input: InputController;
+    readonly ac: AutocompleteController;
+    readonly overlay: OverlayManager;
+    readonly statusBar: StatusBarController;
+    getActiveOverlay(): Overlay | null;
+    hasActiveOverlay(): boolean;
+    hasActiveBash(): boolean;
+    backgroundBashCommand(): void;
+    hasRestoredHistory(): boolean;
+    showRestoredHistory(): void;
+    toggleVerboseView(): void;
+    toggleLiveRegionExpanded(): void;
+    toggleTodos(): void;
+    reRenderConversationVerbose(verbose: boolean): void;
+}
+export declare class KeyboardHandler {
+    private keyHandler;
+    private dataHandler;
+    private lastEscapeTime;
+    private lastTabTime;
+    private readonly host;
+    constructor(host: KeyboardHandlerHost);
+    startCapture(): void;
+    stopCapture(): void;
+    private handleEscape;
+    private handleOverlayKeypress;
+    /**
+     * Handle escape sequences for overlays directly from raw stdin data.
+     *
+     * Bypasses readline's keypress events which can be corrupted when the
+     * emitKeys generator is left suspended after a standalone escape key.
+     * Uses parseKeyEvent (from ui-core) to reliably parse the raw bytes.
+     */
+    private handleOverlayEscapeSequence;
+    private applyAutocomplete;
+    private handleKeypress;
+}