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

local_deep_research/web/static/js/app.js

@@ -0,0 +1,2078 @@
+// Main application functionality
+document.addEventListener('DOMContentLoaded', () => {
+    // Global socket variable - initialize as null
+    let socket = null;
+    let socketConnected = false;
+    
+    // Global state variables
+    let isResearchInProgress = false;
+    let currentResearchId = null;
+    window.currentResearchId = null;
+    
+    // Polling interval for research status
+    let pollingInterval = null;
+    
+    // Sound notification variables
+    let successSound = null;
+    let errorSound = null;
+    let notificationsEnabled = true;
+    
+    // Initialize notification sounds
+    function initializeSounds() {
+        successSound = new Audio('/research/static/sounds/success.mp3');
+        errorSound = new Audio('/research/static/sounds/error.mp3');
+        successSound.volume = 0.7;
+        errorSound.volume = 0.7;
+    }
+    
+    // Function to play a notification sound
+    function playNotificationSound(type) {
+        console.log(`Attempting to play ${type} notification sound`);
+        if (!notificationsEnabled) {
+            console.log('Notifications are disabled');
+            return;
+        }
+        
+        // Play sounds regardless of tab focus
+        if (type === 'success' && successSound) {
+            console.log('Playing success sound');
+            successSound.play().catch(err => console.error('Error playing success sound:', err));
+        } else if (type === 'error' && errorSound) {
+            console.log('Playing error sound');
+            errorSound.play().catch(err => console.error('Error playing error sound:', err));
+        } else {
+            console.warn(`Unknown sound type or sound not initialized: ${type}`);
+        }
+    }
+    
+    // Initialize socket only when needed with a timeout for safety
+    function initializeSocket() {
+        if (socket) return socket; // Return existing socket if already initialized
+        
+        console.log('Initializing socket connection...');
+        // Create new socket connection with optimized settings for threading mode
+        socket = io({
+            path: '/research/socket.io',
+            transports: ['websocket', 'polling'],
+        reconnection: true,
+            reconnectionAttempts: 3,
+        reconnectionDelay: 1000,
+            timeout: 5000,
+            autoConnect: true,
+            forceNew: true
+        });
+        
+        // Add event handlers
+    socket.on('connect', () => {
+            console.log('Socket connected');
+            socketConnected = true;
+        });
+        
+        socket.on('disconnect', () => {
+            console.log('Socket disconnected');
+            socketConnected = false;
+        });
+        
+        socket.on('connect_error', (error) => {
+            console.error('Socket connection error:', error);
+            socketConnected = false;
+        });
+        
+        // Set a timeout to detect hanging connections
+        setTimeout(() => {
+            if (!socketConnected) {
+                console.log('Socket connection timeout - forcing reconnect');
+                try {
+                    socket.disconnect();
+                    socket.connect();
+                } catch (e) {
+                    console.error('Error during forced reconnect:', e);
+                }
+            }
+        }, 5000);
+        
+        return socket;
+    }
+    
+    // Function to safely disconnect socket
+    window.disconnectSocket = function() {
+        try {
+            if (socket) {
+                console.log('Manually disconnecting socket');
+                socket.removeAllListeners();
+                socket.disconnect();
+                socket = null;
+                socketConnected = false;
+            }
+        } catch (e) {
+            console.error('Error disconnecting socket:', e);
+        }
+    };
+    
+    // Helper function to connect to research updates
+    window.connectToResearchSocket = function(researchId) {
+        try {
+            // Initialize socket if needed
+            if (!socket) {
+                socket = 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}`;
+            
+            // Remove existing listeners to prevent duplicates
+            socket.off(progressEventName);
+            
+            // Add new listener
+            socket.on(progressEventName, (data) => {
+                console.log('Received research progress update:', data);
+                updateProgressUI(data.progress, data.status, data.message);
+                
+                // If research is complete, show the completion buttons
+                if (data.status === 'completed' || data.status === 'terminated' || data.status === 'failed' || data.status === 'suspended') {
+                    console.log(`Socket received research final state: ${data.status}`);
+                    
+                    // Clear polling interval if it exists
+                    if (pollingInterval) {
+                        console.log('Clearing polling interval from socket event');
+                        clearInterval(pollingInterval);
+                        pollingInterval = null;
+                    }
+                    
+                    // Update navigation state
+                    if (data.status === 'completed') {
+                        isResearchInProgress = false;
+                    }
+                    
+                    // Update UI for completion
+                    if (data.status === 'completed') {
+                        console.log('Research completed via socket, loading results automatically');
+                        
+                        // Hide terminate button
+                        const terminateBtn = document.getElementById('terminate-research-btn');
+                        if (terminateBtn) {
+                            terminateBtn.style.display = 'none';
+                        }
+                        
+                        // Auto-load the results
+                        loadResearch(researchId);
+                    } else if (data.status === 'failed' || data.status === 'suspended') {
+                        console.log(`Showing error message for status: ${data.status} from socket event`);
+                        const errorMessage = document.getElementById('error-message');
+                        if (errorMessage) {
+                            errorMessage.style.display = 'block';
+                            errorMessage.textContent = data.status === 'failed' ? 
+                                (data.metadata && data.metadata.error ? JSON.parse(data.metadata).error : 'Research failed') : 
+                                'Research was suspended';
+                        } else {
+                            console.error('error-message element not found in socket handler');
+                        }
+                    }
+                    
+                    updateNavigationBasedOnResearchStatus();
+                    
+                    // Play notification sounds based on status
+                    if (data.status === 'completed') {
+                        console.log('Playing success notification sound from socket event');
+                        playNotificationSound('success');
+                    } else if (data.status === 'failed') {
+                        console.log('Playing error notification sound from socket event');
+                        playNotificationSound('error');
+                    }
+                    
+                    // Force the UI to update with a manual trigger
+                    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);
+                }
+            });
+            
+            return true;
+        } catch (e) {
+            console.error('Error connecting to research socket:', e);
+            return false;
+        }
+    };
+    
+    // Check for active research on page load
+    async function checkActiveResearch() {
+        try {
+            const response = await fetch(getApiUrl('/api/history'));
+            const history = await response.json();
+            
+            // Find in-progress research
+            const activeResearch = history.find(item => item.status === 'in_progress');
+            
+            if (activeResearch) {
+                isResearchInProgress = true;
+                currentResearchId = activeResearch.id;
+                window.currentResearchId = currentResearchId;
+                
+                // Check if we're on the new research page and redirect to progress
+                const currentPage = document.querySelector('.page.active');
+                
+                if (currentPage && currentPage.id === 'new-research') {
+                    // Navigate to progress page
+                    switchPage('research-progress');
+                    
+                    // Connect to socket for this research
+                    window.connectToResearchSocket(currentResearchId);
+                    
+                    // Start polling for updates
+                    pollResearchStatus(currentResearchId);
+                }
+            }
+        } catch (error) {
+            console.error('Error checking for active research:', error);
+        }
+    }
+    
+    // Add unload event listener
+    window.addEventListener('beforeunload', function() {
+        window.disconnectSocket();
+    });
+    
+    // Function to start research
+    async function startResearch(query, mode) {
+        // Check if research is already in progress
+        if (isResearchInProgress) {
+            alert('Another research is already in progress. Please wait for it to complete or check its status in the history tab.');
+            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 {
+            const response = await fetch(getApiUrl('/api/start_research'), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    query: query,
+                    mode: mode
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (data.status === 'success') {
+                isResearchInProgress = true;
+                currentResearchId = data.research_id;
+                
+                // Also update the window object
+                window.currentResearchId = data.research_id;
+                
+                // Update the navigation to show Research in Progress
+                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
+                switchPage('research-progress');
+                
+                // Connect to socket for this research
+                window.connectToResearchSocket(data.research_id);
+                
+                // 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;
+                }
+            } else {
+                alert('Error starting research: ' + (data.message || 'Unknown error'));
+                startResearchBtn.disabled = false;
+                startResearchBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
+            }
+        } catch (error) {
+            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 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);
+            // Update the UI with the current progress
+            updateProgressUI(data.progress, data.status, data.message);
+            
+            // If research is complete, show the completion buttons
+            if (data.status === 'completed' || data.status === 'failed' || data.status === 'suspended') {
+                console.log(`Research is in final state: ${data.status}`);
+                // Clear the polling interval
+                if (pollingInterval) {
+                    console.log('Clearing polling interval');
+                    clearInterval(pollingInterval);
+                    pollingInterval = null;
+                }
+                
+                // Update UI for completion
+                if (data.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';
+                    }
+                    
+                    // Auto-load the results instead of showing a button
+                    loadResearch(researchId);
+                } else if (data.status === 'failed' || data.status === 'suspended') {
+                    console.log(`Showing error message for status: ${data.status}`);
+                    const errorMessage = document.getElementById('error-message');
+                    if (errorMessage) {
+                        errorMessage.style.display = 'block';
+                        errorMessage.textContent = data.status === 'failed' ? 
+                            (data.metadata && data.metadata.error ? JSON.parse(data.metadata).error : 'Research failed') : 
+                            'Research was suspended';
+                    } else {
+                        console.error('error-message element not found');
+                    }
+                }
+                
+                // Play notification sound based on status
+                if (data.status === 'completed') {
+                    console.log('Playing success notification sound');
+                    playNotificationSound('success');
+                } else if (data.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 (data.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);
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error polling research status:', error);
+        });
+    }
+    
+    // Main initialization function
+    function initializeApp() {
+        console.log('Initializing application...');
+        
+        // Initialize the sounds
+        initializeSounds();
+        
+        // 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');
+        
+        // Handle responsive navigation based on screen size
+        function handleResponsiveNavigation() {
+            // Mobile tab bar should only be visible on small screens
+            if (window.innerWidth <= 767) {
+                if (mobileTabBar) {
+                    mobileTabBar.style.display = 'flex';
+                }
+            } else {
+                if (mobileTabBar) {
+                    mobileTabBar.style.display = 'none';
+                }
+            }
+        }
+        
+        // Call on initial load
+        handleResponsiveNavigation();
+        
+        // Add resize listener for responsive design
+        window.addEventListener('resize', handleResponsiveNavigation);
+        
+        // Setup navigation click handlers
+        navItems.forEach(item => {
+            if (!item.classList.contains('external-link')) {
+                item.addEventListener('click', function() {
+                    const pageId = this.dataset.page;
+                    if (pageId) {
+                        switchPage(pageId);
+                    }
+                });
+            }
+        });
+        
+        mobileNavItems.forEach(item => {
+            if (!item.classList.contains('external-link')) {
+                item.addEventListener('click', function() {
+                    const pageId = this.dataset.page;
+                    if (pageId) {
+                        switchPage(pageId);
+                    }
+                });
+            }
+        });
+        
+        // Setup form submission
+        const researchForm = document.getElementById('research-form');
+        if (researchForm) {
+            researchForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const query = document.getElementById('query').value.trim();
+                if (!query) {
+                    alert('Please enter a research query');
+                    return;
+                }
+                
+                const mode = document.querySelector('.mode-option.active')?.dataset.mode || 'quick';
+                startResearch(query, mode);
+            });
+        }
+        
+        // Initialize research mode selection
+        const modeOptions = document.querySelectorAll('.mode-option');
+        modeOptions.forEach(option => {
+            option.addEventListener('click', function() {
+                modeOptions.forEach(opt => opt.classList.remove('active'));
+                this.classList.add('active');
+            });
+        });
+        
+        // Load research history initially
+        if (document.getElementById('history-list')) {
+            loadResearchHistory();
+        }
+        
+        // Check for active research
+        checkActiveResearch();
+        
+        // Setup notification toggle and other form elements
+        setupResearchForm();
+        
+        console.log('Application initialized');
+    }
+    
+    // Initialize the app
+    initializeApp();
+    
+    // Function to switch between pages
+    function switchPage(pageId) {
+        // Get elements directly from the DOM
+        const pages = document.querySelectorAll('.page');
+        const navItems = document.querySelectorAll('.sidebar-nav li');
+        const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
+        
+        // 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');
+        }
+        
+        // Update sidebar navigation active states
+        navItems.forEach(item => {
+            if (item.getAttribute('data-page') === pageId) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }
+        });
+        
+        // Update mobile tab bar active states
+        mobileNavItems.forEach(item => {
+            if (item.getAttribute('data-page') === pageId) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }
+        });
+        
+        // Special handling for history page
+        if (pageId === 'history') {
+            loadResearchHistory();
+        }
+    }
+    
+    // Track termination status
+    let isTerminating = false;
+    
+    // Check if we're on the history page and load history if needed
+    const historyPage = document.getElementById('history');
+    if (historyPage && historyPage.classList.contains('active')) {
+        // Use setTimeout to ensure the DOM is fully loaded
+        setTimeout(() => loadResearchHistory(), 100);
+    }
+    
+    // Add a prefix helper function at the top of the file
+    function getApiUrl(path) {
+        // This function adds the /research prefix to all API URLs
+        return `/research${path}`;
+    }
+    
+    // Function to terminate research - exposed to window object
+    async function terminateResearch(researchId) {
+        if (!researchId) {
+            console.error('No research ID provided for termination');
+            return;
+        }
+
+        // Prevent multiple termination requests
+        if (isTerminating) {
+            console.log('Termination already in progress');
+            return;
+        }
+        
+        // Confirm with the user
+        if (!confirm('Are you sure you want to terminate this research? This action cannot be undone.')) {
+            return;
+        }
+        
+        try {
+            // Set terminating flag
+            isTerminating = true;
+            
+            // Update UI to show we're processing
+            const terminateBtn = document.getElementById('terminate-research-btn');
+            if (terminateBtn) {
+                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
+            const response = await fetch(getApiUrl(`/api/research/${researchId}/terminate`), {
+                method: 'POST'
+            });
+            
+            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');
+                
+                // If we're on the history page, update the status of this item
+                    if (document.getElementById('history').classList.contains('active')) {
+                    updateHistoryItemStatus(researchId, 'terminating', 'Terminating...');
+                }
+            } else {
+                console.error('Termination request failed:', data.message);
+                alert(`Failed to terminate research: ${data.message}`);
+                
+                // Reset the terminating flag
+                isTerminating = false;
+                
+                // Reset 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.');
+            
+            // Reset the terminating flag
+            isTerminating = false;
+            
+            // Reset 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';
+                }
+            });
+        }
+    }
+    
+    // Expose the terminate function to the window object
+    window.terminateResearch = terminateResearch;
+    
+    // Function to update the progress UI
+    function updateProgressUI(progress, status, message) {
+        const progressFill = document.getElementById('progress-fill');
+        const progressPercentage = document.getElementById('progress-percentage');
+        const progressStatus = document.getElementById('progress-status');
+        
+        if (progressFill && progressPercentage) {
+            progressFill.style.width = `${progress}%`;
+            progressPercentage.textContent = `${progress}%`;
+        }
+        
+        if (progressStatus && message) {
+            progressStatus.textContent = message;
+            
+            // Update status class
+            progressStatus.className = 'progress-status';
+            if (status) {
+                progressStatus.classList.add(`status-${status}`);
+            }
+        }
+        
+        // Show/hide terminate button based on status
+        const terminateBtn = document.getElementById('terminate-research-btn');
+        if (terminateBtn) {
+            if (status === 'in_progress') {
+                terminateBtn.style.display = 'inline-flex';
+                terminateBtn.disabled = false;
+                terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
+            } else if (status === 'terminating') {
+                terminateBtn.style.display = 'inline-flex';
+                terminateBtn.disabled = true;
+                terminateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Terminating...';
+            } else {
+                terminateBtn.style.display = 'none';
+            }
+        }
+    }
+    
+    // Completely rewritten function to ensure reliable history loading
+    async function loadResearchHistory() {
+        const historyList = document.getElementById('history-list');
+        
+        // Make sure we have the history list element
+        if (!historyList) {
+            console.error('History list element not found');
+            return;
+        }
+        
+        historyList.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
+        
+        try {
+            const response = await fetch(getApiUrl('/api/history'));
+            
+            if (!response.ok) {
+                throw new Error(`Server returned ${response.status}`);
+            }
+            
+            const data = await response.json();
+            
+            // Clear the loading spinner
+            historyList.innerHTML = '';
+            
+            // Handle empty data
+            if (!data || !Array.isArray(data) || data.length === 0) {
+                historyList.innerHTML = '<div class="empty-state">No research history found. Start a new research project!</div>';
+                return;
+            }
+            
+            // Check if any research is in progress
+            const inProgressResearch = data.find(item => item.status === 'in_progress');
+            
+            // Get the start research button
+            const startResearchBtn = document.getElementById('start-research-btn');
+            
+            if (inProgressResearch) {
+                isResearchInProgress = true;
+                currentResearchId = inProgressResearch.id;
+                if (startResearchBtn) {
+                    startResearchBtn.disabled = true;
+                }
+            } else {
+                isResearchInProgress = false;
+                if (startResearchBtn) {
+                    startResearchBtn.disabled = false;
+                }
+            }
+            
+            // Display each history item
+            data.forEach(item => {
+                try {
+                    // Skip if item is invalid
+                    if (!item || !item.id) {
+                        return;
+                    }
+                    
+                    // Create container
+                    const historyItem = document.createElement('div');
+                    historyItem.className = 'history-item';
+                    historyItem.dataset.researchId = item.id;
+                    
+                    // Create header with title and status
+                    const header = document.createElement('div');
+                    header.className = 'history-item-header';
+                    
+                    const title = document.createElement('div');
+                    title.className = 'history-item-title';
+                    title.textContent = item.query || 'Untitled Research';
+                    
+                    const status = document.createElement('div');
+                    status.className = `history-item-status status-${item.status || 'unknown'}`;
+                    status.textContent = item.status ? (item.status.charAt(0).toUpperCase() + item.status.slice(1)) : 'Unknown';
+                    
+                    header.appendChild(title);
+                    header.appendChild(status);
+                    historyItem.appendChild(header);
+                    
+                    // Create meta section
+                    const meta = document.createElement('div');
+                    meta.className = 'history-item-meta';
+                    
+                    const date = document.createElement('div');
+                    date.className = 'history-item-date';
+                    try {
+                        // Use completed_at if available, fall back to created_at if not
+                        const dateToUse = item.completed_at || item.created_at;
+                        date.textContent = dateToUse ? formatDate(new Date(dateToUse)) : 'Unknown date';
+                    } catch (e) {
+                        date.textContent = item.completed_at || item.created_at || 'Unknown date';
+                    }
+                    
+                    const mode = document.createElement('div');
+                    mode.className = 'history-item-mode';
+                    const modeIcon = item.mode === 'quick' ? 'bolt' : 'microscope';
+                    const modeText = item.mode === 'quick' ? 'Quick Summary' : 'Detailed Report';
+                    mode.innerHTML = `<i class="fas fa-${modeIcon}"></i> ${modeText}`;
+                    
+                    meta.appendChild(date);
+                    meta.appendChild(mode);
+                    historyItem.appendChild(meta);
+                    
+                    // Create actions section
+                    const actions = document.createElement('div');
+                    actions.className = 'history-item-actions';
+                    
+                    // View button
+                    const viewBtn = document.createElement('button');
+                    viewBtn.className = 'btn btn-sm btn-outline view-btn';
+                    
+                    if (item.status === 'completed') {
+                        viewBtn.innerHTML = '<i class="fas fa-eye"></i> View';
+                        viewBtn.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            loadResearch(item.id);
+                        });
+                        
+                        // PDF button for completed research
+                        const pdfBtn = document.createElement('button');
+                        pdfBtn.className = 'btn btn-sm btn-outline pdf-btn';
+                        pdfBtn.innerHTML = '<i class="fas fa-file-pdf"></i> PDF';
+                        pdfBtn.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            generatePdfFromResearch(item.id);
+                        });
+                        actions.appendChild(pdfBtn);
+                    } else if (item.status === 'in_progress') {
+                        viewBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> In Progress';
+                        viewBtn.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            navigateToResearchProgress({id: item.id, query: item.query, progress: 0});
+                        });
+                    } else {
+                        viewBtn.innerHTML = '<i class="fas fa-eye"></i> View';
+                        viewBtn.disabled = true;
+                    }
+                    
+                    actions.appendChild(viewBtn);
+                    
+                    // Delete button
+                    const deleteBtn = document.createElement('button');
+                    deleteBtn.className = 'btn btn-sm btn-outline delete-btn';
+                    deleteBtn.innerHTML = '<i class="fas fa-trash"></i> Delete';
+                    deleteBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        if (confirm(`Are you sure you want to delete this research: "${item.query}"?`)) {
+                            deleteResearch(item.id);
+                        }
+                    });
+                    actions.appendChild(deleteBtn);
+                    
+                    historyItem.appendChild(actions);
+                    
+                    // Add click handler for the entire item
+                    historyItem.addEventListener('click', (e) => {
+                        // Skip if clicking on a button
+                        if (e.target.closest('button')) {
+                            return;
+                        }
+                        
+                        if (item.status === 'completed') {
+                            loadResearch(item.id);
+                        } else if (item.status === 'in_progress') {
+                            navigateToResearchProgress({id: item.id, query: item.query, progress: 0});
+                        }
+                    });
+                    
+                    // Add to the history list
+                    historyList.appendChild(historyItem);
+                } catch (itemError) {
+                    console.error('Error processing history item:', itemError, item);
+                }
+            });
+            
+        } catch (error) {
+            console.error('Error loading history:', error);
+            historyList.innerHTML = `
+                <div class="error-message">
+                    Error loading history: ${error.message}
+                </div>
+                <div style="text-align: center; margin-top: 1rem;">
+                    <button id="retry-history-btn" class="btn btn-primary">
+                        <i class="fas fa-sync"></i> Retry
+                    </button>
+                </div>`;
+                
+            const retryBtn = document.getElementById('retry-history-btn');
+            if (retryBtn) {
+                retryBtn.addEventListener('click', () => {
+                    loadResearchHistory();
+                });
+            }
+        }
+        
+        // Add a fallback in case something goes wrong and the history list is still empty
+        setTimeout(() => {
+            if (historyList.innerHTML === '' || historyList.innerHTML.includes('loading-spinner')) {
+                console.warn('History list is still empty or showing spinner after load attempt - applying fallback');
+                historyList.innerHTML = `
+                    <div class="error-message">
+                        Something went wrong while loading the history. 
+                    </div>
+                    <div style="text-align: center; margin-top: 1rem;">
+                        <button id="fallback-retry-btn" class="btn btn-primary">
+                            <i class="fas fa-sync"></i> Retry
+                        </button>
+                    </div>`;
+                    
+                const fallbackRetryBtn = document.getElementById('fallback-retry-btn');
+                if (fallbackRetryBtn) {
+                    fallbackRetryBtn.addEventListener('click', () => {
+                        loadResearchHistory();
+                    });
+                }
+            }
+        }, 5000); // Check after 5 seconds
+    }
+    
+    // Function to navigate to research progress
+    function navigateToResearchProgress(research) {
+        document.getElementById('current-query').textContent = research.query;
+        document.getElementById('progress-fill').style.width = `${research.progress || 0}%`;
+        document.getElementById('progress-percentage').textContent = `${research.progress || 0}%`;
+        
+        // Navigate to progress page
+        switchPage('research-progress');
+        
+        // Connect to socket for this research
+        window.connectToResearchSocket(research.id);
+        
+        // Start polling for status
+        pollResearchStatus(research.id);
+    }
+    
+    // Function to delete a research record
+    async function deleteResearch(researchId) {
+        try {
+            const response = await fetch(getApiUrl(`/api/research/${researchId}/delete`), {
+                method: 'DELETE'
+            });
+            
+            if (response.ok) {
+                // Reload the history
+                loadResearchHistory();
+            } else {
+                alert('Failed to delete research. Please try again.');
+            }
+        } catch (error) {
+            console.error('Error deleting research:', error);
+            alert('An error occurred while deleting the research.');
+        }
+    }
+    
+    // Function to load a specific research result
+    async function loadResearch(researchId) {
+        // Navigate to results page
+        switchPage('research-results');
+        
+        const resultsContent = document.getElementById('results-content');
+        resultsContent.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
+        
+        try {
+            // Load research details
+            const detailsResponse = await fetch(getApiUrl(`/api/research/${researchId}`));
+            const details = await detailsResponse.json();
+            
+            // Display metadata
+            document.getElementById('result-query').textContent = details.query;
+            
+            // Format date with duration if available
+            let dateText = formatDate(new Date(details.completed_at || details.created_at));
+            if (details.duration_seconds) {
+                // Format duration
+                let durationText = '';
+                const duration = parseInt(details.duration_seconds);
+                
+                if (duration < 60) { // less than a minute
+                    durationText = `${duration}s`;
+                } else if (duration < 3600) { // less than an hour
+                    durationText = `${Math.floor(duration / 60)}m ${duration % 60}s`;
+                } else { // hours
+                    durationText = `${Math.floor(duration / 3600)}h ${Math.floor((duration % 3600) / 60)}m`;
+                }
+                
+                dateText += ` (Duration: ${durationText})`;
+            }
+            document.getElementById('result-date').textContent = dateText;
+            
+            document.getElementById('result-mode').textContent = details.mode === 'quick' ? 'Quick Summary' : 'Detailed Report';
+            
+            // Load the report content
+            const reportResponse = await fetch(getApiUrl(`/api/report/${researchId}`));
+            const reportData = await reportResponse.json();
+            
+            if (reportData.status === 'success') {
+                // Render markdown
+                const renderedContent = marked.parse(reportData.content);
+                resultsContent.innerHTML = renderedContent;
+                
+                // Apply syntax highlighting
+                document.querySelectorAll('pre code').forEach((block) => {
+                    hljs.highlightElement(block);
+                });
+            } else {
+                resultsContent.innerHTML = '<div class="error-message">Error loading report. Please try again later.</div>';
+            }
+        } catch (error) {
+            console.error('Error loading research:', error);
+            resultsContent.innerHTML = '<div class="error-message">Error loading research results. Please try again later.</div>';
+        }
+    }
+    
+    // Function to load research details page
+    async function loadResearchDetails(researchId) {
+        // Navigate to details page
+        switchPage('research-details');
+        
+        // Initialize the research log area
+        const researchLog = document.getElementById('research-log');
+        researchLog.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
+        
+        try {
+            // Load research details
+            const response = await fetch(getApiUrl(`/api/research/${researchId}/details`));
+            console.log('Research details API response status:', response.status);
+            
+            if (!response.ok) {
+                console.error('API error:', response.status, response.statusText);
+                researchLog.innerHTML = `<div class="error-message">Error loading research details. Status: ${response.status}</div>`;
+                return;
+            }
+            
+            const data = await response.json();
+            console.log('Research details data:', data);
+            
+            if (data.status !== 'success') {
+                researchLog.innerHTML = `<div class="error-message">Error loading research details: ${data.message || 'Unknown error'}</div>`;
+                return;
+            }
+            
+            // Display metadata
+            document.getElementById('detail-query').textContent = data.query || 'N/A';
+            document.getElementById('detail-status').textContent = capitalizeFirstLetter(data.status || 'unknown');
+            document.getElementById('detail-status').className = `metadata-value status-${data.status || 'unknown'}`;
+            document.getElementById('detail-mode').textContent = (data.mode === 'quick' ? 'Quick Summary' : 'Detailed Report') || 'N/A';
+            
+            // Update progress bar
+            const progress = data.progress || 0;
+            document.getElementById('detail-progress-fill').style.width = `${progress}%`;
+            document.getElementById('detail-progress-percentage').textContent = `${progress}%`;
+            
+            // Render log entries
+            renderLogEntries(data.log || []);
+            
+            // Connect to socket for real-time updates
+            window.connectToResearchSocket(researchId);
+            
+            // Add appropriate actions based on research status
+            const detailActions = document.getElementById('detail-actions');
+            detailActions.innerHTML = '';
+            
+            if (data.status === 'completed') {
+                const viewResultsBtn = document.createElement('button');
+                viewResultsBtn.className = 'btn btn-primary';
+                viewResultsBtn.innerHTML = '<i class="fas fa-eye"></i> View Results';
+                viewResultsBtn.addEventListener('click', () => loadResearch(researchId));
+                detailActions.appendChild(viewResultsBtn);
+                
+                // Add download PDF button
+                const downloadPdfBtn = document.createElement('button');
+                downloadPdfBtn.className = 'btn btn-outline';
+                downloadPdfBtn.innerHTML = '<i class="fas fa-file-pdf"></i> Download PDF';
+                downloadPdfBtn.addEventListener('click', () => generatePdfFromResearch(researchId));
+                detailActions.appendChild(downloadPdfBtn);
+            } else if (data.status === 'in_progress') {
+                const viewProgressBtn = document.createElement('button');
+                viewProgressBtn.className = 'btn btn-primary';
+                viewProgressBtn.innerHTML = '<i class="fas fa-sync"></i> View Live Progress';
+                viewProgressBtn.addEventListener('click', () => {
+                    document.getElementById('current-query').textContent = data.query || '';
+                    
+                    // Navigate to progress page
+                    switchPage('research-progress');
+                    
+                    // Connect to socket
+                    window.connectToResearchSocket(researchId);
+                });
+                detailActions.appendChild(viewProgressBtn);
+            }
+        } catch (error) {
+            console.error('Error loading research details:', error);
+            researchLog.innerHTML = `<div class="error-message">Error loading research details: ${error.message}</div>`;
+        }
+    }
+    
+    // Function to render log entries
+    function renderLogEntries(logEntries) {
+        const researchLog = document.getElementById('research-log');
+        researchLog.innerHTML = '';
+        
+        if (!logEntries || logEntries.length === 0) {
+            researchLog.innerHTML = '<div class="empty-state">No log entries available.</div>';
+            return;
+        }
+        
+        try {
+            // Use a document fragment for better performance
+            const fragment = document.createDocumentFragment();
+            const template = document.getElementById('log-entry-template');
+            
+            if (!template) {
+                console.error('Log entry template not found');
+                researchLog.innerHTML = '<div class="error-message">Error rendering log entries: Template not found</div>';
+                return;
+            }
+            
+            logEntries.forEach(entry => {
+                if (!entry) return; // Skip invalid entries
+                
+                try {
+                    const clone = document.importNode(template.content, true);
+                    
+                    // Format the timestamp
+                    let timeStr = 'N/A';
+                    try {
+                        if (entry.time) {
+                            const time = new Date(entry.time);
+                            timeStr = time.toLocaleTimeString();
+                        }
+                    } catch (timeErr) {
+                        console.warn('Error formatting time:', timeErr);
+                    }
+                    
+                    const timeEl = clone.querySelector('.log-entry-time');
+                    if (timeEl) timeEl.textContent = timeStr;
+                    
+                    // Add message with phase highlighting if available
+                    const messageEl = clone.querySelector('.log-entry-message');
+                    if (messageEl) {
+                        let phaseClass = '';
+                        if (entry.metadata && entry.metadata.phase) {
+                            phaseClass = `phase-${entry.metadata.phase}`;
+                        }
+                        messageEl.textContent = entry.message || 'No message';
+                        messageEl.classList.add(phaseClass);
+                    }
+                    
+                    // Add progress information if available
+                    const progressEl = clone.querySelector('.log-entry-progress');
+                    if (progressEl) {
+                        if (entry.progress !== null && entry.progress !== undefined) {
+                            progressEl.textContent = `Progress: ${entry.progress}%`;
+                        } else {
+                            progressEl.textContent = '';
+                        }
+                    }
+                    
+                    fragment.appendChild(clone);
+                } catch (entryError) {
+                    console.error('Error processing log entry:', entryError, entry);
+                    // Continue with other entries
+                }
+            });
+            
+            researchLog.appendChild(fragment);
+            
+            // Scroll to the bottom
+            researchLog.scrollTop = researchLog.scrollHeight;
+        } catch (error) {
+            console.error('Error rendering log entries:', error);
+            researchLog.innerHTML = '<div class="error-message">Error rendering log entries. Please try again later.</div>';
+        }
+        
+        // Connect to socket for updates if this is an in-progress research
+        if (research && research.status === 'in_progress') {
+            window.connectToResearchSocket(researchId);
+        }
+    }
+    
+    // Function to update detail log with a new entry
+    function updateDetailLogEntry(logEntry) {
+        if (!logEntry || !document.getElementById('research-details').classList.contains('active')) {
+            return;
+        }
+        
+        const researchLog = document.getElementById('research-log');
+        const template = document.getElementById('log-entry-template');
+        const clone = document.importNode(template.content, true);
+        
+        // Format the timestamp
+        const time = new Date(logEntry.time);
+        clone.querySelector('.log-entry-time').textContent = time.toLocaleTimeString();
+        
+        // Add message with phase highlighting if available
+        const messageEl = clone.querySelector('.log-entry-message');
+        let phaseClass = '';
+        if (logEntry.metadata && logEntry.metadata.phase) {
+            phaseClass = `phase-${logEntry.metadata.phase}`;
+        }
+        messageEl.textContent = logEntry.message;
+        messageEl.classList.add(phaseClass);
+        
+        // Add progress information if available
+        const progressEl = clone.querySelector('.log-entry-progress');
+        if (logEntry.progress !== null && logEntry.progress !== undefined) {
+            progressEl.textContent = `Progress: ${logEntry.progress}%`;
+            
+            // Also update the progress bar in the details view
+            document.getElementById('detail-progress-fill').style.width = `${logEntry.progress}%`;
+            document.getElementById('detail-progress-percentage').textContent = `${logEntry.progress}%`;
+        } else {
+            progressEl.textContent = '';
+        }
+        
+        researchLog.appendChild(clone);
+        
+        // Scroll to the bottom
+        researchLog.scrollTop = researchLog.scrollHeight;
+    }
+    
+    // Back to history button handlers
+    document.getElementById('back-to-history').addEventListener('click', () => {
+        const historyNav = Array.from(navItems).find(item => item.getAttribute('data-page') === 'history');
+        historyNav.click();
+    });
+    
+    document.getElementById('back-to-history-from-details').addEventListener('click', () => {
+        const historyNav = Array.from(navItems).find(item => item.getAttribute('data-page') === 'history');
+        historyNav.click();
+    });
+    
+    // Helper functions
+    function capitalizeFirstLetter(string) {
+        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;
+        
+        // Fetch current status
+        fetch(getApiUrl(`/api/research/${currentResearchId}`))
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('current-query').textContent = data.query || '';
+            document.getElementById('progress-fill').style.width = `${data.progress || 0}%`;
+            document.getElementById('progress-percentage').textContent = `${data.progress || 0}%`;
+            
+            // Connect to socket for this research
+            window.connectToResearchSocket(currentResearchId);
+        })
+        .catch(error => {
+            console.error('Error fetching research status:', error);
+        });
+    }
+
+    // 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);
+        
+        // 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');
+        
+        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')
+        );
+        
+        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');
+                }
+                
+                // 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';
+                }
+            }
+            
+            // 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
+        if (currentResearchId) {
+            window.connectToResearchSocket(currentResearchId);
+        }
+    }
+
+    // Function to update the research progress page from nav click
+    function updateProgressPage() {
+        if (!isResearchInProgress || !currentResearchId) {
+            return;
+        }
+        
+        // Update the progress page
+        fetch(getApiUrl(`/api/research/${currentResearchId}`))
+            .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);
+                
+                // Check if we need to show the terminate button
+                if (data.status === 'in_progress') {
+                    const terminateBtn = document.getElementById('terminate-research-btn');
+                    if (terminateBtn) {
+                        terminateBtn.style.display = 'inline-flex';
+                        terminateBtn.disabled = false;
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching research status:', error);
+            });
+    }
+
+    // Function to update a specific history item without reloading the whole list
+    function updateHistoryItemStatus(researchId, status, statusText) {
+        const historyList = document.getElementById('history-list');
+        
+        // Look for the item in the active research banner
+        const activeBanner = historyList.querySelector(`.active-research-banner[data-research-id="${researchId}"]`);
+        if (activeBanner) {
+            const statusEl = activeBanner.querySelector('.history-item-status');
+            if (statusEl) {
+                statusEl.textContent = statusText || capitalizeFirstLetter(status);
+                statusEl.className = 'history-item-status';
+                statusEl.classList.add(`status-${status}`);
+            }
+            
+            // Update buttons
+            const terminateBtn = activeBanner.querySelector('.terminate-btn');
+            if (terminateBtn) {
+                terminateBtn.style.display = 'none';
+            }
+            
+            const viewProgressBtn = activeBanner.querySelector('.view-progress-btn');
+            if (viewProgressBtn) {
+                if (status === 'suspended') {
+                    viewProgressBtn.innerHTML = '<i class="fas fa-pause-circle"></i> Suspended';
+                } else if (status === 'failed') {
+                    viewProgressBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
+                }
+                viewProgressBtn.disabled = true;
+            }
+            
+            return;
+        }
+        
+        // Look for the item in the regular list
+        const historyItem = historyList.querySelector(`.history-item[data-research-id="${researchId}"]`);
+        if (historyItem) {
+            const statusEl = historyItem.querySelector('.history-item-status');
+            if (statusEl) {
+                statusEl.textContent = statusText || capitalizeFirstLetter(status);
+                statusEl.className = 'history-item-status';
+                statusEl.classList.add(`status-${status}`);
+            }
+            
+            // Update view button
+            const viewBtn = historyItem.querySelector('.view-btn');
+            if (viewBtn) {
+                if (status === 'suspended') {
+                    viewBtn.innerHTML = '<i class="fas fa-pause-circle"></i> Suspended';
+                    viewBtn.disabled = true;
+                } else if (status === 'failed') {
+                    viewBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
+                    viewBtn.disabled = true;
+                }
+            }
+        }
+    }
+
+    // PDF Generation Functions
+    function generatePdf() {
+        const resultsContent = document.getElementById('results-content');
+        const query = document.getElementById('result-query').textContent;
+        const date = document.getElementById('result-date').textContent;
+        const mode = document.getElementById('result-mode').textContent;
+        
+        // Show loading indicator
+        const loadingIndicator = document.createElement('div');
+        loadingIndicator.className = 'loading-spinner centered';
+        loadingIndicator.innerHTML = '<div class="spinner"></div><p style="margin-top: 10px;">Generating PDF...</p>';
+        resultsContent.parentNode.insertBefore(loadingIndicator, resultsContent);
+        resultsContent.style.display = 'none';
+        
+        // Create a clone of the content for PDF generation
+        const contentClone = resultsContent.cloneNode(true);
+        contentClone.style.display = 'block';
+        contentClone.style.position = 'absolute';
+        contentClone.style.left = '-9999px';
+        contentClone.style.width = '800px';
+        
+        // Apply PDF-specific styling for better readability
+        contentClone.style.background = '#ffffff';
+        contentClone.style.color = '#333333';
+        contentClone.style.padding = '20px';
+        
+        // Improve visibility by adjusting styles specifically for PDF
+        const applyPdfStyles = (element) => {
+            // Set all text to dark color for better readability on white background
+            element.querySelectorAll('*').forEach(el => {
+                // Skip elements that already have inline color styles
+                if (!el.style.color) {
+                    el.style.color = '#333333';
+                }
+                
+                // Fix background colors
+                if (el.style.backgroundColor && 
+                    (el.style.backgroundColor.includes('var(--bg') || 
+                     el.style.backgroundColor.includes('#121212') ||
+                     el.style.backgroundColor.includes('#1e1e2d') ||
+                     el.style.backgroundColor.includes('#2a2a3a'))) {
+                    el.style.backgroundColor = '#f8f8f8';
+                }
+                
+                // Handle code blocks specifically
+                if (el.tagName === 'PRE' || el.tagName === 'CODE') {
+                    el.style.backgroundColor = '#f5f5f5';
+                    el.style.border = '1px solid #e0e0e0';
+                    el.style.color = '#333333';
+                }
+                
+                // Make links visible
+                if (el.tagName === 'A') {
+                    el.style.color = '#0066cc';
+                    el.style.textDecoration = 'underline';
+                }
+            });
+            
+            // Fix specific syntax highlighting elements for PDF
+            element.querySelectorAll('.hljs').forEach(hljs => {
+                hljs.style.backgroundColor = '#f8f8f8';
+                hljs.style.color = '#333333';
+                
+                // Fix common syntax highlighting colors for PDF
+                hljs.querySelectorAll('.hljs-keyword').forEach(el => el.style.color = '#0000cc');
+                hljs.querySelectorAll('.hljs-string').forEach(el => el.style.color = '#008800');
+                hljs.querySelectorAll('.hljs-number').forEach(el => el.style.color = '#aa0000');
+                hljs.querySelectorAll('.hljs-comment').forEach(el => el.style.color = '#888888');
+                hljs.querySelectorAll('.hljs-function').forEach(el => el.style.color = '#880000');
+            });
+        };
+        
+        document.body.appendChild(contentClone);
+        
+        // Apply PDF-specific styles
+        applyPdfStyles(contentClone);
+        
+        // Add title and metadata to the PDF content
+        const headerDiv = document.createElement('div');
+        headerDiv.innerHTML = `
+            <h1 style="color: #6e4ff6; font-size: 24px; margin-bottom: 10px;">${query}</h1>
+            <div style="margin-bottom: 20px; font-size: 14px; color: #666;">
+                <p><strong>Generated:</strong> ${date}</p>
+                <p><strong>Mode:</strong> ${mode}</p>
+                <p><strong>Source:</strong> Deep Research Lab</p>
+            </div>
+            <hr style="margin-bottom: 20px; border: 1px solid #eee;">
+        `;
+        contentClone.insertBefore(headerDiv, contentClone.firstChild);
+        
+        setTimeout(() => {
+            try {
+                // Use window.jspdf which is from the UMD bundle
+                const { jsPDF } = window.jspdf;
+                const pdf = new jsPDF('p', 'pt', 'a4');
+                const pdfWidth = pdf.internal.pageSize.getWidth();
+                const pdfHeight = pdf.internal.pageSize.getHeight();
+                const margin = 40;
+                const contentWidth = pdfWidth - 2 * margin;
+                
+                // Create a more efficient PDF generation approach that keeps text selectable
+                const generateTextBasedPDF = async () => {
+                    try {
+                        // Get all text elements and handle them differently than images and special content
+                        const elements = Array.from(contentClone.children);
+                        let currentY = margin;
+                        let pageNum = 1;
+                        
+                        // Function to add a page with header
+                        const addPageWithHeader = (pageNum) => {
+                            if (pageNum > 1) {
+                                pdf.addPage();
+                            }
+                            pdf.setFontSize(8);
+                            pdf.setTextColor(100, 100, 100);
+                            pdf.text(`Deep Research - ${query} - Page ${pageNum}`, margin, pdfHeight - 20);
+                        };
+                        
+                        addPageWithHeader(pageNum);
+                        
+                        // Process each element
+                        for (const element of elements) {
+                            // Simple text content - handled directly by jsPDF
+                            if ((element.tagName === 'P' || element.tagName === 'DIV') && 
+                                !element.querySelector('img, canvas, svg') &&
+                                element.children.length === 0) {
+                                
+                                pdf.setFontSize(11);
+                                pdf.setTextColor(0, 0, 0);
+                                
+                                const text = element.textContent.trim();
+                                if (!text) continue; // Skip empty text
+                                
+                                const textLines = pdf.splitTextToSize(text, contentWidth);
+                                
+                                // Check if we need a new page
+                                if (currentY + (textLines.length * 14) > pdfHeight - margin) {
+                                    pageNum++;
+                                    addPageWithHeader(pageNum);
+                                    currentY = margin;
+                                }
+                                
+                                pdf.text(textLines, margin, currentY + 12);
+                                currentY += (textLines.length * 14) + 10;
+                            } 
+                            // Handle headings
+                            else if (['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(element.tagName)) {
+                                const fontSize = {
+                                    'H1': 24,
+                                    'H2': 20,
+                                    'H3': 16,
+                                    'H4': 14,
+                                    'H5': 12,
+                                    'H6': 11
+                                }[element.tagName];
+                                
+                                // Add heading text as native PDF text 
+                                pdf.setFontSize(fontSize);
+                                
+                                // Use a different color for headings to match styling
+                                if (element.tagName === 'H1') {
+                                    pdf.setTextColor(110, 79, 246); // Purple for main headers
+                                } else if (element.tagName === 'H2') {
+                                    pdf.setTextColor(70, 90, 150); // Darker blue for H2
+                                } else {
+                                    pdf.setTextColor(0, 0, 0); // Black for other headings
+                                }
+                                
+                                const text = element.textContent.trim();
+                                if (!text) continue; // Skip empty headings
+                                
+                                const textLines = pdf.splitTextToSize(text, contentWidth);
+                                
+                                // Check if we need a new page
+                                if (currentY + (textLines.length * (fontSize + 4)) > pdfHeight - margin) {
+                                    pageNum++;
+                                    addPageWithHeader(pageNum);
+                                    currentY = margin + 40; // Reset Y position after header
+                                }
+                                
+                                pdf.text(textLines, margin, currentY + fontSize);
+                                currentY += (textLines.length * (fontSize + 4)) + 10;
+                                
+                                // Add a subtle underline for H1 and H2
+                                if (element.tagName === 'H1' || element.tagName === 'H2') {
+                                    pdf.setDrawColor(110, 79, 246, 0.5);
+                                    pdf.setLineWidth(0.5);
+                                    pdf.line(
+                                        margin, 
+                                        currentY - 5, 
+                                        margin + Math.min(contentWidth, pdf.getTextWidth(text) * 1.2), 
+                                        currentY - 5
+                                    );
+                                    currentY += 5; // Add a bit more space after underlined headings
+                                }
+                            }
+                            // Handle lists
+                            else if (element.tagName === 'UL' || element.tagName === 'OL') {
+                                pdf.setFontSize(11);
+                                pdf.setTextColor(0, 0, 0);
+                                
+                                const listItems = element.querySelectorAll('li');
+                                let itemNumber = 1;
+                                
+                                for (const item of listItems) {
+                                    const prefix = element.tagName === 'UL' ? '• ' : `${itemNumber}. `;
+                                    const text = item.textContent.trim();
+                                    
+                                    if (!text) continue; // Skip empty list items
+                                    
+                                    // Split text to fit width, accounting for bullet/number indent
+                                    const textLines = pdf.splitTextToSize(text, contentWidth - 15);
+                                    
+                                    // Check if we need a new page
+                                    if (currentY + (textLines.length * 14) > pdfHeight - margin) {
+                                        pageNum++;
+                                        addPageWithHeader(pageNum);
+                                        currentY = margin;
+                                    }
+                                    
+                                    // Add the bullet/number
+                                    pdf.text(prefix, margin, currentY + 12);
+                                    
+                                    // Add the text with indent
+                                    pdf.text(textLines, margin + 15, currentY + 12);
+                                    currentY += (textLines.length * 14) + 5;
+                                    
+                                    if (element.tagName === 'OL') itemNumber++;
+                                }
+                                
+                                currentY += 5; // Extra space after list
+                            }
+                            // Handle code blocks as text
+                            else if (element.tagName === 'PRE' || element.querySelector('pre')) {
+                                const codeElement = element.tagName === 'PRE' ? element : element.querySelector('pre');
+                                const codeText = codeElement.textContent.trim();
+                                
+                                if (!codeText) continue; // Skip empty code blocks
+                                
+                                // Use monospace font for code
+                                pdf.setFont("courier", "normal");
+                                pdf.setFontSize(9); // Smaller font for code
+                                
+                                // Calculate code block size
+                                const codeLines = codeText.split('\n');
+                                const lineHeight = 10; // Smaller line height for code
+                                const codeBlockHeight = (codeLines.length * lineHeight) + 20; // Add padding
+                                
+                                // Add a background for the code block
+                                if (currentY + codeBlockHeight > pdfHeight - margin) {
+                                    pageNum++;
+                                    addPageWithHeader(pageNum);
+                                    currentY = margin;
+                                }
+                                
+                                // Draw code block background
+                                pdf.setFillColor(245, 245, 245); // Light gray background
+                                pdf.rect(margin - 5, currentY, contentWidth + 10, codeBlockHeight, 'F');
+                                
+                                // Draw a border
+                                pdf.setDrawColor(220, 220, 220);
+                                pdf.setLineWidth(0.5);
+                                pdf.rect(margin - 5, currentY, contentWidth + 10, codeBlockHeight, 'S');
+                                
+                                // Add the code text
+                                pdf.setTextColor(0, 0, 0);
+                                currentY += 10; // Add padding at top
+                                
+                                codeLines.forEach(line => {
+                                    // Handle indentation by preserving leading spaces
+                                    const spacePadding = line.match(/^(\s*)/)[0].length;
+                                    const visibleLine = line.trimLeft();
+                                    
+                                    // Calculate width of space character
+                                    const spaceWidth = pdf.getStringUnitWidth(' ') * 9 / pdf.internal.scaleFactor;
+                                    
+                                    pdf.text(visibleLine, margin + (spacePadding * spaceWidth), currentY);
+                                    currentY += lineHeight;
+                                });
+                                
+                                currentY += 10; // Add padding at bottom
+                                
+                                // Reset to normal font
+                                pdf.setFont("helvetica", "normal");
+                                pdf.setFontSize(11);
+                            }
+                            // Handle tables as text
+                            else if (element.tagName === 'TABLE' || element.querySelector('table')) {
+                                const tableElement = element.tagName === 'TABLE' ? element : element.querySelector('table');
+                                
+                                if (!tableElement) continue;
+                                
+                                // Get table rows
+                                const rows = Array.from(tableElement.querySelectorAll('tr'));
+                                if (rows.length === 0) continue;
+                                
+                                // Calculate column widths
+                                const headerCells = Array.from(rows[0].querySelectorAll('th, td'));
+                                const numColumns = headerCells.length;
+                                
+                                if (numColumns === 0) continue;
+                                
+                                // Default column width distribution (equal)
+                                const colWidth = contentWidth / numColumns;
+                                
+                                // Start drawing table
+                                let tableY = currentY + 10;
+                                
+                                // Check if we need a new page
+                                if (tableY + (rows.length * 20) > pdfHeight - margin) {
+                                    pageNum++;
+                                    addPageWithHeader(pageNum);
+                                    tableY = margin + 10;
+                                    currentY = margin;
+                                }
+                                
+                                // Draw table header
+                                pdf.setFillColor(240, 240, 240);
+                                pdf.rect(margin, tableY, contentWidth, 20, 'F');
+                                
+                                pdf.setFont("helvetica", "bold");
+                                pdf.setFontSize(10);
+                                pdf.setTextColor(0, 0, 0);
+                                
+                                headerCells.forEach((cell, index) => {
+                                    const text = cell.textContent.trim();
+                                    const x = margin + (index * colWidth) + 5;
+                                    pdf.text(text, x, tableY + 13);
+                                });
+                                
+                                // Draw horizontal line after header
+                                pdf.setDrawColor(200, 200, 200);
+                                pdf.setLineWidth(0.5);
+                                pdf.line(margin, tableY + 20, margin + contentWidth, tableY + 20);
+                                
+                                tableY += 20;
+                                
+                                // Draw table rows
+                                pdf.setFont("helvetica", "normal");
+                                for (let i = 1; i < rows.length; i++) {
+                                    // Check if we need a new page
+                                    if (tableY + 20 > pdfHeight - margin) {
+                                        // Draw bottom border for last row on current page
+                                        pdf.line(margin, tableY, margin + contentWidth, tableY);
+                                        
+                                        // Add new page
+                                        pageNum++;
+                                        addPageWithHeader(pageNum);
+                                        tableY = margin + 10;
+                                        
+                                        // Redraw header on new page
+                                        pdf.setFillColor(240, 240, 240);
+                                        pdf.rect(margin, tableY, contentWidth, 20, 'F');
+                                        
+                                        pdf.setFont("helvetica", "bold");
+                                        headerCells.forEach((cell, index) => {
+                                            const text = cell.textContent.trim();
+                                            const x = margin + (index * colWidth) + 5;
+                                            pdf.text(text, x, tableY + 13);
+                                        });
+                                        
+                                        pdf.line(margin, tableY + 20, margin + contentWidth, tableY + 20);
+                                        tableY += 20;
+                                        pdf.setFont("helvetica", "normal");
+                                    }
+                                    
+                                    // Get cells for this row
+                                    const cells = Array.from(rows[i].querySelectorAll('td, th'));
+                                    
+                                    // Alternate row background for better readability
+                                    if (i % 2 === 0) {
+                                        pdf.setFillColor(250, 250, 250);
+                                        pdf.rect(margin, tableY, contentWidth, 20, 'F');
+                                    }
+                                    
+                                    // Add cell content
+                                    cells.forEach((cell, index) => {
+                                        const text = cell.textContent.trim();
+                                        const x = margin + (index * colWidth) + 5;
+                                        pdf.text(text, x, tableY + 13);
+                                    });
+                                    
+                                    // Draw horizontal line after row
+                                    pdf.line(margin, tableY + 20, margin + contentWidth, tableY + 20);
+                                    tableY += 20;
+                                }
+                                
+                                // Draw vertical lines for columns
+                                for (let i = 0; i <= numColumns; i++) {
+                                    const x = margin + (i * colWidth);
+                                    pdf.line(x, currentY + 10, x, tableY);
+                                }
+                                
+                                currentY = tableY + 10;
+                            }
+                            // Images still need to be handled as images
+                            else if (element.tagName === 'IMG' || element.querySelector('img')) {
+                                const imgElement = element.tagName === 'IMG' ? element : element.querySelector('img');
+                                
+                                if (!imgElement || !imgElement.src) continue;
+                                
+                                try {
+                                    // Create a new image to get dimensions
+                                    const img = new Image();
+                                    img.src = imgElement.src;
+                                    
+                                    // Calculate dimensions
+                                    const imgWidth = contentWidth;
+                                    const imgHeight = img.height * (contentWidth / img.width);
+                                    
+                                    // Check if we need a new page
+                                    if (currentY + imgHeight > pdfHeight - margin) {
+                                        pageNum++;
+                                        addPageWithHeader(pageNum);
+                                        currentY = margin;
+                                    }
+                                    
+                                    // Add image to PDF
+                                    pdf.addImage(img.src, 'JPEG', margin, currentY, imgWidth, imgHeight);
+                                    currentY += imgHeight + 10;
+                                } catch (imgError) {
+                                    console.error('Error adding image:', imgError);
+                                    pdf.text("[Image could not be rendered]", margin, currentY + 12);
+                                    currentY += 20;
+                                }
+                            }
+                            // Other complex elements still use html2canvas as fallback
+                            else {
+                                try {
+                                const canvas = await html2canvas(element, {
+                                        scale: 2,
+                                    useCORS: true,
+                                    logging: false,
+                                    backgroundColor: '#FFFFFF'
+                                });
+                                
+                                const imgData = canvas.toDataURL('image/png');
+                                    const imgWidth = contentWidth;
+                                const imgHeight = (canvas.height * contentWidth) / canvas.width;
+                                
+                                if (currentY + imgHeight > pdfHeight - margin) {
+                                    pageNum++;
+                                    addPageWithHeader(pageNum);
+                                    currentY = margin;
+                                }
+                                
+                                    pdf.addImage(imgData, 'PNG', margin, currentY, imgWidth, imgHeight);
+                                currentY += imgHeight + 10;
+                                } catch (canvasError) {
+                                    console.error('Error rendering complex element:', canvasError);
+                                    pdf.text("[Complex content could not be rendered]", margin, currentY + 12);
+                                    currentY += 20;
+                                }
+                            }
+                        }
+                        
+                        // Download the PDF
+                        const filename = `${query.replace(/[^a-z0-9]/gi, '_').substring(0, 30).toLowerCase()}_research.pdf`;
+                        pdf.save(filename);
+                        
+                        // Clean up
+                        document.body.removeChild(contentClone);
+                        resultsContent.style.display = 'block';
+                        loadingIndicator.remove();
+                    } catch (error) {
+                        console.error('Error generating PDF:', error);
+                        alert('An error occurred while generating the PDF. Please try again.');
+                        document.body.removeChild(contentClone);
+                        resultsContent.style.display = 'block';
+                        loadingIndicator.remove();
+                    }
+                };
+                
+                generateTextBasedPDF();
+            } catch (error) {
+                console.error('Error initializing PDF generation:', error);
+                alert('An error occurred while preparing the PDF. Please try again.');
+                document.body.removeChild(contentClone);
+                resultsContent.style.display = 'block';
+                loadingIndicator.remove();
+            }
+        }, 100);
+    }
+    
+    // Function to generate PDF from a specific research ID
+    async function generatePdfFromResearch(researchId) {
+        try {
+            // Load research details
+            const detailsResponse = await fetch(getApiUrl(`/api/research/${researchId}`));
+            const details = await detailsResponse.json();
+            
+            // Load the report content
+            const reportResponse = await fetch(getApiUrl(`/api/report/${researchId}`));
+            const reportData = await reportResponse.json();
+            
+            if (reportData.status === 'success') {
+                // Create a temporary container to render the content
+                const tempContainer = document.createElement('div');
+                tempContainer.className = 'results-content pdf-optimized';
+                tempContainer.style.display = 'none';
+                document.body.appendChild(tempContainer);
+                
+                // Render markdown with optimized styles for PDF
+                const renderedContent = marked.parse(reportData.content);
+                tempContainer.innerHTML = renderedContent;
+                
+                // Apply syntax highlighting
+                tempContainer.querySelectorAll('pre code').forEach((block) => {
+                    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})`;
+                }
+                
+                // Set up data for PDF generation
+                document.getElementById('result-query').textContent = details.query;
+                document.getElementById('result-date').textContent = dateText;
+                document.getElementById('result-mode').textContent = details.mode === 'quick' ? 'Quick Summary' : 'Detailed Report';
+                
+                // Replace the current content with our temporary content
+                const resultsContent = document.getElementById('results-content');
+                const originalContent = resultsContent.innerHTML;
+                resultsContent.innerHTML = tempContainer.innerHTML;
+                
+                // Generate the PDF
+                generatePdf();
+                
+                // Restore original content if we're not on the results page
+                setTimeout(() => {
+                    if (!document.getElementById('research-results').classList.contains('active')) {
+                        resultsContent.innerHTML = originalContent;
+                    }
+                    document.body.removeChild(tempContainer);
+                }, 500);
+                
+            } else {
+                alert('Error loading report. Could not generate PDF.');
+            }
+        } catch (error) {
+            console.error('Error generating PDF:', error);
+            alert('An error occurred while generating the PDF. Please try again.');
+        }
+    }
+
+    // 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);
+                }
+            }
+        });
+    }
+    
+    // Initialize PDF download button
+    const downloadPdfBtn = document.getElementById('download-pdf-btn');
+    if (downloadPdfBtn) {
+        downloadPdfBtn.addEventListener('click', generatePdf);
+    }
+
+    // Function to set up the research form
+    function setupResearchForm() {
+        const researchForm = document.getElementById('research-form');
+        const notificationToggle = document.getElementById('notification-toggle');
+        
+        // Set notification state from toggle
+        if (notificationToggle) {
+            notificationsEnabled = notificationToggle.checked;
+            
+            // Listen for changes to the toggle
+            notificationToggle.addEventListener('change', function() {
+                notificationsEnabled = this.checked;
+                // Store preference in localStorage for persistence
+                localStorage.setItem('notificationsEnabled', notificationsEnabled);
+            });
+            
+            // Load saved preference from localStorage
+            const savedPref = localStorage.getItem('notificationsEnabled');
+            if (savedPref !== null) {
+                notificationsEnabled = savedPref === 'true';
+                notificationToggle.checked = notificationsEnabled;
+            }
+        }
+        
+        // ... existing form setup ...
+    }
+
+    // Add event listener for view results button
+    const viewResultsBtn = document.getElementById('view-results-btn');
+    if (viewResultsBtn) {
+        viewResultsBtn.addEventListener('click', () => {
+            console.log('View results button clicked');
+            if (currentResearchId) {
+                loadResearch(currentResearchId);
+            } else {
+                console.error('No research ID available');
+            }
+        });
+    }
+    
+    // Add listener for research_completed custom event
+    document.addEventListener('research_completed', (event) => {
+        console.log('Research completed event received:', event.detail);
+        const data = event.detail;
+        
+        // Mark research as no longer in progress
+        isResearchInProgress = false;
+        
+        // Hide terminate button
+        const terminateBtn = document.getElementById('terminate-research-btn');
+        if (terminateBtn) {
+            terminateBtn.style.display = 'none';
+        }
+        
+        // Update navigation
+        updateNavigationBasedOnResearchStatus();
+    });
+});