@adiontaegerron/claude-multi-terminal 1.0.2 → 1.1.0

package/.claude/settings.local.json

@@ -15,7 +15,9 @@
       "Bash(git push:*)",
       "Bash(mkdir:*)",
       "Bash(chmod:*)",
-      "Bash(npm:*)"
+      "Bash(npm:*)",
+      "Bash(claude --print \"Please enter plan mode (press Shift+Tab twice)\")",
+      "WebFetch(domain:docs.anthropic.com)"
     ],
     "deny": []
   }

package/index.html

@@ -12,49 +12,50 @@
             <button id="new-terminal-btn">New Terminal</button>
         </div>
         
-        <div id="main-layout">
-            <div id="terminals-area">
-                <div id="terminals-container">
-                    <!-- Terminal instances will be added here dynamically -->
-                </div>
-            </div>
-            
-            <div id="chat-sidebar">
-                <div class="chat-header">
-                    <h2>Chat</h2>
-                </div>
-                
-                <div id="chat-messages">
-                    <!-- Chat messages will appear here -->
+        <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="chat-controls">
-                    <div id="terminal-selector">
-                        <label>Send to:</label>
-                        <div id="terminal-checkboxes">
-                            <!-- Terminal checkboxes will be added here dynamically -->
-                        </div>
+                <div id="default-prompt-section" class="control-section collapsible">
+                    <div class="collapsible-header">
+                        <button class="collapse-toggle">▶</button>
+                        <span>Default Prompt</span>
                     </div>
-                    
-                    <div id="default-prompt-section" class="collapsible">
-                        <div class="collapsible-header">
-                            <button class="collapse-toggle">▶</button>
-                            <span>Default Prompt</span>
-                        </div>
-                        <div class="collapsible-content" style="display: none;">
-                            <textarea id="default-prompt-text" placeholder="Enter default prompt to prepend to all messages..."></textarea>
-                            <label>
-                                <input type="checkbox" id="use-default-prompt" />
-                                <span>Always prepend to messages</span>
-                            </label>
-                        </div>
+                    <div class="collapsible-content" style="display: none;">
+                        <textarea id="default-prompt-text" placeholder="Enter default prompt to prepend to all messages..."></textarea>
+                        <label>
+                            <input type="checkbox" id="use-default-prompt" />
+                            <span>Always prepend to messages</span>
+                        </label>
                     </div>
-                    
-                    <div class="message-input-section">
-                        <textarea id="chat-input" placeholder="Type your message..."></textarea>
-                        <button id="send-message-btn">Send</button>
+                </div>
+            </div>
+            
+            <div class="input-row">
+                <div class="input-wrapper">
+                    <textarea id="chat-input" placeholder="Type your message or / for commands..."></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>
+        </div>
+        
+        <div id="terminals-area">
+            <div id="terminals-container">
+                <!-- Terminal instances will be added here dynamically -->
             </div>
         </div>
     </div>

package/main.js

@@ -33,7 +33,7 @@ function createWindow() {
 
   mainWindow.on('closed', () => {
     // Clean up all terminals on window close
-    terminals.forEach(term => term.kill());
+    terminals.forEach(termData => termData.pty.kill());
     terminals.clear();
     mainWindow = null;
   });
@@ -68,7 +68,10 @@ ipcMain.handle('terminal:create', (event, terminalId) => {
     env: process.env
   });
 
-  terminals.set(terminalId, ptyProcess);
+  // Store terminal
+  terminals.set(terminalId, {
+    pty: ptyProcess
+  });
 
   // Forward terminal output to renderer
   ptyProcess.onData((data) => {
@@ -86,9 +89,9 @@ ipcMain.handle('terminal:create', (event, terminalId) => {
 
 // Write data to terminal
 ipcMain.handle('terminal:write', (event, terminalId, data) => {
-  const terminal = terminals.get(terminalId);
-  if (terminal) {
-    terminal.write(data);
+  const terminalData = terminals.get(terminalId);
+  if (terminalData) {
+    terminalData.pty.write(data);
     return { success: true };
   }
   return { success: false, error: 'Terminal not found' };
@@ -96,9 +99,9 @@ ipcMain.handle('terminal:write', (event, terminalId, data) => {
 
 // Resize terminal
 ipcMain.handle('terminal:resize', (event, terminalId, cols, rows) => {
-  const terminal = terminals.get(terminalId);
-  if (terminal) {
-    terminal.resize(cols, rows);
+  const terminalData = terminals.get(terminalId);
+  if (terminalData) {
+    terminalData.pty.resize(cols, rows);
     return { success: true };
   }
   return { success: false, error: 'Terminal not found' };
@@ -106,11 +109,12 @@ ipcMain.handle('terminal:resize', (event, terminalId, cols, rows) => {
 
 // Close terminal
 ipcMain.handle('terminal:close', (event, terminalId) => {
-  const terminal = terminals.get(terminalId);
-  if (terminal) {
-    terminal.kill();
+  const terminalData = terminals.get(terminalId);
+  if (terminalData) {
+    terminalData.pty.kill();
     terminals.delete(terminalId);
     return { success: true };
   }
   return { success: false, error: 'Terminal not found' };
-});
+});
+

package/package.json

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

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,18 +149,18 @@ 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(() => {
-        ipcRenderer.invoke('terminal:write', terminalId, 'claude\n');
+        ipcRenderer.invoke('terminal:write', terminalId, 'claude\r');
     }, 1000);
     
     // Ensure terminal is ready and focused
@@ -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,25 @@ 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 default prompt should be prepended
     let fullMessage = message;
     const useDefaultPrompt = document.getElementById('use-default-prompt').checked;
@@ -267,11 +356,24 @@ 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 both the plan mode instruction and message
-        const messageToSend = `Please enter plan mode (press Shift+Tab twice)\n\n${fullMessage}`;
-        ipcRenderer.invoke('terminal:write', terminalId, messageToSend + '\r\n');
+        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);
+        } else {
+            // Send the message directly to the terminal
+            ipcRenderer.invoke('terminal:write', terminalId, fullMessage + '\r');
+        }
     });
     
     // Clear input
@@ -280,6 +382,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';
     
@@ -299,6 +403,308 @@ 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');
+    
+    addChatMessage('System', 'Available commands:\n' + helpText);
+}
+
+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) {
+    if (args.length === 0) {
+        addChatMessage('System', 'Usage: /return <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 carriage return to submit current input
+    ipcRenderer.invoke('terminal:write', result.id, '\r');
+    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}`);
+}
+
+// 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 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');
+    
+    // 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);
+    
+    hideCommandDropdown();
+}
+
+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);
+    }
+}
+
 // Initialize collapsible default prompt section
 function initCollapsible() {
     const toggle = document.querySelector('.collapse-toggle');
@@ -311,19 +717,88 @@ function initCollapsible() {
     });
 }
 
+
 // 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 (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 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();
+        }
+    });
+    
+    // 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();
         }
     });
     

package/style.css

@@ -32,19 +32,24 @@ body {
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
+    margin-right: 10px;
 }
 
 #new-terminal-btn:hover {
     background-color: #1177bb;
 }
 
-#main-layout {
-    flex: 1;
+/* Extended Toolbar */
+#toolbar-extended {
+    background-color: #1e1e1e;
+    padding: 12px 15px;
+    border-bottom: 1px solid #444;
     display: flex;
-    overflow: hidden;
+    flex-direction: column;
+    gap: 12px;
 }
 
-/* Terminals Area - Left Side */
+/* Terminals Area - Full Width */
 #terminals-area {
     flex: 1;
     background-color: #252526;
@@ -137,80 +142,73 @@ body {
     cursor: text;
 }
 
-/* Chat Sidebar - Right Side */
-#chat-sidebar {
-    width: 400px;
-    background-color: #1e1e1e;
-    border-left: 1px solid #444;
+/* Control Rows */
+.controls-row {
     display: flex;
-    flex-direction: column;
+    gap: 20px;
+    align-items: stretch;
+    margin-bottom: 10px;
 }
 
-.chat-header {
-    padding: 15px;
-    background-color: #252526;
-    border-bottom: 1px solid #444;
-}
-
-.chat-header h2 {
-    margin: 0;
-    font-size: 18px;
-    color: #cccccc;
-}
-
-#chat-messages {
+/* Control Sections - 50/50 Split */
+.control-section {
     flex: 1;
-    padding: 15px;
-    overflow-y: auto;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-}
-
-.chat-message {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    background-color: #252526;
-    padding: 10px;
+    gap: 8px;
+    background-color: transparent;
+    padding: 12px;
     border-radius: 6px;
+    border: 1px solid #3e3e42;
 }
 
-.message-sender {
-    font-weight: bold;
-    color: #4da6ff;
-    font-size: 14px;
-}
-
-.message-text {
-    color: #cccccc;
-    font-size: 14px;
-    line-height: 1.5;
-    white-space: pre-wrap;
+/* Input Row */
+.input-row {
+    display: flex;
+    gap: 12px;
+    align-items: flex-end;
+    width: 100%;
 }
 
-#chat-controls {
-    background-color: #252526;
-    border-top: 1px solid #444;
-    padding: 15px;
+/* Input Wrapper */
+.input-wrapper {
+    flex: 1;
+    position: relative;
 }
 
 /* Terminal Selection */
-#terminal-selector {
-    margin-bottom: 15px;
-}
-
-#terminal-selector label {
+#terminal-selector > label {
     display: block;
-    font-size: 14px;
+    font-size: 13px;
     color: #cccccc;
     margin-bottom: 8px;
+    font-weight: 500;
 }
 
 #terminal-checkboxes {
     display: flex;
-    flex-direction: column;
-    gap: 8px;
+    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 {
@@ -232,25 +230,42 @@ body {
     cursor: pointer;
 }
 
-/* Collapsible Default Prompt */
+/* Default Prompt Section */
 #default-prompt-section {
-    margin-bottom: 15px;
+    position: relative;
 }
 
 .collapsible-header {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     cursor: pointer;
     user-select: none;
-    padding: 8px;
-    background-color: #3c3c3c;
-    border-radius: 4px;
+    padding: 0;
+    background-color: transparent;
+    border-radius: 3px;
     margin-bottom: 8px;
+    font-size: 13px;
+    color: #cccccc;
+    font-weight: 500;
 }
 
 .collapsible-header:hover {
-    background-color: #444;
+    color: #ffffff;
+}
+
+.collapse-toggle {
+    background: none;
+    border: none;
+    color: #cccccc;
+    font-size: 10px;
+    cursor: pointer;
+    padding: 0;
+    transition: transform 0.2s;
+}
+
+.collapsible-header:hover .collapse-toggle {
+    color: #ffffff;
 }
 
 .collapse-toggle {
@@ -268,14 +283,15 @@ body {
 
 #default-prompt-text {
     width: 100%;
-    min-height: 80px;
+    min-height: 60px;
+    max-height: 120px;
     background-color: #3c3c3c;
     border: 1px solid #555;
     color: white;
     padding: 8px;
     border-radius: 4px;
     font-family: 'Consolas', 'Courier New', monospace;
-    font-size: 13px;
+    font-size: 12px;
     resize: vertical;
     margin-bottom: 8px;
 }
@@ -289,43 +305,70 @@ body {
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 13px;
+    font-size: 12px;
     color: #cccccc;
+    padding: 3px 0;
 }
 
-/* Message Input */
-.message-input-section {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
+/* Removed - Mode selector is now integrated into input area */
 
+/* Chat Input - Full Width */
 #chat-input {
     width: 100%;
     min-height: 80px;
+    max-height: 200px;
     background-color: #3c3c3c;
     border: 1px solid #555;
     color: white;
-    padding: 8px;
+    padding: 10px 12px 35px 12px;
     border-radius: 4px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-size: 14px;
     resize: vertical;
+    line-height: 1.5;
 }
 
 #chat-input:focus {
     outline: none;
     border-color: #0e639c;
+    box-shadow: 0 0 0 2px rgba(14, 99, 156, 0.2);
+}
+
+/* Plan Mode Option */
+.plan-mode-option {
+    position: absolute;
+    bottom: 10px;
+    left: 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+}
+
+.plan-mode-option:hover {
+    color: #cccccc;
+}
+
+.plan-mode-option input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
 }
 
 #send-message-btn {
     background-color: #0e639c;
     color: white;
     border: none;
-    padding: 10px 20px;
+    padding: 12px 24px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
+    font-weight: 500;
+    height: fit-content;
+    white-space: nowrap;
+    transition: background-color 0.2s ease;
     align-self: flex-end;
 }
 
@@ -334,36 +377,46 @@ body {
 }
 
 /* Responsive adjustments */
-@media (max-width: 1200px) {
-    #chat-sidebar {
-        width: 350px;
-    }
-}
-
 @media (max-width: 1000px) {
     #terminals-container {
         grid-template-columns: 1fr;
     }
+    
+    .controls-row {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .controls-row > div {
+        width: 100%;
+    }
 }
 
 @media (max-width: 768px) {
-    #main-layout {
-        flex-direction: column;
+    #terminals-container {
+        grid-template-columns: 1fr;
     }
     
-    #terminals-area {
-        flex: 1;
+    #toolbar-extended {
+        padding: 10px;
     }
     
-    #chat-sidebar {
+    #default-prompt-text {
         width: 100%;
-        height: 300px;
-        border-left: none;
-        border-top: 1px solid #444;
     }
     
-    #terminals-container {
-        grid-template-columns: 1fr;
+    #chat-input {
+        min-height: 60px;
+    }
+    
+    .input-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    #send-message-btn {
+        align-self: stretch;
+        padding: 10px;
     }
 }
 
@@ -384,4 +437,61 @@ body {
 
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
+}
+
+/* Command Dropdown */
+.command-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: #2d2d30;
+    border: 1px solid #555;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 4px;
+}
+
+.command-list {
+    padding: 4px 0;
+}
+
+.command-option {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #3e3e42;
+    transition: background-color 0.15s ease;
+}
+
+.command-option:last-child {
+    border-bottom: none;
+}
+
+.command-option:hover,
+.command-option.selected {
+    background-color: #094771;
+}
+
+.command-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #ffffff;
+    margin-bottom: 2px;
+}
+
+.command-description {
+    font-size: 12px;
+    color: #cccccc;
+    font-style: italic;
+}
+
+.command-syntax {
+    font-size: 11px;
+    color: #999;
+    font-family: 'Consolas', 'Courier New', monospace;
 }