@zhijiewang/openharness 0.9.3 → 0.11.0

package/dist/renderer/index.js

@@ -1,22 +1,28 @@
 /**
- * TerminalRenderer — cell-level diffing terminal renderer.
- * Replaces Ink for the REPL. Only writes changed characters to stdout.
+ * TerminalRenderer — sequential output terminal renderer.
+ * Flushed messages flow to scrollback; live area is rewritten in-place
+ * right after the scrollback content each frame (no absolute positioning gap).
  */
 import { CellGrid } from './cells.js';
-import { diff, syncWrite, enterAltScreen, leaveAltScreen, hideCursor, showCursor, moveCursor } from './differ.js';
-import { rasterize } from './layout.js';
+import { styleToSGR, syncWrite, hideCursor, showCursor } from './differ.js';
+import { rasterizeLive } from './layout.js';
+import { getTheme } from '../utils/theme-data.js';
+import { FG } from './colors.js';
 import { createSessionBrowser, browserUp, browserDown, browserSelectedId, browserLoadPreview, browserSearch } from './session-browser.js';
 import { summarizeToolArgs } from '../utils/tool-summary.js';
 import { extractDiffInfo } from './diff.js';
 import { startRawInput } from './input.js';
 export class TerminalRenderer {
     current;
-    previous;
     state;
     stopInput = null;
+    notifyTimers = [];
     animationTimer = null;
     renderPending = false;
     started = false;
+    flushedMessageCount = 0;
+    flushedToolCallIds = new Set();
+    lastLiveLines = 0; // lines the live area occupied last frame (for relative cursor movement)
     // Callbacks
     keypressHandler = null;
     resizeHandler = null;
@@ -31,7 +37,6 @@ export class TerminalRenderer {
         const w = process.stdout.columns ?? 80;
         const h = process.stdout.rows ?? 24;
         this.current = new CellGrid(w, h);
-        this.previous = new CellGrid(w, h);
         this.state = {
             messages: [],
             streamingText: '',
@@ -64,85 +69,21 @@ export class TerminalRenderer {
             bannerLines: null,
             thinkingExpanded: false,
             lastThinkingSummary: null,
-            searchMode: false,
-            searchQuery: '',
-            searchMatchCount: 0,
-            searchCurrentMatch: -1,
+            notifications: [],
         };
     }
     // ── Lifecycle ──
     start() {
         this.started = true;
-        enterAltScreen();
         // Enable SGR mouse tracking (scroll wheel support)
         process.stdout.write('\x1b[?1000h\x1b[?1006h');
         hideCursor();
         // Raw input
         this.stopInput = startRawInput((key) => {
-            // Permission prompt intercepts Y/N
-            if (this.permissionResolve) {
-                const k = key.char.toLowerCase();
-                if (k === 'y') {
-                    const resolve = this.permissionResolve;
-                    this.permissionResolve = null;
-                    this.permissionPrompt = null;
-                    this.state.permissionBox = null;
-                    this.state.permissionDiffVisible = false;
-                    this.state.permissionDiffInfo = null;
-                    this.scheduleRender();
-                    resolve(true);
-                }
-                else if (k === 'n') {
-                    const resolve = this.permissionResolve;
-                    this.permissionResolve = null;
-                    this.permissionPrompt = null;
-                    this.state.permissionBox = null;
-                    this.state.permissionDiffVisible = false;
-                    this.state.permissionDiffInfo = null;
-                    this.scheduleRender();
-                    resolve(false);
-                }
-                else if (k === 'd' && this.state.permissionDiffInfo) {
-                    this.state.permissionDiffVisible = !this.state.permissionDiffVisible;
-                    this.scheduleRender();
-                }
-                return; // Swallow all other keys during permission prompt
-            }
-            // Question prompt intercepts text input
-            if (this.questionResolve && this.state.questionPrompt) {
-                const qp = this.state.questionPrompt;
-                if (key.name === 'return' && qp.input.trim()) {
-                    const resolve = this.questionResolve;
-                    const answer = qp.input.trim();
-                    this.questionResolve = null;
-                    this.state.questionPrompt = null;
-                    this.scheduleRender();
-                    resolve(answer);
-                }
-                else if (key.name === 'backspace') {
-                    if (qp.cursor > 0) {
-                        this.state.questionPrompt = { ...qp, input: qp.input.slice(0, qp.cursor - 1) + qp.input.slice(qp.cursor), cursor: qp.cursor - 1 };
-                        this.scheduleRender();
-                    }
-                }
-                else if (key.name === 'left') {
-                    if (qp.cursor > 0) {
-                        this.state.questionPrompt = { ...qp, cursor: qp.cursor - 1 };
-                        this.scheduleRender();
-                    }
-                }
-                else if (key.name === 'right') {
-                    if (qp.cursor < qp.input.length) {
-                        this.state.questionPrompt = { ...qp, cursor: qp.cursor + 1 };
-                        this.scheduleRender();
-                    }
-                }
-                else if (key.char && key.char.length === 1 && !key.ctrl && !key.meta) {
-                    this.state.questionPrompt = { ...qp, input: qp.input.slice(0, qp.cursor) + key.char + qp.input.slice(qp.cursor), cursor: qp.cursor + 1 };
-                    this.scheduleRender();
-                }
+            if (this.handlePermissionKey(key))
+                return;
+            if (this.handleQuestionKey(key))
                 return;
-            }
             if (this.keypressHandler)
                 this.keypressHandler(key);
         });
@@ -175,16 +116,47 @@ export class TerminalRenderer {
             this.stopInput();
             this.stopInput = null;
         }
-        // Restore terminal: disable mouse, leave alt screen, show cursor, reset attributes
+        for (const t of this.notifyTimers)
+            clearTimeout(t);
+        this.notifyTimers.length = 0;
+        // Restore terminal: disable mouse, show cursor, reset attributes
         process.stdout.write('\x1b[?1006l\x1b[?1000l\x1b[0m');
         showCursor();
-        leaveAltScreen();
+        // Move past live area for clean shell prompt
+        process.stdout.write('\n');
     }
     // ── State updates ──
-    setMessages(msgs) { this.state.messages = msgs; this.scheduleRender(); }
+    setMessages(msgs) {
+        // Reset flush counter if messages array was replaced (e.g., session resume)
+        if (msgs.length < this.flushedMessageCount)
+            this.flushedMessageCount = 0;
+        this.state.messages = msgs;
+        this.scheduleRender();
+    }
     setStreamingText(text) { this.state.streamingText = text; this.scheduleRender(); }
     setThinkingText(text) { this.state.thinkingText = text; this.scheduleRender(); }
     setError(text) { this.state.errorText = text; this.scheduleRender(); }
+    /** Show a toast notification above the input for 5 seconds */
+    notify(text) {
+        const entry = { text };
+        this.state.notifications.push(entry);
+        this.scheduleRender();
+        const timer = setTimeout(() => {
+            const idx = this.state.notifications.indexOf(entry);
+            if (idx >= 0) {
+                this.state.notifications.splice(idx, 1);
+                this.scheduleRender();
+            }
+            const ti = this.notifyTimers.indexOf(timer);
+            if (ti >= 0)
+                this.notifyTimers.splice(ti, 1);
+        }, 5000);
+        this.notifyTimers.push(timer);
+    }
+    scrollBy(delta) {
+        this.state.manualScroll = Math.max(0, Math.min(this.state.manualScroll + delta, 500));
+        this.scheduleRender();
+    }
     setLoading(loading) { this.state.loading = loading; this.scheduleRender(); }
     setInputText(text) { this.state.inputText = text; this.scheduleRender(); }
     setInputCursor(pos) { this.state.inputCursor = pos; this.scheduleRender(); }
@@ -193,8 +165,8 @@ export class TerminalRenderer {
         this.state.companionColor = color;
         this.scheduleRender();
     }
-    setBanner(lines) { this.state.bannerLines = lines; this.scheduleRender(); }
     setStatusHints(text) { this.state.statusHints = text; this.scheduleRender(); }
+    setBannerLines(lines) { this.state.bannerLines = lines; this.scheduleRender(); }
     setAutocomplete(suggestions, index, descriptions) {
         this.state.autocomplete = suggestions;
         this.state.autocompleteDescriptions = descriptions ?? [];
@@ -208,125 +180,18 @@ export class TerminalRenderer {
     getThinkingStartedAt() { return this.state.thinkingStartedAt; }
     setLastThinkingSummary(summary) { this.state.lastThinkingSummary = summary; this.scheduleRender(); }
     toggleThinkingExpanded() { this.state.thinkingExpanded = !this.state.thinkingExpanded; this.scheduleRender(); }
-    // Search mode
-    enterSearchMode() {
-        this.state.searchMode = true;
-        this.state.searchQuery = '';
-        this.state.searchMatchCount = 0;
-        this.state.searchCurrentMatch = -1;
-        this.scheduleRender();
-    }
-    exitSearchMode() {
-        this.state.searchMode = false;
-        this.state.searchQuery = '';
-        this.state.searchMatchCount = 0;
-        this.state.searchCurrentMatch = -1;
-        this.scheduleRender();
-    }
-    setSearchQuery(query) {
-        this.state.searchQuery = query;
-        // Count matches across all messages
-        if (query) {
-            const lq = query.toLowerCase();
-            let count = 0;
-            for (const msg of this.state.messages) {
-                const content = msg.content.toLowerCase();
-                let idx = 0;
-                while ((idx = content.indexOf(lq, idx)) !== -1) {
-                    count++;
-                    idx += lq.length;
-                }
-            }
-            this.state.searchMatchCount = count;
-            this.state.searchCurrentMatch = count > 0 ? 0 : -1;
-        }
-        else {
-            this.state.searchMatchCount = 0;
-            this.state.searchCurrentMatch = -1;
-        }
-        this.scheduleRender();
-    }
-    searchNext() {
-        if (this.state.searchMatchCount > 0) {
-            this.state.searchCurrentMatch = (this.state.searchCurrentMatch + 1) % this.state.searchMatchCount;
-            this.scrollToSearchMatch();
-            this.scheduleRender();
-        }
-    }
-    searchPrev() {
-        if (this.state.searchMatchCount > 0) {
-            this.state.searchCurrentMatch = (this.state.searchCurrentMatch - 1 + this.state.searchMatchCount) % this.state.searchMatchCount;
-            this.scrollToSearchMatch();
-            this.scheduleRender();
-        }
-    }
-    scrollToSearchMatch() {
-        // Estimate which row the current match is on and scroll to it
-        const lq = this.state.searchQuery.toLowerCase();
-        const w = process.stdout.columns ?? 80;
-        let matchIdx = 0;
-        let rowEstimate = 0;
-        for (const msg of this.state.messages) {
-            const content = msg.content;
-            const lines = content.split('\n');
-            for (const line of lines) {
-                const lineRows = Math.max(1, Math.ceil((line.length || 1) / (w - 2)));
-                // Count matches in this line
-                const ll = line.toLowerCase();
-                let idx = 0;
-                while ((idx = ll.indexOf(lq, idx)) !== -1) {
-                    if (matchIdx === this.state.searchCurrentMatch) {
-                        // Found it — scroll so this row is visible
-                        const h = process.stdout.rows ?? 24;
-                        const targetScroll = Math.max(0, rowEstimate - Math.floor(h / 3));
-                        // manualScroll is offset from bottom: convert
-                        const totalRows = this.estimateTotalRows();
-                        this.state.manualScroll = Math.max(0, totalRows - targetScroll - h + 15);
-                        return;
-                    }
-                    matchIdx++;
-                    idx += lq.length;
-                }
-                rowEstimate += lineRows;
-            }
-            rowEstimate++; // gap between messages
-        }
-    }
-    estimateTotalRows() {
-        const w = process.stdout.columns ?? 80;
-        let total = 0;
-        for (const msg of this.state.messages) {
-            const lines = msg.content.split('\n');
-            for (const line of lines) {
-                total += Math.max(1, Math.ceil((line.length || 1) / (w - 2)));
-            }
-            total++;
-        }
-        return total;
-    }
-    isSearchMode() { return this.state.searchMode; }
-    getSearchQuery() { return this.state.searchQuery; }
     setTokenCount(count) { this.state.tokenCount = count; this.scheduleRender(); }
-    scrollUp(rows) {
-        // Cap manualScroll to prevent scrolling past the top
-        const h = process.stdout.rows ?? 24;
-        const maxScroll = Math.max(0, this.estimateTotalRows() - Math.floor(h / 3));
-        this.state.manualScroll = Math.min(this.state.manualScroll + rows, maxScroll);
-        this.scheduleRender();
-    }
-    scrollDown(rows) {
-        this.state.manualScroll = Math.max(0, this.state.manualScroll - rows);
-        this.scheduleRender();
-    }
-    scrollToBottom() {
-        this.state.manualScroll = 0;
-        this.scheduleRender();
-    }
     toggleCodeBlockExpansion() {
         this.state.codeBlocksExpanded = !this.state.codeBlocksExpanded;
         this.scheduleRender();
     }
     // Session browser
+    withSessionBrowser(fn) {
+        if (this.state.sessionBrowser) {
+            this.state.sessionBrowser = fn(this.state.sessionBrowser);
+            this.scheduleRender();
+        }
+    }
     openSessionBrowser() {
         this.state.sessionBrowser = createSessionBrowser();
         this.scheduleRender();
@@ -336,16 +201,10 @@ export class TerminalRenderer {
         this.scheduleRender();
     }
     sessionBrowserUp() {
-        if (this.state.sessionBrowser) {
-            this.state.sessionBrowser = browserLoadPreview(browserUp(this.state.sessionBrowser));
-            this.scheduleRender();
-        }
+        this.withSessionBrowser(sb => browserLoadPreview(browserUp(sb)));
     }
     sessionBrowserDown() {
-        if (this.state.sessionBrowser) {
-            this.state.sessionBrowser = browserLoadPreview(browserDown(this.state.sessionBrowser));
-            this.scheduleRender();
-        }
+        this.withSessionBrowser(sb => browserLoadPreview(browserDown(sb)));
     }
     sessionBrowserSelect() {
         if (!this.state.sessionBrowser)
@@ -356,15 +215,11 @@ export class TerminalRenderer {
         return id;
     }
     sessionBrowserType(char) {
-        if (this.state.sessionBrowser) {
-            this.state.sessionBrowser = browserSearch(this.state.sessionBrowser, this.state.sessionBrowser.searchQuery + char);
-            this.scheduleRender();
-        }
+        this.withSessionBrowser(sb => browserSearch(sb, sb.searchQuery + char));
     }
     sessionBrowserBackspace() {
         if (this.state.sessionBrowser && this.state.sessionBrowser.searchQuery.length > 0) {
-            this.state.sessionBrowser = browserSearch(this.state.sessionBrowser, this.state.sessionBrowser.searchQuery.slice(0, -1));
-            this.scheduleRender();
+            this.withSessionBrowser(sb => browserSearch(sb, sb.searchQuery.slice(0, -1)));
         }
     }
     isSessionBrowserOpen() {
@@ -375,7 +230,7 @@ export class TerminalRenderer {
         this.scheduleRender();
     }
     getToolCall(callId) { return this.state.toolCalls.get(callId); }
-    clearToolCalls() { this.state.toolCalls.clear(); this.scheduleRender(); }
+    clearToolCalls() { this.state.toolCalls.clear(); this.flushedToolCallIds.clear(); this.scheduleRender(); }
     collapseAllToolCalls() { this.state.expandedToolCalls.clear(); this.scheduleRender(); }
     /** Show a question prompt and wait for text answer */
     askQuestion(question, options) {
@@ -422,20 +277,91 @@ export class TerminalRenderer {
     askPermission(toolName, description, riskLevel) {
         this.permissionPrompt = { toolName, description, riskLevel };
         this.state.permissionBox = { toolName, description, riskLevel, suggestion: summarizeToolArgs(toolName, description) };
-        this.state.permissionDiffVisible = false;
         this.state.permissionDiffInfo = extractDiffInfo(toolName, description);
+        // Auto-show diffs for file-modifying tools
+        const isFileTool = /^(Edit|Write|FileEdit|FileWrite)/i.test(toolName);
+        this.state.permissionDiffVisible = isFileTool && this.state.permissionDiffInfo !== null;
         this.scheduleRender();
         return new Promise((resolve) => {
             this.permissionResolve = resolve;
         });
     }
     // ── Input ──
+    /** Clear the live area from screen using relative cursor movement */
+    clearLiveArea() {
+        if (!this.started)
+            return;
+        const cmd = this.lastLiveLines > 0
+            ? `\x1b[${this.lastLiveLines}A\r\x1b[J`
+            : '\r\x1b[J';
+        syncWrite(cmd);
+        this.lastLiveLines = 0;
+    }
     onKeypress(handler) {
         this.keypressHandler = handler;
     }
     onAnimation(handler) {
         this.animationCallback = handler;
     }
+    // ── Input routing ──
+    /** Handle permission prompt keys (Y/N/D). Returns true if key was consumed. */
+    handlePermissionKey(key) {
+        if (!this.permissionResolve)
+            return false;
+        const k = key.char.toLowerCase();
+        if (k === 'y' || k === 'n') {
+            const resolve = this.permissionResolve;
+            this.permissionResolve = null;
+            this.permissionPrompt = null;
+            this.state.permissionBox = null;
+            this.state.permissionDiffVisible = false;
+            this.state.permissionDiffInfo = null;
+            this.scheduleRender();
+            resolve(k === 'y');
+        }
+        else if (k === 'd' && this.state.permissionDiffInfo) {
+            this.state.permissionDiffVisible = !this.state.permissionDiffVisible;
+            this.scheduleRender();
+        }
+        return true; // Swallow all keys during permission prompt
+    }
+    /** Handle question prompt text input. Returns true if key was consumed. */
+    handleQuestionKey(key) {
+        if (!this.questionResolve || !this.state.questionPrompt)
+            return false;
+        const qp = this.state.questionPrompt;
+        if (key.name === 'return' && qp.input.trim()) {
+            const resolve = this.questionResolve;
+            const answer = qp.input.trim();
+            this.questionResolve = null;
+            this.state.questionPrompt = null;
+            this.scheduleRender();
+            resolve(answer);
+        }
+        else if (key.name === 'backspace') {
+            if (qp.cursor > 0) {
+                this.state.questionPrompt = { ...qp, input: qp.input.slice(0, qp.cursor - 1) + qp.input.slice(qp.cursor), cursor: qp.cursor - 1 };
+                this.scheduleRender();
+            }
+        }
+        else if (key.name === 'left') {
+            if (qp.cursor > 0) {
+                this.state.questionPrompt = { ...qp, cursor: qp.cursor - 1 };
+                this.scheduleRender();
+            }
+        }
+        else if (key.name === 'right') {
+            if (qp.cursor < qp.input.length) {
+                this.state.questionPrompt = { ...qp, cursor: qp.cursor + 1 };
+                this.scheduleRender();
+            }
+        }
+        else if (key.char && key.char.length === 1 && !key.ctrl && !key.meta) {
+            this.state.questionPrompt = { ...qp, input: qp.input.slice(0, qp.cursor) + key.char + qp.input.slice(qp.cursor), cursor: qp.cursor + 1 };
+            this.scheduleRender();
+        }
+        return true;
+    }
     // ── Rendering ──
     scheduleRender() {
         if (this.renderPending || !this.started)
@@ -447,29 +373,170 @@ export class TerminalRenderer {
                 this.render();
         });
     }
+    /** Apply lightweight markdown styling to a line for scrollback output */
+    styleMarkdownLine(line) {
+        return line
+            .replace(/\*\*(.+?)\*\*/g, '\x1b[1m$1\x1b[0m') // bold → full reset after
+            .replace(/`([^`]+)`/g, '\x1b[2m$1\x1b[0m') // inline code → dim, full reset after
+            .replace(/^(#{1,3})\s+(.+)$/, '\x1b[1m\x1b[36m$1 $2\x1b[0m'); // headings → bold cyan
+    }
+    /** Calculate the max text width for flushed scrollback output, reserving space for companion */
+    flushTextWidth() {
+        const maxWidth = process.stdout.columns ?? 80;
+        if (!this.state.companionLines)
+            return maxWidth;
+        const compWidth = Math.max(...this.state.companionLines.map(l => l.length), 0) + 2;
+        return Math.max(40, maxWidth - compWidth);
+    }
+    /** Flush completed messages to terminal scrollback (native scrollbar) */
+    flushMessages() {
+        const messages = this.state.messages;
+        let didFlush = false;
+        const textWidth = this.flushTextWidth();
+        while (this.flushedMessageCount < messages.length) {
+            const msg = messages[this.flushedMessageCount];
+            // Don't flush the message currently being streamed
+            if (this.state.loading && this.flushedMessageCount === messages.length - 1 && msg.meta?.isStreaming)
+                break;
+            const t = getTheme();
+            const colorCode = msg.role === 'user' ? `\x1b[${FG(t.user)}m\x1b[1m` : msg.role === 'assistant' ? `\x1b[${FG(t.assistant)}m` : '\x1b[2m';
+            const prefixChar = msg.role === 'user' ? '❯ ' : msg.role === 'assistant' ? '◆ ' : '  ';
+            const lines = msg.content.split('\n');
+            for (let i = 0; i < lines.length; i++) {
+                const styledLine = msg.role === 'assistant' ? this.styleMarkdownLine(lines[i]) : lines[i];
+                const linePrefix = i === 0 ? prefixChar : '  ';
+                const fullLine = linePrefix + styledLine;
+                process.stdout.write(colorCode + fullLine.slice(0, textWidth) + '\x1b[0m\n');
+            }
+            // Divider after each message
+            process.stdout.write('\x1b[2m' + '─'.repeat(Math.min(60, textWidth)) + '\x1b[0m\n');
+            this.flushedMessageCount++;
+            didFlush = true;
+        }
+        // Flush completed tool calls as single-line summaries (once each)
+        if (didFlush) {
+            for (const [callId, tc] of this.state.toolCalls) {
+                if (tc.status === 'running')
+                    continue;
+                if (this.flushedToolCallIds.has(callId))
+                    continue;
+                this.flushedToolCallIds.add(callId);
+                const t = getTheme();
+                const icon = tc.status === 'done' ? `\x1b[${FG(t.success)}m✓` : `\x1b[${FG(t.error)}m✗`;
+                const summary = tc.resultSummary ? `  ${tc.resultSummary}` : '';
+                const elapsed = tc.startedAt ? ` · ${Math.floor((Date.now() - tc.startedAt) / 1000)}s` : '';
+                const toolLine = `${icon} ${tc.toolName}\x1b[0m \x1b[2m${tc.args ?? ''}${summary}${elapsed}\x1b[0m`;
+                process.stdout.write(toolLine.slice(0, textWidth) + '\n');
+            }
+        }
+    }
+    /** Convert a CellGrid to sequential ANSI output (line-by-line, no absolute positioning) */
+    renderGridToAnsi(grid) {
+        const parts = [];
+        for (let r = 0; r < grid.height; r++) {
+            // Find last non-space cell to avoid writing trailing whitespace
+            let lastCol = grid.width - 1;
+            while (lastCol >= 0 && grid.cells[r][lastCol].char === ' ' && !grid.cells[r][lastCol].style.bg) {
+                lastCol--;
+            }
+            let lastStyle = '';
+            for (let c = 0; c <= lastCol; c++) {
+                const cell = grid.cells[r][c];
+                const sgr = styleToSGR(cell.style);
+                if (sgr !== lastStyle) {
+                    parts.push(sgr);
+                    lastStyle = sgr;
+                }
+                parts.push(cell.char);
+            }
+            parts.push('\x1b[0m\x1b[K'); // reset + erase to end of line (clear stale content)
+            if (r < grid.height - 1)
+                parts.push('\n');
+        }
+        return parts.join('');
+    }
     render() {
         const w = process.stdout.columns ?? 80;
         const h = process.stdout.rows ?? 24;
-        // Resize if needed
-        if (w !== this.current.width || h !== this.current.height) {
-            this.current = new CellGrid(w, h);
-            this.previous = new CellGrid(w, h); // force full repaint
+        // 1. Move UP from cursor to start of old live area, then erase below.
+        //    lastLiveLines = cursor.cursorRow from last frame (distance from cursor to live area start).
+        //    Using relative movement so it works correctly even after terminal scroll.
+        let eraseCmd = '';
+        if (this.lastLiveLines > 0) {
+            eraseCmd += `\x1b[${this.lastLiveLines}A`;
         }
-        this.current.clear();
-        const cursor = rasterize(this.state, this.current);
-        const output = diff(this.previous, this.current);
-        if (output) {
-            syncWrite(output);
+        eraseCmd += '\r\x1b[J'; // column 0, erase to end of screen
+        syncWrite(eraseCmd);
+        // 2. Flush completed messages to scrollback (sequential, cursor moves down)
+        this.flushMessages();
+        // 3. Calculate and render new live area
+        const liveHeight = Math.min(h, this.calculateLiveHeight());
+        if (w !== this.current.width || liveHeight !== this.current.height) {
+            this.current = new CellGrid(w, liveHeight);
         }
-        // Show cursor at input position
-        moveCursor(cursor.cursorRow, cursor.cursorCol);
+        this.current.clear();
+        const cursor = rasterizeLive(this.state, this.current);
+        // 4. Write live area sequentially, then position cursor using relative movement.
+        //    After grid output, cursor may be in pending-wrap state at end of last row.
+        //    \r resolves wrap and goes to column 0, then we move up to cursor row.
+        const liveOutput = this.renderGridToAnsi(this.current);
+        const upFromEnd = liveHeight - 1 - cursor.cursorRow;
+        syncWrite(liveOutput + '\r' +
+            (upFromEnd > 0 ? `\x1b[${upFromEnd}A` : '') +
+            `\x1b[${cursor.cursorCol + 1}G` // move to column (1-indexed)
+        );
         showCursor();
-        // Swap buffers
-        this.previous = this.current.clone();
+        // Track cursor's distance from live area start (NOT total height).
+        // Next frame moves up by this amount to get back to live area start.
+        this.lastLiveLines = cursor.cursorRow;
+    }
+    /** Estimate the height needed for the live area */
+    calculateLiveHeight() {
+        let rows = 3; // border + input + hints (minimum)
+        // Banner only shown when no messages and not loading (must match rasterizeLive condition)
+        if (this.state.bannerLines && this.state.messages.length === 0 && !this.state.loading) {
+            rows += this.state.bannerLines.length + 1;
+        }
+        if (this.state.loading && this.state.streamingText)
+            rows += Math.min(this.state.streamingText.split('\n').length, 10);
+        if (this.state.thinkingText)
+            rows += this.state.thinkingExpanded ? 10 : 1;
+        if (!this.state.loading && this.state.lastThinkingSummary)
+            rows += 1;
+        if (this.state.loading && !this.state.streamingText && !this.state.thinkingText)
+            rows += 1; // spinner
+        if (this.state.errorText)
+            rows += 1;
+        for (const [, tc] of this.state.toolCalls) {
+            rows += 2; // header + possible description/agent line
+            if (tc.status === 'running' && tc.liveOutput)
+                rows += Math.min(tc.liveOutput.length, 3);
+        }
+        if (this.state.contextWarning)
+            rows += 1;
+        rows += Math.min(this.state.notifications.length, 2); // toast notifications
+        if (this.state.statusLine)
+            rows += 1;
+        rows += this.state.autocomplete.length;
+        if (this.state.permissionBox) {
+            rows += 3;
+            if (this.state.permissionDiffVisible && this.state.permissionDiffInfo)
+                rows += 15;
+        }
+        if (this.state.questionPrompt)
+            rows += 3 + (this.state.questionPrompt.options?.length ?? 0);
+        if (this.state.companionLines)
+            rows = Math.max(rows, this.state.companionLines.length + 2);
+        const inputLineCount = Math.min(5, (this.state.inputText.match(/\n/g)?.length ?? 0) + 1);
+        rows += inputLineCount - 1;
+        const h = process.stdout.rows ?? 24;
+        // On initial screen with banner, fill the terminal
+        if (this.state.bannerLines && this.state.messages.length === 0 && !this.state.loading) {
+            return h;
+        }
+        return Math.min(rows, Math.floor(h * 0.7)); // never exceed 70% of terminal
     }
     handleResize() {
-        // Force full repaint on resize
-        this.previous = new CellGrid(1, 1);
         this.scheduleRender();
     }
 }