@compilr-dev/cli 0.4.0

package/dist/slash-autocomplete.js

@@ -0,0 +1,638 @@
+/**
+ * Slash Command Autocomplete
+ *
+ * Claude Code-style autocomplete for slash commands.
+ * Features:
+ * - Horizontal separator line above input
+ * - Autocomplete dropdown for slash commands
+ * - Multiline input with \ continuation
+ * - Proper wrapping for long input
+ */
+import pc from 'picocolors';
+// ANSI escape codes for terminal control
+const ANSI = {
+    HIDE_CURSOR: '\x1B[?25l',
+    SHOW_CURSOR: '\x1B[?25h',
+    SAVE_CURSOR: '\x1B[s',
+    RESTORE_CURSOR: '\x1B[u',
+    CLEAR_LINE: '\x1B[2K',
+    CLEAR_TO_END_OF_LINE: '\x1B[K',
+    CLEAR_TO_END_OF_SCREEN: '\x1B[J',
+    MOVE_UP: (n) => `\x1B[${String(n)}A`,
+    MOVE_DOWN: (n) => `\x1B[${String(n)}B`,
+    MOVE_TO_COLUMN: (n) => `\x1B[${String(n)}G`,
+};
+/**
+ * Get terminal width
+ */
+function getTerminalWidth() {
+    return process.stdout.columns || 80;
+}
+/**
+ * Calculate how many physical terminal lines a string occupies
+ * (accounting for wrapping at terminal width)
+ */
+function calcPhysicalLines(text, startCol, termWidth) {
+    if (text.length === 0) {
+        return 1; // Empty line still takes 1 physical line
+    }
+    const totalLen = startCol + text.length;
+    return Math.ceil(totalLen / termWidth) || 1;
+}
+/**
+ * Available slash commands
+ */
+export const SLASH_COMMANDS = [
+    { name: '/help', description: 'Show available commands', aliases: ['/?'] },
+    { name: '/exit', description: 'Quit the demo', aliases: ['/quit', '/q'] },
+    { name: '/clear', description: 'Clear conversation history' },
+    { name: '/compact', description: 'Summarize old messages' },
+    { name: '/tools', description: 'List available tools' },
+    { name: '/tokens', description: 'Show session token usage' },
+    { name: '/context', description: 'Show context window usage' },
+];
+const MAX_VISIBLE = 10;
+/**
+ * Strip ANSI codes from string
+ */
+export function stripAnsi(str) {
+    // eslint-disable-next-line no-control-regex
+    return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, '');
+}
+/**
+ * Filter commands matching input
+ */
+function filterCommands(input) {
+    const lower = input.toLowerCase();
+    return SLASH_COMMANDS.filter(cmd => {
+        if (cmd.name.toLowerCase().startsWith(lower))
+            return true;
+        if (cmd.aliases?.some(a => a.toLowerCase().startsWith(lower)))
+            return true;
+        return false;
+    });
+}
+/**
+ * Render autocomplete dropdown below current line
+ */
+function renderDropdown(state, promptLen, currentLine, totalLines, hasSeparators) {
+    if (!state.active || state.matches.length === 0)
+        return 0;
+    // Move down past remaining input lines and bottom separator
+    let linesToMoveDown = totalLines - 1 - currentLine;
+    if (hasSeparators)
+        linesToMoveDown += 1;
+    if (linesToMoveDown > 0) {
+        process.stdout.write(ANSI.MOVE_DOWN(linesToMoveDown));
+    }
+    process.stdout.write('\n');
+    const visible = state.matches.slice(0, MAX_VISIBLE);
+    for (let i = 0; i < visible.length; i++) {
+        const cmd = visible[i];
+        const isSelected = i === state.selectedIndex;
+        const prefix = isSelected ? pc.cyan('❯ ') : '  ';
+        const name = isSelected ? pc.cyan(pc.bold(cmd.name)) : cmd.name;
+        const desc = pc.dim(` - ${cmd.description}`);
+        process.stdout.write(`${prefix}${name}${desc}\n`);
+    }
+    // Move back up to cursor position
+    const linesRendered = visible.length;
+    const linesToMoveUp = linesRendered + linesToMoveDown + 1;
+    process.stdout.write(ANSI.MOVE_UP(linesToMoveUp));
+    process.stdout.write(ANSI.MOVE_TO_COLUMN(promptLen + state.cursorPos + 1));
+    return linesRendered;
+}
+/**
+ * Clear dropdown area
+ */
+function clearDropdown(dropdownLines, currentLine, totalLines, hasSeparators) {
+    if (dropdownLines === 0)
+        return;
+    // Move down past remaining lines and separator
+    let linesToMoveDown = totalLines - 1 - currentLine;
+    if (hasSeparators)
+        linesToMoveDown += 1;
+    if (linesToMoveDown > 0) {
+        process.stdout.write(ANSI.MOVE_DOWN(linesToMoveDown));
+    }
+    process.stdout.write('\n');
+    // Clear dropdown lines
+    for (let i = 0; i < dropdownLines; i++) {
+        process.stdout.write(ANSI.CLEAR_LINE + '\n');
+    }
+    // Move back up
+    const linesToMoveUp = dropdownLines + linesToMoveDown + 1;
+    process.stdout.write(ANSI.MOVE_UP(linesToMoveUp));
+}
+/**
+ * Create interactive input with autocomplete
+ */
+export function createInteractiveInput(prompt, onSubmit, showSeparator = true, getTodos) {
+    let state = {
+        active: false,
+        lines: [''],
+        currentLine: 0,
+        cursorPos: 0,
+        selectedIndex: 0,
+        matches: [],
+    };
+    let dropdownLines = 0;
+    let isRunning = false;
+    let hasSeparators = false;
+    let linesAboveCursor = 0;
+    const promptLen = stripAnsi(prompt).length;
+    // Command history
+    const history = [];
+    let historyIndex = -1;
+    let savedInput = '';
+    // Track todo lines
+    let renderedTodoLines = 0;
+    /**
+     * Get full input as single string
+     */
+    function getFullInput() {
+        return state.lines.join('\n');
+    }
+    /**
+     * Get separator line
+     */
+    function getSeparatorLine() {
+        return pc.dim('─'.repeat(getTerminalWidth()));
+    }
+    /**
+     * Render todo section
+     */
+    function renderTodoSection() {
+        if (!getTodos)
+            return 0;
+        const todos = getTodos();
+        if (todos.length === 0)
+            return 0;
+        const lines = ['Todos'];
+        for (const todo of todos) {
+            let icon;
+            let text;
+            switch (todo.status) {
+                case 'completed':
+                    icon = pc.dim('☒');
+                    text = pc.strikethrough(pc.dim(todo.content));
+                    break;
+                case 'in_progress':
+                    icon = pc.cyan('☐');
+                    text = pc.bold(pc.cyan(todo.activeForm || todo.content));
+                    break;
+                default:
+                    icon = pc.dim('☐');
+                    text = pc.dim(todo.content);
+                    break;
+            }
+            lines.push(`${icon} ${text}`);
+        }
+        process.stdout.write(lines.join('\n') + '\n');
+        return lines.length;
+    }
+    /**
+     * Render input with separators
+     */
+    function renderInput() {
+        const termWidth = getTerminalWidth();
+        // Clear previous render
+        if (linesAboveCursor > 0) {
+            process.stdout.write('\r');
+            process.stdout.write(ANSI.MOVE_UP(linesAboveCursor));
+        }
+        else {
+            process.stdout.write('\r');
+        }
+        process.stdout.write(ANSI.CLEAR_TO_END_OF_SCREEN);
+        // Render todos
+        renderedTodoLines = renderTodoSection();
+        // Render top separator
+        let physicalLinesRendered = renderedTodoLines;
+        if (showSeparator) {
+            process.stdout.write(getSeparatorLine() + '\n');
+            physicalLinesRendered += 1;
+        }
+        // Render input lines
+        let physicalLinesBeforeCursor = 0;
+        for (let i = 0; i < state.lines.length; i++) {
+            const linePrompt = i === 0 ? prompt : pc.dim('   \\ ');
+            const linePromptLen = i === 0 ? promptLen : 5;
+            if (i < state.currentLine) {
+                physicalLinesBeforeCursor += calcPhysicalLines(state.lines[i], linePromptLen, termWidth);
+            }
+            process.stdout.write(linePrompt + state.lines[i]);
+            if (i < state.lines.length - 1) {
+                process.stdout.write('\n');
+            }
+        }
+        // Render bottom separator
+        if (showSeparator) {
+            process.stdout.write('\n' + getSeparatorLine());
+        }
+        // Track state
+        renderedTodoLines = state.lines.length;
+        hasSeparators = showSeparator;
+        // Position cursor
+        const currentLinePromptLen = state.currentLine === 0 ? promptLen : 5;
+        const cursorAbsPos = currentLinePromptLen + state.cursorPos;
+        const currentLinePhysical = calcPhysicalLines(state.lines[state.currentLine], currentLinePromptLen, termWidth);
+        const cursorPhysicalRow = Math.floor(cursorAbsPos / termWidth);
+        // Move up from bottom to cursor position
+        let linesToMoveUp = showSeparator ? 1 : 0;
+        for (let i = state.currentLine + 1; i < state.lines.length; i++) {
+            const lp = i === 0 ? promptLen : 5;
+            linesToMoveUp += calcPhysicalLines(state.lines[i], lp, termWidth);
+        }
+        linesToMoveUp += (currentLinePhysical - 1 - cursorPhysicalRow);
+        if (linesToMoveUp > 0) {
+            process.stdout.write(ANSI.MOVE_UP(linesToMoveUp));
+        }
+        const cursorCol = (cursorAbsPos % termWidth) + 1;
+        process.stdout.write(ANSI.MOVE_TO_COLUMN(cursorCol));
+        // Track cursor position for next render
+        linesAboveCursor = physicalLinesRendered + physicalLinesBeforeCursor + cursorPhysicalRow;
+    }
+    /**
+     * Full render with dropdown
+     */
+    function render() {
+        clearDropdown(dropdownLines, state.currentLine, state.lines.length, hasSeparators);
+        renderInput();
+        dropdownLines = renderDropdown(state, promptLen, state.currentLine, state.lines.length, hasSeparators);
+    }
+    /**
+     * Update autocomplete state
+     */
+    function updateAutocomplete() {
+        const fullInput = getFullInput();
+        if (fullInput.startsWith('/') && state.lines.length === 1) {
+            state.active = true;
+            state.matches = filterCommands(fullInput);
+            if (state.selectedIndex >= state.matches.length) {
+                state.selectedIndex = Math.max(0, state.matches.length - 1);
+            }
+        }
+        else {
+            state.active = false;
+            state.matches = [];
+            state.selectedIndex = 0;
+        }
+    }
+    /**
+     * Handle keypress
+     */
+    function handleKey(key, data) {
+        const isEscape = data.length === 1 && data[0] === 0x1b;
+        const isEnter = key === '\r' || key === '\n';
+        const isBackspace = key === '\x7f' || key === '\b';
+        const isTab = key === '\t';
+        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;
+        const isRightArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x43;
+        // Mac Option + Arrow (word navigation)
+        const isOptionLeft = (data.length === 6 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x31 &&
+            data[3] === 0x3b && data[4] === 0x33 && data[5] === 0x44) ||
+            (data.length === 2 && data[0] === 0x1b && data[1] === 0x62);
+        const isOptionRight = (data.length === 6 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x31 &&
+            data[3] === 0x3b && data[4] === 0x33 && data[5] === 0x43) ||
+            (data.length === 2 && data[0] === 0x1b && data[1] === 0x66);
+        // Home/End (Cmd+Left/Right on Mac)
+        const isHome = key === '\x01' ||
+            (data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x48);
+        const isEnd = key === '\x05' ||
+            (data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x46);
+        // Escape - close autocomplete
+        if (isEscape) {
+            if (state.active) {
+                clearDropdown(dropdownLines, state.currentLine, state.lines.length, hasSeparators);
+                dropdownLines = 0;
+                state.active = false;
+                state.matches = [];
+                renderInput();
+            }
+            return;
+        }
+        // Enter
+        if (isEnter) {
+            const currentLine = state.lines[state.currentLine];
+            // Continuation with backslash
+            if (currentLine.endsWith('\\')) {
+                state.lines[state.currentLine] = currentLine.slice(0, -1);
+                state.lines.push('');
+                state.currentLine++;
+                state.cursorPos = 0;
+                state.active = false;
+                clearDropdown(dropdownLines, state.currentLine - 1, state.lines.length - 1, hasSeparators);
+                dropdownLines = 0;
+                render();
+                return;
+            }
+            // Autocomplete selection
+            if (state.active && state.matches.length > 0) {
+                state.lines[0] = state.matches[state.selectedIndex].name;
+                state.cursorPos = state.lines[0].length;
+            }
+            // Submit
+            clearDropdown(dropdownLines, state.currentLine, state.lines.length, hasSeparators);
+            dropdownLines = 0;
+            // Clear display
+            if (linesAboveCursor > 0) {
+                process.stdout.write('\r' + ANSI.MOVE_UP(linesAboveCursor));
+            }
+            process.stdout.write('\r' + ANSI.CLEAR_TO_END_OF_SCREEN);
+            // Print clean input
+            for (let i = 0; i < state.lines.length; i++) {
+                const linePrompt = i === 0 ? prompt : pc.dim('   \\ ');
+                process.stdout.write(linePrompt + state.lines[i]);
+                if (i < state.lines.length - 1) {
+                    process.stdout.write('\n');
+                }
+            }
+            process.stdout.write('\n');
+            const input = getFullInput();
+            // Save to history
+            if (input.trim() && (history.length === 0 || history[history.length - 1] !== input)) {
+                history.push(input);
+            }
+            historyIndex = -1;
+            savedInput = '';
+            // Reset state
+            state = {
+                active: false,
+                lines: [''],
+                currentLine: 0,
+                cursorPos: 0,
+                selectedIndex: 0,
+                matches: [],
+            };
+            renderedTodoLines = 0;
+            linesAboveCursor = 0;
+            hasSeparators = false;
+            onSubmit(input);
+            return;
+        }
+        // Tab - accept autocomplete or insert spaces
+        if (isTab) {
+            if (state.active && state.matches.length > 0) {
+                state.lines[state.currentLine] = state.matches[state.selectedIndex].name;
+                state.cursorPos = state.lines[state.currentLine].length;
+                state.active = false;
+                state.matches = [];
+                clearDropdown(dropdownLines, state.currentLine, state.lines.length, hasSeparators);
+                dropdownLines = 0;
+            }
+            else {
+                // Insert 2 spaces
+                const line = state.lines[state.currentLine];
+                state.lines[state.currentLine] = line.slice(0, state.cursorPos) + '  ' + line.slice(state.cursorPos);
+                state.cursorPos += 2;
+                historyIndex = -1;
+                updateAutocomplete();
+            }
+            render();
+            return;
+        }
+        // Up arrow
+        if (isUpArrow) {
+            if (state.active && state.selectedIndex > 0) {
+                state.selectedIndex--;
+                render();
+                return;
+            }
+            // Visual line navigation
+            const termWidth = getTerminalWidth();
+            const currentLinePromptLen = state.currentLine === 0 ? promptLen : 5;
+            const cursorAbsPos = currentLinePromptLen + state.cursorPos;
+            const currentPhysicalRow = Math.floor(cursorAbsPos / termWidth);
+            const cursorColInRow = cursorAbsPos % termWidth;
+            if (currentPhysicalRow > 0) {
+                const newAbsPos = (currentPhysicalRow - 1) * termWidth + cursorColInRow;
+                state.cursorPos = Math.max(0, newAbsPos - currentLinePromptLen);
+                state.cursorPos = Math.min(state.cursorPos, state.lines[state.currentLine].length);
+                render();
+                return;
+            }
+            else if (state.currentLine > 0) {
+                state.currentLine--;
+                const prevLinePromptLen = state.currentLine === 0 ? promptLen : 5;
+                const prevLineLen = state.lines[state.currentLine].length;
+                const prevLinePhysical = calcPhysicalLines(state.lines[state.currentLine], prevLinePromptLen, termWidth);
+                const lastRowStart = (prevLinePhysical - 1) * termWidth;
+                const targetAbsPos = lastRowStart + cursorColInRow;
+                state.cursorPos = Math.max(0, targetAbsPos - prevLinePromptLen);
+                state.cursorPos = Math.min(state.cursorPos, prevLineLen);
+                render();
+                return;
+            }
+            // History navigation
+            if (!state.active && state.currentLine === 0 && currentPhysicalRow === 0 && history.length > 0) {
+                if (historyIndex === -1) {
+                    savedInput = getFullInput();
+                }
+                if (historyIndex < history.length - 1) {
+                    historyIndex++;
+                    const historyEntry = history[history.length - 1 - historyIndex];
+                    state.lines = [historyEntry];
+                    state.currentLine = 0;
+                    state.cursorPos = historyEntry.length;
+                    render();
+                }
+            }
+            return;
+        }
+        // Down arrow
+        if (isDownArrow) {
+            if (state.active && state.selectedIndex < state.matches.length - 1 && state.selectedIndex < MAX_VISIBLE - 1) {
+                state.selectedIndex++;
+                render();
+                return;
+            }
+            const termWidth = getTerminalWidth();
+            const currentLinePromptLen = state.currentLine === 0 ? promptLen : 5;
+            const cursorAbsPos = currentLinePromptLen + state.cursorPos;
+            const currentPhysicalRow = Math.floor(cursorAbsPos / termWidth);
+            const cursorColInRow = cursorAbsPos % termWidth;
+            const currentLinePhysical = calcPhysicalLines(state.lines[state.currentLine], currentLinePromptLen, termWidth);
+            if (currentPhysicalRow < currentLinePhysical - 1) {
+                const newAbsPos = (currentPhysicalRow + 1) * termWidth + cursorColInRow;
+                state.cursorPos = Math.max(0, newAbsPos - currentLinePromptLen);
+                state.cursorPos = Math.min(state.cursorPos, state.lines[state.currentLine].length);
+                render();
+                return;
+            }
+            else if (state.currentLine < state.lines.length - 1) {
+                state.currentLine++;
+                const nextLinePromptLen = state.currentLine === 0 ? promptLen : 5;
+                const nextLineLen = state.lines[state.currentLine].length;
+                state.cursorPos = Math.max(0, cursorColInRow - nextLinePromptLen);
+                state.cursorPos = Math.min(state.cursorPos, nextLineLen);
+                render();
+                return;
+            }
+            // History forward
+            if (historyIndex >= 0) {
+                historyIndex--;
+                if (historyIndex === -1) {
+                    state.lines = savedInput.split('\n');
+                    state.currentLine = state.lines.length - 1;
+                    state.cursorPos = state.lines[state.currentLine].length;
+                }
+                else {
+                    const historyEntry = history[history.length - 1 - historyIndex];
+                    state.lines = [historyEntry];
+                    state.currentLine = 0;
+                    state.cursorPos = historyEntry.length;
+                }
+                updateAutocomplete();
+                render();
+            }
+            return;
+        }
+        // Left arrow
+        if (isLeftArrow) {
+            if (state.cursorPos > 0) {
+                state.cursorPos--;
+                process.stdout.write('\x1B[D');
+            }
+            else if (state.currentLine > 0) {
+                state.currentLine--;
+                state.cursorPos = state.lines[state.currentLine].length;
+                render();
+            }
+            return;
+        }
+        // Right arrow
+        if (isRightArrow) {
+            if (state.cursorPos < state.lines[state.currentLine].length) {
+                state.cursorPos++;
+                process.stdout.write('\x1B[C');
+            }
+            else if (state.currentLine < state.lines.length - 1) {
+                state.currentLine++;
+                state.cursorPos = 0;
+                render();
+            }
+            return;
+        }
+        // Option + Left (word left)
+        if (isOptionLeft) {
+            const line = state.lines[state.currentLine];
+            if (state.cursorPos > 0) {
+                let pos = state.cursorPos;
+                while (pos > 0 && line[pos - 1] === ' ')
+                    pos--;
+                while (pos > 0 && line[pos - 1] !== ' ')
+                    pos--;
+                state.cursorPos = pos;
+                render();
+            }
+            else if (state.currentLine > 0) {
+                state.currentLine--;
+                state.cursorPos = state.lines[state.currentLine].length;
+                render();
+            }
+            return;
+        }
+        // Option + Right (word right)
+        if (isOptionRight) {
+            const line = state.lines[state.currentLine];
+            if (state.cursorPos < line.length) {
+                let pos = state.cursorPos;
+                while (pos < line.length && line[pos] !== ' ')
+                    pos++;
+                while (pos < line.length && line[pos] === ' ')
+                    pos++;
+                state.cursorPos = pos;
+                render();
+            }
+            else if (state.currentLine < state.lines.length - 1) {
+                state.currentLine++;
+                state.cursorPos = 0;
+                render();
+            }
+            return;
+        }
+        // Home
+        if (isHome) {
+            state.cursorPos = 0;
+            render();
+            return;
+        }
+        // End
+        if (isEnd) {
+            state.cursorPos = state.lines[state.currentLine].length;
+            render();
+            return;
+        }
+        // Backspace
+        if (isBackspace) {
+            historyIndex = -1;
+            if (state.cursorPos > 0) {
+                const line = state.lines[state.currentLine];
+                state.lines[state.currentLine] = line.slice(0, state.cursorPos - 1) + line.slice(state.cursorPos);
+                state.cursorPos--;
+                updateAutocomplete();
+                render();
+            }
+            else if (state.currentLine > 0) {
+                const currentLine = state.lines[state.currentLine];
+                const prevLine = state.lines[state.currentLine - 1];
+                state.lines[state.currentLine - 1] = prevLine + currentLine;
+                state.lines.splice(state.currentLine, 1);
+                state.currentLine--;
+                state.cursorPos = prevLine.length;
+                updateAutocomplete();
+                render();
+            }
+            return;
+        }
+        // Regular character(s) - handles typing and paste
+        if (key.length >= 1) {
+            const printable = key.split('').filter(c => c.charCodeAt(0) >= 32).join('');
+            if (printable.length > 0) {
+                const line = state.lines[state.currentLine];
+                state.lines[state.currentLine] = line.slice(0, state.cursorPos) + printable + line.slice(state.cursorPos);
+                state.cursorPos += printable.length;
+                historyIndex = -1;
+                updateAutocomplete();
+                render();
+            }
+        }
+    }
+    /**
+     * Start input
+     */
+    function start() {
+        if (isRunning)
+            return;
+        isRunning = true;
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(true);
+        }
+        process.stdin.resume();
+        // Reset state
+        renderedTodoLines = 0;
+        linesAboveCursor = 0;
+        hasSeparators = false;
+        renderInput();
+        process.stdin.on('data', (data) => {
+            if (!isRunning)
+                return;
+            const key = data.toString();
+            handleKey(key, data);
+        });
+    }
+    /**
+     * Stop input
+     */
+    function stop() {
+        isRunning = false;
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(false);
+        }
+        process.stdin.removeAllListeners('data');
+    }
+    return { start, stop };
+}