erosolar-cli 2.1.168 → 2.1.169

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 } from './theme.js';
+import { theme, spinnerFrames } from './theme.js';
 import { isPlainOutputMode } from './outputMode.js';
-import { renderDivider } from './unified/layout.js';
+import { ContextMeter, disposeAnimations } from './animatedStatus.js';
 const ESC = {
     HIDE_CURSOR: '\x1b[?25l',
     SHOW_CURSOR: '\x1b[?25h',
@@ -27,6 +27,11 @@ 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 = '↵';
@@ -51,13 +56,38 @@ 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 ------------
@@ -69,10 +99,7 @@ export class UnifiedUIRenderer extends EventEmitter {
     lastPromptEvent = null;
     promptHeight = 0;
     lastOverlayHeight = 0;
-    lastPromptIndex = 0;
-    overlayBottomPadding = 1;
     inlinePanel = [];
-    overlayInvalidated = false;
     hasConversationContent = false;
     isPromptActive = false;
     inputRenderOffset = 0;
@@ -91,7 +118,7 @@ export class UnifiedUIRenderer extends EventEmitter {
     lastRenderedEventKey = null;
     lastOutputEndedWithNewline = true;
     hasRenderedPrompt = false;
-    hasEverRenderedOverlay = false; // Track if we've ever rendered to prevent first-render scrollback pollution
+    hasEverRenderedOverlay = false; // Track if we've ever rendered for inline clearing
     lastOverlay = null;
     allowPromptRender = true;
     inputCapture = null;
@@ -101,6 +128,8 @@ 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,
@@ -132,9 +161,6 @@ 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;
         }
@@ -147,11 +173,27 @@ 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);
@@ -203,15 +245,25 @@ export class UnifiedUIRenderer extends EventEmitter {
             return;
         }
         if (key.ctrl && key.name === 'c') {
-            if (this.buffer.length === 0) {
-                this.emit('interrupt');
-            }
-            else {
+            // 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();
             }
+            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') {
@@ -230,6 +282,11 @@ 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();
@@ -239,9 +296,12 @@ export class UnifiedUIRenderer extends EventEmitter {
             // If a slash command suggestion is highlighted, pressing Enter submits it immediately
             if (this.applySuggestion(true))
                 return;
-            // If buffer starts with '/' and the first suggestion exists, submit it
+            // Fallback: if buffer starts with '/' and suggestions exist, use the selected/first one
             if (this.buffer.startsWith('/') && this.suggestions.length > 0) {
-                this.buffer = this.suggestions[this.suggestionIndex >= 0 ? this.suggestionIndex : 0]?.command ?? this.buffer;
+                const safeIndex = this.suggestionIndex >= 0 && this.suggestionIndex < this.suggestions.length
+                    ? this.suggestionIndex
+                    : 0;
+                this.buffer = this.suggestions[safeIndex]?.command ?? this.buffer;
             }
             this.submitText(this.buffer);
             return;
@@ -618,7 +678,11 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!this.buffer.startsWith('/') || this.suggestions.length === 0) {
             return false;
         }
-        const selected = this.suggestions[this.suggestionIndex] ?? this.suggestions[0];
+        // 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];
         if (!selected) {
             return false;
         }
@@ -663,6 +727,7 @@ export class UnifiedUIRenderer extends EventEmitter {
             normalized === 'thought' ||
             normalized === 'stream' ||
             normalized === 'tool' ||
+            normalized === 'tool-result' ||
             normalized === 'build' ||
             normalized === 'test') {
             this.hasConversationContent = true;
@@ -789,6 +854,7 @@ 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();
         }
@@ -800,10 +866,6 @@ 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) {
@@ -816,8 +878,9 @@ export class UnifiedUIRenderer extends EventEmitter {
                 return 'stream';
             case 'tool':
             case 'tool-call':
-            case 'tool-result':
                 return 'tool';
+            case 'tool-result':
+                return 'tool-result';
             case 'build':
                 return 'build';
             case 'test':
@@ -843,35 +906,378 @@ 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':
-                return `\n> ${event.content}\n`; // Plain > like Claude Code
+                // User prompt - just the text (prompt box handles styling)
+                return `${theme.primary('>')} ${event.content}\n`;
             case 'thought': {
-                // 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`;
+                // 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);
             }
-            case 'tool':
-                // Tool calls don't have bullet in Claude Code - just the name
-                return `\n${event.content}\n`;
             case 'build':
-                return `\n${event.content}\n`;
+                return `${bullet} ${theme.warning('Build')} ${theme.ui.muted('→')} ${event.content}\n`;
             case 'test':
-                return `\n${event.content}\n`;
+                return `${bullet} ${theme.info('Test')} ${theme.ui.muted('→')} ${event.content}\n`;
             case 'stream':
                 return event.content;
             case 'response':
             default: {
-                // 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`);
+                // 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;
             }
         }
+        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)
@@ -908,6 +1314,16 @@ 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');
@@ -918,6 +1334,61 @@ 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;
     }
@@ -966,8 +1437,7 @@ export class UnifiedUIRenderer extends EventEmitter {
     }
     updateModeToggles(state) {
         this.toggleState = { ...this.toggleState, ...state };
-        if (!state.autoContinueHotkey &&
-            !state.verificationHotkey &&
+        if (!state.verificationHotkey &&
             !state.thinkingHotkey &&
             !state.criticalApprovalHotkey) {
             this.hotkeysInToggleLine.clear();
@@ -1013,13 +1483,9 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!this.allowPromptRender) {
             return;
         }
-        // Rich mode: inline overlay anchored to current scrollback (no full-screen clear)
+        // Rich inline mode: prompt flows naturally with content
         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) {
@@ -1029,81 +1495,183 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!renderedLines.length) {
             return;
         }
-        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);
+        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`);
+            }
         }
-        // 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));
+        // Write prompt lines (no trailing newline on last line)
+        for (let i = 0; i < renderedLines.length; i++) {
+            this.write('\r');
             this.write(ESC.CLEAR_LINE);
-            if (line) {
-                this.write(line);
+            this.write(renderedLines[i] || '');
+            if (i < renderedLines.length - 1) {
+                this.write('\n');
             }
         }
-        // Position cursor at prompt row/col
-        this.write(ESC.TO(promptRow, promptCol));
+        // 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;
         this.hasRenderedPrompt = true;
-        this.hasEverRenderedOverlay = true; // Mark that we've rendered at least once
+        this.hasEverRenderedOverlay = true;
         this.isPromptActive = true;
         this.lastOverlayHeight = height;
-        this.lastPromptIndex = promptIndex;
         this.lastOverlay = { lines: renderedLines, promptIndex };
-        this.overlayInvalidated = false;
-        this.lastOutputEndedWithNewline = true;
+        this.lastOutputEndedWithNewline = false;
         this.promptHeight = height;
     }
     buildOverlayLines() {
         const lines = [];
         const maxWidth = this.safeWidth();
-        const chromeLines = this.buildChromeLines();
-        for (const line of chromeLines) {
-            lines.push(this.truncateLine(line, maxWidth));
+        // 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));
         }
-        const divider = renderDivider(Math.min(maxWidth, 96), 'prompt');
-        lines.push(this.truncateLine(divider, maxWidth));
+        // Top divider
+        lines.push(divider);
+        // Input prompt line
         const promptIndex = lines.length;
-        lines.push(this.truncateLine(this.buildInputLine(), maxWidth));
+        const inputLine = this.buildInputLine();
+        // Handle multi-line input by splitting on newlines
+        const inputLines = inputLine.split('\n');
+        for (const line of inputLines) {
+            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
         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));
             }
         }
-        if (this.inlinePanel.length > 0) {
-            for (const panelLine of this.inlinePanel) {
-                lines.push(this.truncateLine(panelLine, maxWidth));
-            }
+        // Model and context info
+        const modelContextLine = this.buildModelContextLine();
+        if (modelContextLine) {
+            lines.push(this.truncateLine(`  ${modelContextLine}`, maxWidth));
         }
-        const controlLines = this.buildControlLines();
-        for (const control of controlLines) {
-            lines.push(this.truncateLine(control, maxWidth));
+        // Mode toggles
+        const toggleLine = this.buildInlineToggleLine();
+        if (toggleLine) {
+            lines.push(this.truncateLine(`  ${toggleLine}`, 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}`);
+        // 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);
@@ -1123,15 +1691,22 @@ export class UnifiedUIRenderer extends EventEmitter {
             return [];
         }
         const segments = [];
-        segments.push(`${theme.ui.muted('status')} ${this.applyTone(statusLabel.text, statusLabel.tone)}`);
+        // 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) {
-            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}%`)}`);
+            // Use animated context meter for smooth color transitions
+            this.contextMeter.update(this.statusMeta.contextPercent);
+            segments.push(this.contextMeter.render());
         }
         return this.wrapSegments(segments, maxWidth);
     }
@@ -1240,12 +1815,34 @@ 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';
@@ -1290,7 +1887,6 @@ 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) {
@@ -1301,15 +1897,87 @@ 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());
         }
-        const prompt = theme.primary('› ');
+        // Claude Code uses simple '>' prompt
+        const prompt = theme.primary('> ');
         const promptWidth = this.visibleLength(prompt);
         const maxWidth = this.safeWidth();
-        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);
+        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');
     }
     buildInputWindow(available) {
         if (available <= 0) {
@@ -1440,17 +2108,6 @@ 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;
     }
@@ -1478,6 +2135,35 @@ 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);
     }
@@ -1521,23 +2207,30 @@ export class UnifiedUIRenderer extends EventEmitter {
         const height = this.lastOverlay?.lines.length ?? this.promptHeight ?? 0;
         if (height === 0)
             return;
-        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));
+        // 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.write(ESC.CLEAR_LINE);
+            if (i < height - 1) {
+                this.write('\x1b[B');
+            }
         }
-        // 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;
+        // Move back to top (where content should continue from)
+        if (height > 1) {
+            this.write(`\x1b[${height - 1}A`);
+        }
+        this.write('\r');
         this.lastOverlay = null;
-        this.overlayInvalidated = true;
         this.promptHeight = 0;
+        this.lastOverlayHeight = 0;
+        this.isPromptActive = false;
     }
     updateTerminalSize() {
         if (this.output.isTTY) {