erosolar-cli 1.7.273 → 1.7.274

package/dist/shell/terminalInput.js

@@ -3,16 +3,18 @@
  *
  * Design principles:
  * - Single source of truth for input state
+ * - One bottom-pinned chat box for the entire session (no inline anchors)
  * - Native bracketed paste support (no heuristics)
  * - Clean cursor model with render-time wrapping
  * - State machine for different input modes
  * - No readline dependency for display
  */
 import { EventEmitter } from 'node:events';
-import { isMultilinePaste, generatePasteSummary } from '../core/multilinePasteHandler.js';
+import { isMultilinePaste } from '../core/multilinePasteHandler.js';
 import { writeLock } from '../ui/writeLock.js';
-import { renderDivider } from '../ui/unified/layout.js';
-import { UI_COLORS, DEFAULT_UI_CONFIG, } from '../ui/terminalUISchema.js';
+import { renderDivider, renderStatusLine } from '../ui/unified/layout.js';
+import { isStreamingMode } from '../ui/globalWriteLock.js';
+import { formatThinking } from '../ui/toolDisplay.js';
 // ANSI escape codes
 const ESC = {
     // Cursor control
@@ -67,6 +69,11 @@ export class TerminalInput extends EventEmitter {
     statusMessage = null;
     overrideStatusMessage = null; // Secondary status (warnings, etc.)
     streamingLabel = null; // Streaming progress indicator
+    metaElapsedSeconds = null; // Optional elapsed time for header line
+    metaTokensUsed = null; // Optional token usage
+    metaTokenLimit = null; // Optional token window
+    metaThinkingMs = null; // Optional thinking duration
+    metaThinkingHasContent = false; // Whether collapsed thinking content exists
     reservedLines = 2;
     scrollRegionActive = false;
     lastRenderContent = '';
@@ -74,47 +81,35 @@ export class TerminalInput extends EventEmitter {
     renderDirty = false;
     isRendering = false;
     pinnedTopRows = 0;
-    inlineAnchorRow = null;
-    inlineLayout = false;
-    anchorProvider = null;
-    // Flow mode: when true, renders inline after content (no absolute positioning)
-    flowMode = true;
-    flowModeRenderedLines = 0; // Track lines rendered for clearing
-    contentEndRow = 0; // Row where content ends (for idle mode positioning)
-    // Command suggestions (Claude Code style auto-complete)
-    commandSuggestions = [];
-    filteredSuggestions = [];
-    selectedSuggestionIndex = 0;
-    showSuggestions = false;
-    maxVisibleSuggestions = 10;
     // Lifecycle
     disposed = false;
     enabled = true;
     contextUsage = null;
+    contextAutoCompactThreshold = 90;
+    thinkingModeLabel = null;
     editMode = 'display-edits';
     verificationEnabled = true;
     autoContinueEnabled = false;
     verificationHotkey = 'alt+v';
     autoContinueHotkey = 'alt+c';
+    thinkingHotkey = '/thinking';
+    modelLabel = null;
+    providerLabel = null;
     // Output interceptor cleanup
     outputInterceptorCleanup;
-    // Metrics tracking for status bar
-    streamingStartTime = null;
-    tokensUsed = 0;
-    thinkingEnabled = true;
-    modelInfo = null; // Provider · Model info
-    // Streaming input area render timer (updates elapsed time display)
+    // Streaming render throttle
+    lastStreamingRender = 0;
+    streamingRenderInterval = 250; // ms between renders during streaming
     streamingRenderTimer = null;
     constructor(writeStream = process.stdout, config = {}) {
         super();
         this.out = writeStream;
-        // Use schema defaults for configuration consistency
         this.config = {
-            maxLines: config.maxLines ?? DEFAULT_UI_CONFIG.inputArea.maxLines,
-            maxLength: config.maxLength ?? DEFAULT_UI_CONFIG.inputArea.maxLength,
+            maxLines: config.maxLines ?? 1000,
+            maxLength: config.maxLength ?? 10000,
             maxQueueSize: config.maxQueueSize ?? 100,
-            promptChar: config.promptChar ?? DEFAULT_UI_CONFIG.inputArea.promptChar,
-            continuationChar: config.continuationChar ?? DEFAULT_UI_CONFIG.inputArea.continuationChar,
+            promptChar: config.promptChar ?? '> ',
+            continuationChar: config.continuationChar ?? '│ ',
         };
     }
     // ===========================================================================
@@ -193,11 +188,6 @@ export class TerminalInput extends EventEmitter {
             if (handled)
                 return;
         }
-        // Handle '?' for help hint (if buffer is empty)
-        if (str === '?' && this.buffer.length === 0) {
-            this.emit('showHelp');
-            return;
-        }
         // Insert printable characters
         if (str && !key?.ctrl && !key?.meta) {
             this.insertText(str);
@@ -206,498 +196,38 @@ export class TerminalInput extends EventEmitter {
     /**
      * Set the input mode
      *
-     * Streaming mode disables scroll region and lets content flow naturally.
-     * The input area will be re-rendered after streaming ends at wherever
-     * the cursor is (below the streamed content).
+     * Streaming keeps the scroll region active so the prompt/status stay pinned
+     * below the streaming output. When streaming ends, we refresh the input area.
      */
     setMode(mode) {
         const prevMode = this.mode;
         this.mode = mode;
         if (mode === 'streaming' && prevMode !== 'streaming') {
-            // Track streaming start time for elapsed display
-            this.streamingStartTime = Date.now();
-            const { rows } = this.getSize();
-            // Set up scroll region to reserve bottom for persistent input area
-            this.pinnedTopRows = 0;
-            this.reservedLines = 6; // status + model + divider + input + divider + controls
-            // CRITICAL: Position cursor in content area BEFORE enabling scroll region
-            // Content area is rows 1 to (rows - reservedLines)
-            // Move cursor to just after the banner (where content should appear)
-            const contentBottomRow = Math.max(1, rows - this.reservedLines);
-            this.write(ESC.TO(contentBottomRow, 1));
-            // Enable scroll region: content scrolls above, bottom is reserved
+            // Keep scroll region active so status/prompt stay pinned while streaming
+            this.resetStreamingRenderThrottle();
             this.enableScrollRegion();
-            // Initial render of bottom input area (will save cursor at content area position)
-            this.renderBottomInputArea();
-            // Start timer to update bottom input area (updates elapsed time)
-            this.streamingRenderTimer = setInterval(() => {
-                if (this.mode === 'streaming') {
-                    this.updateStreamingStatus();
-                    this.renderBottomInputArea();
-                }
-            }, 1000);
             this.renderDirty = true;
+            this.render();
         }
         else if (mode !== 'streaming' && prevMode === 'streaming') {
-            // Stop streaming render timer
-            if (this.streamingRenderTimer) {
-                clearInterval(this.streamingRenderTimer);
-                this.streamingRenderTimer = null;
-            }
-            // Reset streaming time
-            this.streamingStartTime = null;
-            // Keep scroll region active for consistent bottom-pinned UI
-            // (scroll region reserves bottom for input area in all modes)
-            // Reset flow mode tracking
-            this.flowModeRenderedLines = 0;
-            // Render using unified bottom input area (same layout as streaming)
-            writeLock.withLock(() => {
-                this.renderBottomInputArea();
-            }, 'terminalInput.streamingEnd');
-        }
-    }
-    /**
-     * Update streaming status label (called by timer)
-     */
-    updateStreamingStatus() {
-        if (this.mode !== 'streaming' || !this.streamingStartTime)
-            return;
-        // Calculate elapsed time
-        const elapsed = Date.now() - this.streamingStartTime;
-        const seconds = Math.floor(elapsed / 1000);
-        const minutes = Math.floor(seconds / 60);
-        const secs = seconds % 60;
-        // Format elapsed time
-        let elapsedStr;
-        if (minutes > 0) {
-            elapsedStr = `${minutes}m ${secs}s`;
-        }
-        else {
-            elapsedStr = `${secs}s`;
-        }
-        // Update streaming label
-        this.streamingLabel = `Streaming ${elapsedStr}`;
-    }
-    /**
-     * Render input area - unified for streaming and normal modes.
-     *
-     * In streaming mode: renders at absolute bottom, uses cursor save/restore
-     * In normal mode: renders right after the banner (pinnedTopRows + 1)
-     */
-    renderPinnedInputArea() {
-        const { rows, cols } = this.getSize();
-        const maxWidth = Math.max(8, cols - 4);
-        const divider = renderDivider(cols - 2);
-        const isStreaming = this.mode === 'streaming';
-        // Wrap buffer into display lines (multi-line support)
-        const { lines, cursorLine, cursorCol } = this.wrapBuffer(maxWidth);
-        const availableForContent = Math.max(1, rows - 5); // Reserve 5 lines for UI
-        const maxVisible = Math.max(1, Math.min(this.config.maxLines, availableForContent));
-        const displayLines = Math.min(lines.length, maxVisible);
-        // Calculate display window (keep cursor visible)
-        let startLine = 0;
-        if (lines.length > displayLines) {
-            startLine = Math.max(0, cursorLine - displayLines + 1);
-            startLine = Math.min(startLine, lines.length - displayLines);
-        }
-        const visibleLines = lines.slice(startLine, startLine + displayLines);
-        const adjustedCursorLine = cursorLine - startLine;
-        // Calculate total height: status + (model info if set) + topDiv + input lines + bottomDiv + controls
-        const hasModelInfo = !!this.modelInfo;
-        const totalHeight = 4 + visibleLines.length + (hasModelInfo ? 1 : 0);
-        // Save cursor position during streaming (so content flow resumes correctly)
-        if (isStreaming) {
-            this.write(ESC.SAVE);
-        }
-        this.write(ESC.HIDE);
-        this.write(ESC.RESET);
-        // Calculate start row based on mode:
-        // - Streaming: absolute bottom (rows - totalHeight + 1)
-        // - Normal: right after content (contentEndRow + 1)
-        let currentRow;
-        if (isStreaming) {
-            currentRow = Math.max(1, rows - totalHeight + 1);
-        }
-        else {
-            // In normal mode, render right after content
-            // Use contentEndRow if set, otherwise use pinnedTopRows
-            const contentRow = this.contentEndRow > 0 ? this.contentEndRow : this.pinnedTopRows;
-            currentRow = Math.max(1, contentRow + 1);
-        }
-        let finalRow = currentRow;
-        let finalCol = 3;
-        // Clear from current position to end of screen to remove any "ghost" content
-        this.write(ESC.TO(currentRow, 1));
-        this.write(ESC.CLEAR_TO_END);
-        // Status bar
-        this.write(ESC.TO(currentRow, 1));
-        this.write(isStreaming ? this.buildStreamingStatusBar(cols) : this.buildStatusBar(cols));
-        currentRow++;
-        // Model info line (if set) - displayed below status, above input
-        if (hasModelInfo) {
-            const { dim: DIM, reset: R } = UI_COLORS;
-            this.write(ESC.TO(currentRow, 1));
-            // Build model info with context usage
-            let modelLine = `${DIM}${this.modelInfo}${R}`;
-            if (this.contextUsage !== null) {
-                const rem = Math.max(0, 100 - this.contextUsage);
-                if (rem < 10)
-                    modelLine += ` ${UI_COLORS.red}⚠ ctx: ${rem}%${R}`;
-                else if (rem < 25)
-                    modelLine += ` ${UI_COLORS.yellow}! ctx: ${rem}%${R}`;
-                else
-                    modelLine += ` ${DIM}· ctx: ${rem}%${R}`;
-            }
-            this.write(modelLine);
-            currentRow++;
-        }
-        // Top divider
-        this.write(ESC.TO(currentRow, 1));
-        this.write(divider);
-        currentRow++;
-        // Input lines with background styling
-        for (let i = 0; i < visibleLines.length; i++) {
-            this.write(ESC.TO(currentRow, 1));
-            const line = visibleLines[i] ?? '';
-            const absoluteLineIdx = startLine + i;
-            const isFirstLine = absoluteLineIdx === 0;
-            const isCursorLine = i === adjustedCursorLine;
-            // Background
-            this.write(ESC.BG_DARK);
-            // Prompt prefix
-            this.write(ESC.DIM);
-            this.write(isFirstLine ? this.config.promptChar : this.config.continuationChar);
-            this.write(ESC.RESET);
-            this.write(ESC.BG_DARK);
-            if (isCursorLine) {
-                const col = Math.min(cursorCol, line.length);
-                const before = line.slice(0, col);
-                const at = col < line.length ? line[col] : ' ';
-                const after = col < line.length ? line.slice(col + 1) : '';
-                this.write(before);
-                this.write(ESC.REVERSE + ESC.BOLD);
-                this.write(at);
-                this.write(ESC.RESET + ESC.BG_DARK);
-                this.write(after);
-                finalRow = currentRow;
-                finalCol = this.config.promptChar.length + col + 1;
-            }
-            else {
-                this.write(line);
-            }
-            // Pad to edge
-            const lineLen = this.config.promptChar.length + line.length + (isCursorLine && cursorCol >= line.length ? 1 : 0);
-            const padding = Math.max(0, cols - lineLen - 1);
-            if (padding > 0)
-                this.write(' '.repeat(padding));
-            this.write(ESC.RESET);
-            currentRow++;
-        }
-        // Bottom divider
-        this.write(ESC.TO(currentRow, 1));
-        this.write(divider);
-        currentRow++;
-        // Mode controls line
-        this.write(ESC.TO(currentRow, 1));
-        this.write(this.buildModeControls(cols));
-        // Restore cursor position during streaming, or show cursor in normal mode
-        if (isStreaming) {
-            this.write(ESC.RESTORE);
-        }
-        else {
-            // Position cursor in input area
-            this.write(ESC.TO(finalRow, Math.min(finalCol, cols)));
-            this.write(ESC.SHOW);
-        }
-        // Update reserved lines for scroll region calculations
-        this.updateReservedLines(totalHeight);
-    }
-    /**
-     * Render input area during streaming (alias for unified method)
-     */
-    renderStreamingInputArea() {
-        this.renderPinnedInputArea();
-    }
-    /**
-     * Render bottom input area - UNIFIED for all modes.
-     * Uses cursor save/restore to update bottom without affecting content flow.
-     *
-     * Layout (same for idle/streaming/ready):
-     * - Status bar (streaming timer or "Type a message")
-     * - Model info line (provider · model · ctx)
-     * - Divider
-     * - Input area
-     * - Divider
-     * - Mode controls
-     */
-    renderBottomInputArea() {
-        const { rows, cols } = this.getSize();
-        const maxWidth = Math.max(8, cols - 4);
-        const divider = renderDivider(cols - 2);
-        const { dim: DIM, reset: R } = UI_COLORS;
-        const isStreaming = this.mode === 'streaming';
-        // Wrap buffer into display lines
-        const { lines, cursorLine, cursorCol } = this.wrapBuffer(maxWidth);
-        // Allow multi-line in non-streaming, single line during streaming
-        const maxDisplayLines = isStreaming ? 1 : 3;
-        const displayLines = Math.min(lines.length, maxDisplayLines);
-        const visibleLines = lines.slice(0, displayLines);
-        // Calculate total height for bottom area
-        const hasModelInfo = !!this.modelInfo;
-        const totalHeight = 4 + displayLines + (hasModelInfo ? 1 : 0);
-        // Ensure scroll region is always enabled (unified behavior)
-        if (!this.scrollRegionActive || this.reservedLines !== totalHeight) {
-            this.reservedLines = totalHeight;
+            // Streaming ended - render the input area
+            this.resetStreamingRenderThrottle();
             this.enableScrollRegion();
-        }
-        const startRow = Math.max(1, rows - totalHeight + 1);
-        // Save cursor, hide it
-        this.write(ESC.SAVE);
-        this.write(ESC.HIDE);
-        let currentRow = startRow;
-        // Clear the bottom reserved area
-        for (let r = startRow; r <= rows; r++) {
-            this.write(ESC.TO(r, 1));
-            this.write(ESC.CLEAR_LINE);
-        }
-        // Status bar - UNIFIED: same format for all modes
-        this.write(ESC.TO(currentRow, 1));
-        this.write(isStreaming ? this.buildStreamingStatusBar(cols) : this.buildStatusBar(cols));
-        currentRow++;
-        // Model info line (if set)
-        if (hasModelInfo) {
-            this.write(ESC.TO(currentRow, 1));
-            let modelLine = `${DIM}${this.modelInfo}${R}`;
-            if (this.contextUsage !== null) {
-                const rem = Math.max(0, 100 - this.contextUsage);
-                if (rem < 10)
-                    modelLine += ` ${UI_COLORS.red}⚠ ctx: ${rem}%${R}`;
-                else if (rem < 25)
-                    modelLine += ` ${UI_COLORS.yellow}! ctx: ${rem}%${R}`;
-                else
-                    modelLine += ` ${DIM}· ctx: ${rem}%${R}`;
-            }
-            this.write(modelLine);
-            currentRow++;
-        }
-        // Top divider
-        this.write(ESC.TO(currentRow, 1));
-        this.write(divider);
-        currentRow++;
-        // Input lines with background styling
-        for (let i = 0; i < visibleLines.length; i++) {
-            this.write(ESC.TO(currentRow, 1));
-            const line = visibleLines[i] ?? '';
-            const isFirstLine = i === 0;
-            this.write(ESC.BG_DARK);
-            this.write(ESC.DIM);
-            this.write(isFirstLine ? this.config.promptChar : this.config.continuationChar);
-            this.write(ESC.RESET);
-            this.write(ESC.BG_DARK);
-            this.write(line);
-            // Pad to edge
-            const lineLen = this.config.promptChar.length + line.length;
-            const padding = Math.max(0, cols - lineLen - 1);
-            if (padding > 0)
-                this.write(' '.repeat(padding));
-            this.write(ESC.RESET);
-            currentRow++;
-        }
-        // Bottom divider
-        this.write(ESC.TO(currentRow, 1));
-        this.write(divider);
-        currentRow++;
-        // Mode controls
-        this.write(ESC.TO(currentRow, 1));
-        this.write(this.buildModeControls(cols));
-        // Cursor positioning depends on mode:
-        // - Streaming: restore to content area (where streaming output continues)
-        // - Normal: position in input area for typing
-        if (isStreaming) {
-            this.write(ESC.RESTORE);
-        }
-        else {
-            // Position cursor in input area
-            // Input line is at: startRow + (hasModelInfo ? 2 : 1) + cursorLine
-            const inputStartRow = startRow + (hasModelInfo ? 2 : 1) + 1; // +1 for status bar, +1 for divider
-            const targetRow = inputStartRow + Math.min(cursorLine, displayLines - 1);
-            const targetCol = this.config.promptChar.length + cursorCol + 1;
-            this.write(ESC.TO(targetRow, Math.min(targetCol, cols)));
-        }
-        this.write(ESC.SHOW);
-        // Track last render state
-        this.lastRenderContent = this.buffer;
-        this.lastRenderCursor = this.cursor;
-    }
-    /**
-     * Enable or disable flow mode.
-     * In flow mode, the input renders immediately after content (wherever cursor is).
-     * When disabled, input renders at the absolute bottom of terminal.
-     */
-    setFlowMode(enabled) {
-        if (this.flowMode === enabled)
-            return;
-        this.flowMode = enabled;
-        this.renderDirty = true;
-        this.scheduleRender();
-    }
-    /**
-     * Check if flow mode is enabled.
-     */
-    isFlowMode() {
-        return this.flowMode;
-    }
-    /**
-     * Set the row where content ends (for idle mode positioning).
-     * Input area will render starting from this row + 1.
-     */
-    setContentEndRow(row) {
-        this.contentEndRow = Math.max(0, row);
-        this.renderDirty = true;
-        this.scheduleRender();
-    }
-    /**
-     * Set available slash commands for auto-complete suggestions.
-     */
-    setCommands(commands) {
-        this.commandSuggestions = commands;
-        this.updateSuggestions();
-    }
-    /**
-     * Update filtered suggestions based on current input.
-     */
-    updateSuggestions() {
-        const input = this.buffer.trim();
-        // Only show suggestions when input starts with "/"
-        if (!input.startsWith('/')) {
-            this.showSuggestions = false;
-            this.filteredSuggestions = [];
-            this.selectedSuggestionIndex = 0;
-            return;
-        }
-        const query = input.toLowerCase();
-        this.filteredSuggestions = this.commandSuggestions.filter(cmd => cmd.command.toLowerCase().startsWith(query) ||
-            cmd.command.toLowerCase().includes(query.slice(1)));
-        // Show suggestions if we have matches
-        this.showSuggestions = this.filteredSuggestions.length > 0;
-        // Keep selection in bounds
-        if (this.selectedSuggestionIndex >= this.filteredSuggestions.length) {
-            this.selectedSuggestionIndex = Math.max(0, this.filteredSuggestions.length - 1);
+            this.forceRender();
         }
     }
-    /**
-     * Select next suggestion (arrow down / tab).
-     */
-    selectNextSuggestion() {
-        if (!this.showSuggestions || this.filteredSuggestions.length === 0)
-            return;
-        this.selectedSuggestionIndex = (this.selectedSuggestionIndex + 1) % this.filteredSuggestions.length;
-        this.renderDirty = true;
-        this.scheduleRender();
-    }
-    /**
-     * Select previous suggestion (arrow up / shift+tab).
-     */
-    selectPrevSuggestion() {
-        if (!this.showSuggestions || this.filteredSuggestions.length === 0)
-            return;
-        this.selectedSuggestionIndex = this.selectedSuggestionIndex === 0
-            ? this.filteredSuggestions.length - 1
-            : this.selectedSuggestionIndex - 1;
-        this.renderDirty = true;
-        this.scheduleRender();
-    }
-    /**
-     * Accept current suggestion and insert into buffer.
-     */
-    acceptSuggestion() {
-        if (!this.showSuggestions || this.filteredSuggestions.length === 0)
-            return false;
-        const selected = this.filteredSuggestions[this.selectedSuggestionIndex];
-        if (!selected)
-            return false;
-        // Replace buffer with selected command
-        this.buffer = selected.command + ' ';
-        this.cursor = this.buffer.length;
-        this.showSuggestions = false;
-        this.renderDirty = true;
-        this.scheduleRender();
-        return true;
-    }
-    /**
-     * Check if suggestions are visible.
-     */
-    areSuggestionsVisible() {
-        return this.showSuggestions && this.filteredSuggestions.length > 0;
-    }
-    /**
-     * Update token count for metrics display
-     */
-    setTokensUsed(tokens) {
-        this.tokensUsed = tokens;
-    }
-    /**
-     * Toggle thinking/reasoning mode
-     */
-    toggleThinking() {
-        this.thinkingEnabled = !this.thinkingEnabled;
-        this.emit('thinkingToggle', this.thinkingEnabled);
-        this.scheduleRender();
-    }
-    /**
-     * Get thinking enabled state
-     */
-    isThinkingEnabled() {
-        return this.thinkingEnabled;
-    }
     /**
      * Keep the top N rows pinned outside the scroll region (used for the launch banner).
      */
     setPinnedHeaderLines(count) {
-        // Set pinned header rows (banner area that scroll region excludes)
-        if (this.pinnedTopRows !== count) {
-            this.pinnedTopRows = count;
+        // No pinned header rows anymore; keep everything in the scroll region.
+        if (this.pinnedTopRows !== 0) {
+            this.pinnedTopRows = 0;
             if (this.scrollRegionActive) {
                 this.applyScrollRegion();
             }
         }
     }
-    /**
-     * Anchor prompt rendering near a specific row (inline layout). Pass null to
-     * restore the default bottom-aligned layout.
-     */
-    setInlineAnchor(row) {
-        if (row === null || row === undefined) {
-            this.inlineAnchorRow = null;
-            this.inlineLayout = false;
-            this.renderDirty = true;
-            this.render();
-            return;
-        }
-        const { rows } = this.getSize();
-        const clamped = Math.max(1, Math.min(Math.floor(row), rows));
-        this.inlineAnchorRow = clamped;
-        this.inlineLayout = true;
-        this.renderDirty = true;
-        this.render();
-    }
-    /**
-     * Provide a dynamic anchor callback. When set, the prompt will follow the
-     * output by re-evaluating the anchor before each render.
-     */
-    setInlineAnchorProvider(provider) {
-        this.anchorProvider = provider;
-        if (!provider) {
-            this.inlineLayout = false;
-            this.inlineAnchorRow = null;
-            this.renderDirty = true;
-            this.render();
-            return;
-        }
-        this.inlineLayout = true;
-        this.renderDirty = true;
-        this.render();
-    }
     /**
      * Get current mode
      */
@@ -807,6 +337,37 @@ export class TerminalInput extends EventEmitter {
         this.streamingLabel = next;
         this.scheduleRender();
     }
+    /**
+     * Surface meta status just above the divider (e.g., elapsed time or token usage).
+     */
+    setMetaStatus(meta) {
+        const nextElapsed = typeof meta.elapsedSeconds === 'number' && Number.isFinite(meta.elapsedSeconds) && meta.elapsedSeconds >= 0
+            ? Math.floor(meta.elapsedSeconds)
+            : null;
+        const nextTokens = typeof meta.tokensUsed === 'number' && Number.isFinite(meta.tokensUsed) && meta.tokensUsed >= 0
+            ? Math.floor(meta.tokensUsed)
+            : null;
+        const nextLimit = typeof meta.tokenLimit === 'number' && Number.isFinite(meta.tokenLimit) && meta.tokenLimit > 0
+            ? Math.floor(meta.tokenLimit)
+            : null;
+        const nextThinking = typeof meta.thinkingMs === 'number' && Number.isFinite(meta.thinkingMs) && meta.thinkingMs >= 0
+            ? Math.floor(meta.thinkingMs)
+            : null;
+        const nextThinkingHasContent = !!meta.thinkingHasContent;
+        if (this.metaElapsedSeconds === nextElapsed &&
+            this.metaTokensUsed === nextTokens &&
+            this.metaTokenLimit === nextLimit &&
+            this.metaThinkingMs === nextThinking &&
+            this.metaThinkingHasContent === nextThinkingHasContent) {
+            return;
+        }
+        this.metaElapsedSeconds = nextElapsed;
+        this.metaTokensUsed = nextTokens;
+        this.metaTokenLimit = nextLimit;
+        this.metaThinkingMs = nextThinking;
+        this.metaThinkingHasContent = nextThinkingHasContent;
+        this.scheduleRender();
+    }
     /**
      * Keep mode toggles (verification/auto-continue) visible in the control bar.
      * Hotkey labels remain stable so the bar looks the same before/during streaming.
@@ -816,26 +377,22 @@ export class TerminalInput extends EventEmitter {
         const nextAutoContinue = !!options.autoContinueEnabled;
         const nextVerifyHotkey = options.verificationHotkey ?? this.verificationHotkey;
         const nextAutoHotkey = options.autoContinueHotkey ?? this.autoContinueHotkey;
+        const nextThinkingHotkey = options.thinkingHotkey ?? this.thinkingHotkey;
+        const nextThinkingLabel = options.thinkingModeLabel === undefined ? this.thinkingModeLabel : (options.thinkingModeLabel || null);
         if (this.verificationEnabled === nextVerification &&
             this.autoContinueEnabled === nextAutoContinue &&
             this.verificationHotkey === nextVerifyHotkey &&
-            this.autoContinueHotkey === nextAutoHotkey) {
+            this.autoContinueHotkey === nextAutoHotkey &&
+            this.thinkingHotkey === nextThinkingHotkey &&
+            this.thinkingModeLabel === nextThinkingLabel) {
             return;
         }
         this.verificationEnabled = nextVerification;
         this.autoContinueEnabled = nextAutoContinue;
         this.verificationHotkey = nextVerifyHotkey;
         this.autoContinueHotkey = nextAutoHotkey;
-        this.scheduleRender();
-    }
-    /**
-     * Set the model info string (e.g., "OpenAI · gpt-4")
-     * This is displayed persistently above the input area.
-     */
-    setModelInfo(info) {
-        if (this.modelInfo === info)
-            return;
-        this.modelInfo = info;
+        this.thinkingHotkey = nextThinkingHotkey;
+        this.thinkingModeLabel = nextThinkingLabel;
         this.scheduleRender();
     }
     /**
@@ -848,298 +405,390 @@ export class TerminalInput extends EventEmitter {
         this.scheduleRender();
     }
     /**
-     * Render the input area - UNIFIED for all modes
+     * Surface model/provider context in the controls bar.
+     */
+    setModelContext(options) {
+        const nextModel = options.model?.trim() || null;
+        const nextProvider = options.provider?.trim() || null;
+        if (this.modelLabel === nextModel && this.providerLabel === nextProvider) {
+            return;
+        }
+        this.modelLabel = nextModel;
+        this.providerLabel = nextProvider;
+        this.scheduleRender();
+    }
+    /**
+     * Render the input area - Claude Code style with mode controls
      *
-     * Uses the same bottom-pinned layout with scroll regions for:
-     * - Idle mode: Shows "Type a message" hint
-     * - Streaming mode: Shows "● Streaming Xs" timer
-     * - Ready mode: Shows status info
+     * During streaming we keep the scroll region active and repaint only the
+     * pinned status/input block (throttled) so streamed content can scroll
+     * naturally above while elapsed time and status stay fresh.
      */
     render() {
         if (!this.canRender())
             return;
         if (this.isRendering)
             return;
+        const streamingActive = this.mode === 'streaming' || isStreamingMode();
+        // During streaming we still render the pinned input/status region, but throttle
+        // to avoid fighting with the streamed content flow.
+        if (streamingActive && this.lastStreamingRender > 0) {
+            const elapsed = Date.now() - this.lastStreamingRender;
+            const waitMs = Math.max(0, this.streamingRenderInterval - elapsed);
+            if (waitMs > 0) {
+                this.renderDirty = true;
+                this.scheduleStreamingRender(waitMs);
+                return;
+            }
+        }
         const shouldSkip = !this.renderDirty &&
             this.buffer === this.lastRenderContent &&
             this.cursor === this.lastRenderCursor;
         this.renderDirty = false;
-        // Skip if nothing changed (unless explicitly forced)
+        // Skip if nothing changed and no explicit refresh requested
         if (shouldSkip) {
             return;
         }
-        // If write lock is held, defer render
+        // If write lock is held, defer render to avoid race conditions
         if (writeLock.isLocked()) {
             writeLock.safeWrite(() => this.render());
             return;
         }
-        this.isRendering = true;
-        writeLock.lock('terminalInput.render');
-        try {
-            // UNIFIED: Use the same bottom input area for all modes
-            this.renderBottomInputArea();
-        }
-        finally {
-            writeLock.unlock();
-            this.isRendering = false;
-        }
-    }
-    /**
-     * Render in flow mode - delegates to bottom-pinned for stability.
-     *
-     * Flow mode attempted inline rendering but caused duplicate renders
-     * due to unreliable cursor position tracking. Bottom-pinned is reliable.
-     */
-    renderFlowMode() {
-        // Use stable bottom-pinned approach
-        this.renderBottomPinned();
-    }
-    /**
-     * Render in bottom-pinned mode - Claude Code style with suggestions
-     *
-     * Works for both normal and streaming modes:
-     * - During streaming: saves/restores cursor position
-     * - Status bar shows streaming info or "Type a message"
-     *
-     * Layout when suggestions visible:
-     * - Top divider
-     * - Input line(s)
-     * - Bottom divider
-     * - Suggestions (command list)
-     *
-     * Layout when suggestions hidden:
-     * - Status bar (Ready/Streaming)
-     * - Top divider
-     * - Input line(s)
-     * - Bottom divider
-     * - Mode controls
-     */
-    renderBottomPinned() {
-        const { rows, cols } = this.getSize();
-        const maxWidth = Math.max(8, cols - 4);
-        const isStreaming = this.mode === 'streaming';
-        // Use unified pinned input area (works for both streaming and normal)
-        // Only use complex rendering when suggestions are visible
-        const hasSuggestions = !isStreaming && this.showSuggestions && this.filteredSuggestions.length > 0;
-        if (!hasSuggestions) {
-            this.renderPinnedInputArea();
-            return;
-        }
-        // Wrap buffer into display lines
-        const { lines, cursorLine, cursorCol } = this.wrapBuffer(maxWidth);
-        const availableForContent = Math.max(1, rows - 3);
-        const maxVisible = Math.max(1, Math.min(this.config.maxLines, availableForContent));
-        const displayLines = Math.min(lines.length, maxVisible);
-        // Calculate display window (keep cursor visible)
-        let startLine = 0;
-        if (lines.length > displayLines) {
-            startLine = Math.max(0, cursorLine - displayLines + 1);
-            startLine = Math.min(startLine, lines.length - displayLines);
-        }
-        const visibleLines = lines.slice(startLine, startLine + displayLines);
-        const adjustedCursorLine = cursorLine - startLine;
-        // Calculate suggestion display (not during streaming)
-        const suggestionsToShow = (!isStreaming && this.showSuggestions)
-            ? this.filteredSuggestions.slice(0, this.maxVisibleSuggestions)
-            : [];
-        const suggestionLines = suggestionsToShow.length;
-        this.write(ESC.HIDE);
-        this.write(ESC.RESET);
-        const divider = renderDivider(cols - 2);
-        // Calculate positions from absolute bottom
-        let currentRow;
-        if (suggestionLines > 0) {
-            // With suggestions: input area + dividers + suggestions
-            // Layout: [topDiv] [input] [bottomDiv] [suggestions...]
-            const totalHeight = 2 + visibleLines.length + suggestionLines; // 2 dividers
-            currentRow = Math.max(1, rows - totalHeight + 1);
-            this.updateReservedLines(totalHeight);
-            // Clear from current position to end of screen to remove any "ghost" content
-            this.write(ESC.TO(currentRow, 1));
-            this.write(ESC.CLEAR_TO_END);
-            // Top divider
+        const performRender = () => {
+            if (!this.scrollRegionActive) {
+                this.enableScrollRegion();
+            }
+            const { rows, cols } = this.getSize();
+            const maxWidth = Math.max(8, cols - 4);
+            // Wrap buffer into display lines
+            const { lines, cursorLine, cursorCol } = this.wrapBuffer(maxWidth);
+            const availableForContent = Math.max(1, rows - 3); // room for separator + input + controls
+            const maxVisible = Math.max(1, Math.min(this.config.maxLines, availableForContent));
+            const displayLines = Math.min(lines.length, maxVisible);
+            const metaLines = this.buildMetaLines(cols - 2);
+            // Reserved lines: optional meta lines + separator(1) + input lines + controls(1)
+            this.updateReservedLines(displayLines + 2 + metaLines.length);
+            // Calculate display window (keep cursor visible)
+            let startLine = 0;
+            if (lines.length > displayLines) {
+                startLine = Math.max(0, cursorLine - displayLines + 1);
+                startLine = Math.min(startLine, lines.length - displayLines);
+            }
+            const visibleLines = lines.slice(startLine, startLine + displayLines);
+            const adjustedCursorLine = cursorLine - startLine;
+            // Hide cursor during render to prevent flicker
+            this.write(ESC.HIDE);
+            this.write(ESC.RESET);
+            const startRow = Math.max(1, rows - this.reservedLines + 1);
+            let currentRow = startRow;
+            // Clear the reserved block to avoid stale meta/status lines
+            this.clearReservedArea(startRow, this.reservedLines, cols);
+            // Meta/status header (elapsed, tokens/context)
+            for (const metaLine of metaLines) {
+                this.write(ESC.TO(currentRow, 1));
+                this.write(ESC.CLEAR_LINE);
+                this.write(metaLine);
+                currentRow += 1;
+            }
+            // Separator line
             this.write(ESC.TO(currentRow, 1));
+            this.write(ESC.CLEAR_LINE);
+            const divider = renderDivider(cols - 2);
             this.write(divider);
-            currentRow++;
-            // Input lines
+            currentRow += 1;
+            // Render input lines
             let finalRow = currentRow;
             let finalCol = 3;
             for (let i = 0; i < visibleLines.length; i++) {
-                this.write(ESC.TO(currentRow, 1));
+                const rowNum = currentRow + i;
+                this.write(ESC.TO(rowNum, 1));
+                this.write(ESC.CLEAR_LINE);
                 const line = visibleLines[i] ?? '';
                 const absoluteLineIdx = startLine + i;
                 const isFirstLine = absoluteLineIdx === 0;
                 const isCursorLine = i === adjustedCursorLine;
+                // Background
+                this.write(ESC.BG_DARK);
+                // Prompt prefix
+                this.write(ESC.DIM);
                 this.write(isFirstLine ? this.config.promptChar : this.config.continuationChar);
+                this.write(ESC.RESET);
+                this.write(ESC.BG_DARK);
                 if (isCursorLine) {
+                    // Render with block cursor
                     const col = Math.min(cursorCol, line.length);
-                    this.write(line.slice(0, col));
-                    this.write(ESC.REVERSE);
-                    this.write(col < line.length ? line[col] : ' ');
-                    this.write(ESC.RESET);
-                    this.write(line.slice(col + 1));
-                    finalRow = currentRow;
+                    const before = line.slice(0, col);
+                    const at = col < line.length ? line[col] : ' ';
+                    const after = col < line.length ? line.slice(col + 1) : '';
+                    this.write(before);
+                    this.write(ESC.REVERSE + ESC.BOLD);
+                    this.write(at);
+                    this.write(ESC.RESET + ESC.BG_DARK);
+                    this.write(after);
+                    finalRow = rowNum;
                     finalCol = this.config.promptChar.length + col + 1;
                 }
                 else {
                     this.write(line);
                 }
-                currentRow++;
+                // Pad to edge for clean look
+                const lineLen = this.config.promptChar.length + line.length + (isCursorLine && cursorCol >= line.length ? 1 : 0);
+                const padding = Math.max(0, cols - lineLen - 1);
+                if (padding > 0)
+                    this.write(' '.repeat(padding));
+                this.write(ESC.RESET);
             }
-            // Bottom divider
-            this.write(ESC.TO(currentRow, 1));
-            this.write(divider);
-            currentRow++;
-            // Suggestions (Claude Code style)
-            for (let i = 0; i < suggestionsToShow.length; i++) {
-                this.write(ESC.TO(currentRow, 1));
-                const suggestion = suggestionsToShow[i];
-                const isSelected = i === this.selectedSuggestionIndex;
-                // Indent and highlight selected
-                this.write('  ');
-                if (isSelected) {
-                    this.write(ESC.REVERSE);
-                    this.write(ESC.BOLD);
-                }
-                this.write(suggestion.command);
-                if (isSelected) {
-                    this.write(ESC.RESET);
-                }
-                // Description (dimmed)
-                const descSpace = cols - suggestion.command.length - 8;
-                if (descSpace > 10 && suggestion.description) {
-                    const desc = suggestion.description.slice(0, descSpace);
-                    this.write(ESC.RESET);
-                    this.write(ESC.DIM);
-                    this.write('  ');
-                    this.write(desc);
-                    this.write(ESC.RESET);
-                }
-                currentRow++;
-            }
-            // Position cursor in input area
+            // Mode controls line (Claude Code style)
+            const controlRow = currentRow + visibleLines.length;
+            this.write(ESC.TO(controlRow, 1));
+            this.write(ESC.CLEAR_LINE);
+            this.write(this.buildModeControls(cols));
+            // Position cursor in the input box for user editing
             this.write(ESC.TO(finalRow, Math.min(finalCol, cols)));
+            this.write(ESC.SHOW);
+            // Update state
+            this.lastRenderContent = this.buffer;
+            this.lastRenderCursor = this.cursor;
+            this.lastStreamingRender = streamingActive ? Date.now() : 0;
+            if (this.streamingRenderTimer) {
+                clearTimeout(this.streamingRenderTimer);
+                this.streamingRenderTimer = null;
+            }
+        };
+        // Use write lock during render to prevent interleaved output
+        writeLock.lock('terminalInput.render');
+        this.isRendering = true;
+        try {
+            performRender();
+        }
+        finally {
+            writeLock.unlock();
+            this.isRendering = false;
         }
-        this.write(ESC.SHOW);
-        // Update state
-        this.lastRenderContent = this.buffer;
-        this.lastRenderCursor = this.cursor;
     }
     /**
-     * Build status bar for streaming mode (shows elapsed time, queue count).
+     * Build one or more compact meta lines above the divider (thinking, status, usage).
+     * During streaming, shows model line pinned above streaming info.
      */
-    buildStreamingStatusBar(cols) {
-        const { green: GREEN, cyan: CYAN, dim: DIM, reset: R } = UI_COLORS;
-        // Streaming status with elapsed time
-        let elapsed = '0s';
-        if (this.streamingStartTime) {
-            const secs = Math.floor((Date.now() - this.streamingStartTime) / 1000);
-            const mins = Math.floor(secs / 60);
-            elapsed = mins > 0 ? `${mins}m ${secs % 60}s` : `${secs}s`;
-        }
-        let status = `${GREEN}● Streaming${R} ${elapsed}`;
-        // Queue indicator
+    buildMetaLines(width) {
+        const streamingActive = this.mode === 'streaming' || isStreamingMode();
+        const lines = [];
+        // Model line should ALWAYS be shown (pinned above streaming content)
+        if (this.modelLabel) {
+            const modelText = this.providerLabel
+                ? `model ${this.modelLabel} @ ${this.providerLabel}`
+                : `model ${this.modelLabel}`;
+            lines.push(renderStatusLine([{ text: modelText, tone: 'info' }], width));
+        }
+        // During streaming, add a compact status line with essential info
+        if (streamingActive) {
+            const parts = [];
+            // Essential streaming info
+            if (this.metaThinkingMs !== null) {
+                parts.push({ text: formatThinking(this.metaThinkingMs, this.metaThinkingHasContent), tone: 'info' });
+            }
+            if (this.metaElapsedSeconds !== null) {
+                parts.push({ text: this.formatElapsedLabel(this.metaElapsedSeconds), tone: 'muted' });
+            }
+            parts.push({ text: 'esc to stop', tone: 'warn' });
+            if (parts.length) {
+                lines.push(renderStatusLine(parts, width));
+            }
+            return lines;
+        }
+        // Non-streaming: show full status info (model line already added above)
+        if (this.metaThinkingMs !== null) {
+            const thinkingText = formatThinking(this.metaThinkingMs, this.metaThinkingHasContent);
+            lines.push(renderStatusLine([{ text: thinkingText, tone: 'info' }], width));
+        }
+        const statusParts = [];
+        const statusLabel = this.statusMessage ?? this.streamingLabel;
+        if (statusLabel) {
+            statusParts.push({ text: statusLabel, tone: 'info' });
+        }
+        if (this.metaElapsedSeconds !== null) {
+            statusParts.push({ text: this.formatElapsedLabel(this.metaElapsedSeconds), tone: 'muted' });
+        }
+        const tokensRemaining = this.computeTokensRemaining();
+        if (tokensRemaining !== null) {
+            statusParts.push({ text: `↓ ${tokensRemaining}`, tone: 'muted' });
+        }
+        if (statusParts.length) {
+            lines.push(renderStatusLine(statusParts, width));
+        }
+        const usageParts = [];
+        if (this.metaTokensUsed !== null) {
+            const formattedUsed = this.formatTokenCount(this.metaTokensUsed);
+            const formattedLimit = this.metaTokenLimit ? `/${this.formatTokenCount(this.metaTokenLimit)}` : '';
+            usageParts.push({ text: `tokens ${formattedUsed}${formattedLimit}`, tone: 'muted' });
+        }
+        if (this.contextUsage !== null) {
+            const tone = this.contextUsage >= 75 ? 'warn' : 'muted';
+            const left = Math.max(0, 100 - this.contextUsage);
+            usageParts.push({ text: `context used ${this.contextUsage}% (${left}% left)`, tone });
+        }
         if (this.queue.length > 0) {
-            status += ` ${DIM}·${R} ${CYAN}${this.queue.length} queued${R}`;
+            usageParts.push({ text: `queued ${this.queue.length}`, tone: 'info' });
         }
-        // Hint for typing
-        status += ` ${DIM}· type to queue message${R}`;
-        return status;
+        if (usageParts.length) {
+            lines.push(renderStatusLine(usageParts, width));
+        }
+        return lines;
     }
     /**
-     * Build status bar showing streaming/ready status and key info.
-     * This is the TOP line above the input area - minimal Claude Code style.
+     * Clear the reserved bottom block (meta + divider + input + controls) before repainting.
      */
-    buildStatusBar(cols) {
-        const maxWidth = cols - 2;
-        const parts = [];
-        // Streaming status with elapsed time (left side)
-        if (this.mode === 'streaming') {
-            let statusText = '● Streaming';
-            if (this.streamingStartTime) {
-                const elapsed = Math.floor((Date.now() - this.streamingStartTime) / 1000);
-                const mins = Math.floor(elapsed / 60);
-                const secs = elapsed % 60;
-                statusText += mins > 0 ? ` ${mins}m ${secs}s` : ` ${secs}s`;
-            }
-            parts.push(`\x1b[32m${statusText}\x1b[0m`); // Green
+    clearReservedArea(startRow, reservedLines, cols) {
+        const width = Math.max(1, cols);
+        for (let i = 0; i < reservedLines; i++) {
+            const row = startRow + i;
+            this.write(ESC.TO(row, 1));
+            this.write(' '.repeat(width));
         }
-        // Queue indicator during streaming
-        if (this.mode === 'streaming' && this.queue.length > 0) {
-            parts.push(`\x1b[36mqueued: ${this.queue.length}\x1b[0m`); // Cyan
-        }
-        // Paste indicator
-        if (this.pastePlaceholders.length > 0) {
-            const totalLines = this.pastePlaceholders.reduce((sum, p) => sum + p.lineCount, 0);
-            parts.push(`\x1b[36m📋 ${totalLines}L\x1b[0m`);
+    }
+    /**
+     * Build Claude Code style mode controls line.
+     * Combines streaming label + override status + main status for simultaneous display.
+     */
+    buildModeControls(cols) {
+        const width = Math.max(8, cols - 2);
+        const leftParts = [];
+        const rightParts = [];
+        if (this.streamingLabel) {
+            leftParts.push({ text: `◐ ${this.streamingLabel}`, tone: 'info' });
         }
-        // Override/warning status
         if (this.overrideStatusMessage) {
-            parts.push(`\x1b[33m⚠ ${this.overrideStatusMessage}\x1b[0m`); // Yellow
+            leftParts.push({ text: `⚠ ${this.overrideStatusMessage}`, tone: 'warn' });
+        }
+        if (this.statusMessage) {
+            leftParts.push({ text: this.statusMessage, tone: this.streamingLabel ? 'muted' : 'info' });
+        }
+        const editHotkey = this.formatHotkey('shift+tab');
+        const editLabel = this.editMode === 'display-edits' ? 'edits: accept' : 'edits: ask';
+        const editTone = this.editMode === 'display-edits' ? 'success' : 'muted';
+        leftParts.push({ text: `${editHotkey} ${editLabel}`, tone: editTone });
+        const verifyHotkey = this.formatHotkey(this.verificationHotkey);
+        const verifyLabel = this.verificationEnabled ? 'verify:on' : 'verify:off';
+        leftParts.push({ text: `${verifyHotkey} ${verifyLabel}`, tone: this.verificationEnabled ? 'success' : 'muted' });
+        const continueHotkey = this.formatHotkey(this.autoContinueHotkey);
+        const continueLabel = this.autoContinueEnabled ? 'auto:on' : 'auto:off';
+        leftParts.push({ text: `${continueHotkey} ${continueLabel}`, tone: this.autoContinueEnabled ? 'info' : 'muted' });
+        if (this.queue.length > 0 && this.mode !== 'streaming') {
+            leftParts.push({ text: `queued ${this.queue.length}`, tone: 'info' });
         }
-        // If idle with empty buffer, show quick shortcuts
-        if (this.mode !== 'streaming' && this.buffer.length === 0 && parts.length === 0) {
-            return `${ESC.DIM}Type a message or / for commands${ESC.RESET}`;
-        }
-        // Multi-line indicator
         if (this.buffer.includes('\n')) {
-            parts.push(`${ESC.DIM}${this.buffer.split('\n').length}L${ESC.RESET}`);
+            const lineCount = this.buffer.split('\n').length;
+            leftParts.push({ text: `${lineCount} lines`, tone: 'muted' });
+        }
+        if (this.pastePlaceholders.length > 0) {
+            const latest = this.pastePlaceholders[this.pastePlaceholders.length - 1];
+            leftParts.push({
+                text: `paste #${latest.id} +${latest.lineCount} lines (⌫ to drop)`,
+                tone: 'info',
+            });
+        }
+        const contextRemaining = this.computeContextRemaining();
+        if (this.thinkingModeLabel) {
+            const thinkingHotkey = this.formatHotkey(this.thinkingHotkey);
+            rightParts.push({ text: `${thinkingHotkey} thinking:${this.thinkingModeLabel}`, tone: 'info' });
+        }
+        // Show model in controls only when NOT streaming (during streaming it's in meta lines)
+        const streamingActive = this.mode === 'streaming' || isStreamingMode();
+        if (this.modelLabel && !streamingActive) {
+            const modelText = this.providerLabel ? `${this.modelLabel} @ ${this.providerLabel}` : this.modelLabel;
+            rightParts.push({ text: modelText, tone: 'muted' });
+        }
+        if (contextRemaining !== null) {
+            const tone = contextRemaining <= 10 ? 'warn' : 'muted';
+            const label = contextRemaining === 0 && this.contextUsage !== null
+                ? 'Context auto-compact imminent'
+                : `Context left until auto-compact: ${contextRemaining}%`;
+            rightParts.push({ text: label, tone });
+        }
+        if (!rightParts.length || width < 60) {
+            const merged = rightParts.length ? [...leftParts, ...rightParts] : leftParts;
+            return renderStatusLine(merged, width);
+        }
+        const leftWidth = Math.max(12, Math.floor(width * 0.6));
+        const rightWidth = Math.max(14, width - leftWidth - 1);
+        const leftText = renderStatusLine(leftParts, leftWidth);
+        const rightText = renderStatusLine(rightParts, rightWidth);
+        const spacing = Math.max(1, width - this.visibleLength(leftText) - this.visibleLength(rightText));
+        return `${leftText}${' '.repeat(spacing)}${rightText}`;
+    }
+    formatHotkey(hotkey) {
+        const normalized = hotkey.trim().toLowerCase();
+        if (!normalized)
+            return hotkey;
+        const parts = normalized.split('+').filter(Boolean);
+        const map = {
+            shift: '⇧',
+            sh: '⇧',
+            alt: '⌥',
+            option: '⌥',
+            opt: '⌥',
+            ctrl: '⌃',
+            control: '⌃',
+            cmd: '⌘',
+            meta: '⌘',
+        };
+        const formatted = parts
+            .map((part) => {
+            const symbol = map[part];
+            if (symbol)
+                return symbol;
+            return part.length === 1 ? part.toUpperCase() : part.toUpperCase();
+        })
+            .join('');
+        return formatted || hotkey;
+    }
+    computeContextRemaining() {
+        if (this.contextUsage === null) {
+            return null;
+        }
+        return Math.max(0, this.contextAutoCompactThreshold - this.contextUsage);
+    }
+    computeTokensRemaining() {
+        if (this.metaTokensUsed === null || this.metaTokenLimit === null) {
+            return null;
+        }
+        const remaining = Math.max(0, this.metaTokenLimit - this.metaTokensUsed);
+        return this.formatTokenCount(remaining);
+    }
+    formatElapsedLabel(seconds) {
+        if (seconds < 60) {
+            return `${seconds}s`;
+        }
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+    }
+    formatTokenCount(value) {
+        if (!Number.isFinite(value)) {
+            return `${value}`;
+        }
+        if (value >= 1_000_000) {
+            return `${(value / 1_000_000).toFixed(1)}M`;
         }
-        if (parts.length === 0) {
-            return ''; // Empty status bar when idle
+        if (value >= 1_000) {
+            return `${(value / 1_000).toFixed(1)}k`;
         }
-        const joined = parts.join(`${ESC.DIM} · ${ESC.RESET}`);
-        return joined.slice(0, maxWidth);
+        return `${Math.round(value)}`;
+    }
+    visibleLength(value) {
+        const ansiPattern = /\u001B\[[0-?]*[ -/]*[@-~]/g;
+        return value.replace(ansiPattern, '').length;
     }
     /**
-     * Build mode controls line showing toggles and context info.
-     * This is the BOTTOM line below the input area - Claude Code style layout with erosolar features.
-     *
-     * Layout: [toggles on left] ... [context info on right]
+     * Debug-only snapshot used by tests to assert rendered strings without
+     * needing a TTY. Not used by production code.
      */
-    buildModeControls(cols) {
-        const maxWidth = cols - 2;
-        // Use schema-defined colors for consistency
-        const { green: GREEN, yellow: YELLOW, cyan: CYAN, magenta: MAGENTA, red: RED, dim: DIM, reset: R } = UI_COLORS;
-        // Mode toggles with colors (following ModeControlsSchema)
-        const toggles = [];
-        // Edit mode (green=auto, yellow=ask) - per schema.editMode
-        if (this.editMode === 'display-edits') {
-            toggles.push(`${GREEN}⏵⏵ auto-edit${R}`);
-        }
-        else {
-            toggles.push(`${YELLOW}⏸⏸ ask-first${R}`);
-        }
-        // Thinking mode (cyan when on) - per schema.thinkingMode
-        toggles.push(this.thinkingEnabled ? `${CYAN}💭 think${R}` : `${DIM}○ think${R}`);
-        // Verification (green when on) - per schema.verificationMode
-        toggles.push(this.verificationEnabled ? `${GREEN}✓ verify${R}` : `${DIM}○ verify${R}`);
-        // Auto-continue (magenta when on) - per schema.autoContinueMode
-        toggles.push(this.autoContinueEnabled ? `${MAGENTA}↻ auto${R}` : `${DIM}○ auto${R}`);
-        const leftPart = toggles.join(`${DIM} · ${R}`) + `${DIM} (⇧⇥)${R}`;
-        // Context usage with color - per schema.contextUsage thresholds
-        let rightPart = '';
-        if (this.contextUsage !== null) {
-            const rem = Math.max(0, 100 - this.contextUsage);
-            // Thresholds: critical < 10%, warning < 25%
-            if (rem < 10)
-                rightPart = `${RED}⚠ ctx: ${rem}%${R}`;
-            else if (rem < 25)
-                rightPart = `${YELLOW}! ctx: ${rem}%${R}`;
-            else
-                rightPart = `${DIM}ctx: ${rem}%${R}`;
-        }
-        // Calculate visible lengths (strip ANSI)
-        const strip = (s) => s.replace(/\x1b\[[0-9;]*m/g, '');
-        const leftLen = strip(leftPart).length;
-        const rightLen = strip(rightPart).length;
-        if (leftLen + rightLen < maxWidth - 4) {
-            return `${leftPart}${' '.repeat(maxWidth - leftLen - rightLen)}${rightPart}`;
-        }
-        if (rightLen > 0 && leftLen + 8 < maxWidth) {
-            return `${leftPart}    ${rightPart}`;
-        }
-        return leftPart;
+    getDebugUiSnapshot(width) {
+        const cols = Math.max(8, width ?? this.getSize().cols);
+        return {
+            meta: this.buildMetaLines(cols - 2),
+            controls: this.buildModeControls(cols),
+        };
     }
     /**
      * Force a re-render
@@ -1162,17 +811,19 @@ export class TerminalInput extends EventEmitter {
     handleResize() {
         this.lastRenderContent = '';
         this.lastRenderCursor = -1;
+        this.resetStreamingRenderThrottle();
         // Re-clamp pinned header rows to the new terminal height
         this.setPinnedHeaderLines(this.pinnedTopRows);
+        if (this.scrollRegionActive) {
+            this.disableScrollRegion();
+            this.enableScrollRegion();
+        }
         this.scheduleRender();
     }
     /**
      * Register with display's output interceptor to position cursor correctly.
      * When scroll region is active, output needs to go to the scroll region,
      * not the protected bottom area where the input is rendered.
-     *
-     * NOTE: With scroll region properly set, content naturally stays within
-     * the region boundaries - no cursor manipulation needed per-write.
      */
     registerOutputInterceptor(display) {
         if (this.outputInterceptorCleanup) {
@@ -1180,25 +831,66 @@ export class TerminalInput extends EventEmitter {
         }
         this.outputInterceptorCleanup = display.registerOutputInterceptor({
             beforeWrite: () => {
-                // Scroll region handles content containment automatically
-                // No per-write cursor manipulation needed
+                // Position cursor at scroll region bottom for content.
+                // Terminal handles scrolling automatically when bottom is reached.
+                if (this.scrollRegionActive) {
+                    const { rows } = this.getSize();
+                    const scrollBottom = Math.max(this.pinnedTopRows + 1, rows - this.reservedLines);
+                    this.write(ESC.SAVE);
+                    this.write(ESC.TO(scrollBottom, 1));
+                }
             },
             afterWrite: () => {
-                // No cursor manipulation needed
+                // Restore cursor position after content output.
+                if (this.scrollRegionActive) {
+                    this.write(ESC.RESTORE);
+                }
             },
         });
     }
+    /**
+     * Write content directly into the scroll region (for banner, user prompts, etc.).
+     * Content appears at scroll bottom and pushes previous content up.
+     */
+    writeToScrollRegion(content) {
+        if (!content)
+            return;
+        // Ensure scroll region is active
+        if (!this.scrollRegionActive) {
+            this.enableScrollRegion();
+        }
+        const { rows } = this.getSize();
+        const scrollBottom = Math.max(this.pinnedTopRows + 1, rows - this.reservedLines);
+        // Save cursor, write at scroll bottom, restore
+        this.write(ESC.SAVE);
+        this.write(ESC.TO(scrollBottom, 1));
+        this.write(content);
+        this.write(ESC.RESTORE);
+    }
+    /**
+     * Clear the scroll region and prepare for fresh content.
+     */
+    clearScrollRegion() {
+        if (!this.scrollRegionActive) {
+            this.enableScrollRegion();
+        }
+        const { rows, cols } = this.getSize();
+        const scrollTop = Math.max(1, this.pinnedTopRows + 1);
+        const scrollBottom = Math.max(scrollTop, rows - this.reservedLines);
+        // Clear each line in the scroll region
+        this.write(ESC.SAVE);
+        for (let row = scrollTop; row <= scrollBottom; row++) {
+            this.write(ESC.TO(row, 1));
+            this.write(' '.repeat(cols));
+        }
+        this.write(ESC.RESTORE);
+    }
     /**
      * Dispose and clean up
      */
     dispose() {
         if (this.disposed)
             return;
-        // Clean up streaming render timer
-        if (this.streamingRenderTimer) {
-            clearInterval(this.streamingRenderTimer);
-            this.streamingRenderTimer = null;
-        }
         // Clean up output interceptor
         if (this.outputInterceptorCleanup) {
             this.outputInterceptorCleanup();
@@ -1206,6 +898,7 @@ export class TerminalInput extends EventEmitter {
         }
         this.disposed = true;
         this.enabled = false;
+        this.resetStreamingRenderThrottle();
         this.disableScrollRegion();
         this.disableBracketedPaste();
         this.buffer = '';
@@ -1311,22 +1004,7 @@ export class TerminalInput extends EventEmitter {
                     this.toggleEditMode();
                     return true;
                 }
-                // Tab: toggle paste expansion if in placeholder, otherwise toggle thinking
-                if (this.findPlaceholderAt(this.cursor)) {
-                    this.togglePasteExpansion();
-                }
-                else {
-                    this.toggleThinking();
-                }
-                return true;
-            case 'escape':
-                // Esc: interrupt if streaming, otherwise clear buffer
-                if (this.mode === 'streaming') {
-                    this.emit('interrupt');
-                }
-                else if (this.buffer.length > 0) {
-                    this.clear();
-                }
+                this.insertText('  ');
                 return true;
         }
         return false;
@@ -1344,7 +1022,6 @@ export class TerminalInput extends EventEmitter {
         this.insertPlainText(chunk, insertPos);
         this.cursor = insertPos + chunk.length;
         this.emit('change', this.buffer);
-        this.updateSuggestions();
         this.scheduleRender();
     }
     insertNewline() {
@@ -1369,7 +1046,6 @@ export class TerminalInput extends EventEmitter {
             this.cursor = Math.max(0, this.cursor - 1);
         }
         this.emit('change', this.buffer);
-        this.updateSuggestions();
         this.scheduleRender();
     }
     deleteForward() {
@@ -1619,7 +1295,9 @@ export class TerminalInput extends EventEmitter {
         if (available <= 0)
             return;
         const chunk = clean.slice(0, available);
-        if (isMultilinePaste(chunk)) {
+        const isMultiline = isMultilinePaste(chunk);
+        const isShortMultiline = isMultiline && this.shouldInlineMultiline(chunk);
+        if (isMultiline && !isShortMultiline) {
             this.insertPastePlaceholder(chunk);
         }
         else {
@@ -1639,6 +1317,7 @@ export class TerminalInput extends EventEmitter {
             return;
         this.applyScrollRegion();
         this.scrollRegionActive = true;
+        this.forceRender();
     }
     disableScrollRegion() {
         if (!this.scrollRegionActive)
@@ -1789,17 +1468,19 @@ export class TerminalInput extends EventEmitter {
         this.shiftPlaceholders(position, text.length);
         this.buffer = this.buffer.slice(0, position) + text + this.buffer.slice(position);
     }
+    shouldInlineMultiline(content) {
+        const lines = content.split('\n').length;
+        const maxInlineLines = 4;
+        const maxInlineChars = 240;
+        return lines <= maxInlineLines && content.length <= maxInlineChars;
+    }
     findPlaceholderAt(position) {
         return this.pastePlaceholders.find((ph) => position >= ph.start && position < ph.end) ?? null;
     }
-    buildPlaceholder(summary) {
+    buildPlaceholder(lineCount) {
         const id = ++this.pasteCounter;
-        const lang = summary.language ? ` ${summary.language.toUpperCase()}` : '';
-        // Show first line preview (truncated)
-        const preview = summary.preview.length > 30
-            ? `${summary.preview.slice(0, 30)}...`
-            : summary.preview;
-        const placeholder = `[📋 #${id}${lang} ${summary.lineCount}L] "${preview}"`;
+        const plural = lineCount === 1 ? '' : 's';
+        const placeholder = `[Pasted text #${id} +${lineCount} line${plural}]`;
         return { id, placeholder };
     }
     insertPastePlaceholder(content) {
@@ -1807,67 +1488,21 @@ export class TerminalInput extends EventEmitter {
         if (available <= 0)
             return;
         const cleanContent = content.slice(0, available);
-        const summary = generatePasteSummary(cleanContent);
-        // For short pastes (< 5 lines), show full content instead of placeholder
-        if (summary.lineCount < 5) {
-            const placeholder = this.findPlaceholderAt(this.cursor);
-            const insertPos = placeholder && this.cursor > placeholder.start ? placeholder.end : this.cursor;
-            this.insertPlainText(cleanContent, insertPos);
-            this.cursor = insertPos + cleanContent.length;
-            return;
-        }
-        const { id, placeholder } = this.buildPlaceholder(summary);
+        const lineCount = cleanContent.split('\n').length;
+        const { id, placeholder } = this.buildPlaceholder(lineCount);
         const insertPos = this.cursor;
         this.shiftPlaceholders(insertPos, placeholder.length);
         this.pastePlaceholders.push({
             id,
             content: cleanContent,
-            lineCount: summary.lineCount,
+            lineCount,
             placeholder,
             start: insertPos,
             end: insertPos + placeholder.length,
-            summary,
-            expanded: false,
         });
         this.buffer = this.buffer.slice(0, insertPos) + placeholder + this.buffer.slice(insertPos);
         this.cursor = insertPos + placeholder.length;
     }
-    /**
-     * Toggle expansion of a paste placeholder at the current cursor position.
-     * When expanded, shows first 3 and last 2 lines of the content.
-     */
-    togglePasteExpansion() {
-        const placeholder = this.findPlaceholderAt(this.cursor);
-        if (!placeholder)
-            return false;
-        placeholder.expanded = !placeholder.expanded;
-        // Update the placeholder text in buffer
-        const newPlaceholder = placeholder.expanded
-            ? this.buildExpandedPlaceholder(placeholder)
-            : this.buildPlaceholder(placeholder.summary).placeholder;
-        const lengthDiff = newPlaceholder.length - placeholder.placeholder.length;
-        // Update buffer
-        this.buffer =
-            this.buffer.slice(0, placeholder.start) +
-                newPlaceholder +
-                this.buffer.slice(placeholder.end);
-        // Update placeholder tracking
-        placeholder.placeholder = newPlaceholder;
-        placeholder.end = placeholder.start + newPlaceholder.length;
-        // Shift other placeholders
-        this.shiftPlaceholders(placeholder.end, lengthDiff, placeholder.id);
-        this.scheduleRender();
-        return true;
-    }
-    buildExpandedPlaceholder(ph) {
-        const lines = ph.content.split('\n');
-        const firstLines = lines.slice(0, 3).map(l => l.slice(0, 60)).join('\n');
-        const lastLines = lines.length > 5
-            ? '\n...\n' + lines.slice(-2).map(l => l.slice(0, 60)).join('\n')
-            : '';
-        const lang = ph.summary.language ? ` ${ph.summary.language.toUpperCase()}` : '';
-        return `[📋 #${ph.id}${lang} ${ph.lineCount}L ▼]\n${firstLines}${lastLines}\n[/📋 #${ph.id}]`;
-    }
     deletePlaceholder(placeholder) {
         const length = placeholder.end - placeholder.start;
         this.buffer = this.buffer.slice(0, placeholder.start) + this.buffer.slice(placeholder.end);
@@ -1875,7 +1510,11 @@ export class TerminalInput extends EventEmitter {
         this.shiftPlaceholders(placeholder.end, -length, placeholder.id);
         this.cursor = placeholder.start;
     }
-    updateContextUsage(value) {
+    updateContextUsage(value, autoCompactThreshold) {
+        if (typeof autoCompactThreshold === 'number' && Number.isFinite(autoCompactThreshold)) {
+            const boundedThreshold = Math.max(1, Math.min(100, Math.round(autoCompactThreshold)));
+            this.contextAutoCompactThreshold = boundedThreshold;
+        }
         if (value === null || !Number.isFinite(value)) {
             this.contextUsage = null;
         }
@@ -1902,6 +1541,22 @@ export class TerminalInput extends EventEmitter {
         const next = this.editMode === 'display-edits' ? 'ask-permission' : 'display-edits';
         this.setEditMode(next);
     }
+    scheduleStreamingRender(delayMs) {
+        if (this.streamingRenderTimer)
+            return;
+        const wait = Math.max(16, delayMs);
+        this.streamingRenderTimer = setTimeout(() => {
+            this.streamingRenderTimer = null;
+            this.render();
+        }, wait);
+    }
+    resetStreamingRenderThrottle() {
+        if (this.streamingRenderTimer) {
+            clearTimeout(this.streamingRenderTimer);
+            this.streamingRenderTimer = null;
+        }
+        this.lastStreamingRender = 0;
+    }
     scheduleRender() {
         if (!this.canRender())
             return;