startall 0.0.10 → 0.0.12

package/index.js

@@ -328,6 +328,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
@@ -357,6 +358,10 @@ class ProcessManager {
     this.splitMode = false;  // Whether waiting for split command after Ctrl+b
     this.showSplitMenu = false;  // Whether to show the command palette
     this.splitMenuIndex = 0;  // Selected item in split menu
+    this.paneScrollPositions = new Map();  // Store scroll positions per pane ID
+    this.paneScrollBoxes = new Map();  // Store ScrollBox references per pane ID
+    this.paneFilterState = new Map();  // Track filter state per pane to detect changes
+    this.paneLineCount = new Map();  // Track how many lines we've rendered per pane
     
     // Assign colors to each script
     this.processColors = new Map();
@@ -730,6 +735,7 @@ class ProcessManager {
       process: processName,
       text,
       timestamp: Date.now(),
+      lineNumber: ++this.totalLinesReceived,  // Track absolute line number
     });
     
     if (this.outputLines.length > this.maxOutputLines) {
@@ -744,13 +750,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) {
@@ -1811,9 +1814,58 @@ class ProcessManager {
   }
   
   updateRunningUI() {
-    // Just rebuild the entire UI - simpler and more reliable
-    // OpenTUI doesn't have great incremental update support anyway
-    this.buildRunningUI();
+    // Update existing panes incrementally, or rebuild if needed
+    if (this.paneScrollBoxes.size > 0) {
+      // 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) {
+          const lines = this.getOutputLinesForPane(pane);
+          const lastRenderedLineNumber = 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;
+            
+            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();
+              const lineNumber = String(line.lineNumber).padStart(4, ' ');
+              
+              const outputLine = new TextRenderable(this.renderer, {
+                id: `output-${pane.id}-${line.lineNumber}`,
+                content: t`${fg(COLORS.textDim)(lineNumber)} ${fg(processColor)(`[${line.process}]`)} ${trimmedText}`,
+                bg: '#000000',
+              });
+              
+              scrollBox.content.add(outputLine);
+              
+              // 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 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 });
+            }
+          }
+        }
+      }
+    } else {
+      // First time or no panes exist - do full rebuild
+      this.buildRunningUI();
+    }
   }
   
   // Build a single pane's output area
@@ -1821,36 +1873,25 @@ class ProcessManager {
     const isFocused = pane.id === this.focusedPaneId;
     const lines = this.getOutputLinesForPane(pane);
     
-    // Calculate visible lines - use global pause state
-    const outputHeight = Math.max(3, height - 2);
-    let linesToShow = this.isPaused ? lines : lines.slice(-outputHeight);
+    // Don't slice - show all lines and let ScrollBox handle scrolling
+    const linesToShow = lines;
     
-    // Add lines in reverse order (newest first)
-    for (let i = linesToShow.length - 1; i >= 0; i--) {
+    // Add lines (oldest first, so newest is at bottom)
+    for (let i = 0; i < linesToShow.length; i++) {
       const line = linesToShow[i];
       const processColor = this.processColors.get(line.process) || COLORS.text;
       
-      // No truncation - let OpenTUI handle text wrapping naturally
+      // Trim whitespace and let text wrap naturally - ScrollBox will handle overflow
+      const trimmedText = line.text.trim();
+      const lineNumber = String(i + 1).padStart(4, ' ');
       const outputLine = new TextRenderable(this.renderer, {
         id: `output-${pane.id}-${i}`,
-        content: t`${fg(processColor)(`[${line.process}]`)} ${line.text}`,
+        content: t`${fg(COLORS.textDim)(lineNumber)} ${fg(processColor)(`[${line.process}]`)} ${trimmedText}`,
         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: ' ',
-        bg: '#000000', // Black background for empty lines
-      });
-      
-      container.add(emptyLine);
-    }
   }
   
   // Count how many vertical panes exist (for width calculation)
@@ -1900,22 +1941,52 @@ class ProcessManager {
       backgroundColor: '#000000', // Black background for pane container
     });
     
-    // Output content - use BoxRenderable that fills remaining space
+    // Output content - use ScrollBox to handle text wrapping properly
     // 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, {
+    const outputBox = new ScrollBoxRenderable(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
+      height: height,
+      scrollX: false, // Disable horizontal scrollbar entirely
+      scrollY: true,  // Enable vertical scrolling
+      focusable: true, // Enable mouse interactions and keyboard scrolling
+      style: {
+        rootOptions: {
+          flexGrow: 1,
+          flexShrink: 1,
+          flexBasis: 0,
+          paddingLeft: 1,
+          backgroundColor: '#000000',
+        },
+        contentOptions: {
+          backgroundColor: '#000000',
+          width: '100%', // Fill container width for proper text wrapping
+        },
+      },
     });
     
-    this.buildPaneOutput(pane, outputBox, height);
+    // Show scrollbar when paused, hide when not paused
+    if (outputBox.verticalScrollBar) {
+      outputBox.verticalScrollBar.width = this.isPaused ? 1 : 0;
+    }
+    
+    // Store ScrollBox reference for this pane
+    this.paneScrollBoxes.set(pane.id, outputBox);
+    
+    this.buildPaneOutput(pane, outputBox.content, height);
+    
+    // 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);
+        outputBox.scrollTo(savedPos);
+      } else if (!this.isPaused) {
+        // Auto-scroll to bottom when not paused
+        outputBox.scrollTo({ x: 0, y: Number.MAX_SAFE_INTEGER });
+      }
+    }
     
     paneContainer.add(outputBox);
     return paneContainer;
@@ -2011,6 +2082,16 @@ class ProcessManager {
   }
   
   buildRunningUI() {
+    // Save scroll positions before destroying
+    for (const [paneId, scrollBox] of this.paneScrollBoxes.entries()) {
+      if (scrollBox) {
+        this.paneScrollPositions.set(paneId, {
+          x: scrollBox.scrollLeft || 0,
+          y: scrollBox.scrollTop || 0,
+        });
+      }
+    }
+    
     // Remove old containers if they exist - use destroyRecursively to clean up all children
     if (this.selectionContainer) {
       this.renderer.root.remove(this.selectionContainer);
@@ -2029,8 +2110,9 @@ class ProcessManager {
       this.runningContainer.destroyRecursively();
       this.runningContainer = null;
     }
-    // Clear outputBox reference since it was destroyed with runningContainer
+    // Clear outputBox reference and scrollbox map since they were destroyed
     this.outputBox = null;
+    this.paneScrollBoxes.clear();
     
     // Create main container - full screen with black background
     const mainContainer = new BoxRenderable(this.renderer, {
@@ -2232,6 +2314,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.10",
+  "version": "0.0.12",
   "description": "",
   "main": "index.js",
   "bin": {