local-deep-research 0.4.4__py3-none-any.whl → 0.5.0__py3-none-any.whl

local_deep_research/web/static/js/components/details.js

@@ -0,0 +1,751 @@
+/**
+ * Research Details Page JavaScript
+ * Handles displaying detailed metrics for a specific research session
+ */
+(function() {
+    'use strict';
+
+    let researchId = null;
+    let metricsData = null;
+    let timelineChart = null;
+    let searchChart = null;
+
+    // Format large numbers with commas
+    function formatNumber(num) {
+        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+
+    // Format currency
+    function formatCurrency(amount) {
+        if (amount < 0.01) {
+            return `$${amount.toFixed(6)}`;
+        } else if (amount < 1) {
+            return `$${amount.toFixed(4)}`;
+        } else {
+            return `$${amount.toFixed(2)}`;
+        }
+    }
+
+    // Get research ID from URL
+    function getResearchIdFromUrl() {
+        const path = window.location.pathname;
+        const match = path.match(/\/research\/details\/(\d+)/);
+        return match ? parseInt(match[1]) : null;
+    }
+
+    // Load research metrics data
+    async function loadResearchMetrics() {
+        try {
+            console.log('Loading research metrics for ID:', researchId);
+
+            // Show loading state
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('details-content').style.display = 'none';
+            document.getElementById('error').style.display = 'none';
+
+            // Load research details (includes strategy)
+            console.log('Fetching research details...');
+            const detailsResponse = await fetch(`/history/details/${researchId}`);
+            console.log('Details response status:', detailsResponse.status);
+
+            let researchDetails = null;
+            if (detailsResponse.ok) {
+                researchDetails = await detailsResponse.json();
+                console.log('Research details loaded:', researchDetails);
+            }
+
+            // Load research metrics
+            console.log('Fetching research metrics...');
+            const metricsResponse = await fetch(`/metrics/api/metrics/research/${researchId}`);
+            console.log('Metrics response status:', metricsResponse.status);
+
+            if (!metricsResponse.ok) {
+                throw new Error(`Metrics API failed: ${metricsResponse.status}`);
+            }
+
+            const metricsResult = await metricsResponse.json();
+            console.log('Metrics result:', metricsResult);
+
+            if (metricsResult.status !== 'success') {
+                throw new Error('Failed to load research metrics');
+            }
+
+            metricsData = metricsResult.metrics;
+            console.log('Metrics data loaded:', metricsData);
+
+            // Display research details first
+            if (researchDetails) {
+                displayResearchDetails(researchDetails);
+            }
+
+            // Load timeline metrics
+            console.log('Fetching timeline metrics...');
+            const timelineResponse = await fetch(`/metrics/api/metrics/research/${researchId}/timeline`);
+            console.log('Timeline response status:', timelineResponse.status);
+
+            let timelineData = null;
+            if (timelineResponse.ok) {
+                const timelineResult = await timelineResponse.json();
+                console.log('Timeline result:', timelineResult);
+                if (timelineResult.status === 'success') {
+                    timelineData = timelineResult.metrics;
+                }
+            }
+
+            // Load search metrics
+            console.log('Fetching search metrics...');
+            const searchResponse = await fetch(`/metrics/api/metrics/research/${researchId}/search`);
+            console.log('Search response status:', searchResponse.status);
+
+            let searchData = null;
+            if (searchResponse.ok) {
+                const searchResult = await searchResponse.json();
+                console.log('Search result:', searchResult);
+                if (searchResult.status === 'success') {
+                    searchData = searchResult.metrics;
+                }
+            }
+
+            // Display all data
+            console.log('Displaying research metrics...');
+            displayResearchMetrics();
+
+            if (timelineData) {
+                console.log('Displaying timeline metrics...');
+                displayTimelineMetrics(timelineData);
+
+                console.log('Chart.js available:', typeof Chart !== 'undefined');
+                console.log('Timeline data for chart:', timelineData);
+                createTimelineChart(timelineData);
+            }
+
+            if (searchData) {
+                console.log('Displaying search metrics...');
+                displaySearchMetrics(searchData);
+                createSearchChart(searchData);
+            }
+
+            // Load cost data
+            console.log('Loading cost data...');
+            loadCostData();
+
+            console.log('Showing details content...');
+            const loadingEl = document.getElementById('loading');
+            const contentEl = document.getElementById('details-content');
+            const errorEl = document.getElementById('error');
+
+            loadingEl.style.display = 'none';
+            errorEl.style.display = 'none';
+            contentEl.style.display = 'block';
+
+            // Show metrics sections
+            console.log('Showing metrics sections...');
+            const tokenMetricsSection = document.getElementById('token-metrics-section');
+            const searchMetricsSection = document.getElementById('search-metrics-section');
+
+            if (tokenMetricsSection) {
+                tokenMetricsSection.style.display = 'block';
+                console.log('Token metrics section shown');
+            }
+
+            if (searchMetricsSection) {
+                searchMetricsSection.style.display = 'block';
+                console.log('Search metrics section shown');
+            }
+
+            // Force visibility with CSS overrides
+            contentEl.style.visibility = 'visible';
+            contentEl.style.opacity = '1';
+            contentEl.style.position = 'relative';
+            contentEl.style.zIndex = '1000';
+
+            console.log('Loading display:', loadingEl.style.display);
+            console.log('Content display:', contentEl.style.display);
+            console.log('Error display:', errorEl.style.display);
+
+            // Verify content is actually populated
+            const totalTokensEl = document.getElementById('total-tokens');
+            const researchQueryEl = document.getElementById('research-query');
+            console.log('Total tokens value:', totalTokensEl ? totalTokensEl.textContent : 'ELEMENT NOT FOUND');
+            console.log('Research query value:', researchQueryEl ? researchQueryEl.textContent : 'ELEMENT NOT FOUND');
+            console.log('Content element height:', contentEl.offsetHeight);
+            console.log('Content element children:', contentEl.children.length);
+
+        } catch (error) {
+            console.error('Error loading research metrics:', error);
+            console.error('Error details:', error.message, error.stack);
+            showError();
+        }
+    }
+
+    // Display research details from history endpoint
+    function displayResearchDetails(details) {
+        console.log('displayResearchDetails called with:', details);
+
+        // Update basic research info
+        if (details.query) {
+            document.getElementById('research-query').textContent = details.query;
+        }
+        if (details.mode) {
+            document.getElementById('research-mode').textContent = details.mode;
+        }
+        if (details.created_at) {
+            const date = new Date(details.created_at);
+            document.getElementById('research-date').textContent = date.toLocaleString();
+        }
+
+        // Update strategy information
+        if (details.strategy) {
+            document.getElementById('research-strategy').textContent = details.strategy;
+        } else {
+            document.getElementById('research-strategy').textContent = 'Not recorded';
+        }
+
+        // Update progress
+        if (details.progress !== undefined) {
+            const progressFill = document.getElementById('detail-progress-fill');
+            const progressText = document.getElementById('detail-progress-percentage');
+            if (progressFill && progressText) {
+                progressFill.style.width = `${details.progress}%`;
+                progressText.textContent = `${details.progress}%`;
+            }
+        }
+    }
+
+    // Display basic research metrics
+    function displayResearchMetrics() {
+        console.log('displayResearchMetrics called with:', metricsData);
+        if (!metricsData) {
+            console.error('No metrics data available');
+            return;
+        }
+
+        // Update summary cards
+        const totalTokensEl = document.getElementById('total-tokens');
+        const totalTokens = formatNumber(metricsData.total_tokens || 0);
+        console.log('Setting total tokens to:', totalTokens);
+        totalTokensEl.textContent = totalTokens;
+
+        // Calculate prompt/completion tokens from model usage
+        let totalPromptTokens = 0;
+        let totalCompletionTokens = 0;
+        let totalCalls = 0;
+        let model = 'Unknown';
+
+        if (metricsData.model_usage && metricsData.model_usage.length > 0) {
+            metricsData.model_usage.forEach(usage => {
+                totalPromptTokens += usage.prompt_tokens || 0;
+                totalCompletionTokens += usage.completion_tokens || 0;
+                totalCalls += usage.calls || 0;
+                if (model === 'Unknown') {
+                    model = usage.model || 'Unknown';
+                }
+            });
+        }
+
+        document.getElementById('prompt-tokens').textContent = formatNumber(totalPromptTokens);
+        document.getElementById('completion-tokens').textContent = formatNumber(totalCompletionTokens);
+        document.getElementById('llm-calls').textContent = formatNumber(metricsData.total_calls || totalCalls);
+
+        // Update model info
+        document.getElementById('model-used').textContent = model;
+
+        // Response time will be updated by timeline data
+        document.getElementById('avg-response-time').textContent = '0s';
+    }
+
+    // Display timeline metrics
+    function displayTimelineMetrics(timelineData) {
+        if (!timelineData) return;
+
+        // Update research info from timeline data
+        if (timelineData.research_details) {
+            const details = timelineData.research_details;
+            document.getElementById('research-query').textContent = details.query || 'Unknown';
+            document.getElementById('research-mode').textContent = details.mode || 'Unknown';
+            if (details.created_at) {
+                const date = new Date(details.created_at);
+                document.getElementById('research-date').textContent = date.toLocaleString();
+            }
+        }
+
+        // Update summary info
+        if (timelineData.summary) {
+            const summary = timelineData.summary;
+            const avgResponseTime = (summary.avg_response_time || 0) / 1000;
+            document.getElementById('avg-response-time').textContent = `${avgResponseTime.toFixed(1)}s`;
+        }
+
+        // Display phase breakdown
+        if (timelineData.phase_stats) {
+            const container = document.getElementById('phase-breakdown');
+            container.innerHTML = '';
+
+            Object.entries(timelineData.phase_stats).forEach(([phaseName, stats]) => {
+                const item = document.createElement('div');
+                item.className = 'phase-stat-item';
+                item.innerHTML = `
+                    <div class="phase-name">${phaseName}</div>
+                    <div class="phase-tokens">${formatNumber(stats.tokens)} tokens</div>
+                    <div class="phase-calls">${formatNumber(stats.count)} calls</div>
+                `;
+                container.appendChild(item);
+            });
+        }
+    }
+
+    // Display search metrics
+    function displaySearchMetrics(searchData) {
+        if (!searchData) return;
+
+        // Update search summary metrics
+        const totalSearches = searchData.total_searches || 0;
+        const totalResults = searchData.total_results || 0;
+        const avgResponseTime = searchData.avg_response_time || 0;
+        const successRate = searchData.success_rate || 0;
+
+        document.getElementById('total-searches').textContent = formatNumber(totalSearches);
+        document.getElementById('total-search-results').textContent = formatNumber(totalResults);
+        document.getElementById('avg-search-response-time').textContent = `${avgResponseTime.toFixed(0)}ms`;
+        document.getElementById('search-success-rate').textContent = `${successRate.toFixed(1)}%`;
+
+        // Display search engine breakdown
+        if (!searchData.search_calls) return;
+
+        const container = document.getElementById('search-engine-breakdown');
+        container.innerHTML = '';
+
+        searchData.search_calls.forEach(call => {
+            const item = document.createElement('div');
+            item.className = 'search-engine-item';
+            item.innerHTML = `
+                <div class="search-engine-info">
+                    <div class="search-engine-name">${call.engine || 'Unknown'}</div>
+                    <div class="search-engine-query">${call.query || 'No query'}</div>
+                </div>
+                <div class="search-engine-stats">
+                    <div class="search-results">${formatNumber(call.results_count || 0)} results</div>
+                    <div class="search-time">${((call.response_time_ms || 0) / 1000).toFixed(1)}s</div>
+                </div>
+            `;
+            container.appendChild(item);
+        });
+    }
+
+    // Create timeline chart
+    function createTimelineChart(timelineData) {
+        console.log('createTimelineChart called with:', timelineData);
+
+        if (!timelineData || !timelineData.timeline) {
+            console.log('No timeline data for chart, timelineData:', timelineData);
+            return;
+        }
+
+        if (typeof Chart === 'undefined') {
+            console.error('Chart.js not loaded!');
+            return;
+        }
+
+        const chartElement = document.getElementById('timeline-chart');
+        if (!chartElement) {
+            console.error('Timeline chart element not found');
+            return;
+        }
+
+        console.log('Creating timeline chart with', timelineData.timeline.length, 'data points');
+
+        try {
+            const ctx = chartElement.getContext('2d');
+            console.log('Canvas context obtained');
+
+            // Destroy existing chart
+            if (timelineChart) {
+                timelineChart.destroy();
+            }
+
+            // Prepare chart data with enhanced information
+            const chartData = timelineData.timeline.map((item, index) => ({
+                phase: item.research_phase || item.phase || `Step ${index + 1}`,
+                tokens: item.tokens || 0,
+                promptTokens: item.prompt_tokens || 0,
+                completionTokens: item.completion_tokens || 0,
+                timestamp: item.timestamp || item.created_at,
+                responseTime: item.response_time_ms || 0
+            }));
+
+            const labels = chartData.map(item => item.phase);
+            const totalTokens = chartData.map(item => item.tokens);
+            const promptTokens = chartData.map(item => item.promptTokens);
+            const completionTokens = chartData.map(item => item.completionTokens);
+
+            console.log('Enhanced chart data:', chartData);
+
+            timelineChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: 'Input Tokens',
+                            data: promptTokens,
+                            backgroundColor: 'rgba(99, 102, 241, 0.8)',
+                            borderColor: 'rgba(99, 102, 241, 1)',
+                            borderWidth: 1,
+                            borderRadius: 4,
+                            borderSkipped: false,
+                        },
+                        {
+                            label: 'Output Tokens',
+                            data: completionTokens,
+                            backgroundColor: 'rgba(34, 197, 94, 0.8)',
+                            borderColor: 'rgba(34, 197, 94, 1)',
+                            borderWidth: 1,
+                            borderRadius: 4,
+                            borderSkipped: false,
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    animation: {
+                        duration: 1000,
+                        easing: 'easeInOutQuart'
+                    },
+                    interaction: {
+                        intersect: false,
+                        mode: 'index'
+                    },
+                    scales: {
+                        x: {
+                            stacked: true,
+                            grid: {
+                                display: false
+                            },
+                            ticks: {
+                                font: {
+                                    size: 11
+                                },
+                                maxRotation: 45,
+                                minRotation: 0
+                            }
+                        },
+                        y: {
+                            stacked: true,
+                            beginAtZero: true,
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.1)',
+                                drawBorder: false
+                            },
+                            ticks: {
+                                font: {
+                                    size: 11
+                                },
+                                callback: function(value) {
+                                    return formatNumber(value);
+                                }
+                            },
+                            title: {
+                                display: true,
+                                text: 'Tokens',
+                                font: {
+                                    size: 12,
+                                    weight: 'bold'
+                                }
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: true,
+                            position: 'top',
+                            align: 'end',
+                            labels: {
+                                usePointStyle: true,
+                                pointStyle: 'rect',
+                                font: {
+                                    size: 11
+                                },
+                                padding: 15
+                            }
+                        },
+                        tooltip: {
+                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                            titleColor: 'white',
+                            bodyColor: 'white',
+                            borderColor: 'rgba(255, 255, 255, 0.1)',
+                            borderWidth: 1,
+                            cornerRadius: 8,
+                            displayColors: true,
+                            callbacks: {
+                                title: function(tooltipItems) {
+                                    const index = tooltipItems[0].dataIndex;
+                                    const phase = chartData[index].phase;
+                                    return phase;
+                                },
+                                beforeBody: function(tooltipItems) {
+                                    const index = tooltipItems[0].dataIndex;
+                                    const data = chartData[index];
+                                    const total = data.tokens;
+                                    return [`Total: ${formatNumber(total)} tokens`];
+                                },
+                                afterBody: function(tooltipItems) {
+                                    const index = tooltipItems[0].dataIndex;
+                                    const data = chartData[index];
+                                    const lines = [];
+
+                                    if (data.responseTime > 0) {
+                                        lines.push(`Response time: ${(data.responseTime / 1000).toFixed(1)}s`);
+                                    }
+
+                                    if (data.timestamp) {
+                                        const time = new Date(data.timestamp).toLocaleTimeString();
+                                        lines.push(`Time: ${time}`);
+                                    }
+
+                                    return lines;
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+
+        console.log('Timeline chart created successfully');
+        } catch (error) {
+            console.error('Error creating timeline chart:', error);
+            console.error('Chart error details:', error.message, error.stack);
+        }
+    }
+
+    // Create search chart
+    function createSearchChart(searchData) {
+        if (!searchData || !searchData.search_calls) {
+            console.log('No search data for chart');
+            return;
+        }
+
+        const chartElement = document.getElementById('search-chart');
+        if (!chartElement) {
+            console.error('Search chart element not found');
+            return;
+        }
+
+        const ctx = chartElement.getContext('2d');
+
+        // Destroy existing chart
+        if (searchChart) {
+            searchChart.destroy();
+        }
+
+        // Prepare enhanced search data
+        const searchCalls = searchData.search_calls.map((call, index) => ({
+            label: call.query ? call.query.substring(0, 20) + '...' : `Search ${index + 1}`,
+            results: call.results_count || 0,
+            engine: call.engine || 'Unknown',
+            responseTime: call.response_time_ms || 0,
+            timestamp: call.timestamp
+        }));
+
+        const labels = searchCalls.map(call => call.label);
+        const results = searchCalls.map(call => call.results);
+
+        searchChart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Results Found',
+                    data: results,
+                    borderColor: 'rgba(168, 85, 247, 1)',
+                    backgroundColor: 'rgba(168, 85, 247, 0.1)',
+                    borderWidth: 2.5,
+                    fill: true,
+                    tension: 0.3,
+                    pointBackgroundColor: 'rgba(168, 85, 247, 1)',
+                    pointBorderColor: 'rgba(255, 255, 255, 1)',
+                    pointBorderWidth: 2,
+                    pointRadius: 4,
+                    pointHoverRadius: 6
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: {
+                    duration: 800,
+                    easing: 'easeInOutQuart'
+                },
+                interaction: {
+                    intersect: false,
+                    mode: 'index'
+                },
+                scales: {
+                    x: {
+                        grid: {
+                            display: false
+                        },
+                        ticks: {
+                            font: {
+                                size: 10
+                            },
+                            maxRotation: 45
+                        }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        grid: {
+                            color: 'rgba(0, 0, 0, 0.1)',
+                            drawBorder: false
+                        },
+                        ticks: {
+                            font: {
+                                size: 10
+                            },
+                            callback: function(value) {
+                                return formatNumber(value);
+                            }
+                        },
+                        title: {
+                            display: true,
+                            text: 'Results',
+                            font: {
+                                size: 11,
+                                weight: 'bold'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                        titleColor: 'white',
+                        bodyColor: 'white',
+                        borderColor: 'rgba(255, 255, 255, 0.1)',
+                        borderWidth: 1,
+                        cornerRadius: 6,
+                        callbacks: {
+                            title: function(tooltipItems) {
+                                const index = tooltipItems[0].dataIndex;
+                                return searchCalls[index].label;
+                            },
+                            beforeBody: function(tooltipItems) {
+                                const index = tooltipItems[0].dataIndex;
+                                const call = searchCalls[index];
+                                return [`Engine: ${call.engine}`];
+                            },
+                            afterBody: function(tooltipItems) {
+                                const index = tooltipItems[0].dataIndex;
+                                const call = searchCalls[index];
+                                const lines = [];
+
+                                if (call.responseTime > 0) {
+                                    lines.push(`Response time: ${(call.responseTime / 1000).toFixed(1)}s`);
+                                }
+
+                                return lines;
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // Load cost data
+    async function loadCostData() {
+        try {
+            // Temporarily disable cost calculation until pricing logic is optimized
+            document.getElementById('total-cost').textContent = '-';
+            return;
+
+            const response = await fetch(`/metrics/api/research-costs/${researchId}`);
+            if (response.ok) {
+                const data = await response.json();
+                if (data.status === 'success') {
+                    document.getElementById('total-cost').textContent = formatCurrency(data.total_cost || 0);
+                }
+            }
+        } catch (error) {
+            console.error('Error loading cost data:', error);
+            document.getElementById('total-cost').textContent = '-';
+        }
+    }
+
+    // Show error message
+    function showError() {
+        document.getElementById('loading').style.display = 'none';
+        document.getElementById('error').style.display = 'block';
+        document.getElementById('details-content').style.display = 'none';
+    }
+
+    // Check if all required DOM elements exist
+    function checkRequiredElements() {
+        const requiredIds = [
+            'loading', 'error', 'details-content', 'total-tokens', 'prompt-tokens',
+            'completion-tokens', 'llm-calls', 'avg-response-time', 'model-used',
+            'research-query', 'research-mode', 'research-date', 'research-strategy', 'total-cost',
+            'phase-breakdown', 'search-engine-breakdown', 'timeline-chart', 'search-chart'
+        ];
+
+        const missing = [];
+        requiredIds.forEach(id => {
+            if (!document.getElementById(id)) {
+                missing.push(id);
+            }
+        });
+
+        if (missing.length > 0) {
+            console.error('Missing required DOM elements:', missing);
+            return false;
+        }
+        return true;
+    }
+
+    // Initialize when DOM is ready
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('DOM loaded, initializing details page');
+
+        researchId = getResearchIdFromUrl();
+        console.log('Research ID from URL:', researchId);
+
+        if (!researchId) {
+            console.error('No research ID found in URL');
+            showError();
+            return;
+        }
+
+        // Check if all required elements exist
+        if (!checkRequiredElements()) {
+            console.error('Required DOM elements missing');
+            showError();
+            return;
+        }
+
+        // Update page title
+        document.title = `Research Details #${researchId} - Deep Research System`;
+
+        // Load research metrics
+        loadResearchMetrics();
+
+        // View Results button
+        const viewResultsBtn = document.getElementById('view-results-btn');
+        if (viewResultsBtn) {
+            viewResultsBtn.addEventListener('click', () => {
+                window.location.href = `/research/results/${researchId}`;
+            });
+        }
+
+        // Back button
+        const backBtn = document.getElementById('back-to-history');
+        if (backBtn) {
+            backBtn.addEventListener('click', () => {
+                window.location.href = '/research/history';
+            });
+        }
+    });
+
+})();