@kolisachint/hoocode-tui 0.4.111 → 0.4.113

package/dist/tui.js

@@ -62,31 +62,54 @@ function isTermuxSession() {
  */
 export class Container {
     children = [];
+    // Flatten memo: children are always render()ed (side effects and their own
+    // caches must run), but when every child returns the same array reference as
+    // last time, the previously flattened array is returned as-is. Unchanged
+    // subtrees thus stay reference-stable all the way up, which lets the TUI
+    // root diff whole regions by identity instead of re-flattening the world.
+    renderMemo;
     addChild(component) {
         this.children.push(component);
+        this.renderMemo = undefined;
     }
     removeChild(component) {
         const index = this.children.indexOf(component);
         if (index !== -1) {
             this.children.splice(index, 1);
+            this.renderMemo = undefined;
         }
     }
     clear() {
         this.children = [];
+        this.renderMemo = undefined;
     }
     invalidate() {
+        this.renderMemo = undefined;
         for (const child of this.children) {
             child.invalidate?.();
         }
     }
     render(width) {
+        const n = this.children.length;
+        const memo = this.renderMemo;
+        const refs = new Array(n);
+        let unchanged = memo !== undefined && memo.width === width && memo.refs.length === n;
+        for (let i = 0; i < n; i++) {
+            refs[i] = this.children[i].render(width);
+            if (unchanged && refs[i] !== memo.refs[i]) {
+                unchanged = false;
+            }
+        }
+        if (unchanged) {
+            return memo.lines;
+        }
         const lines = [];
-        for (const child of this.children) {
-            const childLines = child.render(width);
+        for (const childLines of refs) {
             for (const line of childLines) {
                 lines.push(line);
             }
         }
+        this.renderMemo = { width, refs, lines };
         return lines;
     }
 }
@@ -96,7 +119,28 @@ export class Container {
 export class TUI extends Container {
     terminal;
     previousLines = [];
+    // Root flat-line cache (see the render() override): per-child line arrays,
+    // their offsets into the flat buffer, and the flat buffer itself. Active
+    // only when no overlays are up and no image has been drawn; otherwise the
+    // legacy full-flatten + full-diff path runs.
+    flatCache;
+    flatLines;
+    /** What the last render() call changed: "full" = unknown (legacy diff must
+     * scan), null = nothing, otherwise the dirty row range + previous length. */
+    lastPatch = "full";
+    /** Cursor position extracted on the last frame; reused when the dirty range
+     * shows the marker's row untouched (the marker was already stripped). */
+    lastCursorPos = undefined;
+    /** Set by render() when this frame's patches invalidate lastCursorPos: the
+     * marker's row was overwritten, or a patched-in line carries a marker. */
+    cursorRowOverwritten = false;
     previousKittyImageIds = new Set();
+    /** Flips true the first time an image line is emitted. While false no image
+     * has ever been drawn, so there are no kitty ids on screen to track and the
+     * per-frame full-buffer scan (collectKittyImageIds) is skipped entirely —
+     * the common case for a pure-text session. */
+    sawImageLine = false;
+    static EMPTY_KITTY_IDS = new Set();
     previousWidth = 0;
     previousHeight = 0;
     focusedComponent = null;
@@ -424,7 +468,24 @@ export class TUI extends Container {
             }
             this.focusedComponent.handleInput(data);
             this.requestRender();
+            // Keystroke echo should not queue behind the animation coalescing
+            // window: render the input's effect immediately instead of waiting out
+            // MIN_RENDER_INTERVAL_MS behind spinner/streaming frames.
+            this.expediteRender();
+        }
+    }
+    /** Run a requested render now, bypassing the coalescing delay. Used for
+     * input-driven frames where echo latency matters more than batching. */
+    expediteRender() {
+        if (this.stopped || !this.renderRequested)
+            return;
+        if (this.renderTimer) {
+            clearTimeout(this.renderTimer);
+            this.renderTimer = undefined;
         }
+        this.renderRequested = false;
+        this.lastRenderAt = performance.now();
+        this.doRender();
     }
     consumeCellSizeResponse(data) {
         // Response format: ESC [ 6 ; height ; width t
@@ -619,17 +680,29 @@ export class TUI extends Container {
         return result;
     }
     static SEGMENT_RESET = "\x1b[0m\x1b]8;;\x07";
-    applyLineResets(lines) {
-        const reset = TUI.SEGMENT_RESET;
-        for (let i = 0; i < lines.length; i++) {
-            const line = lines[i];
-            if (!isImageLine(line)) {
-                lines[i] = normalizeTerminalOutput(line) + reset;
-            }
+    /**
+     * Append the per-line style/hyperlink reset (and normalize Thai/Lao AM
+     * vowels) at the moment a line is written to the terminal. This is
+     * deliberately kept OFF the cached/diffed line arrays: leaf components cache
+     * their lines without the reset, so leaving `newLines`/`previousLines`
+     * un-reset keeps unchanged lines reference-stable frame to frame. The
+     * differential compare then short-circuits on identity for every unchanged
+     * line instead of allocating a fresh reset-appended string per line and
+     * doing a full content compare across the whole transcript every frame.
+     * Image lines carry no trailing style and are emitted verbatim.
+     */
+    emitLine(line) {
+        if (isImageLine(line)) {
+            this.sawImageLine = true;
+            return line;
         }
-        return lines;
+        return normalizeTerminalOutput(line) + TUI.SEGMENT_RESET;
     }
     collectKittyImageIds(lines) {
+        // No image has ever been drawn: nothing on screen carries a kitty id, so
+        // skip the full-buffer scan and the Set allocation.
+        if (!this.sawImageLine)
+            return TUI.EMPTY_KITTY_IDS;
         const ids = new Set();
         for (const line of lines) {
             for (const id of extractKittyImageIds(line)) {
@@ -646,6 +719,10 @@ export class TUI extends Container {
         return buffer;
     }
     expandLastChangedForKittyImages(firstChanged, lastChanged) {
+        // No image ever drawn: nothing to expand over, skip the scan (also,
+        // on patched frames previousLines is not the previous content).
+        if (!this.sawImageLine)
+            return lastChanged;
         let expandedLastChanged = lastChanged;
         for (let i = firstChanged; i < this.previousLines.length; i++) {
             if (extractKittyImageIds(this.previousLines[i]).length > 0) {
@@ -730,6 +807,124 @@ export class TUI extends Container {
         }
         return null;
     }
+    /**
+     * Root flatten with patch tracking. Children stay memoized (Container), so
+     * a frame where only one region changed patches that region into the
+     * persistent flat buffer and reports the dirty row range via lastPatch —
+     * doRender then skips the whole-transcript diff. Falls back to a fresh
+     * flatten (lastPatch = "full") when overlays are up, an image has been
+     * drawn (kitty bookkeeping needs true previous content), the width changed,
+     * or the child list changed.
+     */
+    render(width) {
+        const cacheAllowed = this.overlayStack.length === 0 && !this.sawImageLine;
+        const cache = this.flatCache;
+        if (!cacheAllowed || !cache || cache.width !== width || cache.refs.length !== this.children.length) {
+            const n = this.children.length;
+            const refs = new Array(n);
+            const offsets = new Array(n);
+            const flat = [];
+            for (let i = 0; i < n; i++) {
+                refs[i] = this.children[i].render(width);
+                offsets[i] = flat.length;
+                for (const line of refs[i])
+                    flat.push(line);
+            }
+            if (cacheAllowed) {
+                this.flatCache = { width, refs, offsets };
+                this.flatLines = flat;
+            }
+            else {
+                this.flatCache = undefined;
+                this.flatLines = undefined;
+            }
+            this.lastPatch = "full";
+            return flat;
+        }
+        let flat = this.flatLines;
+        const prevLength = flat.length;
+        let low = Infinity;
+        let high = -1;
+        let delta = 0;
+        // Cursor bookkeeping: the marker was stripped out of the persistent flat
+        // when last extracted, so the cached position stays valid until the row
+        // it lives on is overwritten by re-imported child content — and it
+        // shifts when content above it grows or shrinks.
+        let cp = this.lastCursorPos ?? null;
+        this.cursorRowOverwritten = false;
+        for (let i = 0; i < this.children.length; i++) {
+            const r = this.children[i].render(width);
+            const old = cache.refs[i];
+            if (r === old)
+                continue;
+            const off = cache.offsets[i] + delta;
+            if (r.length === old.length) {
+                for (let k = 0; k < r.length; k++) {
+                    if (old[k] !== r[k]) {
+                        const row = off + k;
+                        flat[row] = r[k];
+                        if (row < low)
+                            low = row;
+                        if (row > high)
+                            high = row;
+                        // Overwrote the marker's row, or imported a line carrying a
+                        // (possibly relocated) marker: position must be re-extracted.
+                        if (cp && cp.row === row)
+                            this.cursorRowOverwritten = true;
+                        if (r[k].includes(CURSOR_MARKER))
+                            this.cursorRowOverwritten = true;
+                    }
+                }
+            }
+            else {
+                // Length changed: find the first differing line, then splice the
+                // child's new lines in. Everything from there down shifts rows, so
+                // the dirty range extends to the end (positional diff semantics).
+                let p = 0;
+                const minLen = Math.min(old.length, r.length);
+                while (p < minLen && old[p] === r[p])
+                    p++;
+                flat = flat.slice(0, off + p).concat(r.slice(p), flat.slice(off + old.length));
+                if (off + p < low)
+                    low = off + p;
+                if (cp) {
+                    if (cp.row >= off + old.length) {
+                        // Below the replaced region: shifts with it.
+                        cp = { row: cp.row + (r.length - old.length), col: cp.col };
+                    }
+                    else if (cp.row >= off + p) {
+                        // Inside the replaced region: fresh content, re-extract.
+                        this.cursorRowOverwritten = true;
+                    }
+                }
+                if (!this.cursorRowOverwritten) {
+                    for (let k = p; k < r.length; k++) {
+                        if (r[k].includes(CURSOR_MARKER)) {
+                            this.cursorRowOverwritten = true;
+                            break;
+                        }
+                    }
+                }
+                delta += r.length - old.length;
+            }
+            cache.refs[i] = r;
+        }
+        this.lastCursorPos = cp;
+        const spliced = flat !== this.flatLines;
+        if (spliced) {
+            let acc = 0;
+            for (let i = 0; i < cache.refs.length; i++) {
+                cache.offsets[i] = acc;
+                acc += cache.refs[i].length;
+            }
+            this.flatLines = flat;
+            // Rows below the first splice all shifted; positional diff semantics
+            // mean everything from there to the end must be treated as dirty.
+            high = Math.max(prevLength - 1, flat.length - 1);
+        }
+        this.lastPatch = low === Infinity && high === -1 ? null : { low: low === Infinity ? 0 : low, high, prevLength };
+        return flat;
+    }
     doRender() {
         if (this.stopped)
             return;
@@ -746,15 +941,39 @@ export class TUI extends Container {
             const targetScreenRow = targetRow - viewportTop;
             return targetScreenRow - currentScreenRow;
         };
-        // Render all components to get new lines
+        // Render all components to get new lines. The root render() reports what
+        // it changed via lastPatch; consume it here (it is per-frame state).
         let newLines = this.render(width);
+        const patch = this.lastPatch;
+        this.lastPatch = "full";
         // Composite overlays into the rendered lines (before differential compare)
         if (this.overlayStack.length > 0) {
             newLines = this.compositeOverlays(newLines, width, height);
         }
-        // Extract cursor position before applying line resets (marker must be found first)
-        const cursorPos = this.extractCursorPosition(newLines, height);
-        newLines = this.applyLineResets(newLines);
+        // Extract cursor position before the marker could be obscured. The reset
+        // is applied per-line at write time (see emitLine), so newLines stays the
+        // un-reset, reference-stable output of the component tree from here on.
+        // On patched frames the persistent flat buffer already had the marker
+        // stripped; the cached position (row-shifted by render()) stays valid
+        // unless its row was overwritten by re-imported child content, or a
+        // marker could have newly appeared in changed content.
+        let cursorPos;
+        if (patch !== "full" && this.lastCursorPos !== undefined) {
+            const cp = this.lastCursorPos;
+            if (cp !== null && !this.cursorRowOverwritten) {
+                cursorPos = cp;
+            }
+            else if (patch === null) {
+                cursorPos = cp;
+            }
+            else {
+                cursorPos = this.extractCursorPosition(newLines, height);
+            }
+        }
+        else {
+            cursorPos = this.extractCursorPosition(newLines, height);
+        }
+        this.lastCursorPos = cursorPos;
         // Helper to clear scrollback and viewport and render all new lines
         const fullRender = (clear) => {
             this.fullRedrawCount += 1;
@@ -766,7 +985,7 @@ export class TUI extends Container {
             for (let i = 0; i < newLines.length; i++) {
                 if (i > 0)
                     buffer += "\r\n";
-                buffer += newLines[i];
+                buffer += this.emitLine(newLines[i]);
             }
             buffer += "\x1b[?2026l"; // End synchronized output
             this.terminal.write(buffer);
@@ -824,31 +1043,52 @@ export class TUI extends Container {
             fullRender(true);
             return;
         }
-        // Find first and last changed lines
-        let firstChanged = -1;
-        let lastChanged = -1;
-        const maxLines = Math.max(newLines.length, this.previousLines.length);
-        for (let i = 0; i < maxLines; i++) {
-            const oldLine = i < this.previousLines.length ? this.previousLines[i] : "";
-            const newLine = i < newLines.length ? newLines[i] : "";
-            if (oldLine !== newLine) {
-                if (firstChanged === -1) {
-                    firstChanged = i;
+        // Find first and last changed lines. When the root render() produced a
+        // patch report the dirty range is already known and the whole-buffer scan
+        // is skipped. On patched frames previousLines is the same in-place-updated
+        // array as newLines, so the previous length must come from the report.
+        let firstChanged;
+        let lastChanged;
+        let prevLineCount;
+        if (patch !== "full") {
+            if (patch === null) {
+                prevLineCount = newLines.length;
+                firstChanged = -1;
+                lastChanged = -1;
+            }
+            else {
+                prevLineCount = patch.prevLength;
+                firstChanged = patch.low;
+                lastChanged = patch.high;
+            }
+        }
+        else {
+            prevLineCount = this.previousLines.length;
+            firstChanged = -1;
+            lastChanged = -1;
+            const maxLines = Math.max(newLines.length, prevLineCount);
+            for (let i = 0; i < maxLines; i++) {
+                const oldLine = i < prevLineCount ? this.previousLines[i] : "";
+                const newLine = i < newLines.length ? newLines[i] : "";
+                if (oldLine !== newLine) {
+                    if (firstChanged === -1) {
+                        firstChanged = i;
+                    }
+                    lastChanged = i;
                 }
-                lastChanged = i;
             }
         }
-        const appendedLines = newLines.length > this.previousLines.length;
+        const appendedLines = newLines.length > prevLineCount;
         if (appendedLines) {
             if (firstChanged === -1) {
-                firstChanged = this.previousLines.length;
+                firstChanged = prevLineCount;
             }
             lastChanged = newLines.length - 1;
         }
         if (firstChanged !== -1) {
             lastChanged = this.expandLastChangedForKittyImages(firstChanged, lastChanged);
         }
-        const appendStart = appendedLines && firstChanged === this.previousLines.length && firstChanged > 0;
+        const appendStart = appendedLines && firstChanged === prevLineCount && firstChanged > 0;
         // No changes - but still need to update hardware cursor position if it moved
         if (firstChanged === -1) {
             this.positionHardwareCursor(cursorPos, newLines.length);
@@ -858,7 +1098,7 @@ export class TUI extends Container {
         }
         // All changes are in deleted lines (nothing to render, just clear)
         if (firstChanged >= newLines.length) {
-            if (this.previousLines.length > newLines.length) {
+            if (prevLineCount > newLines.length) {
                 let buffer = "\x1b[?2026h";
                 buffer += this.deleteChangedKittyImages(firstChanged, lastChanged);
                 // Move to end of new content (clamp to 0 for empty content)
@@ -875,7 +1115,7 @@ export class TUI extends Container {
                     buffer += `\x1b[${-lineDiff}A`;
                 buffer += "\r";
                 // Clear extra lines without scrolling
-                const extraLines = this.previousLines.length - newLines.length;
+                const extraLines = prevLineCount - newLines.length;
                 if (extraLines > height) {
                     logRedraw(`extraLines > height (${extraLines} > ${height})`);
                     fullRender(true);
@@ -975,20 +1215,22 @@ export class TUI extends Container {
                 ].join("\n");
                 throw new Error(errorMsg);
             }
-            buffer += line;
+            if (isImage)
+                this.sawImageLine = true;
+            buffer += isImage ? line : normalizeTerminalOutput(line) + TUI.SEGMENT_RESET;
         }
         // Track where cursor ended up after rendering
         let finalCursorRow = renderEnd;
         // If we had more lines before, clear them and move cursor back
-        if (this.previousLines.length > newLines.length) {
+        if (prevLineCount > newLines.length) {
             // Move to end of new content first if we stopped before it
             if (renderEnd < newLines.length - 1) {
                 const moveDown = newLines.length - 1 - renderEnd;
                 buffer += `\x1b[${moveDown}B`;
                 finalCursorRow = newLines.length - 1;
             }
-            const extraLines = this.previousLines.length - newLines.length;
-            for (let i = newLines.length; i < this.previousLines.length; i++) {
+            const extraLines = prevLineCount - newLines.length;
+            for (let i = newLines.length; i < prevLineCount; i++) {
                 buffer += "\r\n\x1b[2K";
             }
             // Move cursor back to end of new content