erosolar-cli 2.1.171 → 2.1.172

package/dist/ui/UnifiedUIRenderer.js

@@ -11,9 +11,10 @@
 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 './layout.js';
+import { colorizeActivity, createFrameTicker, formatElapsed, formatTinyProgressBar, formatTokenDelta, } from './animatedStatus.js';
 const ESC = {
     HIDE_CURSOR: '\x1b[?25l',
     SHOW_CURSOR: '\x1b[?25h',
@@ -27,11 +28,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,38 +52,13 @@ 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,
+        autoContinueEnabled: false,
         criticalApprovalMode: 'auto',
     };
     // ------------ Helpers ------------
@@ -99,14 +70,16 @@ export class UnifiedUIRenderer extends EventEmitter {
     lastPromptEvent = null;
     promptHeight = 0;
     lastOverlayHeight = 0;
+    lastPromptIndex = 0;
+    overlayBottomPadding = 1;
     inlinePanel = [];
+    persistentPanel = [];
+    overlayInvalidated = false;
     hasConversationContent = false;
     isPromptActive = false;
-    inputRenderOffset = 0;
     plainPasteIdleMs = 24;
     plainPasteWindowMs = 60;
     plainPasteTriggerChars = 24;
-    cursorVisibleColumn = 1;
     inBracketedPaste = false;
     pasteBuffer = '';
     inPlainPaste = false;
@@ -118,9 +91,14 @@ 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;
+    streamingStart = null;
+    activityInterval = null;
+    activityTicker = createFrameTicker('sparkle');
+    renderedContextPercent = null;
+    lastToolResult = null;
     inputCapture = null;
     constructor(output = process.stdout, input = process.stdin, options) {
         super();
@@ -128,8 +106,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,
@@ -161,6 +137,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;
         }
@@ -173,27 +152,12 @@ 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();
+        this.stopActivityTimer();
         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);
@@ -245,25 +209,14 @@ 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
-                this.buffer = '';
-                this.cursor = 0;
-                this.renderPrompt();
-                this.emitInputChange();
+            const hadBuffer = this.buffer.length > 0;
+            this.emit('ctrl-c', { hadBuffer });
+            if (hadBuffer) {
+                this.clearBuffer();
             }
             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') {
@@ -272,6 +225,12 @@ export class UnifiedUIRenderer extends EventEmitter {
             }
             return;
         }
+        if (key.ctrl && key.name === 'o') {
+            if (!this.expandLastToolResult()) {
+                this.emit('expand-tool-result');
+            }
+            return;
+        }
         if (key.ctrl && key.name === 'u') {
             this.clearBuffer();
             return;
@@ -282,11 +241,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();
@@ -296,12 +250,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;
@@ -347,6 +298,18 @@ export class UnifiedUIRenderer extends EventEmitter {
             }
             return;
         }
+        if (key.name === 'home') {
+            this.cursor = 0;
+            this.renderPrompt();
+            this.emitInputChange();
+            return;
+        }
+        if (key.name === 'end') {
+            this.cursor = this.buffer.length;
+            this.renderPrompt();
+            this.emitInputChange();
+            return;
+        }
         if (key.name === 'up') {
             if (this.navigateSuggestions(-1)) {
                 return;
@@ -611,7 +574,6 @@ export class UnifiedUIRenderer extends EventEmitter {
             this.inputCapture = null;
             this.buffer = '';
             this.cursor = 0;
-            this.inputRenderOffset = 0;
             this.resetSuggestions();
             this.renderPrompt();
             this.emitInputChange();
@@ -678,11 +640,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;
         }
@@ -715,10 +673,22 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.renderPrompt();
         return true;
     }
+    isGarbageOutput(content) {
+        const text = content.replace(/\u001B\[[0-9;]*m/gu, '').replace(/\s+/g, '');
+        if (!text)
+            return true;
+        if (text.length <= 2 && !/[a-zA-Z0-9]/.test(text))
+            return true;
+        if (text.length < 6 && /^[\.\-_,;:~`'"!@#$%^&*+=|\\/]+$/.test(text))
+            return true;
+        return false;
+    }
     // ------------ Event queue ------------
-    addEvent(type, content) {
+    addEvent(type, content, options) {
         if (!content)
             return;
+        if (this.isGarbageOutput(content))
+            return;
         const normalized = this.normalizeEventType(type);
         if (!normalized)
             return;
@@ -727,7 +697,6 @@ export class UnifiedUIRenderer extends EventEmitter {
             normalized === 'thought' ||
             normalized === 'stream' ||
             normalized === 'tool' ||
-            normalized === 'tool-result' ||
             normalized === 'build' ||
             normalized === 'test') {
             this.hasConversationContent = true;
@@ -751,6 +720,7 @@ export class UnifiedUIRenderer extends EventEmitter {
             rawType: type,
             content,
             timestamp: Date.now(),
+            isCompacted: options?.compact === true,
         };
         // Priority queue: prompt events are inserted at the front to ensure immediate display
         // This guarantees user input is echoed before any async processing responses
@@ -854,7 +824,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();
         }
@@ -866,6 +835,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) {
@@ -878,9 +851,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':
@@ -896,388 +868,83 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
     }
     formatContent(event) {
-        const bullet = '⏺'; // Claude Code uses plain bullet, no color
-        // Compacted blocks already have separator and formatting
+        const bullet = '⏺';
         if (event.isCompacted) {
             return event.content;
         }
         if (event.rawType === 'banner') {
-            // Banners display without bullet prefix
             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`;
             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);
+                return `\n${this.formatBulletBlock(event.content, bullet)}\n`;
             }
+            case 'tool':
+                if (event.rawType === 'tool-call') {
+                    return `\n${this.formatBulletBlock(event.content, bullet)}\n`;
+                }
+                if (event.rawType === 'tool-result') {
+                    return this.formatToolResult(event.content, event.isCompacted);
+                }
+                return `\n${event.content}\n`;
             case 'build':
-                return `${bullet} ${theme.warning('Build')} ${theme.ui.muted('→')} ${event.content}\n`;
+                return `\n${this.formatBulletBlock(event.content, bullet)}\n`;
             case 'test':
-                return `${bullet} ${theme.info('Test')} ${theme.ui.muted('→')} ${event.content}\n`;
+                return `\n${this.formatBulletBlock(event.content, bullet)}\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);
+                return `\n${this.formatBulletBlock(event.content, bullet)}\n`;
             }
         }
     }
-    /**
-     * 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
+    formatBulletBlock(content, bullet) {
+        const width = Math.max(24, this.safeWidth() - 4);
+        const wrapped = this.wrapText(content, width);
+        return wrapped
+            .map((line, index) => (index === 0 ? `${bullet} ${line}` : `  ${line}`))
+            .join('\n');
+    }
+    formatToolResult(content, compacted) {
+        const prefix = '⎿';
+        if (compacted) {
+            return `\n${prefix} ${content}\n`;
         }
-        return false;
+        const width = Math.max(24, this.safeWidth() - 4);
+        const wrapped = this.wrapText(content, width);
+        const body = wrapped
+            .map((line, index) => (index === 0 ? `${prefix} ${line}` : `  ${line}`))
+            .join('\n');
+        return `\n${body}\n`;
     }
-    /**
-     * 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 = '';
+    wrapText(content, width) {
+        if (!content) {
+            return [''];
+        }
+        const lines = [];
+        const rawLines = content.split('\n');
+        for (const rawLine of rawLines) {
+            const words = rawLine.split(/(\s+)/);
+            let current = '';
             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();
+                if (!word)
+                    continue;
+                const candidate = current ? `${current}${word}` : word;
+                if (this.visibleLength(candidate) > width && current) {
+                    lines.push(current.trimEnd());
+                    current = word.trimStart();
                 }
                 else {
-                    currentLine += word;
+                    current = candidate;
                 }
             }
-            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;
-            }
+            lines.push(current.trimEnd());
         }
-        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`;
+        return lines;
     }
     /**
      * Format a compact conversation block (Claude Code style)
@@ -1314,81 +981,26 @@ 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');
             this.lastOutputEndedWithNewline = true;
         }
-        if (!this.plainMode) {
-            // Always render prompt to keep bottom UI persistent (rich mode only)
-            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();
+        if (mode === 'streaming') {
+            if (!this.streamingStart) {
+                this.streamingStart = Date.now();
             }
-        }, 80); // ~12 FPS for smooth spinner animation
-    }
-    /**
-     * Stop the animated spinner
-     */
-    stopSpinnerAnimation() {
-        if (this.spinnerInterval) {
-            clearInterval(this.spinnerInterval);
-            this.spinnerInterval = null;
+            this.startActivityTimer();
+        }
+        else {
+            this.streamingStart = null;
+            this.stopActivityTimer();
         }
-        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) {
+            // Always render prompt to keep bottom UI persistent (rich mode only)
             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;
     }
@@ -1427,7 +1039,15 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
     }
     updateStatusMeta(meta, options = {}) {
-        const next = { ...this.statusMeta, ...meta };
+        const next = { ...this.statusMeta };
+        for (const [key, value] of Object.entries(meta)) {
+            if (value === null || value === undefined) {
+                delete next[key];
+            }
+            else {
+                next[key] = value;
+            }
+        }
         const changed = JSON.stringify(next) !== JSON.stringify(this.statusMeta);
         this.statusMeta = next;
         const shouldRender = options.render !== false && changed;
@@ -1437,7 +1057,8 @@ export class UnifiedUIRenderer extends EventEmitter {
     }
     updateModeToggles(state) {
         this.toggleState = { ...this.toggleState, ...state };
-        if (!state.verificationHotkey &&
+        if (!state.autoContinueHotkey &&
+            !state.verificationHotkey &&
             !state.thinkingHotkey &&
             !state.criticalApprovalHotkey) {
             this.hotkeysInToggleLine.clear();
@@ -1460,6 +1081,51 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.inlinePanel = [];
         this.renderPrompt();
     }
+    setPersistentPanel(lines) {
+        const normalized = (lines ?? [])
+            .map(line => line.replace(/\s+$/g, ''))
+            .filter(line => line.trim().length > 0);
+        if (JSON.stringify(normalized) === JSON.stringify(this.persistentPanel)) {
+            return;
+        }
+        this.persistentPanel = normalized;
+        this.renderPrompt();
+    }
+    clearPersistentPanel() {
+        if (!this.persistentPanel.length)
+            return;
+        this.persistentPanel = [];
+        this.renderPrompt();
+    }
+    startActivityTimer() {
+        if (this.activityInterval || this.plainMode || !this.interactive) {
+            return;
+        }
+        this.activityInterval = setInterval(() => {
+            if (this.allowPromptRender) {
+                this.renderPrompt();
+            }
+        }, 120);
+    }
+    stopActivityTimer() {
+        if (this.activityInterval) {
+            clearInterval(this.activityInterval);
+            this.activityInterval = null;
+        }
+    }
+    rememberToolResult(content, summary) {
+        const normalized = content?.trim();
+        if (!normalized)
+            return;
+        this.lastToolResult = { full: normalized, summary: summary?.trim() || undefined };
+    }
+    expandLastToolResult() {
+        if (!this.lastToolResult) {
+            return false;
+        }
+        this.addEvent('tool-result', this.lastToolResult.full);
+        return true;
+    }
     // ------------ Prompt rendering ------------
     renderPrompt() {
         if (!this.interactive) {
@@ -1473,7 +1139,6 @@ export class UnifiedUIRenderer extends EventEmitter {
                 this.lastOutputEndedWithNewline = true;
             }
             this.write(`\r${ESC.CLEAR_LINE}${line}`);
-            this.cursorVisibleColumn = line.length + 1;
             this.hasRenderedPrompt = true;
             this.isPromptActive = true;
             this.lastOutputEndedWithNewline = false; // prompt ends mid-line by design
@@ -1483,9 +1148,23 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!this.allowPromptRender) {
             return;
         }
-        // Rich inline mode: prompt flows naturally with content
+        if (typeof this.statusMeta.contextPercent === 'number') {
+            this.renderedContextPercent =
+                this.renderedContextPercent === null
+                    ? this.statusMeta.contextPercent
+                    : this.renderedContextPercent +
+                        (this.statusMeta.contextPercent - this.renderedContextPercent) * 0.35;
+        }
+        else {
+            this.renderedContextPercent = null;
+        }
+        // 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) {
@@ -1495,188 +1174,99 @@ 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.cursorRow, 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, overlay.cursorCol), 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`);
-        this.cursorVisibleColumn = promptCol;
+        // Position cursor at prompt row/col
+        this.write(ESC.TO(promptRow, 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 activity = this.buildActivityLine(maxWidth);
+        if (activity) {
+            lines.push(activity);
+        }
+        lines.push(this.truncateLine(renderDivider(Math.min(maxWidth, 96)), maxWidth));
+        const inputOverlay = this.buildInputOverlay(maxWidth);
+        const promptRow = lines.length + inputOverlay.cursorRow;
+        const promptCol = inputOverlay.cursorCol;
+        for (const line of inputOverlay.lines) {
             lines.push(this.truncateLine(line, maxWidth));
         }
-        // Bottom divider
-        lines.push(divider);
-        // Inline panel (pinned scroll box for live output/menus)
+        lines.push(this.truncateLine(renderDivider(Math.min(maxWidth, 96)), maxWidth));
         if (this.inlinePanel.length > 0) {
             for (const panelLine of this.inlinePanel) {
-                lines.push(this.truncateLine(`  ${panelLine}`, maxWidth));
+                lines.push(this.truncateLine(panelLine, maxWidth));
+            }
+        }
+        if (this.persistentPanel.length > 0) {
+            for (const panelLine of this.persistentPanel) {
+                lines.push(this.truncateLine(panelLine, maxWidth));
             }
-            // Separate inline content from suggestions/toggles
-            lines.push(divider);
         }
-        // Slash command suggestions
         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));
+        const modelLine = this.buildModelLine(maxWidth);
+        if (modelLine) {
+            lines.push(modelLine);
         }
-        // Mode toggles
-        const toggleLine = this.buildInlineToggleLine();
+        const toggleLine = this.buildToggleLine();
         if (toggleLine) {
-            lines.push(this.truncateLine(`  ${toggleLine}`, maxWidth));
+            lines.push(toggleLine);
         }
-        // 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')}`);
+        const shortcutLine = this.buildShortcutLine();
+        if (shortcutLine) {
+            lines.push(shortcutLine);
         }
-        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}`);
-        // 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')}`);
+        else {
+            lines.push(`${theme.ui.muted('?')} shortcuts`);
         }
-        // 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);
-        const metaLines = this.buildMetaBlock(maxWidth);
-        return [...statusLines, ...metaLines];
+        return { lines, cursorRow: promptRow, cursorCol: promptCol };
     }
     abbreviatePath(pathValue) {
         const home = homedir();
@@ -1685,139 +1275,57 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
         return pathValue;
     }
-    buildStatusBlock(maxWidth) {
-        const statusLabel = this.composeStatusLabel();
-        if (!statusLabel) {
-            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)}`);
-        }
-        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());
+    buildActivityLine(maxWidth) {
+        const base = this.statusStreaming || this.statusOverride || this.statusMessage || 'Ready';
+        const spinner = this.mode === 'streaming' ? colorizeActivity(this.activityTicker()) : theme.ui.muted('∙');
+        const elapsed = this.mode === 'streaming' ? formatElapsed(this.streamingStart) : null;
+        const tokenText = this.mode === 'streaming' ? formatTokenDelta(this.statusMeta.tokensUsed) : null;
+        const parts = [
+            `${spinner} ${base}`,
+            elapsed ? theme.ui.muted(elapsed) : null,
+            tokenText ? theme.ui.muted(tokenText) : null,
+        ].filter(Boolean);
+        if (!parts.length) {
+            return null;
         }
-        return this.wrapSegments(segments, maxWidth);
+        return this.truncateLine(parts.join(theme.ui.muted('  •  ')), maxWidth);
     }
-    buildMetaBlock(maxWidth) {
+    buildModelLine(maxWidth) {
         const segments = [];
         if (this.statusMeta.profile) {
-            segments.push(this.formatMetaSegment('profile', this.statusMeta.profile, 'info'));
+            segments.push(`${theme.ui.muted('profile')} ${theme.info(this.statusMeta.profile)}`);
         }
         const model = this.statusMeta.provider && this.statusMeta.model
             ? `${this.statusMeta.provider} / ${this.statusMeta.model}`
             : this.statusMeta.model || this.statusMeta.provider;
         if (model) {
-            segments.push(this.formatMetaSegment('model', model, 'info'));
+            segments.push(`${theme.ui.muted('model')} ${theme.info(model)}`);
         }
         const workspace = this.statusMeta.workspace || this.statusMeta.directory;
         if (workspace) {
-            segments.push(this.formatMetaSegment('dir', this.abbreviatePath(workspace), 'muted'));
-        }
-        if (this.statusMeta.sandbox) {
-            const tone = this.statusMeta.sandbox.includes('danger')
-                ? 'error'
-                : this.statusMeta.sandbox.includes('read')
-                    ? 'warn'
-                    : 'muted';
-            segments.push(this.formatMetaSegment('sandbox', this.statusMeta.sandbox, tone));
-        }
-        if (this.statusMeta.network) {
-            const tone = this.statusMeta.network === 'restricted' ? 'warn' : 'info';
-            segments.push(this.formatMetaSegment('network', this.statusMeta.network, tone));
-        }
-        if (this.statusMeta.approvals) {
-            const tone = this.statusMeta.approvals === 'auto' ? 'muted' : 'warn';
-            segments.push(this.formatMetaSegment('approvals', this.statusMeta.approvals, tone));
+            segments.push(`${theme.ui.muted('dir')} ${theme.ui.muted(this.abbreviatePath(workspace))}`);
         }
         if (this.statusMeta.writes) {
-            segments.push(this.formatMetaSegment('writes', this.statusMeta.writes, 'muted'));
+            segments.push(`${theme.ui.muted('writes')} ${theme.ui.muted(this.statusMeta.writes)}`);
         }
         if (this.statusMeta.toolSummary) {
-            segments.push(this.formatMetaSegment('tools', this.statusMeta.toolSummary, 'muted'));
+            segments.push(`${theme.ui.muted('tools')} ${theme.ui.muted(this.statusMeta.toolSummary)}`);
+        }
+        if (this.statusMeta.version) {
+            segments.push(`${theme.ui.muted('v')} ${theme.ui.muted(this.statusMeta.version)}`);
         }
         if (this.statusMeta.sessionLabel) {
-            segments.push(this.formatMetaSegment('session', this.statusMeta.sessionLabel, 'muted'));
+            segments.push(`${theme.ui.muted('session')} ${theme.ui.muted(this.statusMeta.sessionLabel)}`);
         }
-        if (this.statusMeta.version) {
-            segments.push(this.formatMetaSegment('build', `v${this.statusMeta.version}`, 'muted'));
+        const ctxTarget = this.renderedContextPercent ?? this.statusMeta.contextPercent;
+        const contextBar = formatTinyProgressBar(ctxTarget, 10);
+        if (contextBar) {
+            segments.push(`${theme.ui.muted('ctx')} ${theme.ui.muted(contextBar)}`);
         }
         if (segments.length === 0) {
-            return [];
-        }
-        return this.wrapSegments(segments, maxWidth);
-    }
-    composeStatusLabel() {
-        const statuses = [this.statusStreaming, this.statusOverride, this.statusMessage].filter((value, index, arr) => Boolean(value) && arr.indexOf(value) === index);
-        const text = statuses.length > 0 ? statuses.join(' / ') : 'Ready for prompts';
-        if (!text.trim()) {
             return null;
         }
-        const normalized = text.toLowerCase();
-        const tone = normalized.includes('ready') ? 'success' : 'info';
-        return { text, tone };
-    }
-    formatMetaSegment(label, value, tone) {
-        const colorizer = tone === 'success'
-            ? theme.success
-            : tone === 'warn'
-                ? theme.warning
-                : tone === 'error'
-                    ? theme.error
-                    : tone === 'muted'
-                        ? theme.ui.muted
-                        : theme.info;
-        return `${theme.ui.muted(label)} ${colorizer(value)}`;
-    }
-    applyTone(text, tone) {
-        switch (tone) {
-            case 'success':
-                return theme.success(text);
-            case 'warn':
-                return theme.warning(text);
-            case 'error':
-                return theme.error(text);
-            case 'info':
-            default:
-                return theme.info(text);
-        }
-    }
-    wrapSegments(segments, maxWidth) {
-        const lines = [];
-        const separator = theme.ui.muted('  |  ');
-        let current = '';
-        for (const segment of segments) {
-            const normalized = segment.trim();
-            if (!normalized)
-                continue;
-            if (!current) {
-                current = this.truncateLine(normalized, maxWidth);
-                continue;
-            }
-            const candidate = `${current}${separator}${normalized}`;
-            if (this.visibleLength(candidate) <= maxWidth) {
-                current = candidate;
-            }
-            else {
-                lines.push(this.truncateLine(current, maxWidth));
-                current = this.truncateLine(normalized, maxWidth);
-            }
-        }
-        if (current) {
-            lines.push(this.truncateLine(current, maxWidth));
-        }
-        return lines;
+        return this.truncateLine(segments.join(theme.ui.muted('  •  ')), maxWidth);
     }
     buildControlLines() {
         const lines = [];
@@ -1831,34 +1339,12 @@ 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')}`);
-        // 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) => {
             toggles.push({ label, on, hotkey: this.formatHotkey(hotkey), value });
         };
+        addToggle('Auto', this.toggleState.autoContinueEnabled, this.toggleState.autoContinueHotkey);
         addToggle('Verify', this.toggleState.verificationEnabled, this.toggleState.verificationHotkey);
         const approvalMode = this.toggleState.criticalApprovalMode || 'auto';
         const approvalActive = approvalMode !== 'auto';
@@ -1903,129 +1389,86 @@ export class UnifiedUIRenderer extends EventEmitter {
         addHotkey('interrupt', 'Ctrl+C');
         addHotkey('clear input', 'Ctrl+U');
         // Feature toggles (only if hotkeys are defined)
+        addHotkey('auto-run', this.toggleState.autoContinueHotkey);
         addHotkey('verify', this.toggleState.verificationHotkey);
         addHotkey('thinking', this.toggleState.thinkingHotkey);
         if (parts.length === 0) {
             return null;
         }
-        return parts.join(theme.ui.muted('   '));
+        const body = parts.join(theme.ui.muted('   '));
+        return `${body}${theme.ui.muted('   ? shortcuts')}`;
     }
-    buildInputLine() {
+    buildInputOverlay(maxWidth) {
+        const prompt = theme.primary('› ');
+        const promptWidth = this.visibleLength(prompt);
+        const usableWidth = Math.max(8, maxWidth - promptWidth);
         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());
+            const line = `${prompt}${theme.ui.muted(summary)}`;
+            const cursorCol = Math.min(maxWidth, this.visibleLength(line) + 1);
+            return { lines: [this.truncateLine(line, maxWidth)], cursorRow: 0, cursorCol };
         }
-        // Claude Code uses simple '>' prompt
-        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;
+        const cursorIndex = Math.min(this.cursor, normalized.length);
+        const rawLines = [];
+        let current = '';
+        let row = 0;
+        const limitForRow = (r) => (r === 0 ? usableWidth : usableWidth);
+        let cursorRow = 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;
+        for (let idx = 0; idx <= normalized.length; idx += 1) {
+            if (idx === cursorIndex) {
+                cursorRow = row;
+                cursorCol = current.length;
+            }
+            if (idx === normalized.length) {
+                break;
+            }
+            const char = normalized[idx];
+            if (char === '\n') {
+                current += NEWLINE_PLACEHOLDER;
+                rawLines.push(current);
+                row += 1;
+                current = '';
+                continue;
+            }
+            const limit = limitForRow(row);
+            if (current.length >= limit) {
+                rawLines.push(current);
+                row += 1;
+                current = '';
             }
-            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');
-    }
-    buildInputWindow(available) {
-        if (available <= 0) {
-            return { text: '', cursor: 0 };
+            current += char;
         }
-        if (this.collapsedPaste) {
-            return { text: '', cursor: 0 };
+        if (current || rawLines.length === 0) {
+            rawLines.push(current);
         }
-        const normalized = this.buffer.replace(/\r/g, '\n');
-        const cursorIndex = Math.min(this.cursor, normalized.length);
-        let offset = this.inputRenderOffset;
-        if (cursorIndex < offset) {
-            offset = cursorIndex;
-        }
-        const overflow = cursorIndex - offset - available + 1;
-        if (overflow > 0) {
-            offset += overflow;
-        }
-        const maxOffset = Math.max(0, normalized.length - available);
-        if (offset > maxOffset) {
-            offset = maxOffset;
-        }
-        this.inputRenderOffset = offset;
-        const window = normalized.slice(offset, offset + available);
-        const display = window.split('').map(char => (char === '\n' ? NEWLINE_PLACEHOLDER : char)).join('');
-        const cursorInWindow = Math.min(display.length, Math.max(0, cursorIndex - offset));
-        const before = display.slice(0, cursorInWindow);
-        const at = display.charAt(cursorInWindow) || ' ';
-        const after = display.slice(cursorInWindow + 1);
+        if (cursorIndex === normalized.length) {
+            cursorRow = rawLines.length - 1;
+            cursorCol = rawLines[cursorRow]?.length ?? 0;
+        }
+        const prefixPad = ' '.repeat(promptWidth);
+        const lines = [];
+        let cursorColumn = 1;
+        rawLines.forEach((line, index) => {
+            const prefix = index === 0 ? prompt : prefixPad;
+            const onCursorLine = index === cursorRow;
+            const text = line ?? '';
+            const col = Math.min(Math.max(cursorCol, 0), text.length);
+            let rendered = text;
+            if (onCursorLine) {
+                const before = rendered.slice(0, col);
+                const at = rendered.charAt(col) || ' ';
+                const after = rendered.slice(col + 1);
+                rendered = `${before}${ESC.REVERSE}${at}${ESC.RESET}${after}`;
+                cursorColumn = this.visibleLength(prefix) + col + 1;
+            }
+            lines.push(`${prefix}${rendered}`);
+        });
         return {
-            text: `${before}${ESC.REVERSE}${at}${ESC.RESET}${after}`,
-            cursor: cursorInWindow,
+            lines,
+            cursorRow,
+            cursorCol: cursorColumn,
         };
     }
     expandCollapsedPaste() {
@@ -2045,7 +1488,6 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (options.resetBuffer) {
             this.buffer = '';
             this.cursor = 0;
-            this.inputRenderOffset = 0;
             this.resetSuggestions();
             this.renderPrompt();
             this.emitInputChange();
@@ -2124,6 +1566,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;
     }
@@ -2133,7 +1586,6 @@ export class UnifiedUIRenderer extends EventEmitter {
     setBuffer(text, cursorPos) {
         this.buffer = text;
         this.cursor = cursorPos ?? text.length;
-        this.inputRenderOffset = 0;
         this.updateSuggestions();
         this.renderPrompt();
         this.emitInputChange();
@@ -2142,7 +1594,6 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.cancelPlainPasteCapture();
         this.buffer = '';
         this.cursor = 0;
-        this.inputRenderOffset = 0;
         this.suggestions = [];
         this.suggestionIndex = -1;
         this.renderPrompt();
@@ -2151,35 +1602,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);
     }
@@ -2223,30 +1645,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) {