@adiontaegerron/claude-multi-terminal 1.1.0 → 1.2.0

package/README.md

@@ -9,7 +9,14 @@ A multi-terminal editor for coordinating multiple Claude Code instances. Run mul
 - **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
+- **Multi-@ Terminal Commands**: Send commands to multiple terminals with various syntaxes:
+  - `@all command` - Send to all terminals
+  - `@term1,term2,term3 command` - Comma-separated terminals
+  - `@term1 @term2 command` - Space-separated terminals
+- **Smart Autocomplete**: Get terminal suggestions while typing @ anywhere in your message
+- **Slash Commands**: Built-in commands for terminal management
 - **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
@@ -49,12 +56,36 @@ This will open the multi-terminal editor with all terminals starting in your cur
 4. **Send Commands**: Type in the chat input and click "Send" or press Enter
 5. **Use Default Prompt**: Expand the "Default Prompt" section to set a prompt that's prepended to all messages
 
+### 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

@@ -36,18 +36,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": "1.2.0",
   "description": "Multi-terminal editor for coordinating multiple Claude Code instances",
   "main": "main.js",
   "bin": {

package/renderer.js

@@ -337,6 +337,13 @@ function sendMessage() {
         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;
@@ -361,18 +368,32 @@ function sendMessage() {
     
     // Send to selected terminals
     selectedTerminals.forEach(terminalId => {
+        const termData = terminals.get(terminalId);
+        if (!termData) return;
+        
         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');
+            // 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 the first command is processed
+            // 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');
-            }, 100);
+                
+                // 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');
+            
+            // Auto-return after sending the message
+            setTimeout(() => {
+                executeReturnCommand([termData.name], true);
+            }, 150);
         }
     });
     
@@ -536,7 +557,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 +587,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 +597,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,6 +631,114 @@ 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() {
     const dropdown = document.getElementById('command-dropdown');
@@ -626,6 +761,69 @@ function showCommandDropdown() {
     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';
@@ -672,14 +870,35 @@ function selectCommand(index) {
     const command = currentCommands[index];
     const input = document.getElementById('chat-input');
     
-    // 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 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) {
@@ -705,16 +924,88 @@ 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
+    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);
 }
 
 
@@ -753,6 +1044,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 +1069,45 @@ 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
+        // 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();
-        } else {
-            hideCommandDropdown();
+            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
@@ -802,6 +1120,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

@@ -312,15 +312,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 +358,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;
 }