startall 0.0.11 → 0.0.13

package/README.md

@@ -1,6 +1,8 @@
-# 🚀 Start
+# 🚀 startall
 
-> An interactive terminal UI for managing multiple npm scripts in parallel
+> A powerful, interactive terminal UI for managing multiple npm scripts with tmux-style panes, filtering, and real-time control
+
+![startall screenshot](https://github.com/bzbetty/startall/raw/main/screenshot.png)
 
 ## The Problem
 
@@ -20,47 +22,47 @@ Traditional solutions fall short:
 
 ## The Solution
 
-**Start** is a lightweight, interactive TUI that gives you complete control over your development processes:
-
-```
-┌─ Starting in 7s... [Enter to start now] ─────────────┐
-│ [x] frontend (npm run start:frontend)                │
-│ [x] backend (npm run start:backend)                  │
-│ [ ] worker (npm run start:worker)                    │
-│ [x] db (npm run start:db)                            │
-│                                                       │
-│ ↑/↓ Navigate | Space: Toggle | Enter: Start          │
-└───────────────────────────────────────────────────────┘
-
-After starting:
-┌─ Processes ──────────────┬─ Output (filter: error) ───┐
-│ [f] frontend ● Running   │ [backend] Error: ECONNREF  │
-│ [b] backend  ✖ Crashed   │ [backend] Retrying...      │
-│ [w] worker   ⏸ Stopped   │ [frontend] Started on 3000 │
-│ [d] db       ● Running   │                            │
-│                          │                            │
-│ Space: Start/Stop        │                            │
-│ r: Restart               │                            │
-│ /: Filter output         │                            │
-└──────────────────────────┴────────────────────────────┘
-```
+**startall** is a sophisticated TUI that combines the power of tmux with the simplicity of npm scripts, giving you complete control over your development processes with split panes, filtering, and interactive controls.
 
 ## Features
 
-### ✅ Current
-- **Auto-discovery**: Reads all scripts from `package.json` automatically
-- **Smart defaults**: Remembers your last selection
-- **10-second countdown**: Time to review/change selections before starting
+### 🎯 Core Features
+- **Auto-discovery**: Automatically reads all scripts from `package.json`
+- **Smart defaults**: Remembers your last selection in `startall.json`
+- **10-second countdown**: Review selections before starting
 - **Parallel execution**: Run multiple npm scripts simultaneously
-- **Colored output**: Each process gets its own color prefix
-
-### 🚧 Planned
-- **Live status monitoring**: See which processes are running/crashed/stopped at a glance
-- **Interactive controls**: Start, stop, and restart individual processes with keyboard shortcuts
-- **Output filtering**: Search/filter logs across all processes in real-time
+- **Live status monitoring**: Real-time status indicators (● running, ✖ crashed, ○ stopped)
+- **Interactive controls**: Start, stop, and restart individual processes on the fly
 - **Cross-platform**: Works identically on Windows, Linux, and macOS
-- **Tab view**: Switch between different process outputs
-- **Resource monitoring**: CPU/memory usage per process
+
+### 🎨 Advanced UI
+- **Multi-pane layout**: tmux-inspired split panes (vertical & horizontal)
+- **Flexible filtering**: 
+  - Text search across all output (`/`)
+  - Filter by ANSI color (red/yellow/green/blue/cyan/magenta) (`c`)
+  - Per-process visibility toggles (`Space` or `1-9`)
+  - Per-pane filters (different views in each pane)
+- **Custom pane naming**: Label panes for easier identification (`n`)
+- **Persistent layouts**: Your pane configuration is saved between sessions
+- **Process-specific views**: Show/hide specific processes in each pane
+- **Colored output**: Each process gets unique color-coded output
+- **Pause/resume**: Freeze output to review logs (`p`)
+- **Scrollable history**: 1000-line buffer with mouse wheel support
+- **Enhanced navigation**: Home/End/PageUp/PageDown keys
+
+### ⚙️ Display Options
+- **Toggleable line numbers**: Show/hide line numbers (`#`)
+- **Timestamps**: Show/hide timestamps for each log line (`t`)
+- **Quick process toggle**: Use number keys `1-9` for instant visibility control
+
+### 🔧 Advanced Controls
+- **Interactive input mode**: Send commands to running processes via stdin (`i`)
+  - Perfect for dev servers that accept commands (Vite, Rust watch, etc.)
+- **Settings panel**: Configure ignore/include patterns (`o`)
+  - Wildcard support (`*`) for pattern matching
+  - Per-script visibility toggles
+- **Keyboard & mouse support**: Full keyboard navigation + mouse clicking/scrolling
+- **VSCode integration**: Optimized for VSCode integrated terminal
 
 ## Installation
 
@@ -90,14 +92,57 @@ That's it! The TUI will:
 - `↑`/`↓` - Navigate scripts
 - `Space` - Toggle selection
 - `Enter` - Start immediately (skip countdown)
+- `o` - Open settings
 - `Ctrl+C` - Exit
 
-**Running Screen (planned):**
-- `Space` - Start/stop selected process
+**Running Screen:**
+
+*Process Control:*
+- `1-9` - Quick toggle process visibility in focused pane
+- `Space` - Toggle visibility of selected process
+- `s` - Stop/start selected process
 - `r` - Restart selected process
-- `/` - Filter output
-- `Tab` - Switch between processes
-- `Ctrl+C` - Stop all and exit
+- `i` - Send input to selected process (interactive mode)
+
+*Pane Management:*
+- `\` - Open command palette
+- `|` - Split pane vertically (left/right)
+- `_` - Split pane horizontally (top/bottom)
+- `x` - Close current pane (if >1 pane exists)
+- `Tab` - Next pane
+- `Shift+Tab` - Previous pane
+- `n` - Name current pane
+
+*Filtering & View:*
+- `/` - Enter text filter mode
+- `c` - Cycle color filter (red/yellow/green/blue/cyan/magenta/none)
+- `f` - Filter to selected process only
+- `Esc` - Clear filters
+- `p` - Pause/resume output scrolling
+- `#` - Toggle line numbers
+- `t` - Toggle timestamps
+
+*Navigation:*
+- `↑`/`↓` or `k`/`j` - Select process (vim-style)
+- `←`/`→` or `h`/`l` - Select process (vim-style)
+- `Home` - Scroll to top of pane
+- `End` - Scroll to bottom of pane
+- `Page Up` - Scroll up one page
+- `Page Down` - Scroll down one page
+- `Mouse wheel` - Scroll output
+
+*Other:*
+- `o` - Open settings
+- `q` - Quit (stops all processes)
+- `Ctrl+C` - Force quit
+
+**Settings Screen:**
+- `Tab`/`←`/`→` - Switch sections (Ignore/Include/Scripts)
+- `↑`/`↓` - Navigate items
+- `a` - Add new pattern (Ignore/Include sections)
+- `d` or `Backspace` - Delete pattern
+- `Space` or `Enter` - Toggle script (Scripts section)
+- `Esc` or `q` - Return to previous screen
 
 ## Why Build This?
 

package/index.js

@@ -15,6 +15,16 @@ const APP_VERSION = 'v0.0.4';
 // Detect if running inside VS Code's integrated terminal
 const IS_VSCODE = process.env.TERM_PROGRAM === 'vscode';
 
+// VSCode-specific optimizations
+const VSCODE_CONFIG = {
+  // VSCode terminal has better mouse support
+  enhancedMouse: IS_VSCODE,
+  // VSCode can detect and linkify file paths (file:///path/to/file.js:line:col)
+  fileLinking: IS_VSCODE,
+  // Some key combinations are captured by VSCode
+  remapKeys: IS_VSCODE,
+};
+
 // Pane ID generator
 let paneIdCounter = 0;
 function generatePaneId() {
@@ -328,6 +338,7 @@ class ProcessManager {
     this.processes = new Map();
     this.processRefs = new Map();
     this.outputLines = [];
+    this.totalLinesReceived = 0;  // Track total lines ever received (never resets)
     this.filter = '';
     this.maxOutputLines = 1000;
     this.maxVisibleLines = null;  // Calculated dynamically based on screen height
@@ -336,9 +347,13 @@ class ProcessManager {
     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
+    this.showLineNumbers = this.config.showLineNumbers !== undefined ? this.config.showLineNumbers : true;  // Whether to show line numbers
+    this.showTimestamps = this.config.showTimestamps !== undefined ? this.config.showTimestamps : false;  // Whether to show timestamps
+    this.isInputMode = false;  // Whether in stdin input mode
+    this.inputModeText = '';  // Text being typed for stdin
     
     // Settings menu state
-    this.settingsSection = 'ignore';  // 'ignore' | 'include' | 'scripts'
+    this.settingsSection = 'display';  // 'display' | 'ignore' | 'include' | 'scripts'
     this.settingsIndex = 0;  // Current selection index within section
     this.isAddingPattern = false;  // Whether typing a new pattern
     this.newPatternText = '';  // Text being typed for new pattern
@@ -426,10 +441,25 @@ class ProcessManager {
         clearInterval(this.countdownInterval);
         this.previousPhase = 'selection';
         this.phase = 'settings';
-        this.settingsSection = 'ignore';
+        this.settingsSection = 'display';
         this.settingsIndex = 0;
         this.buildSettingsUI();
         return;
+      } else if (keyName >= '1' && keyName <= '9') {
+        // Toggle script by number (1-9)
+        const index = parseInt(keyName) - 1;
+        if (index >= 0 && index < this.scripts.length) {
+          const scriptName = this.scripts[index]?.name;
+          if (scriptName) {
+            if (this.selectedScripts.has(scriptName)) {
+              this.selectedScripts.delete(scriptName);
+            } else {
+              this.selectedScripts.add(scriptName);
+            }
+            // Reset countdown when selection changes
+            this.countdown = COUNTDOWN_SECONDS;
+          }
+        }
       }
     } else if (this.phase === 'settings') {
       this.handleSettingsInput(keyName, keyEvent);
@@ -441,8 +471,34 @@ class ProcessManager {
         return;
       }
       
+      // If in input mode (stdin), handle stdin input
+      if (this.isInputMode) {
+        const scriptName = this.scripts[this.selectedIndex]?.name;
+        if (keyName === 'escape') {
+          this.isInputMode = false;
+          this.inputModeText = '';
+          this.buildRunningUI();
+        } else if (keyName === 'enter' || keyName === 'return') {
+          // Send the input to the selected process
+          if (scriptName && this.inputModeText.trim()) {
+            this.sendInputToProcess(scriptName, this.inputModeText + '\n');
+          }
+          this.isInputMode = false;
+          this.inputModeText = '';
+          this.buildRunningUI();
+        } else if (keyName === 'backspace') {
+          this.inputModeText = this.inputModeText.slice(0, -1);
+          this.buildRunningUI();
+        } else if (keyName === 'space') {
+          this.inputModeText += ' ';
+          this.buildRunningUI();
+        } else if (keyName && keyName.length === 1 && !keyEvent.ctrl && !keyEvent.meta) {
+          this.inputModeText += keyName;
+          this.buildRunningUI();
+        }
+      }
       // If in naming mode, handle name input
-      if (this.isNamingMode) {
+      else if (this.isNamingMode) {
         const pane = findPaneById(this.paneRoot, this.focusedPaneId);
         if (keyName === 'escape') {
           this.isNamingMode = false;
@@ -548,12 +604,15 @@ class ProcessManager {
           this.selectedIndex = Math.min(this.scripts.length - 1, this.selectedIndex + 1);
           this.buildRunningUI(); // Rebuild to show selection change
         } else if (keyName === 'left' || keyName === 'h') {
-          // Navigate processes left
-          this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+          // Navigate processes left with wrapping
+          this.selectedIndex = this.selectedIndex - 1;
+          if (this.selectedIndex < 0) {
+            this.selectedIndex = this.scripts.length - 1;
+          }
           this.buildRunningUI(); // Rebuild to show selection change
         } else if (keyName === 'right' || keyName === 'l') {
-          // Navigate processes right
-          this.selectedIndex = Math.min(this.scripts.length - 1, this.selectedIndex + 1);
+          // Navigate processes right with wrapping
+          this.selectedIndex = (this.selectedIndex + 1) % this.scripts.length;
           this.buildRunningUI(); // Rebuild to show selection change
         } else if (keyName === 'r') {
           const scriptName = this.scripts[this.selectedIndex]?.name;
@@ -567,13 +626,13 @@ class ProcessManager {
             this.toggleProcess(scriptName);
           }
         } else if (keyName === 'o') {
-          // Open settings (options)
-          this.previousPhase = 'running';
-          this.phase = 'settings';
-          this.settingsSection = 'ignore';
-          this.settingsIndex = 0;
-          this.buildSettingsUI();
-          return;
+      // Open settings (options)
+      this.previousPhase = 'running';
+      this.phase = 'settings';
+      this.settingsSection = 'display';
+      this.settingsIndex = 0;
+      this.buildSettingsUI();
+      return;
         } else if (keyName === 'c') {
           // Cycle color filter on focused pane
           const pane = findPaneById(this.paneRoot, this.focusedPaneId);
@@ -591,6 +650,35 @@ class ProcessManager {
           // Navigate to previous pane
           this.navigateToNextPane(-1);
           this.buildRunningUI();
+        } else if (keyName === 'home') {
+          // Scroll to top of focused pane
+          this.scrollFocusedPane('home');
+        } else if (keyName === 'end') {
+          // Scroll to bottom of focused pane
+          this.scrollFocusedPane('end');
+        } else if (keyName === 'pageup') {
+          // Scroll up one page in focused pane
+          this.scrollFocusedPane('pageup');
+        } else if (keyName === 'pagedown') {
+          // Scroll down one page in focused pane
+          this.scrollFocusedPane('pagedown');
+        } else if (keyName >= '1' && keyName <= '9') {
+          // Toggle process by number (1-9)
+          const index = parseInt(keyName) - 1;
+          if (index >= 0 && index < this.scripts.length) {
+            this.selectedIndex = index;
+            this.toggleProcessVisibility();
+            this.buildRunningUI();
+          }
+        } else if (keyName === 'i') {
+          // Enter input mode to send stdin to selected process
+          const scriptName = this.scripts[this.selectedIndex]?.name;
+          const proc = this.processes.get(scriptName);
+          if (scriptName && proc?.status === 'running') {
+            this.isInputMode = true;
+            this.inputModeText = '';
+            this.buildRunningUI();
+          }
         }
       }
     }
@@ -734,6 +822,7 @@ class ProcessManager {
       process: processName,
       text,
       timestamp: Date.now(),
+      lineNumber: ++this.totalLinesReceived,  // Track absolute line number
     });
     
     if (this.outputLines.length > this.maxOutputLines) {
@@ -748,13 +837,10 @@ class ProcessManager {
   }
   
   scheduleRender() {
-    // Throttle renders to ~60fps to reduce CPU usage
-    if (this.renderScheduled) return;
-    this.renderScheduled = true;
-    setTimeout(() => {
-      this.renderScheduled = false;
+    // Update the DOM - OpenTUI's render loop will pick up changes automatically
+    if (!this.destroyed) {
       this.render();
-    }, 16);
+    }
   }
 
   stopProcess(scriptName) {
@@ -789,6 +875,19 @@ class ProcessManager {
       this.startProcess(scriptName);
     }
   }
+  
+  sendInputToProcess(scriptName, input) {
+    const proc = this.processRefs.get(scriptName);
+    if (proc && proc.stdin && proc.stdin.writable) {
+      try {
+        proc.stdin.write(input);
+        // Echo the input in the output for visibility
+        this.addOutputLine(scriptName, `> ${input.trim()}`);
+      } catch (err) {
+        this.addOutputLine(scriptName, `Error sending input: ${err.message}`);
+      }
+    }
+  }
 
   handleSettingsInput(keyName, keyEvent) {
     // Handle text input mode for adding patterns
@@ -825,6 +924,14 @@ class ProcessManager {
     
     // Normal settings navigation
     if (keyName === 'escape' || keyName === 'q') {
+      // Apply filters before returning (updates this.scripts)
+      this.applyFilters();
+      
+      // Ensure selectedIndex is within bounds after filter changes
+      if (this.selectedIndex >= this.scripts.length) {
+        this.selectedIndex = Math.max(0, this.scripts.length - 1);
+      }
+      
       // Return to previous phase
       if (this.previousPhase === 'running') {
         this.phase = 'running';
@@ -837,46 +944,76 @@ class ProcessManager {
       }
     } else if (keyName === 'tab' || keyName === 'right') {
       // Switch section
-      const sections = ['ignore', 'include', 'scripts'];
+      const sections = ['display', 'ignore', 'include', 'scripts'];
       const idx = sections.indexOf(this.settingsSection);
       this.settingsSection = sections[(idx + 1) % sections.length];
       this.settingsIndex = 0;
       this.buildSettingsUI();
     } else if (keyEvent.shift && keyName === 'tab') {
       // Switch section backwards
-      const sections = ['ignore', 'include', 'scripts'];
+      const sections = ['display', 'ignore', 'include', 'scripts'];
       const idx = sections.indexOf(this.settingsSection);
       this.settingsSection = sections[(idx - 1 + sections.length) % sections.length];
       this.settingsIndex = 0;
       this.buildSettingsUI();
     } else if (keyName === 'left') {
       // Switch section backwards
-      const sections = ['ignore', 'include', 'scripts'];
+      const sections = ['display', 'ignore', 'include', 'scripts'];
       const idx = sections.indexOf(this.settingsSection);
       this.settingsSection = sections[(idx - 1 + sections.length) % sections.length];
       this.settingsIndex = 0;
       this.buildSettingsUI();
     } else if (keyName === 'up') {
-      this.settingsIndex = Math.max(0, this.settingsIndex - 1);
-      this.buildSettingsUI();
+      if (this.settingsIndex > 0) {
+        this.settingsIndex--;
+        this.buildSettingsUI();
+      } else {
+        // Move to previous section
+        const sections = ['display', 'ignore', 'include', 'scripts'];
+        const idx = sections.indexOf(this.settingsSection);
+        if (idx > 0) {
+          this.settingsSection = sections[idx - 1];
+          this.settingsIndex = this.getSettingsMaxIndex();
+          this.buildSettingsUI();
+        }
+      }
     } else if (keyName === 'down') {
       const maxIndex = this.getSettingsMaxIndex();
-      this.settingsIndex = Math.min(maxIndex, this.settingsIndex + 1);
-      this.buildSettingsUI();
-    } else if (keyName === 'a') {
-      // Add new pattern (only for ignore/include sections)
-      if (this.settingsSection === 'ignore' || this.settingsSection === 'include') {
-        this.isAddingPattern = true;
-        this.newPatternText = '';
+      if (this.settingsIndex < maxIndex) {
+        this.settingsIndex++;
         this.buildSettingsUI();
+      } else {
+        // Move to next section
+        const sections = ['display', 'ignore', 'include', 'scripts'];
+        const idx = sections.indexOf(this.settingsSection);
+        if (idx < sections.length - 1) {
+          this.settingsSection = sections[idx + 1];
+          this.settingsIndex = 0;
+          this.buildSettingsUI();
+        }
       }
+    } else if (keyName === 'i') {
+      // Add new ignore pattern
+      this.settingsSection = 'ignore';
+      this.isAddingPattern = true;
+      this.newPatternText = '';
+      this.buildSettingsUI();
+    } else if (keyName === 'n') {
+      // Add new include pattern
+      this.settingsSection = 'include';
+      this.isAddingPattern = true;
+      this.newPatternText = '';
+      this.buildSettingsUI();
     } else if (keyName === 'd' || keyName === 'backspace') {
-      // Delete selected pattern or toggle script ignore
+      // Delete selected pattern
       this.deleteSelectedItem();
       this.buildSettingsUI();
     } else if (keyName === 'space' || keyName === 'enter' || keyName === 'return') {
-      // Toggle for scripts section
-      if (this.settingsSection === 'scripts') {
+      // Toggle display options, script visibility
+      if (this.settingsSection === 'display') {
+        this.toggleDisplayOption();
+        this.buildSettingsUI();
+      } else if (this.settingsSection === 'scripts') {
         this.toggleScriptIgnore();
         this.buildSettingsUI();
       }
@@ -884,16 +1021,31 @@ class ProcessManager {
   }
   
   getSettingsMaxIndex() {
-    if (this.settingsSection === 'ignore') {
-      return Math.max(0, (this.config.ignore?.length || 0) - 1);
+    if (this.settingsSection === 'display') {
+      return 1; // 2 display options (line numbers, timestamps)
+    } else if (this.settingsSection === 'ignore') {
+      const count = this.config.ignore?.length || 0;
+      return count > 0 ? count - 1 : 0;
     } else if (this.settingsSection === 'include') {
-      return Math.max(0, (this.config.include?.length || 0) - 1);
+      const count = this.config.include?.length || 0;
+      return count > 0 ? count - 1 : 0;
     } else if (this.settingsSection === 'scripts') {
       return Math.max(0, this.allScripts.length - 1);
     }
     return 0;
   }
   
+  toggleDisplayOption() {
+    if (this.settingsIndex === 0) {
+      this.showLineNumbers = !this.showLineNumbers;
+      this.config.showLineNumbers = this.showLineNumbers;
+    } else if (this.settingsIndex === 1) {
+      this.showTimestamps = !this.showTimestamps;
+      this.config.showTimestamps = this.showTimestamps;
+    }
+    saveConfig(this.config);
+  }
+  
   deleteSelectedItem() {
     if (this.settingsSection === 'ignore' && this.config.ignore?.length > 0) {
       this.config.ignore.splice(this.settingsIndex, 1);
@@ -1028,6 +1180,9 @@ class ProcessManager {
       items.push({ label: 'Previous Pane', shortcut: 'Shift+Tab', action: () => this.navigateToNextPane(-1) });
     }
     
+    items.push({ label: 'Toggle Line Numbers', shortcut: '#', action: () => { this.showLineNumbers = !this.showLineNumbers; } });
+    items.push({ label: 'Toggle Timestamps', shortcut: 't', action: () => { this.showTimestamps = !this.showTimestamps; } });
+    
     return items;
   }
   
@@ -1179,6 +1334,42 @@ class ProcessManager {
     saveConfig(this.config);
   }
   
+  // Scroll the focused pane
+  scrollFocusedPane(direction) {
+    if (!this.focusedPaneId) return;
+    
+    const scrollBox = this.paneScrollBoxes.get(this.focusedPaneId);
+    if (!scrollBox || !scrollBox.scrollTo) return;
+    
+    const currentY = scrollBox.scrollTop || 0;
+    const viewportHeight = scrollBox.height || 20;
+    const contentHeight = scrollBox.contentHeight || 0;
+    
+    let newY = currentY;
+    
+    if (direction === 'home') {
+      newY = 0;
+    } else if (direction === 'end') {
+      newY = Number.MAX_SAFE_INTEGER;
+    } else if (direction === 'pageup') {
+      newY = Math.max(0, currentY - viewportHeight);
+    } else if (direction === 'pagedown') {
+      newY = Math.min(contentHeight - viewportHeight, currentY + viewportHeight);
+    }
+    
+    scrollBox.scrollTo({ x: 0, y: newY });
+    
+    // Save the new scroll position
+    this.paneScrollPositions.set(this.focusedPaneId, { x: 0, y: newY });
+    
+    // Auto-pause when manually scrolling (unless going to end)
+    if (direction !== 'end' && !this.isPaused) {
+      this.isPaused = true;
+      this.updateStreamPauseState();
+      this.buildRunningUI();
+    }
+  }
+  
   // Check if a process is visible in the focused pane
   isProcessVisibleInPane(scriptName, pane) {
     if (!pane) return true;
@@ -1303,54 +1494,82 @@ class ProcessManager {
       this.settingsContainer.add(inputBar);
     }
     
-    // Section tabs
-    const tabsContainer = new BoxRenderable(this.renderer, {
-      id: 'tabs-container',
+    // Combined content panel with all sections
+    const contentPanel = new BoxRenderable(this.renderer, {
+      id: 'content-panel',
       flexDirection: 'row',
-      gap: 2,
-      marginBottom: 1,
+      flexGrow: 1,
+      gap: 1,
     });
     
-    const sections = [
-      { id: 'ignore', label: 'IGNORE' },
-      { id: 'include', label: 'INCLUDE' },
-      { id: 'scripts', label: 'SCRIPTS' },
-    ];
-    
-    sections.forEach(({ id, label }) => {
-      const isActive = this.settingsSection === id;
-      const tab = new TextRenderable(this.renderer, {
-        id: `tab-${id}`,
-        content: isActive 
-          ? t`${fg(COLORS.accent)('[' + label + ']')}`
-          : t`${fg(COLORS.textDim)(' ' + label + ' ')}`,
-      });
-      tabsContainer.add(tab);
+    // Left column - Display options, Ignore, Include
+    const leftColumn = new BoxRenderable(this.renderer, {
+      id: 'left-column',
+      flexDirection: 'column',
+      flexGrow: 1,
+      gap: 1,
     });
     
-    this.settingsContainer.add(tabsContainer);
+    // Display options section
+    const displayBox = new BoxRenderable(this.renderer, {
+      id: 'display-box',
+      flexDirection: 'column',
+      border: true,
+      borderStyle: 'rounded',
+      borderColor: this.settingsSection === 'display' ? COLORS.borderFocused : COLORS.border,
+      title: ' Display Options ',
+      titleAlignment: 'left',
+      padding: 1,
+    });
+    this.buildDisplaySectionContent(displayBox);
+    leftColumn.add(displayBox);
     
-    // Content panel with border
-    const contentPanel = new BoxRenderable(this.renderer, {
-      id: 'content-panel',
+    // Ignore patterns section
+    const ignoreBox = new BoxRenderable(this.renderer, {
+      id: 'ignore-box',
       flexDirection: 'column',
       border: true,
       borderStyle: 'rounded',
-      borderColor: COLORS.border,
-      title: ` ${this.settingsSection.charAt(0).toUpperCase() + this.settingsSection.slice(1)} `,
+      borderColor: this.settingsSection === 'ignore' ? COLORS.borderFocused : COLORS.border,
+      title: ' Ignore Patterns (i) ',
       titleAlignment: 'left',
+      padding: 1,
       flexGrow: 1,
+    });
+    this.buildIgnoreSectionContent(ignoreBox);
+    leftColumn.add(ignoreBox);
+    
+    // Include patterns section
+    const includeBox = new BoxRenderable(this.renderer, {
+      id: 'include-box',
+      flexDirection: 'column',
+      border: true,
+      borderStyle: 'rounded',
+      borderColor: this.settingsSection === 'include' ? COLORS.borderFocused : COLORS.border,
+      title: ' Include Patterns (n) ',
+      titleAlignment: 'left',
       padding: 1,
+      flexGrow: 1,
     });
+    this.buildIncludeSectionContent(includeBox);
+    leftColumn.add(includeBox);
     
-    // Section content
-    if (this.settingsSection === 'ignore') {
-      this.buildIgnoreSectionContent(contentPanel);
-    } else if (this.settingsSection === 'include') {
-      this.buildIncludeSectionContent(contentPanel);
-    } else if (this.settingsSection === 'scripts') {
-      this.buildScriptsSectionContent(contentPanel);
-    }
+    contentPanel.add(leftColumn);
+    
+    // Right column - Scripts list
+    const scriptsBox = new BoxRenderable(this.renderer, {
+      id: 'scripts-box',
+      flexDirection: 'column',
+      border: true,
+      borderStyle: 'rounded',
+      borderColor: this.settingsSection === 'scripts' ? COLORS.borderFocused : COLORS.border,
+      title: ' Scripts ',
+      titleAlignment: 'left',
+      flexGrow: 2,
+      padding: 1,
+    });
+    this.buildScriptsSectionContent(scriptsBox);
+    contentPanel.add(scriptsBox);
     
     this.settingsContainer.add(contentPanel);
     
@@ -1374,9 +1593,10 @@ class ProcessManager {
         ]
       : [
           { key: 'tab', desc: 'section' },
-          { key: 'a', desc: 'add' },
-          { key: 'd', desc: 'delete' },
           { key: 'space', desc: 'toggle' },
+          { key: 'i', desc: 'add ignore' },
+          { key: 'n', desc: 'add include' },
+          { key: 'd', desc: 'delete' },
           { key: 'esc', desc: 'back' },
         ];
     
@@ -1393,26 +1613,38 @@ class ProcessManager {
     this.renderer.root.add(this.settingsContainer);
   }
   
-  buildIgnoreSectionContent(container) {
-    const desc = new TextRenderable(this.renderer, {
-      id: 'ignore-desc',
-      content: t`${fg(COLORS.textDim)('Patterns to exclude from script list. Use * as wildcard.')}`,
-    });
-    container.add(desc);
-    
-    container.add(new TextRenderable(this.renderer, { id: 'spacer', content: '' }));
+  buildDisplaySectionContent(container) {
+    const options = [
+      { id: 'lineNumbers', label: 'Show Line Numbers', value: this.showLineNumbers },
+      { id: 'timestamps', label: 'Show Timestamps', value: this.showTimestamps },
+    ];
     
+    options.forEach((option, idx) => {
+      const isFocused = this.settingsSection === 'display' && idx === this.settingsIndex;
+      const indicator = isFocused ? '>' : ' ';
+      const checkbox = option.value ? '[x]' : '[ ]';
+      const checkColor = option.value ? COLORS.success : COLORS.textDim;
+      
+      const line = new TextRenderable(this.renderer, {
+        id: `display-option-${idx}`,
+        content: t`${fg(isFocused ? COLORS.accent : COLORS.textDim)(indicator)} ${fg(checkColor)(checkbox)} ${fg(COLORS.text)(option.label)}`,
+      });
+      container.add(line);
+    });
+  }
+  
+  buildIgnoreSectionContent(container) {
     const patterns = this.config.ignore || [];
     
     if (patterns.length === 0) {
       const empty = new TextRenderable(this.renderer, {
         id: 'ignore-empty',
-        content: t`${fg(COLORS.textDim)('No ignore patterns defined. Press A to add.')}`,
+        content: t`${fg(COLORS.textDim)('Press i to add')}`,
       });
       container.add(empty);
     } else {
       patterns.forEach((pattern, idx) => {
-        const isFocused = idx === this.settingsIndex;
+        const isFocused = this.settingsSection === 'ignore' && idx === this.settingsIndex;
         const indicator = isFocused ? '>' : ' ';
         
         const line = new TextRenderable(this.renderer, {
@@ -1425,25 +1657,17 @@ class ProcessManager {
   }
   
   buildIncludeSectionContent(container) {
-    const desc = new TextRenderable(this.renderer, {
-      id: 'include-desc',
-      content: t`${fg(COLORS.textDim)('Only show scripts matching these patterns. Use * as wildcard.')}`,
-    });
-    container.add(desc);
-    
-    container.add(new TextRenderable(this.renderer, { id: 'spacer', content: '' }));
-    
     const patterns = this.config.include || [];
     
     if (patterns.length === 0) {
       const empty = new TextRenderable(this.renderer, {
         id: 'include-empty',
-        content: t`${fg(COLORS.textDim)('No include patterns (all scripts shown). Press A to add.')}`,
+        content: t`${fg(COLORS.textDim)('Press n to add')}`,
       });
       container.add(empty);
     } else {
       patterns.forEach((pattern, idx) => {
-        const isFocused = idx === this.settingsIndex;
+        const isFocused = this.settingsSection === 'include' && idx === this.settingsIndex;
         const indicator = isFocused ? '>' : ' ';
         
         const line = new TextRenderable(this.renderer, {
@@ -1456,19 +1680,11 @@ class ProcessManager {
   }
   
   buildScriptsSectionContent(container) {
-    const desc = new TextRenderable(this.renderer, {
-      id: 'scripts-desc',
-      content: t`${fg(COLORS.textDim)('Toggle individual scripts. Ignored scripts are hidden from selection.')}`,
-    });
-    container.add(desc);
-    
-    container.add(new TextRenderable(this.renderer, { id: 'spacer', content: '' }));
-    
     const ignorePatterns = this.config.ignore || [];
     
     this.allScripts.forEach((script, idx) => {
       const isIgnored = ignorePatterns.includes(script.name);
-      const isFocused = idx === this.settingsIndex;
+      const isFocused = this.settingsSection === 'scripts' && idx === this.settingsIndex;
       const indicator = isFocused ? '>' : ' ';
       const checkbox = isIgnored ? '[x]' : '[ ]';
       const checkColor = isIgnored ? COLORS.error : COLORS.success;
@@ -1564,14 +1780,22 @@ class ProcessManager {
     this.scriptLines = this.scripts.map((script, index) => {
       const isSelected = this.selectedScripts.has(script.name);
       const isFocused = index === this.selectedIndex;
-      const checkIcon = isSelected ? '●' : '○';
-      const checkColor = isSelected ? COLORS.success : COLORS.textDim;
       const processColor = this.processColors.get(script.name) || COLORS.text;
       const nameColor = isFocused ? COLORS.text : processColor;
+      const numberColor = processColor;
+      const bracketColor = processColor;
       const bgColor = isFocused ? COLORS.bgHighlight : null;
       
-      // Build styled content - all in one template, no nesting
-      const content = t`${fg(checkColor)(checkIcon)} ${fg(nameColor)(script.displayName)}`;
+      // Show number for first 9 scripts
+      const numberLabel = index < 9 ? ` ${index + 1}` : '  ';
+      
+      // Build checkbox with colored brackets and white x (like running screen)
+      let content;
+      if (isSelected) {
+        content = t`${fg(numberColor)(numberLabel)} ${fg(bracketColor)('[')}${fg(COLORS.text)('x')}${fg(bracketColor)(']')} ${fg(nameColor)(script.displayName)}`;
+      } else {
+        content = t`${fg(numberColor)(numberLabel)} ${fg(bracketColor)('[ ]')} ${fg(nameColor)(script.displayName)}`;
+      }
       
       const lineContainer = new BoxRenderable(this.renderer, {
         id: `script-box-${index}`,
@@ -1815,87 +2039,65 @@ class ProcessManager {
   }
   
   updateRunningUI() {
-    // Update existing panes instead of rebuilding everything
+    // Update existing panes incrementally, or rebuild if needed
     if (this.paneScrollBoxes.size > 0) {
-      // Update each pane's content
+      // Incremental update - just append new lines to existing panes
+      let hasNewContent = false;
+      
       for (const [paneId, scrollBox] of this.paneScrollBoxes.entries()) {
         const pane = findPaneById(this.paneRoot, paneId);
         if (pane && scrollBox && scrollBox.content) {
-          // Check if filter state changed or if paused (requires rebuild)
-          const currentFilterState = JSON.stringify({
-            filter: pane.filter || '',
-            hidden: pane.hidden || [],
-            processes: pane.processes || [],
-            colorFilter: pane.colorFilter || null,
-          });
-          const previousFilterState = this.paneFilterState.get(paneId);
-          const filterChanged = currentFilterState !== previousFilterState;
-          const needsRebuild = filterChanged || this.isPaused;
+          const lines = this.getOutputLinesForPane(pane);
+          const lastRenderedLineNumber = this.paneLineCount.get(paneId) || 0;
           
-          if (needsRebuild) {
-            // Filter changed - need to rebuild all content
-            this.paneFilterState.set(paneId, currentFilterState);
-            
-            // Remove all children
-            if (scrollBox.content.children) {
-              while (scrollBox.content.children.length > 0) {
-                const child = scrollBox.content.children[0];
-                if (child && child.id) {
-                  scrollBox.content.remove(child.id);
-                } else {
-                  break;
-                }
-              }
-            }
-            
-            // Rebuild all content
-            const height = scrollBox.height || this.renderer.height - 6;
-            this.buildPaneOutput(pane, scrollBox.content, height);
-            
-            // Update line count after rebuild
-            const lines = this.getOutputLinesForPane(pane);
-            this.paneLineCount.set(paneId, lines.length);
-            
-            // Auto-scroll to bottom after filter change
-            if (!this.isPaused) {
-              scrollBox.scrollTo({ x: 0, y: Number.MAX_SAFE_INTEGER });
-            }
-          } else {
-            // No filter change - just append new lines
-            const lines = this.getOutputLinesForPane(pane);
-            const lastRenderedCount = this.paneLineCount.get(paneId) || 0;
+          // Find lines that haven't been rendered yet (based on absolute line number)
+          const newLines = lines.filter(line => line.lineNumber > lastRenderedLineNumber);
+          
+          if (newLines.length > 0) {
+            hasNewContent = true;
             
-            if (lines.length > lastRenderedCount) {
-              const newLines = lines.slice(lastRenderedCount);
+            for (let i = 0; i < newLines.length; i++) {
+              const line = newLines[i];
+              const processColor = this.processColors.get(line.process) || COLORS.text;
+              const trimmedText = line.text.trim();
+              
+              // Build content with proper template literal
+              const lineNumber = this.showLineNumbers ? String(line.lineNumber).padStart(4, ' ') : '';
+              const timestamp = this.showTimestamps ? new Date(line.timestamp).toLocaleTimeString('en-US', { hour12: false }) : '';
               
-              for (let i = 0; i < newLines.length; i++) {
-                const line = newLines[i];
-                const lineIndex = lastRenderedCount + i;
-                const processColor = this.processColors.get(line.process) || COLORS.text;
-                const trimmedText = line.text.trim();
-                
-                const outputLine = new TextRenderable(this.renderer, {
-                  id: `output-${pane.id}-${lineIndex}`,
-                  content: t`${fg(processColor)(`[${line.process}]`)} ${trimmedText}`,
-                  bg: '#000000',
-                });
-                
-                scrollBox.content.add(outputLine);
+              let content;
+              if (this.showLineNumbers && this.showTimestamps) {
+                content = t`${fg(COLORS.textDim)(lineNumber)} ${fg(COLORS.textDim)(`[${timestamp}]`)} ${fg(processColor)(`[${line.process}]`)} ${trimmedText}`;
+              } else if (this.showLineNumbers) {
+                content = t`${fg(COLORS.textDim)(lineNumber)} ${fg(processColor)(`[${line.process}]`)} ${trimmedText}`;
+              } else if (this.showTimestamps) {
+                content = t`${fg(COLORS.textDim)(`[${timestamp}]`)} ${fg(processColor)(`[${line.process}]`)} ${trimmedText}`;
+              } else {
+                content = t`${fg(processColor)(`[${line.process}]`)} ${trimmedText}`;
               }
               
-              // Update line count
-              this.paneLineCount.set(paneId, lines.length);
+              const outputLine = new TextRenderable(this.renderer, {
+                id: `output-${pane.id}-${line.lineNumber}`,
+                content: content,
+                bg: '#000000',
+              });
+              
+              scrollBox.content.add(outputLine);
               
-              // Auto-scroll to bottom if not paused
-              if (!this.isPaused) {
-                scrollBox.scrollTo({ x: 0, y: Number.MAX_SAFE_INTEGER });
+              // Remove oldest line if we exceed maxOutputLines to maintain rolling window
+              if (scrollBox.content.children && scrollBox.content.children.length > this.maxOutputLines) {
+                const oldestChild = scrollBox.content.children[0];
+                scrollBox.content.remove(oldestChild);
               }
             }
-          }
-          
-          // Update scrollbar visibility based on pause state
-          if (scrollBox.verticalScrollBar) {
-            scrollBox.verticalScrollBar.width = this.isPaused ? 1 : 0;
+            
+            // Update to track the last absolute line number we rendered
+            this.paneLineCount.set(paneId, newLines[newLines.length - 1].lineNumber);
+            
+            // Auto-scroll to bottom if not paused
+            if (!this.isPaused && scrollBox.scrollTo) {
+              scrollBox.scrollTo({ x: 0, y: Number.MAX_SAFE_INTEGER });
+            }
           }
         }
       }
@@ -1920,9 +2122,25 @@ class ProcessManager {
       
       // Trim whitespace and let text wrap naturally - ScrollBox will handle overflow
       const trimmedText = line.text.trim();
+      
+      // Build content with proper template literal
+      const lineNumber = this.showLineNumbers ? String(line.lineNumber).padStart(4, ' ') : '';
+      const timestamp = this.showTimestamps ? new Date(line.timestamp).toLocaleTimeString('en-US', { hour12: false }) : '';
+      
+      let content;
+      if (this.showLineNumbers && this.showTimestamps) {
+        content = t`${fg(COLORS.textDim)(lineNumber)} ${fg(COLORS.textDim)(`[${timestamp}]`)} ${fg(processColor)(`[${line.process}]`)} ${trimmedText}`;
+      } else if (this.showLineNumbers) {
+        content = t`${fg(COLORS.textDim)(lineNumber)} ${fg(processColor)(`[${line.process}]`)} ${trimmedText}`;
+      } else if (this.showTimestamps) {
+        content = t`${fg(COLORS.textDim)(`[${timestamp}]`)} ${fg(processColor)(`[${line.process}]`)} ${trimmedText}`;
+      } else {
+        content = t`${fg(processColor)(`[${line.process}]`)} ${trimmedText}`;
+      }
+      
       const outputLine = new TextRenderable(this.renderer, {
         id: `output-${pane.id}-${i}`,
-        content: t`${fg(processColor)(`[${line.process}]`)} ${trimmedText}`,
+        content: content,
         bg: '#000000', // Black background for pane content
       });
       
@@ -2012,10 +2230,8 @@ class ProcessManager {
     
     this.buildPaneOutput(pane, outputBox.content, height);
     
-    // Restore or set scroll position
-    setTimeout(() => {
-      if (!outputBox || !outputBox.scrollTo) return;
-      
+    // Restore or set scroll position immediately
+    if (outputBox && outputBox.scrollTo) {
       if (this.isPaused && this.paneScrollPositions.has(pane.id)) {
         // Restore saved scroll position when paused
         const savedPos = this.paneScrollPositions.get(pane.id);
@@ -2024,7 +2240,7 @@ class ProcessManager {
         // Auto-scroll to bottom when not paused
         outputBox.scrollTo({ x: 0, y: Number.MAX_SAFE_INTEGER });
       }
-    }, 0);
+    }
     
     paneContainer.add(outputBox);
     return paneContainer;
@@ -2170,15 +2386,7 @@ class ProcessManager {
       paddingLeft: 1,
     });
     
-    // Pane count indicator
-    const allPanes = getAllPaneIds(this.paneRoot);
-    if (allPanes.length > 1) {
-      const paneIndicator = new TextRenderable(this.renderer, {
-        id: 'pane-indicator',
-        content: t`${fg(COLORS.cyan)(`[${allPanes.length} panes]`)} `,
-      });
-      processBar.add(paneIndicator);
-    }
+
     
     // Add each process with checkbox showing visibility in focused pane
     const focusedPane = findPaneById(this.paneRoot, this.focusedPaneId);
@@ -2191,13 +2399,25 @@ class ProcessManager {
       const processColor = this.processColors.get(script.name) || COLORS.text;
       const isSelected = this.selectedIndex === index;
       const isVisible = this.isProcessVisibleInPane(script.name, focusedPane);
-      const checkbox = isVisible ? '[x]' : '[ ]';
       const nameColor = isSelected ? COLORS.accent : (isVisible ? processColor : COLORS.textDim);
+      const numberColor = isVisible ? processColor : COLORS.textDim;
       const indicator = isSelected ? '>' : ' ';
+      const bracketColor = isVisible ? processColor : COLORS.textDim;
+      
+      // Show number for first 9 processes
+      const numberLabel = index < 9 ? `${index + 1}` : ' ';
+      
+      // Build content - can't nest template literals, so build entire thing at once
+      let content;
+      if (isVisible) {
+        content = t`${fg(numberColor)(numberLabel)} ${fg(isSelected ? COLORS.accent : COLORS.textDim)(indicator)}${fg(bracketColor)('[')}${fg(COLORS.text)('x')}${fg(bracketColor)(']')} ${fg(statusColor)(statusIcon)} ${fg(nameColor)(script.displayName)}`;
+      } else {
+        content = t`${fg(numberColor)(numberLabel)} ${fg(isSelected ? COLORS.accent : COLORS.textDim)(indicator)}${fg(bracketColor)('[ ]')} ${fg(statusColor)(statusIcon)} ${fg(nameColor)(script.displayName)}`;
+      }
       
       const processItem = new TextRenderable(this.renderer, {
         id: `process-item-${index}`,
-        content: t`${fg(isSelected ? COLORS.accent : COLORS.textDim)(indicator)}${fg(isVisible ? COLORS.text : COLORS.textDim)(checkbox)} ${fg(nameColor)(script.displayName)} ${fg(statusColor)(statusIcon)}`,
+        content: content,
       });
       processBar.add(processItem);
     });
@@ -2268,6 +2488,17 @@ class ProcessManager {
       leftSide.add(filterIndicator);
     }
     
+    // Input mode indicator if active
+    if (this.isInputMode) {
+      const scriptName = this.scripts[this.selectedIndex]?.displayName || '';
+      const inputText = `[${scriptName}]> ${this.inputModeText}_`;
+      const inputIndicator = new TextRenderable(this.renderer, {
+        id: 'input-indicator',
+        content: t`${fg(COLORS.success)(inputText)}`,
+      });
+      leftSide.add(inputIndicator);
+    }
+    
     // Color filter indicator if active on focused pane
     if (focusedPane?.colorFilter) {
       const colorMap = {
@@ -2296,13 +2527,15 @@ class ProcessManager {
     
     const shortcuts = [
       { key: '\\', desc: 'panes', color: COLORS.cyan },
-      { key: 'spc', desc: 'toggle', color: COLORS.success },
+      { key: '1-9', desc: 'toggle', color: COLORS.success },
+      { key: 'i', desc: 'input', 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: 'o', desc: 'settings', color: COLORS.magenta },
       { key: 'q', desc: 'quit', color: COLORS.error },
     ];
     
@@ -2352,6 +2585,7 @@ async function main() {
   }
 
   const renderer = await createCliRenderer();
+  renderer.start(); // Start the automatic render loop
   const manager = new ProcessManager(renderer, scripts);
   
   // Handle cleanup on exit

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "startall",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "",
   "main": "index.js",
   "bin": {
@@ -15,7 +15,8 @@
     "demo:worker2": "node -e \"setInterval(() => console.log('Processing jobs...'), 100)\"",
     "demo:errors": "node -e \"setInterval(() => { console.log('\\x1b[32mOK: All good\\x1b[0m'); console.log('\\x1b[33mWARN: Deprecated API used\\x1b[0m'); console.log('\\x1b[31mERROR: Connection failed\\x1b[0m'); console.log('Normal log message'); }, 2000)\"",
     "demo:build": "node -e \"let i=0; setInterval(() => { i++; if(i%5===0) console.log('\\x1b[31mError: Type mismatch in file.ts:42\\x1b[0m'); else if(i%3===0) console.log('\\x1b[33mWarning: Unused variable\\x1b[0m'); else console.log('\\x1b[36mCompiling module ' + i + '...\\x1b[0m'); }, 800)\"",
-    "demo:longtext": "node -e \"setInterval(() => { console.log('\\x1b[36m[2024-01-20T12:34:56.789Z] Executing SQL query: SELECT users.id, users.name, users.email, orders.order_id, orders.total, products.name FROM users INNER JOIN orders ON users.id = orders.user_id LEFT JOIN products ON orders.product_id = products.id WHERE users.created_at > NOW() - INTERVAL 30 DAY AND orders.status = \\'completed\\' ORDER BY orders.total DESC LIMIT 100\\x1b[0m'); console.log('Fetched 42 records in 127ms'); }, 1500)\""
+    "demo:longtext": "node -e \"setInterval(() => { console.log('\\x1b[36m[2024-01-20T12:34:56.789Z] Executing SQL query: SELECT users.id, users.name, users.email, orders.order_id, orders.total, products.name FROM users INNER JOIN orders ON users.id = orders.user_id LEFT JOIN products ON orders.product_id = products.id WHERE users.created_at > NOW() - INTERVAL 30 DAY AND orders.status = \\'completed\\' ORDER BY orders.total DESC LIMIT 100\\x1b[0m'); console.log('Fetched 42 records in 127ms'); }, 1500)\"",
+    "demo:cmd": "cmd"
   },
   "keywords": [],
   "author": "",