@draht/tui 2026.4.5 → 2026.4.23

package/dist/tui.js

@@ -4,6 +4,7 @@
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
+import { performance } from "node:perf_hooks";
 import { isKeyRelease, matchesKey } from "./keys.js";
 import { getCapabilities, isImageLine, setCellDimensions } from "./terminal-image.js";
 import { extractSegments, sliceByColumn, sliceWithWidth, visibleWidth } from "./utils.js";
@@ -60,7 +61,10 @@ export class Container {
     render(width) {
         const lines = [];
         for (const child of this.children) {
-            lines.push(...child.render(width));
+            const childLines = child.render(width);
+            for (const line of childLines) {
+                lines.push(line);
+            }
         }
         return lines;
     }
@@ -78,10 +82,11 @@ export class TUI extends Container {
     /** Global callback for debug key (Shift+Ctrl+D). Called before input is forwarded to focused component. */
     onDebug;
     renderRequested = false;
+    renderTimer;
+    lastRenderAt = 0;
+    static MIN_RENDER_INTERVAL_MS = 16;
     cursorRow = 0; // Logical cursor row (end of rendered content)
     hardwareCursorRow = 0; // Actual terminal cursor row (may differ due to IME positioning)
-    inputBuffer = ""; // Buffer for parsing terminal responses
-    cellSizeQueryPending = false;
     showHardwareCursor = process.env.PI_HARDWARE_CURSOR === "1";
     clearOnShrink = process.env.PI_CLEAR_ON_SHRINK === "1"; // Clear empty rows when content shrinks (default: off)
     maxLinesRendered = 0; // Track terminal's working area (max lines ever rendered)
@@ -277,11 +282,14 @@ export class TUI extends Container {
         }
         // Query terminal for cell size in pixels: CSI 16 t
         // Response format: CSI 6 ; height ; width t
-        this.cellSizeQueryPending = true;
         this.terminal.write("\x1b[16t");
     }
     stop() {
         this.stopped = true;
+        if (this.renderTimer) {
+            clearTimeout(this.renderTimer);
+            this.renderTimer = undefined;
+        }
         // Move cursor to the end of the content to prevent overwriting/artifacts on exit
         if (this.previousLines.length > 0) {
             const targetRow = this.previousLines.length; // Line after the last content
@@ -306,14 +314,44 @@ export class TUI extends Container {
             this.hardwareCursorRow = 0;
             this.maxLinesRendered = 0;
             this.previousViewportTop = 0;
+            if (this.renderTimer) {
+                clearTimeout(this.renderTimer);
+                this.renderTimer = undefined;
+            }
+            this.renderRequested = true;
+            process.nextTick(() => {
+                if (this.stopped || !this.renderRequested) {
+                    return;
+                }
+                this.renderRequested = false;
+                this.lastRenderAt = performance.now();
+                this.doRender();
+            });
+            return;
         }
         if (this.renderRequested)
             return;
         this.renderRequested = true;
-        process.nextTick(() => {
+        process.nextTick(() => this.scheduleRender());
+    }
+    scheduleRender() {
+        if (this.stopped || this.renderTimer || !this.renderRequested) {
+            return;
+        }
+        const elapsed = performance.now() - this.lastRenderAt;
+        const delay = Math.max(0, TUI.MIN_RENDER_INTERVAL_MS - elapsed);
+        this.renderTimer = setTimeout(() => {
+            this.renderTimer = undefined;
+            if (this.stopped || !this.renderRequested) {
+                return;
+            }
             this.renderRequested = false;
+            this.lastRenderAt = performance.now();
             this.doRender();
-        });
+            if (this.renderRequested) {
+                this.scheduleRender();
+            }
+        }, delay);
     }
     handleInput(data) {
         if (this.inputListeners.size > 0) {
@@ -332,13 +370,9 @@ export class TUI extends Container {
             }
             data = current;
         }
-        // If we're waiting for cell size response, buffer input and parse
-        if (this.cellSizeQueryPending) {
-            this.inputBuffer += data;
-            const filtered = this.parseCellSizeResponse();
-            if (filtered.length === 0)
-                return;
-            data = filtered;
+        // Consume terminal cell size responses without blocking unrelated input.
+        if (this.consumeCellSizeResponse(data)) {
+            return;
         }
         // Global debug key handler (Shift+Ctrl+D)
         if (matchesKey(data, "shift+ctrl+d") && this.onDebug) {
@@ -370,41 +404,22 @@ export class TUI extends Container {
             this.requestRender();
         }
     }
-    parseCellSizeResponse() {
+    consumeCellSizeResponse(data) {
         // Response format: ESC [ 6 ; height ; width t
-        // Match the response pattern
-        const responsePattern = /\x1b\[6;(\d+);(\d+)t/;
-        const match = this.inputBuffer.match(responsePattern);
-        if (match) {
-            const heightPx = parseInt(match[1], 10);
-            const widthPx = parseInt(match[2], 10);
-            if (heightPx > 0 && widthPx > 0) {
-                setCellDimensions({ widthPx, heightPx });
-                // Invalidate all components so images re-render with correct dimensions
-                this.invalidate();
-                this.requestRender();
-            }
-            // Remove the response from buffer
-            this.inputBuffer = this.inputBuffer.replace(responsePattern, "");
-            this.cellSizeQueryPending = false;
-        }
-        // Check if we have a partial cell size response starting (wait for more data)
-        // Patterns that could be incomplete cell size response: \x1b, \x1b[, \x1b[6, \x1b[6;...(no t yet)
-        const partialCellSizePattern = /\x1b(\[6?;?[\d;]*)?$/;
-        if (partialCellSizePattern.test(this.inputBuffer)) {
-            // Check if it's actually a complete different escape sequence (ends with a letter)
-            // Cell size response ends with 't', Kitty keyboard ends with 'u', arrows end with A-D, etc.
-            const lastChar = this.inputBuffer[this.inputBuffer.length - 1];
-            if (!/[a-zA-Z~]/.test(lastChar)) {
-                // Doesn't end with a terminator, might be incomplete - wait for more
-                return "";
-            }
+        const match = data.match(/^\x1b\[6;(\d+);(\d+)t$/);
+        if (!match) {
+            return false;
         }
-        // No cell size response found, return buffered data as user input
-        const result = this.inputBuffer;
-        this.inputBuffer = "";
-        this.cellSizeQueryPending = false; // Give up waiting
-        return result;
+        const heightPx = parseInt(match[1], 10);
+        const widthPx = parseInt(match[2], 10);
+        if (heightPx <= 0 || widthPx <= 0) {
+            return true;
+        }
+        setCellDimensions({ widthPx, heightPx });
+        // Invalidate all components so images re-render with correct dimensions.
+        this.invalidate();
+        this.requestRender();
+        return true;
     }
     /**
      * Resolve overlay layout from options.
@@ -661,8 +676,11 @@ export class TUI extends Container {
             return;
         const width = this.terminal.columns;
         const height = this.terminal.rows;
-        let viewportTop = Math.max(0, this.maxLinesRendered - height);
-        let prevViewportTop = this.previousViewportTop;
+        const widthChanged = this.previousWidth !== 0 && this.previousWidth !== width;
+        const heightChanged = this.previousHeight !== 0 && this.previousHeight !== height;
+        const previousBufferLength = this.previousHeight > 0 ? this.previousViewportTop + this.previousHeight : height;
+        let prevViewportTop = heightChanged ? Math.max(0, previousBufferLength - height) : this.previousViewportTop;
+        let viewportTop = prevViewportTop;
         let hardwareCursorRow = this.hardwareCursorRow;
         const computeLineDiff = (targetRow) => {
             const currentScreenRow = hardwareCursorRow - prevViewportTop;
@@ -678,9 +696,6 @@ export class TUI extends Container {
         // Extract cursor position before applying line resets (marker must be found first)
         const cursorPos = this.extractCursorPosition(newLines, height);
         newLines = this.applyLineResets(newLines);
-        // Width or height changed - need full re-render
-        const widthChanged = this.previousWidth !== 0 && this.previousWidth !== width;
-        const heightChanged = this.previousHeight !== 0 && this.previousHeight !== height;
         // Helper to clear scrollback and viewport and render all new lines
         const fullRender = (clear) => {
             this.fullRedrawCount += 1;
@@ -703,7 +718,8 @@ export class TUI extends Container {
             else {
                 this.maxLinesRendered = Math.max(this.maxLinesRendered, newLines.length);
             }
-            this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
+            const bufferLength = Math.max(height, newLines.length);
+            this.previousViewportTop = Math.max(0, bufferLength - height);
             this.positionHardwareCursor(cursorPos, newLines.length);
             this.previousLines = newLines;
             this.previousWidth = width;
@@ -770,7 +786,7 @@ export class TUI extends Container {
         // No changes - but still need to update hardware cursor position if it moved
         if (firstChanged === -1) {
             this.positionHardwareCursor(cursorPos, newLines.length);
-            this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
+            this.previousViewportTop = prevViewportTop;
             this.previousHeight = height;
             return;
         }
@@ -780,6 +796,11 @@ export class TUI extends Container {
                 let buffer = "\x1b[?2026h";
                 // Move to end of new content (clamp to 0 for empty content)
                 const targetRow = Math.max(0, newLines.length - 1);
+                if (targetRow < prevViewportTop) {
+                    logRedraw(`deleted lines moved viewport up (${targetRow} < ${prevViewportTop})`);
+                    fullRender(true);
+                    return;
+                }
                 const lineDiff = computeLineDiff(targetRow);
                 if (lineDiff > 0)
                     buffer += `\x1b[${lineDiff}B`;
@@ -813,15 +834,13 @@ export class TUI extends Container {
             this.previousLines = newLines;
             this.previousWidth = width;
             this.previousHeight = height;
-            this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
+            this.previousViewportTop = prevViewportTop;
             return;
         }
-        // Check if firstChanged is above what was previously visible
-        // Use previousLines.length (not maxLinesRendered) to avoid false positives after content shrinks
-        const previousContentViewportTop = Math.max(0, this.previousLines.length - height);
-        if (firstChanged < previousContentViewportTop) {
-            // First change is above previous viewport - need full re-render
-            logRedraw(`firstChanged < viewportTop (${firstChanged} < ${previousContentViewportTop})`);
+        // Differential rendering can only touch what was actually visible.
+        // If the first changed line is above the previous viewport, we need a full redraw.
+        if (firstChanged < prevViewportTop) {
+            logRedraw(`firstChanged < viewportTop (${firstChanged} < ${prevViewportTop})`);
             fullRender(true);
             return;
         }
@@ -943,7 +962,7 @@ export class TUI extends Container {
         this.hardwareCursorRow = finalCursorRow;
         // Track terminal's working area (grows but doesn't shrink unless cleared)
         this.maxLinesRendered = Math.max(this.maxLinesRendered, newLines.length);
-        this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
+        this.previousViewportTop = Math.max(prevViewportTop, finalCursorRow - height + 1);
         // Position hardware cursor for IME
         this.positionHardwareCursor(cursorPos, newLines.length);
         this.previousLines = newLines;