@adiontaegerron/claude-multi-terminal 1.0.0

package/.claude/settings.local.json

@@ -0,0 +1,22 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(npm init:*)",
+      "Bash(npm install:*)",
+      "Bash(npm start)",
+      "Bash(npx:*)",
+      "Bash(rm:*)",
+      "Bash(npm run rebuild:*)",
+      "Bash(git init:*)",
+      "Bash(git remote add:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "Bash(mkdir:*)",
+      "Bash(chmod:*)",
+      "Bash(npm:*)"
+    ],
+    "deny": []
+  }
+}

package/CLAUDE.md

@@ -0,0 +1,63 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a multi-terminal desktop application built with Electron, xterm.js, and node-pty. It allows users to manage multiple terminal sessions with individual UI controls for each terminal.
+
+## Development Commands
+
+Since this is a new project, standard Electron/Node.js commands will be used:
+
+```bash
+# Install dependencies
+npm install
+
+# Start the application in development mode
+npm start
+
+# Build the application (once configured)
+npm run build
+
+# Run tests (once configured)
+npm test
+```
+
+## Architecture
+
+The application follows a standard Electron architecture:
+
+- **Main Process**: Manages window creation, native OS interactions, and spawns terminal processes using node-pty
+- **Renderer Process**: Handles the UI, terminal rendering with xterm.js, and user interactions
+- **IPC Communication**: Main and renderer processes communicate via Electron's IPC for terminal operations
+
+Key components:
+- Terminal instances are managed by node-pty in the main process
+- Each terminal UI is rendered by xterm.js in the renderer
+- Commands are sent from text inputs to terminals via IPC
+
+## Project Requirements
+
+The application must support:
+- Multiple terminal sessions (2+ terminals)
+- Each terminal displays:
+  - xterm.js terminal area for output and keyboard input
+  - Text input box for sending commands
+  - Send button (Enter key also submits)
+- "New Terminal" button for creating sessions
+- Real-time output display
+- Local execution only (no cloud dependencies)
+
+Optional features:
+- Tabs or sidebar for terminal switching
+- Individual terminal close functionality
+
+## Technical Stack
+
+- **Electron**: Desktop application framework
+- **xterm.js**: Terminal UI rendering
+- **node-pty**: Terminal process management
+- **JavaScript/TypeScript**: Implementation language (choose based on simplicity)
+
+

package/README.md

@@ -0,0 +1,115 @@
+# Claude Multi-Terminal
+
+A multi-terminal editor for coordinating multiple Claude Code instances. Run multiple Claude sessions side-by-side with a unified chat interface to send commands to selected terminals.
+
+![Claude Multi-Terminal Screenshot](screenshot.png)
+
+## 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
+- **Default Prompt**: Set a default prompt to prepend to all messages
+- **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
+
+## Installation
+
+### From npm (when published)
+
+```bash
+npm install -g claude-multi-terminal
+```
+
+### From GitHub
+
+```bash
+git clone https://github.com/yourusername/multi-editor.git
+cd multi-editor
+npm install
+npm link
+```
+
+## Usage
+
+Navigate to your project directory and run:
+
+```bash
+claude-multi
+```
+
+This will open the multi-terminal editor with all terminals starting in your current directory.
+
+### Basic Workflow
+
+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
+5. **Use Default Prompt**: Expand the "Default Prompt" section to set a prompt that's prepended to all messages
+
+### Tips
+
+- Each terminal automatically starts Claude Code when created
+- Messages include a plan mode instruction by default
+- Double-click terminal titles to rename them for better organization
+- The application uses your current directory as the working directory for all terminals
+
+## Development
+
+### Prerequisites
+
+- Node.js (v14 or higher)
+- npm
+
+### Local Development
+
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/multi-editor.git
+cd multi-editor
+
+# Install dependencies
+npm install
+
+# Start the application
+npm start
+```
+
+### Building
+
+```bash
+# Rebuild native modules
+npm run rebuild
+```
+
+## Requirements
+
+- **Claude Code**: You must have Claude Code installed and accessible via the `claude` command
+- **Operating System**: Works on macOS, Windows, and Linux
+- **Node.js**: Requires Node.js 14 or higher
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## Issues
+
+If you find a bug or have a feature request, please open an issue on [GitHub](https://github.com/yourusername/multi-editor/issues).
+
+## Acknowledgments
+
+- Built with [Electron](https://www.electronjs.org/)
+- Terminal emulation by [xterm.js](https://xtermjs.org/)
+- PTY support from [node-pty](https://github.com/microsoft/node-pty)

package/bin/claude-multi.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+// Get the directory where the package is installed
+const appPath = path.join(__dirname, '..');
+
+// Get the current working directory where the command was run
+const cwd = process.cwd();
+
+// Pass the current directory as an argument to the Electron app
+const electron = require('electron');
+const child = spawn(electron, [appPath, '--cwd', cwd], {
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    ELECTRON_NO_ATTACH_CONSOLE: 'true'
+  }
+});
+
+child.on('close', (code) => {
+  process.exit(code);
+});
+
+// Handle ctrl+c
+process.on('SIGINT', () => {
+  child.kill('SIGINT');
+});

package/index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Multi Terminal Editor</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="node_modules/xterm/css/xterm.css">
+</head>
+<body>
+    <div id="app">
+        <div id="toolbar">
+            <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>
+                
+                <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>
+                    
+                    <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>
+                    
+                    <div class="message-input-section">
+                        <textarea id="chat-input" placeholder="Type your message..."></textarea>
+                        <button id="send-message-btn">Send</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="renderer.js"></script>
+</body>
+</html>

package/main.js

@@ -0,0 +1,116 @@
+const { app, BrowserWindow, ipcMain } = require('electron');
+const path = require('path');
+const pty = require('node-pty');
+
+// Store terminal instances
+const terminals = new Map();
+let mainWindow;
+
+// Get the current working directory from command line args or use current directory
+let workingDirectory = process.cwd();
+const cwdIndex = process.argv.indexOf('--cwd');
+if (cwdIndex !== -1 && process.argv[cwdIndex + 1]) {
+  workingDirectory = process.argv[cwdIndex + 1];
+}
+
+// Create the main application window
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+      // Enable webSecurity in production
+      webSecurity: false
+    }
+  });
+
+  mainWindow.loadFile('index.html');
+
+  // Open DevTools in development
+  mainWindow.webContents.openDevTools();
+
+  mainWindow.on('closed', () => {
+    // Clean up all terminals on window close
+    terminals.forEach(term => term.kill());
+    terminals.clear();
+    mainWindow = null;
+  });
+}
+
+// Initialize the app
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+
+// IPC handlers for terminal operations
+
+// Create a new terminal
+ipcMain.handle('terminal:create', (event, terminalId) => {
+  const shell = process.platform === 'win32' ? 'powershell.exe' : process.env.SHELL || '/bin/bash';
+  
+  const ptyProcess = pty.spawn(shell, [], {
+    name: 'xterm-color',
+    cols: 80,
+    rows: 30,
+    cwd: workingDirectory,  // Use the directory where the command was run
+    env: process.env
+  });
+
+  terminals.set(terminalId, ptyProcess);
+
+  // Forward terminal output to renderer
+  ptyProcess.onData((data) => {
+    mainWindow.webContents.send('terminal:data', terminalId, data);
+  });
+
+  // Handle terminal exit
+  ptyProcess.onExit(({ exitCode }) => {
+    mainWindow.webContents.send('terminal:exit', terminalId, exitCode);
+    terminals.delete(terminalId);
+  });
+
+  return { success: true };
+});
+
+// Write data to terminal
+ipcMain.handle('terminal:write', (event, terminalId, data) => {
+  const terminal = terminals.get(terminalId);
+  if (terminal) {
+    terminal.write(data);
+    return { success: true };
+  }
+  return { success: false, error: 'Terminal not found' };
+});
+
+// Resize terminal
+ipcMain.handle('terminal:resize', (event, terminalId, cols, rows) => {
+  const terminal = terminals.get(terminalId);
+  if (terminal) {
+    terminal.resize(cols, rows);
+    return { success: true };
+  }
+  return { success: false, error: 'Terminal not found' };
+});
+
+// Close terminal
+ipcMain.handle('terminal:close', (event, terminalId) => {
+  const terminal = terminals.get(terminalId);
+  if (terminal) {
+    terminal.kill();
+    terminals.delete(terminalId);
+    return { success: true };
+  }
+  return { success: false, error: 'Terminal not found' };
+});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@adiontaegerron/claude-multi-terminal",
+  "version": "1.0.0",
+  "description": "Multi-terminal editor for coordinating multiple Claude Code instances",
+  "main": "main.js",
+  "bin": {
+    "claude-multi": "./bin/claude-multi.js"
+  },
+  "scripts": {
+    "start": "electron .",
+    "postinstall": "electron-rebuild",
+    "rebuild": "electron-rebuild",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adiontae-tp/multi-terminal.git"
+  },
+  "keywords": [
+    "claude",
+    "terminal",
+    "multi-terminal",
+    "electron",
+    "xterm",
+    "claude-code",
+    "ai",
+    "development-tools"
+  ],
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/adiontae-tp/multi-terminal/issues"
+  },
+  "homepage": "https://github.com/adiontae-tp/multi-terminal#readme",
+  "dependencies": {
+    "electron": "^37.2.5",
+    "node-pty": "^1.0.0",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
+  },
+  "devDependencies": {
+    "@electron/rebuild": "^3.7.2"
+  }
+}

package/renderer.js

@@ -0,0 +1,344 @@
+const { ipcRenderer } = require('electron');
+const { Terminal } = require('xterm');
+const { FitAddon } = require('xterm-addon-fit');
+
+// Track all terminal instances
+const terminals = new Map();
+let terminalCounter = 0;
+
+// Create a new terminal instance
+async function createTerminal() {
+    terminalCounter++;
+    const terminalId = `terminal-${terminalCounter}`;
+    
+    // Create terminal container
+    const terminalContainer = document.createElement('div');
+    terminalContainer.className = 'terminal-container';
+    terminalContainer.id = terminalId;
+    
+    // Create terminal header with close button (no checkbox)
+    const header = document.createElement('div');
+    header.className = 'terminal-header';
+    
+    const title = document.createElement('span');
+    title.textContent = `Terminal ${terminalCounter}`;
+    title.className = 'terminal-title';
+    title.style.cursor = 'pointer';
+    
+    // Create rename input (hidden by default)
+    const renameInput = document.createElement('input');
+    renameInput.type = 'text';
+    renameInput.className = 'rename-input';
+    renameInput.style.display = 'none';
+    renameInput.value = title.textContent;
+    
+    const closeBtn = document.createElement('button');
+    closeBtn.textContent = '×';
+    closeBtn.className = 'close-btn';
+    closeBtn.onclick = () => closeTerminal(terminalId);
+    
+    header.appendChild(title);
+    header.appendChild(renameInput);
+    header.appendChild(closeBtn);
+    
+    // Create terminal element
+    const terminalElement = document.createElement('div');
+    terminalElement.className = 'terminal';
+    
+    // Assemble the container
+    terminalContainer.appendChild(header);
+    terminalContainer.appendChild(terminalElement);
+    
+    // Add to DOM
+    document.getElementById('terminals-container').appendChild(terminalContainer);
+    
+    // Initialize xterm.js
+    const xterm = new Terminal({
+        cursorBlink: true,
+        fontSize: 14,
+        fontFamily: 'Consolas, "Courier New", monospace',
+        theme: {
+            background: '#1e1e1e',
+            foreground: '#d4d4d4'
+        },
+        convertEol: true,
+        allowTransparency: false,
+        scrollback: 1000
+    });
+    
+    // Add fit addon
+    const fitAddon = new FitAddon();
+    xterm.loadAddon(fitAddon);
+    
+    // Open terminal in the DOM element
+    xterm.open(terminalElement);
+    fitAddon.fit();
+    
+    // Store terminal info
+    terminals.set(terminalId, {
+        xterm,
+        fitAddon,
+        element: terminalContainer,
+        titleElement: title,
+        name: `Terminal ${terminalCounter}`
+    });
+    
+    // Create terminal in main process
+    await ipcRenderer.invoke('terminal:create', terminalId);
+    
+    // Add checkbox to chat sidebar
+    addTerminalCheckbox(terminalId, `Terminal ${terminalCounter}`);
+    
+    // Auto-start Claude Code
+    setTimeout(() => {
+        ipcRenderer.invoke('terminal:write', terminalId, 'claude\n');
+    }, 1000);
+    
+    // Ensure terminal is ready and focused
+    setTimeout(() => {
+        xterm.focus();
+    }, 100);
+    
+    // Handle terminal data input
+    xterm.onData(data => {
+        ipcRenderer.invoke('terminal:write', terminalId, data);
+    });
+    
+    // Handle resize
+    xterm.onResize(({ cols, rows }) => {
+        ipcRenderer.invoke('terminal:resize', terminalId, cols, rows);
+    });
+    
+    // Handle rename functionality
+    const startRename = () => {
+        title.style.display = 'none';
+        renameInput.style.display = 'inline-block';
+        renameInput.focus();
+        renameInput.select();
+    };
+    
+    const finishRename = () => {
+        const newName = renameInput.value.trim();
+        if (newName && newName !== title.textContent) {
+            title.textContent = newName;
+            terminals.get(terminalId).name = newName;
+            updateTerminalCheckbox(terminalId, newName);
+        }
+        title.style.display = 'inline';
+        renameInput.style.display = 'none';
+    };
+    
+    // Double-click to rename
+    title.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+        startRename();
+    });
+    
+    // Finish rename on Enter or blur
+    renameInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            finishRename();
+        } else if (e.key === 'Escape') {
+            renameInput.value = title.textContent;
+            finishRename();
+        }
+    });
+    
+    renameInput.addEventListener('blur', finishRename);
+    
+    // Handle terminal click to focus
+    terminalElement.addEventListener('click', () => {
+        xterm.focus();
+    });
+    
+    // Also focus when clicking the container (but not header)
+    terminalContainer.addEventListener('click', (e) => {
+        // Don't focus if clicking on header elements
+        if (!e.target.closest('.terminal-header')) {
+            xterm.focus();
+        }
+    });
+    
+    // Focus on the terminal initially
+    xterm.focus();
+    
+    // Handle window resize
+    const resizeObserver = new ResizeObserver(() => {
+        fitAddon.fit();
+    });
+    resizeObserver.observe(terminalElement);
+}
+
+// Close a terminal
+async function closeTerminal(terminalId) {
+    const terminal = terminals.get(terminalId);
+    if (terminal) {
+        // Close in main process
+        await ipcRenderer.invoke('terminal:close', terminalId);
+        
+        // Clean up
+        terminal.xterm.dispose();
+        terminal.element.remove();
+        terminals.delete(terminalId);
+        
+        // Remove checkbox from chat
+        removeTerminalCheckbox(terminalId);
+    }
+}
+
+// Handle IPC messages from main process
+ipcRenderer.on('terminal:data', (event, terminalId, data) => {
+    const terminal = terminals.get(terminalId);
+    if (terminal) {
+        terminal.xterm.write(data);
+    }
+});
+
+ipcRenderer.on('terminal:exit', (event, terminalId, exitCode) => {
+    const terminal = terminals.get(terminalId);
+    if (terminal) {
+        terminal.xterm.write(`\r\n[Process exited with code ${exitCode}]\r\n`);
+    }
+});
+
+// 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();
+    }
+}
+
+function getSelectedTerminals() {
+    const checkboxes = document.querySelectorAll('.terminal-selector-checkbox:checked');
+    return Array.from(checkboxes).map(cb => cb.value);
+}
+
+function sendMessage() {
+    const input = document.getElementById('chat-input');
+    const message = input.value.trim();
+    if (!message) 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');
+        return;
+    }
+    
+    // Add message to chat display
+    addChatMessage('You', message);
+    
+    // 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');
+    });
+    
+    // Clear input
+    input.value = '';
+}
+
+function addChatMessage(sender, message) {
+    const messagesContainer = document.getElementById('chat-messages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'chat-message';
+    
+    const senderSpan = document.createElement('span');
+    senderSpan.className = 'message-sender';
+    senderSpan.textContent = sender + ':';
+    
+    const messageSpan = document.createElement('span');
+    messageSpan.className = 'message-text';
+    messageSpan.textContent = message;
+    
+    messageDiv.appendChild(senderSpan);
+    messageDiv.appendChild(messageSpan);
+    messagesContainer.appendChild(messageDiv);
+    
+    // Scroll to bottom
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+// Initialize collapsible default prompt section
+function initCollapsible() {
+    const toggle = document.querySelector('.collapse-toggle');
+    const content = document.querySelector('.collapsible-content');
+    
+    toggle.addEventListener('click', () => {
+        const isExpanded = content.style.display !== 'none';
+        content.style.display = isExpanded ? 'none' : 'block';
+        toggle.textContent = isExpanded ? '▶' : '▼';
+    });
+}
+
+// Initialize app
+document.addEventListener('DOMContentLoaded', () => {
+    // New terminal button
+    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)
+    document.getElementById('chat-input').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    
+    // Initialize collapsible
+    initCollapsible();
+    
+    // Create first terminal automatically
+    createTerminal();
+    
+    // Resize terminals on window resize
+    window.addEventListener('resize', () => {
+        terminals.forEach(terminal => {
+            if (terminal.fitAddon) {
+                terminal.fitAddon.fit();
+            }
+        });
+    });
+});

package/style.css

@@ -0,0 +1,387 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: #2b2b2b;
+    color: #ffffff;
+    height: 100vh;
+    overflow: hidden;
+}
+
+#app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+#toolbar {
+    background-color: #1e1e1e;
+    padding: 10px;
+    border-bottom: 1px solid #444;
+}
+
+#new-terminal-btn {
+    background-color: #0e639c;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+#new-terminal-btn:hover {
+    background-color: #1177bb;
+}
+
+#main-layout {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+}
+
+/* Terminals Area - Left Side */
+#terminals-area {
+    flex: 1;
+    background-color: #252526;
+    display: flex;
+    overflow: hidden;
+}
+
+#terminals-container {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: 1fr;
+    padding: 10px;
+    gap: 10px;
+    overflow-y: auto;
+}
+
+.terminal-container {
+    background-color: #1e1e1e;
+    border: 1px solid #444;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    min-height: 300px;
+    overflow: hidden;
+}
+
+.terminal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #252526;
+    border-bottom: 1px solid #444;
+    border-radius: 4px 4px 0 0;
+}
+
+.terminal-header span {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.terminal-title {
+    user-select: none;
+    padding: 2px 4px;
+    border-radius: 3px;
+    position: relative;
+}
+
+.terminal-title:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.terminal-title:hover::after {
+    content: ' ✏️';
+    font-size: 12px;
+    opacity: 0.6;
+}
+
+.rename-input {
+    background-color: #3c3c3c;
+    border: 1px solid #0e639c;
+    color: white;
+    padding: 2px 6px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 3px;
+    outline: none;
+    width: 150px;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: #cccccc;
+    font-size: 20px;
+    cursor: pointer;
+    padding: 0 8px;
+    line-height: 1;
+}
+
+.close-btn:hover {
+    color: #ff6b6b;
+}
+
+.terminal {
+    flex: 1;
+    padding: 8px;
+    overflow: hidden;
+    cursor: text;
+}
+
+/* Chat Sidebar - Right Side */
+#chat-sidebar {
+    width: 400px;
+    background-color: #1e1e1e;
+    border-left: 1px solid #444;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-header {
+    padding: 15px;
+    background-color: #252526;
+    border-bottom: 1px solid #444;
+}
+
+.chat-header h2 {
+    margin: 0;
+    font-size: 18px;
+    color: #cccccc;
+}
+
+#chat-messages {
+    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;
+    border-radius: 6px;
+}
+
+.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;
+}
+
+#chat-controls {
+    background-color: #252526;
+    border-top: 1px solid #444;
+    padding: 15px;
+}
+
+/* Terminal Selection */
+#terminal-selector {
+    margin-bottom: 15px;
+}
+
+#terminal-selector label {
+    display: block;
+    font-size: 14px;
+    color: #cccccc;
+    margin-bottom: 8px;
+}
+
+#terminal-checkboxes {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.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;
+}
+
+/* Collapsible Default Prompt */
+#default-prompt-section {
+    margin-bottom: 15px;
+}
+
+.collapsible-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+    padding: 8px;
+    background-color: #3c3c3c;
+    border-radius: 4px;
+    margin-bottom: 8px;
+}
+
+.collapsible-header:hover {
+    background-color: #444;
+}
+
+.collapse-toggle {
+    background: none;
+    border: none;
+    color: #cccccc;
+    font-size: 12px;
+    cursor: pointer;
+    padding: 0;
+}
+
+.collapsible-content {
+    padding: 0 8px;
+}
+
+#default-prompt-text {
+    width: 100%;
+    min-height: 80px;
+    background-color: #3c3c3c;
+    border: 1px solid #555;
+    color: white;
+    padding: 8px;
+    border-radius: 4px;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 13px;
+    resize: vertical;
+    margin-bottom: 8px;
+}
+
+#default-prompt-text:focus {
+    outline: none;
+    border-color: #0e639c;
+}
+
+.collapsible-content label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: #cccccc;
+}
+
+/* Message Input */
+.message-input-section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#chat-input {
+    width: 100%;
+    min-height: 80px;
+    background-color: #3c3c3c;
+    border: 1px solid #555;
+    color: white;
+    padding: 8px;
+    border-radius: 4px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    resize: vertical;
+}
+
+#chat-input:focus {
+    outline: none;
+    border-color: #0e639c;
+}
+
+#send-message-btn {
+    background-color: #0e639c;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    align-self: flex-end;
+}
+
+#send-message-btn:hover {
+    background-color: #1177bb;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    #chat-sidebar {
+        width: 350px;
+    }
+}
+
+@media (max-width: 1000px) {
+    #terminals-container {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    #main-layout {
+        flex-direction: column;
+    }
+    
+    #terminals-area {
+        flex: 1;
+    }
+    
+    #chat-sidebar {
+        width: 100%;
+        height: 300px;
+        border-left: none;
+        border-top: 1px solid #444;
+    }
+    
+    #terminals-container {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1e1e1e;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}

package/test-app.js

@@ -0,0 +1,16 @@
+// Simple test script to verify the app works
+const { spawn } = require('child_process');
+
+console.log('Starting Electron app test...');
+
+const electron = spawn('npm', ['start'], {
+    shell: true,
+    stdio: 'inherit'
+});
+
+// Give it 5 seconds to start and then kill it
+setTimeout(() => {
+    console.log('\nTest completed - app started successfully!');
+    electron.kill();
+    process.exit(0);
+}, 5000);