@adiontaegerron/claude-multi-terminal 1.1.0 → 2.0.0

package/README.md

@@ -7,13 +7,33 @@ A multi-terminal editor for coordinating multiple Claude Code instances. Run mul
 ## Features
 
 - **Multi-Terminal Support**: Run multiple Claude Code instances in a 2x2 grid layout
-- **Unified Chat Interface**: Send commands to selected terminals from a single chat interface
-- **Terminal Selection**: Choose which terminals receive your commands with checkboxes
+- **Unified Chat Interface**: Send commands to terminals using @ syntax
+- **Multi-@ Terminal Commands**: Target terminals with flexible syntax:
+  - `@all command` - Send to all terminals
+  - `@term1,term2,term3 command` - Comma-separated terminals
+  - `@term1 @term2 command` - Space-separated terminals
+- **Mixed @/ Commands**: Combine terminal targeting with slash commands:
+  - `@term1 /clear` - Run slash command on specific terminal
+  - `@term1 @term2 /list` - Multiple terminals with slash commands
+  - `@all /interrupt` - Slash commands with @all
+- **Smart Autocomplete**: Get suggestions while typing @ or / anywhere in your message
+- **Slash Commands**: Built-in commands for terminal management (works anywhere)
 - **Default Prompt**: Set a default prompt to prepend to all messages
+- **Plan Mode Support**: Automatically enters plan mode with Shift+Tab
 - **Auto-Start Claude**: Each terminal automatically starts Claude Code
 - **Rename Terminals**: Double-click terminal titles to rename them
 - **Responsive Layout**: Adapts to different screen sizes
 
+## Breaking Changes in v2.0
+
+- **Removed checkbox selection system** - All commands must now use @ syntax
+- **No default terminal selection** - You must explicitly specify terminals with @
+- **Plain text without @ or / will show an error** - Every command needs a target
+
+To migrate from v1.x:
+- Instead of selecting checkboxes and typing a command, use: `@term1 @term2 command`
+- To send to all terminals, use: `@all command`
+
 ## Installation
 
 ### From npm
@@ -45,16 +65,42 @@ This will open the multi-terminal editor with all terminals starting in your cur
 
 1. **Start the Application**: Run `claude-multi` in your project directory
 2. **Create Terminals**: Click "New Terminal" to add more Claude instances (starts with one)
-3. **Select Terminals**: Use checkboxes in the chat sidebar to select which terminals receive commands
-4. **Send Commands**: Type in the chat input and click "Send" or press Enter
+3. **Target Terminals**: Use @ syntax to specify which terminals receive commands
+4. **Send Commands**: Type your command with @ targeting and press Enter
 5. **Use Default Prompt**: Expand the "Default Prompt" section to set a prompt that's prepended to all messages
 
+**Important**: Version 2.0 removes checkbox selection. All commands must now use @ syntax to target terminals.
+
+### Slash Commands
+
+- `/send <terminal> <command>` - Send command to specific terminal
+- `/send-all <command>` or `/broadcast <command>` - Send to all terminals
+- `/list` - List all terminals
+- `/create [name]` - Create new terminal with optional name
+- `/close <terminal>` - Close specific terminal
+- `/return <terminal>` - Submit current input in terminal (press Enter)
+- `/clear <terminal>` or `/interrupt <terminal>` - Send Ctrl+C to terminal
+- `/help` - Show available commands
+
+### @ Terminal Commands
+
+Send commands directly to terminals using @ syntax:
+
+- `@Terminal1 ls -la` - Send to single terminal
+- `@"My Terminal" pwd` - Terminal with spaces in name
+- `@term1,term2,term3 date` - Multiple terminals (comma-separated)
+- `@term1 @term2 @term3 whoami` - Multiple terminals (space-separated)
+- `@all echo "Hello"` - Send to all terminals
+
+**Autocomplete**: Type `@` anywhere to get terminal suggestions!
+
 ### Tips
 
 - Each terminal automatically starts Claude Code when created
-- Messages include a plan mode instruction by default
+- Plan mode is activated automatically using Shift+Tab
 - Double-click terminal titles to rename them for better organization
 - The application uses your current directory as the working directory for all terminals
+- Use multi-@ commands to coordinate multiple Claude instances efficiently
 
 ## Development
 

package/index.html

@@ -14,13 +14,6 @@
         
         <div id="toolbar-extended">
             <div class="controls-row">
-                <div id="terminal-selector" class="control-section">
-                    <label>Send to:</label>
-                    <div id="terminal-checkboxes">
-                        <!-- Terminal checkboxes will be added here dynamically -->
-                    </div>
-                </div>
-                
                 <div id="default-prompt-section" class="control-section collapsible">
                     <div class="collapsible-header">
                         <button class="collapse-toggle">▶</button>
@@ -36,18 +29,22 @@
                 </div>
             </div>
             
+            <div class="plan-mode-row">
+                <label class="plan-mode-option">
+                    <input type="checkbox" id="use-plan-mode" checked />
+                    <span>Send in Plan Mode</span>
+                </label>
+            </div>
+            
             <div class="input-row">
                 <div class="input-wrapper">
-                    <textarea id="chat-input" placeholder="Type your message or / for commands..."></textarea>
+                    <div id="input-overlay" class="input-overlay"></div>
+                    <textarea id="chat-input" placeholder="Type your message, / for commands, or @terminal for direct send..."></textarea>
                     <div id="command-dropdown" class="command-dropdown" style="display: none;">
                         <div id="command-list" class="command-list">
                             <!-- Command options will be populated here -->
                         </div>
                     </div>
-                    <label class="plan-mode-option">
-                        <input type="checkbox" id="use-plan-mode" checked />
-                        <span>Use Plan Mode</span>
-                    </label>
                 </div>
                 <button id="send-message-btn">Send</button>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adiontaegerron/claude-multi-terminal",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Multi-terminal editor for coordinating multiple Claude Code instances",
   "main": "main.js",
   "bin": {

package/renderer.js

@@ -155,9 +155,6 @@ async function createTerminal(customName = null) {
     // Create terminal in main process
     await ipcRenderer.invoke('terminal:create', terminalId);
     
-    // Add checkbox to chat sidebar
-    addTerminalCheckbox(terminalId, terminalName);
-    
     // Auto-start Claude Code
     setTimeout(() => {
         ipcRenderer.invoke('terminal:write', terminalId, 'claude\r');
@@ -191,7 +188,6 @@ async function createTerminal(customName = null) {
         if (newName && newName !== title.textContent) {
             title.textContent = newName;
             terminals.get(terminalId).name = newName;
-            updateTerminalCheckbox(terminalId, newName);
         }
         title.style.display = 'inline';
         renameInput.style.display = 'none';
@@ -249,9 +245,6 @@ async function closeTerminal(terminalId) {
         terminal.xterm.dispose();
         terminal.element.remove();
         terminals.delete(terminalId);
-        
-        // Remove checkbox from chat
-        removeTerminalCheckbox(terminalId);
     }
 }
 
@@ -270,47 +263,83 @@ ipcRenderer.on('terminal:exit', (event, terminalId, exitCode) => {
     }
 });
 
-
-// Chat functionality
-function addTerminalCheckbox(terminalId, name) {
-    const container = document.getElementById('terminal-checkboxes');
-    
-    const label = document.createElement('label');
-    label.className = 'terminal-checkbox-label';
-    label.setAttribute('data-terminal-id', terminalId);
-    
-    const checkbox = document.createElement('input');
-    checkbox.type = 'checkbox';
-    checkbox.className = 'terminal-selector-checkbox';
-    checkbox.value = terminalId;
-    checkbox.checked = true; // Default to checked
-    
-    const span = document.createElement('span');
-    span.textContent = name;
-    
-    label.appendChild(checkbox);
-    label.appendChild(span);
-    container.appendChild(label);
-}
-
-function updateTerminalCheckbox(terminalId, newName) {
-    const label = document.querySelector(`[data-terminal-id="${terminalId}"]`);
-    if (label) {
-        const span = label.querySelector('span');
-        span.textContent = newName;
-    }
-}
-
-function removeTerminalCheckbox(terminalId) {
-    const label = document.querySelector(`[data-terminal-id="${terminalId}"]`);
-    if (label) {
-        label.remove();
+// Parse complex commands that mix @ terminals and / commands
+function parseComplexCommand(message) {
+    const commands = [];
+    let currentPos = 0;
+    
+    while (currentPos < message.length) {
+        // Skip whitespace
+        while (currentPos < message.length && message[currentPos] === ' ') {
+            currentPos++;
+        }
+        
+        if (currentPos >= message.length) break;
+        
+        // Check if we're starting with @ terminals
+        const terminals = [];
+        while (currentPos < message.length && message[currentPos] === '@') {
+            // Parse @terminal or @"terminal name"
+            let terminalName = '';
+            currentPos++; // Skip @
+            
+            if (currentPos < message.length && message[currentPos] === '"') {
+                // Quoted terminal name
+                currentPos++; // Skip opening quote
+                while (currentPos < message.length && message[currentPos] !== '"') {
+                    terminalName += message[currentPos];
+                    currentPos++;
+                }
+                if (currentPos < message.length) currentPos++; // Skip closing quote
+            } else {
+                // Unquoted terminal name (can include commas for multiple terminals)
+                while (currentPos < message.length && 
+                       message[currentPos] !== ' ' && 
+                       message[currentPos] !== '@' &&
+                       message[currentPos] !== '/') {
+                    terminalName += message[currentPos];
+                    currentPos++;
+                }
+            }
+            
+            // Handle comma-separated terminals
+            if (terminalName.includes(',')) {
+                terminals.push(...terminalName.split(',').map(t => t.trim()).filter(t => t));
+            } else if (terminalName) {
+                terminals.push(terminalName);
+            }
+            
+            // Skip whitespace after terminal
+            while (currentPos < message.length && message[currentPos] === ' ') {
+                currentPos++;
+            }
+        }
+        
+        // Now parse the command (either /command or regular command)
+        let command = '';
+        let commandStart = currentPos;
+        
+        // Find the end of this command (next @ or end of string)
+        while (currentPos < message.length) {
+            if (message[currentPos] === '@' && 
+                (currentPos === 0 || message[currentPos - 1] === ' ')) {
+                // Found start of next terminal specification
+                break;
+            }
+            currentPos++;
+        }
+        
+        command = message.substring(commandStart, currentPos).trim();
+        
+        if (terminals.length > 0 && command) {
+            commands.push({ terminals, command });
+        } else if (command && !terminals.length) {
+            // Command without specific terminals (use all or selected)
+            commands.push({ terminals: [], command });
+        }
     }
-}
-
-function getSelectedTerminals() {
-    const checkboxes = document.querySelectorAll('.terminal-selector-checkbox:checked');
-    return Array.from(checkboxes).map(cb => cb.value);
+    
+    return commands;
 }
 
 function sendMessage() {
@@ -330,26 +359,11 @@ function sendMessage() {
     // Hide command dropdown
     hideCommandDropdown();
     
-    // Check if this is a slash command
-    if (message.startsWith('/')) {
-        executeCommand(message);
-        input.value = '';
-        return;
-    }
-    
-    // Check if default prompt should be prepended
-    let fullMessage = message;
-    const useDefaultPrompt = document.getElementById('use-default-prompt').checked;
-    const defaultPrompt = document.getElementById('default-prompt-text').value.trim();
-    
-    if (useDefaultPrompt && defaultPrompt) {
-        fullMessage = defaultPrompt + ' ' + message;
-    }
+    // Parse the complex command
+    const parsedCommands = parseComplexCommand(message);
     
-    // Get selected terminals
-    const selectedTerminals = getSelectedTerminals();
-    if (selectedTerminals.length === 0) {
-        alert('Please select at least one terminal');
+    if (parsedCommands.length === 0) {
+        addChatMessage('System', 'Invalid command format. Use @terminal command or /command syntax.');
         return;
     }
     
@@ -358,23 +372,107 @@ function sendMessage() {
     
     // Check if plan mode is enabled
     const usePlanMode = document.getElementById('use-plan-mode').checked;
+    const useDefaultPrompt = document.getElementById('use-default-prompt').checked;
+    const defaultPrompt = document.getElementById('default-prompt-text').value.trim();
     
-    // Send to selected terminals
-    selectedTerminals.forEach(terminalId => {
-        if (usePlanMode) {
-            // Send the plan mode instruction first with proper line endings
-            ipcRenderer.invoke('terminal:write', terminalId, 'Please enter plan mode (press Shift+Tab twice)\r');
-            
-            // Small delay to ensure the first command is processed
-            setTimeout(() => {
-                // Send the actual message with carriage return to execute
-                ipcRenderer.invoke('terminal:write', terminalId, fullMessage + '\r');
-            }, 100);
+    // Execute each parsed command
+    for (const { terminals: targetTerminals, command } of parsedCommands) {
+        // Apply default prompt if needed (only for non-slash commands)
+        let finalCommand = command;
+        if (useDefaultPrompt && defaultPrompt && !command.startsWith('/')) {
+            finalCommand = defaultPrompt + ' ' + command;
+        }
+        
+        // Determine which terminals to use
+        let terminalsToUse = [];
+        if (targetTerminals.length === 0) {
+            // No specific terminals specified
+            if (command.startsWith('/')) {
+                // Slash command without terminals - execute normally
+                executeCommand(command);
+                continue;
+            } else {
+                // Regular command without terminals - error
+                addChatMessage('System', 'Please specify terminals using @terminal syntax.');
+                continue;
+            }
+        }
+        
+        // Process terminal specifications
+        for (const terminalSpec of targetTerminals) {
+            if (terminalSpec.toLowerCase() === 'all') {
+                // @all - use all terminals
+                terminalsToUse = Array.from(terminals.keys());
+                break;
+            } else {
+                // Find specific terminal
+                const result = findTerminal(terminalSpec);
+                if (result) {
+                    terminalsToUse.push(result.id);
+                } else {
+                    addChatMessage('System', `Terminal '${terminalSpec}' not found.`);
+                }
+            }
+        }
+        
+        // Execute command on all target terminals
+        if (command.startsWith('/')) {
+            // Slash command - execute for each terminal
+            for (const terminalId of terminalsToUse) {
+                const termData = terminals.get(terminalId);
+                if (!termData) continue;
+                
+                // Parse and execute the slash command with terminal context
+                const { command: slashCmd, args } = parseCommand(command);
+                
+                // Modify args to include terminal reference if needed
+                switch (slashCmd) {
+                    case '/send':
+                    case '/clear':
+                    case '/interrupt':
+                    case '/close':
+                    case '/return':
+                        // These commands take a terminal as first arg
+                        // Replace with current terminal
+                        executeCommand(`${slashCmd} ${termData.name} ${args.slice(1).join(' ')}`.trim());
+                        break;
+                    default:
+                        // Other commands execute as-is
+                        executeCommand(command);
+                        break;
+                }
+            }
         } else {
-            // Send the message directly to the terminal
-            ipcRenderer.invoke('terminal:write', terminalId, fullMessage + '\r');
+            // Regular command - send to terminals
+            for (const terminalId of terminalsToUse) {
+                const termData = terminals.get(terminalId);
+                if (!termData) continue;
+                
+                if (usePlanMode) {
+                    // Send Shift+Tab twice to enter plan mode
+                    ipcRenderer.invoke('terminal:write', terminalId, '\x1b[Z\x1b[Z');
+                    
+                    // Small delay to ensure plan mode is activated
+                    setTimeout(() => {
+                        ipcRenderer.invoke('terminal:write', terminalId, finalCommand + '\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, finalCommand + '\r');
+                    
+                    // Auto-return after sending the message
+                    setTimeout(() => {
+                        executeReturnCommand([termData.name], true);
+                    }, 150);
+                }
+            }
         }
-    });
+    }
     
     // Clear input
     input.value = '';
@@ -536,7 +634,9 @@ function executeHelpCommand() {
         `${cmd.syntax} - ${cmd.description}`
     ).join('\n');
     
-    addChatMessage('System', 'Available commands:\n' + helpText);
+    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) {
@@ -564,9 +664,9 @@ function executeCloseCommand(args) {
     addChatMessage('System', `✅ Closed terminal ${result.terminal.name}`);
 }
 
-function executeReturnCommand(args) {
+function executeReturnCommand(args, silent = false) {
     if (args.length === 0) {
-        addChatMessage('System', 'Usage: /return <terminal>');
+        if (!silent) addChatMessage('System', 'Usage: /return <terminal>');
         return;
     }
     
@@ -574,14 +674,18 @@ function executeReturnCommand(args) {
     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}`);
+        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');
-    addChatMessage('System', `✅ Submitted input in ${result.terminal.name}`);
+    if (!silent) {
+        addChatMessage('System', `✅ Submitted input in ${result.terminal.name}`);
+    }
 }
 
 function executeClearCommand(args) {
@@ -604,16 +708,214 @@ function executeClearCommand(args) {
     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() {
+function showCommandDropdown(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 command name
+    let slashPos = -1;
+    let searchTerm = '';
+    
+    // Search backwards from cursor to find the / symbol
+    for (let i = pos - 1; i >= 0; i--) {
+        if (inputValue[i] === '/') {
+            slashPos = 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 @ before finding /
+            break;
+        }
+    }
     
-    // Filter commands based on current input
-    const searchTerm = inputValue.substring(1).toLowerCase(); // Remove the '/'
+    // If no / found or / is not at a valid position, hide dropdown
+    if (slashPos === -1) {
+        hideCommandDropdown();
+        return;
+    }
+    
+    // Filter commands based on partial input
     currentCommands = availableCommands.filter(cmd => 
         cmd.name.substring(1).toLowerCase().startsWith(searchTerm)
+    ).map(cmd => ({
+        ...cmd,
+        isSlashCommand: true,
+        slashPosition: slashPos
+    }));
+    
+    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) {
@@ -671,15 +973,53 @@ function selectCommand(index) {
     
     const command = currentCommands[index];
     const input = document.getElementById('chat-input');
+    const value = input.value;
     
-    // Set the command name and position cursor for arguments
-    input.value = command.name + ' ';
-    input.focus();
-    
-    // Position cursor at the end
-    input.setSelectionRange(input.value.length, input.value.length);
+    // Check if this is a terminal selection with position info
+    if (command.isTerminal && command.atPosition !== undefined) {
+        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 if (command.isSlashCommand && command.slashPosition !== undefined) {
+        // Slash command at specific position
+        const slashPos = command.slashPosition;
+        
+        // Find the end of the partial command name
+        let endPos = input.selectionStart;
+        
+        // Replace the partial command with the selected one
+        const beforeSlash = value.substring(0, slashPos);
+        const afterCursor = value.substring(endPos);
+        
+        // Insert the selected command name
+        input.value = beforeSlash + command.name + ' ' + afterCursor;
+        
+        // Position cursor after the inserted command name and space
+        const newCursorPos = slashPos + command.name.length + 1; // +1 for space
+        input.setSelectionRange(newCursorPos, newCursorPos);
+    } else {
+        // Original behavior (shouldn't reach here with new system)
+        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) {
@@ -705,16 +1045,96 @@ function selectCurrentCommand() {
     }
 }
 
+// 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 (anywhere in the text)
+    highlightedText = highlightedText.replace(
+        /(\/\w+)/g,
+        (match, command, offset) => {
+            // Check if this is a valid position for a command (start of string or after space/@ )
+            const isValidPosition = offset === 0 || 
+                                  highlightedText[offset - 1] === ' ' || 
+                                  highlightedText[offset - 1] === '@';
+            
+            if (isValidPosition) {
+                const validCommand = availableCommands.find(cmd => cmd.name === command);
+                return validCommand ? `<span class="highlight-command">${command}</span>` : match;
+            }
+            return 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);
 }
 
 
@@ -753,6 +1173,9 @@ document.addEventListener('DOMContentLoaded', () => {
             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();
@@ -775,21 +1198,51 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
     
-    // Chat input - Show dropdown on '/' and filter as user types
+    // 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;
         
-        // Check if cursor is at end and input starts with '/'
-        if (cursorPos === value.length && value.startsWith('/') && value.length > 1) {
-            showCommandDropdown();
-        } else if (value.startsWith('/') && value.length === 1) {
-            // Show all commands when just '/' is typed
-            showCommandDropdown();
-        } else {
-            hideCommandDropdown();
+        // Update overlay highlighting
+        updateOverlayHighlighting();
+        
+        // Check for both @ and / at cursor position
+        if (cursorPos > 0) {
+            // Look for @ at or before cursor position
+            let foundAt = false;
+            let foundSlash = false;
+            
+            for (let i = cursorPos - 1; i >= 0; i--) {
+                if (value[i] === '@') {
+                    foundAt = true;
+                    break;
+                } else if (value[i] === '/') {
+                    foundSlash = true;
+                    break;
+                } else if (value[i] === ' ' || value[i] === ',') {
+                    // If we hit a space or comma, check if it's immediately followed by @ or /
+                    if (i === cursorPos - 1) {
+                        if (value[cursorPos - 1] === '@') {
+                            foundAt = true;
+                        } else if (value[cursorPos - 1] === '/') {
+                            foundSlash = true;
+                        }
+                    }
+                    break;
+                }
+            }
+            
+            if (foundAt) {
+                showTerminalDropdown(cursorPos);
+                return;
+            } else if (foundSlash) {
+                showCommandDropdown(cursorPos);
+                return;
+            }
         }
+        
+        hideCommandDropdown();
     });
     
     // Hide dropdown when clicking outside
@@ -802,6 +1255,14 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
     
+    // 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();
     

package/style.css

@@ -176,59 +176,6 @@ body {
     position: relative;
 }
 
-/* Terminal Selection */
-#terminal-selector > label {
-    display: block;
-    font-size: 13px;
-    color: #cccccc;
-    margin-bottom: 8px;
-    font-weight: 500;
-}
-
-#terminal-checkboxes {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px 15px;
-    max-height: 80px;
-    overflow-y: auto;
-    padding-right: 5px;
-}
-
-.terminal-checkbox-label {
-    font-size: 13px !important;
-    padding: 3px 8px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    white-space: nowrap;
-    background-color: rgba(255, 255, 255, 0.05);
-    border-radius: 4px;
-    transition: background-color 0.2s;
-}
-
-.terminal-checkbox-label:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.terminal-checkbox-label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    color: #cccccc;
-    cursor: pointer;
-}
-
-.terminal-checkbox-label:hover {
-    color: #ffffff;
-}
-
-.terminal-selector-checkbox {
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-}
 
 /* Default Prompt Section */
 #default-prompt-section {
@@ -312,15 +259,39 @@ body {
 
 /* Removed - Mode selector is now integrated into input area */
 
+/* Input Overlay for Syntax Highlighting */
+.input-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    min-height: 80px;
+    max-height: 200px;
+    padding: 10px 12px;
+    border-radius: 4px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: transparent;
+    background: transparent;
+    pointer-events: none;
+    z-index: 1;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow: hidden;
+}
+
 /* Chat Input - Full Width */
 #chat-input {
+    position: relative;
+    z-index: 2;
     width: 100%;
     min-height: 80px;
     max-height: 200px;
     background-color: #3c3c3c;
     border: 1px solid #555;
     color: white;
-    padding: 10px 12px 35px 12px;
+    padding: 10px 12px;
     border-radius: 4px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-size: 14px;
@@ -334,26 +305,38 @@ body {
     box-shadow: 0 0 0 2px rgba(14, 99, 156, 0.2);
 }
 
+/* Syntax highlighting styles */
+.highlight-terminal {
+    color: #4CAF50;
+}
+
+.highlight-command {
+    color: #FF9800;
+}
+
+/* Plan Mode Row */
+.plan-mode-row {
+    margin-bottom: 8px;
+}
+
 /* Plan Mode Option */
 .plan-mode-option {
-    position: absolute;
-    bottom: 10px;
-    left: 12px;
     display: flex;
     align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: #999;
+    gap: 8px;
+    font-size: 14px;
+    color: #cccccc;
     cursor: pointer;
+    padding: 4px 0;
 }
 
 .plan-mode-option:hover {
-    color: #cccccc;
+    color: #ffffff;
 }
 
 .plan-mode-option input[type="checkbox"] {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
     cursor: pointer;
 }