erosolar-cli 1.7.116 → 1.7.118

package/dist/ui/enhancedPinnedChatBox.js

@@ -1,372 +1,370 @@
 /**
- * EnhancedPinnedChatBox - Modified version of PinnedChatBox with persistent visibility during streaming
- * and enhanced paste handling
+ * Enhanced Pinned Chat Box - Persistent chat input during AI streaming
+ *
+ * Enhanced features:
+ * - Always visible at bottom during AI streaming
+ * - Supports typing while AI is streaming responses
+ * - Gracefully handles long pastes without errors
+ * - Only submits to AI when user hits enter key
+ * - Integrates with existing multiline paste handler
+ * - Shows paste summaries for large content
+ * - Input history navigation with up/down arrows
+ * - Visual feedback during streaming
  */
 import { theme } from './theme.js';
-import { ANSI } from './ansi.js';
+import { processPaste, isMultilinePaste } from '../core/multilinePasteHandler.js';
 export class EnhancedPinnedChatBox {
     writeStream;
+    config;
     state;
-    reservedLines = 2;
-    _lastRenderedHeight = 0;
+    onSubmit;
+    onCancel;
+    isActive = false;
     inputBuffer = '';
     cursorPosition = 0;
-    commandIdCounter = 0;
-    onCommandQueued;
-    onInputSubmit;
-    renderScheduled = false;
-    isEnabled = true;
-    isDisposed = false;
-    lastRenderTime = 0;
-    renderThrottleMs = 16;
-    maxInputLength = 10000;
-    maxQueueSize = 100;
-    ansiPattern = /[\u001B\u009B][[\]()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
-    oscPattern = /\u001b\][^\u0007]*(?:\u0007|\u001b\\)/g;
-    maxStatusMessageLength = 200;
-    // Scroll region management
-    scrollRegionActive = false;
-    // Input history
-    inputHistory = [];
+    history = [];
     historyIndex = -1;
     tempCurrentInput = '';
-    maxHistorySize = 100;
-    // Enhanced paste tracking
-    isPastedBlock = false;
-    pastedFullContent = '';
-    pasteStartTime = 0;
-    pasteLineCount = 0;
-    maxPasteLines = 50;
-    outputInterceptorCleanup;
-    constructor(writeStream, _promptText = '> ', options = {}) {
+    isPasteMode = false;
+    pasteBuffer = '';
+    renderScheduled = false;
+    lastRenderTime = 0;
+    renderThrottleMs = 16; // ~60fps max
+    constructor(writeStream, onSubmit, onCancel, config = {}) {
         this.writeStream = writeStream;
-        this.onCommandQueued = options.onCommandQueued;
-        this.onInputSubmit = options.onInputSubmit;
-        this.maxInputLength = options.maxInputLength ?? this.maxInputLength;
-        this.maxQueueSize = options.maxQueueSize ?? this.maxQueueSize;
+        this.onSubmit = onSubmit;
+        this.onCancel = onCancel;
+        this.config = {
+            enabled: true,
+            position: 1,
+            maxLines: 3,
+            showPasteSummaries: true,
+            autoScroll: true,
+            maxInputLength: 10000,
+            maxHistorySize: 100,
+            ...config,
+        };
         this.state = {
-            isProcessing: false,
-            queuedCommands: [],
-            currentInput: '',
-            contextUsage: 0,
+            input: '',
+            isStreaming: false,
+            isTyping: false,
+            isPasteMode: false,
+            cursorPosition: 0,
+            history: [],
+            historyIndex: -1,
             statusMessage: null,
-            isVisible: true,
+            isProcessing: false,
         };
     }
     /**
-     * Enhanced paste detection with summarization
+     * Handle character input
      */
-    handlePaste(content) {
-        if (this.isDisposed)
+    handleInput(char) {
+        if (!this.isActive)
+            return;
+        // Detect paste by checking for multiple lines or large content
+        if (char.includes('\n') && char.length > 100) {
+            this.handlePaste(char);
             return;
-        const lines = content.split('\n');
-        const lineCount = lines.length;
-        const charCount = content.length;
-        this.pasteStartTime = Date.now();
-        this.pasteLineCount = lineCount;
-        // For large pastes, show summary instead of full content
-        if (lineCount > this.maxPasteLines || charCount > 2000) {
-            this.isPastedBlock = true;
-            this.pastedFullContent = content;
-            const summaryLines = lines.slice(0, 5);
-            const remainingLines = lineCount - 5;
-            const summary = summaryLines.join('\n') +
-                (remainingLines > 0 ? `\n... (${remainingLines} more lines)` : '');
-            this.inputBuffer = summary;
-            this.cursorPosition = summary.length;
-            this.state.currentInput = summary;
-            this.setStatusMessage(`📋 Pasted ${lineCount} lines, ${charCount} chars - hit Enter to submit`);
-        }
-        else {
-            this.isPastedBlock = false;
-            this.pastedFullContent = '';
-            this.inputBuffer = content;
-            this.cursorPosition = content.length;
-            this.state.currentInput = content;
         }
-        this.scheduleRender();
-    }
-    /**
-     * Clear paste state
-     */
-    clearPastedBlock() {
-        this.isPastedBlock = false;
-        this.pastedFullContent = '';
-        this.pasteStartTime = 0;
-        this.pasteLineCount = 0;
+        // Normal character input
+        this.handleNormalInput(char);
     }
     /**
-     * Handle character input with paste detection
+     * Handle normal character input
      */
-    handleCharacter(char) {
-        if (this.isDisposed)
+    handleNormalInput(char) {
+        // Respect max input length
+        const availableSpace = this.config.maxInputLength - this.inputBuffer.length;
+        if (availableSpace <= 0)
             return;
-        const now = Date.now();
-        if (this.pasteStartTime > 0 && now - this.pasteStartTime < 100) {
-            // Rapid input detected - treat as paste continuation
-            this.inputBuffer = this.inputBuffer.slice(0, this.cursorPosition) +
-                char +
-                this.inputBuffer.slice(this.cursorPosition);
-            this.cursorPosition += char.length;
-            this.state.currentInput = this.inputBuffer;
-            this.scheduleRender();
+        const chunk = char.slice(0, availableSpace);
+        if (!chunk)
             return;
-        }
-        // Normal character input
-        this.inputBuffer = this.inputBuffer.slice(0, this.cursorPosition) +
-            char +
-            this.inputBuffer.slice(this.cursorPosition);
-        this.cursorPosition += char.length;
-        this.state.currentInput = this.inputBuffer;
-        this.clearPastedBlock();
+        // Insert character at cursor position
+        this.inputBuffer =
+            this.inputBuffer.slice(0, this.cursorPosition) +
+                chunk +
+                this.inputBuffer.slice(this.cursorPosition);
+        this.cursorPosition = Math.min(this.cursorPosition + chunk.length, this.inputBuffer.length);
+        this.updateState();
         this.scheduleRender();
     }
     /**
-     * Handle Enter key - only submit when explicitly pressed
+     * Handle paste input
      */
-    handleEnter() {
-        if (this.isDisposed)
-            return null;
-        let input;
-        // If we have a pasted block, use the full content
-        if (this.isPastedBlock && this.pastedFullContent) {
-            input = this.sanitizeCommandText(this.pastedFullContent);
+    handlePaste(content) {
+        this.isPasteMode = true;
+        this.pasteBuffer = content;
+        if (this.config.showPasteSummaries && isMultilinePaste(content)) {
+            const processed = processPaste(content);
+            this.setStatusMessage(processed.displaySummary);
         }
         else {
-            input = this.sanitizeCommandText(this.inputBuffer);
+            this.setStatusMessage('📋 Paste detected - Press Enter to submit');
         }
-        if (!input)
-            return null;
-        // Add to history before processing
-        const historyEntry = this.isPastedBlock
-            ? `[Pasted ${this.pasteLineCount} lines] ${input.slice(0, 100)}...`
-            : input;
-        this.addToHistory(historyEntry);
-        // If processing, queue the command instead of submitting
-        if (this.state.isProcessing) {
-            const type = input.startsWith('/') ? 'slash' : 'request';
-            const queued = this.queueCommand(input, type);
-            if (!queued) {
-                this.setStatusMessage(`Queue is full (${this.maxQueueSize}). Submit after current task or clear queued items.`);
-                return null;
-            }
-            this.clearInput();
-            return null;
-        }
-        // Clear input and paste state, then notify
-        this.clearInput();
-        if (this.onInputSubmit) {
-            this.onInputSubmit(input);
-        }
-        return input;
+        this.updateState();
+        this.scheduleRender();
     }
     /**
-     * Enhanced render that always shows during processing
+     * Submit current input
      */
-    render() {
-        if (!this.state.isVisible || !this.supportsRendering())
-            return;
-        // ALWAYS render during processing - use persistent input mode
-        if (this.state.isProcessing) {
-            this.renderPersistentInput();
+    submit() {
+        if (!this.isActive)
             return;
+        let inputToSubmit;
+        if (this.isPasteMode) {
+            // Submit paste content
+            inputToSubmit = this.pasteBuffer;
+            this.clearPasteMode();
         }
-        // Not processing - render the standard status box
-        this.lastRenderTime = Date.now();
-        try {
-            const cols = Math.max(this.writeStream.columns || 80, 40);
-            const separatorWidth = Math.min(cols - 2, 72);
-            // Build status message
-            const statusParts = [];
-            // Processing status
-            if (this.state.statusMessage) {
-                const maxLen = Math.max(20, cols - 30);
-                const msg = this.state.statusMessage.length > maxLen
-                    ? `${this.state.statusMessage.slice(0, maxLen - 3)}...`
-                    : this.state.statusMessage;
-                statusParts.push(theme.ui.muted(msg));
-            }
-            if (statusParts.length === 0) {
-                // Not processing and no status - nothing to show
+        else {
+            // Submit normal input
+            inputToSubmit = this.inputBuffer.trim();
+            if (!inputToSubmit)
                 return;
-            }
-            const statusLine = statusParts.join(' │ ');
-            const separator = theme.ui.border('─'.repeat(separatorWidth));
-            // Write the 3-line pinned box
-            this.safeWrite(`\r${ANSI.CLEAR_LINE}${separator}\n`);
-            this.safeWrite(`${ANSI.CLEAR_LINE}${statusLine}\n`);
-            this.safeWrite(`${ANSI.CLEAR_LINE}${theme.ui.muted('>')} `);
-            this._lastRenderedHeight = 3;
+            // Add to history
+            this.addToHistory(inputToSubmit);
+        }
+        // Clear input
+        this.clearInput();
+        // Submit to AI
+        this.onSubmit(inputToSubmit);
+    }
+    /**
+     * Cancel current input or paste
+     */
+    cancel() {
+        if (this.isPasteMode) {
+            // Cancel paste mode
+            this.clearPasteMode();
+            this.setStatusMessage('Paste cancelled');
         }
-        catch {
-            // Silently handle render errors
+        else {
+            // Call cancel callback
+            this.onCancel();
         }
     }
     /**
-     * Render persistent input during processing
+     * Handle history navigation - up
      */
-    renderPersistentInput() {
-        if (!this.supportsRendering())
+    navigateHistoryUp() {
+        if (this.history.length === 0)
             return;
-        const rows = this.writeStream.rows || 24;
-        const cols = Math.max(this.writeStream.columns || 80, 40);
-        // Save cursor position
-        this.safeWrite(ANSI.SAVE_CURSOR);
-        // Move to the reserved bottom area (outside scroll region)
-        this.safeWrite(ANSI.CURSOR_TO_BOTTOM(rows - 1));
-        // Build status line
-        const queueCount = this.state.queuedCommands.length;
-        let statusText = '';
-        if (this.state.isProcessing) {
-            const queuePart = queueCount > 0 ? ` (${queueCount} queued)` : '';
-            statusText = `🔄 AI is streaming...${queuePart} [Enter: queue additional prompts]`;
+        if (this.historyIndex === -1) {
+            // Start navigating history, save current input
+            this.tempCurrentInput = this.inputBuffer;
+            this.historyIndex = 0;
         }
-        else if (this.state.statusMessage) {
-            statusText = this.state.statusMessage;
+        else if (this.historyIndex < this.history.length - 1) {
+            this.historyIndex++;
         }
-        else if (queueCount > 0) {
-            statusText = `${queueCount} follow-up${queueCount === 1 ? '' : 's'} queued`;
-        }
-        // Render separator and status on bottom lines
-        const separatorWidth = Math.min(cols - 2, 72);
-        const separator = theme.ui.border('─'.repeat(separatorWidth));
-        // Line rows-1: separator
-        this.safeWrite(ANSI.CLEAR_LINE);
-        this.safeWrite(separator);
-        // Line rows: input line with prompt or status
-        this.safeWrite(`\n${ANSI.CLEAR_LINE}`);
-        // Show actual input line during processing so user can see what they're typing
-        const promptPrefix = theme.ui.muted('> ');
-        const currentInput = this.inputBuffer;
-        const maxInputDisplay = cols - 4;
-        // Truncate input if too long, showing end of input
-        let displayInput = currentInput;
-        if (displayInput.length > maxInputDisplay) {
-            displayInput = '…' + displayInput.slice(-(maxInputDisplay - 1));
+        const historyItem = this.history[this.historyIndex];
+        this.setInput(historyItem);
+    }
+    /**
+     * Handle history navigation - down
+     */
+    navigateHistoryDown() {
+        if (this.historyIndex === -1)
+            return;
+        if (this.historyIndex > 0) {
+            this.historyIndex--;
+            const historyItem = this.history[this.historyIndex];
+            this.setInput(historyItem);
         }
-        // Render prompt + input
-        this.safeWrite(promptPrefix);
-        this.safeWrite(displayInput);
-        // Show status hint on the right if there's room
-        if (statusText && currentInput.length < maxInputDisplay - statusText.length - 5) {
-            const padding = cols - 3 - currentInput.length - statusText.length - 3;
-            if (padding > 3) {
-                this.safeWrite(' '.repeat(padding));
-                this.safeWrite(theme.ui.muted(statusText.slice(0, cols - currentInput.length - 6)));
-            }
+        else if (this.historyIndex === 0) {
+            // Back to original input
+            this.historyIndex = -1;
+            this.setInput(this.tempCurrentInput);
+            this.tempCurrentInput = '';
         }
-        // Restore cursor to scroll region
-        this.safeWrite(ANSI.RESTORE_CURSOR);
     }
-    // ... (other methods remain largely the same as PinnedChatBox)
-    supportsRendering() {
-        return this.isEnabled &&
-            !this.isDisposed &&
-            this.writeStream.writable &&
-            this.writeStream.isTTY;
+    /**
+     * Set input text
+     */
+    setInput(text, cursorPos) {
+        this.inputBuffer = text.slice(0, this.config.maxInputLength);
+        this.cursorPosition = typeof cursorPos === 'number'
+            ? Math.max(0, Math.min(cursorPos, this.inputBuffer.length))
+            : this.inputBuffer.length;
+        this.updateState();
+        this.scheduleRender();
+    }
+    /**
+     * Clear input
+     */
+    clearInput() {
+        this.inputBuffer = '';
+        this.cursorPosition = 0;
+        this.historyIndex = -1;
+        this.tempCurrentInput = '';
+        this.updateState();
+        this.scheduleRender();
+    }
+    /**
+     * Clear paste mode
+     */
+    clearPasteMode() {
+        this.isPasteMode = false;
+        this.pasteBuffer = '';
+        this.clearStatusMessage();
     }
-    safeWrite(content) {
-        try {
-            if (this.writeStream.writable) {
-                this.writeStream.write(content);
+    /**
+     * Add input to history
+     */
+    addToHistory(input) {
+        if (input.trim() && this.history[0] !== input.trim()) {
+            this.history.unshift(input.trim());
+            if (this.history.length > this.config.maxHistorySize) {
+                this.history.pop();
             }
         }
-        catch {
-            // Swallow write errors
-        }
     }
-    sanitizeCommandText(text) {
-        return text
-            .replace(this.ansiPattern, '')
-            .replace(this.oscPattern, '')
-            .trim();
+    /**
+     * Set status message
+     */
+    setStatusMessage(message) {
+        this.state.statusMessage = message;
+        this.updateState();
+        this.scheduleRender();
     }
-    sanitizeStatusMessage(message) {
-        if (!message)
-            return null;
-        return message
-            .replace(this.ansiPattern, '')
-            .replace(this.oscPattern, '')
-            .slice(0, this.maxStatusMessageLength);
+    /**
+     * Clear status message
+     */
+    clearStatusMessage() {
+        this.state.statusMessage = null;
+        this.updateState();
+        this.scheduleRender();
     }
-    addToHistory(entry) {
-        if (!entry.trim())
-            return;
-        const existingIndex = this.inputHistory.indexOf(entry);
-        if (existingIndex >= 0) {
-            this.inputHistory.splice(existingIndex, 1);
-        }
-        this.inputHistory.push(entry);
-        if (this.inputHistory.length > this.maxHistorySize) {
-            this.inputHistory = this.inputHistory.slice(-this.maxHistorySize);
-        }
+    /**
+     * Update internal state
+     */
+    updateState() {
+        this.state.input = this.inputBuffer;
+        this.state.cursorPosition = this.cursorPosition;
+        this.state.isPasteMode = this.isPasteMode;
+        this.state.historyIndex = this.historyIndex;
     }
-    setEnabled(enabled) {
-        if (this.isDisposed)
-            return;
-        if (!enabled && this.isEnabled) {
-            this.clear();
-        }
-        this.isEnabled = enabled;
-        if (enabled) {
-            this.scheduleRender();
-        }
+    /**
+     * Set streaming state
+     */
+    setStreaming(isStreaming) {
+        this.state.isStreaming = isStreaming;
+        this.scheduleRender();
     }
+    /**
+     * Set processing state
+     */
     setProcessing(isProcessing) {
-        if (this.isDisposed)
-            return;
         this.state.isProcessing = isProcessing;
         this.scheduleRender();
     }
-    setContextUsage(percentage) {
-        if (this.isDisposed)
+    /**
+     * Activate the chat box
+     */
+    activate() {
+        if (this.isActive)
             return;
-        const value = Number.isFinite(percentage) ? percentage : 0;
-        this.state.contextUsage = Math.max(0, Math.min(100, value));
+        this.isActive = true;
+        this.clearInput();
+        this.setStatusMessage('Type while AI streams - Press Enter to send');
+        // Initial render
+        this.forceRender();
     }
-    setStatusMessage(message) {
-        if (this.isDisposed)
+    /**
+     * Deactivate the chat box
+     */
+    deactivate() {
+        this.isActive = false;
+        this.clearStatusMessage();
+    }
+    /**
+     * Schedule render (throttled)
+     */
+    scheduleRender() {
+        if (this.renderScheduled)
             return;
-        this.state.statusMessage = this.sanitizeStatusMessage(message);
-        this.scheduleRender();
+        this.renderScheduled = true;
+        setTimeout(() => {
+            this.renderScheduled = false;
+            this.render();
+        }, this.renderThrottleMs);
     }
-    queueCommand(text, type = 'request') {
-        if (this.isDisposed)
-            return null;
-        if (typeof text !== 'string')
-            return null;
-        const sanitizedText = this.sanitizeCommandText(text);
-        if (!sanitizedText)
-            return null;
-        if (this.state.queuedCommands.length >= this.maxQueueSize) {
-            const idx = this.state.queuedCommands.findIndex(c => c.type !== 'slash');
-            if (idx >= 0) {
-                this.state.queuedCommands.splice(idx, 1);
-            }
-            else {
-                return null;
-            }
+    /**
+     * Force immediate render
+     */
+    forceRender() {
+        this.render();
+    }
+    /**
+     * Render the chat box
+     */
+    render() {
+        if (!this.isActive)
+            return;
+        const now = Date.now();
+        if (now - this.lastRenderTime < this.renderThrottleMs) {
+            return;
         }
-        const truncated = sanitizedText.slice(0, this.maxInputLength);
-        const preview = truncated.length > 60 ? `${truncated.slice(0, 57)}...` : truncated;
-        const cmd = {
-            id: `cmd-${++this.commandIdCounter}`,
-            text: truncated,
-            type,
-            timestamp: Date.now(),
-            preview,
-        };
-        this.state.queuedCommands.push(cmd);
-        this.scheduleRender();
-        if (this.onCommandQueued) {
-            this.onCommandQueued(cmd);
+        this.lastRenderTime = now;
+        // Clear the status area
+        this.writeStream.write('\x1B[s'); // Save cursor position
+        // Move to bottom position
+        this.writeStream.write(`\x1B[${this.config.position}B`);
+        this.writeStream.write('\x1B[2K\r'); // Clear line
+        // Render status message if present
+        if (this.state.statusMessage) {
+            this.writeStream.write(`${theme.info(this.state.statusMessage)}\n`);
+            this.writeStream.write('\x1B[2K\r'); // Clear next line
         }
-        return cmd;
+        // Render input prompt
+        let prompt;
+        if (this.state.isStreaming) {
+            prompt = `${theme.info('◉')} ${theme.ui.muted('Type while AI streams (Enter to send)')}: `;
+        }
+        else if (this.state.isProcessing) {
+            prompt = `${theme.warning('◐')} ${theme.ui.muted('Processing...')}: `;
+        }
+        else {
+            prompt = `${theme.success('>')} `;
+        }
+        // Render input with cursor
+        const displayInput = this.isPasteMode
+            ? `${theme.accent(this.inputBuffer)}`
+            : this.inputBuffer;
+        this.writeStream.write(`${prompt}${displayInput}`);
+        // Position cursor
+        const cursorOffset = prompt.length + this.cursorPosition;
+        this.writeStream.write(`\x1B[${cursorOffset}G`);
+        // Restore cursor position
+        this.writeStream.write('\x1B[u');
     }
-    clearQueue() {
-        if (this.isDisposed)
-            return;
-        this.state.que;
+    /**
+     * Get current state
+     */
+    getState() {
+        return { ...this.state };
+    }
+    /**
+     * Get config
+     */
+    getConfig() {
+        return { ...this.config };
+    }
+    /**
+     * Update config
+     */
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+    /**
+     * Dispose of resources
+     */
+    dispose() {
+        this.deactivate();
+        this.clearInput();
+        this.clearStatusMessage();
     }
 }
-//# sourceMappingURL=enhancedPinnedChatBox.js.map
+//# sourceMappingURL=EnhancedPinnedChatBox.js.map