startall 0.0.3 → 0.0.8

package/index.js

@@ -1,17 +1,20 @@
 #!/usr/bin/env bun
-
+
 import { createCliRenderer, TextRenderable, BoxRenderable, ScrollBoxRenderable, t, fg } from '@opentui/core';
 import { spawn } from 'child_process';
 import { readFileSync, writeFileSync, existsSync } from 'fs';
 import { join } from 'path';
 import kill from 'tree-kill';
 import stripAnsi from 'strip-ansi';
-
+
 // Configuration
 const CONFIG_FILE = process.argv[2] || 'startall.json';
 const COUNTDOWN_SECONDS = 10;
 const APP_VERSION = 'v0.0.4';
 
+// Detect if running inside VS Code's integrated terminal
+const IS_VSCODE = process.env.TERM_PROGRAM === 'vscode';
+
 // Pane ID generator
 let paneIdCounter = 0;
 function generatePaneId() {
@@ -23,9 +26,11 @@ function createPane(processes = []) {
   return {
     type: 'pane',
     id: generatePaneId(),
+    name: '', // Custom name for the pane
     processes: processes, // Array of process names shown in this pane (empty = all)
     hidden: [], // Array of process names to hide from this pane
     filter: '', // Text filter for this pane
+    colorFilter: null, // Color filter: 'red', 'yellow', 'green', 'blue', 'cyan', 'magenta', or null
     isPaused: false,
     scrollOffset: 0,
   };
@@ -67,6 +72,34 @@ function getAllPaneIds(node, ids = []) {
   return ids;
 }
 
+// Get ANSI color codes for a color name (includes normal and bright variants)
+function getAnsiColorCodes(colorName) {
+  const colorMap = {
+    red: [31, 91],      // normal red, bright red
+    yellow: [33, 93],   // normal yellow, bright yellow (warnings)
+    green: [32, 92],    // normal green, bright green
+    blue: [34, 94],     // normal blue, bright blue
+    cyan: [36, 96],     // normal cyan, bright cyan
+    magenta: [35, 95],  // normal magenta, bright magenta
+  };
+  return colorMap[colorName] || [];
+}
+
+// Check if a line contains a specific ANSI color
+function lineHasColor(text, colorName) {
+  const codes = getAnsiColorCodes(colorName);
+  // Match ANSI escape sequences like \x1b[31m, \x1b[91m, \x1b[1;31m, etc.
+  for (const code of codes) {
+    // Check for direct color code: \x1b[31m
+    if (text.includes(`\x1b[${code}m`)) return true;
+    // Check for color with modifiers: \x1b[1;31m, \x1b[0;31m, etc.
+    if (text.includes(`;${code}m`)) return true;
+    // Check for color at start of sequence: \x1b[31;1m
+    if (text.includes(`\x1b[${code};`)) return true;
+  }
+  return false;
+}
+
 // Find parent of a node
 function findParent(root, targetId, parent = null) {
   if (!root) return null;
@@ -170,8 +203,11 @@ function serializePaneTree(node) {
   if (node.type === 'pane') {
     return {
       type: 'pane',
+      name: node.name || '',
       processes: node.processes || [],
       hidden: node.hidden || [],
+      filter: node.filter || '',
+      colorFilter: node.colorFilter || null,
     };
   }
   
@@ -189,7 +225,10 @@ function deserializePaneTree(data) {
   
   if (data.type === 'pane') {
     const pane = createPane(data.processes || []);
+    pane.name = data.name || '';
     pane.hidden = data.hidden || [];
+    pane.filter = data.filter || '';
+    pane.colorFilter = data.colorFilter || null;
     return pane;
   }
   
@@ -232,26 +271,26 @@ function isIncluded(name, includePatterns) {
 function isIgnored(name, ignorePatterns) {
   return ignorePatterns.some(pattern => matchesPattern(name, pattern));
 }
-
-// Parse npm scripts from package.json
-function parseNpmScripts(packageJsonPath) {
-  try {
-    const pkg = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
-    const scripts = pkg.scripts || {};
-    
-    return Object.entries(scripts)
-      .filter(([name]) => !name.startsWith('pre') && !name.startsWith('post') && name !== 'start')
-      .map(([name, command]) => ({
-        name,
-        command: `npm run ${name}`,
-        displayName: name,
-      }));
-  } catch (error) {
-    console.error('Error reading package.json:', error.message);
-    process.exit(1);
-  }
-}
-
+
+// Parse npm scripts from package.json
+function parseNpmScripts(packageJsonPath) {
+  try {
+    const pkg = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+    const scripts = pkg.scripts || {};
+    
+    return Object.entries(scripts)
+      .filter(([name]) => !name.startsWith('pre') && !name.startsWith('post') && name !== 'start')
+      .map(([name, command]) => ({
+        name,
+        command: `npm run ${name}`,
+        displayName: name,
+      }));
+  } catch (error) {
+    console.error('Error reading package.json:', error.message);
+    process.exit(1);
+  }
+}
+
 // Load config
 function loadConfig() {
   if (existsSync(CONFIG_FILE)) {
@@ -272,7 +311,7 @@ function saveConfig(config) {
     console.error('Error saving config:', error.message);
   }
 }
-
+
 // Process Manager
 class ProcessManager {
   constructor(renderer, scripts) {
@@ -295,6 +334,8 @@ class ProcessManager {
     this.isPaused = false;  // Whether output scrolling is paused
     this.wasPaused = false;  // Track previous pause state to detect changes
     this.isFilterMode = false;  // Whether in filter input mode
+    this.isNamingMode = false;  // Whether in pane naming input mode
+    this.namingModeText = '';  // Text being typed for pane name
     
     // Settings menu state
     this.settingsSection = 'ignore';  // 'ignore' | 'include' | 'scripts'
@@ -305,7 +346,7 @@ class ProcessManager {
     this.previousPhase = 'selection';  // Track where we came from
     this.outputBox = null;  // Reference to the output container
     this.destroyed = false;  // Flag to prevent operations after cleanup
-    this.lastRenderedLineCount = 0;  // Track how many lines we've rendered
+    this.lastRenderedLineCount = 0;  // Track how many lines we've rendered
     this.headerRenderable = null;  // Reference to header text in running UI
     this.processListRenderable = null;  // Reference to process list text in running UI
     this.renderScheduled = false;  // Throttle renders for CPU efficiency
@@ -318,44 +359,44 @@ class ProcessManager {
     this.splitMenuIndex = 0;  // Selected item in split menu
     
     // Assign colors to each script
-    this.processColors = new Map();
-    const colors = ['#7aa2f7', '#bb9af7', '#9ece6a', '#f7768e', '#e0af68', '#73daca'];
-    scripts.forEach((script, index) => {
-      this.processColors.set(script.name, colors[index % colors.length]);
-    });
-    
-    // UI references
-    this.headerText = null;
-    this.scriptLines = [];
-    this.scriptLinePositions = []; // Track Y positions of script lines for mouse clicks
-    this.selectionContainer = null;
-    this.runningContainer = null;
-    
-    this.setupKeyboardHandlers();
-    this.setupMouseHandlers();
-    this.buildSelectionUI();
-    this.startCountdown();
-  }
-
-  setupKeyboardHandlers() {
-    this.renderer.keyInput.on('keypress', (key) => {
-      // Handle Ctrl+C (if exitOnCtrlC is false)
-      if (key.ctrl && key.name === 'c') {
-        this.cleanup();
-        this.renderer.destroy();
-        return;
-      }
-      
-      this.handleInput(key.name, key);
-      this.render();
-    });
-  }
-  
-  setupMouseHandlers() {
-    // Mouse events are handled via BoxRenderable properties, not a global handler
-    // We'll add onMouseDown to individual script lines in buildSelectionUI
-  }
-
+    this.processColors = new Map();
+    const colors = ['#7aa2f7', '#bb9af7', '#9ece6a', '#f7768e', '#e0af68', '#73daca'];
+    scripts.forEach((script, index) => {
+      this.processColors.set(script.name, colors[index % colors.length]);
+    });
+    
+    // UI references
+    this.headerText = null;
+    this.scriptLines = [];
+    this.scriptLinePositions = []; // Track Y positions of script lines for mouse clicks
+    this.selectionContainer = null;
+    this.runningContainer = null;
+    
+    this.setupKeyboardHandlers();
+    this.setupMouseHandlers();
+    this.buildSelectionUI();
+    this.startCountdown();
+  }
+
+  setupKeyboardHandlers() {
+    this.renderer.keyInput.on('keypress', (key) => {
+      // Handle Ctrl+C (if exitOnCtrlC is false)
+      if (key.ctrl && key.name === 'c') {
+        this.cleanup();
+        this.renderer.destroy();
+        return;
+      }
+      
+      this.handleInput(key.name, key);
+      this.render();
+    });
+  }
+  
+  setupMouseHandlers() {
+    // Mouse events are handled via BoxRenderable properties, not a global handler
+    // We'll add onMouseDown to individual script lines in buildSelectionUI
+  }
+
   handleInput(keyName, keyEvent) {
     if (this.phase === 'selection') {
       if (keyName === 'enter' || keyName === 'return') {
@@ -376,8 +417,8 @@ class ProcessManager {
           // Reset countdown when selection changes
           this.countdown = COUNTDOWN_SECONDS;
         }
-      } else if (keyName === 'c') {
-        // Open settings menu
+      } else if (keyName === 'o') {
+        // Open settings menu (options)
         clearInterval(this.countdownInterval);
         this.previousPhase = 'selection';
         this.phase = 'settings';
@@ -396,8 +437,31 @@ class ProcessManager {
         return;
       }
       
+      // If in naming mode, handle name input
+      if (this.isNamingMode) {
+        const pane = findPaneById(this.paneRoot, this.focusedPaneId);
+        if (keyName === 'escape') {
+          this.isNamingMode = false;
+          this.namingModeText = '';
+          this.buildRunningUI(); // Rebuild to cancel naming
+        } else if (keyName === 'enter' || keyName === 'return') {
+          if (pane) {
+            pane.name = this.namingModeText;
+            this.savePaneLayout(); // Save the new name
+          }
+          this.isNamingMode = false;
+          this.namingModeText = '';
+          this.buildRunningUI(); // Rebuild with new name
+        } else if (keyName === 'backspace') {
+          this.namingModeText = this.namingModeText.slice(0, -1);
+          this.buildRunningUI(); // Update UI to show name change
+        } else if (keyName && keyName.length === 1 && !keyEvent.ctrl && !keyEvent.meta) {
+          this.namingModeText += keyName;
+          this.buildRunningUI(); // Update UI to show name change
+        }
+      }
       // If in filter mode, handle filter input
-      if (this.isFilterMode) {
+      else if (this.isFilterMode) {
         const pane = findPaneById(this.paneRoot, this.focusedPaneId);
         if (keyName === 'escape') {
           this.isFilterMode = false;
@@ -416,6 +480,7 @@ class ProcessManager {
       } else {
         // Normal mode - handle commands
         if (keyName === 'q') {
+          this.savePaneLayout();
           this.cleanup();
           this.renderer.destroy();
         } else if (keyName === '\\') {
@@ -457,6 +522,12 @@ class ProcessManager {
           this.isFilterMode = true;
           const pane = findPaneById(this.paneRoot, this.focusedPaneId);
           if (pane) pane.filter = '';
+        } else if (keyName === 'n') {
+          // Enter naming mode for focused pane
+          this.isNamingMode = true;
+          const pane = findPaneById(this.paneRoot, this.focusedPaneId);
+          this.namingModeText = pane?.name || '';
+          this.buildRunningUI(); // Rebuild to show naming input
         } else if (keyName === 'escape') {
           // Clear filter on focused pane
           const pane = findPaneById(this.paneRoot, this.focusedPaneId);
@@ -491,14 +562,23 @@ class ProcessManager {
           if (scriptName) {
             this.toggleProcess(scriptName);
           }
-        } else if (keyName === 'c') {
-          // Open settings
+        } else if (keyName === 'o') {
+          // Open settings (options)
           this.previousPhase = 'running';
           this.phase = 'settings';
           this.settingsSection = 'ignore';
           this.settingsIndex = 0;
           this.buildSettingsUI();
           return;
+        } else if (keyName === 'c') {
+          // Cycle color filter on focused pane
+          const pane = findPaneById(this.paneRoot, this.focusedPaneId);
+          if (pane) {
+            const colors = [null, 'red', 'yellow', 'green', 'blue', 'cyan', 'magenta'];
+            const currentIndex = colors.indexOf(pane.colorFilter);
+            pane.colorFilter = colors[(currentIndex + 1) % colors.length];
+            this.buildRunningUI();
+          }
         } else if (keyName === 'tab') {
           // Navigate to next pane
           this.navigateToNextPane(1);
@@ -511,14 +591,14 @@ class ProcessManager {
       }
     }
   }
-  
-  handleMouse(mouse) {
-    if (this.phase === 'selection') {
-      // Left click or scroll wheel click
-      if (mouse.type === 'mousedown' && (mouse.button === 'left' || mouse.button === 'middle')) {
-        // Check if click is on a script line
-        const clickedIndex = this.scriptLinePositions.findIndex(pos => pos === mouse.y);
-        
+  
+  handleMouse(mouse) {
+    if (this.phase === 'selection') {
+      // Left click or scroll wheel click
+      if (mouse.type === 'mousedown' && (mouse.button === 'left' || mouse.button === 'middle')) {
+        // Check if click is on a script line
+        const clickedIndex = this.scriptLinePositions.findIndex(pos => pos === mouse.y);
+        
         if (clickedIndex !== -1) {
           const scriptName = this.scripts[clickedIndex]?.name;
           if (scriptName) {
@@ -535,44 +615,44 @@ class ProcessManager {
             this.render();
           }
         }
-      } else if (mouse.type === 'wheeldown') {
-        this.selectedIndex = Math.min(this.scripts.length - 1, this.selectedIndex + 1);
-        this.render();
-      } else if (mouse.type === 'wheelup') {
-        this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-        this.render();
-      }
-    } else if (this.phase === 'running') {
-      // Mouse support for running phase
-      if (mouse.type === 'mousedown' && mouse.button === 'left') {
-        const clickedIndex = this.scriptLinePositions.findIndex(pos => pos === mouse.y);
-        
-        if (clickedIndex !== -1) {
-          this.selectedIndex = clickedIndex;
-          this.render();
-        }
-      } else if (mouse.type === 'wheeldown') {
-        this.selectedIndex = Math.min(this.scripts.length - 1, this.selectedIndex + 1);
-        this.render();
-      } else if (mouse.type === 'wheelup') {
-        this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-        this.render();
-      }
-    }
-  }
-
-  startCountdown() {
-    this.countdownInterval = setInterval(() => {
-      this.countdown--;
-      this.render();
-      
-      if (this.countdown <= 0) {
-        clearInterval(this.countdownInterval);
-        this.startProcesses();
-      }
-    }, 1000);
-  }
-
+      } else if (mouse.type === 'wheeldown') {
+        this.selectedIndex = Math.min(this.scripts.length - 1, this.selectedIndex + 1);
+        this.render();
+      } else if (mouse.type === 'wheelup') {
+        this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+        this.render();
+      }
+    } else if (this.phase === 'running') {
+      // Mouse support for running phase
+      if (mouse.type === 'mousedown' && mouse.button === 'left') {
+        const clickedIndex = this.scriptLinePositions.findIndex(pos => pos === mouse.y);
+        
+        if (clickedIndex !== -1) {
+          this.selectedIndex = clickedIndex;
+          this.render();
+        }
+      } else if (mouse.type === 'wheeldown') {
+        this.selectedIndex = Math.min(this.scripts.length - 1, this.selectedIndex + 1);
+        this.render();
+      } else if (mouse.type === 'wheelup') {
+        this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+        this.render();
+      }
+    }
+  }
+
+  startCountdown() {
+    this.countdownInterval = setInterval(() => {
+      this.countdown--;
+      this.render();
+      
+      if (this.countdown <= 0) {
+        clearInterval(this.countdownInterval);
+        this.startProcesses();
+      }
+    }, 1000);
+  }
+
   startProcesses() {
     const selected = Array.from(this.selectedScripts);
     
@@ -600,20 +680,20 @@ class ProcessManager {
     
     this.render();
   }
-
-  startProcess(scriptName) {
-    const script = this.scripts.find(s => s.name === scriptName);
-    if (!script) return;
-
-    const proc = spawn('npm', ['run', scriptName], {
-      env: {
-        ...process.env,
-        FORCE_COLOR: '1',
-        COLORTERM: 'truecolor',
-      },
-      shell: true,
-    });
-
+
+  startProcess(scriptName) {
+    const script = this.scripts.find(s => s.name === scriptName);
+    if (!script) return;
+
+    const proc = spawn('npm', ['run', scriptName], {
+      env: {
+        ...process.env,
+        FORCE_COLOR: '1',
+        COLORTERM: 'truecolor',
+      },
+      shell: true,
+    });
+
     proc.stdout.on('data', (data) => {
       const text = data.toString();
       const lines = text.split('\n');
@@ -639,11 +719,11 @@ class ProcessManager {
       this.processes.set(scriptName, { status, exitCode: code });
       this.addOutputLine(scriptName, `Process exited with code ${code}`);
     });
-
-    this.processRefs.set(scriptName, proc);
-    this.processes.set(scriptName, { status: 'running', pid: proc.pid });
-  }
-
+
+    this.processRefs.set(scriptName, proc);
+    this.processes.set(scriptName, { status: 'running', pid: proc.pid });
+  }
+
   addOutputLine(processName, text) {
     // Always store the output line, even when paused
     this.outputLines.push({
@@ -672,31 +752,31 @@ class ProcessManager {
       this.render();
     }, 16);
   }
-
-  stopProcess(scriptName) {
-    const proc = this.processRefs.get(scriptName);
-    if (proc && proc.pid) {
-      // Use tree-kill to kill the entire process tree
-      kill(proc.pid, 'SIGTERM', (err) => {
-        if (err) {
-          // If SIGTERM fails, try SIGKILL
-          kill(proc.pid, 'SIGKILL');
-        }
-      });
-      this.processRefs.delete(scriptName);
-      this.processes.set(scriptName, { status: 'stopped' });
-      this.addOutputLine(scriptName, 'Process stopped');
-    }
-  }
-
-  restartProcess(scriptName) {
-    this.stopProcess(scriptName);
-    setTimeout(() => {
-      this.startProcess(scriptName);
-      this.render();
-    }, 100);
-  }
-
+
+  stopProcess(scriptName) {
+    const proc = this.processRefs.get(scriptName);
+    if (proc && proc.pid) {
+      // Use tree-kill to kill the entire process tree
+      kill(proc.pid, 'SIGTERM', (err) => {
+        if (err) {
+          // If SIGTERM fails, try SIGKILL
+          kill(proc.pid, 'SIGKILL');
+        }
+      });
+      this.processRefs.delete(scriptName);
+      this.processes.set(scriptName, { status: 'stopped' });
+      this.addOutputLine(scriptName, 'Process stopped');
+    }
+  }
+
+  restartProcess(scriptName) {
+    this.stopProcess(scriptName);
+    setTimeout(() => {
+      this.startProcess(scriptName);
+      this.render();
+    }, 100);
+  }
+
   toggleProcess(scriptName) {
     const proc = this.processes.get(scriptName);
     if (proc?.status === 'running') {
@@ -1135,6 +1215,11 @@ class ProcessManager {
       );
     }
     
+    // Apply color filter (filter lines containing specific ANSI color codes)
+    if (pane.colorFilter) {
+      lines = lines.filter(line => lineHasColor(line.text, pane.colorFilter));
+    }
+    
     return lines;
   }
   
@@ -1408,7 +1493,7 @@ class ProcessManager {
       }
     }
   }
-
+
   cleanup() {
     this.destroyed = true;
     
@@ -1428,7 +1513,7 @@ class ProcessManager {
       }
     }
   }
-
+
   buildSelectionUI() {
     // Remove old containers if they exist - use destroyRecursively to clean up all children
     if (this.selectionContainer) {
@@ -1529,6 +1614,15 @@ class ProcessManager {
     leftSide.add(titleText);
     this.headerText = titleText; // Save reference for countdown updates
     
+    // VS Code hint
+    if (IS_VSCODE) {
+      const vscodeHint = new TextRenderable(this.renderer, {
+        id: 'vscode-hint',
+        content: t`${fg(COLORS.textDim)('(vscode)')}`,
+      });
+      leftSide.add(vscodeHint);
+    }
+    
     footerBar.add(leftSide);
     
     // Right side: shortcuts
@@ -1541,7 +1635,7 @@ class ProcessManager {
     const shortcuts = [
       { key: 'spc', desc: 'sel', color: COLORS.success },
       { key: 'ret', desc: 'go', color: COLORS.accent },
-      { key: 'c', desc: 'cfg', color: COLORS.magenta },
+      { key: 'o', desc: 'cfg', color: COLORS.magenta },
     ];
     
     shortcuts.forEach(({ key, desc, color }) => {
@@ -1557,32 +1651,32 @@ class ProcessManager {
     
     this.renderer.root.add(this.selectionContainer);
   }
-  
+  
   getHeaderText() {
     return `Starting in ${this.countdown}s...`;
   }
-  
-  getScriptLineText(script, index) {
-    const isSelected = this.selectedScripts.has(script.name);
-    const isFocused = index === this.selectedIndex;
-    const prefix = isFocused ? '▶' : ' ';
-    const checkbox = isSelected ? '✓' : ' ';
-    const processColor = this.processColors.get(script.name) || '#FFFFFF';
-    
-    // Use colored text for script name
-    return t`${prefix} [${checkbox}] ${fg(processColor)(script.displayName)}`;
-  }
-  
-  getScriptLineColor(index) {
-    // Return base color for the line (prefix will be cyan when focused)
-    return index === this.selectedIndex ? '#00FFFF' : '#FFFFFF';
-  }
-  
+  
+  getScriptLineText(script, index) {
+    const isSelected = this.selectedScripts.has(script.name);
+    const isFocused = index === this.selectedIndex;
+    const prefix = isFocused ? '▶' : ' ';
+    const checkbox = isSelected ? '✓' : ' ';
+    const processColor = this.processColors.get(script.name) || '#FFFFFF';
+    
+    // Use colored text for script name
+    return t`${prefix} [${checkbox}] ${fg(processColor)(script.displayName)}`;
+  }
+  
+  getScriptLineColor(index) {
+    // Return base color for the line (prefix will be cyan when focused)
+    return index === this.selectedIndex ? '#00FFFF' : '#FFFFFF';
+  }
+  
   updateSelectionUI() {
     // Rebuild UI each time - simpler and more reliable with the new structure
     this.buildSelectionUI();
   }
-  
+  
   render() {
     // Don't render if destroyed
     if (this.destroyed) return;
@@ -1598,130 +1692,130 @@ class ProcessManager {
       this.updateRunningUI();
     }
   }
-
-  getProcessListContent() {
-    // Build process list content dynamically for any number of processes
-    let contentString = '';
-    
-    this.scripts.forEach((script, index) => {
-      const proc = this.processes.get(script.name);
-      const status = proc?.status || 'stopped';
-      const icon = status === 'running' ? '●' : status === 'crashed' ? '✖' : '○';
-      const statusColor = status === 'running' ? '#00FF00' : status === 'crashed' ? '#FF0000' : '#666666';
-      const processColor = this.processColors.get(script.name) || '#FFFFFF';
-      const prefix = this.selectedIndex === index ? '▶' : '';
-      
-      // Build the colored string for this process
-      if (index > 0) contentString += '  ';
-      contentString += prefix + script.displayName + ' ' + icon;
-    });
-    
-    return contentString;
-  }
-  
-  updateRunningHeader() {
-    // Update only the header and process list without rebuilding everything
-    if (!this.headerRenderable || !this.processListRenderable || !this.runningContainer) {
-      return;
-    }
-    
-    // Update header (plain text works)
-    const selectedScript = this.scripts[this.selectedIndex];
-    const selectedName = selectedScript ? selectedScript.displayName : '';
-    const pauseIndicator = this.isPaused ? ' [PAUSED]' : '';
-    const filterIndicator = this.isFilterMode ? ` [FILTER: ${this.filter}_]` : (this.filter ? ` [FILTER: ${this.filter}]` : '');
-    const headerText = `[←→: Navigate | Space: Pause | S: Stop | R: Restart | F: Filter Selected | /: Filter Text | Q: Quit] ${selectedName}${pauseIndicator}${filterIndicator}`;
-    
-    if (this.headerRenderable.setContent) {
-      this.headerRenderable.setContent(headerText);
-    }
-    
-    // For process list with styled text, we need to recreate it
-    // Remove old one
-    this.runningContainer.remove(this.processListRenderable);
-    this.processListRenderable.destroy();
-    
-    // Create new process list with current selection
-    let processContent;
-    if (this.scripts.length === 1) {
-      const script = this.scripts[0];
-      const proc = this.processes.get(script.name);
-      const status = proc?.status || 'stopped';
-      const statusIcon = status === 'running' ? '●' : status === 'crashed' ? '✖' : '○';
-      const statusColor = status === 'running' ? '#00FF00' : status === 'crashed' ? '#FF0000' : '#666666';
-      const processColor = this.processColors.get(script.name) || '#FFFFFF';
-      processContent = t`▶${fg(processColor)(script.displayName)} ${fg(statusColor)(statusIcon)}`;
-    } else if (this.scripts.length === 2) {
-      const s0 = this.scripts[0];
-      const s1 = this.scripts[1];
-      const proc0 = this.processes.get(s0.name);
-      const proc1 = this.processes.get(s1.name);
-      const status0 = proc0?.status || 'stopped';
-      const status1 = proc1?.status || 'stopped';
-      const icon0 = status0 === 'running' ? '●' : status0 === 'crashed' ? '✖' : '○';
-      const icon1 = status1 === 'running' ? '●' : status1 === 'crashed' ? '✖' : '○';
-      const color0 = status0 === 'running' ? '#00FF00' : status0 === 'crashed' ? '#FF0000' : '#666666';
-      const color1 = status1 === 'running' ? '#00FF00' : status1 === 'crashed' ? '#FF0000' : '#666666';
-      const pcolor0 = this.processColors.get(s0.name) || '#FFFFFF';
-      const pcolor1 = this.processColors.get(s1.name) || '#FFFFFF';
-      const prefix0 = this.selectedIndex === 0 ? '▶' : '';
-      const prefix1 = this.selectedIndex === 1 ? '▶' : '';
-      processContent = t`${prefix0}${fg(pcolor0)(s0.displayName)} ${fg(color0)(icon0)}  ${prefix1}${fg(pcolor1)(s1.displayName)} ${fg(color1)(icon1)}`;
-    } else if (this.scripts.length === 3) {
-      const s0 = this.scripts[0];
-      const s1 = this.scripts[1];
-      const s2 = this.scripts[2];
-      const proc0 = this.processes.get(s0.name);
-      const proc1 = this.processes.get(s1.name);
-      const proc2 = this.processes.get(s2.name);
-      const status0 = proc0?.status || 'stopped';
-      const status1 = proc1?.status || 'stopped';
-      const status2 = proc2?.status || 'stopped';
-      const icon0 = status0 === 'running' ? '●' : status0 === 'crashed' ? '✖' : '○';
-      const icon1 = status1 === 'running' ? '●' : status1 === 'crashed' ? '✖' : '○';
-      const icon2 = status2 === 'running' ? '●' : status2 === 'crashed' ? '✖' : '○';
-      const color0 = status0 === 'running' ? '#00FF00' : status0 === 'crashed' ? '#FF0000' : '#666666';
-      const color1 = status1 === 'running' ? '#00FF00' : status1 === 'crashed' ? '#FF0000' : '#666666';
-      const color2 = status2 === 'running' ? '#00FF00' : status2 === 'crashed' ? '#FF0000' : '#666666';
-      const pcolor0 = this.processColors.get(s0.name) || '#FFFFFF';
-      const pcolor1 = this.processColors.get(s1.name) || '#FFFFFF';
-      const pcolor2 = this.processColors.get(s2.name) || '#FFFFFF';
-      const prefix0 = this.selectedIndex === 0 ? '▶' : '';
-      const prefix1 = this.selectedIndex === 1 ? '▶' : '';
-      const prefix2 = this.selectedIndex === 2 ? '▶' : '';
-      processContent = t`${prefix0}${fg(pcolor0)(s0.displayName)} ${fg(color0)(icon0)}  ${prefix1}${fg(pcolor1)(s1.displayName)} ${fg(color1)(icon1)}  ${prefix2}${fg(pcolor2)(s2.displayName)} ${fg(color2)(icon2)}`;
-    } else {
-      // 4+ processes - for now hardcode to 4, but should be dynamic
-      const parts = this.scripts.slice(0, 4).map((script, idx) => {
-        const proc = this.processes.get(script.name);
-        const status = proc?.status || 'stopped';
-        const icon = status === 'running' ? '●' : status === 'crashed' ? '✖' : '○';
-        const color = status === 'running' ? '#00FF00' : status === 'crashed' ? '#FF0000' : '#666666';
-        const pcolor = this.processColors.get(script.name) || '#FFFFFF';
-        const prefix = this.selectedIndex === idx ? '▶' : '';
-        return { prefix, name: script.displayName, icon, color, pcolor };
-      });
-      processContent = t`${parts[0].prefix}${fg(parts[0].pcolor)(parts[0].name)} ${fg(parts[0].color)(parts[0].icon)}  ${parts[1].prefix}${fg(parts[1].pcolor)(parts[1].name)} ${fg(parts[1].color)(parts[1].icon)}  ${parts[2].prefix}${fg(parts[2].pcolor)(parts[2].name)} ${fg(parts[2].color)(parts[2].icon)}  ${parts[3].prefix}${fg(parts[3].pcolor)(parts[3].name)} ${fg(parts[3].color)(parts[3].icon)}`;
-    }
-    
-    // Create new process list renderable
-    this.processListRenderable = new TextRenderable(this.renderer, {
-      id: 'process-list',
-      content: processContent,
-    });
-    
-    // Insert it back in the right position (after header and spacer)
-    // This is tricky - we need to insert at position 2
-    // For now, just rebuild the whole UI since we can't easily insert
-    this.buildRunningUI();
-  }
-  
-  updateRunningUI() {
-    // Just rebuild the entire UI - simpler and more reliable
-    // OpenTUI doesn't have great incremental update support anyway
-    this.buildRunningUI();
-  }
-  
+
+  getProcessListContent() {
+    // Build process list content dynamically for any number of processes
+    let contentString = '';
+    
+    this.scripts.forEach((script, index) => {
+      const proc = this.processes.get(script.name);
+      const status = proc?.status || 'stopped';
+      const icon = status === 'running' ? '●' : status === 'crashed' ? '✖' : '○';
+      const statusColor = status === 'running' ? '#00FF00' : status === 'crashed' ? '#FF0000' : '#666666';
+      const processColor = this.processColors.get(script.name) || '#FFFFFF';
+      const prefix = this.selectedIndex === index ? '▶' : '';
+      
+      // Build the colored string for this process
+      if (index > 0) contentString += '  ';
+      contentString += prefix + script.displayName + ' ' + icon;
+    });
+    
+    return contentString;
+  }
+  
+  updateRunningHeader() {
+    // Update only the header and process list without rebuilding everything
+    if (!this.headerRenderable || !this.processListRenderable || !this.runningContainer) {
+      return;
+    }
+    
+    // Update header (plain text works)
+    const selectedScript = this.scripts[this.selectedIndex];
+    const selectedName = selectedScript ? selectedScript.displayName : '';
+    const pauseIndicator = this.isPaused ? ' [PAUSED]' : '';
+    const filterIndicator = this.isFilterMode ? ` [FILTER: ${this.filter}_]` : (this.filter ? ` [FILTER: ${this.filter}]` : '');
+    const headerText = `[←→: Navigate | Space: Pause | S: Stop | R: Restart | F: Filter Selected | /: Filter Text | Q: Quit] ${selectedName}${pauseIndicator}${filterIndicator}`;
+    
+    if (this.headerRenderable.setContent) {
+      this.headerRenderable.setContent(headerText);
+    }
+    
+    // For process list with styled text, we need to recreate it
+    // Remove old one
+    this.runningContainer.remove(this.processListRenderable);
+    this.processListRenderable.destroy();
+    
+    // Create new process list with current selection
+    let processContent;
+    if (this.scripts.length === 1) {
+      const script = this.scripts[0];
+      const proc = this.processes.get(script.name);
+      const status = proc?.status || 'stopped';
+      const statusIcon = status === 'running' ? '●' : status === 'crashed' ? '✖' : '○';
+      const statusColor = status === 'running' ? '#00FF00' : status === 'crashed' ? '#FF0000' : '#666666';
+      const processColor = this.processColors.get(script.name) || '#FFFFFF';
+      processContent = t`▶${fg(processColor)(script.displayName)} ${fg(statusColor)(statusIcon)}`;
+    } else if (this.scripts.length === 2) {
+      const s0 = this.scripts[0];
+      const s1 = this.scripts[1];
+      const proc0 = this.processes.get(s0.name);
+      const proc1 = this.processes.get(s1.name);
+      const status0 = proc0?.status || 'stopped';
+      const status1 = proc1?.status || 'stopped';
+      const icon0 = status0 === 'running' ? '●' : status0 === 'crashed' ? '✖' : '○';
+      const icon1 = status1 === 'running' ? '●' : status1 === 'crashed' ? '✖' : '○';
+      const color0 = status0 === 'running' ? '#00FF00' : status0 === 'crashed' ? '#FF0000' : '#666666';
+      const color1 = status1 === 'running' ? '#00FF00' : status1 === 'crashed' ? '#FF0000' : '#666666';
+      const pcolor0 = this.processColors.get(s0.name) || '#FFFFFF';
+      const pcolor1 = this.processColors.get(s1.name) || '#FFFFFF';
+      const prefix0 = this.selectedIndex === 0 ? '▶' : '';
+      const prefix1 = this.selectedIndex === 1 ? '▶' : '';
+      processContent = t`${prefix0}${fg(pcolor0)(s0.displayName)} ${fg(color0)(icon0)}  ${prefix1}${fg(pcolor1)(s1.displayName)} ${fg(color1)(icon1)}`;
+    } else if (this.scripts.length === 3) {
+      const s0 = this.scripts[0];
+      const s1 = this.scripts[1];
+      const s2 = this.scripts[2];
+      const proc0 = this.processes.get(s0.name);
+      const proc1 = this.processes.get(s1.name);
+      const proc2 = this.processes.get(s2.name);
+      const status0 = proc0?.status || 'stopped';
+      const status1 = proc1?.status || 'stopped';
+      const status2 = proc2?.status || 'stopped';
+      const icon0 = status0 === 'running' ? '●' : status0 === 'crashed' ? '✖' : '○';
+      const icon1 = status1 === 'running' ? '●' : status1 === 'crashed' ? '✖' : '○';
+      const icon2 = status2 === 'running' ? '●' : status2 === 'crashed' ? '✖' : '○';
+      const color0 = status0 === 'running' ? '#00FF00' : status0 === 'crashed' ? '#FF0000' : '#666666';
+      const color1 = status1 === 'running' ? '#00FF00' : status1 === 'crashed' ? '#FF0000' : '#666666';
+      const color2 = status2 === 'running' ? '#00FF00' : status2 === 'crashed' ? '#FF0000' : '#666666';
+      const pcolor0 = this.processColors.get(s0.name) || '#FFFFFF';
+      const pcolor1 = this.processColors.get(s1.name) || '#FFFFFF';
+      const pcolor2 = this.processColors.get(s2.name) || '#FFFFFF';
+      const prefix0 = this.selectedIndex === 0 ? '▶' : '';
+      const prefix1 = this.selectedIndex === 1 ? '▶' : '';
+      const prefix2 = this.selectedIndex === 2 ? '▶' : '';
+      processContent = t`${prefix0}${fg(pcolor0)(s0.displayName)} ${fg(color0)(icon0)}  ${prefix1}${fg(pcolor1)(s1.displayName)} ${fg(color1)(icon1)}  ${prefix2}${fg(pcolor2)(s2.displayName)} ${fg(color2)(icon2)}`;
+    } else {
+      // 4+ processes - for now hardcode to 4, but should be dynamic
+      const parts = this.scripts.slice(0, 4).map((script, idx) => {
+        const proc = this.processes.get(script.name);
+        const status = proc?.status || 'stopped';
+        const icon = status === 'running' ? '●' : status === 'crashed' ? '✖' : '○';
+        const color = status === 'running' ? '#00FF00' : status === 'crashed' ? '#FF0000' : '#666666';
+        const pcolor = this.processColors.get(script.name) || '#FFFFFF';
+        const prefix = this.selectedIndex === idx ? '▶' : '';
+        return { prefix, name: script.displayName, icon, color, pcolor };
+      });
+      processContent = t`${parts[0].prefix}${fg(parts[0].pcolor)(parts[0].name)} ${fg(parts[0].color)(parts[0].icon)}  ${parts[1].prefix}${fg(parts[1].pcolor)(parts[1].name)} ${fg(parts[1].color)(parts[1].icon)}  ${parts[2].prefix}${fg(parts[2].pcolor)(parts[2].name)} ${fg(parts[2].color)(parts[2].icon)}  ${parts[3].prefix}${fg(parts[3].pcolor)(parts[3].name)} ${fg(parts[3].color)(parts[3].icon)}`;
+    }
+    
+    // Create new process list renderable
+    this.processListRenderable = new TextRenderable(this.renderer, {
+      id: 'process-list',
+      content: processContent,
+    });
+    
+    // Insert it back in the right position (after header and spacer)
+    // This is tricky - we need to insert at position 2
+    // For now, just rebuild the whole UI since we can't easily insert
+    this.buildRunningUI();
+  }
+  
+  updateRunningUI() {
+    // Just rebuild the entire UI - simpler and more reliable
+    // OpenTUI doesn't have great incremental update support anyway
+    this.buildRunningUI();
+  }
+  
   // Build a single pane's output area
   buildPaneOutput(pane, container, height) {
     const isFocused = pane.id === this.focusedPaneId;
@@ -1731,6 +1825,10 @@ class ProcessManager {
     const outputHeight = Math.max(3, height - 2);
     let linesToShow = this.isPaused ? lines : lines.slice(-outputHeight);
     
+    // Use full terminal width for padding - simpler and ensures complete clearing
+    // Each pane will pad to full width, excess will be clipped by container
+    const approxPaneWidth = this.renderer.width;
+    
     // Add lines in reverse order (newest first)
     for (let i = linesToShow.length - 1; i >= 0; i--) {
       const line = linesToShow[i];
@@ -1768,12 +1866,47 @@ class ProcessManager {
         truncatedText = result + '\x1b[0m...';
       }
       
+      // Get visible length of current line and pad to fill width
+      const linePrefix = `[${line.process}] `;
+      const currentLength = linePrefix.length + stripAnsi(truncatedText).length;
+      
+      // Pad with spaces to fill the width
+      const paddingNeeded = Math.max(0, approxPaneWidth - currentLength);
+      const padding = ' '.repeat(paddingNeeded);
+      
       const outputLine = new TextRenderable(this.renderer, {
         id: `output-${pane.id}-${i}`,
-        content: t`${fg(processColor)(`[${line.process}]`)} ${truncatedText}`,
+        content: t`${fg(processColor)(`[${line.process}]`)} ${truncatedText}${padding}`,
+        bg: '#000000', // Black background for pane content
       });
+      
       container.add(outputLine);
     }
+    
+    // Fill remaining vertical space with blank lines
+    const emptyLinesNeeded = Math.max(0, outputHeight - linesToShow.length);
+    for (let j = 0; j < emptyLinesNeeded; j++) {
+      const emptyLine = new TextRenderable(this.renderer, {
+        id: `empty-${pane.id}-${j}`,
+        content: ' '.repeat(approxPaneWidth), // Fill entire width with spaces
+        bg: '#000000', // Black background for empty lines
+      });
+      
+      container.add(emptyLine);
+    }
+  }
+  
+  // Count how many vertical panes exist (for width calculation)
+  countVerticalPanes(node) {
+    if (!node) return 1;
+    if (node.type === 'pane') return 1;
+    if (node.direction === 'vertical') {
+      // Vertical split means panes side by side
+      return node.children.reduce((sum, child) => sum + this.countVerticalPanes(child), 0);
+    } else {
+      // Horizontal split means panes stacked, count the max
+      return Math.max(...node.children.map(child => this.countVerticalPanes(child)));
+    }
   }
   
   // Build a pane panel with title bar
@@ -1781,21 +1914,25 @@ class ProcessManager {
     const isFocused = pane.id === this.focusedPaneId;
     const borderColor = isFocused ? COLORS.borderFocused : COLORS.border;
     
-    // Title shows assigned processes or "All", plus filter and hidden count
-    const processLabel = pane.processes.length > 0 
+    // Title shows custom name (if set), or assigned processes or "All", plus filter and hidden count
+    const customName = pane.name ? pane.name : null;
+    const processLabel = customName || (pane.processes.length > 0 
       ? pane.processes.join(', ')
-      : 'All';
+      : 'All');
     const focusLabel = isFocused ? '*' : '';
     const hiddenCount = pane.hidden?.length || 0;
     const hiddenLabel = hiddenCount > 0 ? ` -${hiddenCount}` : '';
     const filterLabel = pane.filter ? ` /${pane.filter}` : '';
+    const namingInputLabel = (isFocused && this.isNamingMode) ? `Name: ${this.namingModeText}_` : '';
     const filterInputLabel = (isFocused && this.isFilterMode) ? `/${pane.filter || ''}_` : '';
-    const title = ` ${focusLabel}${processLabel}${hiddenLabel}${filterInputLabel || filterLabel} `;
+    const title = ` ${focusLabel}${namingInputLabel || processLabel}${hiddenLabel}${filterInputLabel || filterLabel} `;
     
     const paneContainer = new BoxRenderable(this.renderer, {
       id: `pane-${pane.id}`,
       flexDirection: 'column',
       flexGrow: flexGrow,
+      flexShrink: 0, // Prevent shrinking - maintain 50/50 split
+      flexBasis: 0, // Use flexGrow ratio for sizing, not content size
       border: true,
       borderStyle: 'rounded',
       borderColor: borderColor,
@@ -1803,19 +1940,24 @@ class ProcessManager {
       titleAlignment: 'left',
       padding: 0,
       overflow: 'hidden',
+      backgroundColor: '#000000', // Black background for pane container
     });
     
-    // Output content - always use BoxRenderable for consistent sizing
+    // Output content - use BoxRenderable that fills remaining space
+    // Use passed height or calculate default for line count calculation
+    const height = availableHeight ? Math.max(5, availableHeight - 2) : Math.max(5, this.renderer.height - 6);
+    
     const outputBox = new BoxRenderable(this.renderer, {
       id: `pane-output-${pane.id}`,
       flexDirection: 'column',
       flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
       overflow: 'hidden',
       paddingLeft: 1,
+      backgroundColor: '#000000', // Black background for pane
     });
     
-    // Use passed height or calculate default
-    const height = availableHeight ? Math.max(5, availableHeight - 2) : Math.max(5, this.renderer.height - 6);
     this.buildPaneOutput(pane, outputBox, height);
     
     paneContainer.add(outputBox);
@@ -1840,6 +1982,8 @@ class ProcessManager {
       id: `split-${node.direction}`,
       flexDirection: node.direction === 'vertical' ? 'row' : 'column',
       flexGrow: flexGrow,
+      flexShrink: 0,
+      flexBasis: 0,
       gap: 0,
     });
     
@@ -1931,13 +2075,13 @@ class ProcessManager {
     // Clear outputBox reference since it was destroyed with runningContainer
     this.outputBox = null;
     
-    // Create main container - full screen with dark background
+    // Create main container - full screen with black background
     const mainContainer = new BoxRenderable(this.renderer, {
       id: 'running-container',
       flexDirection: 'column',
       width: '100%',
       height: '100%',
-      backgroundColor: COLORS.bg,
+      backgroundColor: '#000000',
     });
     
     // Process tabs at top
@@ -1989,7 +2133,9 @@ class ProcessManager {
       id: 'pane-area',
       flexDirection: 'column',
       flexGrow: 1,
-      backgroundColor: COLORS.bg,
+      flexShrink: 0,
+      flexBasis: 0,
+      backgroundColor: '#000000',
     });
     
     const paneLayout = this.buildPaneLayout(this.paneRoot);
@@ -2026,6 +2172,15 @@ class ProcessManager {
     });
     leftSide.add(statusIndicator);
     
+    // VS Code hint
+    if (IS_VSCODE) {
+      const vscodeHint = new TextRenderable(this.renderer, {
+        id: 'vscode-hint',
+        content: t`${fg(COLORS.textDim)('(vscode)')}`,
+      });
+      leftSide.add(vscodeHint);
+    }
+    
     // Filter indicator if active
     if (this.filter || this.isFilterMode) {
       const filterText = this.isFilterMode ? `/${this.filter}_` : `/${this.filter}`;
@@ -2036,6 +2191,23 @@ class ProcessManager {
       leftSide.add(filterIndicator);
     }
     
+    // Color filter indicator if active on focused pane
+    if (focusedPane?.colorFilter) {
+      const colorMap = {
+        red: COLORS.error,
+        yellow: COLORS.warning,
+        green: COLORS.success,
+        blue: COLORS.accent,
+        cyan: COLORS.cyan,
+        magenta: COLORS.magenta,
+      };
+      const colorIndicator = new TextRenderable(this.renderer, {
+        id: 'color-filter-indicator',
+        content: t`${fg(colorMap[focusedPane.colorFilter] || COLORS.text)(`[${focusedPane.colorFilter}]`)}`,
+      });
+      leftSide.add(colorIndicator);
+    }
+    
     footerBar.add(leftSide);
     
     // Right side: shortcuts and title
@@ -2048,8 +2220,10 @@ class ProcessManager {
     const shortcuts = [
       { key: '\\', desc: 'panes', color: COLORS.cyan },
       { key: 'spc', desc: 'toggle', color: COLORS.success },
+      { key: 'n', desc: 'name', color: COLORS.accent },
       { key: 'p', desc: 'pause', color: COLORS.warning },
       { key: '/', desc: 'filter', color: COLORS.cyan },
+      { key: 'c', desc: 'color', color: COLORS.magenta },
       { key: 's', desc: 'stop', color: COLORS.error },
       { key: 'r', desc: 'restart', color: COLORS.success },
       { key: 'q', desc: 'quit', color: COLORS.error },
@@ -2082,27 +2256,27 @@ class ProcessManager {
     this.runningContainer = mainContainer;
   }
 }
-
-// Main
-async function main() {
-  const cwd = process.cwd();
-  const packageJsonPath = join(cwd, 'package.json');
-
-  if (!existsSync(packageJsonPath)) {
-    console.error(`Error: No package.json found in ${cwd}`);
-    process.exit(1);
-  }
-
-  const scripts = parseNpmScripts(packageJsonPath);
-  
-  if (scripts.length === 0) {
-    console.error('No npm scripts found in package.json');
-    process.exit(1);
-  }
-
-  const renderer = await createCliRenderer();
-  const manager = new ProcessManager(renderer, scripts);
-  
+
+// Main
+async function main() {
+  const cwd = process.cwd();
+  const packageJsonPath = join(cwd, 'package.json');
+
+  if (!existsSync(packageJsonPath)) {
+    console.error(`Error: No package.json found in ${cwd}`);
+    process.exit(1);
+  }
+
+  const scripts = parseNpmScripts(packageJsonPath);
+  
+  if (scripts.length === 0) {
+    console.error('No npm scripts found in package.json');
+    process.exit(1);
+  }
+
+  const renderer = await createCliRenderer();
+  const manager = new ProcessManager(renderer, scripts);
+  
   // Handle cleanup on exit
   const handleExit = () => {
     manager.cleanup();
@@ -2112,8 +2286,8 @@ async function main() {
   process.on('SIGINT', handleExit);
   process.on('SIGTERM', handleExit);
 }
-
-main().catch(err => {
-  console.error('Error:', err);
-  process.exit(1);
-});
+
+main().catch(err => {
+  console.error('Error:', err);
+  process.exit(1);
+});