erosolar-cli 1.7.356 → 1.7.358

package/dist/shell/terminalInput.js

@@ -3,15 +3,24 @@
  *
  * Design principles:
  * - Single source of truth for input state
+ * - Hybrid floating/scroll approach:
+ *   - Initially: chat box floats below content
+ *   - When terminal fills: scroll region activates, chat box pins to bottom
  * - Native bracketed paste support (no heuristics)
  * - Clean cursor model with render-time wrapping
  * - State machine for different input modes
  * - No readline dependency for display
+ * - Text selection enabled: mouse tracking disabled by default to preserve
+ *   native terminal text selection and copy/paste functionality
+ * - Scrollback navigation via keyboard: PageUp/PageDown, Ctrl+Home/End
  */
 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 { 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';
+import { theme } from '../ui/theme.js';
 // ANSI escape codes
 const ESC = {
     // Cursor control
@@ -21,14 +30,18 @@ const ESC = {
     SHOW: '\x1b[?25h',
     TO: (row, col) => `\x1b[${row};${col}H`,
     TO_COL: (col) => `\x1b[${col}G`,
-    // Screen control
-    CLEAR_SCREEN: '\x1b[2J',
-    HOME: '\x1b[H',
-    ALT_SCREEN_ENTER: '\x1b[?1049h', // Enter alternate screen buffer
-    ALT_SCREEN_EXIT: '\x1b[?1049l', // Exit alternate screen buffer
     // Line control
     CLEAR_LINE: '\x1b[2K',
     CLEAR_TO_END: '\x1b[0J',
+    // Screen control
+    HOME: '\x1b[H',
+    CLEAR_SCREEN: '\x1b[2J',
+    // Alternate screen buffer (like vim/tmux)
+    ENTER_ALT_SCREEN: '\x1b[?1049h',
+    EXIT_ALT_SCREEN: '\x1b[?1049l',
+    // Scroll region
+    SET_SCROLL: (top, bottom) => `\x1b[${top};${bottom}r`,
+    RESET_SCROLL: '\x1b[r',
     // Style
     RESET: '\x1b[0m',
     DIM: '\x1b[2m',
@@ -40,6 +53,12 @@ const ESC = {
     PASTE_DISABLE: '\x1b[?2004l',
     PASTE_START: '\x1b[200~',
     PASTE_END: '\x1b[201~',
+    // Mouse tracking - Button events only (allows Shift+drag for text selection)
+    // Mode 1000: Track button presses/releases (wheel events included)
+    // Mode 1006: SGR extended format for better coordinate handling
+    // Note: NOT using mode 1003 (all motion) to preserve terminal text selection
+    MOUSE_ENABLE: '\x1b[?1000h\x1b[?1006h', // Enable button tracking + SGR mode
+    MOUSE_DISABLE: '\x1b[?1006l\x1b[?1000l', // Disable mouse tracking
 };
 /**
  * Unified terminal input handler
@@ -68,49 +87,54 @@ 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
     lastRenderContent = '';
     lastRenderCursor = -1;
     renderDirty = false;
     isRendering = false;
-    flowModeRenderedLines = 0; // Track lines rendered for clearing
-    inputAreaStartRow = 0; // Track absolute row position of input area
-    contentEndRow = 0; // Row where content ends (chat box renders below this)
-    // Command suggestions (Claude Code style auto-complete)
-    commandSuggestions = [];
-    filteredSuggestions = [];
-    selectedSuggestionIndex = 0;
-    showSuggestions = false;
     // Lifecycle
     disposed = false;
     enabled = true;
     contextUsage = null;
+    contextAutoCompactThreshold = 90;
+    // Track current content row (starts at top, moves down)
+    contentRow = 1;
+    // Track if scroll region is currently active
+    scrollRegionActive = false;
+    thinkingModeLabel = null;
+    // Scrollback buffer
+    scrollbackBuffer = [];
+    maxScrollbackLines = 10000;
+    scrollbackOffset = 0; // 0 = at bottom (live), > 0 = scrolled up
+    isInScrollbackMode = false;
+    scrollIndicatorFrame = 0; // For animated scroll indicator
+    // Alternate screen state
+    alternateScreenActive = false;
     editMode = 'display-edits';
     verificationEnabled = true;
     autoContinueEnabled = false;
     verificationHotkey = 'alt+v';
     autoContinueHotkey = 'alt+c';
-    // Output interceptor cleanup
-    outputInterceptorCleanup;
-    // Metrics tracking for status bar
-    streamingStartTime = null;
-    thinkingEnabled = true;
-    modelInfo = null; // Provider · Model info
-    // Streaming input area render timer (updates elapsed time display)
+    thinkingHotkey = '/thinking';
+    modelLabel = null;
+    providerLabel = null;
+    // Streaming render throttle
+    lastStreamingRender = 0;
+    streamingRenderInterval = 250; // ms between renders during streaming
     streamingRenderTimer = null;
-    // Reference to display module for getting line counts during streaming
-    displayRef = null;
-    // Unified UI initialization flag
-    unifiedUIInitialized = false;
     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 ?? '│ ',
         };
     }
     // ===========================================================================
@@ -133,10 +157,47 @@ export class TerminalInput extends EventEmitter {
         }
     }
     /**
-     * Process raw terminal data (handles bracketed paste sequences)
-     * Returns true if the data was consumed (paste sequence)
+     * Enable mouse tracking in terminal
+     */
+    enableMouseTracking() {
+        if (this.isTTY()) {
+            this.write(ESC.MOUSE_ENABLE);
+        }
+    }
+    /**
+     * Disable mouse tracking
+     */
+    disableMouseTracking() {
+        if (this.isTTY()) {
+            this.write(ESC.MOUSE_DISABLE);
+        }
+    }
+    /**
+     * Process raw terminal data (handles bracketed paste sequences, mouse events, and escape sequences)
+     * Returns true if the data was consumed (paste sequence, mouse event, etc.)
      */
     processRawData(data) {
+        // Check for mouse events (SGR mode: \x1b[<button;x;yM or m)
+        const mouseMatch = data.match(/\x1b\[<(\d+);(\d+);(\d+)([Mm])/);
+        if (mouseMatch) {
+            const button = parseInt(mouseMatch[1], 10);
+            const x = parseInt(mouseMatch[2], 10);
+            const y = parseInt(mouseMatch[3], 10);
+            const action = mouseMatch[4]; // 'M' = press, 'm' = release
+            this.handleMouseEvent(button, x, y, action);
+            // Remove mouse event from data and return remaining
+            const mouseEventEnd = data.indexOf(action) + 1;
+            const remaining = data.slice(mouseEventEnd);
+            return { consumed: true, passthrough: remaining };
+        }
+        // Filter out arrow key escape sequences (they're handled by keypress events)
+        // Arrow keys: \x1b[A (up), \x1b[B (down), \x1b[C (right), \x1b[D (left)
+        const arrowMatch = data.match(/\x1b\[[ABCD]/);
+        if (arrowMatch) {
+            // Arrow keys should be handled by keypress handler, strip them from passthrough
+            const filtered = data.replace(/\x1b\[[ABCD]/g, '');
+            return { consumed: filtered.length !== data.length, passthrough: filtered };
+        }
         // Check for paste start
         if (data.includes(ESC.PASTE_START)) {
             this.isPasting = true;
@@ -167,6 +228,21 @@ export class TerminalInput extends EventEmitter {
         }
         return { consumed: false, passthrough: data };
     }
+    /**
+     * Handle mouse events (button, x, y coordinates, action)
+     */
+    handleMouseEvent(button, _x, _y, _action) {
+        // Mouse wheel events: button 64 = scroll up, button 65 = scroll down
+        if (button === 64) {
+            // Scroll up (3 lines per wheel tick)
+            this.scrollUp(3);
+        }
+        else if (button === 65) {
+            // Scroll down (3 lines per wheel tick)
+            this.scrollDown(3);
+        }
+        // Ignore other mouse events (clicks, drags, etc.) for now
+    }
     /**
      * Handle a keypress event
      */
@@ -189,258 +265,36 @@ 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);
         }
     }
-    // Banner content to write on init (set via setBannerContent before initializeUnifiedUI)
-    bannerContent = null;
-    /**
-     * Set banner content to be written when unified UI initializes.
-     */
-    setBannerContent(content) {
-        this.bannerContent = content;
-    }
-    /**
-     * Initialize the unified UI system with BOTTOM PINNED chat box.
-     *
-     * Layout:
-     * 1. Clear screen
-     * 2. Write banner at top
-     * 3. Set content cursor row after banner
-     * 4. Render chat box at bottom (sets up scroll region)
-     */
-    initializeUnifiedUI() {
-        if (this.unifiedUIInitialized) {
-            return;
-        }
-        // Enter alternate screen buffer for complete terminal control
-        this.write(ESC.ALT_SCREEN_ENTER);
-        // Hide cursor during setup
-        this.write(ESC.HIDE);
-        // Clear screen and go home (in alternate buffer)
-        this.write(ESC.HOME);
-        this.write(ESC.CLEAR_SCREEN);
-        // Write banner at top
-        let bannerLines = 0;
-        if (this.bannerContent) {
-            const lines = this.bannerContent.split('\n');
-            bannerLines = lines.length + 2; // +2 for trailing \n\n
-            process.stdout.write(this.bannerContent + '\n\n');
-        }
-        // Set content cursor row after banner
-        this.contentCursorRow = bannerLines > 0 ? bannerLines + 1 : 1;
-        // Content ends at same row initially (no content yet)
-        this.contentEndRow = this.contentCursorRow - 1;
-        // Mark initialized
-        this.unifiedUIInitialized = true;
-        // Render floating chat box below content
-        this.renderFloatingInputArea();
-    }
-    /**
-     * Clear the input area at its tracked position.
-     * Returns true if something was cleared.
-     */
-    clearInputArea() {
-        if (this.inputAreaStartRow > 0 && this.flowModeRenderedLines > 0) {
-            for (let i = 0; i < this.flowModeRenderedLines; i++) {
-                this.write(ESC.TO(this.inputAreaStartRow + i, 1));
-                this.write(ESC.CLEAR_LINE);
-            }
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Reset input area tracking state.
-     */
-    resetInputAreaTracking() {
-        this.inputAreaStartRow = 0;
-        this.flowModeRenderedLines = 0;
-    }
-    /**
-     * Render chat box - FLOATING below content (no scroll regions).
-     * Chat box appears right after content and moves down as content grows.
-     * Content and banner scroll naturally off the top of the screen.
-     */
-    renderFloatingInputArea() {
-        const { cols, rows } = this.getSize();
-        const layout = this.buildInputLayout(cols);
-        // Clamp start row so the full UI stays visible, even when content exceeds viewport
-        const chatBoxHeight = layout.lines.length;
-        const chatBoxStartRow = Math.max(1, Math.min(this.contentEndRow + 1, rows - chatBoxHeight + 1));
-        // Save cursor position (content writer), render, then restore to avoid disrupting output
-        this.write(ESC.SAVE);
-        this.write(ESC.HIDE);
-        this.inputAreaStartRow = chatBoxStartRow;
-        let currentRow = chatBoxStartRow;
-        // Render each line with clearing to avoid ghosting
-        for (const line of layout.lines) {
-            this.write(ESC.TO(currentRow, 1));
-            this.write(ESC.CLEAR_LINE);
-            this.write(this.fitToWidth(line, cols));
-            currentRow++;
-        }
-        this.flowModeRenderedLines = chatBoxHeight;
-        this.lastRenderContent = this.buffer;
-        this.lastRenderCursor = this.cursor;
-        // Restore cursor for content writes; caret is rendered virtually inside the prompt
-        this.write(ESC.RESTORE);
-        this.write(ESC.SHOW);
-    }
     /**
      * Set the input mode
      *
-     * BOTTOM PINNED with SSE: Chat box stays at terminal bottom.
-     * Scroll region protects chat box, content scrolls above it.
+     * Content flows naturally - no scroll region pinning.
      */
     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();
-            // Ensure unified UI is initialized
-            if (!this.unifiedUIInitialized) {
-                this.initializeUnifiedUI();
-            }
-            // Start periodic render timer to keep chat box updated during streaming
-            // This updates contentEndRow from display and re-renders chat box
-            if (!this.streamingRenderTimer) {
-                this.streamingRenderTimer = setInterval(() => {
-                    // Update contentEndRow from display's line count
-                    if (this.displayRef?.getTotalWrittenLines) {
-                        const next = this.displayRef.getTotalWrittenLines();
-                        if (typeof next === 'number' && Number.isFinite(next) && next !== this.contentEndRow) {
-                            this.contentEndRow = next;
-                            this.renderDirty = true;
-                        }
-                    }
-                    // Re-render chat box at updated position
-                    if (this.renderDirty) {
-                        this.render();
-                    }
-                }, 120); // Update periodically without overwhelming output
-            }
-            // Initial render
+            this.resetStreamingRenderThrottle();
             this.renderDirty = true;
-            this.scheduleRender();
+            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;
-            // Final render with accurate position
-            this.renderDirty = true;
-            this.scheduleRender();
-        }
-    }
-    /**
-     * 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);
+            // Streaming ended - render the input area
+            this.resetStreamingRenderThrottle();
+            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;
-    }
-    /**
-     * Toggle thinking/reasoning mode
-     */
-    toggleThinking() {
-        this.thinkingEnabled = !this.thinkingEnabled;
-        this.emit('thinkingToggle', this.thinkingEnabled);
-        this.scheduleRender();
-    }
-    /**
-     * Get thinking enabled state
+     * Legacy method - no longer used (content flows naturally).
+     * @deprecated Use setContentRow instead
      */
-    isThinkingEnabled() {
-        return this.thinkingEnabled;
+    setPinnedHeaderLines(_count) {
+        // No-op: scroll region pinning removed
     }
     /**
      * Get current mode
@@ -473,17 +327,14 @@ export class TerminalInput extends EventEmitter {
     }
     /**
      * Clear the buffer
-     * @param skipRender - If true, don't trigger a re-render (used during submit flow)
      */
-    clear(skipRender = false) {
+    clear() {
         this.buffer = '';
         this.cursor = 0;
         this.historyIndex = -1;
         this.tempInput = '';
         this.pastePlaceholders = [];
-        if (!skipRender) {
-            this.scheduleRender();
-        }
+        this.scheduleRender();
     }
     /**
      * Get queued inputs
@@ -554,6 +405,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.
@@ -563,26 +445,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();
     }
     /**
@@ -595,33 +473,174 @@ export class TerminalInput extends EventEmitter {
         this.scheduleRender();
     }
     /**
-     * Render the input area.
-     * During streaming: renders at terminal bottom (with scroll region)
-     * After streaming: renders floating below content
+     * 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 floating input area at contentRow.
+     *
+     * The chat box "floats" - it renders right below the last streamed content.
+     * As content is added, contentRow advances, and the chat box moves down.
+     * No scroll regions - pure floating behavior.
      */
     render() {
         if (!this.canRender())
             return;
         if (this.isRendering)
             return;
+        const streamingActive = this.mode === 'streaming' || isStreamingMode();
+        // During streaming, throttle re-renders
+        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)
         if (shouldSkip) {
             return;
         }
-        // If write lock is held, defer render
         if (writeLock.isLocked()) {
             writeLock.safeWrite(() => this.render());
             return;
         }
+        this.renderPinnedChatBox();
+    }
+    /**
+     * Unified scroll region renderer.
+     * Chat box is ALWAYS pinned at the bottom of the terminal.
+     * Content scrolls in the region above the chat box.
+     */
+    renderPinnedChatBox() {
+        const { rows, cols } = this.getSize();
+        const maxWidth = Math.max(8, cols - 4);
+        const streamingActive = this.mode === 'streaming' || isStreamingMode();
+        // Wrap buffer into display lines
+        const { lines, cursorLine, cursorCol } = this.wrapBuffer(maxWidth);
+        const maxVisible = Math.max(1, Math.min(this.config.maxLines, rows - 3));
+        const displayLines = Math.min(lines.length, maxVisible);
+        const metaLines = this.buildMetaLines(cols - 2);
+        // 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;
+        // Chat box height
+        const chatBoxHeight = this.getChatBoxHeight();
+        // ALWAYS pin chat box at absolute bottom
+        const chatBoxStartRow = Math.max(1, rows - chatBoxHeight + 1);
+        const scrollEnd = chatBoxStartRow - 1;
+        writeLock.lock('terminalInput.renderPinned');
         this.isRendering = true;
-        writeLock.lock('terminalInput.render');
         try {
-            // Always render floating right after content (no wasted space)
-            this.renderFloatingInputArea();
+            this.write(ESC.SAVE);
+            this.write(ESC.HIDE);
+            // Temporarily reset scroll region to write chat box cleanly
+            if (this.scrollRegionActive) {
+                this.write(ESC.RESET_SCROLL);
+            }
+            // Clear the chat box area
+            for (let i = 0; i < chatBoxHeight; i++) {
+                const row = chatBoxStartRow + i;
+                if (row <= rows) {
+                    this.write(ESC.TO(row, 1));
+                    this.write(ESC.CLEAR_LINE);
+                }
+            }
+            let currentRow = chatBoxStartRow;
+            // Render scroll/status indicator on the left (Claude Code style)
+            const scrollIndicator = this.buildScrollIndicator();
+            // Meta/status header with scroll indicator
+            for (const metaLine of metaLines) {
+                this.write(ESC.TO(currentRow, 1));
+                this.write(metaLine);
+                currentRow += 1;
+            }
+            // Separator line with scroll status
+            this.write(ESC.TO(currentRow, 1));
+            const dividerLabel = scrollIndicator || undefined;
+            this.write(renderDivider(cols - 2, dividerLabel));
+            currentRow += 1;
+            // Render input lines
+            let finalRow = currentRow;
+            let finalCol = 3;
+            for (let i = 0; i < visibleLines.length; i++) {
+                const rowNum = currentRow + i;
+                this.write(ESC.TO(rowNum, 1));
+                const line = visibleLines[i] ?? '';
+                const isFirstLine = (startLine + i) === 0;
+                const isCursorLine = i === adjustedCursorLine;
+                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);
+                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 = rowNum;
+                    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);
+            }
+            // Mode controls line with all keyboard shortcuts
+            const controlRow = currentRow + visibleLines.length;
+            this.write(ESC.TO(controlRow, 1));
+            this.write(this.buildModeControls(cols));
+            // Restore scroll region and cursor
+            if (this.scrollRegionActive) {
+                // Restore scroll region
+                this.write(ESC.SET_SCROLL(1, scrollEnd));
+                // Restore cursor to where it was before rendering (preserves column position)
+                this.write(ESC.RESTORE);
+            }
+            else {
+                // Not streaming - position cursor in input box
+                this.write(ESC.RESTORE);
+                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;
+            }
         }
         finally {
             writeLock.unlock();
@@ -629,211 +648,169 @@ export class TerminalInput extends EventEmitter {
         }
     }
     /**
-     * Build the structured input layout according to the UI schema.
+     * Build compact meta line above the divider.
+     * Shows model/provider and key metrics in a single line.
      */
-    buildInputLayout(cols) {
-        const width = Math.min(cols, Math.max(DEFAULT_UI_CONFIG.banner.minWidth, Math.min(DEFAULT_UI_CONFIG.banner.maxWidth, cols)));
-        const lines = [];
-        lines.push(this.buildStatusBar(width));
-        lines.push(this.buildDivider(width));
-        lines.push(...this.buildInputLines(width));
-        const suggestions = this.buildSuggestions(width);
-        if (suggestions.length > 0) {
-            lines.push(...suggestions);
-        }
-        lines.push(this.buildDivider(width));
-        lines.push(this.buildModeControls(width));
-        return { lines };
-    }
-    buildDivider(width) {
-        const lineWidth = Math.max(8, Math.min(width, DEFAULT_UI_CONFIG.banner.maxWidth));
-        return `${UI_COLORS.dim}${DEFAULT_UI_CONFIG.divider.char.repeat(lineWidth)}${UI_COLORS.reset}`;
-    }
-    buildInputLines(width) {
-        const prompt = `${UI_COLORS.dim}${this.config.promptChar}${UI_COLORS.reset}`;
-        const continuation = `${UI_COLORS.dim}${this.config.continuationChar}${UI_COLORS.reset}`;
-        const promptWidth = this.visibleLength(prompt);
-        const textWidth = Math.max(1, width - promptWidth);
-        const { lines, cursorLine, cursorCol } = this.wrapBuffer(textWidth);
-        const maxLines = Math.max(1, this.config.maxLines);
-        const startLine = Math.max(0, lines.length - maxLines);
-        const visibleLines = lines.slice(startLine);
-        const caretLine = Math.max(0, cursorLine - startLine);
-        if (!visibleLines.length) {
-            visibleLines.push('');
-        }
-        return visibleLines.map((lineText, index) => {
-            const hasCursor = caretLine === index;
-            const cursorIndex = hasCursor ? cursorCol : null;
-            const prefix = index === 0 ? prompt : continuation;
-            return this.renderPromptLine(prefix, lineText, cursorIndex, textWidth, width);
-        });
-    }
-    buildSuggestions(width) {
-        if (!this.areSuggestionsVisible()) {
+    buildMetaLines(width) {
+        const leftParts = [];
+        const rightParts = [];
+        // Model/provider info (left side)
+        if (this.modelLabel) {
+            const modelText = this.providerLabel
+                ? `${this.modelLabel} @ ${this.providerLabel}`
+                : this.modelLabel;
+            leftParts.push({ text: modelText, tone: 'info' });
+        }
+        // Elapsed time (right side)
+        if (this.metaElapsedSeconds !== null) {
+            rightParts.push({ text: `⏱ ${this.formatElapsedLabel(this.metaElapsedSeconds)}`, tone: 'muted' });
+        }
+        // Token usage (right side)
+        if (this.metaTokensUsed !== null) {
+            const formattedUsed = this.formatTokenCount(this.metaTokensUsed);
+            const formattedLimit = this.metaTokenLimit ? `/${this.formatTokenCount(this.metaTokenLimit)}` : '';
+            rightParts.push({ text: `⊛ ${formattedUsed}${formattedLimit}`, tone: 'muted' });
+        }
+        // Context remaining warning
+        const tokensRemaining = this.computeTokensRemaining();
+        if (tokensRemaining !== null) {
+            const contextPct = this.contextUsage !== null ? `${100 - this.contextUsage}%` : '';
+            rightParts.push({ text: `↓${tokensRemaining} ${contextPct}`, tone: this.contextUsage && this.contextUsage > 80 ? 'warn' : 'muted' });
+        }
+        // Thinking indicator
+        if (this.metaThinkingMs !== null) {
+            leftParts.push({ text: formatThinking(this.metaThinkingMs, this.metaThinkingHasContent), tone: 'info' });
+        }
+        if (!leftParts.length && !rightParts.length) {
             return [];
         }
-        const lines = [];
-        const maxSuggestions = Math.min(3, this.filteredSuggestions.length);
-        lines.push(this.fitToWidth(`${UI_COLORS.dim}Suggestions${UI_COLORS.reset}`, width));
-        for (let i = 0; i < maxSuggestions; i++) {
-            const suggestion = this.filteredSuggestions[i];
-            if (!suggestion)
-                continue;
-            const isSelected = i === this.selectedSuggestionIndex;
-            const bullet = isSelected ? `${UI_COLORS.cyan}›${UI_COLORS.reset}` : `${UI_COLORS.dim}·${UI_COLORS.reset}`;
-            const body = `${suggestion.command} ${UI_COLORS.dim}${suggestion.description}${UI_COLORS.reset}`.trim();
-            lines.push(this.fitToWidth(`${bullet} ${body}`, width));
-        }
-        return lines;
-    }
-    renderPromptLine(prefix, text, cursorCol, textWidth, totalWidth) {
-        const visibleTextWidth = Math.max(1, textWidth);
-        const padded = (text ?? '').slice(0, visibleTextWidth).padEnd(visibleTextWidth, ' ');
-        let rendered = padded;
-        if (cursorCol !== null && cursorCol >= 0) {
-            const safeCol = Math.max(0, Math.min(cursorCol, Math.max(0, visibleTextWidth - 1)));
-            const before = padded.slice(0, safeCol);
-            const caretChar = padded[safeCol] ?? ' ';
-            const after = padded.slice(safeCol + 1);
-            rendered = `${before}${UI_COLORS.reverse}${caretChar || ' '}${UI_COLORS.reset}${after}`;
-        }
-        return this.fitToWidth(`${prefix}${rendered}`, totalWidth);
+        // Render left and right aligned
+        if (!rightParts.length || width < 50) {
+            return [renderStatusLine([...leftParts, ...rightParts], width)];
+        }
+        const leftWidth = Math.max(12, Math.floor(width * 0.5));
+        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}`];
     }
-    visibleLength(value) {
-        return value.replace(/\x1b\[[0-9;]*m/g, '').length;
+    /**
+     * Build mode controls line with all keyboard shortcuts and toggle states.
+     * Shows below the chat box input area.
+     */
+    buildModeControls(cols) {
+        const width = Math.max(8, cols - 2);
+        const parts = [];
+        // Streaming status
+        if (this.streamingLabel) {
+            parts.push({ text: `◐ ${this.streamingLabel}`, tone: 'info' });
+            parts.push({ text: `[Esc]stop`, tone: 'warn' });
+        }
+        // All keyboard shortcuts with toggle states
+        const editIcon = this.editMode === 'display-edits' ? '✓' : '?';
+        const editTone = this.editMode === 'display-edits' ? 'success' : 'muted';
+        parts.push({ text: `[⇧Tab]edits${editIcon}`, tone: editTone });
+        const verifyIcon = this.verificationEnabled ? '✓' : '○';
+        const verifyTone = this.verificationEnabled ? 'success' : 'muted';
+        parts.push({ text: `[⌥V]verify${verifyIcon}`, tone: verifyTone });
+        const autoIcon = this.autoContinueEnabled ? '✓' : '○';
+        const autoTone = this.autoContinueEnabled ? 'success' : 'muted';
+        parts.push({ text: `[⌥C]auto${autoIcon}`, tone: autoTone });
+        // Additional shortcuts
+        parts.push({ text: `[⌥X]clear`, tone: 'muted' });
+        parts.push({ text: `[PgUp/Dn]scroll`, tone: 'muted' });
+        // Context remaining (show when relevant)
+        const contextRemaining = this.computeContextRemaining();
+        if (contextRemaining !== null) {
+            const tone = contextRemaining <= 10 ? 'warn' : contextRemaining <= 30 ? 'info' : 'muted';
+            parts.push({ text: `${contextRemaining}%ctx`, tone });
+        }
+        return renderStatusLine(parts, width);
+    }
+    formatHotkey(hotkey) {
+        const normalized = hotkey.trim().toLowerCase();
+        if (!normalized)
+            return hotkey;
+        const parts = normalized.split('+').filter(Boolean);
+        // Use readable key names instead of symbols for better terminal compatibility
+        const map = {
+            shift: 'Shift',
+            sh: 'Shift',
+            alt: 'Alt',
+            option: 'Alt',
+            opt: 'Alt',
+            ctrl: 'Ctrl',
+            control: 'Ctrl',
+            cmd: 'Cmd',
+            meta: 'Cmd',
+            esc: 'Esc',
+            escape: 'Esc',
+            tab: 'Tab',
+            return: 'Enter',
+            enter: 'Enter',
+            pageup: 'PgUp',
+            pagedown: 'PgDn',
+            home: 'Home',
+            end: 'End',
+        };
+        const formatted = parts
+            .map((part) => {
+            const label = map[part];
+            if (label)
+                return label;
+            return part.length === 1 ? part.toUpperCase() : part.charAt(0).toUpperCase() + part.slice(1);
+        })
+            .join('+');
+        return `[${formatted}]`;
     }
-    fitToWidth(value, width) {
-        const target = Math.max(1, width);
-        const visible = this.visibleLength(value);
-        if (visible === target) {
-            return value;
+    computeContextRemaining() {
+        if (this.contextUsage === null) {
+            return null;
         }
-        if (visible < target) {
-            return `${value}${' '.repeat(target - visible)}`;
-        }
-        return this.truncateToWidth(value, target);
+        return Math.max(0, this.contextAutoCompactThreshold - this.contextUsage);
     }
-    truncateToWidth(value, width) {
-        const target = Math.max(0, width);
-        let visible = 0;
-        let result = '';
-        for (let i = 0; i < value.length && visible < target; i++) {
-            const char = value[i];
-            if (char === '\x1b') {
-                const match = value.slice(i).match(/^\x1b\[[0-9;]*[A-Za-z]/);
-                if (match) {
-                    result += match[0];
-                    i += match[0].length - 1;
-                    continue;
-                }
-            }
-            result += char;
-            visible += 1;
-        }
-        if (value.includes('\x1b') && !result.endsWith(UI_COLORS.reset)) {
-            result += UI_COLORS.reset;
+    computeTokensRemaining() {
+        if (this.metaTokensUsed === null || this.metaTokenLimit === null) {
+            return null;
         }
-        return result;
+        const remaining = Math.max(0, this.metaTokenLimit - this.metaTokensUsed);
+        return this.formatTokenCount(remaining);
     }
-    /**
-     * Build status bar showing streaming/ready status and key info.
-     * This is the TOP line above the input area - minimal Claude Code style.
-     */
-    buildStatusBar(width) {
-        const { green: GREEN, yellow: YELLOW, cyan: CYAN, dim: DIM, reset: R } = UI_COLORS;
-        const segments = [];
-        // Streaming status with elapsed time
-        if (this.mode === 'streaming' || this.streamingLabel) {
-            let label = this.streamingLabel || 'Streaming';
-            if (this.streamingStartTime) {
-                const elapsed = Math.max(0, Math.floor((Date.now() - this.streamingStartTime) / 1000));
-                const mins = Math.floor(elapsed / 60);
-                const secs = elapsed % 60;
-                const elapsedLabel = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
-                label = `${label} ${elapsedLabel}`;
-            }
-            segments.push(`${GREEN}● ${label}${R}`);
-        }
-        // Override/warning status
-        if (this.overrideStatusMessage) {
-            segments.push(`${YELLOW}⚠ ${this.overrideStatusMessage}${R}`);
-        }
-        // Primary status message
-        if (this.statusMessage) {
-            segments.push(`${CYAN}${this.statusMessage}${R}`);
-        }
-        // Queue + paste indicators
-        if (this.mode === 'streaming' && this.queue.length > 0) {
-            segments.push(`${CYAN}queued ${this.queue.length}${R}`);
+    formatElapsedLabel(seconds) {
+        if (seconds < 60) {
+            return `${seconds}s`;
         }
-        if (this.pastePlaceholders.length > 0) {
-            const totalLines = this.pastePlaceholders.reduce((sum, p) => sum + p.lineCount, 0);
-            segments.push(`${CYAN}📋 ${totalLines}L${R}`);
-        }
-        // Model info for quick glance
-        if (this.modelInfo) {
-            segments.push(`${DIM}${this.modelInfo}${R}`);
+        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}`;
         }
-        // Default hint when idle
-        if (!segments.length) {
-            segments.push(`${DIM}Type a message or / for commands${R}`);
+        if (value >= 1_000_000) {
+            return `${(value / 1_000_000).toFixed(1)}M`;
         }
-        // Multi-line indicator
-        if (this.buffer.includes('\n')) {
-            segments.push(`${DIM}${this.buffer.split('\n').length}L${R}`);
+        if (value >= 1_000) {
+            return `${(value / 1_000).toFixed(1)}k`;
         }
-        const joined = segments.join(`${DIM} · ${R}`);
-        return this.fitToWidth(joined, width);
+        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 = Math.max(10, 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
-        const rightParts = [];
-        if (this.contextUsage !== null) {
-            const rem = Math.max(0, 100 - this.contextUsage);
-            if (rem < 10)
-                rightParts.push(`${RED}⚠ ctx: ${rem}%${R}`);
-            else if (rem < 25)
-                rightParts.push(`${YELLOW}! ctx: ${rem}%${R}`);
-            else
-                rightParts.push(`${DIM}ctx: ${rem}%${R}`);
-        }
-        if (this.modelInfo) {
-            rightParts.push(`${DIM}${this.modelInfo}${R}`);
-        }
-        const rightPart = rightParts.join(`${DIM} · ${R}`);
-        const leftLen = this.visibleLength(leftPart);
-        const rightLen = this.visibleLength(rightPart);
-        if (rightPart && leftLen + rightLen < maxWidth - 2) {
-            return `${leftPart}${' '.repeat(Math.max(1, maxWidth - leftLen - rightLen))}${rightPart}`;
-        }
-        const combined = rightPart ? `${leftPart}${DIM} · ${R}${rightPart}` : leftPart;
-        return this.fitToWidth(combined, maxWidth);
+    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
@@ -856,65 +833,224 @@ export class TerminalInput extends EventEmitter {
     handleResize() {
         this.lastRenderContent = '';
         this.lastRenderCursor = -1;
-        this.scheduleRender();
+        this.resetStreamingRenderThrottle();
+        // If in scrollback mode, re-render the scrollback view with new dimensions
+        if (this.isInScrollbackMode) {
+            this.renderScrollbackView();
+        }
+        else {
+            this.scheduleRender();
+        }
     }
-    // Track current content row for writing
-    contentCursorRow = 1;
-    /**
-     * Register with display's output interceptor.
-     * Clears chat box before writes, re-renders after with updated position.
-     */
-    registerOutputInterceptor(display) {
-        if (this.outputInterceptorCleanup) {
-            this.outputInterceptorCleanup();
-        }
-        // Store display reference for streaming timer to use
-        this.displayRef = display;
-        // Clear chat box before writes to make room for content
-        // Re-render is done via periodic timer during streaming, or setContentEndRow after
-        this.outputInterceptorCleanup = display.registerOutputInterceptor({
-            beforeWrite: () => {
-                // Clear chat box to make room for content
-                this.clearInputArea();
-            },
-            afterWrite: () => {
-                if (this.mode !== 'streaming') {
-                    if (this.displayRef?.getTotalWrittenLines) {
-                        const next = this.displayRef.getTotalWrittenLines();
-                        if (typeof next === 'number' && Number.isFinite(next)) {
-                            this.contentEndRow = next;
-                        }
-                    }
-                    this.renderDirty = true;
-                    queueMicrotask(() => this.render());
-                }
-            },
-        });
+    /**
+     * Enter streaming mode with scroll region.
+     * Sets up terminal scroll region to exclude chat box.
+     */
+    enterStreamingScrollRegion() {
+        const { rows } = this.getSize();
+        const chatBoxHeight = this.getChatBoxHeight();
+        const scrollEnd = Math.max(1, rows - chatBoxHeight);
+        writeLock.lock('enterStreamingScrollRegion');
+        try {
+            // Set scroll region for content area (above chat box)
+            this.write(ESC.SET_SCROLL(1, scrollEnd));
+            // Position cursor at current content row
+            this.write(ESC.TO(Math.min(this.contentRow, scrollEnd), 1));
+            this.scrollRegionActive = true;
+            this.setStatusMessage('esc to interrupt');
+        }
+        finally {
+            writeLock.unlock();
+        }
+        // Render pinned chat box at bottom
+        this.forceRender();
     }
     /**
-     * Dispose and clean up
+     * Exit streaming mode and restore normal operation.
      */
-    dispose() {
-        if (this.disposed)
+    exitStreamingScrollRegion() {
+        writeLock.lock('exitStreamingScrollRegion');
+        try {
+            // Reset scroll region to full terminal
+            this.write(ESC.RESET_SCROLL);
+            this.scrollRegionActive = false;
+            this.setStatusMessage('Ready for prompts');
+        }
+        finally {
+            writeLock.unlock();
+        }
+        // Final render
+        this.forceRender();
+    }
+    /**
+     * Render chat box at bottom - now uses unified renderer.
+     * @deprecated Use renderPinnedChatBox() directly via render()/forceRender()
+     */
+    renderChatBoxAtBottom() {
+        this.renderPinnedChatBox();
+    }
+    /**
+     * Stream content within the scroll region.
+     * Content is written directly and scrolls naturally.
+     */
+    streamContent(content) {
+        if (!content)
             return;
-        // Clean up streaming render timer
-        if (this.streamingRenderTimer) {
-            clearInterval(this.streamingRenderTimer);
-            this.streamingRenderTimer = null;
+        // Capture content in scrollback buffer
+        this.addToScrollback(content);
+        writeLock.lock('streamContent');
+        try {
+            // Write content - scroll region handles scrolling
+            this.write(content);
+            // Track newlines
+            const newlines = (content.match(/\n/g) || []).length;
+            this.contentRow += newlines;
         }
-        // Clean up output interceptor
-        if (this.outputInterceptorCleanup) {
-            this.outputInterceptorCleanup();
-            this.outputInterceptorCleanup = undefined;
+        finally {
+            writeLock.unlock();
         }
-        // Reset scroll region
-        this.write('\x1b[r');
-        // Exit alternate screen buffer (restores main terminal)
-        if (this.unifiedUIInitialized) {
-            this.write(ESC.ALT_SCREEN_EXIT);
+        // Throttle chat box updates during streaming
+        this.scheduleStreamingRender(200);
+    }
+    /**
+     * Enable scroll region (no-op in floating mode).
+     */
+    enableScrollRegion() {
+        // No-op: using pure floating approach
+    }
+    /**
+     * Disable scroll region (no-op in floating mode).
+     */
+    disableScrollRegion() {
+        // No-op: using pure floating approach
+    }
+    /**
+     * Calculate chat box height.
+     */
+    getChatBoxHeight() {
+        return 5; // Fixed: divider + input + status + buffer
+    }
+    /**
+     * @deprecated Use streamContent() instead
+     * Register with display's output interceptor - kept for backwards compatibility
+     */
+    registerOutputInterceptor(_display) {
+        // No-op: Use streamContent() for cleaner floating chat box behavior
+    }
+    /**
+     * Write content above the floating chat box.
+     * Works both during streaming and when idle.
+     */
+    writeToScrollRegion(content) {
+        if (!content)
+            return;
+        // Capture content in scrollback buffer
+        this.addToScrollback(content);
+        writeLock.lock('writeToScrollRegion');
+        try {
+            // Position cursor at content row and write
+            this.write(ESC.TO(this.contentRow, 1));
+            this.write(content);
+            // Track newlines
+            const newlines = (content.match(/\n/g) || []).length;
+            this.contentRow += newlines;
+        }
+        finally {
+            writeLock.unlock();
+        }
+        // Re-render chat box below new content (only when not streaming)
+        if (!this.scrollRegionActive) {
+            this.forceRender();
+        }
+    }
+    /**
+     * Enter alternate screen buffer and clear it.
+     * This gives us full control over the terminal without affecting user's history.
+     */
+    enterAlternateScreen() {
+        writeLock.lock('enterAltScreen');
+        try {
+            this.write(ESC.ENTER_ALT_SCREEN);
+            this.write(ESC.HOME);
+            this.write(ESC.CLEAR_SCREEN);
+            this.contentRow = 1;
+            this.alternateScreenActive = true;
+        }
+        finally {
+            writeLock.unlock();
+        }
+    }
+    /**
+     * Exit alternate screen buffer.
+     * Restores the user's previous terminal content.
+     */
+    exitAlternateScreen() {
+        writeLock.lock('exitAltScreen');
+        try {
+            this.write(ESC.EXIT_ALT_SCREEN);
+            this.alternateScreenActive = false;
+        }
+        finally {
+            writeLock.unlock();
+        }
+    }
+    /**
+     * Check if alternate screen buffer is currently active.
+     */
+    isAlternateScreenActive() {
+        return this.alternateScreenActive;
+    }
+    /**
+     * Get a snapshot of the scrollback buffer (for display on exit).
+     */
+    getScrollbackSnapshot() {
+        return [...this.scrollbackBuffer];
+    }
+    /**
+     * Clear the entire terminal screen and reset content position.
+     * This removes all content including the launching command.
+     */
+    clearScreen() {
+        writeLock.lock('clearScreen');
+        try {
+            this.write(ESC.HOME);
+            this.write(ESC.CLEAR_SCREEN);
+            this.contentRow = 1;
         }
+        finally {
+            writeLock.unlock();
+        }
+    }
+    /**
+     * Reset content position to row 1.
+     * Does NOT clear the terminal - content starts from current position.
+     */
+    resetContentPosition() {
+        this.contentRow = 1;
+    }
+    /**
+     * Set the content row explicitly (used after banner is written).
+     * This tells the input where content should start flowing from.
+     */
+    setContentRow(row) {
+        this.contentRow = Math.max(1, row);
+    }
+    /**
+     * Get the current content row position.
+     */
+    getContentRow() {
+        return this.contentRow;
+    }
+    /**
+     * Dispose and clean up
+     */
+    dispose() {
+        if (this.disposed)
+            return;
         this.disposed = true;
         this.enabled = false;
+        this.disableScrollRegion();
+        this.resetStreamingRenderThrottle();
         this.disableBracketedPaste();
         this.buffer = '';
         this.queue = [];
@@ -956,8 +1092,13 @@ export class TerminalInput extends EventEmitter {
                 break;
         }
     }
+    /**
+     * Handle Alt/Meta key combinations for mode toggles and navigation.
+     * All major erosolar-cli features accessible via keyboard shortcuts.
+     */
     handleMetaKey(key) {
         switch (key.name) {
+            // === CURSOR MOVEMENT ===
             case 'left':
             case 'b':
                 this.moveCursorWordLeft();
@@ -972,14 +1113,96 @@ export class TerminalInput extends EventEmitter {
             case 'return':
                 this.insertNewline();
                 break;
+            // === MODE TOGGLES ===
             case 'v':
+                // Alt+V: Toggle verification mode (auto-tests after edits)
                 this.emit('toggleVerify');
                 break;
             case 'c':
+                // Alt+C: Toggle auto-continue mode
                 this.emit('toggleAutoContinue');
                 break;
+            case 't':
+                // Alt+T: Toggle/cycle thinking mode
+                this.emit('toggleThinking');
+                break;
+            case 'e':
+                // Alt+E: Toggle edit permission mode (ask/auto)
+                this.toggleEditMode();
+                this.emit('toggleEditMode');
+                break;
+            case 'x':
+                // Alt+X: Clear/compact context
+                this.emit('clearContext');
+                break;
+            // === SCROLLBACK NAVIGATION ===
+            case 's':
+                // Alt+S: Toggle scrollback mode
+                this.toggleScrollbackMode();
+                break;
+            case 'up':
+                // Alt+Up: Quick scroll up into history
+                if (!this.isInScrollbackMode) {
+                    this.scrollUp(10);
+                }
+                else {
+                    this.scrollUp(1);
+                }
+                break;
+            case 'down':
+                // Alt+Down: Quick scroll down
+                if (this.isInScrollbackMode) {
+                    this.scrollDown(1);
+                }
+                break;
+            case 'pageup':
+                // Alt+PageUp: Page up in scrollback
+                this.scrollUp(this.getPageSize());
+                break;
+            case 'pagedown':
+                // Alt+PageDown: Page down in scrollback
+                this.scrollDown(this.getPageSize());
+                break;
+            case 'home':
+                // Alt+Home: Jump to top of scrollback
+                this.scrollToTop();
+                break;
+            case 'end':
+                // Alt+End: Jump to bottom (live)
+                this.scrollToBottom();
+                break;
         }
     }
+    /**
+     * Get page size for scrollback navigation.
+     */
+    getPageSize() {
+        const { rows } = this.getSize();
+        const chatBoxHeight = this.getChatBoxHeight();
+        return Math.max(5, rows - chatBoxHeight - 2);
+    }
+    /**
+     * Build scroll indicator for the divider line (Claude Code style).
+     * Shows scroll position when in scrollback mode, or history size hint when idle.
+     */
+    buildScrollIndicator() {
+        const bufferSize = this.scrollbackBuffer.length;
+        // In scrollback mode - show position
+        if (this.isInScrollbackMode && this.scrollbackOffset > 0) {
+            const { rows } = this.getSize();
+            const chatBoxHeight = this.getChatBoxHeight();
+            const viewportHeight = Math.max(1, rows - chatBoxHeight);
+            const currentPos = Math.max(0, bufferSize - this.scrollbackOffset - viewportHeight);
+            const pct = bufferSize > 0 ? Math.round((currentPos / bufferSize) * 100) : 0;
+            return `↑${this.scrollbackOffset} · ${pct}% · PgUp/Dn`;
+        }
+        // Not in scrollback - show hint if there's history
+        if (bufferSize > 20) {
+            const sizeLabel = bufferSize >= 1000 ? `${Math.floor(bufferSize / 1000)}k` : `${bufferSize}`;
+            return `↕${sizeLabel}L · PgUp`;
+        }
+        return null;
+    }
     handleSpecialKey(_str, key) {
         switch (key.name) {
             case 'return':
@@ -1003,38 +1226,53 @@ export class TerminalInput extends EventEmitter {
                 this.moveCursorRight();
                 return true;
             case 'up':
-                this.handleUp();
+                // Ctrl+Shift+Up or Shift+Up: Quick scroll up in scrollback
+                if ((key.ctrl && key.shift) || key.shift) {
+                    this.scrollUp(5);
+                }
+                else {
+                    this.handleUp();
+                }
                 return true;
             case 'down':
-                this.handleDown();
+                // Ctrl+Shift+Down or Shift+Down: Quick scroll down in scrollback
+                if ((key.ctrl && key.shift) || key.shift) {
+                    this.scrollDown(5);
+                }
+                else {
+                    this.handleDown();
+                }
                 return true;
             case 'home':
-                this.moveCursorToLineStart();
+                // Ctrl+Home or in scrollback mode: scroll to top
+                if (key.ctrl || this.isInScrollbackMode) {
+                    this.scrollToTop();
+                }
+                else {
+                    this.moveCursorToLineStart();
+                }
                 return true;
             case 'end':
-                this.moveCursorToLineEnd();
+                // Ctrl+End or in scrollback mode: scroll to bottom (live mode)
+                if (key.ctrl || this.isInScrollbackMode) {
+                    this.scrollToBottom();
+                }
+                else {
+                    this.moveCursorToLineEnd();
+                }
+                return true;
+            case 'pageup':
+                this.scrollUp(20); // Scroll up by 20 lines
+                return true;
+            case 'pagedown':
+                this.scrollDown(20); // Scroll down by 20 lines
                 return true;
             case 'tab':
                 if (key.shift) {
                     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;
@@ -1052,7 +1290,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() {
@@ -1077,7 +1314,6 @@ export class TerminalInput extends EventEmitter {
             this.cursor = Math.max(0, this.cursor - 1);
         }
         this.emit('change', this.buffer);
-        this.updateSuggestions();
         this.scheduleRender();
     }
     deleteForward() {
@@ -1305,13 +1541,12 @@ export class TerminalInput extends EventEmitter {
                 timestamp: Date.now(),
             });
             this.emit('queue', text);
-            this.clear(); // Clear immediately for queued input, re-render to update queue display
+            this.clear(); // Clear immediately for queued input
         }
         else {
-            // In idle mode, clear the input WITHOUT rendering.
-            // The caller will display the user message and start streaming.
-            // We'll render the input area again after streaming ends.
-            this.clear(true); // Skip render - streaming will handle display
+            // In idle mode, clear the input first, then emit submit.
+            // The prompt will be logged as a visible message by the caller.
+            this.clear();
             this.emit('submit', text);
         }
     }
@@ -1328,7 +1563,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 {
@@ -1392,6 +1629,236 @@ export class TerminalInput extends EventEmitter {
         return { lines, cursorLine, cursorCol };
     }
     // ===========================================================================
+    // SCROLLBACK BUFFER
+    // ===========================================================================
+    /**
+     * Add content to the scrollback buffer for history retention
+     */
+    addToScrollback(content) {
+        if (!content)
+            return;
+        // Split content into lines and add to buffer
+        const lines = content.split('\n');
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            if (line !== undefined) {
+                // Only add non-empty lines or preserve newlines between content
+                if (i < lines.length - 1 || line.length > 0) {
+                    this.scrollbackBuffer.push(line);
+                }
+            }
+        }
+        // Trim buffer if it exceeds max size
+        while (this.scrollbackBuffer.length > this.maxScrollbackLines) {
+            this.scrollbackBuffer.shift();
+        }
+        // If we're in live mode (not scrolled up), keep offset at 0
+        if (this.scrollbackOffset === 0) {
+            this.isInScrollbackMode = false;
+        }
+    }
+    /**
+     * Scroll up by a number of lines (PageUp)
+     */
+    scrollUp(lines = 10) {
+        const { rows } = this.getSize();
+        const chatBoxHeight = this.getChatBoxHeight();
+        const visibleLines = Math.max(1, rows - chatBoxHeight);
+        // Calculate max scroll offset
+        const maxOffset = Math.max(0, this.scrollbackBuffer.length - visibleLines);
+        this.scrollbackOffset = Math.min(this.scrollbackOffset + lines, maxOffset);
+        this.isInScrollbackMode = this.scrollbackOffset > 0;
+        if (this.isInScrollbackMode) {
+            this.renderScrollbackView();
+        }
+    }
+    /**
+     * Scroll down by a number of lines (PageDown)
+     */
+    scrollDown(lines = 10) {
+        this.scrollbackOffset = Math.max(0, this.scrollbackOffset - lines);
+        this.isInScrollbackMode = this.scrollbackOffset > 0;
+        if (this.isInScrollbackMode) {
+            this.renderScrollbackView();
+        }
+        else {
+            // Returned to live mode - force re-render
+            this.forceRender();
+        }
+    }
+    /**
+     * Jump to the top of scrollback buffer
+     */
+    scrollToTop() {
+        const { rows } = this.getSize();
+        const chatBoxHeight = this.getChatBoxHeight();
+        const visibleLines = Math.max(1, rows - chatBoxHeight);
+        const maxOffset = Math.max(0, this.scrollbackBuffer.length - visibleLines);
+        this.scrollbackOffset = maxOffset;
+        this.isInScrollbackMode = true;
+        this.renderScrollbackView();
+    }
+    /**
+     * Jump to the bottom (live mode)
+     */
+    scrollToBottom() {
+        this.scrollbackOffset = 0;
+        this.isInScrollbackMode = false;
+        this.forceRender();
+    }
+    /**
+     * Toggle scrollback mode on/off (Alt+S hotkey)
+     */
+    toggleScrollbackMode() {
+        if (this.isInScrollbackMode) {
+            this.scrollToBottom();
+        }
+        else if (this.scrollbackBuffer.length > 0) {
+            this.scrollUp(20);
+        }
+    }
+    /**
+     * Render the scrollback buffer view with enhanced visuals
+     * Features:
+     * - Visual scroll position indicator
+     * - Progress bar showing position in history
+     * - Keyboard navigation hints
+     * - Animated indicators
+     */
+    renderScrollbackView() {
+        const { rows, cols } = this.getSize();
+        const chatBoxHeight = this.getChatBoxHeight();
+        const contentHeight = Math.max(1, rows - chatBoxHeight);
+        writeLock.lock('renderScrollback');
+        try {
+            this.write(ESC.SAVE);
+            this.write(ESC.HIDE);
+            // Clear content area
+            for (let i = 1; i <= contentHeight; i++) {
+                this.write(ESC.TO(i, 1));
+                this.write(ESC.CLEAR_LINE);
+            }
+            // Calculate which lines to show
+            const totalLines = this.scrollbackBuffer.length;
+            const startIdx = Math.max(0, totalLines - this.scrollbackOffset - contentHeight);
+            const endIdx = Math.max(0, totalLines - this.scrollbackOffset);
+            const visibleLines = this.scrollbackBuffer.slice(startIdx, endIdx);
+            // Build header bar with navigation hints
+            const headerInfo = this.buildScrollbackHeader(cols, totalLines, startIdx, endIdx);
+            this.write(ESC.TO(1, 1));
+            this.write(headerInfo);
+            // Render visible lines with line numbers and visual guides
+            const lineNumWidth = String(totalLines).length + 1;
+            const contentStart = 2; // Start after header
+            for (let i = 0; i < Math.min(visibleLines.length, contentHeight - 1); i++) {
+                const line = visibleLines[i] ?? '';
+                const lineNum = startIdx + i + 1;
+                this.write(ESC.TO(contentStart + i, 1));
+                // Line number gutter
+                const numStr = String(lineNum).padStart(lineNumWidth, ' ');
+                this.write(theme.ui.muted(`${numStr} │ `));
+                // Content with truncation
+                const gutterWidth = lineNumWidth + 4;
+                const maxLen = cols - gutterWidth - 2;
+                const displayLine = line.length > maxLen ? line.slice(0, maxLen - 3) + '...' : line;
+                this.write(displayLine);
+            }
+            // Add visual scroll track on the right edge
+            this.renderScrollTrack(cols, contentHeight, totalLines, startIdx, endIdx);
+            this.write(ESC.RESTORE);
+            this.write(ESC.SHOW);
+        }
+        finally {
+            writeLock.unlock();
+        }
+        // Re-render chat box
+        this.forceRender();
+    }
+    /**
+     * Build scrollback header with navigation hints
+     */
+    buildScrollbackHeader(cols, totalLines, startIdx, endIdx) {
+        const percentage = Math.round((endIdx / totalLines) * 100);
+        // Animated scroll indicator
+        const scrollFrames = ['◆', '◇', '◆', '◈'];
+        this.scrollIndicatorFrame = (this.scrollIndicatorFrame + 1) % scrollFrames.length;
+        const indicator = scrollFrames[this.scrollIndicatorFrame];
+        // Build header parts
+        const leftPart = theme.info(`${indicator} SCROLLBACK`) +
+            theme.ui.muted(` [${startIdx + 1}-${endIdx} of ${totalLines}]`);
+        const progressBar = this.buildProgressBar(percentage, 15);
+        const rightPart = progressBar +
+            theme.ui.muted(` ${percentage}%`) +
+            theme.ui.muted(' │ ') +
+            theme.primary('PgUp') + theme.ui.muted('/') + theme.primary('PgDn') +
+            theme.ui.muted(' scroll · ') +
+            theme.primary('End') + theme.ui.muted(' exit');
+        const leftLen = this.visibleLength(leftPart);
+        const rightLen = this.visibleLength(rightPart);
+        const padding = Math.max(1, cols - leftLen - rightLen - 2);
+        return `${leftPart}${' '.repeat(padding)}${rightPart}`;
+    }
+    /**
+     * Render visual scroll track on the right side
+     */
+    renderScrollTrack(cols, contentHeight, totalLines, startIdx, endIdx) {
+        if (totalLines <= contentHeight || cols < 40)
+            return;
+        const trackHeight = contentHeight - 1; // Exclude header
+        const viewportRatio = (endIdx - startIdx) / totalLines;
+        const positionRatio = startIdx / Math.max(1, totalLines - (endIdx - startIdx));
+        // Calculate thumb size and position
+        const thumbSize = Math.max(1, Math.round(viewportRatio * trackHeight));
+        const thumbStart = Math.round(positionRatio * (trackHeight - thumbSize));
+        // Render track on right edge
+        for (let i = 0; i < trackHeight; i++) {
+            const row = 2 + i; // Start after header
+            this.write(ESC.TO(row, cols));
+            if (i >= thumbStart && i < thumbStart + thumbSize) {
+                // Thumb (viewport indicator)
+                this.write(theme.accent('█'));
+            }
+            else {
+                // Track background
+                this.write(theme.ui.muted('░'));
+            }
+        }
+    }
+    /**
+     * Build a visual progress bar
+     */
+    buildProgressBar(percentage, width = 10) {
+        const filled = Math.round((percentage / 100) * width);
+        const empty = width - filled;
+        const bar = theme.accent('█'.repeat(filled)) +
+            theme.ui.muted('░'.repeat(empty));
+        return `${theme.ui.muted('[')}${bar}${theme.ui.muted(']')}`;
+    }
+    /**
+     * Get scrollback buffer content (for persistence)
+     */
+    getScrollbackBuffer() {
+        return [...this.scrollbackBuffer];
+    }
+    /**
+     * Load scrollback buffer (for restoration)
+     */
+    loadScrollbackBuffer(lines) {
+        this.scrollbackBuffer = [...lines];
+        // Trim if necessary
+        while (this.scrollbackBuffer.length > this.maxScrollbackLines) {
+            this.scrollbackBuffer.shift();
+        }
+    }
+    /**
+     * Clear scrollback buffer
+     */
+    clearScrollbackBuffer() {
+        this.scrollbackBuffer = [];
+        this.scrollbackOffset = 0;
+        this.isInScrollbackMode = false;
+    }
+    // ===========================================================================
     // UTILITIES
     // ===========================================================================
     getComposedLength() {
@@ -1464,17 +1931,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) {
@@ -1482,67 +1951,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);
@@ -1550,7 +1973,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;
         }
@@ -1577,6 +2004,28 @@ 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;
+            // During streaming, only update chat box (not full render)
+            if (this.scrollRegionActive) {
+                this.renderChatBoxAtBottom();
+            }
+            else {
+                this.render();
+            }
+        }, wait);
+    }
+    resetStreamingRenderThrottle() {
+        if (this.streamingRenderTimer) {
+            clearTimeout(this.streamingRenderTimer);
+            this.streamingRenderTimer = null;
+        }
+        this.lastStreamingRender = 0;
+    }
     scheduleRender() {
         if (!this.canRender())
             return;