local-deep-research 0.1.0__py3-none-any.whl → 0.1.1__py3-none-any.whl

local_deep_research/web/static/js/app.js

@@ -17,6 +17,24 @@ document.addEventListener('DOMContentLoaded', () => {
     let errorSound = null;
     let notificationsEnabled = true;
     
+    // Add function to cleanup research resources globally
+    window.cleanupResearchResources = function() {
+        console.log('Cleaning up research resources');
+        if (pollingInterval) {
+            clearInterval(pollingInterval);
+            pollingInterval = null;
+        }
+        isResearchInProgress = false;
+        currentResearchId = null;
+        window.currentResearchId = null;
+        
+        // Hide the terminate button if it exists
+        const terminateBtn = document.getElementById('terminate-research-btn');
+        if (terminateBtn) {
+            terminateBtn.style.display = 'none';
+        }
+    };
+    
     // Initialize notification sounds
     function initializeSounds() {
         successSound = new Audio('/research/static/sounds/success.mp3');
@@ -47,25 +65,46 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Initialize socket only when needed with a timeout for safety
     function initializeSocket() {
-        if (socket) return socket; // Return existing socket if already initialized
+        if (socket) {
+            // If we already have a socket but it's disconnected, reconnect
+            if (!socketConnected) {
+                try {
+                    console.log('Socket disconnected, reconnecting...');
+                    socket.connect();
+                } catch (e) {
+                    console.error('Error reconnecting socket:', e);
+                    // Create a new socket
+                    socket = null;
+                    return initializeSocket();
+                }
+            }
+            return socket; 
+        }
         
         console.log('Initializing socket connection...');
         // Create new socket connection with optimized settings for threading mode
         socket = io({
             path: '/research/socket.io',
-            transports: ['websocket', 'polling'],
-        reconnection: true,
-            reconnectionAttempts: 3,
-        reconnectionDelay: 1000,
-            timeout: 5000,
+            transports: ['polling', 'websocket'], // Try polling first, then websocket
+            reconnection: true,
+            reconnectionAttempts: 10,
+            reconnectionDelay: 1000,
+            timeout: 25000, // Increase timeout further
             autoConnect: true,
-            forceNew: true
+            forceNew: true,
+            upgrade: false // Disable automatic transport upgrade for more stability
         });
         
         // Add event handlers
-    socket.on('connect', () => {
+        socket.on('connect', () => {
             console.log('Socket connected');
             socketConnected = true;
+            
+            // If we're reconnecting and have a current research, resubscribe
+            if (currentResearchId) {
+                console.log(`Reconnected, resubscribing to research ${currentResearchId}`);
+                socket.emit('subscribe_to_research', { research_id: currentResearchId });
+            }
         });
         
         socket.on('disconnect', () => {
@@ -78,18 +117,52 @@ document.addEventListener('DOMContentLoaded', () => {
             socketConnected = false;
         });
         
+        socket.on('error', (error) => {
+            console.error('Socket error:', error);
+        });
+        
         // Set a timeout to detect hanging connections
-        setTimeout(() => {
+        let connectionTimeoutId = setTimeout(() => {
             if (!socketConnected) {
                 console.log('Socket connection timeout - forcing reconnect');
                 try {
-                    socket.disconnect();
-                    socket.connect();
+                    if (socket) {
+                        // First try to disconnect cleanly
+                        try {
+                            socket.disconnect();
+                        } catch (disconnectErr) {
+                            console.warn('Error disconnecting socket during timeout:', disconnectErr);
+                        }
+                        
+                        // Then try to reconnect
+                        try {
+                            socket.connect();
+                        } catch (connectErr) {
+                            console.warn('Error reconnecting socket during timeout:', connectErr);
+                            // Create a new socket only if connect fails
+                            socket = null;
+                            socket = initializeSocket();
+                        }
+                    } else {
+                        // Socket is already null, just create a new one
+                        socket = initializeSocket();
+                    }
                 } catch (e) {
                     console.error('Error during forced reconnect:', e);
+                    // Force create a new socket
+                    socket = null;
+                    socket = initializeSocket();
                 }
             }
-        }, 5000);
+        }, 15000); // Longer timeout before forcing reconnection
+        
+        // Clean up timeout if socket connects
+        socket.on('connect', () => {
+            if (connectionTimeoutId) {
+                clearTimeout(connectionTimeoutId);
+                connectionTimeoutId = null;
+            }
+        });
         
         return socket;
     }
@@ -99,22 +172,50 @@ document.addEventListener('DOMContentLoaded', () => {
         try {
             if (socket) {
                 console.log('Manually disconnecting socket');
-                socket.removeAllListeners();
-                socket.disconnect();
+                try {
+                    // First remove all listeners
+                    socket.removeAllListeners();
+                } catch (listenerErr) {
+                    console.warn('Error removing socket listeners:', listenerErr);
+                }
+                
+                try {
+                    // Then disconnect
+                    socket.disconnect();
+                } catch (disconnectErr) {
+                    console.warn('Error during socket disconnect:', disconnectErr);
+                }
+                
+                // Always set to null to allow garbage collection
                 socket = null;
                 socketConnected = false;
             }
         } catch (e) {
             console.error('Error disconnecting socket:', e);
+            // Ensure socket is nullified even if errors occur
+            socket = null;
+            socketConnected = false;
         }
     };
     
     // Helper function to connect to research updates
     window.connectToResearchSocket = function(researchId) {
         try {
+            // Check if the research ID is valid
+            if (!researchId) {
+                console.error('Invalid research ID for socket connection');
+                return false;
+            }
+            
+            // First disconnect any existing socket to avoid duplicates
+            window.disconnectSocket();
+            
             // Initialize socket if needed
+            socket = initializeSocket();
+            
             if (!socket) {
-                socket = initializeSocket();
+                console.error('Failed to initialize socket for research updates');
+                return false;
             }
             
             // Subscribe to research updates
@@ -124,66 +225,97 @@ document.addEventListener('DOMContentLoaded', () => {
             const progressEventName = `research_progress_${researchId}`;
             
             // Remove existing listeners to prevent duplicates
-            socket.off(progressEventName);
+            try {
+                socket.off(progressEventName);
+            } catch (e) {
+                console.warn(`Error removing existing listeners for ${progressEventName}`, e);
+            }
             
             // Add new listener
             socket.on(progressEventName, (data) => {
                 console.log('Received research progress update:', data);
-                updateProgressUI(data.progress, data.status, data.message);
                 
-                // If research is complete, show the completion buttons
-                if (data.status === 'completed' || data.status === 'terminated' || data.status === 'failed' || data.status === 'suspended') {
-                    console.log(`Socket received research final state: ${data.status}`);
+                // Handle different message types
+                if (data.status === 'in_progress') {
+                    // Update progress
+                    updateProgressUI(data.progress, data.status, data.message);
+                } else if (data.status === 'completed') {
+                    // Research completed
+                    console.log('Socket received research complete notification');
                     
-                    // Clear polling interval if it exists
+                    // Clear polling interval
                     if (pollingInterval) {
                         console.log('Clearing polling interval from socket event');
                         clearInterval(pollingInterval);
                         pollingInterval = null;
                     }
                     
-                    // Update navigation state
-                    if (data.status === 'completed') {
-                        isResearchInProgress = false;
+                    // Load the results
+                    loadResearch(researchId);
+                    
+                    // Play notification sound
+                    console.log('Playing success notification sound from socket event');
+                    playNotificationSound('success');
+                    
+                    // Clean up resources
+                    window.cleanupResearchResources();
+                    
+                    // Update navigation and research status display
+                    updateNavigationBasedOnResearchStatus();
+                    
+                    // Update history item status if on history page
+                    updateHistoryItemStatus(researchId, 'completed');
+                    
+                    // Dispatch event for any other components that need to know about completion
+                    document.dispatchEvent(new CustomEvent('research_completed', { detail: data }));
+                } else if (data.status === 'failed' || data.status === 'suspended') {
+                    // Research failed or was suspended
+                    console.log(`Socket received research final state: ${data.status}`);
+                    
+                    // Clear polling interval
+                    if (pollingInterval) {
+                        console.log('Clearing polling interval from socket event');
+                        clearInterval(pollingInterval);
+                        pollingInterval = null;
                     }
                     
-                    // Update UI for completion
-                    if (data.status === 'completed') {
-                        console.log('Research completed via socket, loading results automatically');
-                        
-                        // Hide terminate button
-                        const terminateBtn = document.getElementById('terminate-research-btn');
-                        if (terminateBtn) {
-                            terminateBtn.style.display = 'none';
-                        }
-                        
-                        // Auto-load the results
-                        loadResearch(researchId);
-                    } else if (data.status === 'failed' || data.status === 'suspended') {
-                        console.log(`Showing error message for status: ${data.status} from socket event`);
-                        const errorMessage = document.getElementById('error-message');
-                        if (errorMessage) {
-                            errorMessage.style.display = 'block';
-                            errorMessage.textContent = data.status === 'failed' ? 
-                                (data.metadata && data.metadata.error ? JSON.parse(data.metadata).error : 'Research failed') : 
-                                'Research was suspended';
-                        } else {
-                            console.error('error-message element not found in socket handler');
-                        }
+                    // Get the error message from the socket response
+                    const errorText = data.error || data.message || (data.status === 'failed' ? 'Research failed' : 'Research was suspended');
+                    console.log(`Error message from socket: ${errorText}`);
+                    
+                    // Show error message
+                    console.log(`Showing error message for status: ${data.status} from socket event`);
+                    const errorMessage = document.getElementById('error-message');
+                    if (errorMessage) {
+                        errorMessage.style.display = 'block';
+                        errorMessage.textContent = errorText;
                     }
                     
+                    // Update UI with status
+                    updateProgressUI(
+                        0, 
+                        data.status, 
+                        errorText
+                    );
+                    
+                    // Update history item status if on history page
+                    updateHistoryItemStatus(researchId, data.status, errorText);
+                    
+                    // Update navigation
                     updateNavigationBasedOnResearchStatus();
                     
-                    // Play notification sounds based on status
-                    if (data.status === 'completed') {
-                        console.log('Playing success notification sound from socket event');
-                        playNotificationSound('success');
-                    } else if (data.status === 'failed') {
+                    if (data.status === 'failed') {
                         console.log('Playing error notification sound from socket event');
                         playNotificationSound('error');
                     }
                     
-                    // Force the UI to update with a manual trigger
+                    // Clean up resources
+                    window.cleanupResearchResources();
+                    
+                    // Update navigation and research status display
+                    updateNavigationBasedOnResearchStatus();
+                    
+                    // Dispatch event for any other components that need to know about completion
                     document.dispatchEvent(new CustomEvent('research_completed', { detail: data }));
                 }
                 
@@ -210,22 +342,62 @@ document.addEventListener('DOMContentLoaded', () => {
             const activeResearch = history.find(item => item.status === 'in_progress');
             
             if (activeResearch) {
-                isResearchInProgress = true;
-                currentResearchId = activeResearch.id;
-                window.currentResearchId = currentResearchId;
-                
-                // Check if we're on the new research page and redirect to progress
-                const currentPage = document.querySelector('.page.active');
-                
-                if (currentPage && currentPage.id === 'new-research') {
-                    // Navigate to progress page
-                    switchPage('research-progress');
+                // Verify the research is truly active by checking its details
+                try {
+                    const detailsResponse = await fetch(getApiUrl(`/api/research/${activeResearch.id}`));
+                    const details = await detailsResponse.json();
                     
-                    // Connect to socket for this research
-                    window.connectToResearchSocket(currentResearchId);
+                    // If status is not in_progress in the details, it's stale
+                    if (details.status !== 'in_progress') {
+                        console.log(`Research ${activeResearch.id} is stale (status: ${details.status}), ignoring`);
+                        return;
+                    }
                     
-                    // Start polling for updates
-                    pollResearchStatus(currentResearchId);
+                    // Check when the research was started - if it's been more than 1 hour, it might be stale
+                    if (details.created_at) {
+                        const startTime = new Date(details.created_at);
+                        const currentTime = new Date();
+                        const hoursSinceStart = (currentTime - startTime) / (1000 * 60 * 60);
+                        
+                        if (hoursSinceStart > 1) {
+                            console.log(`Research ${activeResearch.id} has been running for ${hoursSinceStart.toFixed(2)} hours, which is unusually long. Checking for activity...`);
+                            
+                            // Check if there has been log activity in the last 10 minutes
+                            let recentActivity = false;
+                            if (details.log && Array.isArray(details.log) && details.log.length > 0) {
+                                const lastLogTime = new Date(details.log[details.log.length - 1].time);
+                                const minutesSinceLastLog = (currentTime - lastLogTime) / (1000 * 60);
+                                
+                                if (minutesSinceLastLog < 10) {
+                                    recentActivity = true;
+                                } else {
+                                    console.log(`No recent activity for ${minutesSinceLastLog.toFixed(2)} minutes, treating as stale`);
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                    
+                    // If we get here, the research seems to be genuinely active
+                    isResearchInProgress = true;
+                    currentResearchId = activeResearch.id;
+                    window.currentResearchId = currentResearchId;
+                    
+                    // Check if we're on the new research page and redirect to progress
+                    const currentPage = document.querySelector('.page.active');
+                    
+                    if (currentPage && currentPage.id === 'new-research') {
+                        // Navigate to progress page
+                        switchPage('research-progress');
+                        
+                        // Connect to socket for this research
+                        window.connectToResearchSocket(currentResearchId);
+                        
+                        // Start polling for updates
+                        pollResearchStatus(currentResearchId);
+                    }
+                } catch (detailsError) {
+                    console.error('Error checking research details:', detailsError);
                 }
             }
         } catch (error) {
@@ -240,10 +412,27 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Function to start research
     async function startResearch(query, mode) {
-        // Check if research is already in progress
+        // Reset potentially stale state
         if (isResearchInProgress) {
-            alert('Another research is already in progress. Please wait for it to complete or check its status in the history tab.');
-            return;
+            // Force a fresh check of active research status
+            try {
+                const response = await fetch(getApiUrl('/api/history'));
+                const history = await response.json();
+                
+                // Find any in-progress research
+                const activeResearch = history.find(item => item.status === 'in_progress');
+                
+                // If no active research is found, reset the state
+                if (!activeResearch) {
+                    console.log('Resetting stale research state - no active research found in history');
+                    window.cleanupResearchResources();
+                } else {
+                    alert('Another research is already in progress. Please wait for it to complete or check its status in the history tab.');
+                    return;
+                }
+            } catch (error) {
+                console.error('Error checking for active research:', error);
+            }
         }
         
         // Get the start button
@@ -255,6 +444,9 @@ document.addEventListener('DOMContentLoaded', () => {
         startResearchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Starting...';
         
         try {
+            // Set the favicon based on research mode
+            setFavicon(mode);
+            
             const response = await fetch(getApiUrl('/api/start_research'), {
                 method: 'POST',
                 headers: {
@@ -300,11 +492,17 @@ document.addEventListener('DOMContentLoaded', () => {
                     terminateBtn.disabled = false;
                 }
             } else {
+                // Reset favicon to default on error
+                createDynamicFavicon('⚡');
+                
                 alert('Error starting research: ' + (data.message || 'Unknown error'));
                 startResearchBtn.disabled = false;
                 startResearchBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
             }
         } catch (error) {
+            // Reset favicon to default on error
+            createDynamicFavicon('⚡');
+            
             console.error('Error:', error);
             alert('An error occurred while starting the research. Please try again.');
             startResearchBtn.disabled = false;
@@ -324,12 +522,26 @@ document.addEventListener('DOMContentLoaded', () => {
         })
         .then(data => {
             console.log('Research status response:', data);
-            // Update the UI with the current progress
-            updateProgressUI(data.progress, data.status, data.message);
+            
+            // Get the latest progress and log data
+            const progress = data.progress || 0;
+            const status = data.status || 'in_progress';
+            
+            // Get the latest message from the log if available
+            let latestMessage = "Processing research...";
+            if (data.log && Array.isArray(data.log) && data.log.length > 0) {
+                const latestLog = data.log[data.log.length - 1];
+                if (latestLog && latestLog.message) {
+                    latestMessage = latestLog.message;
+                }
+            }
+            
+            // Update the UI with the current progress - always
+            updateProgressUI(progress, status, latestMessage);
             
             // If research is complete, show the completion buttons
-            if (data.status === 'completed' || data.status === 'failed' || data.status === 'suspended') {
-                console.log(`Research is in final state: ${data.status}`);
+            if (status === 'completed' || status === 'failed' || status === 'suspended') {
+                console.log(`Research is in final state: ${status}`);
                 // Clear the polling interval
                 if (pollingInterval) {
                     console.log('Clearing polling interval');
@@ -338,7 +550,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
                 
                 // Update UI for completion
-                if (data.status === 'completed') {
+                if (status === 'completed') {
                     console.log('Research completed, loading results automatically');
                     // Hide the terminate button
                     const terminateBtn = document.getElementById('terminate-research-btn');
@@ -346,26 +558,49 @@ document.addEventListener('DOMContentLoaded', () => {
                         terminateBtn.style.display = 'none';
                     }
                     
+                    // Update history item status
+                    updateHistoryItemStatus(researchId, 'completed');
+                    
                     // Auto-load the results instead of showing a button
                     loadResearch(researchId);
-                } else if (data.status === 'failed' || data.status === 'suspended') {
-                    console.log(`Showing error message for status: ${data.status}`);
+                } else if (status === 'failed' || status === 'suspended') {
+                    console.log(`Showing error message for status: ${status}`);
+                    
+                    // Get error message from metadata if available or use latest message
+                    let errorText = latestMessage;
+                    if (data.metadata && typeof data.metadata === 'string') {
+                        try {
+                            const metadataObj = JSON.parse(data.metadata);
+                            if (metadataObj.error) {
+                                errorText = metadataObj.error;
+                            }
+                        } catch (e) {
+                            console.log('Error parsing metadata:', e);
+                        }
+                    }
+                    
+                    // Show error message in UI
                     const errorMessage = document.getElementById('error-message');
                     if (errorMessage) {
                         errorMessage.style.display = 'block';
-                        errorMessage.textContent = data.status === 'failed' ? 
-                            (data.metadata && data.metadata.error ? JSON.parse(data.metadata).error : 'Research failed') : 
-                            'Research was suspended';
+                        errorMessage.textContent = errorText;
+                        console.log('Set error message to:', errorText);
                     } else {
                         console.error('error-message element not found');
                     }
+                    
+                    // Update progress display with error
+                    updateProgressUI(0, status, errorText);
+                    
+                    // Update history item status
+                    updateHistoryItemStatus(researchId, status, errorText);
                 }
                 
                 // Play notification sound based on status
-                if (data.status === 'completed') {
+                if (status === 'completed') {
                     console.log('Playing success notification sound');
                     playNotificationSound('success');
-                } else if (data.status === 'failed') {
+                } else if (status === 'failed') {
                     console.log('Playing error notification sound');
                     playNotificationSound('error');
                 }
@@ -381,7 +616,7 @@ document.addEventListener('DOMContentLoaded', () => {
             }
             
             // Continue polling if still in progress
-            if (data.status === 'in_progress') {
+            if (status === 'in_progress') {
                 console.log('Research is still in progress, continuing polling');
                 if (!pollingInterval) {
                     console.log('Setting up polling interval');
@@ -403,6 +638,9 @@ document.addEventListener('DOMContentLoaded', () => {
         // Initialize the sounds
         initializeSounds();
         
+        // Create a dynamic favicon with the lightning emoji by default
+        createDynamicFavicon('⚡');
+        
         // Get navigation elements
         const navItems = document.querySelectorAll('.sidebar-nav li');
         const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
@@ -474,6 +712,10 @@ document.addEventListener('DOMContentLoaded', () => {
             option.addEventListener('click', function() {
                 modeOptions.forEach(opt => opt.classList.remove('active'));
                 this.classList.add('active');
+                
+                // Update favicon based on selected mode
+                const mode = this.dataset.mode;
+                setFavicon(mode);
             });
         });
         
@@ -602,9 +844,21 @@ document.addEventListener('DOMContentLoaded', () => {
                 console.log('Termination request sent successfully');
                 
                 // If we're on the history page, update the status of this item
-                    if (document.getElementById('history').classList.contains('active')) {
+                if (document.getElementById('history').classList.contains('active')) {
                     updateHistoryItemStatus(researchId, 'terminating', 'Terminating...');
                 }
+                
+                // Set a timeout to reset UI if socket doesn't respond
+                setTimeout(() => {
+                    if (isTerminating) {
+                        console.log('Termination timeout - resetting UI');
+                        isTerminating = false;
+                        resetProgressAnimations();
+                        
+                        // Update the navigation
+                        updateNavigationBasedOnResearchStatus();
+                    }
+                }, 10000); // 10 second timeout
             } else {
                 console.error('Termination request failed:', data.message);
                 alert(`Failed to terminate research: ${data.message}`);
@@ -626,8 +880,8 @@ document.addEventListener('DOMContentLoaded', () => {
                         btn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate';
                     }
                 });
-                }
-            } catch (error) {
+            }
+        } catch (error) {
             console.error('Error terminating research:', error);
             alert('An error occurred while trying to terminate the research.');
             
@@ -660,6 +914,8 @@ document.addEventListener('DOMContentLoaded', () => {
         const progressFill = document.getElementById('progress-fill');
         const progressPercentage = document.getElementById('progress-percentage');
         const progressStatus = document.getElementById('progress-status');
+        const errorMessage = document.getElementById('error-message');
+        const tryAgainBtn = document.getElementById('try-again-btn');
         
         if (progressFill && progressPercentage) {
             progressFill.style.width = `${progress}%`;
@@ -683,12 +939,51 @@ document.addEventListener('DOMContentLoaded', () => {
                 terminateBtn.style.display = 'inline-flex';
                 terminateBtn.disabled = false;
                 terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
+                
+                // Hide try again button when in progress
+                if (tryAgainBtn) {
+                    tryAgainBtn.style.display = 'none';
+                }
             } else if (status === 'terminating') {
                 terminateBtn.style.display = 'inline-flex';
                 terminateBtn.disabled = true;
                 terminateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Terminating...';
             } else {
                 terminateBtn.style.display = 'none';
+                
+                // Show try again button for failed or suspended research
+                if (tryAgainBtn && (status === 'failed' || status === 'suspended')) {
+                    tryAgainBtn.style.display = 'inline-flex';
+                    
+                    // Get the current query for retry
+                    const currentQuery = document.getElementById('current-query');
+                    const queryText = currentQuery ? currentQuery.textContent : '';
+                    
+                    // Add click event to try again button to go back to research form with the query preserved
+                    tryAgainBtn.onclick = function() {
+                        // Switch to the research form
+                        switchPage('new-research');
+                        
+                        // Set the query text in the form
+                        const queryTextarea = document.getElementById('query');
+                        if (queryTextarea && queryText) {
+                            queryTextarea.value = queryText;
+                        }
+                        
+                        // Clean up any remaining research state
+                        window.cleanupResearchResources();
+                    };
+                }
+            }
+        }
+        
+        // Show error message when there's an error
+        if (errorMessage) {
+            if (status === 'failed' || status === 'suspended') {
+                errorMessage.style.display = 'block';
+                errorMessage.textContent = message || (status === 'failed' ? 'Research failed' : 'Research was suspended');
+            } else {
+                errorMessage.style.display = 'none';
             }
         }
     }
@@ -764,8 +1059,11 @@ document.addEventListener('DOMContentLoaded', () => {
                     title.textContent = item.query || 'Untitled Research';
                     
                     const status = document.createElement('div');
-                    status.className = `history-item-status status-${item.status || 'unknown'}`;
-                    status.textContent = item.status ? (item.status.charAt(0).toUpperCase() + item.status.slice(1)) : 'Unknown';
+                    status.className = `history-item-status status-${item.status ? item.status.replace('_', '-') : 'unknown'}`;
+                    status.textContent = item.status ? 
+                        (item.status === 'in_progress' ? 'In Progress' : 
+                         item.status.charAt(0).toUpperCase() + item.status.slice(1)) : 
+                        'Unknown';
                     
                     header.appendChild(title);
                     header.appendChild(status);
@@ -946,145 +1244,160 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
     
-    // Function to load a specific research result
+    // Function to load research
     async function loadResearch(researchId) {
-        // Navigate to results page
-        switchPage('research-results');
-        
-        const resultsContent = document.getElementById('results-content');
-        resultsContent.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
-        
         try {
-            // Load research details
-            const detailsResponse = await fetch(getApiUrl(`/api/research/${researchId}`));
-            const details = await detailsResponse.json();
+            const response = await fetch(getApiUrl(`/api/research/${researchId}`));
+            if (!response.ok) {
+                throw new Error('Failed to load research');
+            }
             
-            // Display metadata
-            document.getElementById('result-query').textContent = details.query;
+            const data = await response.json();
             
-            // Format date with duration if available
-            let dateText = formatDate(new Date(details.completed_at || details.created_at));
-            if (details.duration_seconds) {
-                // Format duration
-                let durationText = '';
-                const duration = parseInt(details.duration_seconds);
+            if (data.status === 'completed' && data.report_path) {
+                // Set the favicon based on the research mode
+                setFavicon(data.mode || 'quick');
                 
-                if (duration < 60) { // less than a minute
-                    durationText = `${duration}s`;
-                } else if (duration < 3600) { // less than an hour
-                    durationText = `${Math.floor(duration / 60)}m ${duration % 60}s`;
-                } else { // hours
-                    durationText = `${Math.floor(duration / 3600)}h ${Math.floor((duration % 3600) / 60)}m`;
+                // Get report content
+                const reportResponse = await fetch(getApiUrl(`/api/report/${researchId}`));
+                if (!reportResponse.ok) {
+                    throw new Error('Failed to load report');
                 }
                 
-                dateText += ` (Duration: ${durationText})`;
-            }
-            document.getElementById('result-date').textContent = dateText;
-            
-            document.getElementById('result-mode').textContent = details.mode === 'quick' ? 'Quick Summary' : 'Detailed Report';
-            
-            // Load the report content
-            const reportResponse = await fetch(getApiUrl(`/api/report/${researchId}`));
-            const reportData = await reportResponse.json();
-            
-            if (reportData.status === 'success') {
-                // Render markdown
-                const renderedContent = marked.parse(reportData.content);
-                resultsContent.innerHTML = renderedContent;
+                const reportData = await reportResponse.json();
                 
-                // Apply syntax highlighting
-                document.querySelectorAll('pre code').forEach((block) => {
-                    hljs.highlightElement(block);
-                });
+                if (reportData.status === 'success') {
+                    // Update UI with report content
+                    document.getElementById('result-query').textContent = data.query || 'Unknown query';
+                    document.getElementById('result-mode').textContent = data.mode === 'detailed' ? 'Detailed Report' : 'Quick Summary';
+                    
+                    // Format date
+                    const reportDate = data.completed_at ? formatDate(new Date(data.completed_at)) : 'Unknown';
+                    document.getElementById('result-date').textContent = reportDate;
+                    
+                    // Render markdown content
+                    const resultsContent = document.getElementById('results-content');
+                    if (resultsContent) {
+                        resultsContent.innerHTML = '';
+                        resultsContent.classList.add('markdown-body');
+                        
+                        // Enable syntax highlighting
+                        const renderedContent = marked.parse(reportData.content);
+                        resultsContent.innerHTML = renderedContent;
+                        
+                        // Apply syntax highlighting
+                        document.querySelectorAll('pre code').forEach((block) => {
+                            hljs.highlightElement(block);
+                        });
+                    }
+                    
+                    // Switch to results page
+                    switchPage('research-results');
+                } else {
+                    throw new Error(reportData.message || 'Failed to load report content');
+                }
+            } else if (data.status === 'in_progress') {
+                // Set favicon based on the research mode 
+                setFavicon(data.mode || 'quick');
+                
+                // Redirect to progress page
+                navigateToResearchProgress(data);
             } else {
-                resultsContent.innerHTML = '<div class="error-message">Error loading report. Please try again later.</div>';
+                // Show research details for failed or suspended research
+                loadResearchDetails(researchId);
             }
         } catch (error) {
             console.error('Error loading research:', error);
-            resultsContent.innerHTML = '<div class="error-message">Error loading research results. Please try again later.</div>';
+            alert('Error loading research: ' + error.message);
+            // Reset favicon to default on error
+            createDynamicFavicon('⚡');
         }
     }
     
-    // Function to load research details page
+    // Function to load research details
     async function loadResearchDetails(researchId) {
-        // Navigate to details page
-        switchPage('research-details');
-        
-        // Initialize the research log area
-        const researchLog = document.getElementById('research-log');
-        researchLog.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
-        
         try {
-            // Load research details
-            const response = await fetch(getApiUrl(`/api/research/${researchId}/details`));
-            console.log('Research details API response status:', response.status);
+            // Navigate to details page
+            switchPage('research-details');
+            
+            const researchLog = document.getElementById('research-log');
+            researchLog.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
             
+            const response = await fetch(getApiUrl(`/api/research/${researchId}/details`));
             if (!response.ok) {
-                console.error('API error:', response.status, response.statusText);
-                researchLog.innerHTML = `<div class="error-message">Error loading research details. Status: ${response.status}</div>`;
-                return;
+                throw new Error('Failed to load research details');
             }
             
             const data = await response.json();
-            console.log('Research details data:', data);
             
-            if (data.status !== 'success') {
-                researchLog.innerHTML = `<div class="error-message">Error loading research details: ${data.message || 'Unknown error'}</div>`;
-                return;
-            }
+            // Set the favicon based on the research mode
+            setFavicon(data.mode || 'quick');
             
-            // Display metadata
-            document.getElementById('detail-query').textContent = data.query || 'N/A';
+            // Update UI with research details
+            document.getElementById('detail-query').textContent = data.query || 'Unknown query';
             document.getElementById('detail-status').textContent = capitalizeFirstLetter(data.status || 'unknown');
-            document.getElementById('detail-status').className = `metadata-value status-${data.status || 'unknown'}`;
-            document.getElementById('detail-mode').textContent = (data.mode === 'quick' ? 'Quick Summary' : 'Detailed Report') || 'N/A';
+            document.getElementById('detail-mode').textContent = data.mode === 'detailed' ? 'Detailed Report' : 'Quick Summary';
             
-            // Update progress bar
+            // Update progress indicator
             const progress = data.progress || 0;
             document.getElementById('detail-progress-fill').style.width = `${progress}%`;
             document.getElementById('detail-progress-percentage').textContent = `${progress}%`;
             
-            // Render log entries
-            renderLogEntries(data.log || []);
+            // Add status classes
+            document.getElementById('detail-status').className = 'metadata-value status-' + (data.status || 'unknown');
             
-            // Connect to socket for real-time updates
-            window.connectToResearchSocket(researchId);
+            // Clear existing log entries
+            researchLog.innerHTML = '';
+            
+            // Render log entries
+            if (data.log && Array.isArray(data.log)) {
+                renderLogEntries(data.log);
+            } else {
+                researchLog.innerHTML = '<div class="empty-message">No log entries available</div>';
+            }
             
-            // Add appropriate actions based on research status
-            const detailActions = document.getElementById('detail-actions');
-            detailActions.innerHTML = '';
+            // Update actions based on status
+            const actionsContainer = document.getElementById('detail-actions');
+            actionsContainer.innerHTML = '';
             
-            if (data.status === 'completed') {
+            if (data.status === 'completed' && data.report_path) {
+                // Add button to view results
                 const viewResultsBtn = document.createElement('button');
                 viewResultsBtn.className = 'btn btn-primary';
                 viewResultsBtn.innerHTML = '<i class="fas fa-eye"></i> View Results';
                 viewResultsBtn.addEventListener('click', () => loadResearch(researchId));
-                detailActions.appendChild(viewResultsBtn);
-                
-                // Add download PDF button
-                const downloadPdfBtn = document.createElement('button');
-                downloadPdfBtn.className = 'btn btn-outline';
-                downloadPdfBtn.innerHTML = '<i class="fas fa-file-pdf"></i> Download PDF';
-                downloadPdfBtn.addEventListener('click', () => generatePdfFromResearch(researchId));
-                detailActions.appendChild(downloadPdfBtn);
+                actionsContainer.appendChild(viewResultsBtn);
             } else if (data.status === 'in_progress') {
+                // Add button to view progress
                 const viewProgressBtn = document.createElement('button');
                 viewProgressBtn.className = 'btn btn-primary';
-                viewProgressBtn.innerHTML = '<i class="fas fa-sync"></i> View Live Progress';
-                viewProgressBtn.addEventListener('click', () => {
-                    document.getElementById('current-query').textContent = data.query || '';
-                    
-                    // Navigate to progress page
-                    switchPage('research-progress');
-                    
-                    // Connect to socket
-                    window.connectToResearchSocket(researchId);
-                });
-                detailActions.appendChild(viewProgressBtn);
+                viewProgressBtn.innerHTML = '<i class="fas fa-spinner"></i> View Progress';
+                viewProgressBtn.addEventListener('click', () => navigateToResearchProgress(data));
+                actionsContainer.appendChild(viewProgressBtn);
+                
+                // Add button to terminate research
+                const terminateBtn = document.createElement('button');
+                terminateBtn.className = 'btn btn-outline terminate-btn';
+                terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
+                terminateBtn.addEventListener('click', () => terminateResearch(researchId));
+                actionsContainer.appendChild(terminateBtn);
             }
+            
+            // Add delete button for all research items
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'btn btn-outline delete-btn';
+            deleteBtn.innerHTML = '<i class="fas fa-trash"></i> Delete Research';
+            deleteBtn.addEventListener('click', () => {
+                if (confirm('Are you sure you want to delete this research? This action cannot be undone.')) {
+                    deleteResearch(researchId);
+                }
+            });
+            actionsContainer.appendChild(deleteBtn);
         } catch (error) {
             console.error('Error loading research details:', error);
-            researchLog.innerHTML = `<div class="error-message">Error loading research details: ${error.message}</div>`;
+            document.getElementById('research-log').innerHTML = '<div class="error-message">Error loading research details. Please try again later.</div>';
+            // Reset favicon to default on error
+            createDynamicFavicon('⚡');
         }
     }
     
@@ -1213,15 +1526,13 @@ document.addEventListener('DOMContentLoaded', () => {
         researchLog.scrollTop = researchLog.scrollHeight;
     }
     
-    // Back to history button handlers
-    document.getElementById('back-to-history').addEventListener('click', () => {
-        const historyNav = Array.from(navItems).find(item => item.getAttribute('data-page') === 'history');
-        historyNav.click();
+    // Back to history button handlers - using direct page switching
+    document.getElementById('back-to-history')?.addEventListener('click', () => {
+        switchPage('history');
     });
     
-    document.getElementById('back-to-history-from-details').addEventListener('click', () => {
-        const historyNav = Array.from(navItems).find(item => item.getAttribute('data-page') === 'history');
-        historyNav.click();
+    document.getElementById('back-to-history-from-details')?.addEventListener('click', () => {
+        switchPage('history');
     });
     
     // Helper functions
@@ -1323,6 +1634,25 @@ document.addEventListener('DOMContentLoaded', () => {
                     newResearchNav.removeAttribute('data-original-page');
                 }
                 
+                // Reset progress UI elements
+                const progressFill = document.getElementById('progress-fill');
+                const progressPercentage = document.getElementById('progress-percentage');
+                const progressStatus = document.getElementById('progress-status');
+                
+                if (progressFill) progressFill.style.width = '0%';
+                if (progressPercentage) progressPercentage.textContent = '0%';
+                if (progressStatus) {
+                    const errorMessage = document.getElementById('error-message');
+                    if (errorMessage && errorMessage.style.display === 'block') {
+                        // If there's an error message displayed, show a more informative status
+                        progressStatus.textContent = 'Research process encountered an error. Please check the error message above and try again.';
+                        progressStatus.classList.add('status-failed');
+                    } else {
+                        progressStatus.textContent = 'Start a new research query when you\'re ready...';
+                        progressStatus.classList.remove('status-failed');
+                    }
+                }
+                
                 // If the terminate button is visible, hide it
                 const terminateBtn = document.getElementById('terminate-research-btn');
                 if (terminateBtn) {
@@ -1330,6 +1660,20 @@ document.addEventListener('DOMContentLoaded', () => {
                     terminateBtn.disabled = false;
                     terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
                 }
+                
+                // Also hide error message if visible
+                const errorMessage = document.getElementById('error-message');
+                if (errorMessage) {
+                    errorMessage.style.display = 'none';
+                    errorMessage.textContent = '';
+                }
+                
+                // Reset research form submit button
+                const startResearchBtn = document.getElementById('start-research-btn');
+                if (startResearchBtn) {
+                    startResearchBtn.disabled = false;
+                    startResearchBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
+                }
             }
             
             // Make sure the navigation highlights the correct item
@@ -1346,9 +1690,16 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         }
 
-        // Connect to socket for updates
-        if (currentResearchId) {
+        // Connect to socket for updates only if research is in progress
+        if (isResearchInProgress && currentResearchId) {
             window.connectToResearchSocket(currentResearchId);
+        } else {
+            // Disconnect socket if no active research
+            window.disconnectSocket();
+            
+            // Also reset the current research ID
+            currentResearchId = null;
+            window.currentResearchId = null;
         }
     }
 
@@ -1389,14 +1740,22 @@ document.addEventListener('DOMContentLoaded', () => {
     function updateHistoryItemStatus(researchId, status, statusText) {
         const historyList = document.getElementById('history-list');
         
+        // Format the status for display
+        const displayStatus = statusText || 
+            (status === 'in_progress' ? 'In Progress' : 
+             status.charAt(0).toUpperCase() + status.slice(1));
+        
+        // Format the CSS class
+        const statusClass = `status-${status.replace('_', '-')}`;
+        
         // Look for the item in the active research banner
         const activeBanner = historyList.querySelector(`.active-research-banner[data-research-id="${researchId}"]`);
         if (activeBanner) {
             const statusEl = activeBanner.querySelector('.history-item-status');
             if (statusEl) {
-                statusEl.textContent = statusText || capitalizeFirstLetter(status);
+                statusEl.textContent = displayStatus;
                 statusEl.className = 'history-item-status';
-                statusEl.classList.add(`status-${status}`);
+                statusEl.classList.add(statusClass);
             }
             
             // Update buttons
@@ -1423,9 +1782,9 @@ document.addEventListener('DOMContentLoaded', () => {
         if (historyItem) {
             const statusEl = historyItem.querySelector('.history-item-status');
             if (statusEl) {
-                statusEl.textContent = statusText || capitalizeFirstLetter(status);
+                statusEl.textContent = displayStatus;
                 statusEl.className = 'history-item-status';
-                statusEl.classList.add(`status-${status}`);
+                statusEl.classList.add(statusClass);
             }
             
             // Update view button
@@ -1437,6 +1796,15 @@ document.addEventListener('DOMContentLoaded', () => {
                 } else if (status === 'failed') {
                     viewBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
                     viewBtn.disabled = true;
+                } else if (status === 'completed') {
+                    viewBtn.innerHTML = '<i class="fas fa-eye"></i> View';
+                    viewBtn.disabled = false;
+                    
+                    // Also make the PDF button visible if not already
+                    const pdfBtn = historyItem.querySelector('.pdf-btn');
+                    if (pdfBtn) {
+                        pdfBtn.style.display = 'inline-flex';
+                    }
                 }
             }
         }
@@ -2075,4 +2443,79 @@ document.addEventListener('DOMContentLoaded', () => {
         // Update navigation
         updateNavigationBasedOnResearchStatus();
     });
+
+    // Function to reset progress animations and UI elements
+    function resetProgressAnimations() {
+        // Reset the progress bar animation
+        const progressFill = document.getElementById('progress-fill');
+        if (progressFill) {
+            // Force a reflow to reset the animation
+            progressFill.style.display = 'none';
+            progressFill.offsetHeight; // Trigger reflow
+            progressFill.style.display = 'block';
+        }
+        
+        // Reset any spinning icons
+        const spinners = document.querySelectorAll('.fa-spinner.fa-spin');
+        spinners.forEach(spinner => {
+            const parent = spinner.parentElement;
+            if (parent && parent.tagName === 'BUTTON') {
+                if (parent.classList.contains('terminate-btn')) {
+                    parent.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
+                    parent.disabled = false;
+                }
+            }
+        });
+        
+        // Ensure the isTerminating flag is reset
+        isTerminating = false;
+    }
+
+    // Create a dynamic favicon
+    function createDynamicFavicon(emoji = '⚡') {
+        console.log(`Creating dynamic favicon with emoji: ${emoji}`);
+        
+        // Create a canvas element
+        const canvas = document.createElement('canvas');
+        canvas.width = 32;
+        canvas.height = 32;
+        
+        // Get the canvas context
+        const ctx = canvas.getContext('2d');
+        
+        // Clear the canvas with a transparent background
+        ctx.clearRect(0, 0, 32, 32);
+        
+        // Set the font size and font family
+        ctx.font = '24px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        
+        // Draw the emoji in the center of the canvas
+        ctx.fillText(emoji, 16, 16);
+        
+        // Convert canvas to favicon URL
+        const faviconUrl = canvas.toDataURL('image/png');
+        
+        // Find existing favicon or create a new one
+        let link = document.querySelector('link[rel="icon"]');
+        if (!link) {
+            link = document.createElement('link');
+            link.rel = 'icon';
+            link.id = 'dynamic-favicon';
+            document.head.appendChild(link);
+        }
+        
+        // Update the favicon
+        link.type = 'image/x-icon';
+        link.href = faviconUrl;
+        
+        return faviconUrl;
+    }
+
+    // Function to set favicon based on research mode
+    function setFavicon(mode) {
+        const emoji = mode === 'detailed' ? '🔬' : '⚡';
+        return createDynamicFavicon(emoji);
+    }
 });