@adiontaegerron/claude-multi-terminal 1.2.0 → 2.0.0

package/README.md

@@ -7,20 +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
-- **Multi-@ Terminal Commands**: Send commands to multiple terminals with various syntaxes:
+- **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
-- **Smart Autocomplete**: Get terminal suggestions while typing @ anywhere in your message
-- **Slash Commands**: Built-in commands for terminal management
+- **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
@@ -52,10 +65,12 @@ 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

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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adiontaegerron/claude-multi-terminal",
-  "version": "1.2.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,33 +359,11 @@ function sendMessage() {
     // Hide command dropdown
     hideCommandDropdown();
     
-    // Check if this is a slash command
-    if (message.startsWith('/')) {
-        executeCommand(message);
-        input.value = '';
-        return;
-    }
+    // Parse the complex command
+    const parsedCommands = parseComplexCommand(message);
     
-    // 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;
-    const defaultPrompt = document.getElementById('default-prompt-text').value.trim();
-    
-    if (useDefaultPrompt && defaultPrompt) {
-        fullMessage = defaultPrompt + ' ' + 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;
     }
     
@@ -365,37 +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 => {
-        const termData = terminals.get(terminalId);
-        if (!termData) return;
+    // 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;
+        }
         
-        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');
+        // 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);
                 
-                // Auto-return after sending the message
-                setTimeout(() => {
-                    executeReturnCommand([termData.name], true);
-                }, 150);
-            }, 300);
+                // 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');
-            
-            // Auto-return after sending the message
-            setTimeout(() => {
-                executeReturnCommand([termData.name], true);
-            }, 150);
+            // 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 = '';
@@ -740,16 +817,43 @@ function executeAtCommand(message) {
 }
 
 // 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();
@@ -869,10 +973,10 @@ function selectCommand(index) {
     
     const command = currentCommands[index];
     const input = document.getElementById('chat-input');
+    const value = input.value;
     
     // 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
@@ -888,8 +992,25 @@ function selectCommand(index) {
         // 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 for slash commands
+        // Original behavior (shouldn't reach here with new system)
         input.value = command.name + ' ';
         input.setSelectionRange(input.value.length, input.value.length);
     }
@@ -965,12 +1086,20 @@ function updateOverlayHighlighting() {
         }
     );
     
-    // Highlight slash commands
+    // Highlight slash commands (anywhere in the text)
     highlightedText = highlightedText.replace(
-        /^(\/\w+)/gm,
-        (match, command) => {
-            const validCommand = availableCommands.find(cmd => cmd.name === command);
-            return validCommand ? `<span class="highlight-command">${command}</span>` : match;
+        /(\/\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;
         }
     );
     
@@ -1078,24 +1207,27 @@ document.addEventListener('DOMContentLoaded', () => {
         // 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)
+        // 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 @
-                    if (i === cursorPos - 1 && value[cursorPos - 1] === '@') {
-                        foundAt = true;
+                    // 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;
                 }
@@ -1104,6 +1236,9 @@ document.addEventListener('DOMContentLoaded', () => {
             if (foundAt) {
                 showTerminalDropdown(cursorPos);
                 return;
+            } else if (foundSlash) {
+                showCommandDropdown(cursorPos);
+                return;
             }
         }
         

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 {