erosolar-cli 1.7.231 → 1.7.233

package/dist/shell/terminalInput.js

@@ -3,14 +3,13 @@
  *
  * 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 } from '../core/multilinePasteHandler.js';
+import { isMultilinePaste, generatePasteSummary } from '../core/multilinePasteHandler.js';
 import { writeLock } from '../ui/writeLock.js';
 import { renderDivider, renderStatusLine } from '../ui/unified/layout.js';
 import { isStreamingMode } from '../ui/globalWriteLock.js';
@@ -68,9 +67,6 @@ 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
     reservedLines = 2;
     scrollRegionActive = false;
     lastRenderContent = '';
@@ -78,6 +74,13 @@ export class TerminalInput extends EventEmitter {
     renderDirty = false;
     isRendering = false;
     pinnedTopRows = 0;
+    inlineAnchorRow = null;
+    inlineLayout = false;
+    anchorProvider = null;
+    // Flow mode: render input immediately after content instead of at absolute bottom
+    flowMode = true;
+    // Track how many lines we rendered in flow mode for proper re-rendering
+    flowModeRenderedLines = 0;
     // Lifecycle
     disposed = false;
     enabled = true;
@@ -92,6 +95,10 @@ export class TerminalInput extends EventEmitter {
     // Streaming render throttle
     lastStreamingRender = 0;
     streamingRenderInterval = 250; // ms between renders during streaming
+    // Metrics tracking for status bar
+    streamingStartTime = null;
+    tokensUsed = 0;
+    thinkingEnabled = true;
     constructor(writeStream = process.stdout, config = {}) {
         super();
         this.out = writeStream;
@@ -179,6 +186,11 @@ 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);
@@ -187,24 +199,75 @@ export class TerminalInput extends EventEmitter {
     /**
      * Set the input mode
      *
-     * Streaming keeps the scroll region active so the prompt/status stay pinned
-     * below the streaming output. When streaming ends, we refresh the input area.
+     * 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).
      */
     setMode(mode) {
         const prevMode = this.mode;
         this.mode = mode;
         if (mode === 'streaming' && prevMode !== 'streaming') {
-            // Keep scroll region active so status/prompt stay pinned while streaming
-            this.enableScrollRegion();
+            // Track streaming start time for elapsed display
+            this.streamingStartTime = Date.now();
+            // Disable scroll region - let content flow naturally from current position
+            // This means content appears right after where cursor currently is
+            // (which should be after the banner)
+            this.disableScrollRegion();
+            // Reset flow mode rendered lines - content will flow naturally during streaming
+            this.flowModeRenderedLines = 0;
+            // Hide cursor during streaming to avoid racing chars
+            this.write(ESC.HIDE);
             this.renderDirty = true;
-            this.render();
         }
         else if (mode !== 'streaming' && prevMode === 'streaming') {
-            // Streaming ended - render the input area
-            this.enableScrollRegion();
+            // Reset streaming time
+            this.streamingStartTime = null;
+            // Show cursor again
+            this.write(ESC.SHOW);
+            // Add a newline to separate content from input area
+            this.write('\n');
+            // Re-render the input area below the content
             this.forceRender();
         }
     }
+    /**
+     * 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;
+    }
+    /**
+     * 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).
      */
@@ -217,6 +280,42 @@ export class TerminalInput extends EventEmitter {
             }
         }
     }
+    /**
+     * 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
      */
@@ -326,29 +425,6 @@ 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;
-        if (this.metaElapsedSeconds === nextElapsed &&
-            this.metaTokensUsed === nextTokens &&
-            this.metaTokenLimit === nextLimit) {
-            return;
-        }
-        this.metaElapsedSeconds = nextElapsed;
-        this.metaTokensUsed = nextTokens;
-        this.metaTokenLimit = nextLimit;
-        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.
@@ -417,100 +493,18 @@ export class TerminalInput extends EventEmitter {
         // Use write lock during render to prevent interleaved output
         writeLock.lock('terminalInput.render');
         try {
-            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 metaLine = this.buildMetaLine(cols - 2);
-            // Reserved lines: optional meta(1) + separator(1) + input lines + controls(1)
-            this.updateReservedLines(displayLines + 2 + (metaLine ? 1 : 0));
-            // 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);
+            // No scroll regions - we render the input area directly at the bottom
+            // Content flows naturally above it
+            if (this.scrollRegionActive) {
+                this.disableScrollRegion();
             }
-            const visibleLines = lines.slice(startLine, startLine + displayLines);
-            const adjustedCursorLine = cursorLine - startLine;
-            // Render
-            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)
-            if (metaLine) {
-                this.write(ESC.TO(currentRow, 1));
-                this.write(ESC.CLEAR_LINE);
-                this.write(metaLine);
-                currentRow += 1;
+            // Use flow mode rendering (inline after content) for better UX
+            if (this.flowMode) {
+                this.renderFlowMode();
             }
-            // Separator line
-            this.write(ESC.TO(currentRow, 1));
-            this.write(ESC.CLEAR_LINE);
-            const divider = renderDivider(cols - 2);
-            this.write(divider);
-            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));
-                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);
-                    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 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);
+            else {
+                this.renderBottomPinned();
             }
-            // 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
-            this.write(ESC.TO(finalRow, Math.min(finalCol, cols)));
-            this.write(ESC.SHOW);
-            // Update state
-            this.lastRenderContent = this.buffer;
-            this.lastRenderCursor = this.cursor;
         }
         finally {
             writeLock.unlock();
@@ -518,83 +512,278 @@ export class TerminalInput extends EventEmitter {
         }
     }
     /**
-     * Build a compact meta line above the divider (elapsed, context usage, queue size).
+     * Render in flow mode - input area renders inline at current cursor position
+     * This creates a unified look where input flows naturally with content.
+     *
+     * Uses terminal save/restore cursor position for more stable re-renders.
+     * Layout: [status] [divider] [input...] [divider] [controls]
      */
-    buildMetaLine(width) {
-        const parts = [];
-        if (this.metaElapsedSeconds !== null) {
-            parts.push({ text: `elapsed ${this.metaElapsedSeconds}s`, tone: 'muted' });
-        }
-        if (this.metaTokensUsed !== null) {
-            const limitText = this.metaTokenLimit ? `/${this.metaTokenLimit}` : '';
-            parts.push({ text: `tokens ${this.metaTokensUsed}${limitText}`, tone: 'muted' });
-        }
-        if (this.contextUsage !== null) {
-            const tone = this.contextUsage >= 75 ? 'warn' : 'muted';
-            parts.push({ text: `used ${this.contextUsage}%`, tone });
-        }
-        if (this.queue.length > 0) {
-            parts.push({ text: `queued ${this.queue.length}`, tone: 'info' });
+    renderFlowMode() {
+        const { cols } = this.getSize();
+        const maxWidth = Math.max(8, cols - 4);
+        // Wrap buffer into display lines
+        const { lines, cursorLine, cursorCol } = this.wrapBuffer(maxWidth);
+        const maxVisible = Math.max(1, Math.min(this.config.maxLines, 10));
+        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;
+        // Total lines: status(1) + topDiv(1) + input(N) + bottomDiv(1) + controls(1)
+        const totalLines = visibleLines.length + 4;
+        this.write(ESC.HIDE);
+        this.write(ESC.RESET);
+        // If we've previously rendered, go back to the start of our rendered area
+        if (this.flowModeRenderedLines > 0) {
+            // Move cursor up to where our content started
+            this.write(`\x1b[${this.flowModeRenderedLines}A`);
+            this.write('\r'); // Go to column 1
+        }
+        // Save this position as our anchor point
+        this.write('\x1b7'); // Save cursor position (DEC)
+        const divider = renderDivider(cols - 2);
+        // Status bar
+        this.write(ESC.CLEAR_LINE);
+        this.write(this.buildStatusBar(cols));
+        this.write('\r\n');
+        // Top divider
+        this.write(ESC.CLEAR_LINE);
+        this.write(divider);
+        this.write('\r\n');
+        // Input lines
+        let cursorLineOffset = 2; // After status and top divider
+        for (let i = 0; i < visibleLines.length; i++) {
+            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) {
+                cursorLineOffset = 2 + i; // Position within our rendered block
+            }
+            this.write(line);
+            // Pad to edge for clean look
+            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);
+            this.write('\r\n');
+        }
+        // Bottom divider
+        this.write(ESC.CLEAR_LINE);
+        this.write(divider);
+        this.write('\r\n');
+        // Mode controls
+        this.write(ESC.CLEAR_LINE);
+        this.write(this.buildModeControls(cols));
+        // Clear any leftover lines from previous renders with more input lines
+        if (this.flowModeRenderedLines > totalLines) {
+            const extraLines = this.flowModeRenderedLines - totalLines;
+            for (let i = 0; i < extraLines; i++) {
+                this.write('\r\n');
+                this.write(ESC.CLEAR_LINE);
+            }
         }
-        return parts.length ? renderStatusLine(parts, width) : '';
+        // Remember how many lines we rendered
+        this.flowModeRenderedLines = totalLines;
+        // Restore cursor to anchor point, then move to input position
+        this.write('\x1b8'); // Restore cursor position (DEC)
+        // Move down to the input line and to cursor column
+        if (cursorLineOffset > 0) {
+            this.write(`\x1b[${cursorLineOffset}B`); // Move down
+        }
+        const col = Math.min(cursorCol, (visibleLines[adjustedCursorLine] ?? '').length);
+        const cursorColPos = this.config.promptChar.length + col + 1;
+        this.write(ESC.TO_COL(Math.min(cursorColPos, cols)));
+        this.write(ESC.SHOW);
+        // Update state
+        this.lastRenderContent = this.buffer;
+        this.lastRenderCursor = this.cursor;
     }
     /**
-     * Clear the reserved bottom block (meta + divider + input + controls) before repainting.
+     * Render in bottom-pinned mode - input area renders at absolute bottom
+     * Used when explicit bottom positioning is needed
      */
-    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));
+    renderBottomPinned() {
+        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);
+        const maxVisible = Math.max(1, Math.min(this.config.maxLines, availableForContent));
+        const displayLines = Math.min(lines.length, maxVisible);
+        // Reserved lines: separator(1) + controls(1) + input lines
+        this.updateReservedLines(displayLines + 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;
+        this.write(ESC.HIDE);
+        this.write(ESC.RESET);
+        // Calculate positions from absolute bottom
+        const modeControlRow = rows;
+        const bottomSepRow = rows - 1;
+        const inputEndRow = rows - 2;
+        const inputStartRow = inputEndRow - visibleLines.length + 1;
+        const topSepRow = inputStartRow - 1;
+        const statusBarRow = topSepRow - 1;
+        // Reserved lines: status(1) + topSep(1) + input + bottomSep(1) + controls(1)
+        this.updateReservedLines(visibleLines.length + 4);
+        // Status bar
+        this.write(ESC.TO(statusBarRow, 1));
+        this.write(ESC.CLEAR_LINE);
+        this.write(this.buildStatusBar(cols));
+        // Top separator
+        this.write(ESC.TO(topSepRow, 1));
+        this.write(ESC.CLEAR_LINE);
+        const divider = renderDivider(cols - 2);
+        this.write(divider);
+        // Render input lines
+        let finalRow = inputStartRow;
+        let finalCol = 3;
+        for (let i = 0; i < visibleLines.length; i++) {
+            const rowNum = inputStartRow + 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) {
+                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);
         }
+        // Bottom separator
+        this.write(ESC.TO(bottomSepRow, 1));
+        this.write(ESC.CLEAR_LINE);
+        this.write(divider);
+        // Mode controls
+        this.write(ESC.TO(modeControlRow, 1));
+        this.write(ESC.CLEAR_LINE);
+        this.write(this.buildModeControls(cols));
+        // Position cursor in input area
+        this.write(ESC.TO(finalRow, Math.min(finalCol, cols)));
+        this.write(ESC.SHOW);
+        // Update state
+        this.lastRenderContent = this.buffer;
+        this.lastRenderCursor = this.cursor;
     }
     /**
-     * Build Claude Code style mode controls line.
-     * Combines streaming label + override status + main status for simultaneous display.
+     * Build status bar showing streaming/ready status, elapsed time, and token count.
+     * This is the TOP line above the input area.
      */
-    buildModeControls(cols) {
+    buildStatusBar(cols) {
         const parts = [];
-        if (this.streamingLabel) {
-            parts.push({ text: `◐ ${this.streamingLabel}`, tone: 'info' });
+        // Streaming/Ready status with elapsed time
+        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({ text: statusText, tone: 'success' });
         }
-        if (this.overrideStatusMessage) {
-            parts.push({ text: `⚠ ${this.overrideStatusMessage}`, tone: 'warn' });
+        else {
+            parts.push({ text: '○ Ready', tone: 'muted' });
+        }
+        // Token count (context usage)
+        if (this.tokensUsed > 0) {
+            const tokenStr = this.tokensUsed >= 1000
+                ? `${(this.tokensUsed / 1000).toFixed(1)}k`
+                : `${this.tokensUsed}`;
+            parts.push({ text: `${tokenStr} tokens`, tone: 'info' });
         }
-        if (this.statusMessage) {
-            parts.push({ text: this.statusMessage, tone: this.streamingLabel ? 'muted' : 'info' });
+        // Context window remaining
+        if (this.contextUsage !== null) {
+            const pct = Math.max(0, 100 - this.contextUsage);
+            parts.push({ text: `ctx ${pct}%`, tone: pct < 25 ? 'warn' : 'muted' });
+        }
+        // Paste indicator
+        if (this.pastePlaceholders.length > 0) {
+            const totalLines = this.pastePlaceholders.reduce((sum, p) => sum + p.lineCount, 0);
+            parts.push({ text: `📋 ${totalLines}L`, tone: 'info' });
         }
-        const verifyLabel = this.verificationEnabled ? 'verify+build on' : 'verify+build off';
+        return renderStatusLine(parts, cols - 2);
+    }
+    /**
+     * Build mode controls line showing toggles and shortcuts.
+     * This is the BOTTOM line below the input area.
+     */
+    buildModeControls(cols) {
+        const parts = [];
+        // Thinking mode toggle
+        parts.push({
+            text: this.thinkingEnabled ? '💭 on (tab)' : '💭 off (tab)',
+            tone: this.thinkingEnabled ? 'info' : 'muted',
+        });
+        // Verification toggle
         parts.push({
-            text: `${verifyLabel} (${this.verificationHotkey.toLowerCase()})`,
+            text: this.verificationEnabled ? `✓ verify (${this.verificationHotkey})` : `✗ verify (${this.verificationHotkey})`,
             tone: this.verificationEnabled ? 'success' : 'muted',
         });
-        const continueLabel = this.autoContinueEnabled ? 'auto-continue on' : 'auto-continue off';
+        // Edit mode
         parts.push({
-            text: `${continueLabel} (${this.autoContinueHotkey.toLowerCase()})`,
-            tone: this.autoContinueEnabled ? 'info' : 'muted',
+            text: this.editMode === 'display-edits' ? 'auto-edit (⇧⇥)' : 'ask-first (⇧⇥)',
+            tone: 'muted',
         });
-        const editLabel = this.editMode === 'display-edits' ? 'auto-edit' : 'ask first';
-        parts.push({ text: `${editLabel} (⇧⇥)`, tone: 'muted' });
-        if (this.contextUsage !== null) {
-            const pct = Math.max(0, 100 - this.contextUsage);
-            const tone = pct < 25 ? 'warn' : 'muted';
-            parts.push({ text: `context ${pct}%`, tone });
+        // Override/warning status
+        if (this.overrideStatusMessage) {
+            parts.push({ text: `⚠ ${this.overrideStatusMessage}`, tone: 'warn' });
         }
-        if (this.queue.length > 0 && this.mode !== 'streaming') {
-            parts.push({ text: `queued ${this.queue.length}`, tone: 'info' });
+        // Queue indicator during streaming
+        if (this.mode === 'streaming' && this.queue.length > 0) {
+            parts.push({ text: `queued: ${this.queue.length}`, tone: 'info' });
         }
+        // Multi-line indicator
         if (this.buffer.includes('\n')) {
-            const lineCount = this.buffer.split('\n').length;
-            parts.push({ text: `${lineCount} lines`, tone: 'muted' });
-        }
-        if (this.pastePlaceholders.length > 0) {
-            const latest = this.pastePlaceholders[this.pastePlaceholders.length - 1];
-            parts.push({
-                text: `paste #${latest.id} +${latest.lineCount} lines (⌫ to drop)`,
-                tone: 'info',
-            });
+            parts.push({ text: `${this.buffer.split('\n').length}L`, tone: 'muted' });
         }
+        // Shortcuts hint (at the end)
+        parts.push({ text: '? · esc', tone: 'muted' });
         return renderStatusLine(parts, cols - 2);
     }
     /**
@@ -630,6 +819,9 @@ export class TerminalInput extends EventEmitter {
      * 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) {
@@ -637,20 +829,11 @@ export class TerminalInput extends EventEmitter {
         }
         this.outputInterceptorCleanup = display.registerOutputInterceptor({
             beforeWrite: () => {
-                // When the scroll region is active, temporarily move the cursor into
-                // the scrollable area so streamed output lands above the pinned prompt.
-                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));
-                }
+                // Scroll region handles content containment automatically
+                // No per-write cursor manipulation needed
             },
             afterWrite: () => {
-                // Restore cursor back to the pinned prompt after output completes.
-                if (this.scrollRegionActive) {
-                    this.write(ESC.RESTORE);
-                }
+                // No cursor manipulation needed
             },
         });
     }
@@ -772,7 +955,22 @@ export class TerminalInput extends EventEmitter {
                     this.toggleEditMode();
                     return true;
                 }
-                this.insertText('  ');
+                // 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();
+                }
                 return true;
         }
         return false;
@@ -1063,9 +1261,7 @@ export class TerminalInput extends EventEmitter {
         if (available <= 0)
             return;
         const chunk = clean.slice(0, available);
-        const isMultiline = isMultilinePaste(chunk);
-        const isShortMultiline = isMultiline && this.shouldInlineMultiline(chunk);
-        if (isMultiline && !isShortMultiline) {
+        if (isMultilinePaste(chunk)) {
             this.insertPastePlaceholder(chunk);
         }
         else {
@@ -1085,7 +1281,6 @@ export class TerminalInput extends EventEmitter {
             return;
         this.applyScrollRegion();
         this.scrollRegionActive = true;
-        this.forceRender();
     }
     disableScrollRegion() {
         if (!this.scrollRegionActive)
@@ -1236,19 +1431,17 @@ 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(lineCount) {
+    buildPlaceholder(summary) {
         const id = ++this.pasteCounter;
-        const plural = lineCount === 1 ? '' : 's';
-        const placeholder = `[Pasted text #${id} +${lineCount} line${plural}]`;
+        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}"`;
         return { id, placeholder };
     }
     insertPastePlaceholder(content) {
@@ -1256,21 +1449,67 @@ export class TerminalInput extends EventEmitter {
         if (available <= 0)
             return;
         const cleanContent = content.slice(0, available);
-        const lineCount = cleanContent.split('\n').length;
-        const { id, placeholder } = this.buildPlaceholder(lineCount);
+        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 insertPos = this.cursor;
         this.shiftPlaceholders(insertPos, placeholder.length);
         this.pastePlaceholders.push({
             id,
             content: cleanContent,
-            lineCount,
+            lineCount: summary.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);