@fleetagent/pi-tui 0.1.9 → 0.2.1

package/dist/tui.js

@@ -1,34 +1,12 @@
 /**
  * Minimal TUI implementation with differential rendering
  */
-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 { deleteKittyImage, getCapabilities, isImageLine, setCellDimensions } from "./terminal-image.js";
+import { 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;
@@ -54,9 +32,6 @@ function parseSizeValue(value, referenceSize) {
     }
     return undefined;
 }
-function isTermuxSession() {
-    return Boolean(process.env.TERMUX_VERSION);
-}
 /**
  * Container - a component that contains other components
  */
@@ -93,38 +68,72 @@ export class Container {
 /**
  * TUI - Main class for managing terminal UI with differential rendering
  */
-export class TUI extends Container {
+const SEGMENT_RESET = "\x1b[0m\x1b]8;;\x07";
+/** Composite overlay content into a terminal line at a fixed column. */
+export function compositeTuiLine(baseLine, overlayLine, startCol, overlayWidth, totalWidth) {
+    if (isImageLine(baseLine))
+        return baseLine;
+    const afterStart = startCol + overlayWidth;
+    const base = extractSegments(baseLine, startCol, afterStart, totalWidth - afterStart, true);
+    const overlay = sliceWithWidth(overlayLine, 0, overlayWidth, true);
+    const beforePad = Math.max(0, startCol - base.beforeWidth);
+    const overlayPad = Math.max(0, overlayWidth - overlay.width);
+    const actualBeforeWidth = Math.max(startCol, base.beforeWidth);
+    const actualOverlayWidth = Math.max(overlayWidth, overlay.width);
+    const afterTarget = Math.max(0, totalWidth - actualBeforeWidth - actualOverlayWidth);
+    const afterPad = Math.max(0, afterTarget - base.afterWidth);
+    const result = base.before +
+        " ".repeat(beforePad) +
+        SEGMENT_RESET +
+        overlay.text +
+        " ".repeat(overlayPad) +
+        SEGMENT_RESET +
+        base.after +
+        " ".repeat(afterPad);
+    return visibleWidth(result) <= totalWidth ? result : sliceByColumn(result, 0, totalWidth, true);
+}
+export const VIEWPORT_TUI = Symbol.for("@fleetagent/pi-tui/viewport");
+export function isViewportTUI(tui) {
+    return tui[VIEWPORT_TUI] === true;
+}
+export class TuiBase 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;
+    immediateRenderScheduled = 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
+    clearOnShrink = process.env.PI_CLEAR_ON_SHRINK === "1";
     fullRedrawCount = 0;
     stopped = false;
+    logDirectory;
     // Overlay stack for modal components rendered on top of base content
     focusOrderCounter = 0;
     overlayStack = [];
-    constructor(terminal, showHardwareCursor) {
+    get hasOverlayEntries() {
+        return this.overlayStack.length > 0;
+    }
+    overlayFocusRestore = { status: "inactive" };
+    constructor(terminal, showHardwareCursor, logDirectory) {
         super();
         this.terminal = terminal;
+        this.logDirectory = logDirectory ?? process.env.PI_CODING_AGENT_DIR ?? path.join(os.homedir(), ".pi", "agent");
         if (showHardwareCursor !== undefined) {
             this.showHardwareCursor = showHardwareCursor;
         }
     }
+    resetRenderState() { }
+    beforeTerminalStart() { }
+    afterTerminalStart() { }
+    onTerminalResize() { }
+    onOverlayStackChanged() { }
+    beforeTerminalStop(_options) { }
+    afterTerminalStop(_options) { }
     get fullRedraws() {
         return this.fullRedrawCount;
     }
@@ -151,16 +160,170 @@ export class TUI extends Container {
     setClearOnShrink(enabled) {
         this.clearOnShrink = enabled;
     }
+    getFocusedComponent() {
+        return this.focusedComponent;
+    }
     setFocus(component) {
-        // Clear focused flag on old component
-        if (isFocusable(this.focusedComponent)) {
+        this.setFocusInternal({ component, overlayFocusRestore: "clear" });
+    }
+    resolveNonOverlayFocus(nextFocus, previousFocus, restoreState) {
+        if (restoreState.status === "blocked" && restoreState.blockedBy === previousFocus) {
+            if (restoreState.resume.status === "focus-target" || !this.isComponentMounted(restoreState.blockedBy)) {
+                return this.resolveBlockedOverlayFocusResume(restoreState);
+            }
+            this.overlayFocusRestore = {
+                status: "blocked",
+                overlay: restoreState.overlay,
+                blockedBy: nextFocus,
+                resume: restoreState.resume,
+            };
+            return nextFocus;
+        }
+        const previousFocusedOverlay = previousFocus
+            ? this.overlayStack.find((entry) => entry.component === previousFocus && this.isOverlayVisible(entry))
+            : undefined;
+        if (previousFocusedOverlay &&
+            restoreState.status !== "inactive" &&
+            restoreState.overlay === previousFocusedOverlay &&
+            !this.isOverlayFocusAncestor(previousFocusedOverlay, nextFocus)) {
+            this.overlayFocusRestore = {
+                status: "blocked",
+                overlay: previousFocusedOverlay,
+                blockedBy: nextFocus,
+                resume: { status: "restore-overlay" },
+            };
+        }
+        return nextFocus;
+    }
+    resolveNullFocus(previousFocus, restoreState, overlayFocusRestore) {
+        if (restoreState.status === "blocked" && restoreState.blockedBy === previousFocus) {
+            return this.resolveBlockedOverlayFocusResume(restoreState);
+        }
+        if (overlayFocusRestore === "clear")
+            this.clearOverlayFocusRestore();
+        return null;
+    }
+    resolveFocusTarget(component, overlayFocusRestore) {
+        const previousFocus = this.focusedComponent;
+        const restoreState = this.getVisibleOverlayFocusRestore();
+        if (component === null)
+            return this.resolveNullFocus(previousFocus, restoreState, overlayFocusRestore);
+        const isOverlay = this.overlayStack.some((entry) => entry.component === component);
+        if (isOverlay)
+            return component;
+        return this.resolveNonOverlayFocus(component, previousFocus, restoreState);
+    }
+    applyFocus(nextFocus) {
+        if (isFocusable(this.focusedComponent))
             this.focusedComponent.focused = false;
+        this.focusedComponent = nextFocus;
+        if (isFocusable(nextFocus))
+            nextFocus.focused = true;
+        const focusedOverlay = nextFocus
+            ? this.overlayStack.find((entry) => entry.component === nextFocus && this.isOverlayVisible(entry))
+            : undefined;
+        if (focusedOverlay)
+            this.overlayFocusRestore = { status: "eligible", overlay: focusedOverlay };
+    }
+    setFocusInternal({ component, overlayFocusRestore }) {
+        const nextFocus = this.resolveFocusTarget(component, overlayFocusRestore);
+        this.applyFocus(nextFocus);
+    }
+    clearOverlayFocusRestore() {
+        this.overlayFocusRestore = { status: "inactive" };
+    }
+    clearOverlayFocusRestoreFor(overlay) {
+        if (this.overlayFocusRestore.status !== "inactive" && this.overlayFocusRestore.overlay === overlay) {
+            this.clearOverlayFocusRestore();
+        }
+    }
+    resolveBlockedOverlayFocusResume(restoreState) {
+        if (restoreState.resume.status === "restore-overlay")
+            return restoreState.overlay.component;
+        this.clearOverlayFocusRestore();
+        return restoreState.resume.target;
+    }
+    getVisibleOverlayFocusRestore() {
+        const restoreState = this.overlayFocusRestore;
+        if (restoreState.status === "inactive")
+            return restoreState;
+        if (!this.overlayStack.includes(restoreState.overlay) || !this.isOverlayVisible(restoreState.overlay)) {
+            return { status: "inactive" };
+        }
+        return restoreState;
+    }
+    isOverlayFocusAncestor(entry, component) {
+        const preFocusByComponent = new Map();
+        for (const overlay of this.overlayStack) {
+            if (!preFocusByComponent.has(overlay.component)) {
+                preFocusByComponent.set(overlay.component, overlay.preFocus);
+            }
+        }
+        const visited = new Set();
+        let current = entry.preFocus;
+        while (current && !visited.has(current)) {
+            visited.add(current);
+            if (current === component)
+                return true;
+            current = preFocusByComponent.get(current) ?? null;
+        }
+        return false;
+    }
+    retargetOverlayPreFocus(removed) {
+        for (const overlay of this.overlayStack) {
+            if (overlay !== removed && overlay.preFocus === removed.component) {
+                overlay.preFocus = removed.preFocus;
+            }
+        }
+    }
+    getMountedRoots() {
+        return this.children;
+    }
+    isComponentMounted(component) {
+        return this.getMountedRoots().some((child) => this.containsComponent(child, component));
+    }
+    containsComponent(root, target) {
+        if (root === target)
+            return true;
+        if (!(root instanceof Container))
+            return false;
+        return root.children.some((child) => this.containsComponent(child, target));
+    }
+    applyBlockedOverlayUnfocus(entry, restoreState, options) {
+        if (restoreState.status !== "blocked" ||
+            restoreState.overlay !== entry ||
+            this.focusedComponent !== restoreState.blockedBy) {
+            return false;
         }
-        this.focusedComponent = component;
-        // Set focused flag on new component
-        if (isFocusable(component)) {
-            component.focused = true;
+        if (options) {
+            this.overlayFocusRestore = {
+                status: "blocked",
+                overlay: entry,
+                blockedBy: restoreState.blockedBy,
+                resume: { status: "focus-target", target: options.target },
+            };
+        }
+        else {
+            this.clearOverlayFocusRestore();
         }
+        this.requestRender();
+        return true;
+    }
+    unfocusOverlay(entry, options) {
+        const isFocused = this.focusedComponent === entry.component;
+        const restoreState = this.overlayFocusRestore;
+        const hasPendingRestore = restoreState.status !== "inactive" && restoreState.overlay === entry;
+        if (!isFocused && !hasPendingRestore)
+            return;
+        if (this.applyBlockedOverlayUnfocus(entry, restoreState, options))
+            return;
+        this.clearOverlayFocusRestoreFor(entry);
+        if (isFocused || options) {
+            const topVisible = this.getTopmostVisibleOverlay();
+            const fallbackTarget = topVisible && topVisible !== entry ? topVisible.component : entry.preFocus;
+            this.setFocus(options ? options.target : fallbackTarget);
+        }
+        this.requestRender();
     }
     /**
      * Show an overlay component with configurable positioning and sizing.
@@ -169,12 +332,15 @@ export class TUI extends Container {
     showOverlay(component, options) {
         const entry = {
             component,
-            options,
+            ...(options === undefined ? {} : { options }),
             preFocus: this.focusedComponent,
             hidden: false,
             focusOrder: ++this.focusOrderCounter,
+            visible: false,
         };
         this.overlayStack.push(entry);
+        entry.visible = this.isOverlayVisible(entry);
+        this.onOverlayStackChanged();
         // Only focus if overlay is actually visible
         if (!options?.nonCapturing && this.isOverlayVisible(entry)) {
             this.setFocus(component);
@@ -186,7 +352,10 @@ export class TUI extends Container {
             hide: () => {
                 const index = this.overlayStack.indexOf(entry);
                 if (index !== -1) {
+                    this.clearOverlayFocusRestoreFor(entry);
+                    this.retargetOverlayPreFocus(entry);
                     this.overlayStack.splice(index, 1);
+                    this.onOverlayStackChanged();
                     // Restore focus if this overlay had focus
                     if (this.focusedComponent === component) {
                         const topVisible = this.getTopmostVisibleOverlay();
@@ -201,8 +370,10 @@ export class TUI extends Container {
                 if (entry.hidden === hidden)
                     return;
                 entry.hidden = hidden;
+                entry.visible = this.isOverlayVisible(entry);
                 // Update focus when hiding/showing
                 if (hidden) {
+                    this.clearOverlayFocusRestoreFor(entry);
                     // If this overlay had focus, move focus to next visible or preFocus
                     if (this.focusedComponent === component) {
                         const topVisible = this.getTopmostVisibleOverlay();
@@ -216,33 +387,30 @@ export class TUI extends Container {
                         this.setFocus(component);
                     }
                 }
+                this.onOverlayStackChanged();
                 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.setFocus(component);
                 this.requestRender();
             },
-            unfocus: () => {
-                if (this.focusedComponent !== component)
-                    return;
-                const topVisible = this.getTopmostVisibleOverlay();
-                this.setFocus(topVisible && topVisible !== entry ? topVisible.component : entry.preFocus);
-                this.requestRender();
-            },
+            unfocus: (unfocusOptions) => this.unfocusOverlay(entry, unfocusOptions),
             isFocused: () => this.focusedComponent === component,
         };
     }
     /** Hide the topmost overlay and restore previous focus. */
     hideOverlay() {
-        const overlay = this.overlayStack.pop();
+        const overlay = this.overlayStack[this.overlayStack.length - 1];
         if (!overlay)
             return;
+        this.clearOverlayFocusRestoreFor(overlay);
+        this.retargetOverlayPreFocus(overlay);
+        this.overlayStack.pop();
+        this.onOverlayStackChanged();
         if (this.focusedComponent === overlay.component) {
             // Find topmost visible overlay, or fall back to preFocus
             const topVisible = this.getTopmostVisibleOverlay();
@@ -256,6 +424,9 @@ export class TUI extends Container {
     hasOverlay() {
         return this.overlayStack.some((o) => this.isOverlayVisible(o));
     }
+    hasCapturingOverlay() {
+        return this.overlayStack.some((o) => !o.options?.nonCapturing && this.isOverlayVisible(o));
+    }
     /** Check if an overlay entry is currently visible */
     isOverlayVisible(entry) {
         if (entry.hidden)
@@ -265,28 +436,103 @@ export class TUI extends Container {
         }
         return true;
     }
-    /** Find the topmost visible capturing overlay, if any */
+    /** Find the visual-frontmost visible capturing overlay, if any */
     getTopmostVisibleOverlay() {
-        for (let i = this.overlayStack.length - 1; i >= 0; i--) {
-            if (this.overlayStack[i].options?.nonCapturing)
+        let topmost;
+        for (const overlay of this.overlayStack) {
+            if (overlay.options?.nonCapturing || !this.isOverlayVisible(overlay))
                 continue;
-            if (this.isOverlayVisible(this.overlayStack[i])) {
-                return this.overlayStack[i];
+            if (!topmost || overlay.focusOrder > topmost.focusOrder) {
+                topmost = overlay;
             }
         }
-        return undefined;
+        return topmost;
+    }
+    refreshOverlayVisibility() {
+        let newlyVisible;
+        for (const overlay of this.overlayStack) {
+            const visible = this.isOverlayVisible(overlay);
+            if (visible && !overlay.visible && !overlay.options?.nonCapturing) {
+                if (!newlyVisible || overlay.focusOrder > newlyVisible.focusOrder)
+                    newlyVisible = overlay;
+            }
+            overlay.visible = visible;
+        }
+        return newlyVisible;
+    }
+    retargetFocusFromHiddenOverlay() {
+        const focusedOverlay = this.overlayStack.find((overlay) => overlay.component === this.focusedComponent);
+        if (!focusedOverlay || this.isOverlayVisible(focusedOverlay))
+            return;
+        const topVisible = this.getTopmostVisibleOverlay();
+        if (topVisible) {
+            this.setFocus(topVisible.component);
+            return;
+        }
+        this.setFocusInternal({ component: focusedOverlay.preFocus, overlayFocusRestore: "preserve" });
+    }
+    focusNewlyVisibleOverlay(newlyVisible) {
+        if (!newlyVisible)
+            return;
+        const currentFocusedOverlay = this.overlayStack.find((overlay) => overlay.component === this.focusedComponent && this.isOverlayVisible(overlay));
+        if (!currentFocusedOverlay || newlyVisible.focusOrder > currentFocusedOverlay.focusOrder) {
+            this.setFocus(newlyVisible.component);
+        }
+    }
+    restoreVisibleOverlayFocus() {
+        if (this.overlayStack.some((overlay) => overlay.component === this.focusedComponent))
+            return;
+        const restoreState = this.getVisibleOverlayFocusRestore();
+        if (restoreState.status === "eligible") {
+            this.setFocus(restoreState.overlay.component);
+            return;
+        }
+        if (restoreState.status !== "blocked" || restoreState.blockedBy === this.focusedComponent)
+            return;
+        if (restoreState.resume.status === "restore-overlay") {
+            this.setFocus(restoreState.overlay.component);
+            return;
+        }
+        this.clearOverlayFocusRestore();
+        this.setFocus(restoreState.resume.target);
+    }
+    reconcileOverlayFocus() {
+        const newlyVisible = this.refreshOverlayVisibility();
+        this.retargetFocusFromHiddenOverlay();
+        this.focusNewlyVisibleOverlay(newlyVisible);
+        this.restoreVisibleOverlayFocus();
     }
     invalidate() {
-        super.invalidate();
+        for (const root of this.getMountedRoots())
+            root.invalidate();
         for (const overlay of this.overlayStack)
             overlay.component.invalidate?.();
     }
     start() {
         this.stopped = false;
-        this.terminal.start((data) => this.handleInput(data), () => this.requestRender());
-        this.terminal.hideCursor();
-        this.queryCellSize();
-        this.requestRender();
+        try {
+            this.beforeTerminalStart();
+            this.terminal.start((data) => this.handleTerminalInput(data), () => {
+                this.reconcileOverlayFocus();
+                this.onTerminalResize();
+                this.requestRender();
+            });
+            this.afterTerminalStart();
+            this.terminal.hideCursor();
+            this.queryCellSize();
+            this.requestRender();
+        }
+        catch (error) {
+            // A terminal may throw after partially entering raw or alternate-screen mode.
+            // Route startup failures through the same complete cleanup path as signals.
+            try {
+                this.stop();
+            }
+            catch {
+                // Preserve the startup failure; cleanup is best-effort but exhaustive.
+            }
+            throw error;
+        }
     }
     addInputListener(listener) {
         this.inputListeners.add(listener);
@@ -306,49 +552,40 @@ export class TUI extends Container {
         // Response format: CSI 6 ; height ; width t
         this.terminal.write("\x1b[16t");
     }
-    stop() {
+    stop(options) {
         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
-            const lineDiff = targetRow - this.hardwareCursorRow;
-            if (lineDiff > 0) {
-                this.terminal.write(`\x1b[${lineDiff}B`);
+        this.renderRequested = false;
+        this.cancelRenderTimer();
+        let failure;
+        const cleanup = (action) => {
+            try {
+                action();
             }
-            else if (lineDiff < 0) {
-                this.terminal.write(`\x1b[${-lineDiff}A`);
+            catch (error) {
+                failure ??= error;
             }
-            this.terminal.write("\r\n");
-        }
-        this.terminal.showCursor();
-        this.terminal.stop();
+        };
+        cleanup(() => this.beforeTerminalStop(options));
+        cleanup(() => this.terminal.showCursor());
+        cleanup(() => this.terminal.stop());
+        // Alternate-screen exit and capability restoration must run even when
+        // keyboard/raw-mode shutdown reports an error.
+        cleanup(() => this.afterTerminalStop(options));
+        if (failure !== undefined)
+            throw failure;
+    }
+    renderNow(force = false) {
+        if (force)
+            this.resetRenderState();
+        this.renderRequested = false;
+        this.cancelRenderTimer();
+        this.lastRenderAt = performance.now();
+        this.doRender();
     }
     requestRender(force = false) {
         if (force) {
-            this.previousLines = [];
-            this.previousWidth = -1; // -1 triggers widthChanged, forcing a full clear
-            this.previousHeight = -1; // -1 triggers heightChanged, forcing a full clear
-            this.cursorRow = 0;
-            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();
-            });
+            this.resetRenderState();
+            this.requestImmediateRender();
             return;
         }
         if (this.renderRequested)
@@ -356,75 +593,80 @@ export class TUI extends Container {
         this.renderRequested = true;
         process.nextTick(() => this.scheduleRender());
     }
+    requestImmediateRender() {
+        this.cancelRenderTimer();
+        this.renderRequested = true;
+        if (this.immediateRenderScheduled)
+            return;
+        this.immediateRenderScheduled = true;
+        process.nextTick(() => {
+            this.immediateRenderScheduled = false;
+            if (this.stopped || !this.renderRequested)
+                return;
+            this.cancelRenderTimer();
+            this.renderRequested = false;
+            this.lastRenderAt = performance.now();
+            this.doRender();
+        });
+    }
+    cancelRenderTimer() {
+        if (!this.renderTimer)
+            return;
+        clearTimeout(this.renderTimer);
+        this.renderTimer = undefined;
+    }
     scheduleRender() {
-        if (this.stopped || this.renderTimer || !this.renderRequested) {
+        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);
+        const delay = Math.max(0, TuiBase.MIN_RENDER_INTERVAL_MS - elapsed);
         this.renderTimer = setTimeout(() => {
             this.renderTimer = undefined;
-            if (this.stopped || !this.renderRequested) {
+            if (this.stopped || !this.renderRequested)
                 return;
-            }
             this.renderRequested = false;
             this.lastRenderAt = performance.now();
             this.doRender();
-            if (this.renderRequested) {
+            if (this.renderRequested)
                 this.scheduleRender();
-            }
         }, delay);
     }
-    handleInput(data) {
-        if (this.inputListeners.size > 0) {
-            let current = data;
-            for (const listener of this.inputListeners) {
-                const result = listener(current);
-                if (result?.consume) {
-                    return;
-                }
-                if (result?.data !== undefined) {
-                    current = result.data;
-                }
-            }
-            if (current.length === 0) {
-                return;
-            }
-            data = current;
-        }
+    applyInputListeners(data) {
+        if (this.inputListeners.size === 0)
+            return data;
+        let current = data;
+        for (const listener of this.inputListeners) {
+            const result = listener(current);
+            if (result?.consume)
+                return undefined;
+            if (result?.data !== undefined)
+                current = result.data;
+        }
+        return current.length === 0 ? undefined : current;
+    }
+    handleTerminalInput(data) {
+        this.reconcileOverlayFocus();
+        const filteredData = this.applyInputListeners(data);
+        if (filteredData === undefined)
+            return;
+        data = filteredData;
         // Consume terminal cell size responses without blocking unrelated input.
-        if (this.consumeCellSizeResponse(data)) {
+        if (this.consumeCellSizeResponse(data))
             return;
-        }
         // Global debug key handler (Shift+Ctrl+D)
         if (matchesKey(data, "shift+ctrl+d") && this.onDebug) {
             this.onDebug();
             return;
         }
-        // If focused component is an overlay, verify it's still visible
-        // (visibility can change due to terminal resize or visible() callback)
-        const focusedOverlay = this.overlayStack.find((o) => o.component === this.focusedComponent);
-        if (focusedOverlay && !this.isOverlayVisible(focusedOverlay)) {
-            // Focused overlay is no longer visible, redirect to topmost visible overlay
-            const topVisible = this.getTopmostVisibleOverlay();
-            if (topVisible) {
-                this.setFocus(topVisible.component);
-            }
-            else {
-                // No visible overlays, restore to preFocus
-                this.setFocus(focusedOverlay.preFocus);
-            }
-        }
-        // Pass input to focused component (including Ctrl+C)
-        // The focused component can decide how to handle Ctrl+C
-        if (this.focusedComponent?.handleInput) {
-            // Filter out key release events unless component opts in
-            if (isKeyRelease(data) && !this.focusedComponent.wantsKeyRelease) {
-                return;
-            }
-            this.focusedComponent.handleInput(data);
-            this.requestRender();
-        }
+        // Pass input to focused component (including Ctrl+C).
+        // The focused component can decide how to handle Ctrl+C.
+        if (!this.focusedComponent?.handleInput)
+            return;
+        // Filter out key release events unless component opts in.
+        if (isKeyRelease(data) && !this.focusedComponent.wantsKeyRelease)
+            return;
+        this.focusedComponent.handleInput(data);
+        this.requestImmediateRender();
     }
     consumeCellSizeResponse(data) {
         // Response format: ESC [ 6 ; height ; width t
@@ -443,98 +685,68 @@ export class TUI extends Container {
         this.requestRender();
         return true;
     }
-    /**
-     * Resolve overlay layout from options.
-     * Returns { width, row, col, maxHeight } for rendering.
-     */
-    resolveOverlayLayout(options, overlayHeight, termWidth, termHeight) {
-        const opt = options ?? {};
-        // Parse margin (clamp to non-negative)
-        const margin = typeof opt.margin === "number"
-            ? { top: opt.margin, right: opt.margin, bottom: opt.margin, left: opt.margin }
-            : (opt.margin ?? {});
+    resolveOverlayBounds(options, termWidth, termHeight) {
+        const margin = typeof options.margin === "number"
+            ? { top: options.margin, right: options.margin, bottom: options.margin, left: options.margin }
+            : (options.margin ?? {});
         const marginTop = Math.max(0, margin.top ?? 0);
         const marginRight = Math.max(0, margin.right ?? 0);
         const marginBottom = Math.max(0, margin.bottom ?? 0);
         const marginLeft = Math.max(0, margin.left ?? 0);
-        // Available space after margins
-        const availWidth = Math.max(1, termWidth - marginLeft - marginRight);
-        const availHeight = Math.max(1, termHeight - marginTop - marginBottom);
-        // === Resolve width ===
-        let width = parseSizeValue(opt.width, termWidth) ?? Math.min(80, availWidth);
-        // Apply minWidth
-        if (opt.minWidth !== undefined) {
-            width = Math.max(width, opt.minWidth);
-        }
-        // Clamp to available space
-        width = Math.max(1, Math.min(width, availWidth));
-        // === Resolve maxHeight ===
-        let maxHeight = parseSizeValue(opt.maxHeight, termHeight);
-        // Clamp to available space
-        if (maxHeight !== undefined) {
-            maxHeight = Math.max(1, Math.min(maxHeight, availHeight));
-        }
-        // Effective overlay height (may be clamped by maxHeight)
-        const effectiveHeight = maxHeight !== undefined ? Math.min(overlayHeight, maxHeight) : overlayHeight;
-        // === Resolve position ===
-        let row;
-        let col;
-        if (opt.row !== undefined) {
-            if (typeof opt.row === "string") {
-                // Percentage: 0% = top, 100% = bottom (overlay stays within bounds)
-                const match = opt.row.match(/^(\d+(?:\.\d+)?)%$/);
-                if (match) {
-                    const maxRow = Math.max(0, availHeight - effectiveHeight);
-                    const percent = parseFloat(match[1]) / 100;
-                    row = marginTop + Math.floor(maxRow * percent);
-                }
-                else {
-                    // Invalid format, fall back to center
-                    row = this.resolveAnchorRow("center", effectiveHeight, availHeight, marginTop);
-                }
-            }
-            else {
-                // Absolute row position
-                row = opt.row;
-            }
-        }
-        else {
-            // Anchor-based (default: center)
-            const anchor = opt.anchor ?? "center";
-            row = this.resolveAnchorRow(anchor, effectiveHeight, availHeight, marginTop);
-        }
-        if (opt.col !== undefined) {
-            if (typeof opt.col === "string") {
-                // Percentage: 0% = left, 100% = right (overlay stays within bounds)
-                const match = opt.col.match(/^(\d+(?:\.\d+)?)%$/);
-                if (match) {
-                    const maxCol = Math.max(0, availWidth - width);
-                    const percent = parseFloat(match[1]) / 100;
-                    col = marginLeft + Math.floor(maxCol * percent);
-                }
-                else {
-                    // Invalid format, fall back to center
-                    col = this.resolveAnchorCol("center", width, availWidth, marginLeft);
-                }
-            }
-            else {
-                // Absolute column position
-                col = opt.col;
-            }
-        }
-        else {
-            // Anchor-based (default: center)
-            const anchor = opt.anchor ?? "center";
-            col = this.resolveAnchorCol(anchor, width, availWidth, marginLeft);
-        }
-        // Apply offsets
-        if (opt.offsetY !== undefined)
-            row += opt.offsetY;
-        if (opt.offsetX !== undefined)
-            col += opt.offsetX;
-        // Clamp to terminal bounds (respecting margins)
-        row = Math.max(marginTop, Math.min(row, termHeight - marginBottom - effectiveHeight));
-        col = Math.max(marginLeft, Math.min(col, termWidth - marginRight - width));
+        return {
+            marginTop,
+            marginRight,
+            marginBottom,
+            marginLeft,
+            availableWidth: Math.max(1, termWidth - marginLeft - marginRight),
+            availableHeight: Math.max(1, termHeight - marginTop - marginBottom),
+        };
+    }
+    resolveOverlayWidth(options, termWidth, bounds) {
+        let width = parseSizeValue(options.width, termWidth) ?? Math.min(80, bounds.availableWidth);
+        if (options.minWidth !== undefined)
+            width = Math.max(width, options.minWidth);
+        return Math.max(1, Math.min(width, bounds.availableWidth));
+    }
+    resolveOverlayMaxHeight(options, termHeight, bounds) {
+        const maxHeight = parseSizeValue(options.maxHeight, termHeight);
+        return maxHeight === undefined ? undefined : Math.max(1, Math.min(maxHeight, bounds.availableHeight));
+    }
+    resolveOverlayRow(options, overlayHeight, bounds) {
+        if (options.row === undefined) {
+            return this.resolveAnchorRow(options.anchor ?? "center", overlayHeight, bounds.availableHeight, bounds.marginTop);
+        }
+        if (typeof options.row === "number")
+            return options.row;
+        const match = options.row.match(/^(\d+(?:\.\d+)?)%$/);
+        if (!match)
+            return this.resolveAnchorRow("center", overlayHeight, bounds.availableHeight, bounds.marginTop);
+        const maxRow = Math.max(0, bounds.availableHeight - overlayHeight);
+        return bounds.marginTop + Math.floor(maxRow * (parseFloat(match[1]) / 100));
+    }
+    resolveOverlayColumn(options, width, bounds) {
+        if (options.col === undefined) {
+            return this.resolveAnchorCol(options.anchor ?? "center", width, bounds.availableWidth, bounds.marginLeft);
+        }
+        if (typeof options.col === "number")
+            return options.col;
+        const match = options.col.match(/^(\d+(?:\.\d+)?)%$/);
+        if (!match)
+            return this.resolveAnchorCol("center", width, bounds.availableWidth, bounds.marginLeft);
+        const maxCol = Math.max(0, bounds.availableWidth - width);
+        return bounds.marginLeft + Math.floor(maxCol * (parseFloat(match[1]) / 100));
+    }
+    /** Resolve overlay layout from options. */
+    resolveOverlayLayout(options, overlayHeight, termWidth, termHeight) {
+        const resolvedOptions = options ?? {};
+        const bounds = this.resolveOverlayBounds(resolvedOptions, termWidth, termHeight);
+        const width = this.resolveOverlayWidth(resolvedOptions, termWidth, bounds);
+        const maxHeight = this.resolveOverlayMaxHeight(resolvedOptions, termHeight, bounds);
+        const effectiveHeight = maxHeight === undefined ? overlayHeight : Math.min(overlayHeight, maxHeight);
+        let row = this.resolveOverlayRow(resolvedOptions, effectiveHeight, bounds) + (resolvedOptions.offsetY ?? 0);
+        let col = this.resolveOverlayColumn(resolvedOptions, width, bounds) + (resolvedOptions.offsetX ?? 0);
+        row = Math.max(bounds.marginTop, Math.min(row, termHeight - bounds.marginBottom - effectiveHeight));
+        col = Math.max(bounds.marginLeft, Math.min(col, termWidth - bounds.marginRight - width));
         return { width, row, col, maxHeight };
     }
     resolveAnchorRow(anchor, height, availHeight, marginTop) {
@@ -569,58 +781,52 @@ export class TUI extends Container {
                 return marginLeft + Math.floor((availWidth - width) / 2);
         }
     }
-    /** Composite all overlays into content lines (sorted by focusOrder, higher = on top). */
-    compositeOverlays(lines, termWidth, termHeight) {
-        if (this.overlayStack.length === 0)
-            return lines;
-        const result = [...lines];
-        // Pre-render all visible overlays and calculate positions
-        const rendered = [];
-        let minLinesNeeded = result.length;
-        const visibleEntries = this.overlayStack.filter((e) => this.isOverlayVisible(e));
-        visibleEntries.sort((a, b) => a.focusOrder - b.focusOrder);
+    prepareOverlayRenderPlan(baseLineCount, termWidth, termHeight) {
+        const visibleEntries = this.overlayStack.filter((entry) => this.isOverlayVisible(entry));
+        visibleEntries.sort((left, right) => left.focusOrder - right.focusOrder);
+        const overlays = [];
+        let minimumLineCount = baseLineCount;
         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)
-            const { width, maxHeight } = this.resolveOverlayLayout(options, 0, termWidth, termHeight);
-            // Render component at calculated width
-            let overlayLines = component.render(width);
-            // Apply maxHeight if specified
+            const { width, maxHeight } = this.resolveOverlayLayout(entry.options, 0, termWidth, termHeight);
+            let overlayLines = entry.component.render(width);
             if (maxHeight !== undefined && overlayLines.length > maxHeight) {
                 overlayLines = overlayLines.slice(0, maxHeight);
             }
-            // Get final row/col with actual overlay height
-            const { row, col } = this.resolveOverlayLayout(options, overlayLines.length, termWidth, termHeight);
-            rendered.push({ overlayLines, row, col, w: width });
-            minLinesNeeded = Math.max(minLinesNeeded, row + overlayLines.length);
+            const { row, col } = this.resolveOverlayLayout(entry.options, overlayLines.length, termWidth, termHeight);
+            overlays.push({ lines: overlayLines, row, col, width });
+            minimumLineCount = Math.max(minimumLineCount, row + overlayLines.length);
         }
-        // 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("");
+        return { overlays, minimumLineCount };
+    }
+    compositeRenderedOverlay(result, overlay, viewportStart, termWidth) {
+        for (let lineIndex = 0; lineIndex < overlay.lines.length; lineIndex++) {
+            const targetIndex = viewportStart + overlay.row + lineIndex;
+            if (targetIndex < 0 || targetIndex >= result.length)
+                continue;
+            const overlayLine = overlay.lines[lineIndex];
+            const truncatedLine = visibleWidth(overlayLine) > overlay.width
+                ? sliceByColumn(overlayLine, 0, overlay.width, true)
+                : overlayLine;
+            result[targetIndex] = this.compositeLineAt(result[targetIndex], truncatedLine, overlay.col, overlay.width, termWidth);
         }
+    }
+    /** Composite all overlays into content lines (sorted by focusOrder, higher = on top). */
+    compositeOverlays(lines, termWidth, termHeight) {
+        if (this.overlayStack.length === 0)
+            return lines;
+        const result = [...lines];
+        const plan = this.prepareOverlayRenderPlan(result.length, termWidth, termHeight);
+        const workingHeight = Math.max(result.length, termHeight, plan.minimumLineCount);
+        while (result.length < workingHeight)
+            result.push("");
         const viewportStart = Math.max(0, workingHeight - termHeight);
-        // Composite each overlay
-        for (const { overlayLines, row, col, w } of rendered) {
-            for (let i = 0; i < overlayLines.length; i++) {
-                const idx = viewportStart + row + i;
-                if (idx >= 0 && idx < result.length) {
-                    // Defensive: truncate overlay line to declared width before compositing
-                    // (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);
-                }
-            }
+        for (const overlay of plan.overlays) {
+            this.compositeRenderedOverlay(result, overlay, viewportStart, termWidth);
         }
         return result;
     }
-    static SEGMENT_RESET = "\x1b[0m\x1b]8;;\x07";
     applyLineResets(lines) {
-        const reset = TUI.SEGMENT_RESET;
+        const reset = SEGMENT_RESET;
         for (let i = 0; i < lines.length; i++) {
             const line = lines[i];
             if (!isImageLine(line)) {
@@ -629,81 +835,8 @@ export class TUI extends Container {
         }
         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))
-            return baseLine;
-        // Single pass through baseLine extracts both before and after segments
-        const afterStart = startCol + overlayWidth;
-        const base = extractSegments(baseLine, startCol, afterStart, totalWidth - afterStart, true);
-        // Extract overlay with width tracking (strict=true to exclude wide chars at boundary)
-        const overlay = sliceWithWidth(overlayLine, 0, overlayWidth, true);
-        // Pad segments to target widths
-        const beforePad = Math.max(0, startCol - base.beforeWidth);
-        const overlayPad = Math.max(0, overlayWidth - overlay.width);
-        const actualBeforeWidth = Math.max(startCol, base.beforeWidth);
-        const actualOverlayWidth = Math.max(overlayWidth, overlay.width);
-        const afterTarget = Math.max(0, totalWidth - actualBeforeWidth - actualOverlayWidth);
-        const afterPad = Math.max(0, afterTarget - base.afterWidth);
-        // Compose result
-        const r = TUI.SEGMENT_RESET;
-        const result = base.before +
-            " ".repeat(beforePad) +
-            r +
-            overlay.text +
-            " ".repeat(overlayPad) +
-            r +
-            base.after +
-            " ".repeat(afterPad);
-        // CRITICAL: Always verify and truncate to terminal width.
-        // This is the final safeguard against width overflow which would crash the TUI.
-        // Width tracking can drift from actual visible width due to:
-        // - Complex ANSI/OSC sequences (hyperlinks, colors)
-        // - Wide characters at segment boundaries
-        // - Edge cases in segment extraction
-        const resultWidth = visibleWidth(result);
-        if (resultWidth <= totalWidth) {
-            return result;
-        }
-        // Truncate with strict=true to ensure we don't exceed totalWidth
-        return sliceByColumn(result, 0, totalWidth, true);
+        return compositeTuiLine(baseLine, overlayLine, startCol, overlayWidth, totalWidth);
     }
     /**
      * Find and extract cursor position from rendered lines.
@@ -730,348 +863,5 @@ export class TUI extends Container {
         }
         return null;
     }
-    doRender() {
-        if (this.stopped)
-            return;
-        const width = this.terminal.columns;
-        const height = this.terminal.rows;
-        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;
-            const targetScreenRow = targetRow - viewportTop;
-            return targetScreenRow - currentScreenRow;
-        };
-        // Render all components to get new lines
-        let newLines = this.render(width);
-        // 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);
-        // 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 += 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";
-                buffer += newLines[i];
-            }
-            buffer += "\x1b[?2026l"; // End synchronized output
-            this.terminal.write(buffer);
-            this.cursorRow = Math.max(0, newLines.length - 1);
-            this.hardwareCursorRow = this.cursorRow;
-            // Reset max lines when clearing, otherwise track growth
-            if (clear) {
-                this.maxLinesRendered = newLines.length;
-            }
-            else {
-                this.maxLinesRendered = Math.max(this.maxLinesRendered, newLines.length);
-            }
-            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;
-        };
-        const debugRedraw = process.env.PI_DEBUG_REDRAW === "1";
-        const logRedraw = (reason) => {
-            if (!debugRedraw)
-                return;
-            const logPath = path.join(os.homedir(), ".pi", "agent", "pi-debug.log");
-            const msg = `[${new Date().toISOString()}] fullRender: ${reason} (prev=${this.previousLines.length}, new=${newLines.length}, height=${height})\n`;
-            fs.appendFileSync(logPath, msg);
-        };
-        // First render - just output everything without clearing (assumes clean screen)
-        if (this.previousLines.length === 0 && !widthChanged && !heightChanged) {
-            logRedraw("first render");
-            fullRender(false);
-            return;
-        }
-        // 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;
-        }
-        // Content shrunk below the working area and no overlays - re-render to clear empty rows
-        // (overlays need the padding, so only do this when no overlays are active)
-        // Configurable via setClearOnShrink() or PI_CLEAR_ON_SHRINK=0 env var
-        if (this.clearOnShrink && newLines.length < this.maxLinesRendered && this.overlayStack.length === 0) {
-            logRedraw(`clearOnShrink (maxLinesRendered=${this.maxLinesRendered})`);
-            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;
-                }
-                lastChanged = i;
-            }
-        }
-        const appendedLines = newLines.length > this.previousLines.length;
-        if (appendedLines) {
-            if (firstChanged === -1) {
-                firstChanged = this.previousLines.length;
-            }
-            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 = prevViewportTop;
-            this.previousHeight = height;
-            return;
-        }
-        // All changes are in deleted lines (nothing to render, just clear)
-        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`;
-                else if (lineDiff < 0)
-                    buffer += `\x1b[${-lineDiff}A`;
-                buffer += "\r";
-                // Clear extra lines without scrolling
-                const extraLines = this.previousLines.length - newLines.length;
-                if (extraLines > height) {
-                    logRedraw(`extraLines > height (${extraLines} > ${height})`);
-                    fullRender(true);
-                    return;
-                }
-                if (extraLines > 0) {
-                    buffer += "\x1b[1B";
-                }
-                for (let i = 0; i < extraLines; i++) {
-                    buffer += "\r\x1b[2K";
-                    if (i < extraLines - 1)
-                        buffer += "\x1b[1B";
-                }
-                if (extraLines > 0) {
-                    buffer += `\x1b[${extraLines}A`;
-                }
-                buffer += "\x1b[?2026l";
-                this.terminal.write(buffer);
-                this.cursorRow = targetRow;
-                this.hardwareCursorRow = targetRow;
-            }
-            this.positionHardwareCursor(cursorPos, newLines.length);
-            this.previousLines = newLines;
-            this.previousKittyImageIds = this.collectKittyImageIds(newLines);
-            this.previousWidth = width;
-            this.previousHeight = height;
-            this.previousViewportTop = prevViewportTop;
-            return;
-        }
-        // 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) {
-            const currentScreenRow = Math.max(0, Math.min(height - 1, hardwareCursorRow - prevViewportTop));
-            const moveToBottom = height - 1 - currentScreenRow;
-            if (moveToBottom > 0) {
-                buffer += `\x1b[${moveToBottom}B`;
-            }
-            const scroll = moveTargetRow - prevViewportBottom;
-            buffer += "\r\n".repeat(scroll);
-            prevViewportTop += scroll;
-            viewportTop += scroll;
-            hardwareCursorRow = moveTargetRow;
-        }
-        // Move cursor to first changed line (use hardwareCursorRow for actual position)
-        const lineDiff = computeLineDiff(moveTargetRow);
-        if (lineDiff > 0) {
-            buffer += `\x1b[${lineDiff}B`; // Move down
-        }
-        else if (lineDiff < 0) {
-            buffer += `\x1b[${-lineDiff}A`; // Move up
-        }
-        buffer += appendStart ? "\r\n" : "\r"; // Move to column 0
-        // Only render changed lines (firstChanged to lastChanged), not all lines to end
-        // This reduces flicker when only a single line changes (e.g., spinner animation)
-        const renderEnd = Math.min(lastChanged, newLines.length - 1);
-        for (let i = firstChanged; i <= renderEnd; i++) {
-            if (i > firstChanged)
-                buffer += "\r\n";
-            buffer += "\x1b[2K"; // Clear current line
-            const line = newLines[i];
-            const isImage = isImageLine(line);
-            if (!isImage && visibleWidth(line) > width) {
-                // Log all lines to crash file for debugging
-                const crashLogPath = path.join(os.homedir(), ".pi", "agent", "pi-crash.log");
-                const crashData = [
-                    `Crash at ${new Date().toISOString()}`,
-                    `Terminal width: ${width}`,
-                    `Line ${i} visible width: ${visibleWidth(line)}`,
-                    "",
-                    "=== All rendered lines ===",
-                    ...newLines.map((l, idx) => `[${idx}] (w=${visibleWidth(l)}) ${l}`),
-                    "",
-                ].join("\n");
-                fs.mkdirSync(path.dirname(crashLogPath), { recursive: true });
-                fs.writeFileSync(crashLogPath, crashData);
-                // Clean up terminal state before throwing
-                this.stop();
-                const errorMsg = [
-                    `Rendered line ${i} exceeds terminal width (${visibleWidth(line)} > ${width}).`,
-                    "",
-                    "This is likely caused by a custom TUI component not truncating its output.",
-                    "Use visibleWidth() to measure and truncateToWidth() to truncate lines.",
-                    "",
-                    `Debug log written to: ${crashLogPath}`,
-                ].join("\n");
-                throw new Error(errorMsg);
-            }
-            buffer += line;
-        }
-        // 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) {
-            // 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++) {
-                buffer += "\r\n\x1b[2K";
-            }
-            // Move cursor back to end of new content
-            buffer += `\x1b[${extraLines}A`;
-        }
-        buffer += "\x1b[?2026l"; // End synchronized output
-        if (process.env.PI_TUI_DEBUG === "1") {
-            const debugDir = "/tmp/tui";
-            fs.mkdirSync(debugDir, { recursive: true });
-            const debugPath = path.join(debugDir, `render-${Date.now()}-${Math.random().toString(36).slice(2)}.log`);
-            const debugData = [
-                `firstChanged: ${firstChanged}`,
-                `viewportTop: ${viewportTop}`,
-                `cursorRow: ${this.cursorRow}`,
-                `height: ${height}`,
-                `lineDiff: ${lineDiff}`,
-                `hardwareCursorRow: ${hardwareCursorRow}`,
-                `renderEnd: ${renderEnd}`,
-                `finalCursorRow: ${finalCursorRow}`,
-                `cursorPos: ${JSON.stringify(cursorPos)}`,
-                `newLines.length: ${newLines.length}`,
-                `previousLines.length: ${this.previousLines.length}`,
-                "",
-                "=== newLines ===",
-                JSON.stringify(newLines, null, 2),
-                "",
-                "=== previousLines ===",
-                JSON.stringify(this.previousLines, null, 2),
-                "",
-                "=== buffer ===",
-                JSON.stringify(buffer),
-            ].join("\n");
-            fs.writeFileSync(debugPath, debugData);
-        }
-        // Write entire buffer at once
-        this.terminal.write(buffer);
-        // Track cursor position for next render
-        // cursorRow tracks end of content (for viewport calculation)
-        // hardwareCursorRow tracks actual terminal cursor position (for movement)
-        this.cursorRow = Math.max(0, newLines.length - 1);
-        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(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;
-    }
-    /**
-     * Position the hardware cursor for IME candidate window.
-     * @param cursorPos The cursor position extracted from rendered output, or null
-     * @param totalLines Total number of rendered lines
-     */
-    positionHardwareCursor(cursorPos, totalLines) {
-        if (!cursorPos || totalLines <= 0) {
-            this.terminal.hideCursor();
-            return;
-        }
-        // Clamp cursor position to valid range
-        const targetRow = Math.max(0, Math.min(cursorPos.row, totalLines - 1));
-        const targetCol = Math.max(0, cursorPos.col);
-        // Move cursor from current position to target
-        const rowDelta = targetRow - this.hardwareCursorRow;
-        let buffer = "";
-        if (rowDelta > 0) {
-            buffer += `\x1b[${rowDelta}B`; // Move down
-        }
-        else if (rowDelta < 0) {
-            buffer += `\x1b[${-rowDelta}A`; // Move up
-        }
-        // Move to absolute column (1-indexed)
-        buffer += `\x1b[${targetCol + 1}G`;
-        if (buffer) {
-            this.terminal.write(buffer);
-        }
-        this.hardwareCursorRow = targetRow;
-        if (this.showHardwareCursor) {
-            this.terminal.showCursor();
-        }
-        else {
-            this.terminal.hideCursor();
-        }
-    }
 }
 //# sourceMappingURL=tui.js.map