erosolar-cli 2.1.173 → 2.1.174

package/dist/ui/UnifiedUIRenderer.js

@@ -10,15 +10,28 @@
  */
 import * as readline from 'node:readline';
 import { EventEmitter } from 'node:events';
+import { homedir } from 'node:os';
 import { theme, spinnerFrames } from './theme.js';
 import { isPlainOutputMode } from './outputMode.js';
+import { ContextMeter, disposeAnimations } 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',
+    // 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 = '↵';
@@ -28,7 +41,9 @@ export class UnifiedUIRenderer extends EventEmitter {
     rl;
     plainMode;
     interactive;
+    rows = 24;
     cols = 80;
+    lastRenderWidth = null;
     eventQueue = [];
     isProcessingQueue = false;
     buffer = '';
@@ -38,6 +53,7 @@ export class UnifiedUIRenderer extends EventEmitter {
     suggestions = [];
     suggestionIndex = -1;
     availableCommands = [];
+    hotkeysInToggleLine = new Set();
     collapsedPaste = null;
     mode = 'idle';
     streamingStartTime = null;
@@ -45,26 +61,52 @@ export class UnifiedUIRenderer extends EventEmitter {
     statusOverride = null;
     statusStreaming = null;
     // Animated UI components
+    streamingSpinner = null;
+    thinkingIndicator = null;
+    contextMeter;
     spinnerFrame = 0;
     spinnerInterval = null;
-    // Activity/status tracking
+    // 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,
         criticalApprovalMode: 'auto',
     };
     // ------------ Helpers ------------
+    formatHotkey(combo) {
+        if (!combo?.trim())
+            return null;
+        return combo.trim().toUpperCase();
+    }
     lastPromptEvent = null;
     promptHeight = 0;
+    lastOverlayHeight = 0;
+    inlinePanel = [];
+    hasConversationContent = false;
     isPromptActive = false;
     inputRenderOffset = 0;
     plainPasteIdleMs = 24;
     plainPasteWindowMs = 60;
     plainPasteTriggerChars = 24;
     cursorVisibleColumn = 1;
-    cursorVisibleRow = 0;
     inBracketedPaste = false;
     pasteBuffer = '';
     inPlainPaste = false;
@@ -75,6 +117,10 @@ export class UnifiedUIRenderer extends EventEmitter {
     plainRecentChunks = [];
     lastRenderedEventKey = null;
     lastOutputEndedWithNewline = true;
+    hasRenderedPrompt = false;
+    hasEverRenderedOverlay = false; // Track if we've ever rendered for inline clearing
+    lastOverlay = null;
+    allowPromptRender = true;
     inputCapture = null;
     constructor(output = process.stdout, input = process.stdin, options) {
         super();
@@ -82,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,
@@ -92,7 +140,7 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.rl.setPrompt('');
         this.updateTerminalSize();
         this.output.on('resize', () => {
-            if (this.interactive) {
+            if (!this.plainMode) {
                 this.updateTerminalSize();
                 this.renderPrompt();
             }
@@ -103,30 +151,59 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (!this.interactive) {
             return;
         }
-        this.write(ESC.ENABLE_BRACKETED_PASTE);
+        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;
+            this.write(ESC.SHOW_CURSOR);
+            return;
+        }
+        // Plain mode: minimal setup, still render a simple prompt line
         this.updateTerminalSize();
+        this.hasRenderedPrompt = false;
         this.lastOutputEndedWithNewline = true;
-        this.write(ESC.SHOW_CURSOR);
         this.renderPrompt();
     }
     cleanup() {
         this.cancelInputCapture(new Error('Renderer disposed'));
         this.cancelPlainPasteCapture();
+        // Stop any running animations
         if (this.spinnerInterval) {
             clearInterval(this.spinnerInterval);
             this.spinnerInterval = null;
         }
+        if (this.streamingSpinner) {
+            this.streamingSpinner.stop();
+            this.streamingSpinner = null;
+        }
+        if (this.thinkingIndicator) {
+            this.thinkingIndicator.stop();
+            this.thinkingIndicator = null;
+        }
+        this.contextMeter.dispose();
+        disposeAnimations();
         if (!this.interactive) {
             this.rl.close();
             return;
         }
-        this.write(ESC.DISABLE_BRACKETED_PASTE);
-        this.write(ESC.SHOW_CURSOR);
-        this.write('\n');
+        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);
+            this.write('\n');
+        }
         if (this.input.isTTY) {
             this.input.setRawMode(false);
         }
         this.rl.close();
+        this.lastOverlay = null;
     }
     // ------------ Input handling ------------
     setupInputHandlers() {
@@ -167,10 +244,6 @@ 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') {
             // Three-stage Ctrl+C behavior:
             // 1. Clear chat box if it has text
@@ -649,6 +722,16 @@ export class UnifiedUIRenderer extends EventEmitter {
         const normalized = this.normalizeEventType(type);
         if (!normalized)
             return;
+        if (normalized === 'prompt' ||
+            normalized === 'response' ||
+            normalized === 'thought' ||
+            normalized === 'stream' ||
+            normalized === 'tool' ||
+            normalized === 'tool-result' ||
+            normalized === 'build' ||
+            normalized === 'test') {
+            this.hasConversationContent = true;
+        }
         if (this.plainMode) {
             const formatted = this.formatContent({
                 type: normalized,
@@ -706,11 +789,23 @@ 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`);
                 }
-                if (event.type !== 'prompt') {
+                // 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 {
                     await this.delay(1);
                 }
             }
-            if (this.output.isTTY && this.interactive) {
+            // 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;
                 this.renderPrompt();
             }
         }
@@ -725,18 +820,28 @@ export class UnifiedUIRenderer extends EventEmitter {
      */
     async flushEvents(timeoutMs = 250) {
         // Kick off processing if idle
-        if (!this.isProcessingQueue && this.eventQueue.length > 0) {
+        if (!this.plainMode && !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.output.isTTY && this.interactive) {
+        if (!this.plainMode && this.output.isTTY) {
+            this.allowPromptRender = true;
             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;
@@ -749,9 +854,11 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (event.type !== 'prompt') {
             this.lastRenderedEventKey = signature;
         }
-        if (this.isPromptActive) {
-            this.clearPromptArea(true);
+        // Clear the prompt area before writing new content
+        if (this.promptHeight > 0 || this.lastOverlay) {
+            this.clearPromptArea();
         }
+        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');
@@ -759,9 +866,6 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
         this.output.write(formatted);
         this.lastOutputEndedWithNewline = formatted.endsWith('\n');
-        if (this.interactive && !this.plainMode) {
-            this.renderPrompt();
-        }
     }
     normalizeEventType(type) {
         switch (type) {
@@ -1159,6 +1263,22 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
         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)
      * Shows a visual separator with "history" label and ctrl+o hint
@@ -1209,7 +1329,8 @@ export class UnifiedUIRenderer extends EventEmitter {
             this.write('\n');
             this.lastOutputEndedWithNewline = true;
         }
-        if (this.interactive) {
+        if (!this.plainMode) {
+            // Always render prompt to keep bottom UI persistent (rich mode only)
             this.renderPrompt();
         }
     }
@@ -1220,12 +1341,15 @@ export class UnifiedUIRenderer extends EventEmitter {
         if (this.spinnerInterval)
             return; // Already running
         this.spinnerFrame = 0;
+        this.activityStarFrame = 0;
         this.spinnerInterval = setInterval(() => {
             this.spinnerFrame = (this.spinnerFrame + 1) % spinnerFrames.braille.length;
-            if (this.mode === 'streaming') {
+            this.activityStarFrame = (this.activityStarFrame + 1) % this.activityStarFrames.length;
+            // Re-render to show updated spinner/star frame
+            if (!this.plainMode && this.mode === 'streaming') {
                 this.renderPrompt();
             }
-        }, 120);
+        }, 80); // ~12 FPS for smooth spinner animation
     }
     /**
      * Stop the animated spinner
@@ -1236,6 +1360,7 @@ export class UnifiedUIRenderer extends EventEmitter {
             this.spinnerInterval = null;
         }
         this.spinnerFrame = 0;
+        this.activityStarFrame = 0;
         this.activityMessage = null;
     }
     /**
@@ -1244,7 +1369,7 @@ export class UnifiedUIRenderer extends EventEmitter {
      */
     setActivity(message) {
         this.activityMessage = message;
-        if (this.interactive) {
+        if (!this.plainMode) {
             this.renderPrompt();
         }
     }
@@ -1254,6 +1379,16 @@ export class UnifiedUIRenderer extends EventEmitter {
     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;
     }
@@ -1302,19 +1437,28 @@ export class UnifiedUIRenderer extends EventEmitter {
     }
     updateModeToggles(state) {
         this.toggleState = { ...this.toggleState, ...state };
+        if (!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 (!normalized.length) {
+        if (JSON.stringify(normalized) === JSON.stringify(this.inlinePanel)) {
             return;
         }
-        this.addEvent('response', `${normalized.join('\n')}\n`);
+        this.inlinePanel = normalized;
+        this.renderPrompt();
     }
     clearInlinePanel() {
-        // No-op: inline panels render directly into scrollback
+        if (!this.inlinePanel.length)
+            return;
+        this.inlinePanel = [];
+        this.renderPrompt();
     }
     // ------------ Prompt rendering ------------
     renderPrompt() {
@@ -1322,42 +1466,284 @@ 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.cursorVisibleColumn = line.length + 1;
+            this.hasRenderedPrompt = true;
+            this.isPromptActive = true;
+            this.lastOutputEndedWithNewline = false; // prompt ends mid-line by design
+            this.promptHeight = 1;
+            return;
+        }
+        if (!this.allowPromptRender) {
+            return;
+        }
+        // Rich inline mode: prompt flows naturally with content
         this.updateTerminalSize();
-        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));
+        const maxWidth = this.safeWidth();
+        this.lastRenderWidth = maxWidth;
+        const overlay = this.buildOverlayLines();
+        if (!overlay.lines.length) {
+            return;
         }
-        lines.push(...inputLines);
-        const hadPrompt = this.isPromptActive;
-        this.clearPromptArea();
-        if (!hadPrompt && !this.lastOutputEndedWithNewline) {
-            this.write('\n');
-            this.lastOutputEndedWithNewline = true;
+        const renderedLines = overlay.lines.map(line => this.truncateLine(line, maxWidth));
+        if (!renderedLines.length) {
+            return;
         }
-        for (let i = 0; i < lines.length; i++) {
+        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`);
+            }
+        }
+        // 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);
-            this.write(lines[i] || '');
-            if (i < lines.length - 1) {
+            this.write(renderedLines[i] || '');
+            if (i < renderedLines.length - 1) {
                 this.write('\n');
             }
         }
-        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`);
+        // 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;
         this.isPromptActive = true;
-        this.promptHeight = lines.length;
+        this.lastOverlayHeight = height;
+        this.lastOverlay = { lines: renderedLines, promptIndex };
         this.lastOutputEndedWithNewline = false;
+        this.promptHeight = height;
+    }
+    buildOverlayLines() {
+        const lines = [];
+        const maxWidth = this.safeWidth();
+        // Simple horizontal divider - clean and reliable
+        const divider = theme.ui.muted('─'.repeat(Math.min(maxWidth, 56)));
+        // Activity line (only when streaming) - shows: ✽ Moseying… (esc to interrupt · 34s)
+        if (this.mode === 'streaming' && this.activityMessage) {
+            // Animated sparkle
+            const spinnerChars = ['✽', '✾', '✿', '❀', '❁', '❂', '❃', '✻'];
+            const spinnerChar = spinnerChars[this.spinnerFrame % spinnerChars.length] ?? '✽';
+            const elapsed = this.formatStreamingElapsed();
+            // Use fun phrases for generic activity, otherwise show specific activity
+            const genericActivities = ['Streaming', 'Thinking', 'Processing'];
+            const displayActivity = genericActivities.includes(this.activityMessage)
+                ? this.funActivityPhrases[this.activityPhraseIndex % this.funActivityPhrases.length]
+                : this.activityMessage;
+            // Format: ✽ Moseying… (esc to interrupt · 1m 19s · ↑1.2k tokens)
+            const parts = ['esc to interrupt'];
+            if (elapsed)
+                parts.push(elapsed);
+            if (this.streamingTokens > 0) {
+                parts.push(`↑${this.formatTokenCount(this.streamingTokens)} tokens`);
+            }
+            const activityLine = `${theme.info(spinnerChar)} ${displayActivity}… ${theme.ui.muted(`(${parts.join(' · ')})`)}`;
+            lines.push(this.truncateLine(activityLine, maxWidth));
+        }
+        // Top divider
+        lines.push(divider);
+        // Input prompt line
+        const promptIndex = lines.length;
+        const inputLine = this.buildInputLine();
+        // Handle multi-line input by splitting on newlines
+        const inputLines = inputLine.split('\n');
+        for (const line of inputLines) {
+            lines.push(this.truncateLine(line, maxWidth));
+        }
+        // Bottom divider
+        lines.push(divider);
+        // Inline panel (pinned scroll box for live output/menus)
+        if (this.inlinePanel.length > 0) {
+            for (const panelLine of this.inlinePanel) {
+                lines.push(this.truncateLine(`  ${panelLine}`, maxWidth));
+            }
+            // Separate inline content from suggestions/toggles
+            lines.push(divider);
+        }
+        // Slash command suggestions
+        if (this.suggestions.length > 0) {
+            for (let index = 0; index < this.suggestions.length; index++) {
+                const suggestion = this.suggestions[index];
+                const isActive = index === this.suggestionIndex;
+                const marker = isActive ? theme.primary('▸') : theme.ui.muted(' ');
+                const 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));
+            }
+        }
+        // Model and context info
+        const modelContextLine = this.buildModelContextLine();
+        if (modelContextLine) {
+            lines.push(this.truncateLine(`  ${modelContextLine}`, maxWidth));
+        }
+        // Mode toggles
+        const toggleLine = this.buildInlineToggleLine();
+        if (toggleLine) {
+            lines.push(this.truncateLine(`  ${toggleLine}`, maxWidth));
+        }
+        // Help hint
+        lines.push(this.truncateLine(`  ${theme.ui.muted('? for shortcuts')}`, maxWidth));
+        return { lines, promptIndex };
+    }
+    /**
+     * Build model name and context usage line with mini progress bar
+     * Format: gpt-4 · ████░░ 85% context
+     */
+    buildModelContextLine() {
+        const parts = [];
+        // Model name (provider / model or just model)
+        const model = this.statusMeta.provider && this.statusMeta.model
+            ? `${this.statusMeta.provider} · ${this.statusMeta.model}`
+            : this.statusMeta.model || this.statusMeta.provider;
+        if (model) {
+            parts.push(theme.info(model));
+        }
+        // Context meter with mini progress bar
+        if (this.statusMeta.contextPercent !== undefined) {
+            const remaining = Math.max(0, 100 - this.statusMeta.contextPercent);
+            const barWidth = 6;
+            const filled = Math.round((remaining / 100) * barWidth);
+            const empty = barWidth - filled;
+            const barColor = remaining > 50 ? theme.success : remaining > 20 ? theme.warning : theme.error;
+            const bar = barColor('█'.repeat(filled)) + theme.ui.muted('░'.repeat(empty));
+            parts.push(`${bar} ${barColor(`${remaining}%`)} ${theme.ui.muted('ctx')}`);
+        }
+        return parts.length > 0 ? parts.join(theme.ui.muted('  ·  ')) : null;
+    }
+    /**
+     * Build inline toggle controls - Claude Code style
+     * Format: ⏵⏵ accept edits on (shift+tab to cycle)
+     */
+    buildInlineToggleLine() {
+        const parts = [];
+        // Edit acceptance mode - Claude Code style with ⏵⏵
+        const editIcon = '⏵⏵';
+        const editState = this.toggleState.verificationEnabled ? 'verify edits' : 'accept edits';
+        const editStatus = this.toggleState.verificationEnabled ? theme.warning('on') : theme.success('on');
+        parts.push(`${theme.ui.muted(editIcon)} ${editState} ${editStatus}`);
+        // Thinking mode (if not default)
+        const thinkingLabel = (this.toggleState.thinkingModeLabel || 'balanced').trim().toLowerCase();
+        if (thinkingLabel === 'extended') {
+            parts.push(`${theme.ui.muted('thinking')} ${theme.info('extended')}`);
+        }
+        // Approval mode (if not auto)
+        const approvalMode = this.toggleState.criticalApprovalMode || 'auto';
+        if (approvalMode === 'approval') {
+            parts.push(`${theme.ui.muted('approvals')} ${theme.warning('ask')}`);
+        }
+        // Cycle hint
+        const cycleHint = theme.ui.muted('(shift+tab to cycle)');
+        return parts.length > 0 ? `${parts.join(theme.ui.muted(' · '))} ${cycleHint}` : null;
+    }
+    buildChromeLines() {
+        const maxWidth = this.safeWidth();
+        const statusLines = this.buildStatusBlock(maxWidth);
+        const metaLines = this.buildMetaBlock(maxWidth);
+        return [...statusLines, ...metaLines];
+    }
+    abbreviatePath(pathValue) {
+        const home = homedir();
+        if (home && pathValue.startsWith(home)) {
+            return pathValue.replace(home, '~');
+        }
+        return pathValue;
+    }
+    buildStatusBlock(maxWidth) {
+        const statusLabel = this.composeStatusLabel();
+        if (!statusLabel) {
+            return [];
+        }
+        const segments = [];
+        // Add animated spinner when streaming for dynamic visual feedback
+        if (this.mode === 'streaming') {
+            const spinnerChars = spinnerFrames.braille;
+            const spinnerChar = spinnerChars[this.spinnerFrame % spinnerChars.length] ?? '⠋';
+            segments.push(`${theme.info(spinnerChar)} ${this.applyTone(statusLabel.text, statusLabel.tone)}`);
+        }
+        else {
+            segments.push(`${theme.ui.muted('status')} ${this.applyTone(statusLabel.text, statusLabel.tone)}`);
+        }
+        if (this.statusMeta.sessionTime) {
+            segments.push(`${theme.ui.muted('runtime')} ${theme.ui.muted(this.statusMeta.sessionTime)}`);
+        }
+        if (this.statusMeta.contextPercent !== undefined) {
+            // Use animated context meter for smooth color transitions
+            this.contextMeter.update(this.statusMeta.contextPercent);
+            segments.push(this.contextMeter.render());
+        }
+        return this.wrapSegments(segments, maxWidth);
+    }
+    buildMetaBlock(maxWidth) {
+        const segments = [];
+        if (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(this.formatMetaSegment('model', model, 'info'));
+        }
+        const workspace = this.statusMeta.workspace || this.statusMeta.directory;
+        if (workspace) {
+            segments.push(this.formatMetaSegment('dir', this.abbreviatePath(workspace), 'muted'));
+        }
+        if (this.statusMeta.writes) {
+            segments.push(this.formatMetaSegment('writes', this.statusMeta.writes, 'muted'));
+        }
+        if (this.statusMeta.toolSummary) {
+            segments.push(this.formatMetaSegment('tools', this.statusMeta.toolSummary, 'muted'));
+        }
+        if (this.statusMeta.sessionLabel) {
+            segments.push(this.formatMetaSegment('session', this.statusMeta.sessionLabel, 'muted'));
+        }
+        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.activityMessage, this.statusStreaming, this.statusOverride, this.statusMessage].filter((value, index, arr) => Boolean(value) && arr.indexOf(value) === index);
+        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;
@@ -1417,6 +1803,97 @@ export class UnifiedUIRenderer extends EventEmitter {
         }
         return lines;
     }
+    buildControlLines() {
+        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;
+    }
+    /**
+     * 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('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);
+            if (!normalized)
+                return;
+            if (this.hotkeysInToggleLine.has(normalized)) {
+                return;
+            }
+            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('verify', this.toggleState.verificationHotkey);
+        addHotkey('thinking', this.toggleState.thinkingHotkey);
+        if (parts.length === 0) {
+            return null;
+        }
+        return parts.join(theme.ui.muted('   '));
+    }
     buildInputLine() {
         if (this.collapsedPaste) {
             const summary = `[pasted ${this.collapsedPaste.lines} lines, ${this.collapsedPaste.chars} chars] (Ctrl+L insert, Backspace discard)`;
@@ -1484,7 +1961,21 @@ export class UnifiedUIRenderer extends EventEmitter {
             const lastLine = result[cursorLine] ?? '';
             cursorCol = this.visibleLength(lastLine);
         }
-        this.cursorVisibleRow = cursorLine;
+        // 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');
     }
@@ -1653,8 +2144,12 @@ export class UnifiedUIRenderer extends EventEmitter {
         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();
-            }, 120);
+            }, 80);
         }
         this.renderPrompt();
     }
@@ -1708,34 +2203,38 @@ export class UnifiedUIRenderer extends EventEmitter {
         this.lastPromptEvent = { text: normalized, at: now };
         this.addEvent('prompt', normalized);
     }
-    clearPromptArea(insertNewline = false) {
-        if (!this.isPromptActive || this.promptHeight <= 0) {
-            if (insertNewline && !this.lastOutputEndedWithNewline) {
-                this.write('\n');
-                this.lastOutputEndedWithNewline = true;
-            }
+    clearPromptArea() {
+        const height = this.lastOverlay?.lines.length ?? this.promptHeight ?? 0;
+        if (height === 0)
             return;
+        // Cursor is at prompt row. Move up to top of overlay first.
+        if (this.lastOverlay) {
+            const linesToTop = this.lastOverlay.promptIndex;
+            if (linesToTop > 0) {
+                this.write(`\x1b[${linesToTop}A`);
+            }
         }
-        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);
+        // 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');
             }
         }
-        readline.cursorTo(this.output, 0);
-        if (insertNewline) {
-            this.write('\n');
-            this.lastOutputEndedWithNewline = true;
+        // 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.promptHeight = 0;
+        this.lastOverlayHeight = 0;
         this.isPromptActive = false;
     }
     updateTerminalSize() {
         if (this.output.isTTY) {
+            this.rows = this.output.rows || 24;
             this.cols = this.output.columns || 80;
         }
     }