erosolar-cli 2.1.172 → 2.1.174

package/dist/ui/UnifiedUIRenderer.js

@@ -11,10 +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 './layout.js';
-import { colorizeActivity, createFrameTicker, formatElapsed, formatTinyProgressBar, formatTokenDelta, } from './animatedStatus.js';
+import { ContextMeter, disposeAnimations } from './animatedStatus.js';
 const ESC = {
     HIDE_CURSOR: '\x1b[?25l',
     SHOW_CURSOR: '\x1b[?25h',
@@ -28,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 = '↵';
@@ -52,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 ------------
@@ -70,16 +99,14 @@ 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;
@@ -91,14 +118,9 @@ 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;
-    streamingStart = null;
-    activityInterval = null;
-    activityTicker = createFrameTicker('sparkle');
-    renderedContextPercent = null;
-    lastToolResult = null;
     inputCapture = null;
     constructor(output = process.stdout, input = process.stdin, options) {
         super();
@@ -106,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,
@@ -137,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;
         }
@@ -152,12 +173,27 @@ export class UnifiedUIRenderer extends EventEmitter {
     cleanup() {
         this.cancelInputCapture(new Error('Renderer disposed'));
         this.cancelPlainPasteCapture();
-        this.stopActivityTimer();
+        // 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);
@@ -209,14 +245,25 @@ export class UnifiedUIRenderer extends EventEmitter {
             return;
         }
         if (key.ctrl && key.name === 'c') {
-            const hadBuffer = this.buffer.length > 0;
-            this.emit('ctrl-c', { hadBuffer });
-            if (hadBuffer) {
-                this.clearBuffer();
+            // 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') {
@@ -225,12 +272,6 @@ 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;
@@ -241,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();
@@ -250,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;
@@ -298,18 +347,6 @@ 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;
@@ -574,6 +611,7 @@ export class UnifiedUIRenderer extends EventEmitter {
             this.inputCapture = null;
             this.buffer = '';
             this.cursor = 0;
+            this.inputRenderOffset = 0;
             this.resetSuggestions();
             this.renderPrompt();
             this.emitInputChange();
@@ -640,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;
         }
@@ -673,22 +715,10 @@ 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, options) {
+    addEvent(type, content) {
         if (!content)
             return;
-        if (this.isGarbageOutput(content))
-            return;
         const normalized = this.normalizeEventType(type);
         if (!normalized)
             return;
@@ -697,6 +727,7 @@ export class UnifiedUIRenderer extends EventEmitter {
             normalized === 'thought' ||
             normalized === 'stream' ||
             normalized === 'tool' ||
+            normalized === 'tool-result' ||
             normalized === 'build' ||
             normalized === 'test') {
             this.hasConversationContent = true;
@@ -720,7 +751,6 @@ 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
@@ -824,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();
         }
@@ -835,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) {
@@ -851,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':
@@ -868,83 +896,388 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
     }
     formatContent(event) {
-        const bullet = '⏺';
+        const bullet = '⏺'; // Claude Code uses plain bullet, no color
+        // Compacted blocks already have separator and formatting
         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':
-                return `\n> ${event.content}\n`;
+                // User prompt - just the text (prompt box handles styling)
+                return `${theme.primary('>')} ${event.content}\n`;
             case 'thought': {
-                return `\n${this.formatBulletBlock(event.content, bullet)}\n`;
-            }
-            case 'tool':
-                if (event.rawType === 'tool-call') {
-                    return `\n${this.formatBulletBlock(event.content, bullet)}\n`;
+                // Programmatic filter: reject content that looks like internal/garbage output
+                if (this.isGarbageOutput(event.content)) {
+                    return '';
                 }
-                if (event.rawType === 'tool-result') {
-                    return this.formatToolResult(event.content, event.isCompacted);
-                }
-                return `\n${event.content}\n`;
+                // 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 'build':
-                return `\n${this.formatBulletBlock(event.content, bullet)}\n`;
+                return `${bullet} ${theme.warning('Build')} ${theme.ui.muted('→')} ${event.content}\n`;
             case 'test':
-                return `\n${this.formatBulletBlock(event.content, bullet)}\n`;
+                return `${bullet} ${theme.info('Test')} ${theme.ui.muted('→')} ${event.content}\n`;
             case 'stream':
                 return event.content;
             case 'response':
             default: {
-                return `\n${this.formatBulletBlock(event.content, bullet)}\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);
             }
         }
     }
-    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`;
+    /**
+     * 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;
         }
-        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`;
-    }
-    wrapText(content, width) {
-        if (!content) {
-            return [''];
+        // Structural check: contains "to=functions." or "to=tools." (internal routing)
+        if (content.includes('to=functions.') || content.includes('to=tools.')) {
+            return true;
         }
-        const lines = [];
-        const rawLines = content.split('\n');
-        for (const rawLine of rawLines) {
-            const words = rawLine.split(/(\s+)/);
-            let current = '';
+        // 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 (!word)
-                    continue;
-                const candidate = current ? `${current}${word}` : word;
-                if (this.visibleLength(candidate) > width && current) {
-                    lines.push(current.trimEnd());
-                    current = word.trimStart();
+                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 {
-                    current = candidate;
+                    currentLine += word;
                 }
             }
-            lines.push(current.trimEnd());
+            if (currentLine.trim()) {
+                const prefix = result.length === 0 && lineIdx === 0 ? `${bullet} ` : '  ';
+                result.push(`${prefix}${currentLine.trimEnd()}`);
+            }
         }
-        return lines;
+        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)
@@ -981,26 +1314,81 @@ 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 (mode === 'streaming') {
-            if (!this.streamingStart) {
-                this.streamingStart = Date.now();
-            }
-            this.startActivityTimer();
+        if (!this.plainMode) {
+            // Always render prompt to keep bottom UI persistent (rich mode only)
+            this.renderPrompt();
         }
-        else {
-            this.streamingStart = null;
-            this.stopActivityTimer();
+    }
+    /**
+     * 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) {
-            // 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;
     }
@@ -1039,15 +1427,7 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
     }
     updateStatusMeta(meta, options = {}) {
-        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 next = { ...this.statusMeta, ...meta };
         const changed = JSON.stringify(next) !== JSON.stringify(this.statusMeta);
         this.statusMeta = next;
         const shouldRender = options.render !== false && changed;
@@ -1057,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();
@@ -1081,51 +1460,6 @@ 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) {
@@ -1139,6 +1473,7 @@ 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
@@ -1148,23 +1483,9 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!this.allowPromptRender) {
             return;
         }
-        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)
+        // 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) {
@@ -1174,99 +1495,188 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!renderedLines.length) {
             return;
         }
-        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);
+        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 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) {
+        // 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) {
             lines.push(this.truncateLine(line, maxWidth));
         }
-        lines.push(this.truncateLine(renderDivider(Math.min(maxWidth, 96)), 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));
-            }
-        }
-        if (this.persistentPanel.length > 0) {
-            for (const panelLine of this.persistentPanel) {
-                lines.push(this.truncateLine(panelLine, maxWidth));
+                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));
             }
         }
-        const modelLine = this.buildModelLine(maxWidth);
-        if (modelLine) {
-            lines.push(modelLine);
+        // Model and context info
+        const modelContextLine = this.buildModelContextLine();
+        if (modelContextLine) {
+            lines.push(this.truncateLine(`  ${modelContextLine}`, maxWidth));
         }
-        const toggleLine = this.buildToggleLine();
+        // Mode toggles
+        const toggleLine = this.buildInlineToggleLine();
         if (toggleLine) {
-            lines.push(toggleLine);
+            lines.push(this.truncateLine(`  ${toggleLine}`, maxWidth));
         }
-        const shortcutLine = this.buildShortcutLine();
-        if (shortcutLine) {
-            lines.push(shortcutLine);
+        // 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));
         }
-        else {
-            lines.push(`${theme.ui.muted('?')} shortcuts`);
+        // 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 { lines, cursorRow: promptRow, cursorCol: promptCol };
+        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);
+        const metaLines = this.buildMetaBlock(maxWidth);
+        return [...statusLines, ...metaLines];
     }
     abbreviatePath(pathValue) {
         const home = homedir();
@@ -1275,57 +1685,123 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
         return pathValue;
     }
-    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;
+    buildStatusBlock(maxWidth) {
+        const statusLabel = this.composeStatusLabel();
+        if (!statusLabel) {
+            return [];
         }
-        return this.truncateLine(parts.join(theme.ui.muted('  •  ')), maxWidth);
+        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());
+        }
+        return this.wrapSegments(segments, maxWidth);
     }
-    buildModelLine(maxWidth) {
+    buildMetaBlock(maxWidth) {
         const segments = [];
         if (this.statusMeta.profile) {
-            segments.push(`${theme.ui.muted('profile')} ${theme.info(this.statusMeta.profile)}`);
+            segments.push(this.formatMetaSegment('profile', this.statusMeta.profile, 'info'));
         }
         const model = this.statusMeta.provider && this.statusMeta.model
             ? `${this.statusMeta.provider} / ${this.statusMeta.model}`
             : this.statusMeta.model || this.statusMeta.provider;
         if (model) {
-            segments.push(`${theme.ui.muted('model')} ${theme.info(model)}`);
+            segments.push(this.formatMetaSegment('model', model, 'info'));
         }
         const workspace = this.statusMeta.workspace || this.statusMeta.directory;
         if (workspace) {
-            segments.push(`${theme.ui.muted('dir')} ${theme.ui.muted(this.abbreviatePath(workspace))}`);
+            segments.push(this.formatMetaSegment('dir', this.abbreviatePath(workspace), 'muted'));
         }
         if (this.statusMeta.writes) {
-            segments.push(`${theme.ui.muted('writes')} ${theme.ui.muted(this.statusMeta.writes)}`);
+            segments.push(this.formatMetaSegment('writes', this.statusMeta.writes, 'muted'));
         }
         if (this.statusMeta.toolSummary) {
-            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)}`);
+            segments.push(this.formatMetaSegment('tools', this.statusMeta.toolSummary, 'muted'));
         }
         if (this.statusMeta.sessionLabel) {
-            segments.push(`${theme.ui.muted('session')} ${theme.ui.muted(this.statusMeta.sessionLabel)}`);
+            segments.push(this.formatMetaSegment('session', this.statusMeta.sessionLabel, '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 (this.statusMeta.version) {
+            segments.push(this.formatMetaSegment('build', `v${this.statusMeta.version}`, 'muted'));
         }
         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;
         }
-        return this.truncateLine(segments.join(theme.ui.muted('  •  ')), maxWidth);
+        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;
     }
     buildControlLines() {
         const lines = [];
@@ -1339,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';
@@ -1389,86 +1887,129 @@ 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;
         }
-        const body = parts.join(theme.ui.muted('   '));
-        return `${body}${theme.ui.muted('   ? shortcuts')}`;
+        return parts.join(theme.ui.muted('   '));
     }
-    buildInputOverlay(maxWidth) {
-        const prompt = theme.primary('› ');
-        const promptWidth = this.visibleLength(prompt);
-        const usableWidth = Math.max(8, maxWidth - promptWidth);
+    buildInputLine() {
         if (this.collapsedPaste) {
             const summary = `[pasted ${this.collapsedPaste.lines} lines, ${this.collapsedPaste.chars} chars] (Ctrl+L insert, Backspace discard)`;
-            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 };
+            return this.truncateLine(`${theme.primary('> ')}${theme.ui.muted(summary)}`, this.safeWidth());
         }
+        // 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 cursorIndex = Math.min(this.cursor, normalized.length);
-        const rawLines = [];
-        let current = '';
-        let row = 0;
-        const limitForRow = (r) => (r === 0 ? usableWidth : usableWidth);
-        let cursorRow = 0;
+        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;
-        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 = '';
+        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;
             }
-            current += char;
-        }
-        if (current || rawLines.length === 0) {
-            rawLines.push(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 };
         }
-        if (cursorIndex === normalized.length) {
-            cursorRow = rawLines.length - 1;
-            cursorCol = rawLines[cursorRow]?.length ?? 0;
+        if (this.collapsedPaste) {
+            return { text: '', cursor: 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}`);
-        });
+        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);
         return {
-            lines,
-            cursorRow,
-            cursorCol: cursorColumn,
+            text: `${before}${ESC.REVERSE}${at}${ESC.RESET}${after}`,
+            cursor: cursorInWindow,
         };
     }
     expandCollapsedPaste() {
@@ -1488,6 +2029,7 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (options.resetBuffer) {
             this.buffer = '';
             this.cursor = 0;
+            this.inputRenderOffset = 0;
             this.resetSuggestions();
             this.renderPrompt();
             this.emitInputChange();
@@ -1566,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;
     }
@@ -1586,6 +2117,7 @@ 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();
@@ -1594,6 +2126,7 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.cancelPlainPasteCapture();
         this.buffer = '';
         this.cursor = 0;
+        this.inputRenderOffset = 0;
         this.suggestions = [];
         this.suggestionIndex = -1;
         this.renderPrompt();
@@ -1602,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);
     }
@@ -1645,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) {