erosolar-cli 1.7.364 → 1.7.366

package/dist/shell/terminalInput.js

@@ -92,6 +92,7 @@ export class TerminalInput extends EventEmitter {
     metaTokenLimit = null; // Optional token window
     metaThinkingMs = null; // Optional thinking duration
     metaThinkingHasContent = false; // Whether collapsed thinking content exists
+    toolCount = null; // Total tool count for status display
     lastRenderContent = '';
     lastRenderCursor = -1;
     renderDirty = false;
@@ -117,7 +118,7 @@ export class TerminalInput extends EventEmitter {
     editMode = 'display-edits';
     verificationEnabled = true;
     autoContinueEnabled = false;
-    verificationHotkey = 'alt+v';
+    verificationHotkey = 'alt+d';
     autoContinueHotkey = 'alt+c';
     thinkingHotkey = '/thinking';
     modelLabel = null;
@@ -173,8 +174,8 @@ export class TerminalInput extends EventEmitter {
         }
     }
     /**
-     * Process raw terminal data (handles bracketed paste sequences and mouse events)
-     * Returns true if the data was consumed (paste sequence)
+     * 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)
@@ -190,6 +191,14 @@ export class TerminalInput extends EventEmitter {
             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;
@@ -228,30 +237,12 @@ export class TerminalInput extends EventEmitter {
         if (button === 64) {
             // Scroll up (3 lines per wheel tick)
             this.scrollUp(3);
-            return;
         }
-        if (button === 65) {
+        else if (button === 65) {
             // Scroll down (3 lines per wheel tick)
             this.scrollDown(3);
-            return;
-        }
-        // Left button (0), middle button (1), right button (2)
-        // These are captured by SGR mouse tracking but we don't need to handle them
-        // Just consume silently - the escape sequence has already been processed
-        // The 'M' action is press, 'm' is release
-        if (button <= 2) {
-            // Silently consume click events to prevent artifacts
-            // Left clicks (button=0) in the input area could focus the input
-            // but terminal apps typically handle this natively
-            return;
         }
-        // Button with motion flag (button + 32) - drag events
-        if (button >= 32 && button <= 34) {
-            // Drag events - consume silently
-            return;
-        }
-        // Any other unrecognized button - log for debugging in dev mode
-        // but don't output anything to prevent artifacts
+        // Ignore other mouse events (clicks, drags, etc.) for now
     }
     /**
      * Handle a keypress event
@@ -457,12 +448,14 @@ export class TerminalInput extends EventEmitter {
         const nextAutoHotkey = options.autoContinueHotkey ?? this.autoContinueHotkey;
         const nextThinkingHotkey = options.thinkingHotkey ?? this.thinkingHotkey;
         const nextThinkingLabel = options.thinkingModeLabel === undefined ? this.thinkingModeLabel : (options.thinkingModeLabel || null);
+        const nextToolCount = options.toolCount === undefined ? this.toolCount : (options.toolCount ?? null);
         if (this.verificationEnabled === nextVerification &&
             this.autoContinueEnabled === nextAutoContinue &&
             this.verificationHotkey === nextVerifyHotkey &&
             this.autoContinueHotkey === nextAutoHotkey &&
             this.thinkingHotkey === nextThinkingHotkey &&
-            this.thinkingModeLabel === nextThinkingLabel) {
+            this.thinkingModeLabel === nextThinkingLabel &&
+            this.toolCount === nextToolCount) {
             return;
         }
         this.verificationEnabled = nextVerification;
@@ -471,6 +464,7 @@ export class TerminalInput extends EventEmitter {
         this.autoContinueHotkey = nextAutoHotkey;
         this.thinkingHotkey = nextThinkingHotkey;
         this.thinkingModeLabel = nextThinkingLabel;
+        this.toolCount = nextToolCount;
         this.scheduleRender();
     }
     /**
@@ -706,143 +700,101 @@ export class TerminalInput extends EventEmitter {
         return [`${leftText}${' '.repeat(spacing)}${rightText}`];
     }
     /**
-     * Build mode controls line with all keyboard shortcuts.
-     * Shows status, all toggles, and contextual information.
-     * Enhanced with comprehensive feature status display.
-     *
-     * Format: [Key] Label:status · [Key] Label:status · context% · model
+     * Build mode controls line with all keyboard shortcuts and toggle states.
+     * Shows below the chat box input area with spelled-out key names.
      */
     buildModeControls(cols) {
         const width = Math.max(8, cols - 2);
-        const leftParts = [];
-        const rightParts = [];
-        // Streaming indicator with animated spinner
+        const parts = [];
+        // Streaming status with stop hint
         if (this.streamingLabel) {
-            leftParts.push({ text: `◐ ${this.streamingLabel}`, tone: 'info' });
+            parts.push({ text: `◐ ${this.streamingLabel}`, tone: 'info' });
+            parts.push({ text: `Esc:stop`, tone: 'warn' });
         }
-        // Override status (warnings, errors)
-        if (this.overrideStatusMessage) {
-            leftParts.push({ text: `⚠ ${this.overrideStatusMessage}`, tone: 'warn' });
-        }
-        // Main status message
-        if (this.statusMessage) {
-            leftParts.push({ text: this.statusMessage, tone: this.streamingLabel ? 'muted' : 'info' });
-        }
-        // === KEYBOARD SHORTCUTS (Compact format: Key·Status) ===
-        // Interrupt shortcut (during streaming)
-        if (this.mode === 'streaming' || this.scrollRegionActive) {
-            leftParts.push({ text: `Esc·Stop`, tone: 'warn' });
-        }
-        // Edit mode toggle (Shift+Tab) - Compact display
-        const editStatus = this.editMode === 'display-edits' ? '✓' : '?';
+        // === MODE TOGGLES WITH HOTKEYS ===
+        // Format: ⌥D:verify✓ · ⌥C:auto○ · ⌥T:think:bal · ⇧Tab:edits
+        // Edit mode toggle (Shift+Tab)
+        const editIcon = this.editMode === 'display-edits' ? '✓' : '?';
         const editTone = this.editMode === 'display-edits' ? 'success' : 'muted';
-        leftParts.push({ text: `⇧Tab·${editStatus}edits`, tone: editTone });
-        // Verification toggle (Alt+V) - Compact display
-        const verifyStatus = this.verificationEnabled ? '✓' : '○';
-        leftParts.push({
-            text: `⌥V·${verifyStatus}verify`,
-            tone: this.verificationEnabled ? 'success' : 'muted'
-        });
-        // Auto-continue toggle (Alt+C) - Compact display
-        const autoStatus = this.autoContinueEnabled ? '↻' : '○';
-        leftParts.push({
-            text: `⌥C·${autoStatus}cont`,
-            tone: this.autoContinueEnabled ? 'info' : 'muted'
-        });
-        // Thinking mode toggle (if available)
+        parts.push({ text: `⇧Tab:edits${editIcon}`, tone: editTone });
+        // Verify mode toggle (Alt+D)
+        const verifyIcon = this.verificationEnabled ? '✓' : '○';
+        const verifyTone = this.verificationEnabled ? 'success' : 'muted';
+        parts.push({ text: `⌥D:verify${verifyIcon}`, tone: verifyTone });
+        // Auto-continue toggle (Alt+C)
+        const autoIcon = this.autoContinueEnabled ? '✓' : '○';
+        const autoTone = this.autoContinueEnabled ? 'success' : 'muted';
+        parts.push({ text: `⌥C:auto${autoIcon}`, tone: autoTone });
+        // Thinking mode toggle (Alt+T)
         if (this.thinkingModeLabel) {
-            const shortThinking = this.thinkingModeLabel.length > 8
-                ? this.thinkingModeLabel.slice(0, 6) + '..'
-                : this.thinkingModeLabel;
-            rightParts.push({ text: `⌥T·${shortThinking}`, tone: 'info' });
-        }
-        // === CONTEXTUAL INFO ===
-        // Queued commands
-        if (this.queue.length > 0) {
-            const queueIcon = this.mode === 'streaming' ? '⏳' : '▸';
-            leftParts.push({ text: `${queueIcon}${this.queue.length} queued`, tone: 'info' });
-        }
-        // Multi-line indicator
-        if (this.buffer.includes('\n')) {
-            const lineCount = this.buffer.split('\n').length;
-            rightParts.push({ text: `${lineCount}L`, tone: 'muted' });
-        }
-        // Paste indicator
-        if (this.pastePlaceholders.length > 0) {
-            const latest = this.pastePlaceholders[this.pastePlaceholders.length - 1];
-            rightParts.push({
-                text: `📋${latest.lineCount}L`,
-                tone: 'info',
-            });
+            const thinkingShort = this.thinkingModeLabel === 'minimal' ? 'min' :
+                this.thinkingModeLabel === 'balanced' ? 'bal' :
+                    this.thinkingModeLabel === 'extended' ? 'ext' : this.thinkingModeLabel;
+            parts.push({ text: `⌥T:${thinkingShort}`, tone: 'info' });
+        }
+        else {
+            parts.push({ text: `⌥T:think`, tone: 'muted' });
         }
-        // === STATUS INDICATORS (Right side) ===
-        // Context usage with visual bar indicator
+        // Clear context (Alt+X)
+        parts.push({ text: `⌥X:clear`, tone: 'muted' });
+        // === STATUS INFO ===
+        // Context remaining percentage
         const contextRemaining = this.computeContextRemaining();
         if (contextRemaining !== null) {
-            const tone = contextRemaining <= 10 ? 'error' : contextRemaining <= 30 ? 'warn' : contextRemaining <= 60 ? 'info' : 'success';
-            const bar = this.renderMiniContextBar(contextRemaining);
-            const usedPct = this.contextUsage !== null ? this.contextUsage : (100 - contextRemaining);
-            const label = contextRemaining === 0
-                ? `⚠compact!`
-                : `${bar} ${usedPct}% used`;
-            rightParts.push({ text: label, tone });
-        }
-        else if (this.contextUsage !== null) {
-            // Fallback: just show raw context usage percentage
-            const tone = this.contextUsage >= 90 ? 'error' : this.contextUsage >= 70 ? 'warn' : 'muted';
-            rightParts.push({ text: `⊛${this.contextUsage}%`, tone });
-        }
-        // Model/provider quick reference (compact)
-        if (this.modelLabel && !this.streamingLabel) {
-            const shortModel = this.modelLabel.length > 15 ? this.modelLabel.slice(0, 13) + '..' : this.modelLabel;
-            rightParts.push({ text: `⚙${shortModel}`, tone: 'muted' });
-        }
-        // Render: left-aligned shortcuts, right-aligned context info
-        if (!rightParts.length || width < 60) {
-            const merged = rightParts.length ? [...leftParts, ...rightParts] : leftParts;
-            return renderStatusLine(merged, width);
-        }
-        const leftWidth = Math.max(12, Math.floor(width * 0.6));
-        const rightWidth = Math.max(14, width - leftWidth - 1);
-        const leftText = renderStatusLine(leftParts, leftWidth);
-        const rightText = renderStatusLine(rightParts, rightWidth);
-        const spacing = Math.max(1, width - this.visibleLength(leftText) - this.visibleLength(rightText));
-        return `${leftText}${' '.repeat(spacing)}${rightText}`;
-    }
-    /**
-     * Render a mini context usage bar (5 chars)
-     */
-    renderMiniContextBar(percentRemaining) {
-        const bars = 5;
-        const filled = Math.round((percentRemaining / 100) * bars);
-        const empty = bars - filled;
-        return '█'.repeat(filled) + '░'.repeat(empty);
+            const tone = contextRemaining <= 10 ? 'warn' : contextRemaining <= 30 ? 'info' : 'muted';
+            parts.push({ text: `ctx:${contextRemaining}%`, tone });
+        }
+        // Token usage
+        if (this.metaTokensUsed !== null) {
+            const used = this.formatTokenCount(this.metaTokensUsed);
+            const limit = this.metaTokenLimit ? `/${this.formatTokenCount(this.metaTokenLimit)}` : '';
+            parts.push({ text: `${used}${limit}tk`, tone: 'muted' });
+        }
+        // Elapsed time (always show if available, not just during streaming)
+        if (this.metaElapsedSeconds !== null) {
+            parts.push({ text: `⏱${this.formatElapsedLabel(this.metaElapsedSeconds)}`, tone: 'muted' });
+        }
+        // Tool count if available
+        if (this.toolCount !== null && this.toolCount > 0) {
+            parts.push({ text: `⚒${this.toolCount}`, tone: 'info' });
+        }
+        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: '⇧',
-            sh: '⇧',
-            alt: '⌥',
-            option: '⌥',
-            opt: '⌥',
-            ctrl: '⌃',
-            control: '⌃',
-            cmd: '⌘',
-            meta: '⌘',
+            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 symbol = map[part];
-            if (symbol)
-                return symbol;
-            return part.length === 1 ? part.toUpperCase() : part.toUpperCase();
+            const label = map[part];
+            if (label)
+                return label;
+            return part.length === 1 ? part.toUpperCase() : part.charAt(0).toUpperCase() + part.slice(1);
         })
-            .join('');
-        return formatted || hotkey;
+            .join('+');
+        return `[${formatted}]`;
     }
     computeContextRemaining() {
         if (this.contextUsage === null) {
@@ -1008,7 +960,7 @@ export class TerminalInput extends EventEmitter {
      * Calculate chat box height.
      */
     getChatBoxHeight() {
-        return 6; // Fixed: meta + divider + input + controls + buffer
+        return 5; // Fixed: divider + input + status + buffer
     }
     /**
      * @deprecated Use streamContent() instead
@@ -1044,26 +996,41 @@ export class TerminalInput extends EventEmitter {
         }
     }
     /**
-     * Enter alternate screen buffer.
-     * DISABLED: Using terminal-native mode for proper scrollback and text selection.
+     * Enter alternate screen buffer and clear it.
+     * This gives us full control over the terminal without affecting user's history.
      */
     enterAlternateScreen() {
-        // Disabled - using terminal-native mode
-        this.contentRow = 1;
+        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.
-     * DISABLED: Using terminal-native mode.
+     * Restores the user's previous terminal content.
      */
     exitAlternateScreen() {
-        // Disabled - using terminal-native mode
+        writeLock.lock('exitAltScreen');
+        try {
+            this.write(ESC.EXIT_ALT_SCREEN);
+            this.alternateScreenActive = false;
+        }
+        finally {
+            writeLock.unlock();
+        }
     }
     /**
      * Check if alternate screen buffer is currently active.
-     * Always returns false - using terminal-native mode.
      */
     isAlternateScreenActive() {
-        return false;
+        return this.alternateScreenActive;
     }
     /**
      * Get a snapshot of the scrollback buffer (for display on exit).
@@ -1072,17 +1039,14 @@ export class TerminalInput extends EventEmitter {
         return [...this.scrollbackBuffer];
     }
     /**
-     * Clear the visible terminal area and reset content position.
-     * In terminal-native mode, this just adds newlines to scroll past content
-     * rather than clearing history (preserving scrollback).
+     * Clear the entire terminal screen and reset content position.
+     * This removes all content including the launching command.
      */
     clearScreen() {
         writeLock.lock('clearScreen');
         try {
-            // In native mode, scroll past existing content rather than clearing
-            const { rows } = this.getSize();
-            this.write('\n'.repeat(rows));
             this.write(ESC.HOME);
+            this.write(ESC.CLEAR_SCREEN);
             this.contentRow = 1;
         }
         finally {
@@ -1182,8 +1146,8 @@ export class TerminalInput extends EventEmitter {
                 this.insertNewline();
                 break;
             // === MODE TOGGLES ===
-            case 'v':
-                // Alt+V: Toggle verification mode (auto-tests after edits)
+            case 'd':
+                // Alt+D: Toggle verification/double-check mode (auto-tests after edits)
                 this.emit('toggleVerify');
                 break;
             case 'c':
@@ -1250,12 +1214,25 @@ export class TerminalInput extends EventEmitter {
         return Math.max(5, rows - chatBoxHeight - 2);
     }
     /**
-     * Build scroll indicator for the divider line.
-     * Scrollback navigation is disabled in alternate screen mode.
-     * This returns null - no scroll indicator is shown.
+     * Build scroll indicator for the divider line (Claude Code style).
+     * Shows scroll position when in scrollback mode, or history size hint when idle.
      */
     buildScrollIndicator() {
-        // Scrollback navigation disabled - no indicator needed
+        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) {
@@ -1317,11 +1294,10 @@ export class TerminalInput extends EventEmitter {
                 }
                 return true;
             case 'pageup':
-                // Scrollback disabled in alternate screen mode
-                // Users should use terminal's native scrollback if available
+                this.scrollUp(20); // Scroll up by 20 lines
                 return true;
             case 'pagedown':
-                // Scrollback disabled in alternate screen mode
+                this.scrollDown(20); // Scroll down by 20 lines
                 return true;
             case 'tab':
                 if (key.shift) {
@@ -1715,53 +1691,120 @@ export class TerminalInput extends EventEmitter {
     }
     /**
      * Scroll up by a number of lines (PageUp)
-     * Note: Scrollback is disabled in alternate screen mode to avoid display corruption.
-     * Users should use their terminal's native scrollback or copy/paste features.
      */
-    scrollUp(_lines = 10) {
-        // Scrollback disabled - alternate screen buffer doesn't support it well
-        // The scrollback buffer is still maintained for potential future use
-        // Users can select and copy text normally since mouse tracking is off
+    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)
-     * Note: Scrollback disabled - see scrollUp comment
      */
-    scrollDown(_lines = 10) {
-        // Scrollback disabled
+    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
-     * DISABLED: Scrollback navigation causes display corruption in alternate screen mode.
-     * The scrollback buffer is maintained but cannot be rendered properly.
      */
     scrollToTop() {
-        // Disabled - causes display corruption in alternate screen buffer
+        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)
-     * DISABLED: Scrollback navigation causes display corruption.
      */
     scrollToBottom() {
-        // Reset scrollback state in case it was somehow enabled
         this.scrollbackOffset = 0;
         this.isInScrollbackMode = false;
+        this.forceRender();
     }
     /**
      * Toggle scrollback mode on/off (Alt+S hotkey)
-     * DISABLED: Scrollback navigation causes display corruption in alternate screen mode.
      */
     toggleScrollbackMode() {
-        // Disabled - alternate screen buffer doesn't support manual scrollback rendering
+        if (this.isInScrollbackMode) {
+            this.scrollToBottom();
+        }
+        else if (this.scrollbackBuffer.length > 0) {
+            this.scrollUp(20);
+        }
     }
     /**
-     * Render the scrollback buffer view.
-     * DISABLED: This causes display corruption in alternate screen mode.
-     * The alternate screen buffer has its own rendering model that conflicts with
-     * manual scroll region manipulation.
+     * 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() {
-        // Disabled - causes display corruption
+        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