erosolar-cli 2.1.166 → 2.1.168

package/dist/ui/UnifiedUIRenderer.js

@@ -11,9 +11,9 @@
 import * as readline from 'node:readline';
 import { EventEmitter } from 'node:events';
 import { homedir } from 'node:os';
-import { theme, spinnerFrames } from './theme.js';
+import { theme } from './theme.js';
 import { isPlainOutputMode } from './outputMode.js';
-import { ContextMeter, disposeAnimations } from './animatedStatus.js';
+import { renderDivider } from './unified/layout.js';
 const ESC = {
     HIDE_CURSOR: '\x1b[?25l',
     SHOW_CURSOR: '\x1b[?25h',
@@ -27,11 +27,6 @@ const ESC = {
     ERASE_DOWN: '\x1b[J',
     REVERSE: '\x1b[7m',
     RESET: '\x1b[0m',
-    // Scroll region control - CRITICAL for fixed bottom overlay
-    SET_SCROLL_REGION: (top, bottom) => `\x1b[${top};${bottom}r`,
-    RESET_SCROLL_REGION: '\x1b[r',
-    SAVE_CURSOR: '\x1b[s',
-    RESTORE_CURSOR: '\x1b[u',
 };
 const COLLAPSE_HINT = theme.ui.muted('…'); // subtle ellipsis, no key hint
 const NEWLINE_PLACEHOLDER = '↵';
@@ -56,35 +51,9 @@ export class UnifiedUIRenderer extends EventEmitter {
     hotkeysInToggleLine = new Set();
     collapsedPaste = null;
     mode = 'idle';
-    streamingStartTime = null;
     statusMessage = null;
     statusOverride = null;
     statusStreaming = null;
-    // Animated UI components
-    streamingSpinner = null;
-    thinkingIndicator = null;
-    contextMeter;
-    spinnerFrame = 0;
-    spinnerInterval = null;
-    // Compacting status animation
-    compactingStatusMessage = '';
-    compactingStatusFrame = 0;
-    compactingStatusInterval = null;
-    compactingSpinnerFrames = ['✻', '✼', '✻', '✺'];
-    // Animated activity line (e.g., "✳ Ruminating… (esc to interrupt · 34s · ↑1.2k)")
-    activityMessage = null;
-    activityPhraseIndex = 0;
-    activityStarFrame = 0;
-    activityStarFrames = ['✳', '✴', '✵', '✶', '✷', '✸'];
-    // Token count during streaming
-    streamingTokens = 0;
-    // Fun phrases to cycle through when no specific activity is provided
-    funActivityPhrases = [
-        'Moseying', 'Ruminating', 'Pondering', 'Cogitating', 'Mulling',
-        'Contemplating', 'Deliberating', 'Noodling', 'Percolating', 'Stewing',
-        'Brewing', 'Simmering', 'Churning', 'Puzzling', 'Meandering',
-        'Wandering', 'Musing', 'Daydreaming', 'Woolgathering', 'Chewing',
-    ];
     statusMeta = {};
     toggleState = {
         verificationEnabled: false,
@@ -100,7 +69,10 @@ export class UnifiedUIRenderer extends EventEmitter {
     lastPromptEvent = null;
     promptHeight = 0;
     lastOverlayHeight = 0;
+    lastPromptIndex = 0;
+    overlayBottomPadding = 1;
     inlinePanel = [];
+    overlayInvalidated = false;
     hasConversationContent = false;
     isPromptActive = false;
     inputRenderOffset = 0;
@@ -119,7 +91,7 @@ export class UnifiedUIRenderer extends EventEmitter {
     lastRenderedEventKey = null;
     lastOutputEndedWithNewline = true;
     hasRenderedPrompt = false;
-    hasEverRenderedOverlay = false; // Track if we've ever rendered for inline clearing
+    hasEverRenderedOverlay = false; // Track if we've ever rendered to prevent first-render scrollback pollution
     lastOverlay = null;
     allowPromptRender = true;
     inputCapture = null;
@@ -129,8 +101,6 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.input = input;
         this.interactive = Boolean(this.output.isTTY && this.input.isTTY && !process.env['CI']);
         this.plainMode = isPlainOutputMode() || !this.interactive;
-        // Initialize animated components
-        this.contextMeter = new ContextMeter();
         this.rl = readline.createInterface({
             input: this.input,
             output: this.output,
@@ -162,6 +132,9 @@ export class UnifiedUIRenderer extends EventEmitter {
             this.updateTerminalSize();
             this.hasRenderedPrompt = false;
             this.lastOutputEndedWithNewline = true;
+            // Don't render prompt immediately - wait for banner/content to be added first.
+            // The prompt will render after the event queue processes the welcome banner.
+            // This prevents the prompt from appearing at the bottom before the banner shows.
             this.write(ESC.SHOW_CURSOR);
             return;
         }
@@ -174,27 +147,11 @@ export class UnifiedUIRenderer extends EventEmitter {
     cleanup() {
         this.cancelInputCapture(new Error('Renderer disposed'));
         this.cancelPlainPasteCapture();
-        // Stop any running animations
-        if (this.spinnerInterval) {
-            clearInterval(this.spinnerInterval);
-            this.spinnerInterval = null;
-        }
-        if (this.streamingSpinner) {
-            this.streamingSpinner.stop();
-            this.streamingSpinner = null;
-        }
-        if (this.thinkingIndicator) {
-            this.thinkingIndicator.stop();
-            this.thinkingIndicator = null;
-        }
-        this.contextMeter.dispose();
-        disposeAnimations();
         if (!this.interactive) {
             this.rl.close();
             return;
         }
         if (!this.plainMode) {
-            // Clear the prompt area so it doesn't remain in scrollback history
             this.clearPromptArea();
             this.write(ESC.DISABLE_BRACKETED_PASTE);
             this.write(ESC.SHOW_CURSOR);
@@ -246,25 +203,15 @@ export class UnifiedUIRenderer extends EventEmitter {
             return;
         }
         if (key.ctrl && key.name === 'c') {
-            // Three-stage Ctrl+C behavior:
-            // 1. Clear chat box if it has text
-            // 2. Interrupt/pause the AI if streaming
-            // 3. Quit the CLI if already idle
-            if (this.buffer.length > 0) {
-                // Stage 1: Clear the input buffer
+            if (this.buffer.length === 0) {
+                this.emit('interrupt');
+            }
+            else {
                 this.buffer = '';
                 this.cursor = 0;
                 this.renderPrompt();
                 this.emitInputChange();
             }
-            else if (this.mode === 'streaming') {
-                // Stage 2: Interrupt the AI run
-                this.emit('interrupt');
-            }
-            else {
-                // Stage 3: Quit the CLI (emit exit signal)
-                this.emit('exit');
-            }
             return;
         }
         if (key.ctrl && key.name === 'd') {
@@ -283,11 +230,6 @@ export class UnifiedUIRenderer extends EventEmitter {
                 return;
             }
         }
-        // Ctrl+O: Expand last tool result
-        if (key.ctrl && key.name === 'o') {
-            this.emit('expand-tool-result');
-            return;
-        }
         if (key.name === 'return' || key.name === 'enter') {
             if (this.collapsedPaste) {
                 this.expandCollapsedPaste();
@@ -297,12 +239,9 @@ export class UnifiedUIRenderer extends EventEmitter {
             // If a slash command suggestion is highlighted, pressing Enter submits it immediately
             if (this.applySuggestion(true))
                 return;
-            // Fallback: if buffer starts with '/' and suggestions exist, use the selected/first one
+            // If buffer starts with '/' and the first suggestion exists, submit it
             if (this.buffer.startsWith('/') && this.suggestions.length > 0) {
-                const safeIndex = this.suggestionIndex >= 0 && this.suggestionIndex < this.suggestions.length
-                    ? this.suggestionIndex
-                    : 0;
-                this.buffer = this.suggestions[safeIndex]?.command ?? this.buffer;
+                this.buffer = this.suggestions[this.suggestionIndex >= 0 ? this.suggestionIndex : 0]?.command ?? this.buffer;
             }
             this.submitText(this.buffer);
             return;
@@ -679,11 +618,7 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!this.buffer.startsWith('/') || this.suggestions.length === 0) {
             return false;
         }
-        // Ensure suggestionIndex is valid, default to first item
-        const safeIndex = this.suggestionIndex >= 0 && this.suggestionIndex < this.suggestions.length
-            ? this.suggestionIndex
-            : 0;
-        const selected = this.suggestions[safeIndex];
+        const selected = this.suggestions[this.suggestionIndex] ?? this.suggestions[0];
         if (!selected) {
             return false;
         }
@@ -728,7 +663,6 @@ export class UnifiedUIRenderer extends EventEmitter {
             normalized === 'thought' ||
             normalized === 'stream' ||
             normalized === 'tool' ||
-            normalized === 'tool-result' ||
             normalized === 'build' ||
             normalized === 'test') {
             this.hasConversationContent = true;
@@ -855,7 +789,6 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (event.type !== 'prompt') {
             this.lastRenderedEventKey = signature;
         }
-        // Clear the prompt area before writing new content
         if (this.promptHeight > 0 || this.lastOverlay) {
             this.clearPromptArea();
         }
@@ -867,6 +800,10 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
         this.output.write(formatted);
         this.lastOutputEndedWithNewline = formatted.endsWith('\n');
+        // Overlay must be re-anchored after new scrollback is written
+        this.overlayInvalidated = true;
+        // Don't re-render prompt after every event - wait for queue to finish
+        // This prevents premature prompt rendering that cuts off responses
     }
     normalizeEventType(type) {
         switch (type) {
@@ -879,9 +816,8 @@ export class UnifiedUIRenderer extends EventEmitter {
                 return 'stream';
             case 'tool':
             case 'tool-call':
-                return 'tool';
             case 'tool-result':
-                return 'tool-result';
+                return 'tool';
             case 'build':
                 return 'build';
             case 'test':
@@ -907,378 +843,35 @@ export class UnifiedUIRenderer extends EventEmitter {
             const lines = event.content.split('\n').map(line => line.trimEnd());
             return `${lines.join('\n')}\n`;
         }
-        // Compact, user-friendly formatting
         switch (event.type) {
             case 'prompt':
-                // User prompt - just the text (prompt box handles styling)
-                return `${theme.primary('>')} ${event.content}\n`;
+                return `\n> ${event.content}\n`; // Plain > like Claude Code
             case 'thought': {
-                // Programmatic filter: reject content that looks like internal/garbage output
-                if (this.isGarbageOutput(event.content)) {
-                    return '';
-                }
-                // Strip any existing bullet prefix (○ or ⏺) and use consistent ⏺
-                const cleanContent = event.content.replace(/^[○⏺]\s*/, '');
-                return `⏺ ${cleanContent}\n`;
-            }
-            case 'tool': {
-                // Compact tool display: ⚡ToolName → result
-                const content = event.content.replace(/^[⏺⚙○]\s*/, '');
-                return this.formatCompactToolCall(content);
-            }
-            case 'tool-result': {
-                // Inline result: └─ summary
-                return this.formatCompactToolResult(event.content);
+                // Claude Code style: ⏺ first line, then indented continuation
+                const lines = event.content.split('\n');
+                const formatted = lines
+                    .map((line, i) => (i === 0 ? `${bullet} ${line}` : `  ${line}`))
+                    .join('\n');
+                return `\n${formatted}\n`;
             }
+            case 'tool':
+                // Tool calls don't have bullet in Claude Code - just the name
+                return `\n${event.content}\n`;
             case 'build':
-                return `${bullet} ${theme.warning('Build')} ${theme.ui.muted('→')} ${event.content}\n`;
+                return `\n${event.content}\n`;
             case 'test':
-                return `${bullet} ${theme.info('Test')} ${theme.ui.muted('→')} ${event.content}\n`;
+                return `\n${event.content}\n`;
             case 'stream':
                 return event.content;
             case 'response':
             default: {
-                // Programmatic filter: reject content that looks like internal/garbage output
-                if (this.isGarbageOutput(event.content)) {
-                    return '';
-                }
-                // Clean response without excessive bullets
-                return this.formatCompactResponse(event.content);
-            }
-        }
-    }
-    /**
-     * Programmatic garbage detection - checks if content looks like internal/system output
-     * that shouldn't be shown to users. Uses structural checks, not pattern matching.
-     */
-    isGarbageOutput(content) {
-        if (!content || content.trim().length === 0)
-            return true;
-        // Structural check: content starting with < that isn't valid markdown/code
-        if (content.startsWith('<') && !content.startsWith('<http') && !content.startsWith('<!')) {
-            return true;
-        }
-        // Structural check: contains "to=functions." or "to=tools." (internal routing)
-        if (content.includes('to=functions.') || content.includes('to=tools.')) {
-            return true;
-        }
-        // Structural check: looks like internal instruction (quoted system text)
-        if (content.startsWith('"') && content.includes('block') && content.includes('tool')) {
-            return true;
-        }
-        // Structural check: very short content that's just timing info
-        if (content.length < 30 && /elapsed|seconds?|ms\b/i.test(content)) {
-            return true;
-        }
-        // Structural check: gibberish - high ratio of non-word characters
-        const alphaCount = (content.match(/[a-zA-Z]/g) || []).length;
-        const totalCount = content.replace(/\s/g, '').length;
-        if (totalCount > 20 && alphaCount / totalCount < 0.5) {
-            return true; // Less than 50% letters = likely garbage
-        }
-        return false;
-    }
-    /**
-     * Format text in Claude Code style: ⏺ prefix with wrapped continuation lines
-     * Example:
-     *   ⏺ The AI ran tools but gave no response. Need to fix
-     *     the response handling. Let me check where the AI's
-     *     text response should be displayed:
-     */
-    formatClaudeCodeBlock(content) {
-        const bullet = '⏺';
-        const maxWidth = Math.min(this.cols - 4, 56); // Leave room for prefix and margins
-        const lines = content.split('\n');
-        const result = [];
-        for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-            const line = lines[lineIdx];
-            if (!line.trim()) {
-                result.push('');
-                continue;
-            }
-            // Word-wrap each line
-            const words = line.split(/(\s+)/);
-            let currentLine = '';
-            for (const word of words) {
-                if ((currentLine + word).length > maxWidth && currentLine.trim()) {
-                    // First line of this paragraph gets ⏺, rest get indent
-                    const prefix = result.length === 0 && lineIdx === 0 ? `${bullet} ` : '  ';
-                    result.push(`${prefix}${currentLine.trimEnd()}`);
-                    currentLine = word.trimStart();
-                }
-                else {
-                    currentLine += word;
-                }
-            }
-            if (currentLine.trim()) {
-                const prefix = result.length === 0 && lineIdx === 0 ? `${bullet} ` : '  ';
-                result.push(`${prefix}${currentLine.trimEnd()}`);
-            }
-        }
-        return result.join('\n') + '\n';
-    }
-    /**
-     * Format a tool call in Claude Code style:
-     *   ⏺ Search(pattern: "foo", path: "src",
-     *           output_mode: "content", head_limit: 30)
-     */
-    formatToolCall(content) {
-        const bullet = '⏺';
-        // Parse tool name and arguments
-        const match = content.match(/^(\w+)\((.*)\)$/s);
-        if (!match) {
-            // Simple format without args
-            const nameMatch = content.match(/^(\w+)/);
-            if (nameMatch) {
-                return `${bullet} ${theme.info(nameMatch[1])}\n`;
-            }
-            return `${bullet} ${content}\n`;
-        }
-        const toolName = match[1];
-        const argsStr = match[2];
-        const maxWidth = Math.min(this.cols - 4, 56);
-        // Format: ⏺ ToolName(args...)
-        const prefix = `${bullet} ${theme.info(toolName)}(`;
-        const prefixLen = toolName.length + 3; // "⏺ ToolName(" visible length
-        const indent = ' '.repeat(prefixLen + 4); // Extra indent for wrapped args
-        // Parse and format arguments
-        const args = this.parseToolArgs(argsStr);
-        if (args.length === 0) {
-            return `${prefix})\n`;
-        }
-        const lines = [];
-        let currentLine = prefix;
-        for (let i = 0; i < args.length; i++) {
-            const arg = args[i];
-            const argText = `${theme.ui.muted(arg.key + ':')} ${this.formatArgValue(arg.value)}`;
-            const separator = i < args.length - 1 ? ', ' : ')';
-            // Check if this arg fits on current line
-            const testLine = currentLine + argText + separator;
-            if (this.stripAnsi(testLine).length > maxWidth && currentLine !== prefix) {
-                lines.push(currentLine.trimEnd());
-                currentLine = indent + argText + separator;
-            }
-            else {
-                currentLine += argText + separator;
+                // Claude Code style: ⏺ for first line, indent rest
+                const lines = event.content.split('\n');
+                return (`\n${lines
+                    .map((line, i) => (i === 0 ? `${bullet} ${line}` : `  ${line}`))
+                    .join('\n')}\n`);
             }
         }
-        if (currentLine.trim()) {
-            lines.push(currentLine.trimEnd());
-        }
-        return lines.join('\n') + '\n';
-    }
-    /**
-     * Parse tool arguments from string like: key: "value", key2: value2
-     */
-    parseToolArgs(argsStr) {
-        const args = [];
-        // Simple regex to extract key: value pairs
-        const regex = /(\w+):\s*("(?:[^"\\]|\\.)*"|[^,\)]+)/g;
-        let match;
-        while ((match = regex.exec(argsStr)) !== null) {
-            args.push({ key: match[1], value: match[2].trim() });
-        }
-        return args;
-    }
-    /**
-     * Format an argument value (truncate long strings)
-     */
-    formatArgValue(value) {
-        // Remove surrounding quotes if present
-        const isQuoted = value.startsWith('"') && value.endsWith('"');
-        const inner = isQuoted ? value.slice(1, -1) : value;
-        // Truncate long values
-        const maxLen = 40;
-        const truncated = inner.length > maxLen ? inner.slice(0, maxLen - 3) + '...' : inner;
-        return isQuoted ? `"${truncated}"` : truncated;
-    }
-    /**
-     * Format a tool result in Claude Code style:
-     *   ⎿  Found 12 lines (ctrl+o to expand)
-     */
-    formatToolResult(content) {
-        // Check if this is a summary line (e.g., "Found X lines")
-        const summaryMatch = content.match(/^(Found \d+ (?:lines?|files?|matches?)|Read \d+ lines?|Wrote \d+ lines?|Edited|Created|Deleted)/i);
-        if (summaryMatch) {
-            return `  ${theme.ui.muted('⎿')}  ${content} ${theme.ui.muted('(ctrl+o to expand)')}\n`;
-        }
-        // For other results, show truncated preview
-        const lines = content.split('\n');
-        if (lines.length > 3) {
-            const preview = lines.slice(0, 2).join('\n');
-            return `  ${theme.ui.muted('⎿')}  ${preview}\n  ${theme.ui.muted(`... ${lines.length - 2} more lines (ctrl+o to expand)`)}\n`;
-        }
-        return `  ${theme.ui.muted('⎿')}  ${content}\n`;
-    }
-    /**
-     * Format a compact tool call: ⏺ Read → file.ts
-     */
-    formatCompactToolCall(content) {
-        const bullet = '⏺';
-        // Parse tool name and args
-        const match = content.match(/^(\w+)\s*(?:\((.*)\))?$/s);
-        if (!match) {
-            return `${bullet} ${content}\n`;
-        }
-        const toolName = match[1];
-        const argsStr = match[2]?.trim() || '';
-        // If no args, just show tool name
-        if (!argsStr) {
-            return `${bullet} ${theme.info(toolName)}\n`;
-        }
-        // Format full params in Claude Code style with line wrapping
-        // For long args, wrap them nicely with continuation indent
-        const prefix = `${bullet} ${theme.info(toolName)}(`;
-        const suffix = ')';
-        const maxWidth = this.cols - 8; // Leave room for margins
-        // Parse individual params
-        const params = this.parseToolParams(argsStr);
-        if (params.length === 0) {
-            return `${prefix}${argsStr}${suffix}\n`;
-        }
-        // Format params with proper wrapping
-        return this.formatToolParams(toolName, params, maxWidth);
-    }
-    /**
-     * Parse tool params from args string
-     */
-    parseToolParams(argsStr) {
-        const params = [];
-        // Match key: "value" or key: value patterns
-        const regex = /(\w+):\s*("(?:[^"\\]|\\.)*"|[^,\n]+)/g;
-        let match;
-        while ((match = regex.exec(argsStr)) !== null) {
-            params.push({ key: match[1], value: match[2].trim() });
-        }
-        return params;
-    }
-    /**
-     * Format tool params in Claude Code style with wrapping
-     */
-    formatToolParams(toolName, params, maxWidth) {
-        const bullet = '⏺';
-        const lines = [];
-        const indent = '        '; // 8 spaces for continuation
-        let currentLine = `${bullet} ${theme.info(toolName)}(`;
-        let firstParam = true;
-        for (const param of params) {
-            const paramStr = firstParam
-                ? `${param.key}: ${param.value}`
-                : `, ${param.key}: ${param.value}`;
-            // Check if adding this param would exceed width
-            const testLine = currentLine + paramStr;
-            const plainLength = testLine.replace(/\x1b\[[0-9;]*m/g, '').length;
-            if (plainLength > maxWidth && !firstParam) {
-                // Start new line
-                lines.push(currentLine);
-                currentLine = indent + `${param.key}: ${param.value}`;
-            }
-            else {
-                currentLine += paramStr;
-            }
-            firstParam = false;
-        }
-        currentLine += ')';
-        lines.push(currentLine);
-        return lines.join('\n') + '\n';
-    }
-    /**
-     * Extract a short summary from tool args
-     */
-    extractToolSummary(toolName, argsStr) {
-        const tool = toolName.toLowerCase();
-        // Extract path/file for file operations
-        if (['read', 'write', 'edit', 'glob', 'grep', 'search'].includes(tool)) {
-            const pathMatch = argsStr.match(/(?:path|file_path|pattern):\s*"([^"]+)"/);
-            if (pathMatch) {
-                const path = pathMatch[1];
-                // Shorten long paths
-                const short = path.length > 30 ? '…' + path.slice(-28) : path;
-                return theme.ui.muted(short);
-            }
-        }
-        // Extract command for bash
-        if (tool === 'bash') {
-            const cmdMatch = argsStr.match(/command:\s*"([^"]+)"/);
-            if (cmdMatch) {
-                const cmd = cmdMatch[1];
-                const short = cmd.length > 40 ? cmd.slice(0, 37) + '…' : cmd;
-                return theme.ui.muted(short);
-            }
-        }
-        return null;
-    }
-    /**
-     * Format a compact tool result: ⎿  Found X lines (ctrl+o to expand)
-     */
-    formatCompactToolResult(content) {
-        // Parse common result patterns for summary
-        const lineMatch = content.match(/(\d+)\s*lines?/i);
-        const fileMatch = content.match(/(\d+)\s*(?:files?|matches?)/i);
-        const readMatch = content.match(/read.*?(\d+)\s*lines?/i);
-        let summary;
-        if (readMatch) {
-            summary = `Read ${readMatch[1]} lines`;
-        }
-        else if (lineMatch) {
-            summary = `Found ${lineMatch[1]} line${lineMatch[1] === '1' ? '' : 's'}`;
-        }
-        else if (fileMatch) {
-            summary = `Found ${fileMatch[1]} file${fileMatch[1] === '1' ? '' : 's'}`;
-        }
-        else if (content.match(/^(success|ok|done|completed|written|edited|created)/i)) {
-            summary = '✓';
-        }
-        else {
-            // Use content directly, truncated if needed
-            summary = content.length > 40 ? content.slice(0, 37) + '…' : content;
-        }
-        return `  ${theme.ui.muted('⎿')}  ${summary} ${theme.ui.muted('(ctrl+o to expand)')}\n`;
-    }
-    /**
-     * Format a compact response with bullet on first line
-     */
-    formatCompactResponse(content) {
-        const bullet = '⏺';
-        const trimmed = content.trim();
-        if (!trimmed)
-            return '';
-        // Single line responses - bullet prefix
-        if (!trimmed.includes('\n') && trimmed.length < 80) {
-            return `${bullet} ${trimmed}\n`;
-        }
-        // Multi-line: bullet on first, indent continuation
-        const lines = trimmed.split('\n');
-        const result = [];
-        for (let i = 0; i < lines.length; i++) {
-            const line = lines[i].trimEnd();
-            if (!line) {
-                result.push('');
-            }
-            else if (i === 0) {
-                result.push(`${bullet} ${line}`);
-            }
-            else {
-                result.push(`  ${line}`);
-            }
-        }
-        return result.join('\n') + '\n';
-    }
-    /**
-     * Format streaming elapsed time in Claude Code style: 3m 30s
-     */
-    formatStreamingElapsed() {
-        if (!this.streamingStartTime)
-            return null;
-        const elapsed = Math.floor((Date.now() - this.streamingStartTime) / 1000);
-        if (elapsed < 5)
-            return null; // Don't show for very short durations
-        const mins = Math.floor(elapsed / 60);
-        const secs = elapsed % 60;
-        if (mins > 0) {
-            return `${mins}m ${secs}s`;
-        }
-        return `${secs}s`;
     }
     /**
      * Format a compact conversation block (Claude Code style)
@@ -1315,16 +908,6 @@ export class UnifiedUIRenderer extends EventEmitter {
     setMode(mode) {
         const wasStreaming = this.mode === 'streaming';
         this.mode = mode;
-        // Track streaming start time for elapsed display
-        if (mode === 'streaming' && !wasStreaming) {
-            this.streamingStartTime = Date.now();
-            this.streamingTokens = 0; // Reset token count
-            this.startSpinnerAnimation();
-        }
-        else if (mode === 'idle' && wasStreaming) {
-            this.streamingStartTime = null;
-            this.stopSpinnerAnimation();
-        }
         if (wasStreaming && mode === 'idle' && !this.lastOutputEndedWithNewline) {
             // Finish streaming on a fresh line so the next prompt/event doesn't collide
             this.write('\n');
@@ -1335,61 +918,6 @@ export class UnifiedUIRenderer extends EventEmitter {
             this.renderPrompt();
         }
     }
-    /**
-     * Start the animated spinner for streaming status
-     */
-    startSpinnerAnimation() {
-        if (this.spinnerInterval)
-            return; // Already running
-        this.spinnerFrame = 0;
-        this.activityStarFrame = 0;
-        this.spinnerInterval = setInterval(() => {
-            this.spinnerFrame = (this.spinnerFrame + 1) % spinnerFrames.braille.length;
-            this.activityStarFrame = (this.activityStarFrame + 1) % this.activityStarFrames.length;
-            // Re-render to show updated spinner/star frame
-            if (!this.plainMode && this.mode === 'streaming') {
-                this.renderPrompt();
-            }
-        }, 80); // ~12 FPS for smooth spinner animation
-    }
-    /**
-     * Stop the animated spinner
-     */
-    stopSpinnerAnimation() {
-        if (this.spinnerInterval) {
-            clearInterval(this.spinnerInterval);
-            this.spinnerInterval = null;
-        }
-        this.spinnerFrame = 0;
-        this.activityStarFrame = 0;
-        this.activityMessage = null;
-    }
-    /**
-     * Set the activity message displayed with animated star
-     * Example: "Ruminating…" shows as "✳ Ruminating… (esc to interrupt · 34s · ↑1.2k)"
-     */
-    setActivity(message) {
-        this.activityMessage = message;
-        if (!this.plainMode) {
-            this.renderPrompt();
-        }
-    }
-    /**
-     * Update the token count displayed in the activity line
-     */
-    updateStreamingTokens(tokens) {
-        this.streamingTokens = tokens;
-    }
-    /**
-     * Format token count as compact string (e.g., 1.2k, 24k, 128k)
-     */
-    formatTokenCount(tokens) {
-        if (tokens < 1000)
-            return String(tokens);
-        if (tokens < 10000)
-            return `${(tokens / 1000).toFixed(1)}k`;
-        return `${Math.round(tokens / 1000)}k`;
-    }
     getMode() {
         return this.mode;
     }
@@ -1485,9 +1013,13 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!this.allowPromptRender) {
             return;
         }
-        // Rich inline mode: prompt flows naturally with content
+        // Rich mode: inline overlay anchored to current scrollback (no full-screen clear)
         this.updateTerminalSize();
         const maxWidth = this.safeWidth();
+        if (this.lastRenderWidth !== null && maxWidth !== this.lastRenderWidth) {
+            // Terminal resized; force a clean anchor so the overlay doesn't jitter.
+            this.overlayInvalidated = true;
+        }
         this.lastRenderWidth = maxWidth;
         const overlay = this.buildOverlayLines();
         if (!overlay.lines.length) {
@@ -1497,187 +1029,81 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!renderedLines.length) {
             return;
         }
-        const promptIndex = Math.max(0, Math.min(overlay.promptIndex, renderedLines.length - 1));
-        const height = renderedLines.length;
-        // Clear previous prompt and handle height changes
-        if (this.hasEverRenderedOverlay && this.lastOverlayHeight > 0 && this.lastOverlay) {
-            // Move up from prompt row to top of overlay
-            const linesToTop = this.lastOverlay.promptIndex;
-            if (linesToTop > 0) {
-                this.write(`\x1b[${linesToTop}A`);
-            }
-            // Clear all previous lines
-            for (let i = 0; i < this.lastOverlayHeight; i++) {
-                this.write('\r');
-                this.write(ESC.CLEAR_LINE);
-                if (i < this.lastOverlayHeight - 1) {
-                    this.write('\x1b[B');
-                }
-            }
-            // If new height is greater, we need to add blank lines
-            const extraLines = height - this.lastOverlayHeight;
-            if (extraLines > 0) {
-                for (let i = 0; i < extraLines; i++) {
-                    this.write('\n');
-                }
-            }
-            // Move back to top of where overlay should start
-            const moveBackUp = Math.max(0, height - 1);
-            if (moveBackUp > 0) {
-                this.write(`\x1b[${moveBackUp}A`);
-            }
+        let promptIndex = Math.max(0, Math.min(overlay.promptIndex, renderedLines.length - 1));
+        let height = renderedLines.length;
+        // Keep at least one free line below the overlay so typing always has breathing room
+        const bottomPadding = this.overlayBottomPadding;
+        const totalRows = this.rows || 24;
+        const availableRows = Math.max(1, totalRows - bottomPadding);
+        if (height > availableRows) {
+            renderedLines.splice(availableRows);
+            height = renderedLines.length;
+            promptIndex = Math.max(0, Math.min(promptIndex, height - 1));
+        }
+        const startRow = Math.max(1, availableRows - height + 1);
+        const promptRow = startRow + promptIndex;
+        const promptCol = Math.min(Math.max(1, 3 + this.cursor), this.cols || 80);
+        // Clear any previous overlay footprint (status, prompt, controls) to avoid leaking into scrollback
+        this.clearOverlayRows(height, startRow);
+        if (bottomPadding > 0 && startRow + height <= totalRows) {
+            this.write(ESC.TO(startRow + height, 1));
+            this.write(ESC.CLEAR_LINE);
         }
-        // Write prompt lines (no trailing newline on last line)
-        for (let i = 0; i < renderedLines.length; i++) {
-            this.write('\r');
+        // Render overlay lines in place without pushing scrollback
+        for (let idx = 0; idx < height; idx++) {
+            const row = startRow + idx;
+            const line = renderedLines[idx] ?? '';
+            this.write(ESC.TO(row, 1));
             this.write(ESC.CLEAR_LINE);
-            this.write(renderedLines[i] || '');
-            if (i < renderedLines.length - 1) {
-                this.write('\n');
+            if (line) {
+                this.write(line);
             }
         }
-        // Position cursor at prompt input line
-        const promptCol = Math.min(Math.max(1, 3 + this.cursor), this.cols || 80);
-        // Cursor is now at the last line. Move up to the prompt row.
-        const linesToMoveUp = height - 1 - promptIndex;
-        if (linesToMoveUp > 0) {
-            this.write(`\x1b[${linesToMoveUp}A`);
-        }
-        this.write(`\x1b[${promptCol}G`);
+        // Position cursor at prompt row/col
+        this.write(ESC.TO(promptRow, promptCol));
         this.cursorVisibleColumn = promptCol;
         this.hasRenderedPrompt = true;
-        this.hasEverRenderedOverlay = true;
+        this.hasEverRenderedOverlay = true; // Mark that we've rendered at least once
         this.isPromptActive = true;
         this.lastOverlayHeight = height;
+        this.lastPromptIndex = promptIndex;
         this.lastOverlay = { lines: renderedLines, promptIndex };
-        this.lastOutputEndedWithNewline = false;
+        this.overlayInvalidated = false;
+        this.lastOutputEndedWithNewline = true;
         this.promptHeight = height;
     }
     buildOverlayLines() {
         const lines = [];
         const maxWidth = this.safeWidth();
-        // Simple horizontal divider - clean and reliable
-        const divider = theme.ui.muted('─'.repeat(Math.min(maxWidth, 56)));
-        // Activity line (only when streaming) - shows: ✽ Moseying… (esc to interrupt · 34s)
-        if (this.mode === 'streaming' && this.activityMessage) {
-            // Animated sparkle
-            const spinnerChars = ['✽', '✾', '✿', '❀', '❁', '❂', '❃', '✻'];
-            const spinnerChar = spinnerChars[this.spinnerFrame % spinnerChars.length] ?? '✽';
-            const elapsed = this.formatStreamingElapsed();
-            // Use fun phrases for generic activity, otherwise show specific activity
-            const genericActivities = ['Streaming', 'Thinking', 'Processing'];
-            const displayActivity = genericActivities.includes(this.activityMessage)
-                ? this.funActivityPhrases[this.activityPhraseIndex % this.funActivityPhrases.length]
-                : this.activityMessage;
-            // Format: ✽ Moseying… (esc to interrupt · 1m 19s · ↑1.2k tokens)
-            const parts = ['esc to interrupt'];
-            if (elapsed)
-                parts.push(elapsed);
-            if (this.streamingTokens > 0) {
-                parts.push(`↑${this.formatTokenCount(this.streamingTokens)} tokens`);
-            }
-            const activityLine = `${theme.info(spinnerChar)} ${displayActivity}… ${theme.ui.muted(`(${parts.join(' · ')})`)}`;
-            lines.push(this.truncateLine(activityLine, maxWidth));
-        }
-        // Top divider
-        lines.push(divider);
-        // Input prompt line
-        const promptIndex = lines.length;
-        const inputLine = this.buildInputLine();
-        // Handle multi-line input by splitting on newlines
-        const inputLines = inputLine.split('\n');
-        for (const line of inputLines) {
+        const chromeLines = this.buildChromeLines();
+        for (const line of chromeLines) {
             lines.push(this.truncateLine(line, maxWidth));
         }
-        // Bottom divider
-        lines.push(divider);
-        // Inline panel (pinned scroll box for live output/menus)
-        if (this.inlinePanel.length > 0) {
-            for (const panelLine of this.inlinePanel) {
-                lines.push(this.truncateLine(`  ${panelLine}`, maxWidth));
-            }
-            // Separate inline content from suggestions/toggles
-            lines.push(divider);
-        }
-        // Slash command suggestions
+        const divider = renderDivider(Math.min(maxWidth, 96), 'prompt');
+        lines.push(this.truncateLine(divider, maxWidth));
+        const promptIndex = lines.length;
+        lines.push(this.truncateLine(this.buildInputLine(), maxWidth));
         if (this.suggestions.length > 0) {
             for (let index = 0; index < this.suggestions.length; index++) {
                 const suggestion = this.suggestions[index];
                 const isActive = index === this.suggestionIndex;
-                const marker = isActive ? theme.primary('▸') : theme.ui.muted(' ');
+                const marker = isActive ? theme.primary('›') : theme.ui.muted('›');
                 const cmdText = isActive ? theme.primary(suggestion.command) : theme.ui.muted(suggestion.command);
                 const descText = isActive ? suggestion.description : theme.ui.muted(suggestion.description);
-                lines.push(this.truncateLine(`  ${marker} ${cmdText} — ${descText}`, maxWidth));
+                lines.push(this.truncateLine(`${marker} ${cmdText} — ${descText}`, maxWidth));
             }
         }
-        // Model and context info
-        const modelContextLine = this.buildModelContextLine();
-        if (modelContextLine) {
-            lines.push(this.truncateLine(`  ${modelContextLine}`, maxWidth));
+        if (this.inlinePanel.length > 0) {
+            for (const panelLine of this.inlinePanel) {
+                lines.push(this.truncateLine(panelLine, maxWidth));
+            }
         }
-        // Mode toggles
-        const toggleLine = this.buildInlineToggleLine();
-        if (toggleLine) {
-            lines.push(this.truncateLine(`  ${toggleLine}`, maxWidth));
+        const controlLines = this.buildControlLines();
+        for (const control of controlLines) {
+            lines.push(this.truncateLine(control, maxWidth));
         }
-        // Help hint
-        lines.push(this.truncateLine(`  ${theme.ui.muted('? for shortcuts')}`, maxWidth));
         return { lines, promptIndex };
     }
-    /**
-     * Build model name and context usage line with mini progress bar
-     * Format: gpt-4 · ████░░ 85% context
-     */
-    buildModelContextLine() {
-        const parts = [];
-        // Model name (provider / model or just model)
-        const model = this.statusMeta.provider && this.statusMeta.model
-            ? `${this.statusMeta.provider} · ${this.statusMeta.model}`
-            : this.statusMeta.model || this.statusMeta.provider;
-        if (model) {
-            parts.push(theme.info(model));
-        }
-        // Context meter with mini progress bar
-        if (this.statusMeta.contextPercent !== undefined) {
-            const remaining = Math.max(0, 100 - this.statusMeta.contextPercent);
-            const barWidth = 6;
-            const filled = Math.round((remaining / 100) * barWidth);
-            const empty = barWidth - filled;
-            const barColor = remaining > 50 ? theme.success : remaining > 20 ? theme.warning : theme.error;
-            const bar = barColor('█'.repeat(filled)) + theme.ui.muted('░'.repeat(empty));
-            parts.push(`${bar} ${barColor(`${remaining}%`)} ${theme.ui.muted('ctx')}`);
-        }
-        return parts.length > 0 ? parts.join(theme.ui.muted('  ·  ')) : null;
-    }
-    /**
-     * Build inline toggle controls - Claude Code style
-     * Format: ⏵⏵ accept edits on (shift+tab to cycle)
-     */
-    buildInlineToggleLine() {
-        const parts = [];
-        // Edit acceptance mode - Claude Code style with ⏵⏵
-        const editIcon = '⏵⏵';
-        const editState = this.toggleState.verificationEnabled ? 'verify edits' : 'accept edits';
-        const editStatus = this.toggleState.verificationEnabled ? theme.warning('on') : theme.success('on');
-        parts.push(`${theme.ui.muted(editIcon)} ${editState} ${editStatus}`);
-        // Auto-continue
-        if (this.toggleState.autoContinueEnabled) {
-            parts.push(`${theme.ui.muted('auto')} ${theme.success('on')}`);
-        }
-        // Thinking mode (if not default)
-        const thinkingLabel = (this.toggleState.thinkingModeLabel || 'balanced').trim().toLowerCase();
-        if (thinkingLabel === 'extended') {
-            parts.push(`${theme.ui.muted('thinking')} ${theme.info('extended')}`);
-        }
-        // Approval mode (if not auto)
-        const approvalMode = this.toggleState.criticalApprovalMode || 'auto';
-        if (approvalMode === 'approval') {
-            parts.push(`${theme.ui.muted('approvals')} ${theme.warning('ask')}`);
-        }
-        // Cycle hint
-        const cycleHint = theme.ui.muted('(shift+tab to cycle)');
-        return parts.length > 0 ? `${parts.join(theme.ui.muted(' · '))} ${cycleHint}` : null;
-    }
     buildChromeLines() {
         const maxWidth = this.safeWidth();
         const statusLines = this.buildStatusBlock(maxWidth);
@@ -1697,22 +1123,15 @@ export class UnifiedUIRenderer extends EventEmitter {
             return [];
         }
         const segments = [];
-        // Add animated spinner when streaming for dynamic visual feedback
-        if (this.mode === 'streaming') {
-            const spinnerChars = spinnerFrames.braille;
-            const spinnerChar = spinnerChars[this.spinnerFrame % spinnerChars.length] ?? '⠋';
-            segments.push(`${theme.info(spinnerChar)} ${this.applyTone(statusLabel.text, statusLabel.tone)}`);
-        }
-        else {
-            segments.push(`${theme.ui.muted('status')} ${this.applyTone(statusLabel.text, statusLabel.tone)}`);
-        }
+        segments.push(`${theme.ui.muted('status')} ${this.applyTone(statusLabel.text, statusLabel.tone)}`);
         if (this.statusMeta.sessionTime) {
             segments.push(`${theme.ui.muted('runtime')} ${theme.ui.muted(this.statusMeta.sessionTime)}`);
         }
         if (this.statusMeta.contextPercent !== undefined) {
-            // Use animated context meter for smooth color transitions
-            this.contextMeter.update(this.statusMeta.contextPercent);
-            segments.push(this.contextMeter.render());
+            const ctx = this.statusMeta.contextPercent;
+            const tone = ctx > 90 ? 'error' : ctx > 70 ? 'warn' : 'muted';
+            const color = tone === 'error' ? theme.error : tone === 'warn' ? theme.warning : theme.ui.muted;
+            segments.push(`${theme.ui.muted('ctx')} ${color(`${ctx}%`)}`);
         }
         return this.wrapSegments(segments, maxWidth);
     }
@@ -1821,33 +1240,6 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
         return lines;
     }
-    /**
-     * Build a compact toggle line like Claude Code:
-     * "⏵⏵ accept edits on (shift+tab to cycle)"
-     */
-    buildCompactToggleLine() {
-        // Show the most relevant mode based on current state
-        const parts = [];
-        // Edit mode indicator
-        const editIcon = '⏵⏵';
-        const editState = this.toggleState.verificationEnabled ? 'approval required' : 'accept edits';
-        parts.push(`${theme.ui.muted(editIcon)} ${editState} ${theme.success('on')}`);
-        // Auto-continue indicator (if enabled)
-        if (this.toggleState.autoContinueEnabled) {
-            parts.push(`${theme.ui.muted('auto')} ${theme.success('on')}`);
-        }
-        // Thinking mode (if active)
-        const thinkingLabel = (this.toggleState.thinkingModeLabel || '').trim().toLowerCase();
-        if (thinkingLabel && thinkingLabel !== 'off') {
-            parts.push(`${theme.ui.muted('thinking')} ${theme.info(thinkingLabel)}`);
-        }
-        // Cycle hint
-        const cycleHint = theme.ui.muted('(shift+tab to cycle)');
-        if (parts.length === 0) {
-            return null;
-        }
-        return `  ${parts.join(theme.ui.muted(' · '))} ${cycleHint}`;
-    }
     buildToggleLine() {
         const toggles = [];
         const addToggle = (label, on, hotkey, value) => {
@@ -1909,87 +1301,15 @@ export class UnifiedUIRenderer extends EventEmitter {
     buildInputLine() {
         if (this.collapsedPaste) {
             const summary = `[pasted ${this.collapsedPaste.lines} lines, ${this.collapsedPaste.chars} chars] (Ctrl+L insert, Backspace discard)`;
-            return this.truncateLine(`${theme.primary('> ')}${theme.ui.muted(summary)}`, this.safeWidth());
+            return this.truncateLine(`${theme.primary('› ')}${theme.ui.muted(summary)}`, this.safeWidth());
         }
-        // Claude Code uses simple '>' prompt
-        const prompt = theme.primary('> ');
+        const prompt = theme.primary('› ');
         const promptWidth = this.visibleLength(prompt);
         const maxWidth = this.safeWidth();
-        const continuationIndent = '  '; // 2 spaces for continuation lines
-        const continuationWidth = continuationIndent.length;
-        // Handle multi-line input - split buffer on newlines first
-        const normalized = this.buffer.replace(/\r/g, '\n');
-        const bufferLines = normalized.split('\n');
-        // Wrap each logical line to fit terminal width, expanding vertically
-        const result = [];
-        let totalChars = 0;
-        let cursorLine = 0;
-        let cursorCol = 0;
-        let foundCursor = false;
-        for (let lineIndex = 0; lineIndex < bufferLines.length; lineIndex++) {
-            const line = bufferLines[lineIndex] ?? '';
-            const isFirstLogicalLine = lineIndex === 0;
-            const lineStartChar = totalChars;
-            // Determine available width for this line
-            const firstLineWidth = maxWidth - promptWidth;
-            const contLineWidth = maxWidth - continuationWidth;
-            // Wrap this logical line into display lines
-            let remaining = line;
-            let isFirstDisplayLine = true;
-            while (remaining.length > 0 || isFirstDisplayLine) {
-                const availableWidth = (isFirstLogicalLine && isFirstDisplayLine) ? firstLineWidth : contLineWidth;
-                const chunk = remaining.slice(0, availableWidth);
-                remaining = remaining.slice(availableWidth);
-                // Build the display line
-                let displayLine;
-                if (isFirstLogicalLine && isFirstDisplayLine) {
-                    displayLine = `${prompt}${chunk}`;
-                }
-                else {
-                    displayLine = `${continuationIndent}${chunk}`;
-                }
-                // Track cursor position
-                if (!foundCursor) {
-                    const chunkStart = lineStartChar + (line.length - remaining.length - chunk.length);
-                    const chunkEnd = chunkStart + chunk.length;
-                    if (this.cursor >= chunkStart && this.cursor <= chunkEnd) {
-                        cursorLine = result.length;
-                        const offsetInChunk = this.cursor - chunkStart;
-                        cursorCol = ((isFirstLogicalLine && isFirstDisplayLine) ? promptWidth : continuationWidth) + offsetInChunk;
-                        foundCursor = true;
-                    }
-                }
-                result.push(displayLine);
-                isFirstDisplayLine = false;
-                // If nothing left and this was an empty line, we already added it
-                if (remaining.length === 0 && chunk.length === 0)
-                    break;
-            }
-            totalChars += line.length + 1; // +1 for the newline separator
-        }
-        // Handle cursor at very end
-        if (!foundCursor) {
-            cursorLine = Math.max(0, result.length - 1);
-            const lastLine = result[cursorLine] ?? '';
-            cursorCol = this.visibleLength(lastLine);
-        }
-        // Add cursor highlight to the appropriate position
-        if (result.length > 0) {
-            const targetLine = result[cursorLine] ?? '';
-            const visiblePart = this.stripAnsi(targetLine);
-            const cursorPos = Math.min(cursorCol, visiblePart.length);
-            // Rebuild the line with cursor highlight
-            const before = visiblePart.slice(0, cursorPos);
-            const at = visiblePart.charAt(cursorPos) || ' ';
-            const after = visiblePart.slice(cursorPos + 1);
-            // Preserve the prompt/indent styling
-            const prefix = cursorLine === 0 ? prompt : continuationIndent;
-            const textPart = cursorLine === 0 ? before.slice(promptWidth) : before.slice(continuationWidth);
-            result[cursorLine] = `${prefix}${textPart}${ESC.REVERSE}${at}${ESC.RESET}${after}`;
-        }
-        // Store cursor column for terminal positioning
-        this.cursorVisibleColumn = cursorCol + 1;
-        return result.join('\n');
+        const available = Math.max(1, maxWidth - promptWidth);
+        const window = this.buildInputWindow(available);
+        this.cursorVisibleColumn = Math.min(maxWidth, promptWidth + window.cursor + 1);
+        return this.truncateLine(`${prompt}${window.text}`, maxWidth);
     }
     buildInputWindow(available) {
         if (available <= 0) {
@@ -2120,6 +1440,17 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
         return result;
     }
+    clearOverlayRows(rows, startRow) {
+        const totalRows = this.rows || 24;
+        const limit = Math.max(0, Math.min(rows, totalRows));
+        for (let idx = 0; idx < limit; idx++) {
+            const row = startRow + idx;
+            if (row < 1 || row > totalRows)
+                continue;
+            this.write(ESC.TO(row, 1));
+            this.write(ESC.CLEAR_LINE);
+        }
+    }
     getBuffer() {
         return this.buffer;
     }
@@ -2147,35 +1478,6 @@ export class UnifiedUIRenderer extends EventEmitter {
     setModeStatus(status) {
         this.updateStatus(status);
     }
-    /**
-     * Show a compacting status with animated spinner (Claude Code style)
-     * Uses ✻ character with animation to indicate context compaction in progress
-     */
-    showCompactingStatus(message) {
-        this.statusMessage = message;
-        if (!this.spinnerInterval) {
-            this.spinnerInterval = setInterval(() => {
-                this.spinnerFrame++;
-                // Cycle activity phrase every ~4 seconds (50 frames at 80ms)
-                if (this.spinnerFrame % 50 === 0) {
-                    this.activityPhraseIndex++;
-                }
-                this.renderPrompt();
-            }, 80);
-        }
-        this.renderPrompt();
-    }
-    /**
-     * Hide the compacting status and stop spinner animation
-     */
-    hideCompactingStatus() {
-        if (this.spinnerInterval) {
-            clearInterval(this.spinnerInterval);
-            this.spinnerInterval = null;
-        }
-        this.statusMessage = null;
-        this.renderPrompt();
-    }
     emitPrompt(content) {
         this.pushPromptEvent(content);
     }
@@ -2219,30 +1521,23 @@ export class UnifiedUIRenderer extends EventEmitter {
         const height = this.lastOverlay?.lines.length ?? this.promptHeight ?? 0;
         if (height === 0)
             return;
-        // Cursor is at prompt row. Move up to top of overlay first.
-        if (this.lastOverlay) {
-            const linesToTop = this.lastOverlay.promptIndex;
-            if (linesToTop > 0) {
-                this.write(`\x1b[${linesToTop}A`);
-            }
-        }
-        // Now at top, clear each line downward
-        for (let i = 0; i < height; i++) {
-            this.write('\r');
+        this.updateTerminalSize();
+        const totalRows = this.rows || 24;
+        const startRow = Math.max(1, Math.max(1, totalRows - this.overlayBottomPadding) - height + 1);
+        this.clearOverlayRows(height, startRow);
+        // Keep the padding row clean as well
+        const paddingRow = startRow + height;
+        if (this.overlayBottomPadding > 0 && paddingRow <= totalRows) {
+            this.write(ESC.TO(paddingRow, 1));
             this.write(ESC.CLEAR_LINE);
-            if (i < height - 1) {
-                this.write('\x1b[B');
-            }
         }
-        // Move back to top (where content should continue from)
-        if (height > 1) {
-            this.write(`\x1b[${height - 1}A`);
-        }
-        this.write('\r');
+        // Move cursor to the bottom ready for new scrollback output
+        this.write(ESC.TO(totalRows, 1));
+        this.lastOverlayHeight = height;
+        this.lastPromptIndex = this.lastOverlay?.promptIndex ?? this.lastPromptIndex;
         this.lastOverlay = null;
+        this.overlayInvalidated = true;
         this.promptHeight = 0;
-        this.lastOverlayHeight = 0;
-        this.isPromptActive = false;
     }
     updateTerminalSize() {
         if (this.output.isTTY) {