erosolar-cli 2.1.172 → 2.1.173

package/dist/ui/UnifiedUIRenderer.js

@@ -10,22 +10,13 @@
  */
 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';
 const ESC = {
-    HIDE_CURSOR: '\x1b[?25l',
     SHOW_CURSOR: '\x1b[?25h',
-    CLEAR_SCREEN: '\x1b[2J',
     CLEAR_LINE: '\x1b[2K',
-    HOME: '\x1b[H',
     ENABLE_BRACKETED_PASTE: '\x1b[?2004h',
     DISABLE_BRACKETED_PASTE: '\x1b[?2004l',
-    TO: (row, col) => `\x1b[${row};${col}H`,
-    TO_COL: (col) => `\x1b[${col}G`,
-    ERASE_DOWN: '\x1b[J',
     REVERSE: '\x1b[7m',
     RESET: '\x1b[0m',
 };
@@ -37,9 +28,7 @@ export class UnifiedUIRenderer extends EventEmitter {
     rl;
     plainMode;
     interactive;
-    rows = 24;
     cols = 80;
-    lastRenderWidth = null;
     eventQueue = [];
     isProcessingQueue = false;
     buffer = '';
@@ -49,37 +38,33 @@ export class UnifiedUIRenderer extends EventEmitter {
     suggestions = [];
     suggestionIndex = -1;
     availableCommands = [];
-    hotkeysInToggleLine = new Set();
     collapsedPaste = null;
     mode = 'idle';
+    streamingStartTime = null;
     statusMessage = null;
     statusOverride = null;
     statusStreaming = null;
+    // Animated UI components
+    spinnerFrame = 0;
+    spinnerInterval = null;
+    // Activity/status tracking
+    activityMessage = null;
+    streamingTokens = 0;
     statusMeta = {};
     toggleState = {
         verificationEnabled: false,
-        autoContinueEnabled: false,
         criticalApprovalMode: 'auto',
     };
     // ------------ Helpers ------------
-    formatHotkey(combo) {
-        if (!combo?.trim())
-            return null;
-        return combo.trim().toUpperCase();
-    }
     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;
+    cursorVisibleRow = 0;
     inBracketedPaste = false;
     pasteBuffer = '';
     inPlainPaste = false;
@@ -90,15 +75,6 @@ export class UnifiedUIRenderer extends EventEmitter {
     plainRecentChunks = [];
     lastRenderedEventKey = null;
     lastOutputEndedWithNewline = true;
-    hasRenderedPrompt = false;
-    hasEverRenderedOverlay = false; // Track if we've ever rendered to prevent first-render scrollback pollution
-    lastOverlay = null;
-    allowPromptRender = true;
-    streamingStart = null;
-    activityInterval = null;
-    activityTicker = createFrameTicker('sparkle');
-    renderedContextPercent = null;
-    lastToolResult = null;
     inputCapture = null;
     constructor(output = process.stdout, input = process.stdin, options) {
         super();
@@ -116,7 +92,7 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.rl.setPrompt('');
         this.updateTerminalSize();
         this.output.on('resize', () => {
-            if (!this.plainMode) {
+            if (this.interactive) {
                 this.updateTerminalSize();
                 this.renderPrompt();
             }
@@ -127,47 +103,30 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!this.interactive) {
             return;
         }
-        if (!this.plainMode) {
-            // If an overlay was already rendered before initialization (e.g., banner emitted early),
-            // clear it so initialize() doesn't stack a second control bar in scrollback.
-            if (this.hasRenderedPrompt || this.lastOverlay) {
-                this.clearPromptArea();
-            }
-            this.write(ESC.ENABLE_BRACKETED_PASTE);
-            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;
-        }
-        // Plain mode: minimal setup, still render a simple prompt line
+        this.write(ESC.ENABLE_BRACKETED_PASTE);
         this.updateTerminalSize();
-        this.hasRenderedPrompt = false;
         this.lastOutputEndedWithNewline = true;
+        this.write(ESC.SHOW_CURSOR);
         this.renderPrompt();
     }
     cleanup() {
         this.cancelInputCapture(new Error('Renderer disposed'));
         this.cancelPlainPasteCapture();
-        this.stopActivityTimer();
+        if (this.spinnerInterval) {
+            clearInterval(this.spinnerInterval);
+            this.spinnerInterval = null;
+        }
         if (!this.interactive) {
             this.rl.close();
             return;
         }
-        if (!this.plainMode) {
-            this.clearPromptArea();
-            this.write(ESC.DISABLE_BRACKETED_PASTE);
-            this.write(ESC.SHOW_CURSOR);
-            this.write('\n');
-        }
+        this.write(ESC.DISABLE_BRACKETED_PASTE);
+        this.write(ESC.SHOW_CURSOR);
+        this.write('\n');
         if (this.input.isTTY) {
             this.input.setRawMode(false);
         }
         this.rl.close();
-        this.lastOverlay = null;
     }
     // ------------ Input handling ------------
     setupInputHandlers() {
@@ -208,15 +167,30 @@ export class UnifiedUIRenderer extends EventEmitter {
             this.emit('toggle-critical-approval');
             return;
         }
+        if (key.ctrl && key.shift && key.name?.toLowerCase() === 'n') {
+            this.emit('toggle-network');
+            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 +199,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 +209,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 +223,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 +274,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 +538,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 +605,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,34 +642,13 @@ 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;
-        if (normalized === 'prompt' ||
-            normalized === 'response' ||
-            normalized === 'thought' ||
-            normalized === 'stream' ||
-            normalized === 'tool' ||
-            normalized === 'build' ||
-            normalized === 'test') {
-            this.hasConversationContent = true;
-        }
         if (this.plainMode) {
             const formatted = this.formatContent({
                 type: normalized,
@@ -720,7 +668,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
@@ -759,23 +706,11 @@ export class UnifiedUIRenderer extends EventEmitter {
                     const message = error instanceof Error ? error.message : typeof error === 'string' ? error : 'Unknown renderer error';
                     this.output.write(`\n[renderer] ${message}\n`);
                 }
-                // For prompt events, ensure the overlay is rendered immediately
-                // This guarantees prompts are visible before async processing continues
-                if (event.type === 'prompt') {
-                    if (this.output.isTTY) {
-                        this.allowPromptRender = true;
-                        this.renderPrompt();
-                    }
-                    // No delay for prompt events - render immediately
-                }
-                else {
+                if (event.type !== 'prompt') {
                     await this.delay(1);
                 }
             }
-            // ALWAYS render prompt after queue completes to keep bottom UI persistent
-            // This ensures status/toggles stay pinned and responses are fully rendered
-            if (this.output.isTTY) {
-                this.allowPromptRender = true;
+            if (this.output.isTTY && this.interactive) {
                 this.renderPrompt();
             }
         }
@@ -790,28 +725,18 @@ export class UnifiedUIRenderer extends EventEmitter {
      */
     async flushEvents(timeoutMs = 250) {
         // Kick off processing if idle
-        if (!this.plainMode && !this.isProcessingQueue && this.eventQueue.length > 0) {
+        if (!this.isProcessingQueue && this.eventQueue.length > 0) {
             void this.processQueue();
         }
         const start = Date.now();
         while ((this.isProcessingQueue || this.eventQueue.length > 0) && Date.now() - start < timeoutMs) {
             await this.delay(5);
         }
-        if (!this.plainMode && this.output.isTTY) {
-            this.allowPromptRender = true;
+        if (this.output.isTTY && this.interactive) {
             this.renderPrompt();
         }
     }
     async renderEvent(event) {
-        if (this.plainMode) {
-            const formattedPlain = this.formatContent(event);
-            if (formattedPlain) {
-                const text = formattedPlain.endsWith('\n') ? formattedPlain : `${formattedPlain}\n`;
-                this.output.write(text);
-                this.lastOutputEndedWithNewline = text.endsWith('\n');
-            }
-            return;
-        }
         const formatted = this.formatContent(event);
         if (!formatted)
             return;
@@ -824,10 +749,9 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (event.type !== 'prompt') {
             this.lastRenderedEventKey = signature;
         }
-        if (this.promptHeight > 0 || this.lastOverlay) {
-            this.clearPromptArea();
+        if (this.isPromptActive) {
+            this.clearPromptArea(true);
         }
-        this.isPromptActive = false;
         if (event.type !== 'stream' && !this.lastOutputEndedWithNewline && formatted.trim()) {
             // Keep scrollback ordering predictable when previous output ended mid-line
             this.output.write('\n');
@@ -835,10 +759,9 @@ 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
+        if (this.interactive && !this.plainMode) {
+            this.renderPrompt();
+        }
     }
     normalizeEventType(type) {
         switch (type) {
@@ -851,8 +774,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 +792,372 @@ 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 a compact conversation block (Claude Code style)
@@ -981,26 +1194,66 @@ 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.interactive) {
+            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.spinnerInterval = setInterval(() => {
+            this.spinnerFrame = (this.spinnerFrame + 1) % spinnerFrames.braille.length;
+            if (this.mode === 'streaming') {
+                this.renderPrompt();
+            }
+        }, 120);
+    }
+    /**
+     * Stop the animated spinner
+     */
+    stopSpinnerAnimation() {
+        if (this.spinnerInterval) {
+            clearInterval(this.spinnerInterval);
+            this.spinnerInterval = null;
         }
-        if (!this.plainMode) {
-            // Always render prompt to keep bottom UI persistent (rich mode only)
+        this.spinnerFrame = 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.interactive) {
             this.renderPrompt();
         }
     }
+    /**
+     * Update the token count displayed in the activity line
+     */
+    updateStreamingTokens(tokens) {
+        this.streamingTokens = tokens;
+    }
     getMode() {
         return this.mode;
     }
@@ -1039,15 +1292,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,74 +1302,19 @@ export class UnifiedUIRenderer extends EventEmitter {
     }
     updateModeToggles(state) {
         this.toggleState = { ...this.toggleState, ...state };
-        if (!state.autoContinueHotkey &&
-            !state.verificationHotkey &&
-            !state.thinkingHotkey &&
-            !state.criticalApprovalHotkey) {
-            this.hotkeysInToggleLine.clear();
-        }
         this.renderPrompt();
     }
     setInlinePanel(lines) {
         const normalized = (lines ?? [])
             .map(line => line.replace(/\s+$/g, ''))
             .filter(line => line.trim().length > 0);
-        if (JSON.stringify(normalized) === JSON.stringify(this.inlinePanel)) {
+        if (!normalized.length) {
             return;
         }
-        this.inlinePanel = normalized;
-        this.renderPrompt();
+        this.addEvent('response', `${normalized.join('\n')}\n`);
     }
     clearInlinePanel() {
-        if (!this.inlinePanel.length)
-            return;
-        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;
+        // No-op: inline panels render directly into scrollback
     }
     // ------------ Prompt rendering ------------
     renderPrompt() {
@@ -1132,343 +1322,203 @@ export class UnifiedUIRenderer extends EventEmitter {
             this.isPromptActive = false;
             return;
         }
-        if (this.plainMode) {
-            const line = `> ${this.buffer}`;
-            if (!this.isPromptActive && !this.lastOutputEndedWithNewline) {
-                this.write('\n');
-                this.lastOutputEndedWithNewline = true;
-            }
-            this.write(`\r${ESC.CLEAR_LINE}${line}`);
-            this.hasRenderedPrompt = true;
-            this.isPromptActive = true;
-            this.lastOutputEndedWithNewline = false; // prompt ends mid-line by design
-            this.promptHeight = 1;
-            return;
-        }
-        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)
         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) {
-            return;
-        }
-        const renderedLines = overlay.lines.map(line => this.truncateLine(line, maxWidth));
-        if (!renderedLines.length) {
-            return;
+        const status = this.composeStatusLabel();
+        const inputLine = this.buildInputLine();
+        const inputLines = inputLine.split('\n');
+        const lines = [];
+        if (status) {
+            lines.push(this.applyTone(status.text, status.tone));
         }
-        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);
+        lines.push(...inputLines);
+        const hadPrompt = this.isPromptActive;
+        this.clearPromptArea();
+        if (!hadPrompt && !this.lastOutputEndedWithNewline) {
+            this.write('\n');
+            this.lastOutputEndedWithNewline = true;
         }
-        // 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));
+        for (let i = 0; i < lines.length; i++) {
+            this.write('\r');
             this.write(ESC.CLEAR_LINE);
-            if (line) {
-                this.write(line);
+            this.write(lines[i] || '');
+            if (i < lines.length - 1) {
+                this.write('\n');
             }
         }
-        // Position cursor at prompt row/col
-        this.write(ESC.TO(promptRow, promptCol));
-        this.hasRenderedPrompt = true;
-        this.hasEverRenderedOverlay = true; // Mark that we've rendered at least once
+        const cursorRow = Math.min(lines.length - 1, this.cursorVisibleRow ?? lines.length - 1);
+        const rowsToMoveUp = lines.length - 1 - cursorRow;
+        if (rowsToMoveUp > 0) {
+            this.write(`\x1b[${rowsToMoveUp}A`);
+        }
+        const cursorCol = Math.max(1, this.cursorVisibleColumn);
+        this.write(`\x1b[${cursorCol}G`);
         this.isPromptActive = true;
-        this.lastOverlayHeight = height;
-        this.lastPromptIndex = promptIndex;
-        this.lastOverlay = { lines: renderedLines, promptIndex };
-        this.overlayInvalidated = false;
-        this.lastOutputEndedWithNewline = true;
-        this.promptHeight = height;
+        this.promptHeight = lines.length;
+        this.lastOutputEndedWithNewline = false;
     }
-    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) {
-            lines.push(this.truncateLine(line, maxWidth));
-        }
-        lines.push(this.truncateLine(renderDivider(Math.min(maxWidth, 96)), maxWidth));
-        if (this.inlinePanel.length > 0) {
-            for (const panelLine of this.inlinePanel) {
-                lines.push(this.truncateLine(panelLine, maxWidth));
-            }
-        }
-        if (this.persistentPanel.length > 0) {
-            for (const panelLine of this.persistentPanel) {
-                lines.push(this.truncateLine(panelLine, maxWidth));
-            }
-        }
-        if (this.suggestions.length > 0) {
-            for (let index = 0; index < this.suggestions.length; index++) {
-                const suggestion = this.suggestions[index];
-                const isActive = index === this.suggestionIndex;
-                const marker = isActive ? theme.primary('›') : theme.ui.muted('›');
-                const 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));
-            }
-        }
-        const modelLine = this.buildModelLine(maxWidth);
-        if (modelLine) {
-            lines.push(modelLine);
-        }
-        const toggleLine = this.buildToggleLine();
-        if (toggleLine) {
-            lines.push(toggleLine);
-        }
-        const shortcutLine = this.buildShortcutLine();
-        if (shortcutLine) {
-            lines.push(shortcutLine);
-        }
-        else {
-            lines.push(`${theme.ui.muted('?')} shortcuts`);
-        }
-        return { lines, cursorRow: promptRow, cursorCol: promptCol };
-    }
-    abbreviatePath(pathValue) {
-        const home = homedir();
-        if (home && pathValue.startsWith(home)) {
-            return pathValue.replace(home, '~');
-        }
-        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) {
+    composeStatusLabel() {
+        const statuses = [this.activityMessage, 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(parts.join(theme.ui.muted('  •  ')), maxWidth);
-    }
-    buildModelLine(maxWidth) {
-        const segments = [];
-        if (this.statusMeta.profile) {
-            segments.push(`${theme.ui.muted('profile')} ${theme.info(this.statusMeta.profile)}`);
-        }
-        const model = this.statusMeta.provider && this.statusMeta.model
-            ? `${this.statusMeta.provider} / ${this.statusMeta.model}`
-            : this.statusMeta.model || this.statusMeta.provider;
-        if (model) {
-            segments.push(`${theme.ui.muted('model')} ${theme.info(model)}`);
-        }
-        const workspace = this.statusMeta.workspace || this.statusMeta.directory;
-        if (workspace) {
-            segments.push(`${theme.ui.muted('dir')} ${theme.ui.muted(this.abbreviatePath(workspace))}`);
-        }
-        if (this.statusMeta.writes) {
-            segments.push(`${theme.ui.muted('writes')} ${theme.ui.muted(this.statusMeta.writes)}`);
-        }
-        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)}`);
-        }
-        if (this.statusMeta.sessionLabel) {
-            segments.push(`${theme.ui.muted('session')} ${theme.ui.muted(this.statusMeta.sessionLabel)}`);
-        }
-        const ctxTarget = this.renderedContextPercent ?? this.statusMeta.contextPercent;
-        const contextBar = formatTinyProgressBar(ctxTarget, 10);
-        if (contextBar) {
-            segments.push(`${theme.ui.muted('ctx')} ${theme.ui.muted(contextBar)}`);
-        }
-        if (segments.length === 0) {
-            return null;
+        const normalized = text.toLowerCase();
+        const tone = normalized.includes('ready') ? 'success' : 'info';
+        return { text, tone };
+    }
+    formatMetaSegment(label, value, tone) {
+        const colorizer = tone === 'success'
+            ? theme.success
+            : tone === 'warn'
+                ? theme.warning
+                : tone === 'error'
+                    ? theme.error
+                    : tone === 'muted'
+                        ? theme.ui.muted
+                        : theme.info;
+        return `${theme.ui.muted(label)} ${colorizer(value)}`;
+    }
+    applyTone(text, tone) {
+        switch (tone) {
+            case 'success':
+                return theme.success(text);
+            case 'warn':
+                return theme.warning(text);
+            case 'error':
+                return theme.error(text);
+            case 'info':
+            default:
+                return theme.info(text);
         }
-        return this.truncateLine(segments.join(theme.ui.muted('  •  ')), maxWidth);
     }
-    buildControlLines() {
+    wrapSegments(segments, maxWidth) {
         const lines = [];
-        const toggleLine = this.buildToggleLine();
-        if (toggleLine) {
-            lines.push(`${theme.ui.muted('modes')} ${theme.ui.muted('›')} ${toggleLine}`);
-        }
-        const shortcutLine = this.buildShortcutLine();
-        if (shortcutLine) {
-            lines.push(`${theme.ui.muted('keys')}  ${shortcutLine}`);
-        }
-        return lines;
-    }
-    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';
-        addToggle('Approvals', approvalActive, this.toggleState.criticalApprovalHotkey, approvalMode === 'auto' ? 'auto' : 'ask');
-        const thinkingLabel = (this.toggleState.thinkingModeLabel || 'off').trim();
-        const thinkingActive = thinkingLabel.toLowerCase() !== 'off';
-        addToggle('Thinking', thinkingActive, this.toggleState.thinkingHotkey, thinkingLabel);
-        const buildLine = (includeHotkeys) => {
-            return toggles
-                .map(toggle => {
-                const stateText = toggle.on ? theme.success(toggle.value || 'on') : theme.ui.muted(toggle.value || 'off');
-                const hotkeyText = includeHotkeys && toggle.hotkey ? theme.ui.muted(` [${toggle.hotkey}]`) : '';
-                return `${theme.ui.muted(`${toggle.label}:`)} ${stateText}${hotkeyText}`;
-            })
-                .join(theme.ui.muted('  '));
-        };
-        const maxWidth = this.safeWidth();
-        let line = buildLine(true);
-        // Record which hotkeys are actually shown so the shortcut line can avoid duplicates
-        this.hotkeysInToggleLine = new Set(toggles
-            .map(toggle => (toggle.hotkey ? toggle.hotkey : null))
-            .filter((key) => Boolean(key)));
-        // If the line is too wide, drop hotkey hints to preserve all toggle labels
-        if (this.visibleLength(line) > maxWidth) {
-            this.hotkeysInToggleLine.clear();
-            line = buildLine(false);
-        }
-        return line.trim() ? line : null;
-    }
-    buildShortcutLine() {
-        const parts = [];
-        const addHotkey = (label, combo) => {
-            const normalized = this.formatHotkey(combo);
+        const separator = theme.ui.muted('  |  ');
+        let current = '';
+        for (const segment of segments) {
+            const normalized = segment.trim();
             if (!normalized)
-                return;
-            if (this.hotkeysInToggleLine.has(normalized)) {
-                return;
+                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);
             }
-            parts.push(`${theme.info(normalized)} ${theme.ui.muted(label)}`);
-        };
-        // Core controls
-        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')}`;
+        if (current) {
+            lines.push(this.truncateLine(current, maxWidth));
+        }
+        return lines;
     }
-    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;
+            totalChars += line.length + 1; // +1 for the newline separator
         }
-        if (current || rawLines.length === 0) {
-            rawLines.push(current);
+        // Handle cursor at very end
+        if (!foundCursor) {
+            cursorLine = Math.max(0, result.length - 1);
+            const lastLine = result[cursorLine] ?? '';
+            cursorCol = this.visibleLength(lastLine);
         }
-        if (cursorIndex === normalized.length) {
-            cursorRow = rawLines.length - 1;
-            cursorCol = rawLines[cursorRow]?.length ?? 0;
+        this.cursorVisibleRow = cursorLine;
+        this.cursorVisibleColumn = cursorCol + 1;
+        return result.join('\n');
+    }
+    buildInputWindow(available) {
+        if (available <= 0) {
+            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}`);
-        });
+        if (this.collapsedPaste) {
+            return { text: '', cursor: 0 };
+        }
+        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 +1538,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 +1617,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 +1626,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 +1635,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 +1644,31 @@ 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++;
+                this.renderPrompt();
+            }, 120);
+        }
+        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);
     }
@@ -1641,31 +1708,34 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.lastPromptEvent = { text: normalized, at: now };
         this.addEvent('prompt', normalized);
     }
-    clearPromptArea() {
-        const height = this.lastOverlay?.lines.length ?? this.promptHeight ?? 0;
-        if (height === 0)
+    clearPromptArea(insertNewline = false) {
+        if (!this.isPromptActive || this.promptHeight <= 0) {
+            if (insertNewline && !this.lastOutputEndedWithNewline) {
+                this.write('\n');
+                this.lastOutputEndedWithNewline = true;
+            }
             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));
-            this.write(ESC.CLEAR_LINE);
         }
-        // Move cursor to the bottom ready for new scrollback output
-        this.write(ESC.TO(totalRows, 1));
-        this.lastOverlayHeight = height;
-        this.lastPromptIndex = this.lastOverlay?.promptIndex ?? this.lastPromptIndex;
-        this.lastOverlay = null;
-        this.overlayInvalidated = true;
+        if (this.promptHeight > 1) {
+            readline.moveCursor(this.output, 0, -(this.promptHeight - 1));
+        }
+        for (let i = 0; i < this.promptHeight; i++) {
+            readline.cursorTo(this.output, 0);
+            readline.clearLine(this.output, 0);
+            if (i < this.promptHeight - 1) {
+                readline.moveCursor(this.output, 0, 1);
+            }
+        }
+        readline.cursorTo(this.output, 0);
+        if (insertNewline) {
+            this.write('\n');
+            this.lastOutputEndedWithNewline = true;
+        }
         this.promptHeight = 0;
+        this.isPromptActive = false;
     }
     updateTerminalSize() {
         if (this.output.isTTY) {
-            this.rows = this.output.rows || 24;
             this.cols = this.output.columns || 80;
         }
     }