Upload 21 files

public/app.js

@@ -3866,6 +3866,11 @@ class RoxAI {
                                 this._updateDeepResearchStatus(data.status);
                                 continue;
                             }
+                            // Handle Vision processing real-time status updates
+                            if (data.visionStatus && data.status) {
+                                this._updateVisionStatus(data.status, data.phase, data.currentImage, data.totalImages, data.model);
+                                continue;
+                            }
                             // Handle DeepResearch started notification
                             if (data.deepResearchStarted && data.info) {
                                 this._showDeepResearchNotice(data.info, data.searchCount, data.articlesRead);
@@ -4972,6 +4977,46 @@ class RoxAI {
             formData.append('chatId', this.currentConversationId || '');
             formData.append('conversationHistory', JSON.stringify(historyUpTo));
             
+            // ==================== REGENERATE WITH ORIGINAL IMAGES ====================
+            // If the original message had image attachments, include them in regeneration
+            // This ensures vision analysis works correctly on regenerate
+            if (userMsg.attachments && userMsg.attachments.length > 0) {
+                const imageAttachments = userMsg.attachments.filter(att => 
+                    att.type && att.type.startsWith('image/') && att.preview
+                );
+                
+                if (imageAttachments.length > 0) {
+                    console.log(`🖼️ Regenerating with ${imageAttachments.length} original image(s)`);
+                    
+                    // Convert base64 previews back to File objects for upload
+                    for (const att of imageAttachments) {
+                        try {
+                            // Extract base64 data from data URL
+                            const base64Match = att.preview.match(/^data:([^;]+);base64,(.+)$/);
+                            if (base64Match) {
+                                const mimeType = base64Match[1];
+                                const base64Data = base64Match[2];
+                                
+                                // Convert base64 to Blob
+                                const byteCharacters = atob(base64Data);
+                                const byteNumbers = new Array(byteCharacters.length);
+                                for (let i = 0; i < byteCharacters.length; i++) {
+                                    byteNumbers[i] = byteCharacters.charCodeAt(i);
+                                }
+                                const byteArray = new Uint8Array(byteNumbers);
+                                const blob = new Blob([byteArray], { type: mimeType });
+                                
+                                // Create File from Blob
+                                const file = new File([blob], att.name, { type: mimeType });
+                                formData.append('files', file);
+                            }
+                        } catch (imgErr) {
+                            console.warn('Failed to restore image for regeneration:', att.name, imgErr);
+                        }
+                    }
+                }
+            }
+            
             this.requestController = new AbortController();
             
             // Track streaming response for partial save on cancel
@@ -8417,6 +8462,87 @@ class RoxAI {
         }
     }
 
+    /**
+     * Update Vision processing status in real-time
+     * Shows premium status updates during image analysis pipeline
+     * @param {string} status - Current status message
+     * @param {string} phase - Current phase (analyzing, fallback, sending, generating, error)
+     * @param {number|null} currentImage - Current image being processed (1-based)
+     * @param {number|null} totalImages - Total number of images
+     * @param {string} model - The main LLM model name
+     * @private
+     */
+    _updateVisionStatus(status, phase, currentImage, totalImages, model) {
+        const statusEl = document.getElementById('typingStatus');
+        const typingIndicator = document.querySelector('.typing-indicator');
+        
+        // Format display status based on phase
+        let displayStatus = status;
+        let shortStatus = status;
+        
+        // Create premium phase-specific messages
+        switch (phase) {
+            case 'analyzing':
+                if (totalImages === 1) {
+                    shortStatus = '👁️ Rox Vision analyzing your image...';
+                    displayStatus = '👁️ Rox Vision is carefully analyzing your image...';
+                } else if (currentImage && totalImages) {
+                    shortStatus = `👁️ Analyzing image ${currentImage}/${totalImages}...`;
+                    displayStatus = `👁️ Rox Vision analyzing image ${currentImage} of ${totalImages}...`;
+                }
+                break;
+            case 'analyzed':
+                if (totalImages === 1) {
+                    shortStatus = '✅ Image analyzed';
+                    displayStatus = '✅ Image analysis complete';
+                } else if (currentImage && totalImages) {
+                    shortStatus = `✅ Image ${currentImage}/${totalImages} done`;
+                    displayStatus = `✅ Image ${currentImage} of ${totalImages} analyzed`;
+                }
+                break;
+            case 'fallback':
+                shortStatus = '🔄 Switching to Rox Vision Max...';
+                displayStatus = '🔄 Primary vision busy, Rox Vision Max taking over...';
+                break;
+            case 'sending':
+                shortStatus = `📤 Sending to ${model}...`;
+                displayStatus = `📤 Image context ready! Sending to ${model}...`;
+                break;
+            case 'generating':
+                shortStatus = `🧠 ${model} is thinking...`;
+                displayStatus = `🧠 ${model} is crafting your response...`;
+                break;
+            case 'error':
+                shortStatus = '⚠️ Vision unavailable';
+                displayStatus = status;
+                break;
+        }
+        
+        // Update the status element
+        if (statusEl) {
+            statusEl.textContent = displayStatus;
+            statusEl.classList.add('vision-status');
+            statusEl.classList.remove('deep-research-status');
+        }
+        
+        // Update the typing indicator
+        if (typingIndicator) {
+            typingIndicator.classList.add('vision-active');
+            typingIndicator.classList.remove('deep-research-active');
+            
+            const textEl = typingIndicator.querySelector('.typing-text');
+            if (textEl) {
+                textEl.textContent = shortStatus;
+            }
+            
+            // Add progress indicator for multiple images
+            if (totalImages > 1 && currentImage) {
+                const progressPercent = Math.round((currentImage / totalImages) * 100);
+                typingIndicator.style.setProperty('--vision-progress', `${progressPercent}%`);
+            }
+        }
+    }
+
     /**
      * Update typing status with elapsed time and status messages
      * @private
@@ -8425,8 +8551,8 @@ class RoxAI {
         const statusEl = document.getElementById('typingStatus');
         if (!statusEl || !this._typingStartTime) return;
         
-        // Don't override DeepResearch status
-        if (statusEl.classList.contains('deep-research-status')) {
+        // Don't override DeepResearch or Vision status
+        if (statusEl.classList.contains('deep-research-status') || statusEl.classList.contains('vision-status')) {
             return;
         }
         

public/styles.css

@@ -7510,6 +7510,93 @@ textarea:focus:not(:focus-visible) {
     background: #10b981;
 }
 
+/* ===== VISION STATUS STYLES ===== */
+/* Premium Vision Processing Status */
+.vision-status {
+    color: #8b5cf6 !important;
+    font-weight: 500;
+    animation: visionStatusPulse 2s ease-in-out infinite;
+}
+
+/* Vision Status Animation */
+@keyframes visionStatusPulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+
+/* Enhanced Typing Indicator for Vision Processing */
+.typing-indicator.vision-active {
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.15) 100%);
+    border: 1px solid rgba(139, 92, 246, 0.3);
+    position: relative;
+    overflow: hidden;
+}
+
+.typing-indicator.vision-active::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: var(--vision-progress, 0%);
+    background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.2) 100%);
+    transition: width 0.3s ease;
+    z-index: 0;
+}
+
+.typing-indicator.vision-active .typing-text {
+    color: #8b5cf6;
+    font-weight: 500;
+    position: relative;
+    z-index: 1;
+}
+
+.typing-indicator.vision-active .typing-dots span {
+    background: #8b5cf6;
+    position: relative;
+    z-index: 1;
+}
+
+/* Vision Eye Animation */
+@keyframes visionEyePulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+}
+
+.typing-indicator.vision-active .typing-dots {
+    animation: visionEyePulse 1.5s ease-in-out infinite;
+}
+
+/* Light theme adjustments */
+[data-theme="light"] .vision-status {
+    color: #7c3aed !important;
+}
+
+[data-theme="light"] .typing-indicator.vision-active {
+    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(139, 92, 246, 0.12) 100%);
+    border-color: rgba(124, 58, 237, 0.25);
+}
+
+[data-theme="light"] .typing-indicator.vision-active::before {
+    background: linear-gradient(90deg, rgba(124, 58, 237, 0.1) 0%, rgba(139, 92, 246, 0.15) 100%);
+}
+
+[data-theme="light"] .typing-indicator.vision-active .typing-text {
+    color: #7c3aed;
+}
+
+[data-theme="light"] .typing-indicator.vision-active .typing-dots span {
+    background: #7c3aed;
+}
+
 /* ===== ATTACH MENU ===== */
 .attach-menu {
     position: fixed;

server.js

@@ -10293,95 +10293,144 @@ app.post('/api/chat', upload.array('files', 50), async (req, res) => {
             return false;
         };
 
-        if (hasImages) {
-            log.info(`🖼️ Step 1: Rox Vision analyzing image(s)...`);
-
-            // Prepare vision analysis request
-            const visionMessages = [
-                { role: 'system', content: ROX_VISION_ANALYSIS_PROMPT },
-                {
-                    role: 'user',
-                    content: [
-                        { type: 'text', text: `Please analyze the following image(s) thoroughly. The user's question is: "${message}"\n\nProvide a detailed analysis that will help answer their question.` },
-                        ...imageContents
-                    ]
+        // ==================== VISION STATUS HELPER ====================
+        // Helper function to send vision processing status updates to frontend
+        // Defined here so it can be used in both vision processing blocks
+        let visionSseHeadersSent = false;
+        
+        /**
+         * Send vision status update to frontend
+         * @param {string} status - Status message to display
+         * @param {string} phase - Current phase (analyzing, fallback, sending, generating, error)
+         * @param {number} [currentImage] - Current image number (1-based)
+         * @param {number} [totalImgs] - Total number of images
+         */
+        const sendVisionStatus = (status, phase, currentImage = null, totalImgs = null) => {
+            // Ensure SSE headers are set up
+            if (!sseHeadersSent && !visionSseHeadersSent) {
+                try {
+                    res.setHeader('Content-Type', 'text/event-stream');
+                    res.setHeader('Cache-Control', 'no-cache, no-transform');
+                    res.setHeader('Connection', 'keep-alive');
+                    res.setHeader('X-Accel-Buffering', 'no');
+                    res.setHeader('Content-Encoding', 'none');
+                    res.setHeader('Transfer-Encoding', 'chunked');
+                    res.flushHeaders();
+                    visionSseHeadersSent = true;
+                    sseHeadersSent = true;
+                } catch (e) {
+                    // Headers may already be sent
                 }
-            ];
-
+            }
+            
             try {
-                // Call primary Rox Vision for image analysis (non-streaming for speed)
-                const visionResponse = await openai.chat.completions.create({
-                    model: config.visionModel,
-                    messages: visionMessages,
-                    temperature: 0.3, // Lower temperature for more consistent analysis
-                    top_p: 0.9,
-                    max_tokens: 4096, // Enough for detailed analysis
-                    stream: false
-                });
+                const statusEvent = {
+                    visionStatus: true,
+                    status: status,
+                    phase: phase,
+                    currentImage: currentImage,
+                    totalImages: totalImgs,
+                    model: config.name
+                };
+                res.write(`data: ${JSON.stringify(statusEvent)}\n\n`);
+                if (typeof res.flush === 'function') res.flush();
+            } catch (e) {
+                // Ignore write errors - connection may have closed
+            }
+        };
 
-                visionAnalysis = visionResponse.choices?.[0]?.message?.content || null;
+        if (hasImages) {
+            const totalImages = imageContents.length;
+            log.info(`🖼️ Step 1: Rox Vision analyzing ${totalImages} image(s) sequentially...`);
 
-                // Check if vision model refused
-                if (visionAnalysis && isVisionRefusal(visionAnalysis)) {
-                    log.warn(`⚠️ Primary Rox Vision refused, trying Rox Vision Max...`);
+            // Send initial vision status
+            const imageText = totalImages === 1 ? 'your image' : `${totalImages} images`;
+            sendVisionStatus(`👁️ Rox Vision is analyzing ${imageText}...`, 'analyzing', 1, totalImages);
 
-                    // Try fallback vision model (Rox Vision Max)
-                    const fallbackVisionMessages = [
-                        { role: 'system', content: ROX_VISION_MAX_ANALYSIS_PROMPT },
+            // ==================== SEQUENTIAL IMAGE PROCESSING ====================
+            // Vision models only support 1 image at a time, so we process each image
+            // separately and combine the analyses with clear image numbering
+            const imageAnalyses = [];
+            
+            /**
+             * Analyze a single image with primary vision model, fallback to Rox Vision Max if needed
+             * @param {Object} imageContent - Single image content object
+             * @param {number} imageIndex - 1-based index of the image
+             * @returns {Promise<{analysis: string|null, usedFallback: boolean}>}
+             */
+            const analyzeSingleImage = async (imageContent, imageIndex) => {
+                const imageLabel = totalImages > 1 ? `Image ${imageIndex} of ${totalImages}` : 'the image';
+                const imagePrompt = totalImages > 1 
+                    ? `You are analyzing ${imageLabel}. The user has uploaded ${totalImages} images total.\n\nUser's question: "${message}"\n\nProvide a detailed analysis of THIS specific image (Image ${imageIndex}). Start your analysis with "**Image ${imageIndex}:**" so the user knows which image you're describing.`
+                    : `Please analyze the following image thoroughly. The user's question is: "${message}"\n\nProvide a detailed analysis that will help answer their question.`;
+                
+                // Send status: analyzing this specific image
+                if (totalImages > 1) {
+                    sendVisionStatus(`👁️ Rox Vision analyzing image ${imageIndex} of ${totalImages}...`, 'analyzing', imageIndex, totalImages);
+                }
+                
+                // Try primary Rox Vision first
+                try {
+                    const visionMessages = [
+                        { role: 'system', content: ROX_VISION_ANALYSIS_PROMPT },
                         {
                             role: 'user',
                             content: [
-                                { type: 'text', text: `Please analyze the following image(s) thoroughly. The user's question is: "${message}"\n\nProvide a detailed analysis.` },
-                                ...imageContents
+                                { type: 'text', text: imagePrompt },
+                                imageContent
                             ]
                         }
                     ];
 
-                    const fallbackResponse = await openai.chat.completions.create({
-                        model: config.fallbackVisionModel,
-                        messages: fallbackVisionMessages,
+                    const visionResponse = await openai.chat.completions.create({
+                        model: config.visionModel,
+                        messages: visionMessages,
                         temperature: 0.3,
                         top_p: 0.9,
                         max_tokens: 4096,
                         stream: false
                     });
 
-                    const fallbackAnalysis = fallbackResponse.choices?.[0]?.message?.content || null;
+                    const analysis = visionResponse.choices?.[0]?.message?.content || null;
 
-                    // Check if fallback also refused
-                    if (fallbackAnalysis && !isVisionRefusal(fallbackAnalysis)) {
-                        visionAnalysis = fallbackAnalysis;
-                        usingFallbackVision = true;
-                        log.info(`👁️✨ Rox Vision Max analysis complete`);
-                    } else {
-                        log.warn(`⚠️ Rox Vision Max also refused or returned empty`);
-                        visionAnalysis = null;
+                    // Check if vision model refused
+                    if (analysis && !isVisionRefusal(analysis)) {
+                        log.info(`👁️ Rox Vision analyzed Image ${imageIndex}/${totalImages}`);
+                        // Send success status for this image
+                        if (totalImages > 1) {
+                            sendVisionStatus(`✅ Image ${imageIndex} analyzed successfully`, 'analyzed', imageIndex, totalImages);
+                        }
+                        return { analysis, usedFallback: false };
                     }
-                } else if (visionAnalysis) {
-                    log.info(`👁️ Rox Vision analysis complete`);
-                } else {
-                    log.warn(`⚠️ Rox Vision returned empty response`);
+
+                    // Primary refused, try fallback
+                    log.warn(`⚠️ Rox Vision refused Image ${imageIndex}, trying Rox Vision Max...`);
+                    sendVisionStatus(`🔄 Switching to Rox Vision Max for image ${totalImages > 1 ? imageIndex : ''}...`, 'fallback', imageIndex, totalImages);
+                } catch (primaryError) {
+                    log.warn(`⚠️ Rox Vision error on Image ${imageIndex}: ${primaryError.message || 'Unknown'}`);
+                    sendVisionStatus(`🔄 Trying Rox Vision Max...`, 'fallback', imageIndex, totalImages);
                 }
-            } catch (visionError) {
-                log.error(`❌ Vision analysis error: ${visionError.message || 'Unknown'}`);
 
-                // Try fallback on error
+                // Try Rox Vision Max as fallback
                 try {
-                    log.info(`🔄 Trying Rox Vision Max as fallback...`);
-                    const fallbackVisionMessages = [
+                    const fallbackPrompt = totalImages > 1 
+                        ? `You are analyzing ${imageLabel}. The user has uploaded ${totalImages} images total.\n\nUser's question: "${message}"\n\nProvide a detailed analysis of THIS specific image (Image ${imageIndex}). Start your analysis with "**Image ${imageIndex}:**"`
+                        : `Please analyze the following image. User question: "${message}"`;
+
+                    const fallbackMessages = [
                         { role: 'system', content: ROX_VISION_MAX_ANALYSIS_PROMPT },
                         {
                             role: 'user',
                             content: [
-                                { type: 'text', text: `Please analyze the following image(s). User question: "${message}"` },
-                                ...imageContents
+                                { type: 'text', text: fallbackPrompt },
+                                imageContent
                             ]
                         }
                     ];
 
                     const fallbackResponse = await openai.chat.completions.create({
                         model: config.fallbackVisionModel,
-                        messages: fallbackVisionMessages,
+                        messages: fallbackMessages,
                         temperature: 0.3,
                         top_p: 0.9,
                         max_tokens: 4096,
@@ -10390,20 +10439,53 @@ app.post('/api/chat', upload.array('files', 50), async (req, res) => {
 
                     const fallbackAnalysis = fallbackResponse.choices?.[0]?.message?.content || null;
 
-                    // Check if fallback also refused
                     if (fallbackAnalysis && !isVisionRefusal(fallbackAnalysis)) {
-                        visionAnalysis = fallbackAnalysis;
-                        usingFallbackVision = true;
-                        log.info(`👁️✨ Rox Vision Max fallback analysis complete`);
-                    } else {
-                        log.warn(`⚠️ Rox Vision Max also refused or returned empty`);
-                        visionAnalysis = null;
+                        log.info(`👁️✨ Rox Vision Max analyzed Image ${imageIndex}/${totalImages}`);
+                        if (totalImages > 1) {
+                            sendVisionStatus(`✅ Image ${imageIndex} analyzed by Rox Vision Max`, 'analyzed', imageIndex, totalImages);
+                        }
+                        return { analysis: fallbackAnalysis, usedFallback: true };
                     }
+
+                    log.warn(`⚠️ Rox Vision Max also refused Image ${imageIndex}`);
+                    sendVisionStatus(`⚠️ Could not analyze image ${totalImages > 1 ? imageIndex : ''}`, 'error', imageIndex, totalImages);
+                    return { analysis: null, usedFallback: true };
                 } catch (fallbackError) {
-                    log.error(`❌ Fallback vision also failed: ${fallbackError.message || 'Unknown'}`);
-                    // Set to null so the main LLM handles the request without vision analysis
-                    visionAnalysis = null;
+                    log.error(`❌ Both vision models failed on Image ${imageIndex}: ${fallbackError.message || 'Unknown'}`);
+                    return { analysis: null, usedFallback: true };
                 }
+            };
+
+            // Process each image sequentially (vision models don't support multiple images)
+            let anyUsedFallback = false;
+            for (let i = 0; i < imageContents.length; i++) {
+                const result = await analyzeSingleImage(imageContents[i], i + 1);
+                if (result.analysis) {
+                    imageAnalyses.push(result.analysis);
+                }
+                if (result.usedFallback) {
+                    anyUsedFallback = true;
+                }
+            }
+
+            // Combine all image analyses
+            if (imageAnalyses.length > 0) {
+                if (totalImages === 1) {
+                    // Single image - use analysis directly
+                    visionAnalysis = imageAnalyses[0];
+                } else {
+                    // Multiple images - combine with clear separation
+                    visionAnalysis = `## Analysis of ${totalImages} Images\n\n` + imageAnalyses.join('\n\n---\n\n');
+                }
+                usingFallbackVision = anyUsedFallback;
+                log.info(`👁️ Vision analysis complete: ${imageAnalyses.length}/${totalImages} images analyzed`);
+                
+                // Send status: sending image context to main LLM
+                sendVisionStatus(`📤 Sending image context to ${config.name}...`, 'sending', totalImages, totalImages);
+            } else {
+                log.warn(`⚠️ No images could be analyzed`);
+                sendVisionStatus(`⚠️ Vision analysis unavailable`, 'error', 0, totalImages);
+                visionAnalysis = null;
             }
         }
 
@@ -10417,10 +10499,16 @@ app.post('/api/chat', upload.array('files', 50), async (req, res) => {
                 // Inject vision analysis into the user message for the main LLM
                 // The main LLM will use this analysis to generate the response
                 const visionSibling = usingFallbackVision ? 'Rox Vision Max' : 'Rox Vision';
+                const imageCount = imageContents.length;
+                const imageCountText = imageCount === 1 ? '1 image' : `${imageCount} images`;
+                
+                // Send status: main LLM is now generating response
+                sendVisionStatus(`🧠 ${config.name} is thinking about your ${imageCountText}...`, 'generating', imageCount, imageCount);
+                
                 const visionContext = `
 ## 👁️ IMAGE ANALYSIS FROM YOUR VISION SIBLING (${visionSibling})
 
-Your vision sibling has analyzed the attached image(s) and provided the following information:
+Your vision sibling has analyzed ${imageCountText} attached by the user and provided the following information:
 
 ${visionAnalysis}
 
@@ -10428,7 +10516,7 @@ ${visionAnalysis}
 
 **USER'S ORIGINAL QUESTION:** ${message}
 
-**YOUR TASK:** Using the image analysis above from your vision sibling, provide a helpful response to the user's question. You can reference the visual details your sibling identified. Remember, you're working as a team - your vision sibling sees the image, and you provide the intelligent response!
+**YOUR TASK:** Using the image analysis above from your vision sibling, provide a helpful response to the user's question. ${imageCount > 1 ? `The user uploaded ${imageCount} images - make sure to address each image in your response (e.g., "In the 1st image...", "In the 2nd image...").` : 'You can reference the visual details your sibling identified.'} Remember, you're working as a team - your vision sibling sees the image(s), and you provide the intelligent response!
 `;
 
                 // Replace the last user message with the enhanced version (text only, no images)