@mariozechner/pi-tui 0.5.7 → 0.5.9

package/dist/tui.js

@@ -1,220 +1,132 @@
-import { writeSync } from "fs";
 import process from "process";
-import { logger } from "./logger.js";
-// Sentinel component used to mark removed components - triggers cascade rendering
-class SentinelComponent {
-    render() {
-        return {
-            lines: [],
-            changed: true, // Always trigger cascade
-        };
-    }
+import { ProcessTerminal } from "./terminal.js";
+// Global component ID counter
+let nextComponentId = 1;
+// Helper to get next component ID
+export function getNextComponentId() {
+    return nextComponentId++;
 }
-// Base Container class that manages child components
+/**
+ * Container for managing child components
+ */
 export class Container {
+    id;
     children = [];
-    lines = [];
-    parentTui; // Reference to parent TUI for triggering re-renders
-    constructor(parentTui) {
-        this.parentTui = parentTui;
+    tui;
+    previousChildCount = 0;
+    constructor() {
+        this.id = getNextComponentId();
     }
-    setParentTui(tui) {
-        this.parentTui = tui;
+    setTui(tui) {
+        this.tui = tui;
+        for (const child of this.children) {
+            if (child instanceof Container) {
+                child.setTui(tui);
+            }
+        }
     }
     addChild(component) {
         this.children.push(component);
-        // Set parent TUI reference for nested containers
-        if (component instanceof Container && this.parentTui) {
-            component.setParentTui(this.parentTui);
-        }
-        if (this.parentTui) {
-            this.parentTui.requestRender();
+        if (component instanceof Container) {
+            component.setTui(this.tui);
         }
+        this.tui?.requestRender();
     }
     removeChild(component) {
         const index = this.children.indexOf(component);
         if (index >= 0) {
-            // Replace with sentinel instead of splicing to maintain array structure
-            this.children[index] = new SentinelComponent();
-            // Keep the childTotalLines entry - sentinel will update it to 0
-            // Clear parent TUI reference for nested containers
+            this.children.splice(index, 1);
             if (component instanceof Container) {
-                component.setParentTui(undefined);
-            }
-            // Use normal render - sentinel will trigger cascade naturally
-            if (this.parentTui) {
-                this.parentTui.requestRender();
-            }
-        }
-        else {
-            for (const child of this.children) {
-                if (child instanceof Container) {
-                    child.removeChild(component);
-                }
+                component.setTui(undefined);
             }
+            this.tui?.requestRender();
         }
     }
     removeChildAt(index) {
         if (index >= 0 && index < this.children.length) {
             const component = this.children[index];
-            // Replace with sentinel instead of splicing to maintain array structure
-            this.children[index] = new SentinelComponent();
-            // Clear parent TUI reference for nested containers
+            this.children.splice(index, 1);
             if (component instanceof Container) {
-                component.setParentTui(undefined);
-            }
-            // Use normal render - sentinel will trigger cascade naturally
-            if (this.parentTui) {
-                this.parentTui.requestRender();
+                component.setTui(undefined);
             }
+            this.tui?.requestRender();
         }
     }
-    render(width) {
-        let keepLines = 0;
-        let changed = false;
-        const newLines = [];
-        for (let i = 0; i < this.children.length; i++) {
-            const child = this.children[i];
-            if (!child)
-                continue;
+    clear() {
+        for (const child of this.children) {
             if (child instanceof Container) {
-                const result = child.render(width);
-                newLines.push(...result.lines);
-                if (!changed && !result.changed) {
-                    keepLines += result.lines.length;
-                }
-                else {
-                    if (!changed) {
-                        // First change - use the child's keepLines
-                        changed = true;
-                        keepLines += result.keepLines;
-                    }
-                    // After first change, don't add any more keepLines
-                }
-            }
-            else {
-                const result = child.render(width);
-                newLines.push(...result.lines);
-                if (!changed && !result.changed) {
-                    keepLines += result.lines.length;
-                }
-                else {
-                    if (!changed) {
-                        // First change for a non-container component
-                        changed = true;
-                    }
-                    // After first change, don't add any more keepLines
-                }
+                child.setTui(undefined);
             }
         }
-        this.lines = newLines;
-        return {
-            lines: this.lines,
-            changed,
-            keepLines,
-        };
+        this.children = [];
+        this.tui?.requestRender();
     }
-    // Get child for external manipulation
-    // Get child at index
-    // Note: This may return a SentinelComponent if a child was removed but not yet cleaned up
     getChild(index) {
         return this.children[index];
     }
-    // Get number of children
-    // Note: This count includes sentinel components until they are cleaned up after the next render pass
     getChildCount() {
         return this.children.length;
     }
-    // Clear all children from the container
-    clear() {
-        // Clear parent TUI references for nested containers
-        for (const child of this.children) {
-            if (child instanceof Container) {
-                child.setParentTui(undefined);
-            }
-        }
-        // Clear the children array
-        this.children = [];
-        // Request render if we have a parent TUI
-        if (this.parentTui) {
-            this.parentTui.requestRender();
+    render(width) {
+        const lines = [];
+        let changed = false;
+        // Check if the number of children changed (important for detecting clears)
+        if (this.children.length !== this.previousChildCount) {
+            changed = true;
+            this.previousChildCount = this.children.length;
         }
-    }
-    // Clean up sentinel components
-    cleanupSentinels() {
-        const originalCount = this.children.length;
-        const validChildren = [];
-        let sentinelCount = 0;
         for (const child of this.children) {
-            if (child && !(child instanceof SentinelComponent)) {
-                validChildren.push(child);
-                // Recursively clean up nested containers
-                if (child instanceof Container) {
-                    child.cleanupSentinels();
-                }
-            }
-            else if (child instanceof SentinelComponent) {
-                sentinelCount++;
+            const result = child.render(width);
+            lines.push(...result.lines);
+            if (result.changed) {
+                changed = true;
             }
         }
-        this.children = validChildren;
-        if (sentinelCount > 0) {
-            logger.debug("Container", "Cleaned up sentinels", {
-                originalCount,
-                newCount: this.children.length,
-                sentinelsRemoved: sentinelCount,
-            });
-        }
+        return { lines, changed };
     }
 }
+/**
+ * TUI - Smart differential rendering TUI implementation.
+ */
 export class TUI extends Container {
     focusedComponent = null;
     needsRender = false;
-    wasRaw = false;
-    totalLines = 0;
     isFirstRender = true;
     isStarted = false;
     onGlobalKeyPress;
-    constructor() {
-        super(); // No parent TUI for root
-        this.handleResize = this.handleResize.bind(this);
-        this.handleKeypress = this.handleKeypress.bind(this);
-        logger.componentLifecycle("TUI", "created");
+    terminal;
+    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used in renderToScreen method on lines 260 and 276
+    previousRenderCommands = [];
+    previousLines = []; // What we rendered last time
+    // Performance metrics
+    totalLinesRedrawn = 0;
+    renderCount = 0;
+    getLinesRedrawn() {
+        return this.totalLinesRedrawn;
     }
-    configureLogging(config) {
-        logger.configure(config);
-        logger.info("TUI", "Logging configured", config);
-    }
-    addChild(component) {
-        // Set parent TUI reference for containers
-        if (component instanceof Container) {
-            component.setParentTui(this);
-        }
-        super.addChild(component);
-        // Only auto-render if TUI has been started
-        if (this.isStarted) {
-            this.requestRender();
-        }
+    getAverageLinesRedrawn() {
+        return this.renderCount > 0 ? this.totalLinesRedrawn / this.renderCount : 0;
     }
-    removeChild(component) {
-        super.removeChild(component);
-        this.requestRender();
+    constructor(terminal) {
+        super();
+        this.setTui(this);
+        this.handleResize = this.handleResize.bind(this);
+        this.handleKeypress = this.handleKeypress.bind(this);
+        // Use provided terminal or default to ProcessTerminal
+        this.terminal = terminal || new ProcessTerminal();
     }
     setFocus(component) {
-        // Check if component exists anywhere in the hierarchy
         if (this.findComponent(component)) {
             this.focusedComponent = component;
         }
     }
     findComponent(component) {
-        // Check direct children
         if (this.children.includes(component)) {
             return true;
         }
-        // Recursively search in containers
-        for (const comp of this.children) {
-            if (comp instanceof Container) {
-                if (this.findInContainer(comp, component)) {
+        for (const child of this.children) {
+            if (child instanceof Container) {
+                if (this.findInContainer(child, component)) {
                     return true;
                 }
             }
@@ -223,16 +135,11 @@ export class TUI extends Container {
     }
     findInContainer(container, component) {
         const childCount = container.getChildCount();
-        // Check direct children
         for (let i = 0; i < childCount; i++) {
             const child = container.getChild(i);
             if (child === component) {
                 return true;
             }
-        }
-        // Recursively search in nested containers
-        for (let i = 0; i < childCount; i++) {
-            const child = container.getChild(i);
             if (child instanceof Container) {
                 if (this.findInContainer(child, component)) {
                     return true;
@@ -244,148 +151,243 @@ export class TUI extends Container {
     requestRender() {
         if (!this.isStarted)
             return;
-        this.needsRender = true;
-        // Batch renders on next tick
-        process.nextTick(() => {
-            if (this.needsRender) {
-                this.renderToScreen();
-                this.needsRender = false;
-            }
-        });
+        // Only queue a render if we haven't already
+        if (!this.needsRender) {
+            this.needsRender = true;
+            process.nextTick(() => {
+                if (this.needsRender) {
+                    this.renderToScreen();
+                    this.needsRender = false;
+                }
+            });
+        }
     }
     start() {
-        // Set started flag
         this.isStarted = true;
-        // Hide the terminal cursor
-        process.stdout.write("\x1b[?25l");
-        // Set up raw mode for key capture
+        // Hide cursor
+        this.terminal.write("\x1b[?25l");
+        // Start terminal with handlers
         try {
-            this.wasRaw = process.stdin.isRaw || false;
-            if (process.stdin.setRawMode) {
-                process.stdin.setRawMode(true);
-            }
-            process.stdin.setEncoding("utf8");
-            process.stdin.resume();
-            // Listen for events
-            process.stdout.on("resize", this.handleResize);
-            process.stdin.on("data", this.handleKeypress);
+            this.terminal.start(this.handleKeypress, this.handleResize);
         }
         catch (error) {
-            console.error("Error setting up raw mode:", error);
+            console.error("Error starting terminal:", error);
+        }
+        // Trigger initial render if we have components
+        if (this.children.length > 0) {
+            this.requestRender();
         }
-        // Initial render
-        this.renderToScreen();
     }
     stop() {
-        // Show the terminal cursor again
-        process.stdout.write("\x1b[?25h");
-        process.stdin.removeListener("data", this.handleKeypress);
-        process.stdout.removeListener("resize", this.handleResize);
-        if (process.stdin.setRawMode) {
-            process.stdin.setRawMode(this.wasRaw);
-        }
+        // Show cursor
+        this.terminal.write("\x1b[?25h");
+        // Stop terminal
+        this.terminal.stop();
+        this.isStarted = false;
     }
     renderToScreen(resize = false) {
-        const termWidth = process.stdout.columns || 80;
-        logger.debug("TUI", "Starting render cycle", {
-            termWidth,
-            componentCount: this.children.length,
-            isFirstRender: this.isFirstRender,
-        });
-        const result = this.render(termWidth);
+        const termWidth = this.terminal.columns;
+        const termHeight = this.terminal.rows;
         if (resize) {
-            this.totalLines = result.lines.length;
-            result.keepLines = 0;
             this.isFirstRender = true;
+            this.previousRenderCommands = [];
+            this.previousLines = [];
         }
-        logger.debug("TUI", "Render result", {
-            totalLines: result.lines.length,
-            keepLines: result.keepLines,
-            changed: result.changed,
-            previousTotalLines: this.totalLines,
-        });
-        if (!result.changed) {
-            // Nothing changed - skip render
-            return;
-        }
-        // Handle cursor positioning
+        // Collect all render commands
+        const currentRenderCommands = [];
+        this.collectRenderCommands(this, termWidth, currentRenderCommands);
         if (this.isFirstRender) {
-            // First render: just append to current terminal position
+            this.renderInitial(currentRenderCommands);
             this.isFirstRender = false;
-            // Output all lines normally on first render
-            for (const line of result.lines) {
-                console.log(line);
-            }
         }
         else {
-            // Move cursor up to start of changing content and clear down
-            const linesToMoveUp = this.totalLines - result.keepLines;
-            let output = "";
-            logger.debug("TUI", "Cursor movement", {
-                linesToMoveUp,
-                totalLines: this.totalLines,
-                keepLines: result.keepLines,
-                changingLineCount: result.lines.length - result.keepLines,
+            this.renderLineBased(currentRenderCommands, termHeight);
+        }
+        // Save for next render
+        this.previousRenderCommands = currentRenderCommands;
+        this.renderCount++;
+    }
+    collectRenderCommands(container, width, commands) {
+        const childCount = container.getChildCount();
+        for (let i = 0; i < childCount; i++) {
+            const child = container.getChild(i);
+            if (!child)
+                continue;
+            const result = child.render(width);
+            commands.push({
+                id: child.id,
+                lines: result.lines,
+                changed: result.changed,
             });
+        }
+    }
+    renderInitial(commands) {
+        let output = "";
+        const lines = [];
+        for (const command of commands) {
+            lines.push(...command.lines);
+        }
+        // Output all lines
+        for (let i = 0; i < lines.length; i++) {
+            if (i > 0)
+                output += "\r\n";
+            output += lines[i];
+        }
+        // Add final newline to position cursor below content
+        if (lines.length > 0)
+            output += "\r\n";
+        this.terminal.write(output);
+        // Save what we rendered
+        this.previousLines = lines;
+        this.totalLinesRedrawn += lines.length;
+    }
+    renderLineBased(currentCommands, termHeight) {
+        const viewportHeight = termHeight - 1; // Leave one line for cursor
+        // Build the new lines array
+        const newLines = [];
+        for (const command of currentCommands) {
+            newLines.push(...command.lines);
+        }
+        const totalNewLines = newLines.length;
+        const totalOldLines = this.previousLines.length;
+        // Find first changed line by comparing old and new
+        let firstChangedLine = -1;
+        const minLines = Math.min(totalOldLines, totalNewLines);
+        for (let i = 0; i < minLines; i++) {
+            if (this.previousLines[i] !== newLines[i]) {
+                firstChangedLine = i;
+                break;
+            }
+        }
+        // If all common lines are the same, check if we have different lengths
+        if (firstChangedLine === -1 && totalOldLines !== totalNewLines) {
+            firstChangedLine = minLines;
+        }
+        // No changes at all
+        if (firstChangedLine === -1) {
+            this.previousLines = newLines;
+            return;
+        }
+        // Calculate viewport boundaries
+        const oldViewportStart = Math.max(0, totalOldLines - viewportHeight);
+        const cursorPosition = totalOldLines; // Cursor is one line below last content
+        let output = "";
+        let linesRedrawn = 0;
+        // Check if change is in scrollback (unreachable by cursor)
+        if (firstChangedLine < oldViewportStart) {
+            // Must do full clear and re-render
+            output = "\x1b[3J\x1b[H"; // Clear scrollback and screen, home cursor
+            for (let i = 0; i < newLines.length; i++) {
+                if (i > 0)
+                    output += "\r\n";
+                output += newLines[i];
+            }
+            if (newLines.length > 0)
+                output += "\r\n";
+            linesRedrawn = newLines.length;
+        }
+        else {
+            // Change is in viewport - we can reach it with cursor movements
+            // Calculate viewport position of the change
+            const viewportChangePosition = firstChangedLine - oldViewportStart;
+            // Move cursor to the change position
+            const linesToMoveUp = cursorPosition - oldViewportStart - viewportChangePosition;
             if (linesToMoveUp > 0) {
-                output += `\x1b[${linesToMoveUp}A\x1b[0J`;
+                output += `\x1b[${linesToMoveUp}A`;
             }
-            // Build the output string for all changing lines
-            const changingLines = result.lines.slice(result.keepLines);
-            logger.debug("TUI", "Output details", {
-                linesToMoveUp,
-                changingLinesCount: changingLines.length,
-                keepLines: result.keepLines,
-                totalLines: result.lines.length,
-                previousTotalLines: this.totalLines,
-            });
-            for (const line of changingLines) {
-                output += `${line}\n`;
+            // Now do surgical updates or partial clear based on what's more efficient
+            let currentLine = firstChangedLine;
+            const currentViewportLine = viewportChangePosition;
+            // If we have significant structural changes, just clear and re-render from here
+            const hasSignificantChanges = totalNewLines !== totalOldLines || totalNewLines - firstChangedLine > 10; // Arbitrary threshold
+            if (hasSignificantChanges) {
+                // Clear from cursor to end of screen and render all remaining lines
+                output += "\r\x1b[0J";
+                for (let i = firstChangedLine; i < newLines.length; i++) {
+                    if (i > firstChangedLine)
+                        output += "\r\n";
+                    output += newLines[i];
+                    linesRedrawn++;
+                }
+                if (newLines.length > firstChangedLine)
+                    output += "\r\n";
+            }
+            else {
+                // Do surgical line-by-line updates
+                for (let i = firstChangedLine; i < minLines; i++) {
+                    if (this.previousLines[i] !== newLines[i]) {
+                        // Move to this line if needed
+                        const moveLines = i - currentLine;
+                        if (moveLines > 0) {
+                            output += `\x1b[${moveLines}B`;
+                        }
+                        // Clear and rewrite the line
+                        output += "\r\x1b[2K" + newLines[i];
+                        currentLine = i;
+                        linesRedrawn++;
+                    }
+                }
+                // Handle added/removed lines at the end
+                if (totalNewLines > totalOldLines) {
+                    // Move to end of old content and add new lines
+                    const moveToEnd = totalOldLines - 1 - currentLine;
+                    if (moveToEnd > 0) {
+                        output += `\x1b[${moveToEnd}B`;
+                    }
+                    output += "\r\n";
+                    for (let i = totalOldLines; i < totalNewLines; i++) {
+                        if (i > totalOldLines)
+                            output += "\r\n";
+                        output += newLines[i];
+                        linesRedrawn++;
+                    }
+                    output += "\r\n";
+                }
+                else if (totalNewLines < totalOldLines) {
+                    // Move to end of new content and clear rest
+                    const moveToEnd = totalNewLines - 1 - currentLine;
+                    if (moveToEnd > 0) {
+                        output += `\x1b[${moveToEnd}B`;
+                    }
+                    else if (moveToEnd < 0) {
+                        output += `\x1b[${-moveToEnd}A`;
+                    }
+                    output += "\r\n\x1b[0J";
+                }
+                else {
+                    // Same length, just position cursor at end
+                    const moveToEnd = totalNewLines - 1 - currentLine;
+                    if (moveToEnd > 0) {
+                        output += `\x1b[${moveToEnd}B`;
+                    }
+                    else if (moveToEnd < 0) {
+                        output += `\x1b[${-moveToEnd}A`;
+                    }
+                    output += "\r\n";
+                }
             }
-            // Write everything at once - use synchronous write to prevent race conditions
-            writeSync(process.stdout.fd, output);
         }
-        this.totalLines = result.lines.length;
-        // Clean up sentinels after rendering
-        this.cleanupSentinels();
+        this.terminal.write(output);
+        this.previousLines = newLines;
+        this.totalLinesRedrawn += linesRedrawn;
     }
     handleResize() {
-        // Clear screen, hide cursor, and reset color
-        process.stdout.write("\u001Bc\x1b[?25l\u001B[3J");
-        // Terminal size changed - force re-render all
+        // Clear screen and reset
+        this.terminal.write("\x1b[2J\x1b[H\x1b[?25l");
         this.renderToScreen(true);
     }
     handleKeypress(data) {
-        logger.keyInput("TUI", data);
-        // Don't handle Ctrl+C here - let the global key handler deal with it
-        // if (data.charCodeAt(0) === 3) {
-        // 	logger.info("TUI", "Ctrl+C received");
-        // 	return; // Don't process this key further
-        // }
-        // Call global key handler if set
         if (this.onGlobalKeyPress) {
             const shouldForward = this.onGlobalKeyPress(data);
             if (!shouldForward) {
-                // Global handler consumed the key, don't forward to focused component
                 this.requestRender();
                 return;
             }
         }
-        // Send input to focused component
         if (this.focusedComponent?.handleInput) {
-            logger.debug("TUI", "Forwarding input to focused component", {
-                componentType: this.focusedComponent.constructor.name,
-            });
             this.focusedComponent.handleInput(data);
-            // Trigger re-render after input
             this.requestRender();
         }
-        else {
-            logger.warn("TUI", "No focused component to handle input", {
-                focusedComponent: this.focusedComponent?.constructor.name || "none",
-                hasHandleInput: this.focusedComponent?.handleInput ? "yes" : "no",
-            });
-        }
     }
 }
 //# sourceMappingURL=tui.js.map