@adiontaegerron/claude-multi-terminal 1.0.3 → 1.2.0

package/renderer.js

@@ -6,8 +6,76 @@ const { FitAddon } = require('xterm-addon-fit');
 const terminals = new Map();
 let terminalCounter = 0;
 
+// Command system
+let selectedCommandIndex = -1;
+let currentCommands = [];
+
+// Command history
+const commandHistory = [];
+let historyIndex = -1;
+let tempCurrentInput = '';
+const MAX_HISTORY_SIZE = 50;
+
+// Available commands
+const availableCommands = [
+    {
+        name: '/send',
+        syntax: '/send <terminal> <command>',
+        description: 'Send command to specific terminal',
+        args: ['terminal', 'command']
+    },
+    {
+        name: '/send-all',
+        syntax: '/send-all <command>',
+        description: 'Send command to all terminals',
+        args: ['command']
+    },
+    {
+        name: '/list',
+        syntax: '/list',
+        description: 'List all terminals',
+        args: []
+    },
+    {
+        name: '/help',
+        syntax: '/help',
+        description: 'Show available commands',
+        args: []
+    },
+    {
+        name: '/create',
+        syntax: '/create [name]',
+        description: 'Create new terminal with optional name',
+        args: ['name?']
+    },
+    {
+        name: '/close',
+        syntax: '/close <terminal>',
+        description: 'Close specific terminal',
+        args: ['terminal']
+    },
+    {
+        name: '/return',
+        syntax: '/return <terminal>',
+        description: 'Submit current input in specified terminal (press Enter)',
+        args: ['terminal']
+    },
+    {
+        name: '/clear',
+        syntax: '/clear <terminal>',
+        description: 'Clear current input line in specified terminal (Ctrl+C)',
+        args: ['terminal']
+    },
+    {
+        name: '/interrupt',
+        syntax: '/interrupt <terminal>',
+        description: 'Interrupt current command in specified terminal (Ctrl+C)',
+        args: ['terminal']
+    }
+];
+
 // Create a new terminal instance
-async function createTerminal() {
+async function createTerminal(customName = null) {
     terminalCounter++;
     const terminalId = `terminal-${terminalCounter}`;
     
@@ -21,7 +89,8 @@ async function createTerminal() {
     header.className = 'terminal-header';
     
     const title = document.createElement('span');
-    title.textContent = `Terminal ${terminalCounter}`;
+    const terminalName = customName || `Terminal ${terminalCounter}`;
+    title.textContent = terminalName;
     title.className = 'terminal-title';
     title.style.cursor = 'pointer';
     
@@ -80,14 +149,14 @@ async function createTerminal() {
         fitAddon,
         element: terminalContainer,
         titleElement: title,
-        name: `Terminal ${terminalCounter}`
+        name: terminalName
     });
     
     // Create terminal in main process
     await ipcRenderer.invoke('terminal:create', terminalId);
     
     // Add checkbox to chat sidebar
-    addTerminalCheckbox(terminalId, `Terminal ${terminalCounter}`);
+    addTerminalCheckbox(terminalId, terminalName);
     
     // Auto-start Claude Code
     setTimeout(() => {
@@ -201,6 +270,7 @@ ipcRenderer.on('terminal:exit', (event, terminalId, exitCode) => {
     }
 });
 
+
 // Chat functionality
 function addTerminalCheckbox(terminalId, name) {
     const container = document.getElementById('terminal-checkboxes');
@@ -248,6 +318,32 @@ function sendMessage() {
     const message = input.value.trim();
     if (!message) return;
     
+    // Save to command history
+    if (commandHistory.length === 0 || commandHistory[commandHistory.length - 1] !== message) {
+        commandHistory.push(message);
+        if (commandHistory.length > MAX_HISTORY_SIZE) {
+            commandHistory.shift();
+        }
+    }
+    historyIndex = commandHistory.length;
+    
+    // Hide command dropdown
+    hideCommandDropdown();
+    
+    // Check if this is a slash command
+    if (message.startsWith('/')) {
+        executeCommand(message);
+        input.value = '';
+        return;
+    }
+    
+    // Check if this is an @terminal command
+    if (message.startsWith('@')) {
+        executeAtCommand(message);
+        input.value = '';
+        return;
+    }
+    
     // Check if default prompt should be prepended
     let fullMessage = message;
     const useDefaultPrompt = document.getElementById('use-default-prompt').checked;
@@ -267,16 +363,38 @@ function sendMessage() {
     // Add message to chat display
     addChatMessage('You', message);
     
+    // Check if plan mode is enabled
+    const usePlanMode = document.getElementById('use-plan-mode').checked;
+    
     // Send to selected terminals
     selectedTerminals.forEach(terminalId => {
-        // Send the plan mode instruction first with proper line endings
-        ipcRenderer.invoke('terminal:write', terminalId, 'Please enter plan mode (press Shift+Tab twice)\r');
+        const termData = terminals.get(terminalId);
+        if (!termData) return;
         
-        // Small delay to ensure the first command is processed
-        setTimeout(() => {
-            // Send the actual message with carriage return to execute
+        if (usePlanMode) {
+            // Send Shift+Tab twice to enter plan mode
+            // ESC[Z is the escape sequence for Shift+Tab
+            ipcRenderer.invoke('terminal:write', terminalId, '\x1b[Z\x1b[Z');
+            
+            // Small delay to ensure plan mode is activated
+            setTimeout(() => {
+                // Send the actual message with carriage return to execute
+                ipcRenderer.invoke('terminal:write', terminalId, fullMessage + '\r');
+                
+                // Auto-return after sending the message
+                setTimeout(() => {
+                    executeReturnCommand([termData.name], true);
+                }, 150);
+            }, 300);
+        } else {
+            // Send the message directly to the terminal
             ipcRenderer.invoke('terminal:write', terminalId, fullMessage + '\r');
-        }, 100);
+            
+            // Auto-return after sending the message
+            setTimeout(() => {
+                executeReturnCommand([termData.name], true);
+            }, 150);
+        }
     });
     
     // Clear input
@@ -285,6 +403,8 @@ function sendMessage() {
 
 function addChatMessage(sender, message) {
     const messagesContainer = document.getElementById('chat-messages');
+    if (!messagesContainer) return; // Skip if no chat messages container
+    
     const messageDiv = document.createElement('div');
     messageDiv.className = 'chat-message';
     
@@ -304,34 +424,710 @@ function addChatMessage(sender, message) {
     messagesContainer.scrollTop = messagesContainer.scrollHeight;
 }
 
+// Command System Functions
+function parseCommand(message) {
+    const parts = message.split(' ');
+    const command = parts[0];
+    const args = parts.slice(1);
+    
+    return { command, args, raw: message };
+}
+
+function findTerminal(identifier) {
+    // Try to find terminal by various methods
+    
+    // 1. Try exact terminal ID match
+    if (terminals.has(identifier)) {
+        return { id: identifier, terminal: terminals.get(identifier) };
+    }
+    
+    // 2. Try exact name match (case-insensitive)
+    for (const [id, termData] of terminals.entries()) {
+        if (termData.name && termData.name.toLowerCase() === identifier.toLowerCase()) {
+            return { id, terminal: termData };
+        }
+    }
+    
+    // 3. Try partial name match
+    for (const [id, termData] of terminals.entries()) {
+        if (termData.name && termData.name.toLowerCase().includes(identifier.toLowerCase())) {
+            return { id, terminal: termData };
+        }
+    }
+    
+    // 4. Try position/number match
+    const position = parseInt(identifier);
+    if (!isNaN(position) && position > 0) {
+        const terminalArray = Array.from(terminals.entries());
+        if (position <= terminalArray.length) {
+            const [id, termData] = terminalArray[position - 1];
+            return { id, terminal: termData };
+        }
+    }
+    
+    return null;
+}
+
+function executeCommand(message) {
+    const { command, args } = parseCommand(message);
+    
+    switch (command) {
+        case '/send':
+            executeSendCommand(args);
+            break;
+        case '/send-all':
+            executeSendAllCommand(args);
+            break;
+        case '/list':
+            executeListCommand();
+            break;
+        case '/help':
+            executeHelpCommand();
+            break;
+        case '/create':
+            executeCreateCommand(args);
+            break;
+        case '/close':
+            executeCloseCommand(args);
+            break;
+        case '/return':
+            executeReturnCommand(args);
+            break;
+        case '/clear':
+        case '/interrupt':
+            executeClearCommand(args);
+            break;
+        default:
+            addChatMessage('System', `Unknown command: ${command}. Type /help for available commands.`);
+    }
+}
+
+function executeSendCommand(args) {
+    if (args.length < 2) {
+        addChatMessage('System', 'Usage: /send <terminal> <command>');
+        return;
+    }
+    
+    const terminalIdentifier = args[0];
+    const command = args.slice(1).join(' ');
+    
+    const result = findTerminal(terminalIdentifier);
+    if (!result) {
+        const available = Array.from(terminals.values()).map(t => t.name).join(', ');
+        addChatMessage('System', `Terminal '${terminalIdentifier}' not found. Available: ${available}`);
+        return;
+    }
+    
+    // Send command to terminal
+    ipcRenderer.invoke('terminal:write', result.id, command + '\r');
+    addChatMessage('System', `✅ Sent '${command}' to ${result.terminal.name}`);
+}
+
+function executeSendAllCommand(args) {
+    if (args.length === 0) {
+        addChatMessage('System', 'Usage: /send-all <command>');
+        return;
+    }
+    
+    const command = args.join(' ');
+    let count = 0;
+    
+    for (const [id, termData] of terminals.entries()) {
+        ipcRenderer.invoke('terminal:write', id, command + '\r');
+        count++;
+    }
+    
+    addChatMessage('System', `✅ Sent '${command}' to ${count} terminals`);
+}
+
+function executeListCommand() {
+    const terminalList = Array.from(terminals.entries()).map(([id, termData], index) => {
+        return `${index + 1}. ${termData.name} (${id})`;
+    });
+    
+    if (terminalList.length === 0) {
+        addChatMessage('System', 'No terminals available');
+    } else {
+        addChatMessage('System', 'Available terminals:\n' + terminalList.join('\n'));
+    }
+}
+
+function executeHelpCommand() {
+    const helpText = availableCommands.map(cmd => 
+        `${cmd.syntax} - ${cmd.description}`
+    ).join('\n');
+    
+    const atHelp = '\n@terminal <command> - Send command directly to named terminal(s)\nExamples:\n  @Tom ls -la - Send to single terminal\n  @"My Server" status - Terminal with spaces in name\n  @term1,term2,term3 pwd - Multiple terminals (comma-separated)\n  @term1 @term2 date - Multiple terminals (space-separated)\n  @all whoami - Send to all terminals';
+    
+    addChatMessage('System', 'Available commands:\n' + helpText + atHelp);
+}
+
+function executeCreateCommand(args) {
+    const name = args.length > 0 ? args.join(' ') : undefined;
+    createTerminal(name);
+    addChatMessage('System', `✅ Creating new terminal${name ? ` named '${name}'` : ''}`);
+}
+
+function executeCloseCommand(args) {
+    if (args.length === 0) {
+        addChatMessage('System', 'Usage: /close <terminal>');
+        return;
+    }
+    
+    const terminalIdentifier = args[0];
+    const result = findTerminal(terminalIdentifier);
+    
+    if (!result) {
+        const available = Array.from(terminals.values()).map(t => t.name).join(', ');
+        addChatMessage('System', `Terminal '${terminalIdentifier}' not found. Available: ${available}`);
+        return;
+    }
+    
+    closeTerminal(result.id);
+    addChatMessage('System', `✅ Closed terminal ${result.terminal.name}`);
+}
+
+function executeReturnCommand(args, silent = false) {
+    if (args.length === 0) {
+        if (!silent) addChatMessage('System', 'Usage: /return <terminal>');
+        return;
+    }
+    
+    const terminalIdentifier = args[0];
+    const result = findTerminal(terminalIdentifier);
+    
+    if (!result) {
+        if (!silent) {
+            const available = Array.from(terminals.values()).map(t => t.name).join(', ');
+            addChatMessage('System', `Terminal '${terminalIdentifier}' not found. Available: ${available}`);
+        }
+        return;
+    }
+    
+    // Send carriage return to submit current input
+    ipcRenderer.invoke('terminal:write', result.id, '\r');
+    if (!silent) {
+        addChatMessage('System', `✅ Submitted input in ${result.terminal.name}`);
+    }
+}
+
+function executeClearCommand(args) {
+    if (args.length === 0) {
+        addChatMessage('System', 'Usage: /clear <terminal> or /interrupt <terminal>');
+        return;
+    }
+    
+    const terminalIdentifier = args[0];
+    const result = findTerminal(terminalIdentifier);
+    
+    if (!result) {
+        const available = Array.from(terminals.values()).map(t => t.name).join(', ');
+        addChatMessage('System', `Terminal '${terminalIdentifier}' not found. Available: ${available}`);
+        return;
+    }
+    
+    // Send Ctrl+C to clear/interrupt
+    ipcRenderer.invoke('terminal:write', result.id, '\x03');
+    addChatMessage('System', `✅ Sent Ctrl+C to ${result.terminal.name}`);
+}
+
+function executeAtCommand(message) {
+    // Parse various @terminal command syntaxes:
+    // 1. Space-separated: "@term1 @term2 command"
+    // 2. Comma-separated: "@term1,term2,term3 command"
+    // 3. Single terminal: "@terminal command" or '@"terminal name" command'
+    // 4. All terminals: "@all command"
+    
+    let targetTerminals = [];
+    let command = '';
+    
+    // First, try to match space-separated terminals at the beginning
+    const spaceSeparatedRegex = /^(@(?:"[^"]+"|[^\s,]+)\s+)+(.+)$/;
+    const spaceSeparatedMatch = message.match(spaceSeparatedRegex);
+    
+    if (spaceSeparatedMatch) {
+        // Extract all @terminal references
+        const terminalsStr = spaceSeparatedMatch[0].substring(0, spaceSeparatedMatch[0].length - spaceSeparatedMatch[2].length);
+        command = spaceSeparatedMatch[2].trim();
+        
+        // Parse each @terminal reference
+        const terminalMatches = terminalsStr.matchAll(/@(?:"([^"]+)"|([^\s,]+))/g);
+        for (const match of terminalMatches) {
+            const terminalName = match[1] || match[2];
+            targetTerminals.push(terminalName.trim());
+        }
+    } else {
+        // Try single @terminal with possible comma-separated names
+        let match = message.match(/^@"([^"]+)"\s+(.+)$/); // Handle quoted names
+        
+        if (!match) {
+            match = message.match(/^@(\S+)\s+(.+)$/); // Handle unquoted names (including comma-separated)
+        }
+        
+        if (!match) {
+            addChatMessage('System', 'Usage: @terminal <command>\nExamples:\n  @Tom ls -la\n  @term1,term2 pwd\n  @term1 @term2 date\n  @all whoami');
+            return;
+        }
+        
+        const terminalNameStr = match[1];
+        command = match[2];
+        
+        // Check if it's @all
+        if (terminalNameStr.toLowerCase() === 'all') {
+            // Send to all terminals
+            const allTerminals = Array.from(terminals.entries());
+            if (allTerminals.length === 0) {
+                addChatMessage('System', 'No terminals available');
+                return;
+            }
+            
+            const terminalNames = [];
+            for (const [id, termData] of allTerminals) {
+                ipcRenderer.invoke('terminal:write', id, command + '\r');
+                terminalNames.push(termData.name);
+            }
+            
+            addChatMessage('System', `✅ Sent '${command}' to all ${allTerminals.length} terminals`);
+            
+            // Auto-return to all terminals after a short delay
+            setTimeout(() => {
+                for (const name of terminalNames) {
+                    executeReturnCommand([name], true);
+                }
+            }, 150);
+            return;
+        }
+        
+        // Handle comma-separated terminal names
+        targetTerminals = terminalNameStr.split(',').map(name => name.trim());
+    }
+    
+    // Process all target terminals
+    const foundTerminals = [];
+    const notFoundTerminals = [];
+    
+    for (const terminalName of targetTerminals) {
+        const result = findTerminal(terminalName);
+        if (result) {
+            foundTerminals.push({ name: terminalName, id: result.id, terminal: result.terminal });
+        } else {
+            notFoundTerminals.push(terminalName);
+        }
+    }
+    
+    // Report not found terminals
+    if (notFoundTerminals.length > 0) {
+        const available = Array.from(terminals.values()).map(t => t.name).join(', ');
+        addChatMessage('System', `Terminal(s) not found: ${notFoundTerminals.join(', ')}. Available: ${available}`);
+    }
+    
+    // Send command to all found terminals
+    if (foundTerminals.length > 0) {
+        const sentToNames = [];
+        for (const { id, terminal } of foundTerminals) {
+            ipcRenderer.invoke('terminal:write', id, command + '\r');
+            sentToNames.push(terminal.name);
+        }
+        addChatMessage('System', `✅ Sent '${command}' to ${foundTerminals.length} terminal(s): ${sentToNames.join(', ')}`);
+        
+        // Auto-return to all terminals after a short delay
+        setTimeout(() => {
+            for (const name of sentToNames) {
+                executeReturnCommand([name], true); // true = silent mode
+            }
+        }, 150);
+    }
+}
+
+// Dropdown Functions
+function showCommandDropdown() {
+    const dropdown = document.getElementById('command-dropdown');
+    const input = document.getElementById('chat-input');
+    const inputValue = input.value;
+    
+    // Filter commands based on current input
+    const searchTerm = inputValue.substring(1).toLowerCase(); // Remove the '/'
+    currentCommands = availableCommands.filter(cmd => 
+        cmd.name.substring(1).toLowerCase().startsWith(searchTerm)
+    );
+    
+    if (currentCommands.length === 0) {
+        hideCommandDropdown();
+        return;
+    }
+    
+    populateCommandDropdown();
+    dropdown.style.display = 'block';
+    selectedCommandIndex = -1;
+}
+
+function showTerminalDropdown(cursorPos = null) {
+    const dropdown = document.getElementById('command-dropdown');
+    const input = document.getElementById('chat-input');
+    const inputValue = input.value;
+    const pos = cursorPos !== null ? cursorPos : input.selectionStart;
+    
+    // Find the @ symbol and extract the partial terminal name
+    let atPos = -1;
+    let searchTerm = '';
+    
+    // Search backwards from cursor to find the @ symbol
+    for (let i = pos - 1; i >= 0; i--) {
+        if (inputValue[i] === '@') {
+            atPos = i;
+            // Extract text from @ to cursor position
+            searchTerm = inputValue.substring(i + 1, pos).toLowerCase();
+            break;
+        } else if (inputValue[i] === ' ' || inputValue[i] === ',') {
+            // Stop if we hit a space or comma before finding @
+            break;
+        }
+    }
+    
+    // If no @ found or @ is not at a valid position, hide dropdown
+    if (atPos === -1) {
+        hideCommandDropdown();
+        return;
+    }
+    
+    const availableTerminals = Array.from(terminals.entries()).map(([id, termData]) => ({
+        name: '@' + termData.name,
+        syntax: '@' + termData.name + ' <command>',
+        description: `Send command to ${termData.name}`,
+        id: id,
+        isTerminal: true,
+        terminalName: termData.name,
+        atPosition: atPos
+    }));
+    
+    // Add @all option
+    availableTerminals.unshift({
+        name: '@all',
+        syntax: '@all <command>',
+        description: 'Send command to all terminals',
+        isTerminal: true,
+        terminalName: 'all',
+        atPosition: atPos
+    });
+    
+    currentCommands = availableTerminals.filter(term => 
+        term.terminalName.toLowerCase().startsWith(searchTerm)
+    );
+    
+    if (currentCommands.length === 0) {
+        hideCommandDropdown();
+        return;
+    }
+    
+    populateCommandDropdown();
+    dropdown.style.display = 'block';
+    selectedCommandIndex = -1;
+}
+
+function hideCommandDropdown() {
+    const dropdown = document.getElementById('command-dropdown');
+    dropdown.style.display = 'none';
+    selectedCommandIndex = -1;
+    currentCommands = [];
+}
+
+function populateCommandDropdown() {
+    const commandList = document.getElementById('command-list');
+    commandList.innerHTML = '';
+    
+    currentCommands.forEach((command, index) => {
+        const option = document.createElement('div');
+        option.className = 'command-option';
+        option.setAttribute('data-index', index);
+        
+        const name = document.createElement('div');
+        name.className = 'command-name';
+        name.textContent = command.name;
+        
+        const description = document.createElement('div');
+        description.className = 'command-description';
+        description.textContent = command.description;
+        
+        const syntax = document.createElement('div');
+        syntax.className = 'command-syntax';
+        syntax.textContent = command.syntax;
+        
+        option.appendChild(name);
+        option.appendChild(description);
+        option.appendChild(syntax);
+        
+        option.addEventListener('click', () => {
+            selectCommand(index);
+        });
+        
+        commandList.appendChild(option);
+    });
+}
+
+function selectCommand(index) {
+    if (index < 0 || index >= currentCommands.length) return;
+    
+    const command = currentCommands[index];
+    const input = document.getElementById('chat-input');
+    
+    // Check if this is a terminal selection with position info
+    if (command.isTerminal && command.atPosition !== undefined) {
+        const value = input.value;
+        const atPos = command.atPosition;
+        
+        // Find the end of the partial terminal name
+        let endPos = input.selectionStart;
+        
+        // Replace the partial terminal name with the selected one
+        const beforeAt = value.substring(0, atPos);
+        const afterCursor = value.substring(endPos);
+        
+        // Insert the selected terminal name (without the @, as it's already there)
+        input.value = beforeAt + '@' + command.terminalName + ' ' + afterCursor;
+        
+        // Position cursor after the inserted terminal name and space
+        const newCursorPos = atPos + command.terminalName.length + 2; // +2 for @ and space
+        input.setSelectionRange(newCursorPos, newCursorPos);
+    } else {
+        // Original behavior for slash commands
+        input.value = command.name + ' ';
+        input.setSelectionRange(input.value.length, input.value.length);
+    }
+    
+    input.focus();
+    hideCommandDropdown();
+    
+    // Trigger input event to update highlighting
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function navigateDropdown(direction) {
+    if (currentCommands.length === 0) return;
+    
+    // Update selected index
+    if (direction === 'down') {
+        selectedCommandIndex = Math.min(selectedCommandIndex + 1, currentCommands.length - 1);
+    } else if (direction === 'up') {
+        selectedCommandIndex = Math.max(selectedCommandIndex - 1, -1);
+    }
+    
+    // Update visual selection
+    const options = document.querySelectorAll('.command-option');
+    options.forEach((option, index) => {
+        option.classList.toggle('selected', index === selectedCommandIndex);
+    });
+}
+
+function selectCurrentCommand() {
+    if (selectedCommandIndex >= 0 && selectedCommandIndex < currentCommands.length) {
+        selectCommand(selectedCommandIndex);
+    }
+}
+
+// Update overlay with syntax highlighting
+function updateOverlayHighlighting() {
+    const input = document.getElementById('chat-input');
+    const overlay = document.getElementById('input-overlay');
+    const value = input.value;
+    
+    // Parse and highlight text
+    let highlightedText = escapeHtml(value);
+    
+    // Highlight @terminal commands
+    highlightedText = highlightedText.replace(
+        /@"([^"]+)"/g, 
+        (match, terminalName) => {
+            const result = findTerminal(terminalName);
+            return result ? `@<span class="highlight-terminal">"${terminalName}"</span>` : match;
+        }
+    );
+    
+    highlightedText = highlightedText.replace(
+        /@(\S+)/g, 
+        (match, terminalName) => {
+            // Handle @all specially
+            if (terminalName.toLowerCase() === 'all') {
+                return `@<span class="highlight-terminal">${terminalName}</span>`;
+            }
+            // Handle comma-separated terminals
+            if (terminalName.includes(',')) {
+                const parts = terminalName.split(',');
+                const highlightedParts = parts.map((part, index) => {
+                    const trimmedPart = part.trim();
+                    const result = findTerminal(trimmedPart);
+                    return (index > 0 ? ',' : '') + (result ? `<span class="highlight-terminal">${trimmedPart}</span>` : trimmedPart);
+                }).join('');
+                return '@' + highlightedParts;
+            }
+            // Single terminal
+            const result = findTerminal(terminalName);
+            return result ? `@<span class="highlight-terminal">${terminalName}</span>` : match;
+        }
+    );
+    
+    // Highlight slash commands
+    highlightedText = highlightedText.replace(
+        /^(\/\w+)/gm,
+        (match, command) => {
+            const validCommand = availableCommands.find(cmd => cmd.name === command);
+            return validCommand ? `<span class="highlight-command">${command}</span>` : match;
+        }
+    );
+    
+    overlay.innerHTML = highlightedText;
+    
+    // Sync scroll position
+    overlay.scrollTop = input.scrollTop;
+    overlay.scrollLeft = input.scrollLeft;
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
 // Initialize collapsible default prompt section
 function initCollapsible() {
     const toggle = document.querySelector('.collapse-toggle');
     const content = document.querySelector('.collapsible-content');
+    const header = document.querySelector('.collapsible-header');
     
-    toggle.addEventListener('click', () => {
+    const toggleSection = (e) => {
+        // Prevent double-triggering when clicking the toggle button
+        if (e && e.target === toggle) {
+            e.stopPropagation();
+        }
+        
         const isExpanded = content.style.display !== 'none';
         content.style.display = isExpanded ? 'none' : 'block';
         toggle.textContent = isExpanded ? '▶' : '▼';
-    });
+    };
+    
+    // Make the entire header clickable
+    header.addEventListener('click', toggleSection);
 }
 
+
 // Initialize app
 document.addEventListener('DOMContentLoaded', () => {
     // New terminal button
-    document.getElementById('new-terminal-btn').addEventListener('click', createTerminal);
+    document.getElementById('new-terminal-btn').addEventListener('click', () => createTerminal());
+    
     
     // Send message button
     document.getElementById('send-message-btn').addEventListener('click', sendMessage);
     
-    // Chat input - Enter key (Shift+Enter for new line)
+    // Chat input - Enter key (Shift+Enter for new line) and dropdown navigation
     document.getElementById('chat-input').addEventListener('keydown', (e) => {
+        const dropdown = document.getElementById('command-dropdown');
+        const isDropdownVisible = dropdown.style.display === 'block';
+        const input = e.target;
+        
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
-            sendMessage();
+            if (isDropdownVisible && selectedCommandIndex >= 0) {
+                selectCurrentCommand();
+            } else {
+                sendMessage();
+            }
+        } else if (e.key === 'Escape' && isDropdownVisible) {
+            e.preventDefault();
+            hideCommandDropdown();
+        } else if (e.key === 'ArrowDown' && isDropdownVisible) {
+            e.preventDefault();
+            navigateDropdown('down');
+        } else if (e.key === 'ArrowUp' && isDropdownVisible) {
+            e.preventDefault();
+            navigateDropdown('up');
+        } else if (e.key === 'Tab' && isDropdownVisible) {
+            e.preventDefault();
+            if (selectedCommandIndex >= 0) {
+                selectCurrentCommand();
+            } else if (currentCommands.length > 0) {
+                // Auto-select first option if none selected
+                selectCommand(0);
+            }
+        } else if (e.key === 'ArrowUp' && !isDropdownVisible && commandHistory.length > 0) {
+            e.preventDefault();
+            if (historyIndex === commandHistory.length) {
+                tempCurrentInput = input.value;
+            }
+            if (historyIndex > 0) {
+                historyIndex--;
+                input.value = commandHistory[historyIndex];
+            }
+        } else if (e.key === 'ArrowDown' && !isDropdownVisible && commandHistory.length > 0) {
+            e.preventDefault();
+            if (historyIndex < commandHistory.length - 1) {
+                historyIndex++;
+                input.value = commandHistory[historyIndex];
+            } else if (historyIndex === commandHistory.length - 1) {
+                historyIndex = commandHistory.length;
+                input.value = tempCurrentInput;
+            }
         }
     });
     
+    // Chat input - Show dropdown on '/' and '@' and filter as user types
+    document.getElementById('chat-input').addEventListener('input', (e) => {
+        const input = e.target;
+        const value = input.value;
+        const cursorPos = input.selectionStart;
+        
+        // Update overlay highlighting
+        updateOverlayHighlighting();
+        
+        // Check for slash commands (only at beginning and when cursor at end)
+        if (cursorPos === value.length && value.startsWith('/') && value.length >= 1) {
+            showCommandDropdown();
+            return;
+        }
+        
+        // Check for @ at cursor position (can be anywhere in the input)
+        if (cursorPos > 0) {
+            // Look for @ at or before cursor position
+            let foundAt = false;
+            for (let i = cursorPos - 1; i >= 0; i--) {
+                if (value[i] === '@') {
+                    foundAt = true;
+                    break;
+                } else if (value[i] === ' ' || value[i] === ',') {
+                    // If we hit a space or comma, check if it's immediately followed by @
+                    if (i === cursorPos - 1 && value[cursorPos - 1] === '@') {
+                        foundAt = true;
+                    }
+                    break;
+                }
+            }
+            
+            if (foundAt) {
+                showTerminalDropdown(cursorPos);
+                return;
+            }
+        }
+        
+        hideCommandDropdown();
+    });
+    
+    // Hide dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        const dropdown = document.getElementById('command-dropdown');
+        const input = document.getElementById('chat-input');
+        
+        if (!dropdown.contains(e.target) && e.target !== input) {
+            hideCommandDropdown();
+        }
+    });
+    
+    // Sync overlay scroll with input
+    document.getElementById('chat-input').addEventListener('scroll', () => {
+        const input = document.getElementById('chat-input');
+        const overlay = document.getElementById('input-overlay');
+        overlay.scrollTop = input.scrollTop;
+        overlay.scrollLeft = input.scrollLeft;
+    });
+    
     // Initialize collapsible
     initCollapsible();