phi-code-tui 0.56.3 → 0.74.1

package/dist/tui.js

@@ -4,9 +4,31 @@
 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";
+import { deleteKittyImage, getCapabilities, isImageLine, setCellDimensions } from "./terminal-image.js";
+import { extractSegments, normalizeTerminalOutput, sliceByColumn, sliceWithWidth, visibleWidth } from "./utils.js";
+const KITTY_SEQUENCE_PREFIX = "\x1b_G";
+function extractKittyImageIds(line) {
+    const sequenceStart = line.indexOf(KITTY_SEQUENCE_PREFIX);
+    if (sequenceStart === -1)
+        return [];
+    const paramsStart = sequenceStart + KITTY_SEQUENCE_PREFIX.length;
+    const paramsEnd = line.indexOf(";", paramsStart);
+    if (paramsEnd === -1)
+        return [];
+    const params = line.slice(paramsStart, paramsEnd);
+    for (const param of params.split(",")) {
+        const [key, value] = param.split("=", 2);
+        if (key !== "i" || value === undefined)
+            continue;
+        const id = Number(value);
+        if (Number.isInteger(id) && id > 0 && id <= 0xffffffff) {
+            return [id];
+        }
+    }
+    return [];
+}
 /** Type guard to check if a component implements Focusable */
 export function isFocusable(component) {
     return component !== null && "focused" in component;
@@ -32,13 +54,14 @@ function parseSizeValue(value, referenceSize) {
     }
     return undefined;
 }
+function isTermuxSession() {
+    return Boolean(process.env.TERMUX_VERSION);
+}
 /**
  * Container - a component that contains other components
  */
 export class Container {
-    constructor() {
-        this.children = [];
-    }
+    children = [];
     addChild(component) {
         this.children.push(component);
     }
@@ -59,7 +82,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;
     }
@@ -68,26 +94,32 @@ export class Container {
  * TUI - Main class for managing terminal UI with differential rendering
  */
 export class TUI extends Container {
+    terminal;
+    previousLines = [];
+    previousKittyImageIds = new Set();
+    previousWidth = 0;
+    previousHeight = 0;
+    focusedComponent = null;
+    inputListeners = new Set();
+    /** 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)
+    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)
+    previousViewportTop = 0; // Track previous viewport top for resize-aware cursor moves
+    fullRedrawCount = 0;
+    stopped = false;
+    // Overlay stack for modal components rendered on top of base content
+    focusOrderCounter = 0;
+    overlayStack = [];
     constructor(terminal, showHardwareCursor) {
         super();
-        this.previousLines = [];
-        this.previousWidth = 0;
-        this.previousHeight = 0;
-        this.focusedComponent = null;
-        this.inputListeners = new Set();
-        this.renderRequested = false;
-        this.cursorRow = 0; // Logical cursor row (end of rendered content)
-        this.hardwareCursorRow = 0; // Actual terminal cursor row (may differ due to IME positioning)
-        this.inputBuffer = ""; // Buffer for parsing terminal responses
-        this.cellSizeQueryPending = false;
-        this.showHardwareCursor = process.env.PI_HARDWARE_CURSOR === "1";
-        this.clearOnShrink = process.env.PI_CLEAR_ON_SHRINK === "1"; // Clear empty rows when content shrinks (default: off)
-        this.maxLinesRendered = 0; // Track terminal's working area (max lines ever rendered)
-        this.previousViewportTop = 0; // Track previous viewport top for resize-aware cursor moves
-        this.fullRedrawCount = 0;
-        this.stopped = false;
-        // Overlay stack for modal components rendered on top of base content
-        this.overlayStack = [];
         this.terminal = terminal;
         if (showHardwareCursor !== undefined) {
             this.showHardwareCursor = showHardwareCursor;
@@ -135,10 +167,16 @@ export class TUI extends Container {
      * Returns a handle to control the overlay's visibility.
      */
     showOverlay(component, options) {
-        const entry = { component, options, preFocus: this.focusedComponent, hidden: false };
+        const entry = {
+            component,
+            options,
+            preFocus: this.focusedComponent,
+            hidden: false,
+            focusOrder: ++this.focusOrderCounter,
+        };
         this.overlayStack.push(entry);
         // Only focus if overlay is actually visible
-        if (this.isOverlayVisible(entry)) {
+        if (!options?.nonCapturing && this.isOverlayVisible(entry)) {
             this.setFocus(component);
         }
         this.terminal.hideCursor();
@@ -173,13 +211,31 @@ export class TUI extends Container {
                 }
                 else {
                     // Restore focus to this overlay when showing (if it's actually visible)
-                    if (this.isOverlayVisible(entry)) {
+                    if (!options?.nonCapturing && this.isOverlayVisible(entry)) {
+                        entry.focusOrder = ++this.focusOrderCounter;
                         this.setFocus(component);
                     }
                 }
                 this.requestRender();
             },
             isHidden: () => entry.hidden,
+            focus: () => {
+                if (!this.overlayStack.includes(entry) || !this.isOverlayVisible(entry))
+                    return;
+                if (this.focusedComponent !== component) {
+                    this.setFocus(component);
+                }
+                entry.focusOrder = ++this.focusOrderCounter;
+                this.requestRender();
+            },
+            unfocus: () => {
+                if (this.focusedComponent !== component)
+                    return;
+                const topVisible = this.getTopmostVisibleOverlay();
+                this.setFocus(topVisible && topVisible !== entry ? topVisible.component : entry.preFocus);
+                this.requestRender();
+            },
+            isFocused: () => this.focusedComponent === component,
         };
     }
     /** Hide the topmost overlay and restore previous focus. */
@@ -187,9 +243,11 @@ export class TUI extends Container {
         const overlay = this.overlayStack.pop();
         if (!overlay)
             return;
-        // Find topmost visible overlay, or fall back to preFocus
-        const topVisible = this.getTopmostVisibleOverlay();
-        this.setFocus(topVisible?.component ?? overlay.preFocus);
+        if (this.focusedComponent === overlay.component) {
+            // Find topmost visible overlay, or fall back to preFocus
+            const topVisible = this.getTopmostVisibleOverlay();
+            this.setFocus(topVisible?.component ?? overlay.preFocus);
+        }
         if (this.overlayStack.length === 0)
             this.terminal.hideCursor();
         this.requestRender();
@@ -207,9 +265,11 @@ export class TUI extends Container {
         }
         return true;
     }
-    /** Find the topmost visible overlay, if any */
+    /** Find the topmost visible capturing overlay, if any */
     getTopmostVisibleOverlay() {
         for (let i = this.overlayStack.length - 1; i >= 0; i--) {
+            if (this.overlayStack[i].options?.nonCapturing)
+                continue;
             if (this.isOverlayVisible(this.overlayStack[i])) {
                 return this.overlayStack[i];
             }
@@ -244,11 +304,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
@@ -273,14 +336,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) {
@@ -299,13 +392,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) {
@@ -337,41 +426,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 "";
-            }
-        }
-        // 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 match = data.match(/^\x1b\[6;(\d+);(\d+)t$/);
+        if (!match) {
+            return false;
+        }
+        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.
@@ -499,7 +569,7 @@ export class TUI extends Container {
                 return marginLeft + Math.floor((availWidth - width) / 2);
         }
     }
-    /** Composite all overlays into content lines (in stack order, later = on top). */
+    /** Composite all overlays into content lines (sorted by focusOrder, higher = on top). */
     compositeOverlays(lines, termWidth, termHeight) {
         if (this.overlayStack.length === 0)
             return lines;
@@ -507,10 +577,9 @@ export class TUI extends Container {
         // Pre-render all visible overlays and calculate positions
         const rendered = [];
         let minLinesNeeded = result.length;
-        for (const entry of this.overlayStack) {
-            // Skip invisible overlays (hidden or visible() returns false)
-            if (!this.isOverlayVisible(entry))
-                continue;
+        const visibleEntries = this.overlayStack.filter((e) => this.isOverlayVisible(e));
+        visibleEntries.sort((a, b) => a.focusOrder - b.focusOrder);
+        for (const entry of visibleEntries) {
             const { component, options } = entry;
             // Get layout with height=0 first to determine width and maxHeight
             // (width and maxHeight don't depend on overlay height)
@@ -526,16 +595,15 @@ export class TUI extends Container {
             rendered.push({ overlayLines, row, col, w: width });
             minLinesNeeded = Math.max(minLinesNeeded, row + overlayLines.length);
         }
-        // Ensure result covers the terminal working area to keep overlay positioning stable across resizes.
-        // maxLinesRendered can exceed current content length after a shrink; pad to keep viewportStart consistent.
-        const workingHeight = Math.max(this.maxLinesRendered, minLinesNeeded);
+        // Pad to at least terminal height so overlays have screen-relative positions.
+        // Excludes maxLinesRendered: the historical high-water mark caused self-reinforcing
+        // inflation that pushed content into scrollback on terminal widen.
+        const workingHeight = Math.max(result.length, termHeight, minLinesNeeded);
         // Extend result with empty lines if content is too short for overlay placement or working area
         while (result.length < workingHeight) {
             result.push("");
         }
         const viewportStart = Math.max(0, workingHeight - termHeight);
-        // Track which lines were modified for final verification
-        const modifiedLines = new Set();
         // Composite each overlay
         for (const { overlayLines, row, col, w } of rendered) {
             for (let i = 0; i < overlayLines.length; i++) {
@@ -545,33 +613,59 @@ export class TUI extends Container {
                     // (components should already respect width, but this ensures it)
                     const truncatedOverlayLine = visibleWidth(overlayLines[i]) > w ? sliceByColumn(overlayLines[i], 0, w, true) : overlayLines[i];
                     result[idx] = this.compositeLineAt(result[idx], truncatedOverlayLine, col, w, termWidth);
-                    modifiedLines.add(idx);
                 }
             }
         }
-        // Final verification: ensure no composited line exceeds terminal width
-        // This is a belt-and-suspenders safeguard - compositeLineAt should already
-        // guarantee this, but we verify here to prevent crashes from any edge cases
-        // Only check lines that were actually modified (optimization)
-        for (const idx of modifiedLines) {
-            const lineWidth = visibleWidth(result[idx]);
-            if (lineWidth > termWidth) {
-                result[idx] = sliceByColumn(result[idx], 0, termWidth, true);
-            }
-        }
         return result;
     }
-    static { this.SEGMENT_RESET = "\x1b[0m\x1b]8;;\x07"; }
+    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] = line + reset;
+                lines[i] = normalizeTerminalOutput(line) + reset;
             }
         }
         return lines;
     }
+    collectKittyImageIds(lines) {
+        const ids = new Set();
+        for (const line of lines) {
+            for (const id of extractKittyImageIds(line)) {
+                ids.add(id);
+            }
+        }
+        return ids;
+    }
+    deleteKittyImages(ids) {
+        let buffer = "";
+        for (const id of ids) {
+            buffer += deleteKittyImage(id);
+        }
+        return buffer;
+    }
+    expandLastChangedForKittyImages(firstChanged, lastChanged) {
+        let expandedLastChanged = lastChanged;
+        for (let i = firstChanged; i < this.previousLines.length; i++) {
+            if (extractKittyImageIds(this.previousLines[i]).length > 0) {
+                expandedLastChanged = Math.max(expandedLastChanged, i);
+            }
+        }
+        return expandedLastChanged;
+    }
+    deleteChangedKittyImages(firstChanged, lastChanged) {
+        if (firstChanged < 0 || lastChanged < firstChanged)
+            return "";
+        const ids = new Set();
+        const maxLine = Math.min(lastChanged, this.previousLines.length - 1);
+        for (let i = firstChanged; i <= maxLine; i++) {
+            for (const id of extractKittyImageIds(this.previousLines[i] ?? "")) {
+                ids.add(id);
+            }
+        }
+        return this.deleteKittyImages(ids);
+    }
     /** Splice overlay content into a base line at a specific column. Single-pass optimized. */
     compositeLineAt(baseLine, overlayLine, startCol, overlayWidth, totalWidth) {
         if (isImageLine(baseLine))
@@ -641,8 +735,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;
@@ -658,15 +755,14 @@ 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;
             let buffer = "\x1b[?2026h"; // Begin synchronized output
-            if (clear)
-                buffer += "\x1b[3J\x1b[2J\x1b[H"; // Clear scrollback, screen, and home
+            if (clear) {
+                buffer += this.deleteKittyImages(this.previousKittyImageIds);
+                buffer += "\x1b[2J\x1b[H\x1b[3J"; // Clear screen, home, then clear scrollback
+            }
             for (let i = 0; i < newLines.length; i++) {
                 if (i > 0)
                     buffer += "\r\n";
@@ -683,9 +779,11 @@ 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.previousKittyImageIds = this.collectKittyImageIds(newLines);
             this.previousWidth = width;
             this.previousHeight = height;
         };
@@ -703,9 +801,17 @@ export class TUI extends Container {
             fullRender(false);
             return;
         }
-        // Width or height changed - full re-render
-        if (widthChanged || heightChanged) {
-            logRedraw(`terminal size changed (${this.previousWidth}x${this.previousHeight} -> ${width}x${height})`);
+        // Width changes always need a full re-render because wrapping changes.
+        if (widthChanged) {
+            logRedraw(`terminal width changed (${this.previousWidth} -> ${width})`);
+            fullRender(true);
+            return;
+        }
+        // Height changes normally need a full re-render to keep the visible viewport aligned,
+        // but Termux changes height when the software keyboard shows or hides.
+        // In that environment, a full redraw causes the entire history to replay on every toggle.
+        if (heightChanged && !isTermuxSession()) {
+            logRedraw(`terminal height changed (${this.previousHeight} -> ${height})`);
             fullRender(true);
             return;
         }
@@ -738,11 +844,14 @@ export class TUI extends Container {
             }
             lastChanged = newLines.length - 1;
         }
+        if (firstChanged !== -1) {
+            lastChanged = this.expandLastChangedForKittyImages(firstChanged, lastChanged);
+        }
         const appendStart = appendedLines && firstChanged === this.previousLines.length && firstChanged > 0;
         // 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;
         }
@@ -750,8 +859,14 @@ export class TUI extends Container {
         if (firstChanged >= newLines.length) {
             if (this.previousLines.length > newLines.length) {
                 let buffer = "\x1b[?2026h";
+                buffer += this.deleteChangedKittyImages(firstChanged, lastChanged);
                 // 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`;
@@ -783,23 +898,23 @@ export class TUI extends Container {
             }
             this.positionHardwareCursor(cursorPos, newLines.length);
             this.previousLines = newLines;
+            this.previousKittyImageIds = this.collectKittyImageIds(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;
         }
         // Render from first changed line to end
         // Build buffer with all updates wrapped in synchronized output
         let buffer = "\x1b[?2026h"; // Begin synchronized output
+        buffer += this.deleteChangedKittyImages(firstChanged, lastChanged);
         const prevViewportBottom = prevViewportTop + height - 1;
         const moveTargetRow = appendStart ? firstChanged - 1 : firstChanged;
         if (moveTargetRow > prevViewportBottom) {
@@ -915,10 +1030,11 @@ 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;
+        this.previousKittyImageIds = this.collectKittyImageIds(newLines);
         this.previousWidth = width;
         this.previousHeight = height;
     }