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

local_deep_research/web/static/js/app.js

@@ -20,19 +20,25 @@ document.addEventListener('DOMContentLoaded', () => {
     // Add function to cleanup research resources globally
     window.cleanupResearchResources = function() {
         console.log('Cleaning up research resources');
+        
+        // Disconnect any active sockets
+        disconnectAllSockets();
+        
+        // Remove any active research data
+        if (window.currentResearchId) {
+            console.log(`Cleaning up research ID: ${window.currentResearchId}`);
+            window.currentResearchId = null;
+        }
+        
+        // Reset any active timers
         if (pollingInterval) {
             clearInterval(pollingInterval);
             pollingInterval = null;
+            console.log('Cleared polling interval during cleanup');
         }
-        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';
-        }
+        // Reset research state flags
+        isResearchInProgress = false;
     };
     
     // Initialize notification sounds
@@ -198,137 +204,342 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
     
-    // Helper function to connect to research updates
-    window.connectToResearchSocket = function(researchId) {
+    // Function to connect to socket for a research
+    window.connectToResearchSocket = async function(researchId) {
+        if (!researchId) {
+            console.error('No research ID provided for socket connection');
+            return;
+        }
+        
         try {
-            // Check if the research ID is valid
-            if (!researchId) {
-                console.error('Invalid research ID for socket connection');
-                return false;
-            }
+            // Check if research is terminated/suspended before connecting
+            const response = await fetch(getApiUrl(`/api/research/${researchId}`));
+            const data = await response.json();
             
-            // First disconnect any existing socket to avoid duplicates
-            window.disconnectSocket();
+            // Don't connect to socket for terminated or suspended research
+            if (data.status === 'suspended' || data.status === 'failed') {
+                console.log(`Not connecting socket for ${data.status} research ${researchId}`);
+                
+                // Make sure UI reflects the suspended state
+                updateTerminationUIState('suspended', `Research was ${data.status}`);
+                return;
+            }
+            // Don't connect to completed research
+            else if (data.status === 'completed') {
+                console.log(`Not connecting socket for completed research ${researchId}`);
+                return;
+            }
             
-            // Initialize socket if needed
-            socket = initializeSocket();
+            console.log(`Connecting to socket for research ${researchId} (status: ${data.status})`);
             
+            // Initialize socket if it doesn't exist
             if (!socket) {
-                console.error('Failed to initialize socket for research updates');
-                return false;
+                initializeSocket();
             }
             
-            // Subscribe to research updates
-            socket.emit('subscribe_to_research', { research_id: researchId });
-            
-            // Set up event listener for research progress
-            const progressEventName = `research_progress_${researchId}`;
+            // Subscribe to the research channel
+            if (socket && socket.connected) {
+                socket.emit('subscribe_to_research', { research_id: researchId });
+                console.log(`Subscribed to research ${researchId}`);
+            } else {
+                console.warn('Socket not connected, waiting for connection...');
+                // Wait for socket to connect
+                const maxAttempts = 5;
+                let attempts = 0;
+                
+                const socketConnectInterval = setInterval(() => {
+                    attempts++;
+                    if (socket && socket.connected) {
+                        socket.emit('subscribe_to_research', { research_id: researchId });
+                        console.log(`Subscribed to research ${researchId} after ${attempts} attempts`);
+                        clearInterval(socketConnectInterval);
+                    } else if (attempts >= maxAttempts) {
+                        console.error(`Failed to connect to socket after ${maxAttempts} attempts`);
+                        clearInterval(socketConnectInterval);
+                        addConsoleLog('Failed to connect to real-time updates', 'error');
+                    }
+                }, 1000);
+            }
+        } catch (error) {
+            console.error(`Error connecting to socket for research ${researchId}:`, error);
+        }
+    };
+
+    // Format the research status for display
+    function formatStatus(status) {
+        if (!status) return 'Unknown';
+        
+        // Handle in_progress specially
+        if (status === 'in_progress') return 'In Progress';
+        
+        // Capitalize first letter for other statuses
+        return status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
+    }
+
+    // Format the research mode for display
+    function formatMode(mode) {
+        if (!mode) return 'Unknown';
+        
+        return mode === 'detailed' ? 'Detailed Report' : 'Quick Summary';
+    }
+
+    // Format a date for display
+    function formatDate(date, duration = null) {
+        // Handle null/undefined gracefully
+        if (!date) return 'Unknown';
             
-            // Remove existing listeners to prevent duplicates
+        // Check if we have a date string instead of a Date object
+        if (typeof date === 'string') {
             try {
-                socket.off(progressEventName);
+                // Handle ISO string with microseconds (which causes problems)
+                if (date.includes('.') && date.includes('T')) {
+                    // Extract only up to milliseconds (3 digits after dot) or remove microseconds entirely
+                    const parts = date.split('.');
+                    if (parts.length > 1) {
+                        // If there's a Z or + or - after microseconds, preserve it
+                        let timezone = '';
+                        const microsecondPart = parts[1];
+                        const tzIndex = microsecondPart.search(/[Z+-]/);
+                        
+                        if (tzIndex !== -1) {
+                            timezone = microsecondPart.substring(tzIndex);
+                        }
+                        
+                        // Use only milliseconds (first 3 digits after dot) or none if format issues
+                        const milliseconds = microsecondPart.substring(0, Math.min(3, tzIndex !== -1 ? tzIndex : microsecondPart.length));
+                        
+                        // Reconstruct with controlled precision
+                        const cleanedDateStr = parts[0] + (milliseconds.length > 0 ? '.' + milliseconds : '') + timezone;
+                        date = new Date(cleanedDateStr);
+                    } else {
+                        date = new Date(date);
+                    }
+                } else {
+                    date = new Date(date);
+                }
             } catch (e) {
-                console.warn(`Error removing existing listeners for ${progressEventName}`, e);
+                console.warn('Error parsing date string:', e);
+                return 'Invalid date'; // Return error message if we can't parse
+            }
+        }
+        
+        // Ensure we're handling the date properly
+        if (!(date instanceof Date) || isNaN(date.getTime())) {
+            console.warn('Invalid date provided to formatDate:', date);
+            return 'Invalid date';
+        }
+        
+        // Get current year to compare with date year
+        const currentYear = new Date().getFullYear();
+        const dateYear = date.getFullYear();
+        
+        // Get month name, day, and time
+        const month = date.toLocaleString('en-US', { month: 'short' });
+        const day = date.getDate();
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        
+        // Format like "Feb 25, 08:09" or "Feb 25, 2022, 08:09" if not current year
+        let formattedDate;
+        if (dateYear === currentYear) {
+            formattedDate = `${month} ${day}, ${hours}:${minutes}`;
+        } else {
+            formattedDate = `${month} ${day}, ${dateYear}, ${hours}:${minutes}`;
+        }
+        
+        // Add duration if provided
+        if (duration) {
+            let durationText = '';
+            const durationSec = typeof duration === 'number' ? duration : parseInt(duration);
+            
+            if (durationSec < 60) {
+                durationText = `${durationSec}s`;
+            } else if (durationSec < 3600) {
+                durationText = `${Math.floor(durationSec / 60)}m ${durationSec % 60}s`;
+            } else {
+                durationText = `${Math.floor(durationSec / 3600)}h ${Math.floor((durationSec % 3600) / 60)}m`;
+            }
+            
+            formattedDate += ` (Duration: ${durationText})`;
+        }
+        
+        return formattedDate;
+    }
+
+    // Update the socket event handler to fix termination handling
+    window.handleResearchProgressEvent = function(data) {
+        console.log('Research progress update:', data);
+        
+        // Extract research ID from the event
+        const eventResearchId = getActiveResearchId();
+        
+        // Track processed messages to prevent duplicates
+        window.processedMessages = window.processedMessages || new Set();
+        
+        // Add to console log if there's a message
+        if (data.message) {
+            let logType = 'info';
+            
+            // Create a unique identifier for this message (message + timestamp if available)
+            const messageId = data.message + (data.log_entry?.time || '');
+            
+            // Check if we've already processed this message
+            if (!window.processedMessages.has(messageId)) {
+                window.processedMessages.add(messageId);
+                
+                // Determine log type based on status or message content
+                if (data.status === 'failed' || data.status === 'suspended' || data.status === 'terminating') {
+                    logType = 'error';
+                } else if (isMilestoneLog(data.message, data.log_entry?.metadata)) {
+                    logType = 'milestone';
+                }
+                
+                // Store meaningful messages to avoid overwriting with generic messages
+                if (data.message && data.message !== 'Processing research...') {
+                    window.lastMeaningfulStatusMessage = data.message;
+                }
+                
+                // Extract metadata for search engine information
+                const metadata = data.log_entry?.metadata || null;
+                
+                // Pass metadata to addConsoleLog for potential search engine info
+                // Pass the research ID to respect the current viewing context
+                addConsoleLog(data.message, logType, metadata, eventResearchId);
             }
+        }
+        
+        // Add error messages to log
+        if (data.error && !window.processedMessages.has('error:' + data.error)) {
+            window.processedMessages.add('error:' + data.error);
+            addConsoleLog(data.error, 'error', null, eventResearchId);
             
-            // Add new listener
-            socket.on(progressEventName, (data) => {
-                console.log('Received research progress update:', data);
+            // Store error as last meaningful message
+            window.lastMeaningfulStatusMessage = data.error;
+        }
+        
+        // Update progress UI if progress is provided
+        if (data.progress !== undefined) {
+            const displayMessage = data.message || window.lastMeaningfulStatusMessage || 'Processing research...';
+            updateProgressUI(data.progress, data.status, displayMessage);
+        }
+        
+        // Update detail log if log_entry is provided
+        if (data.log_entry) {
+            updateDetailLogEntry(data.log_entry);
+        }
+        
+        // Handle status changes
+        if (data.status) {
+            // Special handling for terminating status and handling already terminated research
+            if (data.status === 'terminating') {
+                // Immediately mark as suspended and update UI
+                isResearchInProgress = false;
                 
-                // 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 (pollingInterval) {
-                        console.log('Clearing polling interval from socket event');
-                        clearInterval(pollingInterval);
-                        pollingInterval = null;
-                    }
-                    
-                    // Load the results
-                    loadResearch(researchId);
-                    
-                    // Play notification sound
-                    console.log('Playing success notification sound from socket event');
+                // Update UI state
+                updateTerminationUIState('suspending', data.message || 'Terminating research...');
+            }
+            // Handle suspended research specifically
+            else if (data.status === 'suspended') {
+                console.log('Research was suspended, updating UI directly');
+                
+                const researchId = getActiveResearchId();
+                if (!researchId) return;
+                
+                // Mark research as not in progress
+                isResearchInProgress = false;
+                
+                // Clear polling interval
+                if (pollingInterval) {
+                    console.log('Clearing polling interval due to suspension');
+                    clearInterval(pollingInterval);
+                    pollingInterval = null;
+                }
+                
+                // Play error notification sound
+                playNotificationSound('error');
+                
+                // Update UI for suspended research
+                updateTerminationUIState('suspended', data.message || 'Research was suspended');
+                
+                // Add console log
+                addConsoleLog('Research suspended', 'error');
+                
+                // Reset lastMeaningfulStatusMessage for next research
+                window.lastMeaningfulStatusMessage = '';
+                
+                // Reset current research ID
+                currentResearchId = null;
+                window.currentResearchId = null;
+                
+                // Update navigation
+                updateNavigationBasedOnResearchStatus();
+                
+                // Refresh history if on history page
+                if (document.getElementById('history').classList.contains('active')) {
+                    loadResearchHistory();
+                }
+            }
+            // Handle completion states
+            else if (data.status === 'completed' || data.status === 'failed') {
+                const researchId = getActiveResearchId();
+                if (!researchId) return;
+                
+                // Mark research as not in progress
+                isResearchInProgress = false;
+                
+                // Clear polling interval
+                if (pollingInterval) {
+                    console.log('Clearing polling interval from socket event');
+                    clearInterval(pollingInterval);
+                    pollingInterval = null;
+                }
+                
+                if (data.status === 'completed') {
+                    // Success sound and notification
                     playNotificationSound('success');
                     
-                    // Clean up resources
-                    window.cleanupResearchResources();
+                    // Store the completed research ID for navigation
+                    const completedResearchId = researchId;
                     
-                    // Update navigation and research status display
-                    updateNavigationBasedOnResearchStatus();
+                    // Reset current research ID
+                    currentResearchId = null;
+                    window.currentResearchId = null;
                     
-                    // Update history item status if on history page
-                    updateHistoryItemStatus(researchId, 'completed');
+                    // Reset lastMeaningfulStatusMessage for next research
+                    window.lastMeaningfulStatusMessage = '';
                     
-                    // 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;
-                    }
-                    
-                    // 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 navigation state
+                    updateNavigationBasedOnResearchStatus();
                     
-                    // Update history item status if on history page
-                    updateHistoryItemStatus(researchId, data.status, errorText);
+                    // Navigate to results page with a slight delay to ensure all updates are processed
+                    setTimeout(() => {
+                        // Load the research results
+                        loadResearch(completedResearchId);
+                    }, 800);
+                } else {
+                    // Error sound and notification
+                    playNotificationSound('error');
                     
-                    // Update navigation
-                    updateNavigationBasedOnResearchStatus();
+                    // Use the updateTerminationUIState function for consistency
+                    updateTerminationUIState('suspended', data.error || `Research was ${data.status}`);
                     
-                    if (data.status === 'failed') {
-                        console.log('Playing error notification sound from socket event');
-                        playNotificationSound('error');
-                    }
+                    // Reset lastMeaningfulStatusMessage for next research
+                    window.lastMeaningfulStatusMessage = '';
                     
-                    // Clean up resources
-                    window.cleanupResearchResources();
+                    // Reset current research ID
+                    currentResearchId = null;
+                    window.currentResearchId = null;
                     
-                    // Update navigation and research status display
+                    // Update navigation - important for correctly showing/hiding various elements
+                    // based on the current research state
                     updateNavigationBasedOnResearchStatus();
-                    
-                    // Dispatch event for any other components that need to know about completion
-                    document.dispatchEvent(new CustomEvent('research_completed', { detail: data }));
                 }
                 
-                // Update the detailed log if on details page
-                if (data.log_entry && document.getElementById('research-log')) {
-                    updateDetailLogEntry(data.log_entry);
+                // Refresh the history list to show the completed research
+                if (document.getElementById('history').classList.contains('active')) {
+                    loadResearchHistory();
                 }
-            });
-            
-            return true;
-        } catch (e) {
-            console.error('Error connecting to research socket:', e);
-            return false;
+            }
         }
     };
     
@@ -412,225 +623,320 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Function to start research
     async function startResearch(query, mode) {
-        // Reset potentially stale state
-        if (isResearchInProgress) {
-            // 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);
-            }
+        // First validate that we have a query
+        if (!query || query.trim() === '') {
+            alert('Please enter a query');
+            return;
         }
         
-        // Get the start button
-        const startResearchBtn = document.getElementById('start-research-btn');
-        if (!startResearchBtn) return;
-        
-        // Disable the start button while we attempt to start the research
-        startResearchBtn.disabled = true;
-        startResearchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Starting...';
-        
         try {
-            // Set the favicon based on research mode
-            setFavicon(mode);
+            // Update button state
+            const startBtn = document.getElementById('start-research-btn');
+            if (startBtn) {
+                startBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Starting...';
+                startBtn.disabled = true;
+            }
+            
+            // Clear any previous research
+            resetResearchState();
+            
+            // Set favicon to loading
+            setFavicon('loading');
             
+            // Get the current query element
+            const currentQueryEl = document.getElementById('current-query');
+            if (currentQueryEl) {
+                currentQueryEl.textContent = query;
+            }
+            
+            // Create payload
+            const payload = {
+                query: query,
+                mode: mode || 'quick'
+            };
+            
+            // Call the API
             const response = await fetch(getApiUrl('/api/start_research'), {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({
-                    query: query,
-                    mode: mode
-                })
+                body: JSON.stringify(payload)
             });
             
-            const data = await response.json();
+            // Parse the response
+            const result = await response.json();
             
-            if (data.status === 'success') {
+            if (result.status === 'success') {
+                // Update the current research ID
+                currentResearchId = result.research_id;
+                window.currentResearchId = result.research_id;
+                
+                console.log(`Started research with ID: ${currentResearchId}`);
+                
+                // Mark as in progress
                 isResearchInProgress = true;
-                currentResearchId = data.research_id;
                 
-                // Also update the window object
-                window.currentResearchId = data.research_id;
+                // Hide the try again button if visible
+                const tryAgainBtn = document.getElementById('try-again-btn');
+                if (tryAgainBtn) {
+                    tryAgainBtn.style.display = 'none';
+                }
                 
-                // Update the navigation to show Research in Progress
+                // Reset progress UI
+                updateProgressUI(0, 'in_progress', `Researching: ${query}`);
+
+                // Store query in case we need to display it again
+                window.currentResearchQuery = query;
+
+                // Update navigation
                 updateNavigationBasedOnResearchStatus();
                 
-                // Update progress page
-                document.getElementById('current-query').textContent = query;
-                document.getElementById('progress-fill').style.width = '0%';
-                document.getElementById('progress-percentage').textContent = '0%';
-                document.getElementById('progress-status').textContent = 'Initializing research process...';
-                
-                // Navigate to progress page
+                // Navigate to the progress page
                 switchPage('research-progress');
                 
-                // Connect to socket for this research
-                window.connectToResearchSocket(data.research_id);
+                // Connect to the socket for this research
+                window.connectToResearchSocket(currentResearchId);
                 
                 // Start polling for status
-                pollResearchStatus(data.research_id);
-                
-                // Show the terminate button
-                const terminateBtn = document.getElementById('terminate-research-btn');
-                if (terminateBtn) {
-                    terminateBtn.style.display = 'inline-flex';
-                    terminateBtn.disabled = false;
-                }
+                pollResearchStatus(currentResearchId);
             } else {
-                // Reset favicon to default on error
-                createDynamicFavicon('⚡');
+                // Handle error
+                const errorMessage = result.message || 'Failed to start research';
+                console.error('Research start error:', errorMessage);
+                
+                // Add error to log
+                addConsoleLog(`Error: ${errorMessage}`, 'error');
+                
+                alert(errorMessage);
+                
+                // Reset the favicon
+                setFavicon('default');
                 
-                alert('Error starting research: ' + (data.message || 'Unknown error'));
-                startResearchBtn.disabled = false;
-                startResearchBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
+                // Reset button state
+                if (startBtn) {
+                    startBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
+                    startBtn.disabled = false;
+                }
             }
         } catch (error) {
-            // Reset favicon to default on error
-            createDynamicFavicon('⚡');
+            console.error('Error starting research:', error);
+            
+            // Add error to log
+            addConsoleLog(`Error: ${error.message}`, 'error');
+            
+            // Reset the favicon
+            setFavicon('default');
+            
+            // Reset button state
+            const startBtn = document.getElementById('start-research-btn');
+            if (startBtn) {
+                startBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
+                startBtn.disabled = false;
+            }
             
-            console.error('Error:', error);
             alert('An error occurred while starting the research. Please try again.');
-            startResearchBtn.disabled = false;
-            startResearchBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
         }
     }
     
-    // Function to poll research status (as a backup to socket.io)
+    // Function to clear any existing polling interval
+    function clearPollingInterval() {
+        if (pollingInterval) {
+            console.log('Clearing existing polling interval');
+            clearInterval(pollingInterval);
+            pollingInterval = null;
+        }
+    }
+    
+    // Update the polling function to prevent "Processing research..." from overwriting actual status messages
     function pollResearchStatus(researchId) {
-        console.log(`Polling research status for ID: ${researchId}`);
-        fetch(getApiUrl(`/api/research/${researchId}`))
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Server returned ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(data => {
-            console.log('Research status response:', data);
-            
-            // 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 (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');
-                    clearInterval(pollingInterval);
-                    pollingInterval = null;
+        if (!researchId) {
+            console.error('No research ID provided for polling');
+            return;
+        }
+        
+        // Reset message deduplication when starting a new poll
+        window.processedMessages = window.processedMessages || new Set();
+        
+        // Don't set "Loading research..." here, as we'll set the actual query from the response
+        // Only set loading if currentQuery is empty
+        const currentQueryEl = document.getElementById('current-query');
+        if (currentQueryEl && (!currentQueryEl.textContent || currentQueryEl.textContent === 'Loading research...')) {
+            currentQueryEl.textContent = window.currentResearchQuery || 'Loading research...';
+        }
+        
+        console.log(`Starting polling for research ${researchId}`);
+        
+        // Store the last real message to avoid overwriting with generic messages
+        window.lastMeaningfulStatusMessage = window.lastMeaningfulStatusMessage || '';
+        
+        // Ensure we have a socket connection
+        if (typeof window.connectToResearchSocket === 'function') {
+            window.connectToResearchSocket(researchId);
+        }
+        
+        // Set polling interval for updates
+        if (pollingInterval) {
+            clearInterval(pollingInterval);
+        }
+        
+        // Make an immediate request
+        checkResearchStatus(researchId);
+        
+        // Then set up polling
+        pollingInterval = setInterval(() => {
+            checkResearchStatus(researchId);
+        }, 2000); // Poll every 2 seconds
+        
+        // Function to check research status
+        function checkResearchStatus(researchId) {
+            fetch(getApiUrl(`/api/research/${researchId}/details`))
+            .then(response => response.json())
+            .then(data => {
+                // Update the current query with the actual query from the research
+                const currentQueryEl = document.getElementById('current-query');
+                if (currentQueryEl && data.query) {
+                    currentQueryEl.textContent = data.query;
+                    // Store the query in case we need it later
+                    window.currentResearchQuery = data.query;
                 }
                 
-                // Update UI for completion
-                if (status === 'completed') {
-                    console.log('Research completed, loading results automatically');
-                    // Hide the terminate button
-                    const terminateBtn = document.getElementById('terminate-research-btn');
-                    if (terminateBtn) {
-                        terminateBtn.style.display = 'none';
-                    }
-                    
-                    // Update history item status
-                    updateHistoryItemStatus(researchId, 'completed');
+                // Process status update
+                if (data && data.status !== 'error') {
+                    // Update UI with progress
+                    const progress = data.progress || 0;
+                    const status = data.status || 'in_progress';
                     
-                    // Auto-load the results instead of showing a button
-                    loadResearch(researchId);
-                } else if (status === 'failed' || status === 'suspended') {
-                    console.log(`Showing error message for status: ${status}`);
+                    // Get most recent message
+                    let message = '';
+                    let foundNewMessage = false;
+                    let latestMetadata = null;
                     
-                    // 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;
+                    if (data.log && data.log.length > 0) {
+                        // Get the latest unique log entry
+                        for (let i = data.log.length - 1; i >= 0; i--) {
+                            const latestLog = data.log[i];
+                            const messageId = latestLog.message + (latestLog.time || '');
+                            
+                            if (!window.processedMessages.has(messageId)) {
+                                window.processedMessages.add(messageId);
+                                message = latestLog.message || '';
+                                latestMetadata = latestLog.metadata || null;
+                                
+                                // Only update the lastMeaningfulStatusMessage if we have a real message
+                                if (message && message !== 'Processing research...') {
+                                    window.lastMeaningfulStatusMessage = message;
+                                    foundNewMessage = true;
+                                }
+                                
+                                // Add to console logs
+                                if (message) {
+                                    let logType = 'info';
+                                    if (isMilestoneLog(message, latestLog.metadata)) {
+                                        logType = 'milestone';
+                                    } else if (latestLog.type === 'error' || (latestLog.metadata && latestLog.metadata.phase === 'error')) {
+                                        logType = 'error';
+                                    } else if (latestLog.type) {
+                                        logType = latestLog.type; // Use the type from the database if available
+                                    }
+                                    addConsoleLog(message, logType, latestMetadata);
+                                }
+                                
+                                break; // Only process one message per poll
                             }
-                        } 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 = errorText;
-                        console.log('Set error message to:', errorText);
-                    } else {
-                        console.error('error-message element not found');
-                    }
+                    // Use a meaningful message if available; otherwise, keep the last good one
+                    const displayMessage = foundNewMessage ? message :
+                                          (window.lastMeaningfulStatusMessage || 'Processing research...');
                     
-                    // Update progress display with error
-                    updateProgressUI(0, status, errorText);
+                    // Update progress UI
+                    updateProgressUI(progress, status, displayMessage);
                     
-                    // Update history item status
-                    updateHistoryItemStatus(researchId, status, errorText);
-                }
-                
-                // Play notification sound based on status
-                if (status === 'completed') {
-                    console.log('Playing success notification sound');
-                    playNotificationSound('success');
-                } else if (status === 'failed') {
-                    console.log('Playing error notification sound');
-                    playNotificationSound('error');
-                }
-                
-                // Update the navigation
-                console.log('Updating navigation based on research status');
-                updateNavigationBasedOnResearchStatus();
-                
-                // Force the UI to update with a manual trigger
-                document.dispatchEvent(new CustomEvent('research_completed', { detail: data }));
-                
-                return;
-            }
-            
-            // Continue polling if still in progress
-            if (status === 'in_progress') {
-                console.log('Research is still in progress, continuing polling');
-                if (!pollingInterval) {
-                    console.log('Setting up polling interval');
-                    pollingInterval = setInterval(() => {
-                        pollResearchStatus(researchId);
-                    }, 10000);
+                    // Update the UI based on research status
+                    if (status === 'completed' || status === 'failed' || status === 'suspended') {
+                        // Clear polling interval
+                        if (pollingInterval) {
+                            console.log('Clearing polling interval due to status change');
+                            clearInterval(pollingInterval);
+                            pollingInterval = null;
+                        }
+                        
+                        // Handle completion or failure
+                        if (status === 'completed') {
+                            addConsoleLog('Research completed successfully', 'milestone');
+                            playNotificationSound('success');
+                            
+                            // Store the completed research ID for navigation
+                            const completedResearchId = researchId;
+                            
+                            // Reset current research ID
+                            currentResearchId = null;
+                            window.currentResearchId = null;
+                            
+                            // Update navigation state
+                            isResearchInProgress = false;
+                            updateNavigationBasedOnResearchStatus();
+                            
+                            // Reset lastMeaningfulStatusMessage for next research
+                            window.lastMeaningfulStatusMessage = '';
+                            
+                            // Navigate to results page with a slight delay to ensure all updates are processed
+                            setTimeout(() => {
+                                // Load the research results
+                                loadResearch(completedResearchId);
+                            }, 800);
+                        } else {
+                            addConsoleLog(`Research ${status}`, 'error');
+                            playNotificationSound('error');
+                            
+                            // Show error message and Try Again button
+                            const errorMessage = document.getElementById('error-message');
+                            const tryAgainBtn = document.getElementById('try-again-btn');
+                            
+                            if (errorMessage) {
+                                errorMessage.textContent = data.error || `Research was ${status}`;
+                                errorMessage.style.display = 'block';
+                            }
+                            
+                            if (tryAgainBtn) {
+                                tryAgainBtn.style.display = 'block';
+                            }
+                            
+                            // Reset lastMeaningfulStatusMessage for next research
+                            window.lastMeaningfulStatusMessage = '';
+                            
+                            // Update navigation
+                            isResearchInProgress = false;
+                            currentResearchId = null;
+                            window.currentResearchId = null;
+                            updateNavigationBasedOnResearchStatus();
+                        }
+                    } else {
+                        // Research is still in progress
+                        isResearchInProgress = true;
+                        currentResearchId = researchId;
+                        window.currentResearchId = researchId;
+                    }
                 }
-            }
-        })
-        .catch(error => {
-            console.error('Error polling research status:', error);
-        });
+            })
+            .catch(error => {
+                console.error('Error polling research status:', error);
+                // Don't clear the interval on error - just keep trying
+            });
+        }
     }
     
+    // Function to reset the start research button to its default state
+    function resetStartResearchButton() {
+        const startBtn = document.getElementById('start-research-btn');
+        if (startBtn) {
+            startBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
+            startBtn.disabled = false;
+        }
+    }
+
     // Main initialization function
     function initializeApp() {
         console.log('Initializing application...');
@@ -638,14 +944,33 @@ document.addEventListener('DOMContentLoaded', () => {
         // Initialize the sounds
         initializeSounds();
         
+        // Initialize socket connection
+        initializeSocket();
+        
         // Create a dynamic favicon with the lightning emoji by default
         createDynamicFavicon('⚡');
         
+        // Add try again button handler
+        const tryAgainBtn = document.getElementById('try-again-btn');
+        if (tryAgainBtn) {
+            tryAgainBtn.addEventListener('click', function() {
+                // Switch back to the new research page
+                switchPage('new-research');
+                
+                // Reset the research state
+                resetResearchState();
+                
+                // Reset the Start Research button
+                resetStartResearchButton();
+            });
+        }
+        
         // Get navigation elements
         const navItems = document.querySelectorAll('.sidebar-nav li');
         const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
         const pages = document.querySelectorAll('.page');
         const mobileTabBar = document.querySelector('.mobile-tab-bar');
+        const logo = document.getElementById('logo-link');
         
         // Handle responsive navigation based on screen size
         function handleResponsiveNavigation() {
@@ -667,6 +992,14 @@ document.addEventListener('DOMContentLoaded', () => {
         // Add resize listener for responsive design
         window.addEventListener('resize', handleResponsiveNavigation);
         
+        // Handle logo click
+        if (logo) {
+            logo.addEventListener('click', () => {
+                switchPage('new-research');
+                resetStartResearchButton();
+            });
+        }
+        
         // Setup navigation click handlers
         navItems.forEach(item => {
             if (!item.classList.contains('external-link')) {
@@ -674,6 +1007,10 @@ document.addEventListener('DOMContentLoaded', () => {
                     const pageId = this.dataset.page;
                     if (pageId) {
                         switchPage(pageId);
+                        // Reset Start Research button when returning to the form
+                        if (pageId === 'new-research') {
+                            resetStartResearchButton();
+                        }
                     }
                 });
             }
@@ -685,6 +1022,10 @@ document.addEventListener('DOMContentLoaded', () => {
                     const pageId = this.dataset.page;
                     if (pageId) {
                         switchPage(pageId);
+                        // Reset Start Research button when returning to the form
+                        if (pageId === 'new-research') {
+                            resetStartResearchButton();
+                        }
                     }
                 });
             }
@@ -738,44 +1079,41 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Function to switch between pages
     function switchPage(pageId) {
-        // Get elements directly from the DOM
+        // First hide all pages
         const pages = document.querySelectorAll('.page');
-        const navItems = document.querySelectorAll('.sidebar-nav li');
-        const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
+        pages.forEach(page => page.classList.remove('active'));
         
-        // Remove active class from all pages
-        pages.forEach(page => {
-            page.classList.remove('active');
-        });
-        
-        // Add active class to target page
-        const targetPage = document.getElementById(pageId);
-        if (targetPage) {
-            targetPage.classList.add('active');
+        // Then activate the selected page
+        const selectedPage = document.getElementById(pageId);
+        if (selectedPage) {
+            selectedPage.classList.add('active');
         }
         
-        // Update sidebar navigation active states
-        navItems.forEach(item => {
-            if (item.getAttribute('data-page') === pageId) {
-                item.classList.add('active');
-            } else {
-                item.classList.remove('active');
-            }
-        });
+        // Update the URL hash
+        window.location.hash = '#' + pageId;
         
-        // Update mobile tab bar active states
-        mobileNavItems.forEach(item => {
-            if (item.getAttribute('data-page') === pageId) {
-                item.classList.add('active');
-            } else {
-                item.classList.remove('active');
-            }
-        });
+        // Update the navigation UI to highlight the active page
+        updateNavigationUI(pageId);
+        
+        // Clear console logs when switching to pages that don't show research details
+        if (pageId === 'new-research' || pageId === 'history') {
+            clearConsoleLogs();
+            // Reset the viewing research ID when navigating to non-research pages
+            viewingResearchId = null;
+        }
         
         // Special handling for history page
         if (pageId === 'history') {
             loadResearchHistory();
         }
+        
+        // Reset scroll position for the newly activated page
+        window.scrollTo(0, 0);
+        
+        console.log(`Switched to page: ${pageId}`);
+        
+        // Update the log panel visibility
+        updateLogPanelVisibility(pageId);
     }
     
     // Track termination status
@@ -794,15 +1132,41 @@ document.addEventListener('DOMContentLoaded', () => {
         return `/research${path}`;
     }
     
-    // Function to terminate research - exposed to window object
+    // Function to properly disconnect all socket connections 
+    function disconnectAllSockets() {
+        if (socket) {
+            try {
+                console.log('Disconnecting all socket connections');
+                
+                // Get the active research ID
+                const researchId = getActiveResearchId();
+                
+                // If there's an active research, unsubscribe first
+                if (researchId) {
+                    console.log(`Unsubscribing from research ${researchId}`);
+                    socket.emit('unsubscribe_from_research', { research_id: researchId });
+                }
+                
+                // Also attempt to disconnect the socket
+                socket.disconnect();
+                socket = null;
+                
+                console.log('Socket disconnected successfully');
+            } catch (error) {
+                console.error('Error disconnecting socket:', error);
+            }
+        }
+    }
+    
+    // Update the terminateResearch function to handle termination more gracefully
     async function terminateResearch(researchId) {
         if (!researchId) {
             console.error('No research ID provided for termination');
             return;
         }
-
+        
         // Prevent multiple termination requests
-        if (isTerminating) {
+        if (document.getElementById('terminate-research-btn')?.disabled) {
             console.log('Termination already in progress');
             return;
         }
@@ -812,97 +1176,219 @@ document.addEventListener('DOMContentLoaded', () => {
             return;
         }
         
+        console.log(`Attempting to terminate research: ${researchId}`);
+        
         try {
-            // Set terminating flag
-            isTerminating = true;
-            
-            // Update UI to show we're processing
+            // Get the terminate button
             const terminateBtn = document.getElementById('terminate-research-btn');
             if (terminateBtn) {
+                // Disable the button to prevent multiple clicks
                 terminateBtn.disabled = true;
                 terminateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Terminating...';
             }
-
-            // Find all terminate buttons in history items and disable them
-            const allTerminateBtns = document.querySelectorAll('.terminate-btn');
-            allTerminateBtns.forEach(btn => {
-                if (btn !== terminateBtn) {
-                    btn.disabled = true;
-                    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Terminating...';
-                }
-            });
             
-            // Call the terminate API
+            // Update UI to show terminating state immediately
+            updateTerminationUIState('suspending', 'Terminating research...');
+            
+            // Add a log entry
+            addConsoleLog('Terminating research...', 'error');
+            
+            // Immediately mark the research as terminated in our app state 
+            // so we don't reconnect to it
+            isResearchInProgress = false;
+            
+            // Disconnect all sockets to ensure we stop receiving updates
+            disconnectAllSockets();
+            
+            // Clear the polling interval immediately
+            if (pollingInterval) {
+                clearInterval(pollingInterval);
+                pollingInterval = null;
+                console.log('Cleared polling interval during termination');
+            }
+            
+            // Call the API to terminate
             const response = await fetch(getApiUrl(`/api/research/${researchId}/terminate`), {
-                method: 'POST'
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
             });
             
             const data = await response.json();
             
             if (data.status === 'success') {
-                // The UI will be updated via socket events or polling
-                console.log('Termination request sent successfully');
+                console.log(`Research ${researchId} termination requested successfully`);
                 
-                // If we're on the history page, update the status of this item
-                if (document.getElementById('history').classList.contains('active')) {
-                    updateHistoryItemStatus(researchId, 'terminating', 'Terminating...');
-                }
+                // Add termination log
+                addConsoleLog('Research termination requested. Please wait...', 'error');
                 
-                // Set a timeout to reset UI if socket doesn't respond
-                setTimeout(() => {
-                    if (isTerminating) {
-                        console.log('Termination timeout - resetting UI');
-                        isTerminating = false;
-                        resetProgressAnimations();
+                // Immediately update UI for better responsiveness
+                updateTerminationUIState('suspended', 'Research was terminated');
+                
+                // Start polling for the suspended status with a more reliable approach
+                let checkAttempts = 0;
+                const maxAttempts = 3; // Reduced from 5
+                const checkInterval = setInterval(async () => {
+                    checkAttempts++;
+                    console.log(`Checking termination status (attempt ${checkAttempts}/${maxAttempts})...`);
+                    
+                    try {
+                        const statusResponse = await fetch(getApiUrl(`/api/research/${researchId}`));
+                        const statusData = await statusResponse.json();
+                        
+                        // Check for actual termination status in the response
+                        if (statusData.status === 'suspended' || statusData.status === 'failed') {
+                            console.log(`Research is now ${statusData.status}, updating UI`);
+                            clearInterval(checkInterval);
+                            
+                            // Reset research state
+                            currentResearchId = null;
+                            window.currentResearchId = null;
+                            
+                            // Disconnect any remaining sockets again, just to be sure
+                            disconnectAllSockets();
+                            
+                            // Update navigation
+                            updateNavigationBasedOnResearchStatus();
+                            
+                            return;
+                        }
                         
-                        // Update the navigation
-                        updateNavigationBasedOnResearchStatus();
+                        // If we reach the maximum attempts but status isn't updated yet
+                        if (checkAttempts >= maxAttempts) {
+                            console.log('Max termination check attempts reached, forcing UI update');
+                            clearInterval(checkInterval);
+                            
+                            // Force update to suspended state even if backend hasn't caught up yet
+                            currentResearchId = null;
+                            window.currentResearchId = null;
+                            
+                            // Disconnect any remaining sockets
+                            disconnectAllSockets();
+                            
+                            // Update database status directly with a second termination request
+                            try {
+                                console.log('Sending second termination request to ensure completion');
+                                await fetch(getApiUrl(`/api/research/${researchId}/terminate`), {
+                                    method: 'POST',
+                                    headers: { 'Content-Type': 'application/json' }
+                                });
+                            } catch (secondError) {
+                                console.error('Error sending second termination request:', secondError);
+                            }
+                            
+                            updateNavigationBasedOnResearchStatus();
+                        }
+                    } catch (checkError) {
+                        console.error(`Error checking termination status: ${checkError}`);
+                        if (checkAttempts >= maxAttempts) {
+                            clearInterval(checkInterval);
+                            updateTerminationUIState('error', 'Error checking termination status');
+                        }
                     }
-                }, 10000); // 10 second timeout
-            } else {
-                console.error('Termination request failed:', data.message);
-                alert(`Failed to terminate research: ${data.message}`);
+                }, 300); // Check faster for more responsive feedback
                 
-                // Reset the terminating flag
-                isTerminating = false;
+            } else {
+                console.error(`Error terminating research: ${data.message}`);
+                addConsoleLog(`Error terminating research: ${data.message}`, 'error');
                 
-                // Reset the button
+                // Re-enable the button
                 if (terminateBtn) {
                     terminateBtn.disabled = false;
                     terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
                 }
-                
-                // Reset history button states
-                const allTerminateBtns = document.querySelectorAll('.terminate-btn');
-                allTerminateBtns.forEach(btn => {
-                    if (btn !== terminateBtn) {
-                        btn.disabled = false;
-                        btn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate';
-                    }
-                });
             }
         } catch (error) {
-            console.error('Error terminating research:', error);
-            alert('An error occurred while trying to terminate the research.');
+            console.error(`Error in terminate request: ${error}`);
+            addConsoleLog(`Error in terminate request: ${error}`, 'error');
             
-            // Reset the terminating flag
-            isTerminating = false;
-            
-            // Reset the button
+            // Re-enable the button
             const terminateBtn = document.getElementById('terminate-research-btn');
             if (terminateBtn) {
                 terminateBtn.disabled = false;
                 terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
             }
-            
-            // Reset history button states
-            const allTerminateBtns = document.querySelectorAll('.terminate-btn');
-            allTerminateBtns.forEach(btn => {
-                if (btn !== terminateBtn) {
-                    btn.disabled = false;
-                    btn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate';
+        }
+    }
+
+    // Helper function to update UI elements during termination
+    function updateTerminationUIState(state, message) {
+        const terminateBtn = document.getElementById('terminate-research-btn');
+        const errorMessage = document.getElementById('error-message');
+        const tryAgainBtn = document.getElementById('try-again-btn');
+        const progressStatus = document.getElementById('progress-status');
+        const progressBar = document.getElementById('progress-bar');
+        
+        switch (state) {
+            case 'suspending':
+                if (progressStatus) {
+                    progressStatus.textContent = 'Terminating research...';
+                    progressStatus.className = 'progress-status status-terminating fade-in';
                 }
-            });
+                if (progressBar) {
+                    progressBar.classList.remove('suspended-status');
+                }
+                if (terminateBtn) {
+                    terminateBtn.disabled = true;
+                    terminateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Terminating...';
+                }
+                if (errorMessage) {
+                    errorMessage.style.display = 'none';
+                }
+                if (tryAgainBtn) {
+                    tryAgainBtn.style.display = 'none';
+                }
+                break;
+                
+            case 'suspended':
+                if (progressStatus) {
+                    progressStatus.innerHTML = '<i class="fas fa-exclamation-triangle termination-icon"></i> ' + (message || 'Research was suspended');
+                    progressStatus.className = 'progress-status status-failed fade-in';
+                }
+                if (progressBar) {
+                    progressBar.classList.add('suspended-status');
+                }
+                if (terminateBtn) {
+                    terminateBtn.style.display = 'none';
+                }
+                if (errorMessage) {
+                    // Hide the error message box completely
+                    errorMessage.style.display = 'none';
+                }
+                if (tryAgainBtn) {
+                    tryAgainBtn.style.display = 'block';
+                    // Update try again button to be more attractive
+                    tryAgainBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Try Again';
+                    tryAgainBtn.className = 'btn btn-primary fade-in';
+                }
+                
+                // Update page title to show suspension
+                document.title = '⚠️ Research Suspended - Local Deep Research';
+                
+                break;
+                
+            case 'error':
+                if (progressStatus) {
+                    progressStatus.innerHTML = '<i class="fas fa-exclamation-circle termination-icon"></i>' + (message || 'Error terminating research');
+                    progressStatus.className = 'progress-status status-failed fade-in';
+                }
+                if (progressBar) {
+                    progressBar.classList.remove('suspended-status');
+                }
+                if (terminateBtn) {
+                    terminateBtn.disabled = false;
+                    terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
+                }
+                if (errorMessage) {
+                    errorMessage.innerHTML = '<i class="fas fa-exclamation-circle termination-icon"></i>' + (message || 'Error terminating research');
+                    errorMessage.style.display = 'block';
+                    errorMessage.className = 'error-message fade-in';
+                }
+                if (tryAgainBtn) {
+                    tryAgainBtn.style.display = 'none';
+                }
+                break;
         }
     }
     
@@ -1211,6 +1697,32 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Function to navigate to research progress
     function navigateToResearchProgress(research) {
+        // Set the current viewing research ID
+        viewingResearchId = research.id;
+        
+        // First check if the research is already terminated/suspended
+        if (research.status === 'suspended' || research.status === 'failed') {
+            // Switch to the progress page with terminated state
+            switchPage('research-progress');
+            
+            // Show the query
+            document.getElementById('current-query').textContent = research.query || '';
+            
+            // Update UI for terminated state
+            updateTerminationUIState('suspended', `Research was ${research.status}`);
+            
+            // Update progress percentage
+            const progress = research.progress || 0;
+            document.getElementById('progress-fill').style.width = `${progress}%`;
+            document.getElementById('progress-percentage').textContent = `${progress}%`;
+            
+            // Load logs for this research
+            loadLogsForResearch(research.id);
+            
+            // Don't connect to socket or start polling for terminated research
+            return;
+        }
+        
         document.getElementById('current-query').textContent = research.query;
         document.getElementById('progress-fill').style.width = `${research.progress || 0}%`;
         document.getElementById('progress-percentage').textContent = `${research.progress || 0}%`;
@@ -1218,6 +1730,9 @@ document.addEventListener('DOMContentLoaded', () => {
         // Navigate to progress page
         switchPage('research-progress');
         
+        // Load logs for this research
+        loadLogsForResearch(research.id);
+        
         // Connect to socket for this research
         window.connectToResearchSocket(research.id);
         
@@ -1244,165 +1759,204 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
     
-    // Function to load research
+    // Update the loadResearch function to handle terminated/suspended research better
     async function loadResearch(researchId) {
         try {
-            const response = await fetch(getApiUrl(`/api/research/${researchId}`));
-            if (!response.ok) {
-                throw new Error('Failed to load research');
-            }
-            
-            const data = await response.json();
-            
-            if (data.status === 'completed' && data.report_path) {
-                // Set the favicon based on the research mode
-                setFavicon(data.mode || 'quick');
-                
-                // Get report content
-                const reportResponse = await fetch(getApiUrl(`/api/report/${researchId}`));
-                if (!reportResponse.ok) {
-                    throw new Error('Failed to load report');
-                }
-                
-                const reportData = await reportResponse.json();
-                
-                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');
+            console.log(`Loading research results for research ID: ${researchId}`);
+            
+            // Set the current viewing research ID
+            viewingResearchId = researchId;
+            
+            // Get research data first to check status
+            fetch(getApiUrl(`/api/research/${researchId}`))
+                .then(response => response.json())
+                .then(researchData => {
+                    // Check if research was terminated or failed
+                    if (researchData.status === 'suspended' || researchData.status === 'failed') {
+                        console.log(`Research ${researchId} was ${researchData.status}, not loading results`);
                         
-                        // Enable syntax highlighting
-                        const renderedContent = marked.parse(reportData.content);
-                        resultsContent.innerHTML = renderedContent;
+                        // Switch to research progress page if not already there
+                        const progressPage = document.getElementById('research-progress');
+                        if (!progressPage.classList.contains('active')) {
+                            switchPage('research-progress');
+                        }
                         
-                        // Apply syntax highlighting
-                        document.querySelectorAll('pre code').forEach((block) => {
-                            hljs.highlightElement(block);
-                        });
+                        // Show error message and Try Again button
+                        const errorMessage = document.getElementById('error-message');
+                        const tryAgainBtn = document.getElementById('try-again-btn');
+                        
+                        if (errorMessage) {
+                            errorMessage.textContent = researchData.error || `Research was ${researchData.status}`;
+                            errorMessage.style.display = 'block';
+                        }
+                        
+                        if (tryAgainBtn) {
+                            tryAgainBtn.style.display = 'block';
+                        }
+                        
+                        // Update UI elements for this research
+                        document.getElementById('current-query').textContent = researchData.query || 'Unknown query';
+                        
+                        // Update progress bar
+                        const progressFill = document.getElementById('progress-fill');
+                        const progressPercentage = document.getElementById('progress-percentage');
+                        if (progressFill) progressFill.style.width = '0%';
+                        if (progressPercentage) progressPercentage.textContent = '0%';
+                        
+                        // Load logs for this research
+                        loadLogsForResearch(researchId);
+                        
+                        return; // Exit early, no need to load report for terminated research
                     }
                     
-                    // 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 {
-                // Show research details for failed or suspended research
-                loadResearchDetails(researchId);
-            }
+                    // Normal flow for completed research
+                    fetch(getApiUrl(`/api/report/${researchId}`))
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.status === 'error') {
+                                throw new Error('Research report not found');
+                            }
+                            
+                            if (!data.content) {
+                                console.error('No report content found in research data');
+                                throw new Error('Report content is empty');
+                            }
+                            
+                            // Set the report content and metadata
+                            document.getElementById('result-query').textContent = researchData.query || 'Unknown Query';
+                            document.getElementById('result-date').textContent = formatDate(
+                                researchData.completed_at, 
+                                researchData.duration_seconds
+                            );
+                            document.getElementById('result-mode').textContent = formatMode(researchData.mode);
+                            
+                            // Update duration if available (for backward compatibility with existing UI elements)
+                            if (researchData.created_at && researchData.completed_at && !researchData.duration_seconds) {
+                                // Calculate duration if it's not provided by the API
+                                const startDate = new Date(researchData.created_at);
+                                const endDate = new Date(researchData.completed_at);
+                                const durationSec = Math.floor((endDate - startDate) / 1000);
+                                
+                                // Update the date display with calculated duration
+                                document.getElementById('result-date').textContent = formatDate(
+                                    researchData.completed_at, 
+                                    durationSec
+                                );
+                                
+                                // Also update any UI elements that might rely on updateResearchDuration
+                                const metadata = {
+                                    started_at: researchData.created_at,
+                                    completed_at: researchData.completed_at
+                                };
+                                updateResearchDuration(metadata);
+                            }
+                            
+                            // Render the content
+                            const resultsContent = document.getElementById('results-content');
+                            resultsContent.innerHTML = ''; // Clear any previous content
+                            
+                            // Convert markdown to HTML
+                            const htmlContent = marked.parse(data.content);
+                            resultsContent.innerHTML = htmlContent;
+                            
+                            // Apply code highlighting
+                            document.querySelectorAll('pre code').forEach((block) => {
+                                hljs.highlightBlock(block);
+                            });
+                            
+                            // Load logs for this research
+                            loadLogsForResearch(researchId);
+                            
+                            // Switch to the results page
+                            switchPage('research-results');
+                        })
+                        .catch(error => {
+                            console.error(`Error loading research: ${error}`);
+                        });
+                })
+                .catch(error => {
+                    console.error(`Error checking research status: ${error}`);
+                });
         } catch (error) {
-            console.error('Error loading research:', error);
-            alert('Error loading research: ' + error.message);
-            // Reset favicon to default on error
-            createDynamicFavicon('⚡');
+            console.error(`Error loading research: ${error}`);
         }
     }
     
     // Function to load research details
     async function loadResearchDetails(researchId) {
         try {
-            // Navigate to details page
-            switchPage('research-details');
+            // Show loading indicators
+            document.getElementById('research-log').innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
             
-            const researchLog = document.getElementById('research-log');
-            researchLog.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
+            // Set the current viewing research ID
+            viewingResearchId = researchId;
             
+            // Fetch the research data
             const response = await fetch(getApiUrl(`/api/research/${researchId}/details`));
-            if (!response.ok) {
-                throw new Error('Failed to load research details');
-            }
-            
             const data = await response.json();
             
-            // Set the favicon based on the research mode
-            setFavicon(data.mode || 'quick');
-            
-            // 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-mode').textContent = data.mode === 'detailed' ? 'Detailed Report' : 'Quick Summary';
-            
-            // Update progress indicator
-            const progress = data.progress || 0;
-            document.getElementById('detail-progress-fill').style.width = `${progress}%`;
-            document.getElementById('detail-progress-percentage').textContent = `${progress}%`;
-            
-            // Add status classes
-            document.getElementById('detail-status').className = 'metadata-value status-' + (data.status || 'unknown');
-            
-            // Clear existing log entries
-            researchLog.innerHTML = '';
-            
-            // Render log entries
-            if (data.log && Array.isArray(data.log)) {
-                renderLogEntries(data.log);
+            if (data.status === 'success') {
+                // Update the metadata display
+                document.getElementById('detail-query').textContent = data.query || 'Unknown query';
+                document.getElementById('detail-status').textContent = formatStatus(data.status);
+                document.getElementById('detail-mode').textContent = formatMode(data.mode);
+            
+            // Update progress percentage
+                const progressFill = document.getElementById('detail-progress-fill');
+                const progressPercentage = document.getElementById('detail-progress-percentage');
+                
+                if (progressFill && progressPercentage) {
+                    const progress = data.progress || 0;
+                    progressFill.style.width = `${progress}%`;
+                    progressPercentage.textContent = `${progress}%`;
+                }
+                
+                // Update duration if available
+                const metadata = {
+                    created_at: data.created_at,
+                    completed_at: data.completed_at
+                };
+                updateResearchDuration(metadata);
+                
+                // Render the log entries from the response directly
+                if (data.log && Array.isArray(data.log)) {
+                    renderResearchLog(data.log, researchId);
+                } else {
+                    // Fallback to the dedicated logs endpoint if log data is missing
+                    try {
+                        const logResponse = await fetch(getApiUrl(`/api/research/${researchId}/logs`));
+                        const logData = await logResponse.json();
+                        
+                        if (logData.status === 'success' && logData.logs && Array.isArray(logData.logs)) {
+                            renderResearchLog(logData.logs, researchId);
+                        } else {
+                            document.getElementById('research-log').innerHTML = '<div class="empty-state">No log entries available</div>';
+                        }
+                    } catch (logError) {
+                        console.error('Error fetching logs:', logError);
+                        document.getElementById('research-log').innerHTML = '<div class="empty-state">Failed to load log entries</div>';
+                    }
+                }
+                
+                // Update detail actions based on research status
+                updateDetailActions(data);
+                
+                // Load logs for the console panel as well
+                loadLogsForResearch(researchId);
+                
+                // Switch to the details page
+                switchPage('research-details');
             } else {
-                researchLog.innerHTML = '<div class="empty-message">No log entries available</div>';
-            }
-            
-            // Update actions based on status
-            const actionsContainer = document.getElementById('detail-actions');
-            actionsContainer.innerHTML = '';
-            
-            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));
-                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-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);
+                alert('Failed to load research details: ' + (data.message || 'Unknown error'));
             }
-            
-            // 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);
-            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('⚡');
+            alert('An error occurred while loading the research details');
         }
     }
     
     // Function to render log entries
-    function renderLogEntries(logEntries) {
+    function renderResearchLog(logEntries, researchId) {
         const researchLog = document.getElementById('research-log');
         researchLog.innerHTML = '';
         
@@ -1480,8 +2034,18 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         
         // Connect to socket for updates if this is an in-progress research
-        if (research && research.status === 'in_progress') {
-            window.connectToResearchSocket(researchId);
+        // Check for research ID and whether it's in progress by checking the database status
+        if (researchId) {
+            // Check research status in the database to determine if we should connect to socket
+            fetch(getApiUrl(`/api/research/${researchId}`))
+                .then(response => response.json())
+                .then(data => {
+                    if (data && data.status === 'in_progress') {
+                        console.log(`Connecting to socket for research ${researchId} from log view`);
+                        window.connectToResearchSocket(researchId);
+                    }
+                })
+                .catch(err => console.error(`Error checking research status for socket connection: ${err}`));
         }
     }
     
@@ -1540,31 +2104,6 @@ document.addEventListener('DOMContentLoaded', () => {
         return string.charAt(0).toUpperCase() + string.slice(1);
     }
     
-    function formatDate(date) {
-        // Ensure we're handling the date properly
-        if (!(date instanceof Date) || isNaN(date)) {
-            console.warn('Invalid date provided to formatDate:', date);
-            return 'Invalid date';
-        }
-        
-        // Get current year to compare with date year
-        const currentYear = new Date().getFullYear();
-        const dateYear = date.getFullYear();
-        
-        // Get month name, day, and time
-        const month = date.toLocaleString('en-US', { month: 'short' });
-        const day = date.getDate();
-        const hours = date.getHours().toString().padStart(2, '0');
-        const minutes = date.getMinutes().toString().padStart(2, '0');
-        
-        // Format like "Feb 25, 08:09" or "Feb 25, 2022, 08:09" if not current year
-        if (dateYear === currentYear) {
-            return `${month} ${day}, ${hours}:${minutes}`;
-        } else {
-            return `${month} ${day}, ${dateYear}, ${hours}:${minutes}`;
-        }
-    }
-
     // Function to update progress UI from current research
     function updateProgressFromCurrentResearch() {
         if (!isResearchInProgress || !currentResearchId) return;
@@ -1587,148 +2126,99 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Function to update the sidebar navigation based on research status
     function updateNavigationBasedOnResearchStatus() {
-        console.log("Updating navigation based on research status");
-        console.log("isResearchInProgress:", isResearchInProgress);
-        console.log("currentResearchId:", currentResearchId);
+        const isResearchPage = document.getElementById('research-progress').classList.contains('active');
+        const isAnyResearchInProgress = window.currentResearchId !== null && isResearchInProgress;
         
-        // Get nav items for each update to ensure we have fresh references
-        const navItems = document.querySelectorAll('.sidebar-nav li');
-        const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
-        // Get all pages
-        const pages = document.querySelectorAll('.page');
+        // Get the sidebar nav items and mobile tab items
+        const sidebarNewResearchItem = document.querySelector('.sidebar-nav li[data-page="new-research"]');
+        const sidebarHistoryItem = document.querySelector('.sidebar-nav li[data-page="history"]');
+        const mobileNewResearchItem = document.querySelector('.mobile-tab-bar li[data-page="new-research"]');
+        const mobileHistoryItem = document.querySelector('.mobile-tab-bar li[data-page="history"]');
         
-        const newResearchNav = Array.from(navItems).find(item => 
-            item.getAttribute('data-page') === 'new-research' || 
-            (item.getAttribute('data-original-page') === 'new-research' && 
-             item.getAttribute('data-page') === 'research-progress')
-        );
+        // Control elements
+        const terminateBtn = document.getElementById('terminate-research-btn');
+        const errorMessage = document.getElementById('error-message');
+        const tryAgainBtn = document.getElementById('try-again-btn');
         
-        if (newResearchNav) {
-            if (isResearchInProgress) {
-                console.log("Research is in progress, updating navigation");
-                // Change text to "Research in Progress"
-                newResearchNav.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Research in Progress';
-                
-                // Also update the listener to navigate to progress page
-                if (newResearchNav.getAttribute('data-page') !== 'research-progress') {
-                    newResearchNav.setAttribute('data-original-page', 'new-research');
-                    newResearchNav.setAttribute('data-page', 'research-progress');
-                }
-                
-                // If on new-research page, redirect to research-progress
-                if (document.getElementById('new-research').classList.contains('active')) {
-                    pages.forEach(page => page.classList.remove('active'));
-                    document.getElementById('research-progress').classList.add('active');
-                    
-                    // Update the research progress page
-                    updateProgressFromCurrentResearch();
-                }
-            } else {
-                console.log("Research is not in progress, resetting navigation");
-                // Reset to "New Research" if there's no active research
-                newResearchNav.innerHTML = '<i class="fas fa-search"></i> New Research';
-                
-                // Reset the listener
-                if (newResearchNav.hasAttribute('data-original-page')) {
-                    newResearchNav.setAttribute('data-page', newResearchNav.getAttribute('data-original-page'));
-                    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) {
-                    terminateBtn.style.display = 'none';
-                    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';
-                }
+        // Log panel should only be visible on research-progress and research-results pages
+        const logPanel = document.querySelector('.collapsible-log-panel');
+        
+        // If research is in progress
+        if (isAnyResearchInProgress) {
+            // Disable new research and history navigation while research is in progress
+            if (sidebarNewResearchItem) sidebarNewResearchItem.classList.add('disabled');
+            if (sidebarHistoryItem) sidebarHistoryItem.classList.add('disabled');
+            if (mobileNewResearchItem) mobileNewResearchItem.classList.add('disabled');
+            if (mobileHistoryItem) mobileHistoryItem.classList.add('disabled');
+            
+            // If user is not already on the research progress page, switch to it
+            if (!isResearchPage) {
+                switchPage('research-progress');
             }
             
-            // Make sure the navigation highlights the correct item
-            navItems.forEach(item => {
-                if (item === newResearchNav) {
-                    if (isResearchInProgress) {
-                        if (document.getElementById('research-progress').classList.contains('active')) {
-                            item.classList.add('active');
-                        }
-                    } else if (document.getElementById('new-research').classList.contains('active')) {
-                        item.classList.add('active');
-                    }
-                }
-            });
-        }
-
-        // Connect to socket for updates only if research is in progress
-        if (isResearchInProgress && currentResearchId) {
-            window.connectToResearchSocket(currentResearchId);
+            // Show terminate button and hide error message and try again button
+            if (terminateBtn) terminateBtn.style.display = 'block';
+            if (errorMessage) errorMessage.style.display = 'none';
+            if (tryAgainBtn) tryAgainBtn.style.display = 'none';
         } else {
-            // Disconnect socket if no active research
-            window.disconnectSocket();
-            
-            // Also reset the current research ID
-            currentResearchId = null;
-            window.currentResearchId = null;
+            // Enable navigation when no research is in progress
+            if (sidebarNewResearchItem) sidebarNewResearchItem.classList.remove('disabled');
+            if (sidebarHistoryItem) sidebarHistoryItem.classList.remove('disabled');
+            if (mobileNewResearchItem) mobileNewResearchItem.classList.remove('disabled');
+            if (mobileHistoryItem) mobileHistoryItem.classList.remove('disabled');
+            
+            // Hide terminate button when no research is in progress
+            if (terminateBtn) terminateBtn.style.display = 'none';
         }
+        
+        console.log('Updated navigation based on research status. In progress:', isAnyResearchInProgress);
     }
 
     // Function to update the research progress page from nav click
     function updateProgressPage() {
-        if (!isResearchInProgress || !currentResearchId) {
+        if (!currentResearchId && !window.currentResearchId) {
             return;
         }
         
+        const researchId = currentResearchId || window.currentResearchId;
+        
         // Update the progress page
-        fetch(getApiUrl(`/api/research/${currentResearchId}`))
+        fetch(getApiUrl(`/api/research/${researchId}`))
             .then(response => response.json())
             .then(data => {
                 // Update the query display
-                document.getElementById('current-query').textContent = data.query;
-                
-                // Update the progress bar
-                updateProgressUI(data.progress || 0, data.status);
-                
-                // Connect to socket for live updates
-                window.connectToResearchSocket(currentResearchId);
+                document.getElementById('current-query').textContent = data.query;
                 
-                // Check if we need to show the terminate button
+                // Check status before updating UI
                 if (data.status === 'in_progress') {
+                    // Update the progress bar
+                    updateProgressUI(data.progress || 0, data.status);
+                    
+                    // Check if we need to show the terminate button
                     const terminateBtn = document.getElementById('terminate-research-btn');
                     if (terminateBtn) {
                         terminateBtn.style.display = 'inline-flex';
                         terminateBtn.disabled = false;
                     }
+                    
+                    // Only connect to socket for in-progress research
+                    window.connectToResearchSocket(researchId);
+                    // Only start polling for in-progress research
+                    if (!pollingInterval) {
+                        pollResearchStatus(researchId);
+                    }
+                } 
+                else if (data.status === 'suspended' || data.status === 'failed') {
+                    // Update UI for terminated research
+                    updateTerminationUIState('suspended', data.error || `Research was ${data.status}`);
+                    // Update progress bar
+                    document.getElementById('progress-fill').style.width = `${data.progress || 0}%`;
+                    document.getElementById('progress-percentage').textContent = `${data.progress || 0}%`;
+                }
+                else {
+                    // Just update progress for completed research
+                    document.getElementById('progress-fill').style.width = `${data.progress || 0}%`;
+                    document.getElementById('progress-percentage').textContent = `${data.progress || 0}%`;
                 }
             })
             .catch(error => {
@@ -2321,22 +2811,11 @@ document.addEventListener('DOMContentLoaded', () => {
                     hljs.highlightElement(block);
                 });
                 
-                // Format date
-                let dateText = formatDate(new Date(details.completed_at || details.created_at));
-                if (details.duration_seconds) {
-                    let durationText = '';
-                    const duration = parseInt(details.duration_seconds);
-                    
-                    if (duration < 60) {
-                        durationText = `${duration}s`;
-                    } else if (duration < 3600) {
-                        durationText = `${Math.floor(duration / 60)}m ${duration % 60}s`;
-                    } else {
-                        durationText = `${Math.floor(duration / 3600)}h ${Math.floor((duration % 3600) / 60)}m`;
-                    }
-                    
-                    dateText += ` (Duration: ${durationText})`;
-                }
+                // Format date with duration
+                let dateText = formatDate(
+                    new Date(details.completed_at || details.created_at),
+                    details.duration_seconds
+                );
                 
                 // Set up data for PDF generation
                 document.getElementById('result-query').textContent = details.query;
@@ -2371,11 +2850,12 @@ document.addEventListener('DOMContentLoaded', () => {
     // Initialize the terminate button event listener
     const terminateBtn = document.getElementById('terminate-research-btn');
     if (terminateBtn) {
-        terminateBtn.addEventListener('click', () => {
-            if (confirm('Are you sure you want to terminate this research? This action cannot be undone.')) {
-                if (currentResearchId) {
-                    terminateResearch(currentResearchId);
-                }
+        terminateBtn.addEventListener('click', function() {
+            if (currentResearchId) {
+                terminateResearch(currentResearchId);
+            } else {
+                console.error('No active research ID found for termination');
+                alert('No active research ID found. Please try again.');
             }
         });
     }
@@ -2518,4 +2998,766 @@ document.addEventListener('DOMContentLoaded', () => {
         const emoji = mode === 'detailed' ? '🔬' : '⚡';
         return createDynamicFavicon(emoji);
     }
+
+    // Global log tracking variables
+    let consoleLogEntries = [];
+    let logCount = 0;
+    let lastLogMessage = null; // Track the last log message to prevent duplicates
+    let lastLogTimestamp = null; // Track the last log timestamp
+    let viewingResearchId = null; // Track which research ID is currently being viewed
+
+    // Function to filter console logs by type
+    function filterConsoleLogs(filterType = 'all') {
+        console.log(`----- FILTER LOGS START (${filterType}) -----`);
+        console.log(`Filtering logs by type: ${filterType}`);
+        
+        // Make sure the filter type is lowercase for consistency
+        filterType = filterType.toLowerCase();
+        
+        // Get all log entries from the DOM
+        const logEntries = document.querySelectorAll('.console-log-entry');
+        console.log(`Found ${logEntries.length} log entries to filter`);
+        
+        // If no entries found, exit early
+        if (logEntries.length === 0) {
+            console.log('No log entries found to filter');
+            console.log(`----- FILTER LOGS END (${filterType}) -----`);
+            return;
+        }
+        
+        let visibleCount = 0;
+        
+        // Apply filters
+        logEntries.forEach(entry => {
+            // Use the data attribute directly - this comes directly from the database
+            const logType = entry.dataset.logType;
+            
+            // Determine visibility based on filter type
+            let shouldShow = false;
+            
+            switch (filterType) {
+                case 'all':
+                    shouldShow = true;
+                    break;
+                case 'info':
+                    shouldShow = logType === 'info';
+                    break;
+                case 'milestone':
+                case 'milestones': // Handle plural form too
+                    shouldShow = logType === 'milestone';
+                    break;
+                case 'error':
+                case 'errors': // Handle plural form too
+                    shouldShow = logType === 'error';
+                    break;
+                default:
+                    shouldShow = true; // Default to showing everything
+                    console.warn(`Unknown filter type: ${filterType}, showing all logs`);
+            }
+            
+            // Set display style based on filter result
+            entry.style.display = shouldShow ? '' : 'none';
+            
+            if (shouldShow) {
+                visibleCount++;
+            }
+        });
+        
+        console.log(`Filtering complete. Showing ${visibleCount} of ${logEntries.length} logs with filter: ${filterType}`);
+        
+        // Show 'no logs' message if all logs are filtered out
+        const consoleContainer = document.getElementById('console-log-container');
+        if (consoleContainer && logEntries.length > 0) {
+            // Remove any existing empty message
+            const existingEmptyMessage = consoleContainer.querySelector('.empty-log-message');
+            if (existingEmptyMessage) {
+                existingEmptyMessage.remove();
+            }
+            
+            // Add empty message if needed
+            if (visibleCount === 0) {
+                console.log(`Adding 'no logs' message for filter: ${filterType}`);
+                const newEmptyMessage = document.createElement('div');
+                newEmptyMessage.className = 'empty-log-message';
+                newEmptyMessage.textContent = `No ${filterType} logs to display.`;
+                consoleContainer.appendChild(newEmptyMessage);
+            }
+        }
+        
+        console.log(`----- FILTER LOGS END (${filterType}) -----`);
+    }
+
+    // Function to initialize the log panel
+    function initializeLogPanel() {
+        console.log('Initializing log panel');
+        
+        // Get DOM elements
+        const logPanelToggle = document.getElementById('log-panel-toggle');
+        const logPanelContent = document.getElementById('log-panel-content');
+        const filterButtons = document.querySelectorAll('.filter-buttons .small-btn');
+        
+        // Check if elements exist
+        if (!logPanelToggle || !logPanelContent) {
+            console.error('Log panel elements not found');
+            return;
+        }
+        
+        console.log('Log panel elements found:', { 
+            toggle: logPanelToggle ? 'Found' : 'Missing',
+            content: logPanelContent ? 'Found' : 'Missing',
+            filterButtons: filterButtons.length > 0 ? `Found ${filterButtons.length} buttons` : 'Missing'
+        });
+        
+        // Set up toggle click handler
+        logPanelToggle.addEventListener('click', function() {
+            console.log('Log panel toggle clicked');
+            
+            // Toggle collapsed state
+            logPanelContent.classList.toggle('collapsed');
+            logPanelToggle.classList.toggle('collapsed');
+            
+            // Update toggle icon
+            const toggleIcon = logPanelToggle.querySelector('.toggle-icon');
+            if (toggleIcon) {
+                if (logPanelToggle.classList.contains('collapsed')) {
+                    toggleIcon.className = 'fas fa-chevron-right toggle-icon';
+                } else {
+                    toggleIcon.className = 'fas fa-chevron-down toggle-icon';
+                    
+                    // Scroll log container to bottom
+                    const consoleContainer = document.getElementById('console-log-container');
+                    if (consoleContainer) {
+                        setTimeout(() => {
+                            consoleContainer.scrollTop = consoleContainer.scrollHeight;
+                        }, 10);
+                    }
+                }
+            }
+            
+            console.log('Log panel is now ' + (logPanelContent.classList.contains('collapsed') ? 'collapsed' : 'expanded'));
+        });
+        
+        // Initial state - collapsed
+        logPanelContent.classList.add('collapsed');
+        logPanelToggle.classList.add('collapsed');
+        const toggleIcon = logPanelToggle.querySelector('.toggle-icon');
+        if (toggleIcon) {
+            toggleIcon.className = 'fas fa-chevron-right toggle-icon';
+        }
+        
+        // Initial filtering - use a longer delay to ensure DOM is ready
+        setTimeout(() => {
+            console.log('Applying initial log filter: all');
+            filterConsoleLogs('all');
+        }, 300);
+        
+        console.log('Log panel initialization completed');
+    }
+
+    // Function to clear all console logs
+    function clearConsoleLogs() {
+        const consoleContainer = document.getElementById('console-log-container');
+        if (!consoleContainer) return;
+        
+        console.log('Clearing console logs');
+        
+        // Reset the processed messages set to allow new logs after clearing
+        window.processedMessages = new Set();
+        
+        // Clear the container
+        consoleContainer.innerHTML = '<div class="empty-log-message">No logs yet. Research logs will appear here as they occur.</div>';
+        
+        // Reset the log entries array
+        consoleLogEntries = [];
+        
+        // Reset the log count
+        logCount = 0;
+        updateLogIndicator();
+        
+        // Reset last message tracking
+        lastLogMessage = null;
+        lastLogTimestamp = null;
+        
+        // DO NOT reset viewingResearchId here, as clearing logs doesn't mean
+        // we're changing which research we're viewing
+        
+        console.log('Console logs cleared');
+    }
+
+    // Function to determine if a log message is a milestone
+    function isMilestoneLog(message, metadata) {
+        if (!message) return false;
+        
+        // Critical milestones - main research flow points
+        const criticalMilestones = [
+            // Research start/end
+            /^Research (started|complete)/i,
+            /^Starting research/i,
+            
+            // Iteration markers
+            /^Starting iteration \d+/i,
+            /^Iteration \d+ complete/i,
+            
+            // Final completion
+            /^Research completed successfully/i,
+            /^Report generation complete/i,
+            /^Writing research report to file/i
+        ];
+        
+        // Check for critical milestones first
+        const isCriticalMilestone = criticalMilestones.some(pattern => pattern.test(message));
+        if (isCriticalMilestone) return true;
+        
+        // Check metadata phase for critical phases only
+        const isCriticalPhase = metadata && (
+            metadata.phase === 'init' ||
+            metadata.phase === 'iteration_start' || 
+            metadata.phase === 'iteration_complete' || 
+            metadata.phase === 'complete' ||
+            metadata.phase === 'report_generation' ||
+            metadata.phase === 'report_complete'
+        );
+        
+        return isCriticalPhase;
+    }
+
+    // Initialize the log panel when the application starts
+    function initializeAppWithLogs() {
+        // Original initializeApp function
+        const originalInitializeApp = window.initializeApp || initializeApp;
+        window.initializeApp = function() {
+            // Call the original initialization
+            originalInitializeApp();
+            
+            // Ensure global log variables are initialized
+            window.consoleLogEntries = [];
+            window.logCount = 0;
+            window.lastLogMessage = null;
+            window.lastLogTimestamp = null;
+            
+            // Initialize the log panel with a delay to ensure DOM is ready
+            setTimeout(() => {
+                initializeLogPanel();
+                
+                // Add an initial welcome log entry
+                addConsoleLog('Research system initialized and ready', 'milestone');
+                
+                console.log('Log panel initialization completed');
+            }, 100);
+        };
+    }
+
+    // Call the initialization function immediately
+    initializeAppWithLogs();
+
+    // Function to get active research ID
+    function getActiveResearchId() {
+        return window.currentResearchId || currentResearchId;
+    }
+
+    // Function to update research duration on results display
+    function updateResearchDuration(metadata) {
+        if (!metadata || !metadata.started_at || !metadata.completed_at) return;
+        
+        try {
+            // Parse ISO dates
+            const startDate = new Date(metadata.started_at);
+            const endDate = new Date(metadata.completed_at);
+            
+            // Calculate duration in seconds
+            const durationMs = endDate - startDate;
+            const durationSec = Math.floor(durationMs / 1000);
+            
+            // Format as minutes and seconds
+            const minutes = Math.floor(durationSec / 60);
+            const seconds = durationSec % 60;
+            const formattedDuration = `${minutes}m ${seconds}s`;
+            
+            // Add to results metadata
+            const resultsMetadata = document.querySelector('.results-metadata');
+            if (resultsMetadata) {
+                // Check if duration element already exists
+                let durationEl = resultsMetadata.querySelector('.metadata-item.duration');
+                
+                if (!durationEl) {
+                    // Create new duration element
+                    durationEl = document.createElement('div');
+                    durationEl.className = 'metadata-item duration';
+                    
+                    const labelEl = document.createElement('span');
+                    labelEl.className = 'metadata-label';
+                    labelEl.textContent = 'Duration:';
+                    
+                    const valueEl = document.createElement('span');
+                    valueEl.className = 'metadata-value';
+                    valueEl.id = 'result-duration';
+                    
+                    durationEl.appendChild(labelEl);
+                    durationEl.appendChild(valueEl);
+                    
+                    // Insert after "Generated" metadata
+                    const generatedEl = resultsMetadata.querySelector('.metadata-item:nth-child(2)');
+                    if (generatedEl) {
+                        resultsMetadata.insertBefore(durationEl, generatedEl.nextSibling);
+                    } else {
+                        resultsMetadata.appendChild(durationEl);
+                    }
+                }
+                
+                // Update duration value
+                const durationValueEl = resultsMetadata.querySelector('#result-duration');
+                if (durationValueEl) {
+                    durationValueEl.textContent = formattedDuration;
+                }
+            }
+            
+            // Also add to research details metadata
+            const detailsMetadata = document.querySelector('.research-metadata');
+            if (detailsMetadata) {
+                // Check if duration element already exists
+                let durationEl = null;
+                
+                // Use querySelectorAll and iterate to find the element with "Duration" label
+                const metadataItems = detailsMetadata.querySelectorAll('.metadata-item');
+                for (let i = 0; i < metadataItems.length; i++) {
+                    const labelEl = metadataItems[i].querySelector('.metadata-label');
+                    if (labelEl && labelEl.textContent.includes('Duration')) {
+                        durationEl = metadataItems[i];
+                        break;
+                    }
+                }
+                
+                if (!durationEl) {
+                    // Create new duration element
+                    durationEl = document.createElement('div');
+                    durationEl.className = 'metadata-item';
+                    
+                    const labelEl = document.createElement('span');
+                    labelEl.className = 'metadata-label';
+                    labelEl.textContent = 'Duration:';
+                    
+                    const valueEl = document.createElement('span');
+                    valueEl.className = 'metadata-value';
+                    valueEl.id = 'detail-duration';
+                    
+                    durationEl.appendChild(labelEl);
+                    durationEl.appendChild(valueEl);
+                    
+                    // Insert after mode metadata
+                    const modeEl = detailsMetadata.querySelector('.metadata-item:nth-child(3)');
+                    if (modeEl) {
+                        detailsMetadata.insertBefore(durationEl, modeEl.nextSibling);
+                    } else {
+                        detailsMetadata.appendChild(durationEl);
+                    }
+                }
+                
+                // Update duration value
+                const durationValueEl = durationEl.querySelector('.metadata-value');
+                if (durationValueEl) {
+                    durationValueEl.textContent = formattedDuration;
+                }
+            }
+            
+            console.log(`Research duration: ${formattedDuration}`);
+        } catch (error) {
+            console.error('Error calculating research duration:', error);
+        }
+    }
+
+    // Function to add a log entry to the console with reduced deduplication time window
+    function addConsoleLog(message, type = 'info', metadata = null, forResearchId = null) {
+        // Skip if identical to the last message to prevent duplication
+        const currentTime = new Date().getTime();
+        if (message === lastLogMessage && lastLogTimestamp && currentTime - lastLogTimestamp < 300) {
+            // Skip duplicate message if it's within 300ms of the last one (reduced from 2000ms)
+            return null;
+        }
+        
+        // Skip if we're viewing a specific research and this log is for a different research
+        if (viewingResearchId && forResearchId && viewingResearchId !== forResearchId) {
+            console.log(`Skipping log for research ${forResearchId} because viewing ${viewingResearchId}`);
+            return null;
+        }
+        
+        // Update tracking variables
+        lastLogMessage = message;
+        lastLogTimestamp = currentTime;
+        
+        // Use the direct log addition function
+        return addConsoleLogDirect(message, type, metadata);
+    }
+
+    // Function to update the log indicator count
+    function updateLogIndicator() {
+        const indicator = document.getElementById('log-indicator');
+        if (indicator) {
+            indicator.textContent = logCount;
+        }
+    }
+
+    // New function to update log panel visibility based on current page
+    function updateLogPanelVisibility(pageId) {
+        console.log('Updating log panel visibility for page:', pageId);
+        
+        // Only show log panel on research progress and results pages
+        if (pageId === 'research-progress' || pageId === 'research-results') {
+            console.log('Showing log panel');
+            // Let CSS handle the display
+        } else {
+            console.log('Hiding log panel');
+            // Let CSS handle the display
+        }
+    }
+
+    // Function to update the navigation UI based on active page
+    function updateNavigationUI(pageId) {
+        // Update sidebar navigation
+        const sidebarNavItems = document.querySelectorAll('.sidebar-nav li');
+        sidebarNavItems.forEach(item => {
+            if (item.getAttribute('data-page') === pageId) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }
+        });
+        
+        // Update mobile tab bar
+        const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
+        mobileNavItems.forEach(item => {
+            if (item.getAttribute('data-page') === pageId) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }
+        });
+    }
+
+    // Function to check research status before polling
+    async function checkResearchStatusBeforePolling(researchId) {
+        try {
+            // Get the current status from the server
+            const response = await fetch(getApiUrl(`/api/research/${researchId}`));
+            const data = await response.json();
+            
+            // If research is in_progress, start polling normally
+            if (data.status === 'in_progress') {
+                console.log(`Research ${researchId} is in progress, starting polling`);
+                pollResearchStatus(researchId);
+                window.connectToResearchSocket(researchId);
+                return true;
+            } 
+            // If terminated or complete, update UI but don't start polling
+            else if (data.status === 'suspended' || data.status === 'failed') {
+                console.log(`Research ${researchId} is ${data.status}, not starting polling`);
+                updateTerminationUIState('suspended', `Research was ${data.status}`);
+                return false;
+            }
+            // If completed, don't start polling
+            else if (data.status === 'completed') {
+                console.log(`Research ${researchId} is completed, not starting polling`);
+                return false;
+            }
+        } catch (error) {
+            console.error(`Error checking research status: ${error}`);
+            return false;
+        }
+        
+        return false;
+    }
+
+    // Function to reset research state before starting a new research
+    function resetResearchState() {
+        // Clean up any existing research resources
+        window.cleanupResearchResources();
+        
+        // Clear any previous polling intervals
+        clearPollingInterval();
+        
+        // Reset research flags
+        isResearchInProgress = false;
+        currentResearchId = null;
+        window.currentResearchId = null;
+        
+        // Clear console logs
+        clearConsoleLogs();
+        
+        // Reset any UI elements
+        const errorMessage = document.getElementById('error-message');
+        if (errorMessage) {
+            errorMessage.style.display = 'none';
+            errorMessage.textContent = '';
+        }
+        
+        // Hide the try again button if visible
+        const tryAgainBtn = document.getElementById('try-again-btn');
+        if (tryAgainBtn) {
+            tryAgainBtn.style.display = 'none';
+        }
+        
+        // Reset progress bar
+        const progressFill = document.getElementById('progress-fill');
+        if (progressFill) {
+            progressFill.style.width = '0%';
+        }
+        
+        // Reset progress percentage
+        const progressPercentage = document.getElementById('progress-percentage');
+        if (progressPercentage) {
+            progressPercentage.textContent = '0%';
+        }
+        
+        // Reset progress status
+        const progressStatus = document.getElementById('progress-status');
+        if (progressStatus) {
+            progressStatus.textContent = 'Initializing research process...';
+            progressStatus.className = 'progress-status';
+        }
+        
+        // Reset the Start Research button 
+        resetStartResearchButton();
+        
+        // Add initial log entry
+        addConsoleLog('Preparing to start new research', 'info');
+    }
+
+    // Function to load research logs into the console log panel
+    function loadLogsForResearch(researchId) {
+        console.log(`Loading logs for research ${researchId}`);
+        
+        // Clear existing logs
+        clearConsoleLogs();
+        
+        // Set the current viewing research ID
+        viewingResearchId = researchId;
+        
+        // Fetch logs from the server for this research
+        fetch(getApiUrl(`/api/research/${researchId}/logs`))
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success' && Array.isArray(data.logs) && data.logs.length > 0) {
+                    console.log(`Loaded ${data.logs.length} logs for research ${researchId}`);
+                    
+                    // Sort logs by timestamp if needed
+                    data.logs.sort((a, b) => {
+                        const timeA = new Date(a.time);
+                        const timeB = new Date(b.time);
+                        return timeA - timeB;
+                    });
+                    
+                    // Add logs to the console
+                    data.logs.forEach(log => {
+                        let logType = 'info';
+                        
+                        // Use the type directly from the database if available
+                        if (log.type) {
+                            logType = log.type;
+                        } else if (isMilestoneLog(log.message, log.metadata)) {
+                            logType = 'milestone';
+                        } else if (log.metadata && log.metadata.phase === 'error') {
+                            logType = 'error';
+                        }
+                        
+                        // Add to console without triggering the duplicate detection
+                        // by directly creating the log entry
+                        addConsoleLogDirect(log.message, logType, log.metadata, log.time);
+                    });
+                    
+                    // Apply initial filter (all)
+                    filterConsoleLogs('all');
+                    
+                    // Make sure the "All" button is selected
+                    const allButton = document.querySelector('.filter-buttons .small-btn');
+                    if (allButton) {
+                        // Remove selected class from all buttons
+                        document.querySelectorAll('.filter-buttons .small-btn').forEach(btn => {
+                            btn.classList.remove('selected');
+                        });
+                        // Add selected class to the All button
+                        allButton.classList.add('selected');
+                    }
+                } else {
+                    console.log(`No logs found for research ${researchId}`);
+                    // Add a message indicating no logs are available
+                    const consoleContainer = document.getElementById('console-log-container');
+                    if (consoleContainer) {
+                        consoleContainer.innerHTML = '<div class="empty-log-message">No logs available for this research.</div>';
+                    }
+                }
+            })
+            .catch(error => {
+                console.error(`Error loading logs for research ${researchId}:`, error);
+                // Show error message in console log
+                const consoleContainer = document.getElementById('console-log-container');
+                if (consoleContainer) {
+                    consoleContainer.innerHTML = '<div class="empty-log-message error-message">Failed to load logs. Please try again.</div>';
+                }
+            });
+    }
+
+    // New direct log addition function that bypasses duplicate detection
+    function addConsoleLogDirect(message, type = 'info', metadata = null, timestamp = null) {
+        // Get DOM elements
+        const consoleContainer = document.getElementById('console-log-container');
+        const template = document.getElementById('console-log-entry-template');
+        
+        if (!consoleContainer || !template) {
+            console.error('Console log container or template not found');
+            return null;
+        }
+        
+        // Clear the empty message if it's the first log
+        const emptyMessage = consoleContainer.querySelector('.empty-log-message');
+        if (emptyMessage) {
+            consoleContainer.removeChild(emptyMessage);
+        }
+        
+        // Create a new log entry from the template
+        const clone = document.importNode(template.content, true);
+        const logEntry = clone.querySelector('.console-log-entry');
+        
+        // Make sure type is valid and standardized
+        let validType = 'info';
+        if (['info', 'milestone', 'error'].includes(type.toLowerCase())) {
+            validType = type.toLowerCase();
+        }
+        
+        // Add appropriate class based on type
+        logEntry.classList.add(`log-${validType}`);
+        
+        // IMPORTANT: Store the log type directly as a data attribute
+        logEntry.dataset.logType = validType;
+        
+        // Set the timestamp
+        const actualTimestamp = timestamp ? new Date(timestamp).toLocaleTimeString() : new Date().toLocaleTimeString();
+        const timestampEl = logEntry.querySelector('.log-timestamp');
+        if (timestampEl) timestampEl.textContent = actualTimestamp;
+        
+        // Set the badge text based on type
+        const badgeEl = logEntry.querySelector('.log-badge');
+        if (badgeEl) {
+            badgeEl.textContent = validType.toUpperCase();
+        }
+        
+        // Process message to add search engine info if it's a search query
+        let displayMessage = message;
+        
+        // Check if this is a search query message
+        if (message && typeof message === 'string' && message.startsWith('Searching for:')) {
+            // Determine search engine - add SearXNG by default since that's what we see in logs
+            let searchEngine = 'SearXNG';
+            
+            // Check metadata if available for any search engine info
+            if (metadata) {
+                if (metadata.engine) searchEngine = metadata.engine;
+                else if (metadata.search_engine) searchEngine = metadata.search_engine;
+                else if (metadata.source) searchEngine = metadata.source;
+                else if (metadata.phase && metadata.phase.includes('searxng')) searchEngine = 'SearXNG';
+                else if (metadata.phase && metadata.phase.includes('google')) searchEngine = 'Google';
+                else if (metadata.phase && metadata.phase.includes('bing')) searchEngine = 'Bing';
+                else if (metadata.phase && metadata.phase.includes('duckduckgo')) searchEngine = 'DuckDuckGo';
+            }
+            
+            // Append search engine info to message
+            displayMessage = `${message} [Engine: ${searchEngine}]`;
+        }
+        
+        // Set the message
+        const messageEl = logEntry.querySelector('.log-message');
+        if (messageEl) messageEl.textContent = displayMessage;
+        
+        // Add the log entry to the container
+        consoleContainer.appendChild(logEntry);
+        
+        // Store the log entry for filtering
+        consoleLogEntries.push({
+            element: logEntry,
+            type: validType,
+            message: displayMessage,
+            timestamp: actualTimestamp,
+            researchId: viewingResearchId
+        });
+        
+        // Update log count
+        logCount++;
+        updateLogIndicator();
+        
+        // Use setTimeout to ensure DOM updates before scrolling
+        setTimeout(() => {
+            // Scroll to the bottom
+            consoleContainer.scrollTop = consoleContainer.scrollHeight;
+        }, 0);
+        
+        return logEntry;
+    }
+
+    // Add a global function to filter logs directly from HTML
+    window.filterLogsByType = function(filterType) {
+        console.log('Direct filterLogsByType called with:', filterType);
+        if (filterType && typeof filterConsoleLogs === 'function') {
+            // Update the button styling for the selected filter
+            const filterButtons = document.querySelectorAll('.filter-buttons .small-btn');
+            if (filterButtons.length > 0) {
+                // Remove 'selected' class from all buttons
+                filterButtons.forEach(btn => {
+                    btn.classList.remove('selected');
+                });
+                
+                // Add 'selected' class to the clicked button
+                const selectedButton = Array.from(filterButtons).find(
+                    btn => btn.textContent.toLowerCase().includes(filterType) || 
+                           (filterType === 'all' && btn.textContent.toLowerCase() === 'all')
+                );
+                
+                if (selectedButton) {
+                    selectedButton.classList.add('selected');
+                }
+            }
+            
+            // Apply the filter
+            filterConsoleLogs(filterType);
+        } else {
+            console.error('Unable to filter logs - filterConsoleLogs function not available');
+        }
+    };
+
+    // Function to check if there are any logs available
+    window.checkIfLogsAvailable = function() {
+        const logEntries = document.querySelectorAll('.console-log-entry');
+        if (logEntries.length === 0) {
+            console.log('No logs available to filter');
+            return false;
+        }
+        return true;
+    };
+
+    // Add direct log panel toggle handler as backup
+    const logPanelToggle = document.getElementById('log-panel-toggle');
+    const logPanelContent = document.getElementById('log-panel-content');
+    
+    if (logPanelToggle && logPanelContent) {
+        console.log('Adding direct DOM event listener to log panel toggle');
+        
+        logPanelToggle.addEventListener('click', function(event) {
+            console.log('Log panel toggle clicked (direct handler)');
+            event.preventDefault();
+            event.stopPropagation();
+            
+            // Toggle collapsed state
+            logPanelContent.classList.toggle('collapsed');
+            logPanelToggle.classList.toggle('collapsed');
+            
+            // Update toggle icon
+            const toggleIcon = logPanelToggle.querySelector('.toggle-icon');
+            if (toggleIcon) {
+                if (logPanelToggle.classList.contains('collapsed')) {
+                    toggleIcon.className = 'fas fa-chevron-right toggle-icon';
+                } else {
+                    toggleIcon.className = 'fas fa-chevron-down toggle-icon';
+                }
+            }
+            
+            return false;
+        });
+    }
 });