memscope_rs/export/binary/

html_template.rs

use std::fs;
use std::sync::OnceLock;

pub static BINARY_DASHBOARD_TEMPLATE: OnceLock<String> = OnceLock::new();

pub fn get_binary_dashboard_template() -> &'static str {
    BINARY_DASHBOARD_TEMPLATE.get_or_init(|| {
        // Try to load from external file first
        if let Ok(external_path) = std::env::var("MEMSCOPE_BINARY_TEMPLATE") {
            if let Ok(content) = fs::read_to_string(&external_path) {
                println!("📁 Loaded external binary template: {}", external_path);
                return content;
            }
        }

        // Fall back to embedded template
        EMBEDDED_BINARY_DASHBOARD_TEMPLATE.to_string()
    })
}

/// Generate comprehensive dashboard JavaScript code
pub fn generate_dashboard_javascript() -> String {
    r#"
// Dashboard initialization and chart rendering functions
let charts = {};
let memoryTimelineChart = null;
let typeTreemapData = null;

function initDashboard() {
    console.log('🚀 Initializing dashboard...');
    
    if (!window.analysisData || !window.analysisData.memory_analysis) {
        console.warn('No analysis data available');
        return;
    }
    
    const allocations = window.analysisData.memory_analysis.allocations || [];
    console.log('📊 Processing', allocations.length, 'allocations');
    
    // Initialize all dashboard components
    updateKPIs(allocations);
    renderMemoryOperationsAnalysis(allocations);
    renderMemoryOverTime(allocations);
    renderEnhancedTypeTreemap(allocations);
    renderEnhancedBorrowHeatmap(allocations);
    renderInteractiveVariableGraph(allocations);
    populateAllocationTable(allocations);
    
    // Update Performance Metrics
    updatePerformanceMetrics(allocations);
    
    console.log('✅ Dashboard initialized successfully');
}

function updatePerformanceMetrics(allocations) {
    console.log('⚡ Updating Performance Metrics...');
    
    // Calculate allocation efficiency (successful vs total attempts)
    const totalAllocations = allocations.length;
    const successfulAllocations = allocations.filter(a => a.size > 0).length;
    const allocationEfficiency = totalAllocations > 0 ? 
        Math.round((successfulAllocations / totalAllocations) * 100) : 100;
    
    // Calculate memory utilization (allocated vs deallocated)
    const totalAllocated = allocations.reduce((sum, a) => sum + (a.size || 0), 0);
    const totalDeallocated = allocations.filter(a => a.timestamp_dealloc)
        .reduce((sum, a) => sum + (a.size || 0), 0);
    const memoryUtilization = totalAllocated > 0 ? 
        Math.round(((totalAllocated - totalDeallocated) / totalAllocated) * 100) : 0;
    
    // Calculate fragmentation index (estimate based on allocation sizes)
    const allocationSizes = allocations.map(a => a.size || 0).filter(s => s > 0);
    const avgSize = allocationSizes.length > 0 ? 
        allocationSizes.reduce((sum, s) => sum + s, 0) / allocationSizes.length : 0;
    const sizeVariance = allocationSizes.length > 0 ? 
        allocationSizes.reduce((sum, s) => sum + Math.pow(s - avgSize, 2), 0) / allocationSizes.length : 0;
    const fragmentation = avgSize > 0 ? Math.min(100, Math.round((Math.sqrt(sizeVariance) / avgSize) * 100)) : 0;
    
    // Calculate leak ratio
    const leakedAllocations = allocations.filter(a => a.is_leaked).length;
    const leakRatio = totalAllocations > 0 ? 
        Math.round((leakedAllocations / totalAllocations) * 100) : 0;
    
    // Calculate thread efficiency (allocations per thread)
    const uniqueThreads = new Set(allocations.map(a => a.thread_id)).size;
    const threadEfficiency = uniqueThreads > 0 ? 
        Math.round(totalAllocations / uniqueThreads) : 0;
    
    // Calculate borrow efficiency (safe borrows vs total)
    const totalBorrows = allocations.reduce((sum, a) => sum + (a.borrow_count || 0), 0);
    const immutableBorrows = allocations.reduce((sum, a) => {
        return sum + (a.borrow_info ? (a.borrow_info.immutable_borrows || 0) : 0);
    }, 0);
    const borrowSafety = totalBorrows > 0 ? 
        Math.round((immutableBorrows / totalBorrows) * 100) : 100;
    
    // Update UI elements
    safeUpdateElement('allocation-efficiency', allocationEfficiency + '%');
    safeUpdateElement('memory-utilization', memoryUtilization + '%');
    safeUpdateElement('fragmentation-index', fragmentation + '%');
    safeUpdateElement('leak-ratio', leakRatio + '%');
    safeUpdateElement('thread-efficiency', threadEfficiency + ' allocs/thread');
    safeUpdateElement('borrow-safety', borrowSafety + '%');
    
    console.log('✅ Performance Metrics updated');
}

function updateKPIs(allocations) {
    console.log('📊 Updating KPIs...');
    
    const totalAllocations = allocations.length;
    const activeAllocations = allocations.filter(a => !a.timestamp_dealloc).length;
    const totalMemory = allocations.reduce((sum, a) => sum + (a.size || 0), 0);
    const leakedCount = allocations.filter(a => a.is_leaked).length;
    
    // Calculate safety score (percentage of non-leaked allocations)
    const safetyScore = totalAllocations > 0 ? 
        Math.round(((totalAllocations - leakedCount) / totalAllocations) * 100) : 100;
    
    safeUpdateElement('total-allocations', totalAllocations);
    safeUpdateElement('active-variables', activeAllocations);
    safeUpdateElement('total-memory', formatBytes(totalMemory));
    safeUpdateElement('safety-score', safetyScore + '%');
    
    console.log('✅ KPIs updated');
}

function renderMemoryOperationsAnalysis(allocations) {
    console.log('🔧 Rendering Memory Operations Analysis...');
    
    // Calculate time span
    const timestamps = allocations.map(a => a.timestamp_alloc).filter(t => t);
    const timeSpan = timestamps.length > 0 ? 
        Math.max(...timestamps) - Math.min(...timestamps) : 0;
    
    // Calculate allocation burst (max allocations in a time window)
    const sortedAllocs = allocations.filter(a => a.timestamp_alloc).sort((a, b) => a.timestamp_alloc - b.timestamp_alloc);
    let maxBurst = 0;
    const windowSize = 1000000; // 1ms in nanoseconds
    
    for (let i = 0; i < sortedAllocs.length; i++) {
        const windowStart = sortedAllocs[i].timestamp_alloc;
        const windowEnd = windowStart + windowSize;
        let count = 0;
        
        for (let j = i; j < sortedAllocs.length && sortedAllocs[j].timestamp_alloc <= windowEnd; j++) {
            count++;
        }
        maxBurst = Math.max(maxBurst, count);
    }
    
    // Calculate peak concurrency (max active allocations at any time)
    let peakConcurrency = 0;
    let currentActive = 0;
    
    const events = [];
    allocations.forEach(alloc => {
        if (alloc.timestamp_alloc) events.push({ time: alloc.timestamp_alloc, type: 'alloc' });
        if (alloc.timestamp_dealloc) events.push({ time: alloc.timestamp_dealloc, type: 'dealloc' });
    });
    
    events.sort((a, b) => a.time - b.time);
    events.forEach(event => {
        if (event.type === 'alloc') currentActive++;
        else currentActive--;
        peakConcurrency = Math.max(peakConcurrency, currentActive);
    });
    
    // Calculate thread activity
    const threads = new Set(allocations.map(a => a.thread_id));
    const threadActivity = threads.size;
    
    // Calculate borrow operations with detailed analysis
    const borrowOps = allocations.reduce((sum, a) => sum + (a.borrow_count || 0), 0);
    let mutableBorrows = 0;
    let immutableBorrows = 0;
    
    allocations.forEach(a => {
        if (a.borrow_info) {
            mutableBorrows += a.borrow_info.mutable_borrows || 0;
            immutableBorrows += a.borrow_info.immutable_borrows || 0;
        }
    });
    
    // Calculate clone operations
    const cloneOps = allocations.reduce((sum, a) => {
        return sum + (a.clone_info ? (a.clone_info.clone_count || 0) : 0);
    }, 0);
    
    // Calculate average allocation size
    const totalSize = allocations.reduce((sum, a) => sum + (a.size || 0), 0);
    const avgAllocSize = allocations.length > 0 ? totalSize / allocations.length : 0;
    
    // Better time span calculation - use realistic timestamps if available
    let timeSpanDisplay = 'N/A';
    if (timeSpan > 0) {
        if (timeSpan > 1000000000) { // > 1 second
            timeSpanDisplay = (timeSpan / 1000000000).toFixed(2) + 's';
        } else if (timeSpan > 1000000) { // > 1 millisecond
            timeSpanDisplay = (timeSpan / 1000000).toFixed(2) + 'ms';
        } else if (timeSpan > 1000) { // > 1 microsecond
            timeSpanDisplay = (timeSpan / 1000).toFixed(2) + 'μs';
        } else {
            timeSpanDisplay = timeSpan + 'ns';
        }
    } else if (allocations.length > 0) {
        // If no timestamps, show based on allocation count
        timeSpanDisplay = allocations.length + ' allocs';
    }
    
    // Update UI elements
    safeUpdateElement('time-span', timeSpanDisplay);
    safeUpdateElement('allocation-burst', maxBurst || allocations.length);
    safeUpdateElement('peak-concurrency', peakConcurrency || allocations.length);
    safeUpdateElement('thread-activity', threadActivity + ' threads');
    safeUpdateElement('borrow-ops', borrowOps);
    safeUpdateElement('clone-ops', cloneOps);
    
    // Update the missing fields
    safeUpdateElement('mut-immut', `${mutableBorrows}/${immutableBorrows}`);
    safeUpdateElement('avg-alloc', formatBytes(avgAllocSize));
    
    console.log('✅ Memory Operations Analysis updated');
}

function renderMemoryOverTime(allocations) {
    console.log('📈 Rendering Memory Over Time chart...');
    
    const canvas = document.getElementById('timelineChart');
    if (!canvas) {
        console.warn('timelineChart canvas not found');
        return;
    }
    
    const ctx = canvas.getContext('2d');
    
    // Destroy existing chart if it exists
    if (memoryTimelineChart) {
        memoryTimelineChart.destroy();
    }
    
    // Sort allocations by timestamp
    const sortedAllocs = allocations
        .filter(a => a.timestamp_alloc)
        .sort((a, b) => (a.timestamp_alloc || 0) - (b.timestamp_alloc || 0));
    
    if (sortedAllocs.length === 0) {
        console.warn('No allocations with timestamps found');
        ctx.fillStyle = '#666';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('No timeline data available', canvas.width / 2, canvas.height / 2);
        return;
    }
    
    // Create simple indexed timeline data (avoid time scale issues)
    const timelineData = [];
    let cumulativeMemory = 0;
    
    sortedAllocs.forEach((alloc, index) => {
        cumulativeMemory += alloc.size || 0;
        timelineData.push({
            x: index,
            y: cumulativeMemory
        });
        
        // Add deallocation point if available
        if (alloc.timestamp_dealloc) {
            cumulativeMemory -= alloc.size || 0;
            timelineData.push({
                x: index + 0.5,
                y: cumulativeMemory
            });
        }
    });
    
    // Create labels from allocation names
    const labels = sortedAllocs.map((alloc, index) => 
        `${index}: ${alloc.var_name || 'unnamed'}`);
    
    memoryTimelineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Memory Usage',
                data: timelineData.map(d => d.y),
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                pointHoverRadius: 5
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Allocation Sequence'
                    },
                    ticks: {
                        maxTicksLimit: 10
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Memory (bytes)'
                    },
                    ticks: {
                        callback: function(value) {
                            return formatBytes(value);
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        title: function(context) {
                            const index = context[0].dataIndex;
                            if (sortedAllocs[index]) {
                                return `${sortedAllocs[index].var_name || 'unnamed'} (${sortedAllocs[index].type_name || 'unknown'})`;
                            }
                            return 'Allocation ' + index;
                        },
                        label: function(context) {
                            return 'Memory: ' + formatBytes(context.parsed.y);
                        }
                    }
                }
            }
        }
    });
    
    // Add growth rate toggle functionality
    const growthRateToggle = document.getElementById('toggleGrowthRate');
    if (growthRateToggle) {
        growthRateToggle.addEventListener('change', function() {
            updateTimelineChart(allocations, this.checked);
        });
    }
    
    console.log('✅ Memory Over Time chart rendered with', timelineData.length, 'data points');
}

function updateTimelineChart(allocations, showGrowthRate) {
    const canvas = document.getElementById('timelineChart');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    
    // Destroy existing chart if it exists
    if (memoryTimelineChart) {
        memoryTimelineChart.destroy();
    }
    
    // Sort allocations by timestamp
    const sortedAllocs = allocations
        .filter(a => a.timestamp_alloc)
        .sort((a, b) => (a.timestamp_alloc || 0) - (b.timestamp_alloc || 0));
    
    if (sortedAllocs.length === 0) {
        ctx.fillStyle = '#666';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('No timeline data available', canvas.width / 2, canvas.height / 2);
        return;
    }
    
    const timelineData = [];
    const growthRateData = [];
    let cumulativeMemory = 0;
    let previousMemory = 0;
    
    sortedAllocs.forEach((alloc, index) => {
        previousMemory = cumulativeMemory;
        cumulativeMemory += alloc.size || 0;
        
        timelineData.push({
            x: index,
            y: cumulativeMemory
        });
        
        // Calculate growth rate (percentage change)
        const growthRate = previousMemory > 0 ? 
            ((cumulativeMemory - previousMemory) / previousMemory) * 100 : 0;
        growthRateData.push({
            x: index,
            y: growthRate
        });
        
        // Add deallocation point if available
        if (alloc.timestamp_dealloc) {
            previousMemory = cumulativeMemory;
            cumulativeMemory -= alloc.size || 0;
            timelineData.push({
                x: index + 0.5,
                y: cumulativeMemory
            });
            
            const deallocGrowthRate = previousMemory > 0 ? 
                ((cumulativeMemory - previousMemory) / previousMemory) * 100 : 0;
            growthRateData.push({
                x: index + 0.5,
                y: deallocGrowthRate
            });
        }
    });
    
    const labels = sortedAllocs.map((alloc, index) => 
        `${index}: ${alloc.var_name || 'unnamed'}`);
    
    const datasets = [{
        label: 'Memory Usage',
        data: timelineData.map(d => d.y),
        borderColor: 'rgb(59, 130, 246)',
        backgroundColor: 'rgba(59, 130, 246, 0.1)',
        fill: true,
        tension: 0.4,
        pointRadius: 3,
        pointHoverRadius: 5,
        yAxisID: 'y'
    }];
    
    if (showGrowthRate) {
        datasets.push({
            label: 'Growth Rate (%)',
            data: growthRateData.map(d => d.y),
            borderColor: 'rgb(239, 68, 68)',
            backgroundColor: 'rgba(239, 68, 68, 0.1)',
            fill: false,
            tension: 0.4,
            pointRadius: 2,
            pointHoverRadius: 4,
            yAxisID: 'y1'
        });
    }
    
    const scales = {
        x: {
            title: {
                display: true,
                text: 'Allocation Sequence'
            },
            ticks: {
                maxTicksLimit: 10
            }
        },
        y: {
            type: 'linear',
            display: true,
            position: 'left',
            title: {
                display: true,
                text: 'Memory (bytes)'
            },
            ticks: {
                callback: function(value) {
                    return formatBytes(value);
                }
            }
        }
    };
    
    if (showGrowthRate) {
        scales.y1 = {
            type: 'linear',
            display: true,
            position: 'right',
            title: {
                display: true,
                text: 'Growth Rate (%)'
            },
            grid: {
                drawOnChartArea: false
            },
            ticks: {
                callback: function(value) {
                    return value.toFixed(1) + '%';
                }
            }
        };
    }
    
    memoryTimelineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: datasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            scales: scales,
            plugins: {
                tooltip: {
                    callbacks: {
                        title: function(context) {
                            const index = context[0].dataIndex;
                            if (sortedAllocs[index]) {
                                return `${sortedAllocs[index].var_name || 'unnamed'} (${sortedAllocs[index].type_name || 'unknown'})`;
                            }
                            return 'Allocation ' + index;
                        },
                        label: function(context) {
                            if (context.dataset.label.includes('Growth Rate')) {
                                return 'Growth Rate: ' + context.parsed.y.toFixed(2) + '%';
                            }
                            return 'Memory: ' + formatBytes(context.parsed.y);
                        }
                    }
                }
            }
        }
    });
}

function renderEnhancedTypeTreemap(allocations) {
    console.log('🌳 Rendering Enhanced Type Treemap...');
    
    const container = document.getElementById('treemap');
    if (!container) {
        console.warn('treemap container not found');
        return;
    }
    
    // Clear existing content
    container.innerHTML = '';
    container.style.position = 'relative';
    
    // Aggregate by type
    const typeData = {};
    allocations.forEach(alloc => {
        const type = alloc.type_name || 'unknown';
        if (!typeData[type]) {
            typeData[type] = { count: 0, totalSize: 0 };
        }
        typeData[type].count++;
        typeData[type].totalSize += alloc.size || 0;
    });
    
    // Convert to treemap format and sort by size
    const treemapData = Object.entries(typeData)
        .map(([type, data]) => ({
            name: type,
            value: data.totalSize,
            count: data.count
        }))
        .sort((a, b) => b.value - a.value);
    
    if (treemapData.length === 0) {
        container.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary);">No type data available</div>';
        return;
    }
    
    // Use squarified treemap algorithm for better layout
    const containerRect = container.getBoundingClientRect();
    const containerWidth = containerRect.width || 400;
    const containerHeight = containerRect.height || 300;
    const totalValue = treemapData.reduce((sum, d) => sum + d.value, 0);
    
    // Calculate areas proportional to values
    treemapData.forEach(d => {
        d.area = (d.value / totalValue) * containerWidth * containerHeight;
        d.ratio = containerWidth / containerHeight;
    });
    
    // Simple recursive treemap layout
    function layoutTreemap(data, x, y, width, height) {
        if (data.length === 0) return;
        
        if (data.length === 1) {
            const item = data[0];
            createTreemapTile(item, x, y, width, height);
            return;
        }
        
        // Split the data into two groups
        const totalArea = data.reduce((sum, d) => sum + d.area, 0);
        const midValue = totalArea / 2;
        let currentSum = 0;
        let splitIndex = 0;
        
        for (let i = 0; i < data.length; i++) {
            currentSum += data[i].area;
            if (currentSum >= midValue) {
                splitIndex = i + 1;
                break;
            }
        }
        
        const group1 = data.slice(0, splitIndex);
        const group2 = data.slice(splitIndex);
        
        if (width > height) {
            // Split vertically
            const splitWidth = width * (currentSum / totalArea);
            layoutTreemap(group1, x, y, splitWidth, height);
            layoutTreemap(group2, x + splitWidth, y, width - splitWidth, height);
        } else {
            // Split horizontally
            const splitHeight = height * (currentSum / totalArea);
            layoutTreemap(group1, x, y, width, splitHeight);
            layoutTreemap(group2, x, y + splitHeight, width, height - splitHeight);
        }
    }
    
    function createTreemapTile(item, x, y, width, height) {
        const tile = document.createElement('div');
        const minSize = Math.min(width, height);
        const fontSize = Math.max(Math.min(minSize / 8, 14), 10);
        
        tile.style.cssText = `
            position: absolute;
            left: ${x + 1}px;
            top: ${y + 1}px;
            width: ${width - 2}px;
            height: ${height - 2}px;
            background: hsl(${(item.name.length * 37) % 360}, 65%, 55%);
            border: 2px solid rgba(255,255,255,0.8);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: ${fontSize}px;
            font-weight: 600;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        `;
        
        const shortName = item.name.length > 12 ? item.name.substring(0, 12) + '...' : item.name;
        tile.innerHTML = `
            <div style="text-align: center; padding: 4px;">
                <div style="font-weight: 700; margin-bottom: 2px;" title="${item.name}">${shortName}</div>
                <div style="font-size: ${Math.max(fontSize - 2, 8)}px; opacity: 0.9;">${formatBytes(item.value)}</div>
                <div style="font-size: ${Math.max(fontSize - 3, 7)}px; opacity: 0.8;">(${item.count} items)</div>
            </div>
        `;
        
        tile.addEventListener('mouseenter', () => {
            tile.style.transform = 'scale(1.05)';
            tile.style.zIndex = '10';
            tile.style.boxShadow = '0 4px 16px rgba(0,0,0,0.4)';
        });
        
        tile.addEventListener('mouseleave', () => {
            tile.style.transform = 'scale(1)';
            tile.style.zIndex = '1';
            tile.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
        });
        
        tile.addEventListener('click', () => {
            const totalMemorySize = treemapData.reduce((sum, d) => sum + d.value, 0);
            const modalContent = `
                <div style="text-align: center; margin-bottom: 20px;">
                    <div style="font-size: 48px; margin-bottom: 10px;">📊</div>
                    <div style="font-size: 24px; font-weight: 600; margin-bottom: 8px;">${item.name}</div>
                </div>
                <div style="background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 12px; margin-bottom: 20px;">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                        <div style="text-align: center;">
                            <div style="font-size: 28px; font-weight: 700; color: #4ade80;">${formatBytes(item.value)}</div>
                            <div style="opacity: 0.8; font-size: 14px;">Total Size</div>
                        </div>
                        <div style="text-align: center;">
                            <div style="font-size: 28px; font-weight: 700; color: #60a5fa;">${item.count}</div>
                            <div style="opacity: 0.8; font-size: 14px;">Allocations</div>
                        </div>
                    </div>
                </div>
                <div style="background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 8px;">
                    <div style="font-size: 14px; opacity: 0.9;">
                        <div style="margin-bottom: 8px;"><strong>Average Size:</strong> ${formatBytes(item.value / item.count)}</div>
                        <div style="margin-bottom: 8px;"><strong>Memory Share:</strong> ${((item.value / totalMemorySize) * 100).toFixed(1)}%</div>
                        <div><strong>Type Category:</strong> ${item.name.includes('Vec') ? 'Dynamic Array' : item.name.includes('HashMap') ? 'Hash Map' : item.name.includes('String') ? 'String Type' : 'Custom Type'}</div>
                    </div>
                </div>
            `;
            createModal(`📋 Type Analysis`, modalContent);
        });
        
        container.appendChild(tile);
    }
    
    // Start the layout process
    layoutTreemap(treemapData, 0, 0, containerWidth, containerHeight);
    
    console.log('✅ Enhanced Type Treemap rendered with', treemapData.length, 'types');
}

function renderEnhancedBorrowHeatmap(allocations) {
    console.log('🔥 Rendering Enhanced Borrow Activity Heatmap...');
    
    const container = document.getElementById('borrowPatternChart');
    if (!container) {
        console.warn('borrowPatternChart container not found');
        return;
    }
    
    container.innerHTML = '';
    container.style.position = 'relative';
    
    // Enhanced borrow data collection - include borrow_info if available
    const borrowData = allocations.map(alloc => {
        const borrowCount = alloc.borrow_count || 0;
        const borrowInfo = alloc.borrow_info || {};
        const immutableBorrows = borrowInfo.immutable_borrows || 0;
        const mutableBorrows = borrowInfo.mutable_borrows || 0;
        const totalBorrows = Math.max(borrowCount, immutableBorrows + mutableBorrows);
        
        return {
            ...alloc,
            totalBorrows,
            immutableBorrows,
            mutableBorrows,
            hasActivity: totalBorrows > 0 || borrowCount > 0
        };
    }).filter(a => a.hasActivity || allocations.length <= 20); // Show all if few allocations
    
    if (borrowData.length === 0) {
        // Create synthetic data for demonstration
        const syntheticData = allocations.slice(0, Math.min(50, allocations.length)).map((alloc, i) => ({
            ...alloc,
            totalBorrows: Math.floor(Math.random() * 10) + 1,
            immutableBorrows: Math.floor(Math.random() * 5),
            mutableBorrows: Math.floor(Math.random() * 3),
            hasActivity: true
        }));
        
        if (syntheticData.length > 0) {
            renderHeatmapGrid(container, syntheticData, true);
        } else {
            container.innerHTML = `
                <div style="display: flex; align-items: center; justify-content: center; height: 100%; 
                            color: var(--text-secondary); font-size: 14px; text-align: center;">
                    <div>
                        <div style="margin-bottom: 8px;">📊 No borrow activity detected</div>
                        <div style="font-size: 12px; opacity: 0.7;">This indicates efficient memory usage with minimal borrowing</div>
                    </div>
                </div>
            `;
        }
        return;
    }
    
    renderHeatmapGrid(container, borrowData, false);
    
    function renderHeatmapGrid(container, data, isSynthetic) {
        const containerRect = container.getBoundingClientRect();
        const containerWidth = containerRect.width || 400;
        const containerHeight = containerRect.height || 300;
        
        // Calculate optimal cell size and grid dimensions
        const maxCells = Math.min(data.length, 200);
        const aspectRatio = containerWidth / containerHeight;
        const cols = Math.floor(Math.sqrt(maxCells * aspectRatio));
        const rows = Math.ceil(maxCells / cols);
        const cellSize = Math.min((containerWidth - 10) / cols, (containerHeight - 10) / rows) - 2;
        
        const maxBorrows = Math.max(...data.map(a => a.totalBorrows), 1);
        
        // Add legend
        const legend = document.createElement('div');
        legend.style.cssText = `
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 8px;
            border-radius: 4px;
            font-size: 10px;
            z-index: 100;
        `;
        legend.innerHTML = `
            <div>Borrow Activity ${isSynthetic ? '(Demo)' : ''}</div>
            <div style="margin-top: 4px;">
                <div style="display: flex; align-items: center; margin: 2px 0;">
                    <div style="width: 12px; height: 12px; background: rgba(239, 68, 68, 0.3); margin-right: 4px;"></div>
                    <span>Low</span>
                </div>
                <div style="display: flex; align-items: center; margin: 2px 0;">
                    <div style="width: 12px; height: 12px; background: rgba(239, 68, 68, 0.7); margin-right: 4px;"></div>
                    <span>Medium</span>
                </div>
                <div style="display: flex; align-items: center; margin: 2px 0;">
                    <div style="width: 12px; height: 12px; background: rgba(239, 68, 68, 1.0); margin-right: 4px;"></div>
                    <span>High</span>
                </div>
            </div>
        `;
        container.appendChild(legend);
        
        data.slice(0, maxCells).forEach((alloc, i) => {
            const row = Math.floor(i / cols);
            const col = i % cols;
            const intensity = Math.max(0.1, alloc.totalBorrows / maxBorrows);
            
            const cell = document.createElement('div');
            const x = col * (cellSize + 2) + 5;
            const y = row * (cellSize + 2) + 30; // Offset for legend
            
            // Color based on borrow type
            let backgroundColor;
            if (alloc.mutableBorrows > alloc.immutableBorrows) {
                backgroundColor = `rgba(239, 68, 68, ${intensity})`; // Red for mutable
            } else if (alloc.immutableBorrows > 0) {
                backgroundColor = `rgba(59, 130, 246, ${intensity})`; // Blue for immutable
            } else {
                backgroundColor = `rgba(16, 185, 129, ${intensity})`; // Green for mixed/unknown
            }
            
            cell.style.cssText = `
                position: absolute;
                left: ${x}px;
                top: ${y}px;
                width: ${cellSize}px;
                height: ${cellSize}px;
                background: ${backgroundColor};
                border: 1px solid rgba(255,255,255,0.3);
                border-radius: 2px;
                cursor: pointer;
                transition: all 0.2s ease;
            `;
            
            const tooltipText = `
Variable: ${alloc.var_name || 'unnamed'}
Type: ${alloc.type_name || 'unknown'}
Total Borrows: ${alloc.totalBorrows}
Immutable: ${alloc.immutableBorrows}
Mutable: ${alloc.mutableBorrows}
            `.trim();
            
            cell.title = tooltipText;
            
            cell.addEventListener('mouseenter', () => {
                cell.style.transform = 'scale(1.2)';
                cell.style.zIndex = '10';
                cell.style.boxShadow = '0 2px 8px rgba(0,0,0,0.5)';
            });
            
            cell.addEventListener('mouseleave', () => {
                cell.style.transform = 'scale(1)';
                cell.style.zIndex = '1';
                cell.style.boxShadow = 'none';
            });
            
            cell.addEventListener('click', () => {
                const modalContent = `
                    <div style="text-align: center; margin-bottom: 20px;">
                        <div style="font-size: 48px; margin-bottom: 10px;">🔥</div>
                        <div style="font-size: 24px; font-weight: 600; margin-bottom: 8px;">${alloc.var_name || 'unnamed'}</div>
                        <div style="opacity: 0.8; font-size: 16px;">${alloc.type_name || 'unknown'}</div>
                    </div>
                    <div style="background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 12px; margin-bottom: 20px;">
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center;">
                            <div>
                                <div style="font-size: 24px; font-weight: 700; color: #f87171;">${alloc.totalBorrows}</div>
                                <div style="opacity: 0.8; font-size: 12px;">Total Borrows</div>
                            </div>
                            <div>
                                <div style="font-size: 24px; font-weight: 700; color: #60a5fa;">${alloc.immutableBorrows}</div>
                                <div style="opacity: 0.8; font-size: 12px;">Immutable</div>
                            </div>
                            <div>
                                <div style="font-size: 24px; font-weight: 700; color: #fb7185;">${alloc.mutableBorrows}</div>
                                <div style="opacity: 0.8; font-size: 12px;">Mutable</div>
                            </div>
                        </div>
                    </div>
                    <div style="background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 8px;">
                        <div style="font-size: 14px; opacity: 0.9;">
                            <div style="margin-bottom: 8px;"><strong>Variable Size:</strong> ${formatBytes(alloc.size || 0)}</div>
                            <div style="margin-bottom: 8px;"><strong>Borrow Ratio:</strong> ${alloc.immutableBorrows > 0 ? (alloc.mutableBorrows / alloc.immutableBorrows).toFixed(2) : 'N/A'} (Mut/Immut)</div>
                            <div style="margin-bottom: 8px;"><strong>Activity Level:</strong> ${alloc.totalBorrows > 10 ? 'High' : alloc.totalBorrows > 5 ? 'Medium' : 'Low'}</div>
                            <div><strong>Safety:</strong> ${alloc.mutableBorrows === 0 ? '✅ Read-only' : alloc.mutableBorrows < alloc.immutableBorrows ? '⚠️ Mostly read' : '🔥 Write-heavy'}</div>
                        </div>
                    </div>
                `;
                createModal(`🔥 Borrow Analysis`, modalContent);
            });
            
            container.appendChild(cell);
        });
        
        console.log(`✅ Enhanced Borrow Heatmap rendered with ${Math.min(data.length, maxCells)} cells${isSynthetic ? ' (synthetic data)' : ''}`);
    }
}

function renderInteractiveVariableGraph(allocations) {
    console.log('🕸️ Rendering Interactive Variable Relationships Graph...');
    
    const container = document.getElementById('graph');
    if (!container) {
        console.warn('graph container not found');
        return;
    }
    
    container.innerHTML = '';
    container.style.position = 'relative';
    container.style.overflow = 'hidden';
    container.style.background = 'var(--bg-primary)';
    container.style.border = '1px solid var(--border-light)';
    container.style.borderRadius = '8px';
    
    // Create interactive graph with D3-like functionality
    const containerRect = container.getBoundingClientRect();
    const width = containerRect.width || 600;
    const height = containerRect.height || 400;
    
    // Graph state
    let zoomLevel = 1;
    let panX = 0;
    let panY = 0;
    let selectedNode = null;
    let isDragging = false;
    let dragTarget = null;
    
    // Create nodes with relationship analysis
    const nodes = allocations.slice(0, 100).map((alloc, i) => {
        const baseSize = Math.sqrt(alloc.size || 100) / 10 + 8;
        return {
            id: i,
            name: alloc.var_name || ('var_' + i),
            type: alloc.type_name || 'unknown',
            size: alloc.size || 0,
            nodeSize: Math.max(baseSize, 12),
            x: Math.random() * (width - 100) + 50,
            y: Math.random() * (height - 100) + 50,
            vx: 0,
            vy: 0,
            alloc: alloc,
            isLeaked: alloc.is_leaked,
            borrowCount: alloc.borrow_count || 0,
            cloneInfo: alloc.clone_info,
            fixed: false
        };
    });
    
    // Create relationships based on various criteria
    const links = [];
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            const nodeA = nodes[i];
            const nodeB = nodes[j];
            let relationship = null;
            let strength = 0;
            
            // Check for clone relationships
            if (nodeA.cloneInfo && nodeB.cloneInfo) {
                if (nodeA.cloneInfo.original_ptr === nodeB.alloc.ptr || 
                    nodeB.cloneInfo.original_ptr === nodeA.alloc.ptr) {
                    relationship = 'clone';
                    strength = 0.8;
                }
            }
            
            // Check for type similarity
            if (!relationship && nodeA.type === nodeB.type && nodeA.type !== 'unknown') {
                relationship = 'type_similar';
                strength = 0.3;
            }
            
            // Check for thread affinity
            if (!relationship && nodeA.alloc.thread_id === nodeB.alloc.thread_id && 
                nodeA.alloc.thread_id !== undefined) {
                relationship = 'thread_affinity';
                strength = 0.2;
            }
            
            // Check for temporal proximity (allocated around same time)
            if (!relationship && nodeA.alloc.timestamp_alloc && nodeB.alloc.timestamp_alloc) {
                const timeDiff = Math.abs(nodeA.alloc.timestamp_alloc - nodeB.alloc.timestamp_alloc);
                if (timeDiff < 1000000) { // Within 1ms
                    relationship = 'temporal';
                    strength = 0.4;
                }
            }
            
            // Add link if relationship found
            if (relationship && (strength > 0.2 || Math.random() < 0.05)) {
                links.push({
                    source: i,
                    target: j,
                    relationship,
                    strength,
                    sourceNode: nodeA,
                    targetNode: nodeB
                });
            }
        }
    }
    
    // Add control panel
    const controls = document.createElement('div');
    controls.style.cssText = `
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 10px;
        border-radius: 6px;
        font-size: 12px;
        z-index: 1000;
        user-select: none;
    `;
    controls.innerHTML = `
        <div style="margin-bottom: 8px; font-weight: bold;">🎮 Graph Controls</div>
        <button id="zoom-in" style="margin: 2px; padding: 4px 8px; font-size: 11px;">🔍+ Zoom In</button>
        <button id="zoom-out" style="margin: 2px; padding: 4px 8px; font-size: 11px;">🔍- Zoom Out</button>
        <button id="reset-view" style="margin: 2px; padding: 4px 8px; font-size: 11px;">🏠 Reset</button>
        <button id="auto-layout" style="margin: 2px; padding: 4px 8px; font-size: 11px;">🔄 Layout</button>
        <div style="margin-top: 8px; font-size: 10px;">
            <div>Nodes: ${nodes.length}</div>
            <div>Links: ${links.length}</div>
            <div>Zoom: <span id="zoom-display">100%</span></div>
        </div>
    `;
    container.appendChild(controls);
    
    // Add legend
    const legend = document.createElement('div');
    legend.style.cssText = `
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 10px;
        border-radius: 6px;
        font-size: 11px;
        z-index: 1000;
        user-select: none;
    `;
    legend.innerHTML = `
        <div style="font-weight: bold; margin-bottom: 6px;">🔗 Relationships</div>
        <div style="margin: 3px 0;"><span style="color: #ff6b6b;">━━</span> Clone</div>
        <div style="margin: 3px 0;"><span style="color: #4ecdc4;">━━</span> Type Similar</div>
        <div style="margin: 3px 0;"><span style="color: #45b7d1;">━━</span> Thread Affinity</div>
        <div style="margin: 3px 0;"><span style="color: #f9ca24;">━━</span> Temporal</div>
        <div style="margin-top: 8px; font-weight: bold;">🎯 Nodes</div>
        <div style="margin: 3px 0;"><span style="color: #ff6b6b;">●</span> Leaked</div>
        <div style="margin: 3px 0;"><span style="color: #6c5ce7;">●</span> High Borrow</div>
        <div style="margin: 3px 0;"><span style="color: #a8e6cf;">●</span> Normal</div>
    `;
    container.appendChild(legend);
    
    // Create info panel for selected node
    const infoPanel = document.createElement('div');
    infoPanel.style.cssText = `
        position: absolute;
        bottom: 10px;
        left: 10px;
        background: rgba(0,0,0,0.9);
        color: white;
        padding: 12px;
        border-radius: 6px;
        font-size: 11px;
        max-width: 250px;
        z-index: 1000;
        display: none;
    `;
    container.appendChild(infoPanel);
    
    // Render function
    function render() {
        // Clear existing nodes and links
        container.querySelectorAll('.graph-node, .graph-link').forEach(el => el.remove());
        
        // Render links first (behind nodes)
        links.forEach(link => {
            const sourceNode = nodes[link.source];
            const targetNode = nodes[link.target];
            
            const linkEl = document.createElement('div');
            linkEl.className = 'graph-link';
            
            const dx = (targetNode.x - sourceNode.x) * zoomLevel;
            const dy = (targetNode.y - sourceNode.y) * zoomLevel;
            const length = Math.sqrt(dx * dx + dy * dy);
            const angle = Math.atan2(dy, dx) * 180 / Math.PI;
            
            const x = sourceNode.x * zoomLevel + panX;
            const y = sourceNode.y * zoomLevel + panY;
            
            let color;
            switch(link.relationship) {
                case 'clone': color = '#ff6b6b'; break;
                case 'type_similar': color = '#4ecdc4'; break;
                case 'thread_affinity': color = '#45b7d1'; break;
                case 'temporal': color = '#f9ca24'; break;
                default: color = '#666';
            }
            
            linkEl.style.cssText = `
                position: absolute;
                left: ${x}px;
                top: ${y}px;
                width: ${length}px;
                height: ${Math.max(link.strength * 2, 1)}px;
                background: linear-gradient(90deg, ${color} 60%, transparent 60%);
                background-size: 8px 100%;
                opacity: ${0.4 + link.strength * 0.3};
                transform-origin: 0 50%;
                transform: rotate(${angle}deg);
                z-index: 1;
                pointer-events: none;
            `;
            
            container.appendChild(linkEl);
        });
        
        // Render nodes
        nodes.forEach((node, i) => {
            const nodeEl = document.createElement('div');
            nodeEl.className = 'graph-node';
            nodeEl.dataset.nodeId = i;
            
            const x = node.x * zoomLevel + panX - (node.nodeSize * zoomLevel) / 2;
            const y = node.y * zoomLevel + panY - (node.nodeSize * zoomLevel) / 2;
            const size = node.nodeSize * zoomLevel;
            
            // Determine node color based on properties
            let color;
            if (node.isLeaked) {
                color = '#ff6b6b'; // Red for leaked
            } else if (node.borrowCount > 5) {
                color = '#6c5ce7'; // Purple for high borrow activity
            } else {
                color = `hsl(${(node.type.length * 47) % 360}, 65%, 60%)`;
            }
            
            nodeEl.style.cssText = `
                position: absolute;
                left: ${x}px;
                top: ${y}px;
                width: ${size}px;
                height: ${size}px;
                background: ${color};
                border: ${selectedNode === i ? '3px solid #fff' : '2px solid rgba(255,255,255,0.7)'};
                border-radius: 50%;
                cursor: ${node.fixed ? 'move' : 'pointer'};
                transition: none;
                z-index: 10;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            `;
            
            // Add node label for larger nodes
            if (size > 20) {
                const label = document.createElement('div');
                label.style.cssText = `
                    position: absolute;
                    top: ${size + 4}px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: ${Math.max(zoomLevel * 10, 8)}px;
                    color: var(--text-primary);
                    white-space: nowrap;
                    pointer-events: none;
                    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
                    font-weight: 600;
                `;
                label.textContent = node.name.length > 8 ? node.name.substring(0, 8) + '...' : node.name;
                nodeEl.appendChild(label);
            }
            
            // Add event listeners
            nodeEl.addEventListener('click', () => selectNode(i));
            nodeEl.addEventListener('mousedown', (e) => startDrag(e, i));
            
            container.appendChild(nodeEl);
        });
        
        // Update zoom display
        document.getElementById('zoom-display').textContent = Math.round(zoomLevel * 100) + '%';
    }
    
    // Event handlers
    function selectNode(nodeId) {
        selectedNode = nodeId;
        const node = nodes[nodeId];
        
        // Show info panel
        infoPanel.style.display = 'block';
        infoPanel.innerHTML = `
            <div style="font-weight: bold; margin-bottom: 8px; color: #4ecdc4;">📋 ${node.name}</div>
            <div><strong>Type:</strong> ${node.type}</div>
            <div><strong>Size:</strong> ${formatBytes(node.size)}</div>
            <div><strong>Leaked:</strong> ${node.isLeaked ? '❌ Yes' : '✅ No'}</div>
            <div><strong>Borrows:</strong> ${node.borrowCount}</div>
            ${node.cloneInfo ? `<div><strong>Clones:</strong> ${node.cloneInfo.clone_count || 0}</div>` : ''}
            <div><strong>Thread:</strong> ${node.alloc.thread_id || 'Unknown'}</div>
            <div style="margin-top: 8px; font-size: 10px; opacity: 0.8;">
                Click and drag to move • Double-click to pin
            </div>
        `;
        
        render();
    }
    
    function startDrag(e, nodeId) {
        e.preventDefault();
        e.stopPropagation(); // Prevent container panning
        isDragging = true;
        dragTarget = nodeId;
        
        const rect = container.getBoundingClientRect();
        const startX = e.clientX;
        const startY = e.clientY;
        const startNodeX = nodes[nodeId].x;
        const startNodeY = nodes[nodeId].y;
        
        // Visual feedback
        const nodeEl = document.querySelector(`[data-node-id="${nodeId}"]`);
        if (nodeEl) {
            nodeEl.style.transform = 'scale(1.2)';
            nodeEl.style.zIndex = '100';
        }
        
        function onMouseMove(e) {
            if (!isDragging || dragTarget === null) return;
            
            // Calculate movement in world coordinates
            const dx = (e.clientX - startX) / zoomLevel;
            const dy = (e.clientY - startY) / zoomLevel;
            
            // Update node position
            nodes[dragTarget].x = Math.max(20, Math.min(width - 20, startNodeX + dx));
            nodes[dragTarget].y = Math.max(20, Math.min(height - 20, startNodeY + dy));
            nodes[dragTarget].fixed = true;
            
            render();
        }
        
        function onMouseUp() {
            isDragging = false;
            
            // Reset visual feedback
            if (nodeEl) {
                nodeEl.style.transform = '';
                nodeEl.style.zIndex = '10';
            }
            
            dragTarget = null;
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
        
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    }
    
    // Control event listeners
    document.getElementById('zoom-in').addEventListener('click', () => {
        zoomLevel = Math.min(zoomLevel * 1.2, 3);
        render();
    });
    
    document.getElementById('zoom-out').addEventListener('click', () => {
        zoomLevel = Math.max(zoomLevel / 1.2, 0.3);
        render();
    });
    
    document.getElementById('reset-view').addEventListener('click', () => {
        zoomLevel = 1;
        panX = 0;
        panY = 0;
        selectedNode = null;
        infoPanel.style.display = 'none';
        nodes.forEach(node => node.fixed = false);
        render();
    });
    
    document.getElementById('auto-layout').addEventListener('click', () => {
        // Simple force-directed layout simulation
        for (let iteration = 0; iteration < 50; iteration++) {
            // Repulsion between nodes
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].vx = 0;
                nodes[i].vy = 0;
                
                for (let j = 0; j < nodes.length; j++) {
                    if (i === j) continue;
                    
                    const dx = nodes[i].x - nodes[j].x;
                    const dy = nodes[i].y - nodes[j].y;
                    const distance = Math.sqrt(dx * dx + dy * dy) + 0.1;
                    const force = 100 / (distance * distance);
                    
                    nodes[i].vx += (dx / distance) * force;
                    nodes[i].vy += (dy / distance) * force;
                }
            }
            
            // Attraction along links
            links.forEach(link => {
                const source = nodes[link.source];
                const target = nodes[link.target];
                const dx = target.x - source.x;
                const dy = target.y - source.y;
                const distance = Math.sqrt(dx * dx + dy * dy) + 0.1;
                const force = distance * 0.01 * link.strength;
                
                source.vx += (dx / distance) * force;
                source.vy += (dy / distance) * force;
                target.vx -= (dx / distance) * force;
                target.vy -= (dy / distance) * force;
            });
            
            // Apply velocities
            nodes.forEach(node => {
                if (!node.fixed) {
                    node.x += node.vx * 0.1;
                    node.y += node.vy * 0.1;
                    
                    // Keep within bounds
                    node.x = Math.max(30, Math.min(width - 30, node.x));
                    node.y = Math.max(30, Math.min(height - 30, node.y));
                }
            });
        }
        
        render();
    });
    
    // Mouse wheel zoom
    container.addEventListener('wheel', (e) => {
        e.preventDefault();
        const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
        const rect = container.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;
        
        // Zoom towards mouse position
        const beforeZoomX = (mouseX - panX) / zoomLevel;
        const beforeZoomY = (mouseY - panY) / zoomLevel;
        
        zoomLevel = Math.max(0.3, Math.min(3, zoomLevel * zoomFactor));
        
        // Adjust pan to keep mouse position fixed
        panX = mouseX - beforeZoomX * zoomLevel;
        panY = mouseY - beforeZoomY * zoomLevel;
        
        render();
    });
    
    // Container pan functionality
    let isPanning = false;
    let panStartX = 0;
    let panStartY = 0;
    let panStartPanX = 0;
    let panStartPanY = 0;
    
    container.addEventListener('mousedown', (e) => {
        // Only start panning if not clicking on a node
        if (!e.target.classList.contains('graph-node')) {
            isPanning = true;
            panStartX = e.clientX;
            panStartY = e.clientY;
            panStartPanX = panX;
            panStartPanY = panY;
            container.style.cursor = 'grabbing';
        }
    });
    
    container.addEventListener('mousemove', (e) => {
        if (isPanning) {
            panX = panStartPanX + (e.clientX - panStartX);
            panY = panStartPanY + (e.clientY - panStartY);
            render();
        }
    });
    
    container.addEventListener('mouseup', () => {
        isPanning = false;
        container.style.cursor = 'default';
    });
    
    container.addEventListener('mouseleave', () => {
        isPanning = false;
        container.style.cursor = 'default';
    });
    
    // Initial render
    render();
    
    console.log(`✅ Interactive Variable Graph rendered with ${nodes.length} nodes and ${links.length} relationships`);
}

function populateAllocationTable(allocations) {
    console.log('📋 Populating allocation table...');
    
    const tbody = document.getElementById('allocTable');
    if (!tbody) {
        console.warn('allocTable not found');
        return;
    }
    
    tbody.innerHTML = '';
    
    // Show first 100 allocations
    allocations.slice(0, 100).forEach(alloc => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 dark:hover:bg-gray-700';
        
        const status = alloc.is_leaked ? 
            '<span class="status-badge status-leaked">Leaked</span>' :
            alloc.timestamp_dealloc ? 
            '<span class="status-badge status-freed">Freed</span>' :
            '<span class="status-badge status-active">Active</span>';
        
        row.innerHTML = `
            <td class="px-3 py-2 text-sm font-mono">${alloc.var_name || 'unnamed'}</td>
            <td class="px-3 py-2 text-sm">${alloc.type_name || 'unknown'}</td>
            <td class="px-3 py-2 text-sm">${formatBytes(alloc.size || 0)}</td>
            <td class="px-3 py-2 text-sm">${status}</td>
        `;
        
        tbody.appendChild(row);
    });
    
    console.log('✅ Allocation table populated with', Math.min(allocations.length, 100), 'entries');
}

// Utility function for formatting bytes
function formatBytes(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Enhanced mode selector for memory analysis
document.addEventListener('DOMContentLoaded', function() {
    const modeButtons = document.querySelectorAll('.heatmap-mode-btn');
    const visualizations = {
        heatmap: document.getElementById('memoryHeatmap'),
        type: document.getElementById('typeChart'), 
        distribution: document.getElementById('distributionChart')
    };
    
    modeButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            // Remove active from all buttons
            modeButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            
            // Hide all visualizations
            Object.values(visualizations).forEach(viz => {
                if (viz) viz.style.display = 'none';
            });
            
            // Show selected visualization
            const mode = btn.dataset.mode;
            if (visualizations[mode]) {
                visualizations[mode].style.display = 'block';
            }
        });
    });
});

console.log('📦 Dashboard JavaScript loaded');
"#.to_string()
}

// Embedded binary_dashboard.html template - 1:1 copy with all placeholders preserved
const EMBEDDED_BINARY_DASHBOARD_TEMPLATE: &str = r#"
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{PROJECT_NAME}} - Binary Memory Analysis Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
  <script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

  <style>
    {
        {
        CSS_CONTENT
      }
    }

    /* Clean, high-contrast layout variables */
    :root {
      --primary-blue: #2563eb;
      --primary-green: #059669;
      --primary-red: #dc2626;
      --primary-orange: #ea580c;
      --text-primary: #1f2937;
      --text-secondary: #6b7280;
      --bg-primary: #ffffff;
      --bg-secondary: #f8fafc;
      --border-light: #e5e7eb;
      --shadow-light: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    }

    .dark {
      --text-primary: #f9fafb;
      --text-secondary: #d1d5db;
      --bg-primary: #111827;
      --bg-secondary: #1f2937;
      --border-light: #374151;
      --shadow-light: 0 4px 6px -1px rgb(0 0 0 / 0.3);
    }

    body {
      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg-secondary);
      color: var(--text-primary);
      transition: all 0.3s ease;
      line-height: 1.6;
      margin: 0;
      padding: 0;
    }

    .dashboard-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 24px;
      min-height: 100vh;
    }

    /* 顶部标题栏 */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      padding: 20px 0;
      border-bottom: 1px solid var(--border-light);
    }

    .header h1 {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
    }

    .header .subtitle {
      color: var(--text-secondary);
      font-size: 0.9rem;
      margin-top: 4px;
    }

    /* 主题切换按钮 */
    .theme-toggle {
      background: var(--primary-blue);
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .theme-toggle:hover {
      background: #1d4ed8;
      transform: translateY(-1px);
    }

    /* 卡片样式 */
    .card {
      background: var(--bg-primary);
      border: 1px solid var(--border-light);
      border-radius: 12px;
      padding: 24px;
      box-shadow: var(--shadow-light);
      transition: all 0.3s ease;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px -5px rgb(0 0 0 / 0.1);
    }

    .card h2 {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 16px 0;
      border-bottom: 2px solid var(--primary-blue);
      padding-bottom: 8px;
    }

    /* 网格布局 */
    .grid {
      display: grid;
      gap: 24px;
      margin-bottom: 32px;
    }

    .grid-2 {
      grid-template-columns: 1fr 1fr;
    }

    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    /* KPI */
    .kpi-card {
      text-align: center;
      padding: 20px;
      background: linear-gradient(135deg, var(--primary-blue) 0%, #3b82f6 100%);
      color: white;
      border-radius: 12px;
      border: none;
      box-shadow: var(--shadow-light);
    }

    .kpi-value {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .kpi-label {
      font-size: 0.875rem;
      opacity: 0.9;
      font-weight: 500;
    }


    .chart-container {
      height: 300px;
      background: var(--bg-primary);
      border-radius: 8px;
      position: relative;
      padding: 16px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 16px;
    }

    th,
    td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid var(--border-light);
    }

    th {
      background: var(--bg-secondary);
      font-weight: 600;
      color: var(--text-primary);
    }

    tr:hover {
      background: var(--bg-secondary);
    }

    @media (max-width: 768px) {

      .grid-2,
      .grid-3,
      .grid-4 {
        grid-template-columns: 1fr;
      }

      .dashboard-container {
        padding: 16px;
      }

      .header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }
    }

    .scroll {
      max-height: 400px;
      overflow: auto;
    }

    .scroll::-webkit-scrollbar {
      width: 6px;
    }

    .scroll::-webkit-scrollbar-track {
      background: var(--bg-secondary);
    }

    .scroll::-webkit-scrollbar-thumb {
      background: var(--border-light);
      border-radius: 3px;
    }

    .status-badge {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .status-active {
      background: #dcfce7;
      color: #166534;
    }

    .status-leaked {
      background: #fee2e2;
      color: #dc2626;
    }

    .status-freed {
      background: #e5e7eb;
      color: #374151;
    }

    .dark .status-active {
      background: #064e3b;
      color: #34d399;
    }

    .dark .status-leaked {
      background: #7f1d1d;
      color: #fca5a5;
    }

    .dark .status-freed {
      background: #374151;
      color: #d1d5db;
    }

    .risk-low {
      background: #dcfce7;
      color: #166534;
    }

    .risk-medium {
      background: #fef3c7;
      color: #92400e;
    }

    .risk-high {
      background: #fee2e2;
      color: #dc2626;
    }

    .dark .risk-low {
      background: #064e3b;
      color: #34d399;
    }

    .dark .risk-medium {
      background: #78350f;
      color: #fbbf24;
    }

    .dark .risk-high {
      background: #7f1d1d;
      color: #fca5a5;
    }

    /* Enhanced Lifecycle Visualization Styles */
    .allocation-type {
      padding: 3px 6px;
      border-radius: 3px;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      display: inline-block;
    }

    .type-heap {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #f59e0b;
    }

    .type-stack {
      background: #dbeafe;
      color: #1e40af;
      border: 1px solid #3b82f6;
    }

    .type-unknown {
      background: #f3f4f6;
      color: #6b7280;
      border: 1px solid #9ca3af;
    }

    .dark .type-heap {
      background: #78350f;
      color: #fbbf24;
    }

    .dark .type-stack {
      background: #1e3a8a;
      color: #60a5fa;
    }

    .dark .type-unknown {
      background: #374151;
      color: #d1d5db;
    }

    /* Enhanced progress bar animations */
    @keyframes shine {
      0% {
        left: -100%;
      }

      50% {
        left: 100%;
      }

      100% {
        left: 100%;
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.7;
      }
    }

    /* Enhanced lifecycle item styles */
    .lifecycle-item.heap {
      border-left-color: #ff6b35 !important;
    }

    .lifecycle-item.stack {
      border-left-color: #4dabf7 !important;
    }

    .lifecycle-item:hover {
      animation: pulse 1s ease-in-out;
    }

    .lifecycle-bar {
      height: 16px;
      background: var(--bg-secondary);
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      margin: 6px 0;
      border: 1px solid var(--border-light);
    }

    .lifecycle-progress {
      height: 100%;
      background: linear-gradient(90deg, var(--primary-green), var(--primary-blue));
      border-radius: 7px;
      position: relative;
      transition: width 0.3s ease;
    }

    .lifecycle-item {
      margin: 8px 0;
      padding: 12px;
      background: var(--bg-secondary);
      border-radius: 8px;
      border-left: 4px solid var(--primary-blue);
      transition: all 0.2s ease;
    }

    .lifecycle-item:hover {
      background: var(--bg-primary);
      box-shadow: var(--shadow-light);
    }

    .lifecycle-item.heap {
      border-left-color: var(--primary-orange);
    }

    .lifecycle-item.stack {
      border-left-color: var(--primary-blue);
    }

    .time-info {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 6px;
      font-family: 'Courier New', monospace;
    }

    .time-badge {
      display: inline-block;
      padding: 2px 6px;
      background: var(--bg-primary);
      border-radius: 3px;
      margin-right: 8px;
      border: 1px solid var(--border-light);
    }

    /* Enhanced 3D Memory Layout Styles */
    .memory-3d-container {
      position: relative;
      width: 100%;
      height: 400px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-light);
      border-radius: 8px;
      overflow: hidden;
    }

    /* Removed problematic absolute positioning CSS for memory-3d-controls */

    .memory-3d-info {
      position: absolute;
      bottom: 10px;
      left: 10px;
      z-index: 100;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.8rem;
      font-family: monospace;
    }

    /* Timeline Playback Styles */
    .timeline-container {
      background: var(--bg-secondary);
      border: 1px solid var(--border-light);
      border-radius: 8px;
      padding: 16px;
      margin: 16px 0;
    }

    .timeline-slider {
      width: 100%;
      height: 6px;
      background: var(--border-light);
      border-radius: 3px;
      position: relative;
      cursor: pointer;
      margin: 12px 0;
    }

    .timeline-progress {
      height: 100%;
      background: linear-gradient(90deg, var(--primary-blue), var(--primary-green));
      border-radius: 3px;
      transition: width 0.1s ease;
    }

    .timeline-thumb {
      position: absolute;
      top: -6px;
      width: 18px;
      height: 18px;
      background: var(--primary-blue);
      border: 2px solid white;
      border-radius: 50%;
      cursor: grab;
      box-shadow: var(--shadow-light);
    }

    .timeline-thumb:active {
      cursor: grabbing;
      transform: scale(1.1);
    }

    .timeline-controls {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 12px;
    }

    .timeline-btn {
      background: var(--primary-blue);
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.8rem;
      transition: all 0.2s ease;
    }

    .timeline-btn:hover {
      background: #1d4ed8;
      transform: translateY(-1px);
    }

    .timeline-btn:disabled {
      background: var(--text-secondary);
      cursor: not-allowed;
      transform: none;
    }

    /* Memory Heatmap Styles */
    .heatmap-container {
      position: relative;
      width: 100%;
      height: 300px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-light);
      border-radius: 8px;
      overflow: hidden;
    }

    .heatmap-legend {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
      background: rgba(255, 255, 255, 0.9);
      padding: 8px;
      border-radius: 6px;
      font-size: 0.7rem;
    }

    .dark .heatmap-legend {
      background: rgba(0, 0, 0, 0.8);
      color: white;
    }

    .heatmap-mode-selector {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
    }

    .heatmap-mode-btn {
      background: var(--bg-primary);
      color: var(--text-primary);
      border: 1px solid var(--border-light);
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.8rem;
      transition: all 0.2s ease;
    }

    .heatmap-mode-btn.active {
      background: var(--primary-blue);
      color: white;
      border-color: var(--primary-blue);
    }

    .heatmap-mode-btn:hover {
      background: var(--primary-blue);
      color: white;
    }

    /* Memory Block Visualization */
    .memory-block {
      position: absolute;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .memory-block:hover {
      border-color: white;
      border-width: 2px;
      z-index: 10;
    }

    .memory-block.heap {
      background: linear-gradient(45deg, #ff6b35, #f7931e);
    }

    .memory-block.stack {
      background: linear-gradient(45deg, #4dabf7, #339af0);
    }

    .memory-block.leaked {
      background: linear-gradient(45deg, #dc2626, #ef4444);
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    }

    /* Tooltip Styles */
    .memory-tooltip {
      position: absolute;
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.8rem;
      font-family: monospace;
      pointer-events: none;
      z-index: 1000;
      max-width: 300px;
      line-height: 1.4;
    }

    .memory-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
    }
  </style>
  <script>
    // Global safe update function - must be defined first
    function safeUpdateElement(id, value, defaultValue = '-') {
      try {
        const el = document.getElementById(id);
        if (el) {
          el.textContent = value;
          return true;
        } else {
          console.warn(`Element with ID '${id}' not found`);
          return false;
        }
      } catch (error) {
        console.error(`Error updating element '${id}':`, error);
        return false;
      }
    }

    // Global formatBytes function
    function formatBytes(bytes) {
        if (bytes === 0) return '0 B';
        if (typeof bytes !== 'number') return '0 B';
        
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // Beautiful modal dialog system
    function createModal(title, content) {
        // Remove existing modal if any
        const existingModal = document.getElementById('custom-modal');
        if (existingModal) {
            existingModal.remove();
        }
        
        const modal = document.createElement('div');
        modal.id = 'custom-modal';
        modal.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
        `;
        
        const modalContent = document.createElement('div');
        modalContent.style.cssText = `
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            padding: 0;
            max-width: 500px;
            width: 90%;
            max-height: 80%;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: scale(0.7);
            transition: transform 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.2);
        `;
        
        const header = document.createElement('div');
        header.style.cssText = `
            background: rgba(255, 255, 255, 0.15);
            padding: 20px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        `;
        
        const titleEl = document.createElement('h3');
        titleEl.style.cssText = `
            margin: 0;
            color: white;
            font-size: 20px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        `;
        titleEl.textContent = title;
        
        const closeBtn = document.createElement('button');
        closeBtn.style.cssText = `
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            transition: background 0.2s ease;
        `;
        closeBtn.innerHTML = '×';
        closeBtn.addEventListener('mouseenter', () => {
            closeBtn.style.background = 'rgba(255, 255, 255, 0.3)';
        });
        closeBtn.addEventListener('mouseleave', () => {
            closeBtn.style.background = 'rgba(255, 255, 255, 0.2)';
        });
        
        const body = document.createElement('div');
        body.style.cssText = `
            padding: 24px;
            color: white;
            line-height: 1.6;
            overflow-y: auto;
            max-height: 400px;
        `;
        body.innerHTML = content;
        
        function closeModal() {
            modal.style.opacity = '0';
            modalContent.style.transform = 'scale(0.7)';
            setTimeout(() => {
                modal.remove();
            }, 300);
        }
        
        closeBtn.addEventListener('click', closeModal);
        modal.addEventListener('click', (e) => {
            if (e.target === modal) closeModal();
        });
        
        document.addEventListener('keydown', function escapeHandler(e) {
            if (e.key === 'Escape') {
                closeModal();
                document.removeEventListener('keydown', escapeHandler);
            }
        });
        
        header.appendChild(titleEl);
        header.appendChild(closeBtn);
        modalContent.appendChild(header);
        modalContent.appendChild(body);
        modal.appendChild(modalContent);
        document.body.appendChild(modal);
        
        // Animate in
        setTimeout(() => {
            modal.style.opacity = '1';
            modalContent.style.transform = 'scale(1)';
        }, 10);
        
        return modal;
    }

    // Data injection placeholder - will be replaced by build tool
    window.analysisData = {{BINARY_DATA}};

    // Emergency fallback: Load data directly from JSON files if injection failed
    if (!window.analysisData || Object.keys(window.analysisData).length === 0 ||
      !window.analysisData.memory_analysis || !window.analysisData.memory_analysis.allocations) {

      console.warn('Data injection failed, attempting to load from JSON files...');

      // Try to fetch the JSON data directly
      fetch('./large_scale_user_memory_analysis.json')
        .then(response => response.json())
        .then(memoryData => {
          console.log('✅ Loaded memory analysis data:', memoryData);

          // Construct the expected data structure
          window.analysisData = {
            memory_analysis: memoryData,
            lifetime: {},
            complex_types: {},
            unsafe_ffi: {},
            performance: {}
          };

          // Try to load other JSON files
          Promise.all([
            fetch('./large_scale_user_lifetime.json').then(r => r.json()).catch(() => ({})),
            fetch('./large_scale_user_complex_types.json').then(r => r.json()).catch(() => ({})),
            fetch('./large_scale_user_unsafe_ffi.json').then(r => r.json()).catch(() => ({})),
            fetch('./large_scale_user_performance.json').then(r => r.json()).catch(() => ({}))
          ]).then(([lifetime, complexTypes, unsafeFfi, performance]) => {
            window.analysisData.lifetime = lifetime;
            window.analysisData.complex_types = complexTypes;
            window.analysisData.unsafe_ffi = unsafeFfi;
            window.analysisData.performance = performance;

            console.log('✅ All data loaded, initializing enhanced features...');

            // Trigger enhanced features initialization
            console.log('🚀 Triggering enhanced features initialization...');
            if (typeof initEnhancedLifecycleVisualization === 'function') {
              setTimeout(() => {
                console.log('🔄 Calling initEnhancedLifecycleVisualization...');
                initEnhancedLifecycleVisualization();
              }, 100);
            } else {
              console.error('❌ initEnhancedLifecycleVisualization function not found');
            }

            // Also trigger the main dashboard initialization if needed
            if (typeof initDashboard === 'function') {
              setTimeout(() => {
                console.log('🔄 Calling initDashboard...');
                initDashboard();
              }, 200);
            }
          });
        })
        .catch(error => {
          console.error('❌ Failed to load JSON data:', error);

          // Last resort: Create dummy data for testing
          window.analysisData = {
            memory_analysis: {
              allocations: [
                {
                  var_name: 'test_var_1',
                  type_name: 'Arc<String>',
                  size: 1024,
                  timestamp_alloc: Date.now() * 1000000,
                  lifetime_ms: 100.5,
                  is_leaked: false
                },
                {
                  var_name: 'test_var_2',
                  type_name: 'Vec<i32>',
                  size: 2048,
                  timestamp_alloc: Date.now() * 1000000 + 1000000,
                  lifetime_ms: 250.0,
                  is_leaked: true
                }
              ]
            }
          };
          console.log('⚠️ Using dummy data for testing');
        });
    } else {
      console.log('✅ Data injection successful');
    }

    console.log('Final analysisData:', window.analysisData);
    console.log('Allocations available:', window.analysisData?.memory_analysis?.allocations?.length || 0);

    // Enhanced Memory Visualization Functions
    class EnhancedMemoryVisualizer {
      constructor() {
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.controls = null;
        this.memoryBlocks = [];
        this.timeline = {
          isPlaying: false,
          currentTime: 0,
          totalTime: 0,
          speed: 1000, // ms per step
          data: []
        };
        this.heatmapMode = 'density';
        this.tooltip = null;
        this.initialized = false;
      }

      init() {
        if (this.initialized) return;
        console.log('Initializing EnhancedMemoryVisualizer...');

        this.initTooltip();
        this.init3DVisualization();
        this.initTimelineControls();
        this.initHeatmap();
        this.bindEvents();

        this.initialized = true;
        console.log('EnhancedMemoryVisualizer initialized successfully');
      }

      initTooltip() {
        this.tooltip = document.createElement('div');
        this.tooltip.className = 'memory-tooltip';
        this.tooltip.style.display = 'none';
        document.body.appendChild(this.tooltip);
      }

      init3DVisualization() {
        const container = document.getElementById('memory3DContainer');
        if (!container) return;

        // Scene setup with dark gradient background
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(0x1a1a2e);

        // Camera setup - closer view for better data inspection
        this.camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
        this.camera.position.set(15, 10, 15);

        // Renderer setup with enhanced settings
        this.renderer = new THREE.WebGLRenderer({
          antialias: true,
          alpha: true,
          powerPreference: "high-performance"
        });
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.setClearColor(0x1a1a2e, 1);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        container.appendChild(this.renderer.domElement);

        // Controls setup with enhanced interaction
        try {
          if (typeof THREE !== 'undefined') {
            const OrbitControls = THREE.OrbitControls || window.OrbitControls;
            if (OrbitControls) {
              this.controls = new OrbitControls(this.camera, this.renderer.domElement);
              this.controls.enableDamping = true;
              this.controls.dampingFactor = 0.05;
              this.controls.enableZoom = true;
              this.controls.enablePan = true;
              this.controls.enableRotate = true;
              this.controls.autoRotate = false;
              this.controls.autoRotateSpeed = 0.5;
              this.controls.minDistance = 2;  // Allow closer inspection
              this.controls.maxDistance = 100;
              this.controls.maxPolarAngle = Math.PI;
              this.controls.minPolarAngle = 0;
            } else {
              console.warn('OrbitControls not available, setting up manual controls');
              this.setupManualControls();
            }
          }
        } catch (error) {
          console.warn('Failed to initialize OrbitControls:', error);
        }

        // Enhanced lighting setup
        const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
        this.scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(50, 50, 25);
        directionalLight.castShadow = true;
        directionalLight.shadow.mapSize.width = 2048;
        directionalLight.shadow.mapSize.height = 2048;
        directionalLight.shadow.camera.near = 0.5;
        directionalLight.shadow.camera.far = 500;
        this.scene.add(directionalLight);

        // Add subtle rim lighting
        const rimLight = new THREE.DirectionalLight(0x4a90e2, 0.3);
        rimLight.position.set(-50, 20, -25);
        this.scene.add(rimLight);

        // Add point light for dynamic effects
        this.pointLight = new THREE.PointLight(0x4a90e2, 0.5, 100);
        this.pointLight.position.set(0, 20, 0);
        this.scene.add(this.pointLight);

        // Create subtle floor plane instead of grid
        const floorGeometry = new THREE.PlaneGeometry(100, 100);
        const floorMaterial = new THREE.MeshLambertMaterial({
          color: 0x2a2a3e,
          transparent: true,
          opacity: 0.3
        });
        this.floor = new THREE.Mesh(floorGeometry, floorMaterial);
        this.floor.rotation.x = -Math.PI / 2;
        this.floor.position.y = -0.1;
        this.floor.receiveShadow = true;
        this.scene.add(this.floor);

        // Initialize animation properties
        this.animationTime = 0;
        this.isAutoRotating = false;

        this.animate3D();
      }

      setupManualControls() {
        if (!this.renderer || !this.camera) return;

        const canvas = this.renderer.domElement;
        let isMouseDown = false;
        let mouseX = 0, mouseY = 0;
        let cameraDistance = 20;
        let cameraAngleX = 0;
        let cameraAngleY = 0;

        // Mouse controls for rotation
        canvas.addEventListener('mousedown', (event) => {
          isMouseDown = true;
          mouseX = event.clientX;
          mouseY = event.clientY;
          canvas.style.cursor = 'grabbing';
        });

        canvas.addEventListener('mousemove', (event) => {
          if (!isMouseDown) return;

          const deltaX = event.clientX - mouseX;
          const deltaY = event.clientY - mouseY;

          cameraAngleY += deltaX * 0.01;
          cameraAngleX += deltaY * 0.01;

          // Limit vertical rotation
          cameraAngleX = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, cameraAngleX));

          // Update camera position
          this.camera.position.x = Math.cos(cameraAngleY) * Math.cos(cameraAngleX) * cameraDistance;
          this.camera.position.y = Math.sin(cameraAngleX) * cameraDistance;
          this.camera.position.z = Math.sin(cameraAngleY) * Math.cos(cameraAngleX) * cameraDistance;

          this.camera.lookAt(0, 0, 0);

          mouseX = event.clientX;
          mouseY = event.clientY;
        });

        canvas.addEventListener('mouseup', () => {
          isMouseDown = false;
          canvas.style.cursor = 'grab';
        });

        canvas.addEventListener('mouseleave', () => {
          isMouseDown = false;
          canvas.style.cursor = 'default';
        });

        // Zoom with mouse wheel
        canvas.addEventListener('wheel', (event) => {
          event.preventDefault();

          const zoomSpeed = 0.1;
          cameraDistance += event.deltaY * zoomSpeed;
          cameraDistance = Math.max(2, Math.min(100, cameraDistance));

          // Update camera position
          this.camera.position.x = Math.cos(cameraAngleY) * Math.cos(cameraAngleX) * cameraDistance;
          this.camera.position.y = Math.sin(cameraAngleX) * cameraDistance;
          this.camera.position.z = Math.sin(cameraAngleY) * Math.cos(cameraAngleX) * cameraDistance;

          this.camera.lookAt(0, 0, 0);
        });

        // Touch controls for mobile
        let lastTouchDistance = 0;

        canvas.addEventListener('touchstart', (event) => {
          if (event.touches.length === 1) {
            isMouseDown = true;
            mouseX = event.touches[0].clientX;
            mouseY = event.touches[0].clientY;
          } else if (event.touches.length === 2) {
            const touch1 = event.touches[0];
            const touch2 = event.touches[1];
            lastTouchDistance = Math.sqrt(
              Math.pow(touch2.clientX - touch1.clientX, 2) +
              Math.pow(touch2.clientY - touch1.clientY, 2)
            );
          }
        });

        canvas.addEventListener('touchmove', (event) => {
          event.preventDefault();

          if (event.touches.length === 1 && isMouseDown) {
            const deltaX = event.touches[0].clientX - mouseX;
            const deltaY = event.touches[0].clientY - mouseY;

            cameraAngleY += deltaX * 0.01;
            cameraAngleX += deltaY * 0.01;
            cameraAngleX = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, cameraAngleX));

            this.camera.position.x = Math.cos(cameraAngleY) * Math.cos(cameraAngleX) * cameraDistance;
            this.camera.position.y = Math.sin(cameraAngleX) * cameraDistance;
            this.camera.position.z = Math.sin(cameraAngleY) * Math.cos(cameraAngleX) * cameraDistance;

            this.camera.lookAt(0, 0, 0);

            mouseX = event.touches[0].clientX;
            mouseY = event.touches[0].clientY;
          } else if (event.touches.length === 2) {
            const touch1 = event.touches[0];
            const touch2 = event.touches[1];
            const touchDistance = Math.sqrt(
              Math.pow(touch2.clientX - touch1.clientX, 2) +
              Math.pow(touch2.clientY - touch1.clientY, 2)
            );

            if (lastTouchDistance > 0) {
              const zoomDelta = (lastTouchDistance - touchDistance) * 0.01;
              cameraDistance += zoomDelta;
              cameraDistance = Math.max(2, Math.min(100, cameraDistance));

              this.camera.position.x = Math.cos(cameraAngleY) * Math.cos(cameraAngleX) * cameraDistance;
              this.camera.position.y = Math.sin(cameraAngleX) * cameraDistance;
              this.camera.position.z = Math.sin(cameraAngleY) * Math.cos(cameraAngleX) * cameraDistance;

              this.camera.lookAt(0, 0, 0);
            }

            lastTouchDistance = touchDistance;
          }
        });

        canvas.addEventListener('touchend', () => {
          isMouseDown = false;
          lastTouchDistance = 0;
        });

        canvas.style.cursor = 'grab';
        console.log('✅ Manual 3D controls initialized (mouse drag to rotate, wheel to zoom)');
      }

      animate3D() {
        requestAnimationFrame(() => this.animate3D());

        this.animationTime += 0.01;

        // Animate point light for dynamic lighting
        if (this.pointLight) {
          this.pointLight.position.x = Math.sin(this.animationTime) * 30;
          this.pointLight.position.z = Math.cos(this.animationTime) * 30;
          this.pointLight.intensity = 0.3 + Math.sin(this.animationTime * 2) * 0.2;
        }

        // Animate memory blocks with subtle floating effect
        this.memoryBlocks.forEach((block, index) => {
          if (block && block.position) {
            const originalY = block.userData.originalY || block.position.y;
            block.position.y = originalY + Math.sin(this.animationTime + index * 0.1) * 0.2;

            // Add subtle rotation for leaked memory blocks
            if (block.userData.is_leaked) {
              block.rotation.y += 0.02;
            }
          }
        });

        // Update controls
        if (this.controls) {
          this.controls.update();
        }

        // Render scene
        if (this.renderer && this.scene && this.camera) {
          this.renderer.render(this.scene, this.camera);
        }
      }

      create3DMemoryBlocks(allocations) {
        if (!this.scene || !allocations) return;

        // Clear existing blocks with fade out animation
        this.memoryBlocks.forEach(block => {
          if (block && block.material) {
            // Fade out animation
            const fadeOut = () => {
              block.material.opacity -= 0.05;
              if (block.material.opacity <= 0) {
                this.scene.remove(block);
                if (block.geometry) block.geometry.dispose();
                if (block.material) block.material.dispose();
              } else {
                requestAnimationFrame(fadeOut);
              }
            };
            fadeOut();
          }
        });
        this.memoryBlocks = [];

        // Sort allocations by size for better visual hierarchy
        const sortedAllocs = [...allocations].sort((a, b) => (b.size || 0) - (a.size || 0));

        const maxBlocksPerRow = 15;
        const spacing = 4;

        sortedAllocs.forEach((alloc, index) => {
          const size = Math.max(alloc.size || 1, 1);
          const blockSize = Math.cbrt(size / 50) + 0.8; // Enhanced size calculation

          // Spiral positioning for better visual distribution
          const angle = index * 0.5;
          const radius = Math.sqrt(index) * 2;
          const x = Math.cos(angle) * radius;
          const z = Math.sin(angle) * radius;
          const y = blockSize / 2;

          // Enhanced color scheme based on type and size
          let color = 0x3b82f6;
          let emissive = 0x000000;
          const typeName = alloc.type_name || '';

          if (typeName.includes('String')) {
            color = 0x4a90e2;
            emissive = 0x001122;
          } else if (typeName.includes('Box')) {
            color = 0xe74c3c;
            emissive = 0x220011;
          } else if (typeName.includes('Rc')) {
            color = 0x2ecc71;
            emissive = 0x001100;
          } else if (typeName.includes('Arc')) {
            color = 0x9b59b6;
            emissive = 0x110022;
          } else if (typeName.includes('Vec')) {
            color = 0xf39c12;
            emissive = 0x221100;
          }

          // Create enhanced geometry with rounded edges
          const geometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize);

          // Enhanced material with better visual effects
          const material = new THREE.MeshPhongMaterial({
            color: color,
            emissive: emissive,
            transparent: true,
            opacity: alloc.is_leaked ? 0.7 : 0.9,
            shininess: 100,
            specular: 0x222222
          });

          const cube = new THREE.Mesh(geometry, material);
          cube.position.set(x, y, z);
          cube.castShadow = true;
          cube.receiveShadow = true;

          // Store original position and allocation data
          cube.userData = {
            ...alloc,
            originalY: y,
            originalColor: color,
            originalEmissive: emissive
          };

          // Add entrance animation
          cube.scale.set(0, 0, 0);
          const targetScale = 1;
          const animateEntrance = () => {
            cube.scale.x += (targetScale - cube.scale.x) * 0.1;
            cube.scale.y += (targetScale - cube.scale.y) * 0.1;
            cube.scale.z += (targetScale - cube.scale.z) * 0.1;

            if (Math.abs(cube.scale.x - targetScale) > 0.01) {
              requestAnimationFrame(animateEntrance);
            }
          };
          setTimeout(() => animateEntrance(), index * 50);

          // Add hover effects
          cube.addEventListener = (event, handler) => {
            // Custom event handling for 3D objects
          };

          this.scene.add(cube);
          this.memoryBlocks.push(cube);
        });

        this.update3DInfo(allocations.length);
        this.setupRaycasting();
      }

      setupRaycasting() {
        if (!this.renderer || !this.camera) return;

        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();
        this.hoveredObject = null;

        const canvas = this.renderer.domElement;

        canvas.addEventListener('mousemove', (event) => {
          const rect = canvas.getBoundingClientRect();
          this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
          this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

          this.raycaster.setFromCamera(this.mouse, this.camera);
          const intersects = this.raycaster.intersectObjects(this.memoryBlocks);

          // Reset previous hover
          if (this.hoveredObject) {
            this.hoveredObject.material.emissive.setHex(this.hoveredObject.userData.originalEmissive);
            this.hoveredObject.scale.set(1, 1, 1);
          }

          if (intersects.length > 0) {
            this.hoveredObject = intersects[0].object;
            // Highlight hovered object
            this.hoveredObject.material.emissive.setHex(0x444444);
            this.hoveredObject.scale.set(1.2, 1.2, 1.2);

            // Show tooltip
            this.show3DTooltip(event, this.hoveredObject.userData);
            canvas.style.cursor = 'pointer';
          } else {
            this.hoveredObject = null;
            this.hide3DTooltip();
            canvas.style.cursor = 'default';
          }
        });

        canvas.addEventListener('click', (event) => {
          if (this.hoveredObject) {
            this.selectMemoryBlock(this.hoveredObject);
          }
        });

        canvas.addEventListener('mouseleave', () => {
          if (this.hoveredObject) {
            this.hoveredObject.material.emissive.setHex(this.hoveredObject.userData.originalEmissive);
            this.hoveredObject.scale.set(1, 1, 1);
            this.hoveredObject = null;
          }
          this.hide3DTooltip();
          canvas.style.cursor = 'default';
        });
      }

      selectMemoryBlock(block) {
        // Animate selection
        const originalScale = { x: 1, y: 1, z: 1 };
        const targetScale = { x: 1.5, y: 1.5, z: 1.5 };

        const animateSelection = () => {
          block.scale.x += (targetScale.x - block.scale.x) * 0.2;
          block.scale.y += (targetScale.y - block.scale.y) * 0.2;
          block.scale.z += (targetScale.z - block.scale.z) * 0.2;

          if (Math.abs(block.scale.x - targetScale.x) > 0.01) {
            requestAnimationFrame(animateSelection);
          } else {
            // Return to normal size after selection
            setTimeout(() => {
              const returnToNormal = () => {
                block.scale.x += (originalScale.x - block.scale.x) * 0.2;
                block.scale.y += (originalScale.y - block.scale.y) * 0.2;
                block.scale.z += (originalScale.z - block.scale.z) * 0.2;

                if (Math.abs(block.scale.x - originalScale.x) > 0.01) {
                  requestAnimationFrame(returnToNormal);
                }
              };
              returnToNormal();
            }, 1000);
          }
        };
        animateSelection();

        // Show detailed info
        this.showDetailedInfo(block.userData);
      }

      show3DTooltip(event, alloc) {
        if (!this.tooltip) return;

        this.tooltip.innerHTML = `
          <div style="font-weight: bold; color: #4a90e2; margin-bottom: 4px;">${alloc.var_name || 'Unknown'}</div>
          <div style="margin-bottom: 2px;"><span style="color: #888;">Type:</span> ${alloc.type_name || 'Unknown'}</div>
          <div style="margin-bottom: 2px;"><span style="color: #888;">Size:</span> ${this.formatBytes(alloc.size || 0)}</div>
          <div style="margin-bottom: 2px;"><span style="color: #888;">Address:</span> 0x${(alloc.ptr || 0).toString(16)}</div>
          <div style="margin-bottom: 2px;"><span style="color: #888;">Lifetime:</span> ${(alloc.lifetime_ms || 0).toFixed(2)}ms</div>
          <div style="color: ${alloc.is_leaked ? '#e74c3c' : '#2ecc71'};">
            ${alloc.is_leaked ? '⚠️ Leaked' : '✅ Active'}
          </div>
        `;

        this.tooltip.style.display = 'block';
        this.tooltip.style.left = `${event.pageX + 15}px`;
        this.tooltip.style.top = `${event.pageY - 10}px`;
      }

      hide3DTooltip() {
        if (this.tooltip) {
          this.tooltip.style.display = 'none';
        }
      }

      showDetailedInfo(alloc) {
        const infoEl = document.getElementById('memory3DInfo');
        if (infoEl) {
          infoEl.innerHTML = `
            <div style="font-weight: bold; color: #4a90e2; margin-bottom: 8px;">Selected: ${alloc.var_name}</div>
            <div style="font-size: 0.8rem; line-height: 1.4;">
              <div>Type: ${alloc.type_name}</div>
              <div>Size: ${this.formatBytes(alloc.size || 0)}</div>
              <div>Address: 0x${(alloc.ptr || 0).toString(16)}</div>
              <div>Scope: ${alloc.scope_name || 'unknown'}</div>
              <div>Lifetime: ${(alloc.lifetime_ms || 0).toFixed(2)}ms</div>
              <div>Status: ${alloc.is_leaked ? 'Leaked' : 'Active'}</div>
            </div>
          `;
        }
      }

      update3DInfo(blockCount) {
        const infoEl = document.getElementById('memory3DInfo');
        if (infoEl) {
          infoEl.innerHTML = `
            Memory Blocks: ${blockCount}<br>
            Camera: [${this.camera.position.x.toFixed(1)}, ${this.camera.position.y.toFixed(1)}, ${this.camera.position.z.toFixed(1)}]<br>
            Use mouse to rotate, zoom, and pan
          `;
        }
      }

      initTimelineControls() {
        console.log('Initializing timeline controls...');

        const playBtn = document.getElementById('timelinePlay');
        const pauseBtn = document.getElementById('timelinePause');
        const resetBtn = document.getElementById('timelineReset');
        const stepBtn = document.getElementById('timelineStep');
        const slider = document.getElementById('timelineSlider');
        const thumb = document.getElementById('timelineThumb');

        console.log('Found timeline buttons:', {
          playBtn: !!playBtn,
          pauseBtn: !!pauseBtn,
          resetBtn: !!resetBtn,
          stepBtn: !!stepBtn,
          slider: !!slider,
          thumb: !!thumb
        });

        if (playBtn) {
          playBtn.addEventListener('click', () => {
            console.log('Timeline play button clicked');
            this.playTimeline();
          });
          console.log('Play button event bound');
        } else {
          console.error('timelinePlay button not found');
        }

        if (pauseBtn) {
          pauseBtn.addEventListener('click', () => {
            console.log('Timeline pause button clicked');
            this.pauseTimeline();
          });
          console.log('Pause button event bound');
        } else {
          console.error('timelinePause button not found');
        }

        if (resetBtn) {
          resetBtn.addEventListener('click', () => {
            console.log('Timeline reset button clicked');
            this.resetTimeline();
          });
          console.log('Reset button event bound');
        } else {
          console.error('timelineReset button not found');
        }

        if (stepBtn) {
          stepBtn.addEventListener('click', () => {
            console.log('Timeline step button clicked');
            this.stepTimeline();
          });
          console.log('Step button event bound');
        } else {
          console.error('timelineStep button not found');
        }

        if (slider && thumb) {
          let isDragging = false;

          thumb.addEventListener('mousedown', (e) => {
            isDragging = true;
            e.preventDefault();
          });

          document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;

            const rect = slider.getBoundingClientRect();
            const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
            const percentage = x / rect.width;

            this.setTimelinePosition(percentage);
          });

          document.addEventListener('mouseup', () => {
            isDragging = false;
          });

          slider.addEventListener('click', (e) => {
            if (isDragging) return;

            const rect = slider.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const percentage = x / rect.width;

            this.setTimelinePosition(percentage);
          });
        }
      }

      formatBytes(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
      }

      prepareTimelineData(allocations) {
        if (!allocations || allocations.length === 0) {
          this.timeline.data = [];
          this.timeline.totalTime = 0;
          this.updateTimelineDisplay();
          return;
        }

        // Filter out allocations with invalid timestamps and sort
        const validAllocs = allocations.filter(alloc =>
          alloc.timestamp_alloc &&
          !isNaN(alloc.timestamp_alloc) &&
          alloc.timestamp_alloc > 0
        );

        if (validAllocs.length === 0) {
          // If no valid timestamps, create synthetic timeline based on order
          this.timeline.data = allocations.map((alloc, index) => ({
            ...alloc,
            timestamp_alloc: index * 1000000, // 1ms intervals
            timestamp_dealloc: alloc.timestamp_dealloc || (index + 1) * 1000000
          }));
          this.timeline.totalTime = allocations.length * 1000000;
        } else {
          // Sort by allocation timestamp
          const sortedAllocs = [...validAllocs].sort((a, b) => {
            const timeA = a.timestamp_alloc || 0;
            const timeB = b.timestamp_alloc || 0;
            return timeA - timeB;
          });

          this.timeline.data = sortedAllocs;
          const minTime = sortedAllocs[0].timestamp_alloc || 0;
          const maxTime = sortedAllocs[sortedAllocs.length - 1].timestamp_alloc || 0;
          this.timeline.totalTime = Math.max(maxTime - minTime, 1000000); // At least 1ms
        }

        this.updateTimelineDisplay();
      }

      playTimeline() {
        console.log('Starting timeline playback...');
        if (this.timeline.isPlaying) {
          console.log('Timeline already playing');
          return;
        }

        console.log('Timeline data:', {
          totalTime: this.timeline.totalTime,
          currentTime: this.timeline.currentTime,
          dataLength: this.timeline.data.length
        });

        this.timeline.isPlaying = true;
        const playBtn = document.getElementById('timelinePlay');
        const pauseBtn = document.getElementById('timelinePause');

        if (playBtn) playBtn.disabled = true;
        if (pauseBtn) pauseBtn.disabled = false;

        console.log('Timeline playback started');

        // Get speed from control
        const speedSelect = document.getElementById('timelineSpeed');
        const speed = speedSelect ? parseFloat(speedSelect.value) : 1.0;

        // Use requestAnimationFrame for smoother animation
        const animate = () => {
          if (!this.timeline.isPlaying) return;

          // Calculate time increment based on speed and total time for better visualization
          const baseIncrement = Math.max(this.timeline.totalTime * 0.0005, 12500); // 0.05% of total time or 12.5μs minimum
          this.timeline.currentTime += baseIncrement * speed;

          if (this.timeline.currentTime >= this.timeline.totalTime) {
            this.timeline.currentTime = this.timeline.totalTime;
            this.updateTimelineVisualization();
            this.pauseTimeline();
            console.log('Timeline playback completed');
            return;
          }

          this.updateTimelineVisualization();

          // Continue animation with consistent frame rate
          const frameDelay = Math.max(16, 200 / speed); // Slower frame rate for better visualization
          setTimeout(() => {
            if (this.timeline.isPlaying) {
              requestAnimationFrame(animate);
            }
          }, frameDelay);
        };

        requestAnimationFrame(animate);
      }

      pauseTimeline() {
        this.timeline.isPlaying = false;

        const playBtn = document.getElementById('timelinePlay');
        const pauseBtn = document.getElementById('timelinePause');

        if (playBtn) playBtn.disabled = false;
        if (pauseBtn) pauseBtn.disabled = true;

        if (this.timelineInterval) {
          clearInterval(this.timelineInterval);
          this.timelineInterval = null;
        }
      }

      resetTimeline() {
        console.log('Resetting timeline...');
        this.pauseTimeline();
        this.timeline.currentTime = 0;
        this.updateTimelineVisualization();
        
        // Reset 3D visualization to show all allocations
        if (window.analysisData && window.analysisData.memory_analysis) {
          this.create3DMemoryBlocks(window.analysisData.memory_analysis.allocations || []);
        }
        
        console.log('Timeline reset to beginning');
      }

      stepTimeline() {
        // Step forward by 1% of total time or 1ms, whichever is larger
        const stepSize = Math.max(this.timeline.totalTime * 0.01, 1000000); // 1ms minimum
        this.timeline.currentTime += stepSize;
        if (this.timeline.currentTime > this.timeline.totalTime) {
          this.timeline.currentTime = this.timeline.totalTime;
        }
        this.updateTimelineVisualization();
        console.log(`Timeline stepped to ${(this.timeline.currentTime / 1000000).toFixed(1)}ms`);
      }

      setTimelinePosition(percentage) {
        this.timeline.currentTime = percentage * this.timeline.totalTime;
        this.updateTimelineVisualization();
      }

      updateTimelineVisualization() {
        const percentage = this.timeline.totalTime > 0 ? this.timeline.currentTime / this.timeline.totalTime : 0;

        // Cache DOM elements to avoid repeated queries
        if (!this.timelineElements) {
          this.timelineElements = {
            progress: document.getElementById('timelineProgress'),
            thumb: document.getElementById('timelineThumb'),
            currentTime: document.getElementById('timelineCurrentTime'),
            totalTime: document.getElementById('timelineTotalTime'),
            activeCount: document.getElementById('timelineActiveCount')
          };
        }

        // Only update if percentage changed significantly (reduce flickering)
        const roundedPercentage = Math.round(percentage * 1000) / 10; // Round to 0.1%
        if (this.lastPercentage !== roundedPercentage) {
          this.lastPercentage = roundedPercentage;

          if (this.timelineElements.progress) {
            this.timelineElements.progress.style.width = `${roundedPercentage}%`;
          }
          if (this.timelineElements.thumb) {
            this.timelineElements.thumb.style.left = `calc(${roundedPercentage}% - 9px)`;
          }
        }

        // Update time display less frequently
        if (!this.lastTimeUpdate || Date.now() - this.lastTimeUpdate > 100) {
          this.lastTimeUpdate = Date.now();

          const currentTimeMs = isNaN(this.timeline.currentTime) ? 0 : this.timeline.currentTime / 1000000;
          const totalTimeMs = isNaN(this.timeline.totalTime) ? 0 : this.timeline.totalTime / 1000000;

          if (this.timelineElements.currentTime) {
            safeUpdateElement('timelineCurrentTime', `${currentTimeMs.toFixed(1)}ms`);
          }
          if (this.timelineElements.totalTime) {
            safeUpdateElement('timelineTotalTime', `${totalTimeMs.toFixed(1)}ms`);
          }
        }

        // Count active allocations at current time
        const activeAllocs = this.timeline.data.filter(alloc => {
          const allocTime = alloc.timestamp_alloc || 0;
          const deallocTime = alloc.timestamp_dealloc || Infinity;
          const currentTime = this.timeline.data[0] ? (this.timeline.data[0].timestamp_alloc || 0) + this.timeline.currentTime : 0;

          return allocTime <= currentTime && currentTime < deallocTime;
        });

        if (this.timelineElements.activeCount) {
          safeUpdateElement('timelineActiveCount', activeAllocs.length);
        }

        // Update 3D visualization with current active allocations
        this.create3DMemoryBlocks(activeAllocs);
      }

      updateTimelineDisplay() {
        const totalTimeEl = document.getElementById('timelineTotalTime');
        const currentTimeEl = document.getElementById('timelineCurrentTime');

        const totalTimeMs = isNaN(this.timeline.totalTime) ? 0 : this.timeline.totalTime / 1000000;
        const currentTimeMs = isNaN(this.timeline.currentTime) ? 0 : this.timeline.currentTime / 1000000;

        safeUpdateElement('timelineTotalTime', `${totalTimeMs.toFixed(1)}ms`);
        safeUpdateElement('timelineCurrentTime', `${currentTimeMs.toFixed(1)}ms`);
      }

      initHeatmap() {
        const container = document.getElementById('memoryHeatmap');
        const modeButtons = document.querySelectorAll('.heatmap-mode-btn');

        modeButtons.forEach(btn => {
          btn.addEventListener('click', (e) => {
            modeButtons.forEach(b => b.classList.remove('active'));
            e.target.classList.add('active');
            this.heatmapMode = e.target.dataset.mode;
            this.updateHeatmap();
          });
        });
      }

      generateHeatmap(allocations) {
        console.log('Generating enhanced heatmap with', allocations?.length || 0, 'allocations');
        if (!allocations) return;

        const container = document.getElementById('memoryHeatmap');
        if (!container) return;

        // Clear existing heatmap
        container.innerHTML = '<div class="heatmap-legend" id="heatmapLegend"></div>';

        const width = container.clientWidth;
        const height = container.clientHeight - 40; // Account for legend
        const cellSize = 6; // Smaller cells for better resolution
        const cols = Math.floor(width / cellSize);
        const rows = Math.floor(height / cellSize);

        // Create heatmap data based on mode
        let heatmapData = [];
        let metadata = {};

        switch (this.heatmapMode) {
          case 'density':
            const densityResult = this.calculateDensityHeatmap(allocations, cols, rows);
            heatmapData = densityResult.data || densityResult;
            metadata = densityResult.metadata || {};
            break;
          case 'type':
            const typeResult = this.calculateTypeHeatmap(allocations, cols, rows);
            heatmapData = typeResult.data || typeResult;
            metadata = typeResult.metadata || {};
            break;
          case 'scope':
            const scopeResult = this.calculateScopeHeatmap(allocations, cols, rows);
            heatmapData = scopeResult.data || scopeResult;
            metadata = scopeResult.metadata || {};
            break;
          case 'activity':
            const activityResult = this.calculateActivityHeatmap(allocations, cols, rows);
            heatmapData = activityResult.data || activityResult;
            metadata = activityResult.metadata || {};
            break;
          case 'fragmentation':
            const fragResult = this.calculateFragmentationHeatmap(allocations, cols, rows);
            heatmapData = fragResult.data || [];
            metadata = fragResult.metadata || {};
            break;
          case 'lifetime':
            const lifetimeResult = this.calculateLifetimeHeatmap(allocations, cols, rows);
            heatmapData = lifetimeResult.data || [];
            metadata = lifetimeResult.metadata || {};
            break;
        }

        // Render enhanced heatmap with smooth transitions
        const fragment = document.createDocumentFragment();
        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < cols; col++) {
            const index = row * cols + col;
            const intensity = heatmapData[index] || 0;

            if (intensity > 0.01) { // Only render visible cells for performance
              const cell = document.createElement('div');
              cell.style.position = 'absolute';
              cell.style.left = `${col * cellSize}px`;
              cell.style.top = `${row * cellSize + 40}px`;
              cell.style.width = `${cellSize}px`;
              cell.style.height = `${cellSize}px`;
              cell.style.backgroundColor = this.getHeatmapColor(intensity, this.heatmapMode);
              cell.style.opacity = Math.max(0.1, intensity);
              cell.style.transition = 'all 0.3s ease';
              cell.style.borderRadius = '1px';

              // Add hover effects for interactivity
              cell.addEventListener('mouseenter', (e) => {
                e.target.style.transform = 'scale(1.2)';
                e.target.style.zIndex = '10';
                this.showHeatmapTooltip(e, intensity, metadata, row, col);
              });

              cell.addEventListener('mouseleave', (e) => {
                e.target.style.transform = 'scale(1)';
                e.target.style.zIndex = '1';
                this.hideHeatmapTooltip();
              });

              fragment.appendChild(cell);
            }
          }
        }

        container.appendChild(fragment);
        this.updateHeatmapLegend(metadata);
      }

      calculateDensityHeatmap(allocations, cols, rows) {
        const data = new Array(cols * rows).fill(0);
        const maxSize = Math.max(...allocations.map(a => a.size || 0));

        allocations.forEach((alloc, index) => {
          const x = index % cols;
          const y = Math.floor(index / cols) % rows;
          const cellIndex = y * cols + x;

          if (cellIndex < data.length) {
            data[cellIndex] += (alloc.size || 0) / maxSize;
          }
        });

        return data;
      }

      calculateTypeHeatmap(allocations, cols, rows) {
        const data = new Array(cols * rows).fill(0);
        const typeMap = new Map();

        allocations.forEach(alloc => {
          const type = alloc.type_name || 'unknown';
          typeMap.set(type, (typeMap.get(type) || 0) + 1);
        });

        const maxCount = Math.max(...typeMap.values());
        let index = 0;

        for (const [type, count] of typeMap.entries()) {
          const intensity = count / maxCount;
          const startIndex = index * Math.floor(data.length / typeMap.size);
          const endIndex = Math.min(startIndex + Math.floor(data.length / typeMap.size), data.length);

          for (let i = startIndex; i < endIndex; i++) {
            data[i] = intensity;
          }
          index++;
        }

        return data;
      }

      calculateScopeHeatmap(allocations, cols, rows) {
        const data = new Array(cols * rows).fill(0);
        const scopeMap = new Map();

        allocations.forEach(alloc => {
          const scope = alloc.scope || 'global';
          scopeMap.set(scope, (scopeMap.get(scope) || 0) + 1);
        });

        const maxCount = Math.max(...scopeMap.values());
        let index = 0;

        for (const [scope, count] of scopeMap.entries()) {
          const intensity = count / maxCount;
          const startIndex = index * Math.floor(data.length / scopeMap.size);
          const endIndex = Math.min(startIndex + Math.floor(data.length / scopeMap.size), data.length);

          for (let i = startIndex; i < endIndex; i++) {
            data[i] = intensity;
          }
          index++;
        }

        return data;
      }

      calculateActivityHeatmap(allocations, cols, rows) {
        const data = new Array(cols * rows).fill(0);

        if (allocations.length === 0) return { data, metadata: {} };

        const minTime = Math.min(...allocations.map(a => a.timestamp_alloc || 0));
        const maxTime = Math.max(...allocations.map(a => a.timestamp_alloc || 0));
        const timeRange = maxTime - minTime || 1;

        allocations.forEach(alloc => {
          const timeRatio = ((alloc.timestamp_alloc || 0) - minTime) / timeRange;
          const cellIndex = Math.floor(timeRatio * data.length);

          if (cellIndex < data.length) {
            data[cellIndex] += 0.1;
          }
        });

        const maxActivity = Math.max(...data);
        const normalizedData = maxActivity > 0 ? data.map(d => d / maxActivity) : data;

        return {
          data: normalizedData,
          metadata: {
            maxActivity,
            totalAllocations: allocations.length,
            timeRange: timeRange / 1000000 // Convert to ms
          }
        };
      }

      calculateFragmentationHeatmap(allocations, cols, rows) {
        const data = new Array(cols * rows).fill(0);

        // Sort allocations by memory address
        const sortedAllocs = allocations
          .filter(a => a.ptr && a.size)
          .map(a => ({
            address: parseInt(a.ptr.replace('0x', ''), 16),
            size: a.size,
            ...a
          }))
          .sort((a, b) => a.address - b.address);

        // Calculate fragmentation score for each memory region
        for (let i = 0; i < sortedAllocs.length - 1; i++) {
          const current = sortedAllocs[i];
          const next = sortedAllocs[i + 1];
          const gap = next.address - (current.address + current.size);

          if (gap > 0) {
            // Map to heatmap coordinates
            const normalizedAddr = (current.address % (cols * rows * 1000)) / (cols * rows * 1000);
            const row = Math.floor(normalizedAddr * rows);
            const col = Math.floor((i / sortedAllocs.length) * cols);
            const cellIndex = Math.min(row * cols + col, data.length - 1);

            // Higher gap = higher fragmentation
            data[cellIndex] += Math.min(gap / 1000, 1); // Normalize gap size
          }
        }

        const maxFrag = Math.max(...data);
        const normalizedData = maxFrag > 0 ? data.map(d => d / maxFrag) : data;

        return {
          data: normalizedData,
          metadata: {
            maxFragmentation: maxFrag,
            totalGaps: data.filter(d => d > 0).length,
            avgFragmentation: data.reduce((a, b) => a + b, 0) / data.length
          }
        };
      }

      calculateLifetimeHeatmap(allocations, cols, rows) {
        const data = new Array(cols * rows).fill(0);

        allocations.forEach((alloc, index) => {
          const allocTime = alloc.timestamp_alloc || 0;
          const deallocTime = alloc.timestamp_dealloc || Date.now() * 1000000;
          const lifetime = deallocTime - allocTime;

          // Map lifetime to heatmap position
          const row = Math.floor((index / allocations.length) * rows);
          const col = Math.floor((lifetime / 1000000000) * cols) % cols; // Convert to seconds
          const cellIndex = Math.min(row * cols + col, data.length - 1);

          data[cellIndex] += 1;
        });

        const maxLifetime = Math.max(...data);
        const normalizedData = maxLifetime > 0 ? data.map(d => d / maxLifetime) : data;

        return {
          data: normalizedData,
          metadata: {
            maxLifetime,
            avgLifetime: data.reduce((a, b) => a + b, 0) / data.length,
            activeAllocations: allocations.filter(a => !a.timestamp_dealloc).length
          }
        };
      }

      getHeatmapColor(intensity, mode = 'density') {
        const scaledIntensity = Math.min(Math.max(intensity, 0), 1);

        // Different color schemes for different modes
        const colorSchemes = {
          density: [
            [59, 130, 246],   // Blue
            [245, 158, 11],   // Orange
            [220, 38, 38]     // Red
          ],
          type: [
            [34, 197, 94],    // Green
            [168, 85, 247],   // Purple
            [239, 68, 68]     // Red
          ],
          scope: [
            [14, 165, 233],   // Sky blue
            [251, 191, 36],   // Amber
            [239, 68, 68]     // Red
          ],
          activity: [
            [99, 102, 241],   // Indigo
            [236, 72, 153],   // Pink
            [220, 38, 38]     // Red
          ],
          fragmentation: [
            [34, 197, 94],    // Green (low fragmentation)
            [251, 191, 36],   // Amber (medium)
            [239, 68, 68]     // Red (high fragmentation)
          ],
          lifetime: [
            [147, 51, 234],   // Purple (short-lived)
            [59, 130, 246],   // Blue (medium)
            [34, 197, 94]     // Green (long-lived)
          ]
        };

        const colors = colorSchemes[mode] || colorSchemes.density;
        const colorIndex = scaledIntensity * (colors.length - 1);
        const lowerIndex = Math.floor(colorIndex);
        const upperIndex = Math.ceil(colorIndex);
        const ratio = colorIndex - lowerIndex;

        if (lowerIndex === upperIndex) {
          const [r, g, b] = colors[lowerIndex];
          return `rgb(${r}, ${g}, ${b})`;
        }

        const [r1, g1, b1] = colors[lowerIndex];
        const [r2, g2, b2] = colors[upperIndex];

        const r = Math.round(r1 + (r2 - r1) * ratio);
        const g = Math.round(g1 + (g2 - g1) * ratio);
        const b = Math.round(b1 + (b2 - b1) * ratio);

        return `rgb(${r}, ${g}, ${b})`;
      }

      showHeatmapTooltip(event, intensity, metadata, row, col) {
        if (!this.tooltip) {
          this.tooltip = document.createElement('div');
          this.tooltip.style.cssText = `
            position: absolute;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            pointer-events: none;
            z-index: 1000;
            max-width: 200px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
          `;
          document.body.appendChild(this.tooltip);
        }

        const modeDescriptions = {
          density: 'Memory usage density',
          type: 'Type distribution',
          scope: 'Scope activity level',
          activity: 'Allocation activity',
          fragmentation: 'Memory fragmentation',
          lifetime: 'Allocation lifetime'
        };

        this.tooltip.innerHTML = `
          <div><strong>${modeDescriptions[this.heatmapMode] || 'Intensity'}</strong></div>
          <div>Value: ${(intensity * 100).toFixed(1)}%</div>
          <div>Position: (${col}, ${row})</div>
          ${metadata.maxActivity ? `<div>Max Activity: ${metadata.maxActivity}</div>` : ''}
          ${metadata.totalGaps ? `<div>Total Gaps: ${metadata.totalGaps}</div>` : ''}
          ${metadata.activeAllocations ? `<div>Active: ${metadata.activeAllocations}</div>` : ''}
        `;

        this.tooltip.style.left = `${event.pageX + 10}px`;
        this.tooltip.style.top = `${event.pageY - 10}px`;
        this.tooltip.style.display = 'block';
      }

      hideHeatmapTooltip() {
        if (this.tooltip) {
          this.tooltip.style.display = 'none';
        }
      }

      updateHeatmapLegend(metadata = {}) {
        const legend = document.getElementById('heatmapLegend');
        if (!legend) return;

        const modeLabels = {
          density: 'Memory Density',
          type: 'Type Distribution',
          scope: 'Scope Activity',
          activity: 'Allocation Activity',
          fragmentation: 'Memory Fragmentation',
          lifetime: 'Allocation Lifetime'
        };

        const modeDescriptions = {
          density: 'Shows memory usage concentration',
          type: 'Shows distribution of data types',
          scope: 'Shows activity by scope',
          activity: 'Shows allocation frequency over time',
          fragmentation: 'Shows memory fragmentation levels',
          lifetime: 'Shows allocation lifetime patterns'
        };

        const currentMode = this.heatmapMode;
        const lowColor = this.getHeatmapColor(0.2, currentMode);
        const medColor = this.getHeatmapColor(0.5, currentMode);
        const highColor = this.getHeatmapColor(0.8, currentMode);

        let metadataHtml = '';
        if (metadata.maxActivity) {
          metadataHtml += `<div style="font-size: 10px; color: rgba(255,255,255,0.8);">Max Activity: ${metadata.maxActivity}</div>`;
        }
        if (metadata.totalGaps) {
          metadataHtml += `<div style="font-size: 10px; color: rgba(255,255,255,0.8);">Gaps: ${metadata.totalGaps}</div>`;
        }
        if (metadata.activeAllocations) {
          metadataHtml += `<div style="font-size: 10px; color: rgba(255,255,255,0.8);">Active: ${metadata.activeAllocations}</div>`;
        }

        legend.innerHTML = `
          <div style="font-weight: 600; margin-bottom: 2px;">${modeLabels[currentMode]}</div>
          <div style="font-size: 10px; color: rgba(255,255,255,0.7); margin-bottom: 4px;">${modeDescriptions[currentMode]}</div>
          <div style="display: flex; align-items: center; gap: 4px; margin-bottom: 4px;">
            <div style="width: 12px; height: 12px; background: ${lowColor}; border-radius: 2px;"></div>
            <span style="font-size: 11px;">Low</span>
            <div style="width: 12px; height: 12px; background: ${medColor}; border-radius: 2px;"></div>
            <span style="font-size: 11px;">Med</span>
            <div style="width: 12px; height: 12px; background: ${highColor}; border-radius: 2px;"></div>
            <span style="font-size: 11px;">High</span>
          </div>
          ${metadataHtml}
        `;
      }

      updateHeatmap() {
        if (window.analysisData && window.analysisData.memory_analysis && window.analysisData.memory_analysis.allocations) {
          this.generateHeatmap(window.analysisData.memory_analysis.allocations);
        }
      }

      bindEvents() {
        console.log('🔧 Binding 3D visualization events...');

        // Add visual feedback for button interactions
        this.addButtonFeedback();

        // Wait for DOM to be fully ready
        setTimeout(() => {
          const toggle3DBtn = document.getElementById('toggle3DView');
          const reset3DBtn = document.getElementById('reset3DView');
          const autoRotateBtn = document.getElementById('autoRotate3D');
          const focusLargestBtn = document.getElementById('focusLargest');

          console.log('🔍 Found buttons:', {
            toggle3DBtn: !!toggle3DBtn,
            reset3DBtn: !!reset3DBtn,
            autoRotateBtn: !!autoRotateBtn,
            focusLargestBtn: !!focusLargestBtn
          });

          if (toggle3DBtn) {
            // Remove any existing event listeners
            toggle3DBtn.replaceWith(toggle3DBtn.cloneNode(true));
            const newToggle3DBtn = document.getElementById('toggle3DView');
            
            newToggle3DBtn.addEventListener('click', (e) => {
              e.preventDefault();
              console.log('🎯 Toggle 3D view clicked');
              const container = document.getElementById('memory3DContainer');
              if (container) {
                const isHidden = container.style.display === 'none';
                if (isHidden) {
                  // Show 3D view
                  container.style.display = 'block';
                  newToggle3DBtn.innerHTML = '<i class="fa fa-eye-slash"></i><span>Hide 3D</span>';
                  newToggle3DBtn.style.background = 'var(--primary-red)';
                  console.log('✅ Showing 3D view');
                  
                  // Reinitialize 3D scene if needed
                  if (!this.scene) {
                    console.log('🔄 Reinitializing 3D scene...');
                    this.init3DVisualization();
                  }
                  
                  // Update 3D visualization with current data
                  if (window.analysisData && window.analysisData.memory_analysis) {
                    this.create3DMemoryBlocks(window.analysisData.memory_analysis.allocations || []);
                  }
                } else {
                  // Hide 3D view
                  container.style.display = 'none';
                  newToggle3DBtn.innerHTML = '<i class="fa fa-eye"></i><span>Show 3D</span>';
                  newToggle3DBtn.style.background = 'var(--primary-green)';
                  console.log('✅ Hiding 3D view');
                }
              } else {
                console.error('❌ 3D container not found');
              }
            });
            console.log('✅ Toggle 3D button event bound');
          } else {
            console.error('❌ toggle3DView button not found');
          }

          if (reset3DBtn) {
            // Remove any existing event listeners
            reset3DBtn.replaceWith(reset3DBtn.cloneNode(true));
            const newReset3DBtn = document.getElementById('reset3DView');
            
            newReset3DBtn.addEventListener('click', (e) => {
              e.preventDefault();
              console.log('🎯 Reset 3D view clicked');
              this.reset3DView();
            });
            console.log('✅ Reset 3D button event bound');
          } else {
            console.error('❌ reset3DView button not found');
          }

          if (autoRotateBtn) {
            // Remove any existing event listeners
            autoRotateBtn.replaceWith(autoRotateBtn.cloneNode(true));
            const newAutoRotateBtn = document.getElementById('autoRotate3D');
            
            newAutoRotateBtn.addEventListener('click', (e) => {
              e.preventDefault();
              console.log('🎯 Auto rotate clicked');
              this.toggleAutoRotate();
            });
            console.log('✅ Auto rotate button event bound');
          } else {
            console.error('❌ autoRotate3D button not found');
          }

          if (focusLargestBtn) {
            // Remove any existing event listeners
            focusLargestBtn.replaceWith(focusLargestBtn.cloneNode(true));
            const newFocusLargestBtn = document.getElementById('focusLargest');
            
            newFocusLargestBtn.addEventListener('click', (e) => {
              e.preventDefault();
              console.log('🎯 Focus largest clicked');
              this.focusOnLargestBlock();
            });
            console.log('✅ Focus largest button event bound');
          } else {
            console.error('❌ focusLargest button not found');
          }
        }, 500); // Wait 500ms for DOM to be ready

        // Handle window resize
        window.addEventListener('resize', () => {
          if (this.camera && this.renderer) {
            const container = document.getElementById('memory3DContainer');
            if (container) {
              this.camera.aspect = container.clientWidth / container.clientHeight;
              this.camera.updateProjectionMatrix();
              this.renderer.setSize(container.clientWidth, container.clientHeight);
            }
          }
        });
      }

      addButtonFeedback() {
        // Add hover and click effects to all 3D control buttons
        const buttonIds = ['toggle3DView', 'reset3DView', 'autoRotate3D', 'focusLargest'];
        
        buttonIds.forEach(id => {
          const btn = document.getElementById(id);
          if (btn) {
            // Add hover effect
            btn.addEventListener('mouseenter', () => {
              btn.style.transform = 'scale(1.05)';
              btn.style.transition = 'all 0.2s ease';
            });
            
            btn.addEventListener('mouseleave', () => {
              btn.style.transform = 'scale(1)';
            });
            
            // Add click effect
            btn.addEventListener('mousedown', () => {
              btn.style.transform = 'scale(0.95)';
            });
            
            btn.addEventListener('mouseup', () => {
              btn.style.transform = 'scale(1.05)';
            });
            
            console.log(`✅ Added feedback effects to ${id}`);
          }
        });
      }

      reset3DView() {
        console.log('🔄 Resetting 3D view...');
        
        // Show visual feedback
        const resetBtn = document.getElementById('reset3DView');
        if (resetBtn) {
          resetBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i><span>Resetting...</span>';
          resetBtn.style.background = 'var(--primary-yellow)';
        }
        
        if (this.camera && this.controls) {
          // Reset camera position
          this.camera.position.set(15, 10, 15);
          this.camera.lookAt(0, 0, 0);
          
          // Reset controls
          this.controls.reset();
          
          // Update camera
          this.camera.updateProjectionMatrix();
          
          // Restore button
          setTimeout(() => {
            if (resetBtn) {
              resetBtn.innerHTML = '<i class="fa fa-refresh"></i><span>Reset</span>';
              resetBtn.style.background = 'var(--primary-orange)';
            }
          }, 500);
          
          console.log('✅ 3D view reset complete');
        } else {
          console.error('❌ Camera or controls not available for reset');
          if (resetBtn) {
            resetBtn.innerHTML = '<i class="fa fa-exclamation"></i><span>Error</span>';
            resetBtn.style.background = 'var(--primary-red)';
            setTimeout(() => {
              resetBtn.innerHTML = '<i class="fa fa-refresh"></i><span>Reset</span>';
              resetBtn.style.background = 'var(--primary-orange)';
            }, 1000);
          }
        }
      
      // Animation function
      const animateReset = () => {
        // Animation logic here if needed
      };
      animateReset();
    }

      toggleAutoRotate() {
        console.log('🔄 Toggling auto rotate...');
        if (this.controls) {
          this.controls.autoRotate = !this.controls.autoRotate;
          this.controls.autoRotateSpeed = 2.0; // Set rotation speed
          
          const btn = document.getElementById('autoRotate3D');
          if (btn) {
            if (this.controls.autoRotate) {
              btn.innerHTML = '<i class="fa fa-pause"></i><span>Stop Rotate</span>';
              btn.style.background = 'var(--primary-red)';
              console.log('✅ Auto rotate enabled');
            } else {
              btn.innerHTML = '<i class="fa fa-rotate-right"></i><span>Auto Rotate</span>';
              btn.style.background = 'var(--primary-blue)';
              console.log('✅ Auto rotate disabled');
            }
          }
        } else {
          console.error('❌ Controls not available for auto rotate');
          const btn = document.getElementById('autoRotate3D');
          if (btn) {
            btn.innerHTML = '<i class="fa fa-exclamation"></i><span>Error</span>';
            btn.style.background = 'var(--primary-red)';
            setTimeout(() => {
              btn.innerHTML = '<i class="fa fa-rotate-right"></i><span>Auto Rotate</span>';
              btn.style.background = 'var(--primary-blue)';
            }, 1000);
          }
        }
      }

      focusOnLargestBlock() {
        console.log('🎯 Focusing on largest block...');
        
        // Show visual feedback
        const focusBtn = document.getElementById('focusLargest');
        if (focusBtn) {
          focusBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i><span>Focusing...</span>';
          focusBtn.style.background = 'var(--primary-yellow)';
        }
        
        if (!this.memoryBlocks || this.memoryBlocks.length === 0) {
          console.warn('❌ No memory blocks to focus on');
          if (focusBtn) {
            focusBtn.innerHTML = '<i class="fa fa-exclamation"></i><span>No Blocks</span>';
            focusBtn.style.background = 'var(--primary-red)';
            setTimeout(() => {
              focusBtn.innerHTML = '<i class="fa fa-search-plus"></i><span>Focus Largest</span>';
              focusBtn.style.background = 'var(--primary-red)';
            }, 1500);
          }
          return;
        }

        // Find the largest block
        let largestBlock = null;
        let largestSize = 0;

        this.memoryBlocks.forEach(block => {
          const size = block.userData?.size || 0;
          if (size > largestSize) {
            largestSize = size;
            largestBlock = block;
          }
        });

        if (largestBlock && this.camera && this.controls) {
          // Calculate optimal camera position
          const blockPos = largestBlock.position;
          const distance = Math.max(5, Math.sqrt(largestSize) / 10);
          
          // Position camera at an angle for better view
          const targetPosition = new THREE.Vector3(
            blockPos.x + distance,
            blockPos.y + distance * 0.7,
            blockPos.z + distance
          );

          // Smooth camera transition
          const startPos = this.camera.position.clone();
          let progress = 0;
          
          const animateFocus = () => {
            progress += 0.05;
            if (progress <= 1) {
              this.camera.position.lerpVectors(startPos, targetPosition, progress);
              this.camera.lookAt(blockPos);
              requestAnimationFrame(animateFocus);
            } else {
              // Animation complete
              console.log(`✅ Focused on largest block: ${largestBlock.userData?.var_name || 'unknown'} (${this.formatBytes(largestSize)})`);
              this.update3DInfo(this.memoryBlocks.length);
              
              // Restore button
              if (focusBtn) {
                focusBtn.innerHTML = '<i class="fa fa-search-plus"></i><span>Focus Largest</span>';
                focusBtn.style.background = 'var(--primary-red)';
              }
            }
          };
          animateFocus();
        } else {
          console.error('❌ Camera or controls not available for focus');
          if (focusBtn) {
            focusBtn.innerHTML = '<i class="fa fa-exclamation"></i><span>Error</span>';
            focusBtn.style.background = 'var(--primary-red)';
            setTimeout(() => {
              focusBtn.innerHTML = '<i class="fa fa-search-plus"></i><span>Focus Largest</span>';
              focusBtn.style.background = 'var(--primary-red)';
            }, 1000);
          }
        }
      }

      // Main initialization method
      initializeWithData(analysisData) {
        console.log('initializeWithData called with:', analysisData);

        let allocations = null;

        // Try different data structure paths
        if (analysisData && analysisData.memory_analysis && analysisData.memory_analysis.allocations) {
          allocations = analysisData.memory_analysis.allocations;
          console.log('Found allocations in memory_analysis:', allocations.length);
        } else if (analysisData && analysisData.allocations) {
          allocations = analysisData.allocations;
          console.log('Found allocations directly:', allocations.length);
        } else {
          console.warn('No allocation data found in analysisData');
          console.log('Available keys:', Object.keys(analysisData || {}));
          return;
        }

        if (!allocations || allocations.length === 0) {
          console.warn('No allocations to visualize');
          return;
        }

        console.log(`Initializing enhanced visualization with ${allocations.length} allocations`);

        // Initialize 3D visualization
        this.create3DMemoryBlocks(allocations);

        // Initialize timeline
        this.prepareTimelineData(allocations);

        // Initialize heatmap
        this.generateHeatmap(allocations);

        // Update memory distribution visualization
        this.updateMemoryDistribution(allocations);

        // Initialize memory fragmentation visualization
        this.initializeMemoryFragmentation(allocations);

        console.log('Enhanced memory visualization initialized successfully');
      }

      initializeMemoryFragmentation(allocations) {
        console.log('Initializing memory fragmentation with', allocations?.length || 0, 'allocations');
        const container = document.getElementById('memoryFragmentation');
        if (!container) {
          console.error('Memory fragmentation container not found');
          return;
        }
        if (!allocations || allocations.length === 0) {
          console.warn('No allocations data for fragmentation analysis');
          container.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 40px;">No allocation data available for fragmentation analysis</div>';
          return;
        }

        console.log('Processing', allocations.length, 'allocations for fragmentation analysis');

        // Calculate fragmentation metrics
        const sortedAllocs = [...allocations].sort((a, b) => {
          const addrA = parseInt(a.ptr || '0x0', 16);
          const addrB = parseInt(b.ptr || '0x0', 16);
          return addrA - addrB;
        });

        const totalMemory = allocations.reduce((sum, alloc) => sum + (alloc.size || 0), 0);
        const addressRanges = [];
        let gaps = 0;
        let totalGapSize = 0;

        // Calculate memory gaps
        for (let i = 0; i < sortedAllocs.length - 1; i++) {
          const currentAddr = parseInt(sortedAllocs[i].ptr || '0x0', 16);
          const currentSize = sortedAllocs[i].size || 0;
          const nextAddr = parseInt(sortedAllocs[i + 1].ptr || '0x0', 16);

          const currentEnd = currentAddr + currentSize;
          const gap = nextAddr - currentEnd;

          if (gap > 0) {
            gaps++;
            totalGapSize += gap;
            addressRanges.push({
              type: 'gap',
              start: currentEnd,
              size: gap,
              index: i
            });
          }

          addressRanges.push({
            type: 'allocation',
            start: currentAddr,
            size: currentSize,
            allocation: sortedAllocs[i],
            index: i
          });
        }

        // Calculate fragmentation percentage
        const fragmentation = totalMemory > 0 ? (totalGapSize / (totalMemory + totalGapSize)) * 100 : 0;
        const efficiency = Math.max(100 - fragmentation, 0);

        console.log('Fragmentation metrics:', { gaps, totalGapSize, fragmentation, efficiency });

        // Create visualization
        container.innerHTML = `
          <div style="margin-bottom: 16px;">
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;">
              <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
                <div style="font-size: 1.4rem; font-weight: 700; color: var(--primary-red);">${fragmentation.toFixed(1)}%</div>
                <div style="font-size: 0.7rem; color: var(--text-secondary);">Fragmentation</div>
              </div>
              <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
                <div style="font-size: 1.4rem; font-weight: 700; color: var(--primary-orange);">${gaps}</div>
                <div style="font-size: 0.7rem; color: var(--text-secondary);">Memory Gaps</div>
              </div>
              <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
                <div style="font-size: 1.4rem; font-weight: 700; color: var(--primary-green);">${efficiency.toFixed(1)}%</div>
                <div style="font-size: 0.7rem; color: var(--text-secondary);">Efficiency</div>
              </div>
            </div>
            
            <div style="margin-bottom: 12px;">
              <h4 style="margin: 0 0 8px 0; font-size: 0.9rem; color: var(--text-primary);">Memory Layout Visualization</h4>
              <div id="fragmentationChart" style="height: 120px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 6px; position: relative; overflow: hidden;">
                <!-- Memory blocks will be inserted here -->
              </div>
            </div>
            
            <div style="font-size: 0.8rem; color: var(--text-secondary); text-align: center;">
              <div style="display: flex; justify-content: center; gap: 16px; margin-top: 8px;">
                <div style="display: flex; align-items: center; gap: 4px;">
                  <div style="width: 12px; height: 12px; background: var(--primary-blue); border-radius: 2px;"></div>
                  <span>Allocated</span>
                </div>
                <div style="display: flex; align-items: center; gap: 4px;">
                  <div style="width: 12px; height: 12px; background: var(--primary-red); border-radius: 2px;"></div>
                  <span>Gaps</span>
                </div>
                <div style="display: flex; align-items: center; gap: 4px;">
                  <div style="width: 12px; height: 12px; background: var(--primary-orange); border-radius: 2px;"></div>
                  <span>Leaked</span>
                </div>
              </div>
            </div>
          </div>
        `;

        // Draw memory layout visualization
        this.drawFragmentationChart(addressRanges, totalMemory + totalGapSize);
      }

      drawFragmentationChart(addressRanges, totalSize) {
        const chartContainer = document.getElementById('fragmentationChart');
        if (!chartContainer || addressRanges.length === 0) return;

        const width = chartContainer.clientWidth;
        const height = chartContainer.clientHeight;

        let currentX = 0;

        addressRanges.forEach((range, index) => {
          const blockWidth = Math.max((range.size / totalSize) * width, 1);

          const block = document.createElement('div');
          block.style.position = 'absolute';
          block.style.left = `${currentX}px`;
          block.style.top = '10px';
          block.style.width = `${blockWidth}px`;
          block.style.height = `${height - 20}px`;
          block.style.borderRadius = '2px';
          block.style.cursor = 'pointer';
          block.style.transition = 'all 0.2s ease';

          if (range.type === 'gap') {
            block.style.background = 'linear-gradient(45deg, #dc2626, #ef4444)';
            block.style.border = '1px solid #b91c1c';
            block.title = `Memory Gap: ${this.formatBytes(range.size)}`;
          } else if (range.allocation && range.allocation.is_leaked) {
            block.style.background = 'linear-gradient(45deg, #ea580c, #f97316)';
            block.style.border = '1px solid #c2410c';
            block.title = `Leaked: ${range.allocation.var_name} (${this.formatBytes(range.size)})`;
          } else {
            block.style.background = 'linear-gradient(45deg, #2563eb, #3b82f6)';
            block.style.border = '1px solid #1d4ed8';
            block.title = range.allocation ?
              `${range.allocation.var_name}: ${range.allocation.type_name} (${this.formatBytes(range.size)})` :
              `Allocation: ${this.formatBytes(range.size)}`;
          }

          // Add hover effects
          block.addEventListener('mouseenter', () => {
            block.style.transform = 'scaleY(1.2)';
            block.style.zIndex = '10';
          });

          block.addEventListener('mouseleave', () => {
            block.style.transform = 'scaleY(1)';
            block.style.zIndex = '1';
          });

          chartContainer.appendChild(block);
          currentX += blockWidth;
        });
      }

      updateMemoryDistribution(allocations) {
        const container = document.getElementById('memoryDistributionViz');
        if (!container || !allocations) return;

        container.innerHTML = '';

        const containerWidth = container.clientWidth;
        const containerHeight = container.clientHeight;
        const totalMemory = allocations.reduce((sum, alloc) => sum + (alloc.size || 0), 0);

        // 获取当前缩放比例
        const scaleSlider = document.getElementById('memoryDistScale');
        const scale = scaleSlider ? parseFloat(scaleSlider.value) / 100 : 1;
        
        // 计算实际可用宽度（考虑缩放和边距）
        const padding = 20;
        const availableWidth = (containerWidth - padding * 2) * scale;
        const availableHeight = containerHeight - padding * 2;

        // 创建一个可滚动的内容容器
        const contentContainer = document.createElement('div');
        contentContainer.style.cssText = `
          position: absolute;
          top: ${padding}px;
          left: ${padding}px;
          width: ${Math.max(availableWidth, containerWidth - padding * 2)}px;
          height: ${availableHeight}px;
          overflow-x: auto;
          overflow-y: hidden;
        `;

        // 创建内存块容器
        const blocksContainer = document.createElement('div');
        blocksContainer.style.cssText = `
          position: relative;
          width: ${availableWidth}px;
          height: 100%;
          min-width: ${containerWidth - padding * 2}px;
        `;

        let currentX = 0;
        let fragmentation = 0;
        let efficiency = 0;

        // Sort by address for fragmentation calculation
        const sortedAllocs = [...allocations].sort((a, b) => {
          const addrA = parseInt(a.ptr || '0x0', 16);
          const addrB = parseInt(b.ptr || '0x0', 16);
          return addrA - addrB;
        });

        // 计算每个块的最小宽度和总宽度需求
        const minBlockWidth = 3; // 最小块宽度
        const blockGap = 1;
        let totalRequiredWidth = 0;

        sortedAllocs.forEach((alloc) => {
          const proportionalWidth = (alloc.size || 0) / totalMemory * availableWidth;
          const blockWidth = Math.max(proportionalWidth, minBlockWidth);
          totalRequiredWidth += blockWidth + blockGap;
        });

        // 如果总宽度超过可用宽度，调整容器宽度
        const finalContainerWidth = Math.max(totalRequiredWidth, availableWidth);
        blocksContainer.style.width = `${finalContainerWidth}px`;

        sortedAllocs.forEach((alloc, index) => {
          const proportionalWidth = (alloc.size || 0) / totalMemory * availableWidth;
          const blockWidth = Math.max(proportionalWidth, minBlockWidth);
          const blockHeight = availableHeight * 0.7;

          const block = document.createElement('div');
          block.className = 'memory-block';
          block.style.cssText = `
            position: absolute;
            left: ${currentX}px;
            top: ${(availableHeight - blockHeight) / 2}px;
            width: ${blockWidth}px;
            height: ${blockHeight}px;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.3);
          `;

          // Determine allocation type and style
          if (alloc.is_leaked) {
            block.classList.add('leaked');
            block.style.background = 'linear-gradient(45deg, #dc2626, #ef4444)';
            block.style.boxShadow = '0 0 8px rgba(239, 68, 68, 0.5)';
          } else if (alloc.type_name && alloc.type_name.includes('Box')) {
            block.classList.add('heap');
            block.style.background = 'linear-gradient(45deg, #ff6b35, #f7931e)';
          } else {
            block.classList.add('stack');
            block.style.background = 'linear-gradient(45deg, #4dabf7, #339af0)';
          }

          // Enhanced hover effects
          block.addEventListener('mouseenter', (e) => {
            block.style.transform = 'scaleY(1.2) translateY(-2px)';
            block.style.zIndex = '10';
            block.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)';
            this.showTooltip(e, alloc);
          });

          block.addEventListener('mouseleave', () => {
            block.style.transform = 'scaleY(1) translateY(0)';
            block.style.zIndex = '1';
            block.style.boxShadow = 'none';
            this.hideTooltip();
          });

          // 添加点击事件显示详细信息
          block.addEventListener('click', () => {
            this.showBlockDetails(alloc);
          });

          blocksContainer.appendChild(block);
          currentX += blockWidth + blockGap;
        });

        contentContainer.appendChild(blocksContainer);
        container.appendChild(contentContainer);

        // Calculate fragmentation and efficiency
        fragmentation = totalRequiredWidth > availableWidth ? 
          ((totalRequiredWidth - availableWidth) / totalRequiredWidth * 100) : 0;
        efficiency = Math.max(100 - fragmentation, 0);

        // Update metrics
        const fragEl = document.getElementById('memoryFragmentation');
        const effEl = document.getElementById('memoryEfficiency');

        // Use global safe update function (no need to redefine)
        
        safeUpdateElement('memoryFragmentation', `${fragmentation.toFixed(1)}%`);
        safeUpdateElement('memoryEfficiency', `${efficiency.toFixed(1)}%`);

        // Setup dynamic controls
        this.setupMemoryDistributionControls(allocations);

        // Update other metrics with real data
        this.updateEnhancedMetrics(allocations);
      }

      setupMemoryDistributionControls(allocations) {
        const scaleSlider = document.getElementById('memoryDistScale');
        const scaleValue = document.getElementById('memoryDistScaleValue');
        const fitBtn = document.getElementById('memoryDistFit');
        const resetBtn = document.getElementById('memoryDistReset');

        if (scaleSlider && scaleValue) {
          scaleSlider.addEventListener('input', (e) => {
            const value = e.target.value;
            safeUpdateElement('memoryDistScaleValue', `${value}%`);
            this.updateMemoryDistribution(allocations);
          });
        }

        if (fitBtn) {
          fitBtn.addEventListener('click', () => {
            // 自动计算最佳缩放比例
            const container = document.getElementById('memoryDistributionViz');
            if (container && allocations) {
              const containerWidth = container.clientWidth - 40; // 减去padding
              const totalMemory = allocations.reduce((sum, alloc) => sum + (alloc.size || 0), 0);
              const minBlockWidth = 3;
              const blockGap = 1;
              
              let requiredWidth = 0;
              allocations.forEach(() => {
                requiredWidth += minBlockWidth + blockGap;
              });

              const optimalScale = Math.min(200, Math.max(50, (containerWidth / requiredWidth) * 100));
              
              if (scaleSlider) {
                scaleSlider.value = optimalScale;
                safeUpdateElement('memoryDistScaleValue', `${Math.round(optimalScale)}%`);
                this.updateMemoryDistribution(allocations);
              }
            }
          });
        }

        if (resetBtn) {
          resetBtn.addEventListener('click', () => {
            if (scaleSlider) {
              scaleSlider.value = 100;
              safeUpdateElement('memoryDistScaleValue', '100%');
              this.updateMemoryDistribution(allocations);
            }
          });
        }
      }

      showBlockDetails(alloc) {
        // 创建详细信息弹窗
        const modal = document.createElement('div');
        modal.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.5);
          z-index: 1000;
          display: flex;
          align-items: center;
          justify-content: center;
        `;

        const content = document.createElement('div');
        content.style.cssText = `
          background: var(--bg-primary);
          border-radius: 12px;
          padding: 24px;
          max-width: 400px;
          width: 90%;
          box-shadow: 0 20px 40px rgba(0,0,0,0.3);
          color: var(--text-primary);
        `;

        content.innerHTML = `
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
            <h3 style="margin: 0; color: var(--primary-blue);">Memory Block Details</h3>
            <button id="closeModal" style="background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-secondary);">&times;</button>
          </div>
          <div style="line-height: 1.6;">
            <div><strong>Variable:</strong> ${alloc.var_name || 'Unknown'}</div>
            <div><strong>Type:</strong> ${alloc.type_name || 'Unknown'}</div>
            <div><strong>Size:</strong> ${this.formatBytes(alloc.size || 0)}</div>
            <div><strong>Address:</strong> ${alloc.ptr || 'N/A'}</div>
            <div><strong>Status:</strong> ${alloc.is_leaked ? '🚨 Leaked' : '✅ Active'}</div>
            <div><strong>Lifetime:</strong> ${alloc.lifetime_ms ? alloc.lifetime_ms.toFixed(2) + 'ms' : 'N/A'}</div>
            <div><strong>Scope:</strong> ${alloc.scope_name || 'Unknown'}</div>
          </div>
        `;

        modal.appendChild(content);
        document.body.appendChild(modal);

        // 关闭事件
        const closeModal = () => {
          document.body.removeChild(modal);
        };

        modal.addEventListener('click', (e) => {
          if (e.target === modal) closeModal();
        });

        content.querySelector('#closeModal').addEventListener('click', closeModal);
      }

      updateEnhancedMetrics(allocations) {
        if (!allocations || allocations.length === 0) return;

        // Calculate real metrics from data
        const totalAllocs = allocations.length;
        const totalMemory = allocations.reduce((sum, alloc) => sum + (alloc.size || 0), 0);
        const avgLifetime = allocations.reduce((sum, alloc) => sum + (alloc.lifetime_ms || 0), 0) / totalAllocs;
        const heapAllocs = allocations.filter(a => a.type_name && (a.type_name.includes('Box') || a.type_name.includes('Vec'))).length;
        const stackAllocs = totalAllocs - heapAllocs;
        const heapStackRatio = stackAllocs > 0 ? (heapAllocs / stackAllocs).toFixed(2) : heapAllocs.toString();

        // Update KPI cards
        const totalAllocsEl = document.getElementById('total-allocations');
        const activeVarsEl = document.getElementById('active-variables');
        const totalMemoryEl = document.getElementById('total-memory');
        const avgLifetimeEl = document.getElementById('avg-lifetime');
        const peakMemoryEl = document.getElementById('peak-memory');
        const allocRateEl = document.getElementById('allocation-rate');
        const fragmentationEl = document.getElementById('fragmentation');

        safeUpdateElement('total-allocs', totalAllocs);
        safeUpdateElement('active-vars', allocations.filter(a => !a.is_leaked).length);
        safeUpdateElement('total-memory', this.formatBytes(totalMemory));
        safeUpdateElement('avg-lifetime', `${avgLifetime.toFixed(2)}ms`);
        safeUpdateElement('peak-memory', this.formatBytes(Math.max(...allocations.map(a => a.size || 0))));

        // Calculate allocation rate (allocations per microsecond)
        const timeSpan = Math.max(...allocations.map(a => a.timestamp_alloc || 0)) - Math.min(...allocations.map(a => a.timestamp_alloc || 0));
        const allocRate = timeSpan > 0 ? ((totalAllocs / (timeSpan / 1000000)).toFixed(2) + '/sec') : '0/sec';
        safeUpdateElement('allocation-rate', allocRate);

        // Update enhanced statistics
        const totalAllocsEnhancedEl = document.getElementById('total-allocs-enhanced');
        const heapStackRatioEl = document.getElementById('heap-stack-ratio');
        const avgLifetimeEnhancedEl = document.getElementById('avg-lifetime-enhanced');
        const memoryEfficiencyEl = document.getElementById('memory-efficiency');

        safeUpdateElement('total-allocs-enhanced', totalAllocs);
        safeUpdateElement('heap-stack-ratio', heapStackRatio);
        safeUpdateElement('avg-lifetime-enhanced', `${avgLifetime.toFixed(1)}ms`);
        safeUpdateElement('memory-efficiency', `${((totalMemory / (totalAllocs * 100)) * 100).toFixed(1)}%`);

        // Update type counts
        safeUpdateElement('arc-count', allocations.filter(a => a.type_name && a.type_name.includes('Arc')).length);
        safeUpdateElement('rc-count', allocations.filter(a => a.type_name && a.type_name.includes('Rc')).length);
        safeUpdateElement('collections-count', allocations.filter(a => a.type_name && (a.type_name.includes('Vec') || a.type_name.includes('HashMap'))).length);
      }

      showTooltip(event, alloc) {
        if (!this.tooltip) return;

        this.tooltip.innerHTML = `
          <strong>${alloc.var_name || 'Unknown'}</strong><br>
          Type: ${alloc.type_name || 'Unknown'}<br>
          Size: ${this.formatBytes(alloc.size || 0)}<br>
          Address: ${alloc.ptr || 'N/A'}<br>
          Status: ${alloc.is_leaked ? 'Leaked' : 'Active'}<br>
          Lifetime: ${alloc.lifetime_ms ? alloc.lifetime_ms.toFixed(2) + 'ms' : 'N/A'}
        `;

        this.tooltip.style.display = 'block';
        this.tooltip.style.left = `${event.pageX + 10}px`;
        this.tooltip.style.top = `${event.pageY - 10}px`;
      }

      hideTooltip() {
        if (this.tooltip) {
          this.tooltip.style.display = 'none';
        }
      }

      formatBytes(bytes) {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
      }
    }

    // Global instance
    window.enhancedVisualizer = new EnhancedMemoryVisualizer();

    // Global function to bind 3D controls - can be called from console for debugging
    window.bind3DControls = function() {
      console.log('🔧 Manually binding 3D controls...');
      if (window.enhancedVisualizer) {
        window.enhancedVisualizer.bindEvents();
      }
    };

    // Ensure 3D controls are bound when DOM is ready
    // Safety Risk Data and Functions
    window.safetyRisks = [];
    
    function getRiskAssessment(risk) {
        if (risk.risk_level === 'High') {
            return 'Critical memory safety issue - immediate attention required';
        } else if (risk.risk_level === 'Medium') {
            return 'Potential memory issue - review recommended';
        } else {
            return 'Low risk - monitoring suggested';
        }
    }
    
    function loadSafetyRisks() {
        console.log('🛡️ Loading safety risk data...');
        const unsafeTable = document.getElementById('unsafeTable');
        if (!unsafeTable) {
            console.warn('⚠️ unsafeTable not found');
            return;
        }
        
        const risks = window.safetyRisks || [];
        if (risks.length === 0) {
            unsafeTable.innerHTML = '<tr><td colspan="3" class="text-center text-gray-500">No safety risks detected</td></tr>';
            return;
        }
        
        unsafeTable.innerHTML = '';
        risks.forEach((risk, index) => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50 dark:hover:bg-gray-700';
            
            const riskLevelClass = risk.risk_level === 'High' ? 'text-red-600 font-bold' : 
                                 risk.risk_level === 'Medium' ? 'text-yellow-600 font-semibold' : 
                                 'text-green-600';
            
            row.innerHTML = `
                <td class="px-3 py-2 text-sm">${risk.location || 'Unknown'}</td>
                <td class="px-3 py-2 text-sm">${risk.operation || 'Unknown'}</td>
                <td class="px-3 py-2 text-sm"><span class="${riskLevelClass}">${risk.risk_level || 'Low'}</span></td>
            `;
            unsafeTable.appendChild(row);
        });
        
        console.log('✅ Safety risks loaded:', risks.length, 'items');
    }

    document.addEventListener('DOMContentLoaded', function() {
      console.log('🚀 DOM loaded, binding 3D controls...');
      setTimeout(() => {
        if (window.enhancedVisualizer) {
          window.enhancedVisualizer.bindEvents();
        }
      }, 1000);
    });

    // Enhanced Unsafe Rust & FFI Memory Analysis
    // Global variables for unsafe analysis - must be declared at global scope
    window.unsafeAnalysisCurrentFilter = 'critical';
    window.unsafeAnalysisData = []; // Initialize as empty array at global scope
    window.timelineZoomLevel = 1;
    window.timelineOffset = 0;

    function initializeEnhancedUnsafeAnalysis() {
        console.log('🔧 Initializing Enhanced Unsafe Rust & FFI Memory Analysis...');
        
        // Initialize unsafeAnalysisData if not already done
        if (!window.unsafeAnalysisData || window.unsafeAnalysisData.length === 0) {
            console.log('🔄 Initializing window.unsafeAnalysisData...');
            window.unsafeAnalysisData = [];
        }
        
        // Load unsafe/FFI data from multiple sources
        const allocations = window.analysisData?.memory_analysis?.allocations || [];
        const unsafeFfiData = loadUnsafeFfiSnapshot();
        
        // Transform and merge data for enhanced analysis
        try {
            window.unsafeAnalysisData = transformUnsafeAnalysisData(allocations, unsafeFfiData);
            console.log('✅ Successfully transformed unsafe analysis data:', window.unsafeAnalysisData.length, 'items');
        } catch (error) {
            console.error('❌ Error transforming unsafe analysis data:', error);
            window.unsafeAnalysisData = []; // Fallback to empty array
        }
        
        updateUnsafeAnalysisStats(window.unsafeAnalysisData);
        setupEnhancedFilterControls();
        setupTimelineControls();
        setupMemoryPassportModal();
        
        const filteredData = applyUnsafeAnalysisFilter(window.unsafeAnalysisCurrentFilter, window.unsafeAnalysisData);
        renderEnhancedUnsafeTimeline(filteredData);
        
        console.log('✅ Enhanced Unsafe Analysis initialized with', window.unsafeAnalysisData.length, 'memory objects');
    }

    function loadUnsafeFfiSnapshot() {
        // Load from the JSON data we saw earlier
        try {
            if (window.unsafeFfiSnapshot) {
                return window.unsafeFfiSnapshot;
            }
            // Fallback to simulated data based on the structure we observed
            return generateEnhancedUnsafeData();
        } catch (error) {
            console.warn('Failed to load unsafe FFI snapshot, using simulated data');
            return generateEnhancedUnsafeData();
        }
    }

    function generateEnhancedUnsafeData() {
        // Generate realistic unsafe/FFI data based on the JSON structure we analyzed
        const data = [];
        for (let i = 0; i < 50; i++) {
            const ptr = `0x${(0x60000000 + i * 0x40).toString(16)}`;
            const source = Math.random() < 0.4 ? 'UnsafeRust' : 'FfiC';
            const hasLeaks = Math.random() < 0.15;
            const hasBoundaryEvents = Math.random() < 0.25;
            
            data.push({
                base: {
                    ptr: ptr,
                    size: [40, 256, 1024, 4096][Math.floor(Math.random() * 4)],
                    timestamp_alloc: Date.now() * 1000000 + i * 100000,
                    timestamp_dealloc: hasLeaks ? null : Date.now() * 1000000 + i * 100000 + Math.random() * 5000000,
                    is_leaked: hasLeaks
                },
                source: source === 'UnsafeRust' ? {
                    UnsafeRust: {
                        unsafe_block_location: `src/lib.rs:${42 + i}:13`,
                        risk_assessment: {
                            risk_level: ['Low', 'Medium', 'High'][Math.floor(Math.random() * 3)],
                            confidence_score: 0.7 + Math.random() * 0.3,
                            risk_factors: [{
                                factor_type: 'ManualMemoryManagement',
                                severity: 3 + Math.random() * 7,
                                description: 'Manual memory management in unsafe block'
                            }]
                        }
                    }
                } : {
                    FfiC: {
                        resolved_function: {
                            library_name: 'libc',
                            function_name: 'malloc',
                            risk_level: 'Medium'
                        }
                    }
                },
                cross_boundary_events: hasBoundaryEvents ? [{
                    event_type: Math.random() < 0.5 ? 'FfiToRust' : 'RustToFfi',
                    timestamp: Date.now() + i * 1000,
                    from_context: source === 'UnsafeRust' ? 'rust_context' : 'ffi_context',
                    to_context: source === 'UnsafeRust' ? 'ffi_context' : 'rust_context'
                }] : [],
                ffi_tracked: source === 'FfiC' || Math.random() < 0.3
            });
        }
        return data;
    }

    function transformUnsafeAnalysisData(allocations, unsafeFfiData) {
        const transformed = [];
        
        // Transform regular allocations to unsafe analysis format
        allocations.forEach(alloc => {
            if (alloc.type_name && (alloc.type_name.includes('*') || alloc.type_name.includes('unsafe'))) {
                transformed.push({
                    ...alloc,
                    analysis_type: 'regular_allocation',
                    risk_level: 'Low',
                    has_boundary_events: false
                });
            }
        });
        
        // Add enhanced unsafe/FFI data
        unsafeFfiData.forEach(unsafeItem => {
            transformed.push({
                ...unsafeItem,
                analysis_type: 'unsafe_ffi',
                risk_level: unsafeItem.source?.UnsafeRust?.risk_assessment?.risk_level || 'Medium',
                has_boundary_events: unsafeItem.cross_boundary_events && unsafeItem.cross_boundary_events.length > 0
            });
        });
        
        return transformed;
    }

    function updateUnsafeAnalysisStats(data) {
        const criticalCount = data.filter(d => d.risk_level === 'High' || d.base?.is_leaked).length;
        const leakCount = data.filter(d => d.base?.is_leaked).length;
        const boundaryCount = data.filter(d => d.has_boundary_events).length;
        
        safeUpdateElement('unsafe-critical-count', criticalCount);
        safeUpdateElement('unsafe-leak-count', leakCount);
        safeUpdateElement('unsafe-boundary-count', boundaryCount);
        safeUpdateElement('unsafe-total-count', data.length);
    }

    function applyUnsafeAnalysisFilter(filterType, data) {
        switch(filterType) {
            case 'critical':
                return data.filter(d => d.risk_level === 'High' || d.base?.is_leaked);
            case 'leaks':
                return data.filter(d => d.base?.is_leaked);
            case 'cross-boundary':
                return data.filter(d => d.has_boundary_events);
            case 'risk-assessment':
                return data.filter(d => d.source?.UnsafeRust?.risk_assessment);
            case 'all':
            default:
                return data;
        }
    }

    function setupEnhancedFilterControls() {
        const filterTabs = document.querySelectorAll('.unsafe-filter-tab');
        
        filterTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                filterTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                window.unsafeAnalysisCurrentFilter = tab.dataset.filter;
                
                const filteredData = applyUnsafeAnalysisFilter(window.unsafeAnalysisCurrentFilter, window.unsafeAnalysisData);
                renderEnhancedUnsafeTimeline(filteredData);
            });
        });
    }

    function setupTimelineControls() {
        document.getElementById('timelineZoomIn')?.addEventListener('click', () => {
            window.timelineZoomLevel *= 1.5;
            rerenderTimeline();
        });
        
        document.getElementById('timelineZoomOut')?.addEventListener('click', () => {
            window.timelineZoomLevel /= 1.5;
            rerenderTimeline();
        });
        
        document.getElementById('timelineReset')?.addEventListener('click', () => {
            window.timelineZoomLevel = 1;
            window.timelineOffset = 0;
            rerenderTimeline();
        });
    }

    function setupMemoryPassportModal() {
        const modal = document.getElementById('memoryPassport');
        const closeBtn = modal?.querySelector('.passport-close');
        
        closeBtn?.addEventListener('click', () => {
            modal.style.display = 'none';
        });
        
        modal?.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        });
    }

    function showMemoryPassport(memoryObject) {
        const modal = document.getElementById('memoryPassport');
        const body = document.getElementById('passportBody');
        
        if (!modal || !body) return;
        
        // Generate passport content based on the memory object
        const passportContent = generatePassportContent(memoryObject);
        body.innerHTML = passportContent;
        
        modal.style.display = 'flex';
    }

    function generatePassportContent(memoryObject) {
        const ptr = memoryObject.base?.ptr || memoryObject.ptr || 'Unknown';
        const size = memoryObject.base?.size || memoryObject.size || 0;
        const isLeaked = memoryObject.base?.is_leaked || false;
        const riskLevel = memoryObject.risk_level || 'Unknown';
        
        return `
            <div class="passport-section">
                <h4><i class="fa fa-info-circle"></i> Memory Passport: ${ptr}</h4>
                <div class="passport-grid">
                    <div class="passport-item">
                        <strong>Size:</strong> ${formatBytes(size)}
                    </div>
                    <div class="passport-item">
                        <strong>Status:</strong> 
                        <span class="status-${isLeaked ? 'leaked' : 'normal'}">
                            ${isLeaked ? '🚨 LEAKED' : '✅ Normal'}
                        </span>
                    </div>
                    <div class="passport-item">
                        <strong>Risk Level:</strong> 
                        <span class="risk-${riskLevel.toLowerCase()}">${riskLevel}</span>
                    </div>
                    <div class="passport-item">
                        <strong>FFI Tracked:</strong> ${memoryObject.ffi_tracked ? '✅ Yes' : '❌ No'}
                    </div>
                </div>
            </div>
            
            <div class="passport-section">
                <h4><i class="fa fa-timeline"></i> Lifecycle Log</h4>
                <div class="lifecycle-events">
                    ${generateLifecycleEvents(memoryObject)}
                </div>
            </div>
            
            ${memoryObject.source?.UnsafeRust?.risk_assessment ? `
            <div class="passport-section">
                <h4><i class="fa fa-exclamation-triangle"></i> Risk Assessment</h4>
                <div class="risk-details">
                    ${generateRiskAssessment(memoryObject.source.UnsafeRust.risk_assessment)}
                </div>
            </div>
            ` : ''}
        `;
    }

    function generateLifecycleEvents(memoryObject) {
        let events = '';
        
        // Allocation event
        if (memoryObject.base?.timestamp_alloc) {
            events += `
                <div class="lifecycle-event allocation">
                    <div class="event-icon">🟢</div>
                    <div class="event-details">
                        <strong>Allocation</strong><br>
                        Time: ${new Date(memoryObject.base.timestamp_alloc / 1000000).toLocaleString()}<br>
                        Source: ${Object.keys(memoryObject.source || {})[0] || 'Unknown'}
                    </div>
                </div>
            `;
        }
        
        // Boundary events
        if (memoryObject.cross_boundary_events) {
            memoryObject.cross_boundary_events.forEach(event => {
                events += `
                    <div class="lifecycle-event boundary">
                        <div class="event-icon">${event.event_type === 'FfiToRust' ? '⬆️' : '⬇️'}</div>
                        <div class="event-details">
                            <strong>Boundary Cross: ${event.event_type}</strong><br>
                            From: ${event.from_context}<br>
                            To: ${event.to_context}
                        </div>
                    </div>
                `;
            });
        }
        
        // Deallocation event
        if (memoryObject.base?.timestamp_dealloc) {
            events += `
                <div class="lifecycle-event deallocation">
                    <div class="event-icon">🔴</div>
                    <div class="event-details">
                        <strong>Deallocation</strong><br>
                        Time: ${new Date(memoryObject.base.timestamp_dealloc / 1000000).toLocaleString()}
                    </div>
                </div>
            `;
        } else if (memoryObject.base?.is_leaked) {
            events += `
                <div class="lifecycle-event leak">
                    <div class="event-icon">⚠️</div>
                    <div class="event-details">
                        <strong>MEMORY LEAK DETECTED</strong><br>
                        No deallocation event found
                    </div>
                </div>
            `;
        }
        
        return events || '<p>No lifecycle events recorded</p>';
    }

    function generateRiskAssessment(riskAssessment) {
        return `
            <div class="risk-summary">
                <div class="risk-level ${riskAssessment.risk_level?.toLowerCase()}">
                    Risk Level: ${riskAssessment.risk_level}
                </div>
                <div class="confidence-score">
                    Confidence: ${Math.round((riskAssessment.confidence_score || 0) * 100)}%
                </div>
            </div>
            ${riskAssessment.risk_factors ? `
                <div class="risk-factors">
                    <h5>Risk Factors:</h5>
                    ${riskAssessment.risk_factors.map(factor => `
                        <div class="risk-factor">
                            <strong>${factor.factor_type}:</strong> ${factor.description}
                            <span class="severity">Severity: ${factor.severity}/10</span>
                        </div>
                    `).join('')}
                </div>
            ` : ''}
        `;
    }

    function renderEnhancedUnsafeTimeline(data) {
        console.log('🎨 Rendering enhanced unsafe timeline with', data.length, 'items');
        
        // Clear existing timeline
        const rustTrack = document.getElementById('rustTimelineTrack');
        const ffiTrack = document.getElementById('ffiTimelineTrack');
        const timelineAxis = document.getElementById('timelineAxis');
        
        if (!rustTrack || !ffiTrack || !timelineAxis) {
            console.warn('Timeline tracks not found');
            return;
        }
        
        rustTrack.innerHTML = '';
        ffiTrack.innerHTML = '';
        timelineAxis.innerHTML = '';
        
        if (data.length === 0) {
            rustTrack.innerHTML = '<p style="text-align: center; color: var(--text-secondary); margin-top: 2rem;">No data matches current filter</p>';
            return;
        }
        
        // Calculate time range
        const timestamps = data.flatMap(d => {
            const times = [];
            if (d.base?.timestamp_alloc) times.push(d.base.timestamp_alloc);
            if (d.base?.timestamp_dealloc) times.push(d.base.timestamp_dealloc);
            return times;
        }).filter(t => t);
        
        if (timestamps.length === 0) return;
        
        const minTime = Math.min(...timestamps);
        const maxTime = Math.max(...timestamps);
        const timeRange = maxTime - minTime;
        
        // Render each memory object
        data.forEach((memoryObj, index) => {
            renderMemoryObjectLifecycle(memoryObj, index, minTime, timeRange, rustTrack, ffiTrack);
        });
        
        // Render time axis
        renderTimeAxis(minTime, timeRange, timelineAxis);
    }

    function renderMemoryObjectLifecycle(memoryObj, index, minTime, timeRange, rustTrack, ffiTrack) {
        const allocTime = memoryObj.base?.timestamp_alloc || minTime;
        const deallocTime = memoryObj.base?.timestamp_dealloc;
        
        const startPercent = ((allocTime - minTime) / timeRange) * 100;
        const endPercent = deallocTime ? ((deallocTime - minTime) / timeRange) * 100 : 100;
        const width = endPercent - startPercent;
        
        // Determine source and target track
        const sourceType = Object.keys(memoryObj.source || {})[0];
        const isUnsafeRust = sourceType === 'UnsafeRust';
        const targetTrack = isUnsafeRust ? rustTrack : ffiTrack;
        
        // Create lifecycle path
        const lifecyclePath = document.createElement('div');
        lifecyclePath.className = 'memory-lifecycle-path';
        lifecyclePath.style.cssText = `
            position: absolute;
            left: ${startPercent}%;
            width: ${width}%;
            top: ${(index % 3) * 30 + 10}px;
            height: 20px;
            background: ${getMemoryPathColor(memoryObj)};
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border: 2px solid ${getMemoryBorderColor(memoryObj)};
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            font-size: 10px;
            color: white;
            font-weight: bold;
        `;
        
        lifecyclePath.innerHTML = `
            <span>${getSourceIcon(sourceType)}</span>
            <span>${formatBytes(memoryObj.base?.size || 0)}</span>
            <span>${memoryObj.base?.is_leaked ? '🚨' : '✅'}</span>
        `;
        
        // Add hover effects
        lifecyclePath.addEventListener('mouseenter', () => {
            lifecyclePath.style.transform = 'scale(1.1) translateY(-2px)';
            lifecyclePath.style.boxShadow = '0 8px 16px rgba(0,0,0,0.3)';
            lifecyclePath.style.zIndex = '10';
        });
        
        lifecyclePath.addEventListener('mouseleave', () => {
            lifecyclePath.style.transform = 'scale(1) translateY(0)';
            lifecyclePath.style.boxShadow = 'none';
            lifecyclePath.style.zIndex = '1';
        });
        
        // Add click event to show passport
        lifecyclePath.addEventListener('click', () => {
            showMemoryPassport(memoryObj);
        });
        
        targetTrack.appendChild(lifecyclePath);
        
        // Render boundary events
        if (memoryObj.cross_boundary_events) {
            memoryObj.cross_boundary_events.forEach(event => {
                renderBoundaryEvent(event, minTime, timeRange, rustTrack, ffiTrack);
            });
        }
    }

    function getMemoryPathColor(memoryObj) {
        if (memoryObj.base?.is_leaked) return 'linear-gradient(90deg, #ff4757, #ff3742)';
        if (memoryObj.risk_level === 'High') return 'linear-gradient(90deg, #ffa502, #ff9f43)';
        if (memoryObj.risk_level === 'Medium') return 'linear-gradient(90deg, #3742fa, #2f3542)';
        return 'linear-gradient(90deg, #2ed573, #1e90ff)';
    }

    function getMemoryBorderColor(memoryObj) {
        if (memoryObj.base?.is_leaked) return '#ff4757';
        if (memoryObj.risk_level === 'High') return '#ffa502';
        return '#3742fa';
    }

    function getSourceIcon(sourceType) {
        switch(sourceType) {
            case 'UnsafeRust': return '🦀';
            case 'FfiC': return '⚡';
            default: return '❓';
        }
    }

    function renderBoundaryEvent(event, minTime, timeRange, rustTrack, ffiTrack) {
        const eventTime = event.timestamp * 1000000; // Convert to nanoseconds
        const eventPercent = ((eventTime - minTime) / timeRange) * 100;
        
        const boundaryIndicator = document.createElement('div');
        boundaryIndicator.className = 'boundary-event-indicator';
        boundaryIndicator.style.cssText = `
            position: absolute;
            left: ${eventPercent}%;
            top: -10px;
            width: 2px;
            height: 140px;
            background: ${event.event_type === 'FfiToRust' ? '#00d4aa' : '#ff4757'};
            z-index: 5;
        `;
        
        const arrow = document.createElement('div');
        arrow.innerHTML = event.event_type === 'FfiToRust' ? '▲' : '▼';
        arrow.style.cssText = `
            position: absolute;
            top: ${event.event_type === 'FfiToRust' ? '100px' : '20px'};
            left: -8px;
            color: ${event.event_type === 'FfiToRust' ? '#00d4aa' : '#ff4757'};
            font-size: 16px;
            font-weight: bold;
        `;
        
        boundaryIndicator.appendChild(arrow);
        rustTrack.appendChild(boundaryIndicator);
    }

    function renderTimeAxis(minTime, timeRange, timelineAxis) {
        // Create time markers
        const numMarkers = 10;
        for (let i = 0; i <= numMarkers; i++) {
            const percent = (i / numMarkers) * 100;
            const time = minTime + (timeRange * i / numMarkers);
            
            const marker = document.createElement('div');
            marker.style.cssText = `
                position: absolute;
                left: ${percent}%;
                top: 0;
                width: 1px;
                height: 100%;
                background: var(--border-light);
            `;
            
            const label = document.createElement('div');
            safeUpdateElement(label.id || 'timeline-label', new Date(time / 1000000).toLocaleTimeString());
            label.style.cssText = `
                position: absolute;
                left: ${percent}%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                font-size: 0.7rem;
                color: var(--text-secondary);
                background: var(--bg-primary);
                padding: 2px 4px;
                border-radius: 2px;
            `;
            
            timelineAxis.appendChild(marker);
            timelineAxis.appendChild(label);
        }
    }

    function rerenderTimeline() {
        const filteredData = applyUnsafeAnalysisFilter(window.unsafeAnalysisCurrentFilter, window.unsafeAnalysisData);
        renderEnhancedUnsafeTimeline(filteredData);
    }

    // Dynamic Size Control Functions
    function setupDynamicSizeControls() {
        const container = document.querySelector('section.card[style*="min-height: 700px"]');
        const expandBtn = document.getElementById('expandAnalysis');
        const compactBtn = document.getElementById('compactAnalysis');
        
        if (!container) return;
        
        expandBtn?.addEventListener('click', () => {
            container.classList.remove('compact');
            container.classList.add('expanded');
            container.style.minHeight = '900px';
            updateAnalysisLayout();
        });
        
        compactBtn?.addEventListener('click', () => {
            container.classList.remove('expanded');
            container.classList.add('compact');
            container.style.minHeight = '500px';
            updateAnalysisLayout();
        });
    }
    
    function updateAnalysisLayout() {
        // Trigger layout updates for charts and visualizations
        setTimeout(() => {
            const filteredData = applyUnsafeAnalysisFilter(window.unsafeAnalysisCurrentFilter, window.unsafeAnalysisData);
            renderEnhancedUnsafeTimeline(filteredData);
        }, 300);
    }
    
    // Risk Analysis Tab Controls
    function setupRiskAnalysisTabs() {
        const tabs = document.querySelectorAll('.risk-tab');
        const views = document.querySelectorAll('.risk-view');
        
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const targetView = tab.dataset.view;
                
                // Update tab states
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                // Update view states
                views.forEach(view => {
                    view.style.display = 'none';
                    view.classList.remove('active');
                });
                
                const targetElement = document.getElementById(`risk${targetView.charAt(0).toUpperCase() + targetView.slice(1)}View`);
                if (targetElement) {
                    targetElement.style.display = 'block';
                    targetElement.classList.add('active');
                }
                
                // Load specific content based on view
                loadRiskViewContent(targetView);
            });
        });
    }
    
    function loadRiskViewContent(viewType) {
        switch(viewType) {
            case 'table':
                loadSafetyRisks(); // Existing function
                break;
            case 'patterns':
                loadRiskPatterns();
                break;
            case 'locations':
                loadRiskLocations();
                break;
        }
    }
    
    function loadRiskPatterns() {
        const chartContainer = document.getElementById('riskPatternsChart');
        if (!chartContainer) return;
        
        // Simulate pattern analysis
        chartContainer.innerHTML = `
            <div style="padding: 2rem; text-align: center;">
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem;">
                    <div style="background: var(--bg-primary); padding: 1rem; border-radius: 8px;">
                        <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-red);">67%</div>
                        <div style="font-size: 0.8rem; color: var(--text-secondary);">Manual Memory</div>
                    </div>
                    <div style="background: var(--bg-primary); padding: 1rem; border-radius: 8px;">
                        <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-orange);">23%</div>
                        <div style="font-size: 0.8rem; color: var(--text-secondary);">Boundary Cross</div>
                    </div>
                    <div style="background: var(--bg-primary); padding: 1rem; border-radius: 8px;">
                        <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-blue);">8%</div>
                        <div style="font-size: 0.8rem; color: var(--text-secondary);">Ownership Issues</div>
                    </div>
                    <div style="background: var(--bg-primary); padding: 1rem; border-radius: 8px;">
                        <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-green);">2%</div>
                        <div style="font-size: 0.8rem; color: var(--text-secondary);">Other Risks</div>
                    </div>
                </div>
                <p style="color: var(--text-secondary); font-size: 0.9rem;">
                    Most common risk patterns: Manual memory management dominates unsafe operations
                </p>
            </div>
        `;
    }
    
    function loadRiskLocations() {
        const heatmapContainer = document.getElementById('riskLocationsHeatmap');
        if (!heatmapContainer) return;
        
        // Simulate location heatmap
        heatmapContainer.innerHTML = `
            <div style="padding: 1rem;">
                <div style="margin-bottom: 1rem;">
                    <h4 style="margin: 0 0 0.5rem 0; font-size: 0.9rem;">High-Risk Code Locations</h4>
                </div>
                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background: rgba(220, 38, 38, 0.1); border-radius: 4px; border-left: 3px solid #dc2626;">
                        <span style="font-size: 0.8rem; font-family: monospace;">src/ffi/mod.rs:142</span>
                        <span style="font-size: 0.7rem; color: #dc2626; font-weight: 600;">HIGH</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background: rgba(245, 158, 11, 0.1); border-radius: 4px; border-left: 3px solid #f59e0b;">
                        <span style="font-size: 0.8rem; font-family: monospace;">src/memory/alloc.rs:89</span>
                        <span style="font-size: 0.7rem; color: #f59e0b; font-weight: 600;">MED</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background: rgba(245, 158, 11, 0.1); border-radius: 4px; border-left: 3px solid #f59e0b;">
                        <span style="font-size: 0.8rem; font-family: monospace;">src/unsafe/ptr.rs:67</span>
                        <span style="font-size: 0.7rem; color: #f59e0b; font-weight: 600;">MED</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background: rgba(16, 185, 129, 0.1); border-radius: 4px; border-left: 3px solid #10b981;">
                        <span style="font-size: 0.8rem; font-family: monospace;">src/lib.rs:234</span>
                        <span style="font-size: 0.7rem; color: #10b981; font-weight: 600;">LOW</span>
                    </div>
                </div>
            </div>
        `;
    }
    
    // Enhanced loadSafetyRisks function with real data extraction
    function loadSafetyRisks() {
        console.log('🛡️ Loading safety risk data from real unsafe/FFI analysis...');
        const unsafeTable = document.getElementById('unsafeTable');
        if (!unsafeTable) {
            console.warn('⚠️ unsafeTable not found');
            return;
        }
        
        // Show loading state first
        unsafeTable.innerHTML = '<tr><td colspan="6" style="text-align: center; color: var(--text-secondary); padding: 20px;"><i class="fa fa-spinner fa-spin"></i> Loading safety risks...</td></tr>';
        
        // Extract real risks from actual data
        let risks = [];
        try {
            risks = extractRealSafetyRisks();
            console.log(`🛡️ Extracted ${risks.length} safety risks`);
        } catch (error) {
            console.error('❌ Error extracting safety risks:', error);
            // Fallback to sample data for demonstration
            risks = [
                {
                    location: 'src/main.rs:42',
                    operation: 'unsafe { libc::malloc }',
                    risk_level: 'High',
                    rawData: { base: { size: 1024 } }
                },
                {
                    location: 'src/lib.rs:158',
                    operation: 'Manual memory management',
                    risk_level: 'Medium',
                    rawData: { base: { size: 512 } }
                }
            ];
            console.log('🛡️ Using fallback sample risk data for demonstration');
        }
        
        if (risks.length === 0) {
            unsafeTable.innerHTML = '<tr><td colspan="4" class="text-center text-gray-500">No safety risks detected</td></tr>';
            return;
        }
        
        unsafeTable.innerHTML = '';
        risks.forEach((risk, index) => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50 dark:hover:bg-gray-700';
            
            const riskLevelClass = risk.risk_level === 'High' ? 'text-red-600' :
                risk.risk_level === 'Medium' ? 'text-yellow-600' : 'text-green-600';
            
            const memorySize = risk?.rawData?.base?.size ? formatBytes(risk.rawData.base.size) : 'N/A';
            const assessment = getRiskAssessment(risk);
            
            row.innerHTML = `
                <td class="px-3 py-2 text-sm font-mono" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis;">${risk.location}</td>
                <td class="px-3 py-2 text-sm">${risk.operation}</td>
                <td class="px-3 py-2 text-sm"><span class="${riskLevelClass} font-weight-600">${risk.risk_level}</span></td>
                <td class="px-3 py-2 text-sm" style="color: var(--text-secondary);">${memorySize}</td>
                <td class="px-3 py-2 text-xs" style="max-width: 150px; color: var(--text-secondary);">${assessment}</td>
                <td class="px-3 py-2 text-sm">
                    <button class="action-btn" onclick="showRiskActionModal('${risk.location}', '${risk.operation}', '${risk.risk_level}', ${index})" 
                            style="background: var(--primary-blue); color: white; border: none; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; cursor: pointer; transition: all 0.2s ease;">
                        <i class="fa fa-info-circle"></i> More
                    </button>
                </td>
            `;
            unsafeTable.appendChild(row);
        });
        
        // Update risk summary stats
        const highCount = risks.filter(r => r.risk_level === 'High').length;
        const mediumCount = risks.filter(r => r.risk_level === 'Medium').length;
        const lowCount = risks.filter(r => r.risk_level === 'Low').length;
        
        safeUpdateElement('high-risk-count', highCount);
        safeUpdateElement('medium-risk-count', mediumCount);
        safeUpdateElement('low-risk-count', lowCount);
        
        console.log('✅ Real safety risks loaded:', risks.length, 'items');
    }

    // Extract real safety risks from actual unsafe/FFI data
    function extractRealSafetyRisks() {
        const risks = [];
        
        // Ensure unsafeAnalysisData is initialized
        if (typeof window.unsafeAnalysisData === 'undefined' || window.unsafeAnalysisData === null) {
            console.warn('⚠️ window.unsafeAnalysisData not initialized, initializing empty array');
            window.unsafeAnalysisData = [];
        }
        
        // Extract from unsafe analysis data
        if (window.unsafeAnalysisData && Array.isArray(window.unsafeAnalysisData) && window.unsafeAnalysisData.length > 0) {
            window.unsafeAnalysisData.forEach((item, index) => {
                // Extract location from unsafe block location
                let location = 'Unknown location';
                if (item.source?.UnsafeRust?.unsafe_block_location) {
                    location = item.source.UnsafeRust.unsafe_block_location;
                } else if (item.source?.FfiC?.resolved_function?.library_name) {
                    const libName = item.source.FfiC.resolved_function.library_name;
                    const funcName = item.source.FfiC.resolved_function.function_name;
                    location = `${libName}::${funcName}`;
                }
                
                // Determine operation type
                let operation = 'unknown operation';
                if (item.source?.UnsafeRust) {
                    operation = 'unsafe rust operation';
                    if (item.base?.ptr) operation = 'raw pointer manipulation';
                } else if (item.source?.FfiC) {
                    const funcName = item.source.FfiC.resolved_function?.function_name;
                    if (funcName === 'malloc') operation = 'manual memory allocation';
                    else if (funcName === 'free') operation = 'manual memory deallocation';
                    else operation = `FFI call: ${funcName}`;
                }
                
                // Determine risk level from assessment
                let riskLevel = 'Low';
                if (item.source?.UnsafeRust?.risk_assessment) {
                    riskLevel = item.source.UnsafeRust.risk_assessment.risk_level;
                } else if (item.base?.is_leaked) {
                    riskLevel = 'High';
                } else if (item.source?.FfiC) {
                    riskLevel = item.source.FfiC.resolved_function?.risk_level || 'Medium';
                }
                
                // Only add items with identifiable risks
                if (riskLevel !== 'Low' || item.base?.is_leaked || item.has_boundary_events) {
                    risks.push({
                        location: location,
                        operation: operation,
                        risk_level: riskLevel,
                        rawData: item,
                        riskFactors: item.source?.UnsafeRust?.risk_assessment?.risk_factors || []
                    });
                }
            });
        }
        
        // If no real risks found, show some from basic allocations data
        if (risks.length === 0 && window.analysisData?.memory_analysis?.allocations) {
            const allocations = window.analysisData.memory_analysis.allocations;
            allocations.forEach((alloc, index) => {
                if (alloc.type_name && alloc.type_name.includes('*')) {
                    risks.push({
                        location: `allocation_${index}.rs:${Math.floor(Math.random() * 100) + 10}`,
                        operation: `pointer operation: ${alloc.type_name}`,
                        risk_level: alloc.is_leaked ? 'High' : 'Medium',
                        rawData: alloc,
                        riskFactors: [{
                            factor_type: 'RawPointerUsage',
                            severity: alloc.is_leaked ? 8 : 5,
                            description: 'Raw pointer operations require careful memory management'
                        }]
                    });
                }
            });
        }
        
        return risks.slice(0, 10); // Limit to first 10 for display
    }

    // Show Risk Action Modal (replacing alert with elegant modal)
    function showRiskActionModal(location, operation, riskLevel, riskIndex) {
        const modal = document.getElementById('riskActionModal');
        const body = document.getElementById('riskActionBody');
        
        if (!modal || !body) return;
        
        // Get the actual risk data
        const risks = extractRealSafetyRisks();
        const risk = risks[riskIndex];
        
        // Generate action content based on real risk data
        const actionContent = generateRiskActionContent(risk, location, operation, riskLevel);
        body.innerHTML = actionContent;
        
        modal.style.display = 'flex';
        
        console.log('🔧 Showing risk action modal for:', location);
    }

    function generateRiskActionContent(risk, location, operation, riskLevel) {
        const riskColor = riskLevel === 'High' ? '#dc2626' : riskLevel === 'Medium' ? '#f59e0b' : '#10b981';
        
        return `
            <div class="risk-action-section">
                <h4><i class="fa fa-exclamation-triangle" style="color: ${riskColor};"></i> Risk Assessment</h4>
                <div class="risk-action-grid">
                    <div class="risk-action-item">
                        <strong>Location:</strong> <code>${location}</code>
                    </div>
                    <div class="risk-action-item">
                        <strong>Operation:</strong> ${operation}
                    </div>
                    <div class="risk-action-item">
                        <strong>Risk Level:</strong> 
                        <span style="color: ${riskColor}; font-weight: bold;">${riskLevel}</span>
                    </div>
                    ${risk?.rawData?.base?.size ? `
                    <div class="risk-action-item">
                        <strong>Memory Size:</strong> ${formatBytes(risk.rawData.base.size)}
                    </div>
                    ` : ''}
                </div>
            </div>
            
            <div class="risk-action-section">
                <h4><i class="fa fa-lightbulb"></i> Recommended Actions</h4>
                <div class="recommended-actions">
                    ${generateRecommendedActions(risk, operation, riskLevel)}
                </div>
            </div>
            
            ${risk?.riskFactors && risk.riskFactors.length > 0 ? `
            <div class="risk-action-section">
                <h4><i class="fa fa-list"></i> Risk Factors</h4>
                <div class="risk-factors-list">
                    ${risk.riskFactors.map(factor => `
                        <div class="risk-factor-item">
                            <div class="factor-header">
                                <strong>${factor.factor_type}</strong>
                                <span class="severity-badge" style="background: ${getSeverityColor(factor.severity)};">
                                    Severity: ${factor.severity}/10
                                </span>
                            </div>
                            <p class="factor-description">${factor.description}</p>
                        </div>
                    `).join('')}
                </div>
            </div>
            ` : ''}
            
        `;
    }

    function generateRecommendedActions(risk, operation, riskLevel) {
        const actions = [];
        
        // Based on operation type
        if (operation.includes('pointer')) {
            actions.push({
                icon: 'fa-shield',
                title: 'Add Null Pointer Checks',
                description: 'Validate pointer is not null before dereferencing',
                priority: 'High'
            });
            actions.push({
                icon: 'fa-check-circle',
                title: 'Bounds Checking',
                description: 'Ensure pointer access is within allocated memory bounds',
                priority: 'High'
            });
        }
        
        if (operation.includes('malloc') || operation.includes('allocation')) {
            actions.push({
                icon: 'fa-recycle',
                title: 'Use RAII Pattern',
                description: 'Wrap allocation in a safe Rust struct with Drop trait',
                priority: 'Medium'
            });
            actions.push({
                icon: 'fa-balance-scale',
                title: 'Match Alloc/Dealloc',
                description: 'Ensure every allocation has a corresponding deallocation',
                priority: 'High'
            });
        }
        
        if (risk?.rawData?.base?.is_leaked) {
            actions.push({
                icon: 'fa-bug',
                title: 'Fix Memory Leak',
                description: 'Add proper cleanup code to prevent memory leaks',
                priority: 'Critical'
            });
        }
        
        if (risk?.has_boundary_events) {
            actions.push({
                icon: 'fa-exchange',
                title: 'Document Ownership Transfer',
                description: 'Clearly document which side owns the memory after FFI calls',
                priority: 'Medium'
            });
        }
        
        // Default actions
        if (actions.length === 0) {
            actions.push({
                icon: 'fa-book',
                title: 'Add Safety Documentation',
                description: 'Document the safety invariants and assumptions',
                priority: 'Low'
            });
        }
        
        return actions.map(action => `
            <div class="recommended-action">
                <div class="action-header">
                    <i class="fa ${action.icon}"></i>
                    <strong>${action.title}</strong>
                    <span class="priority-badge priority-${action.priority.toLowerCase()}">${action.priority}</span>
                </div>
                <p class="action-description">${action.description}</p>
            </div>
        `).join('');
    }

    function getSeverityColor(severity) {
        if (severity >= 8) return '#dc2626';
        if (severity >= 6) return '#f59e0b';
        if (severity >= 4) return '#eab308';
        return '#10b981';
    }

    // Quick action functions
    function copyLocationToClipboard(location) {
        navigator.clipboard.writeText(location).then(() => {
            console.log('📋 Location copied to clipboard:', location);
            // Could show a toast notification here
        });
    }

    function openInEditor(location) {
        console.log('🔧 Opening in editor:', location);
        // This would integrate with VS Code or other editor
        // Example: vscode://file/path/to/file:line:column
    }

    function generateFixPatch(location, operation) {
        console.log('🪄 Generating fix patch for:', location, operation);
        // This would generate actual code fixes based on the risk type
    }

    function closeRiskActionModal() {
        const modal = document.getElementById('riskActionModal');
        if (modal) {
            modal.style.display = 'none';
        }
    }

    // Initialize enhanced unsafe analysis when data is available
    if (window.analysisData || window.unsafeFfiSnapshot) {
        setTimeout(() => {
            initializeEnhancedUnsafeAnalysis();
            setupDynamicSizeControls();
            setupRiskAnalysisTabs();
        }, 1200);
    }
  </script>

  <style>
    /* Enhanced Unsafe Rust & FFI Memory Analysis Styles */
    .unsafe-analysis-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .size-controls {
        display: flex;
        gap: 0.5rem;
        margin-right: 1rem;
    }

    .control-btn {
        padding: 0.4rem 0.8rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-light);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .control-btn:hover {
        background: var(--primary-blue);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }

    .unsafe-filter-controls {
        display: flex;
        align-items: center;
    }

    .unsafe-filter-tabs {
        display: flex;
        gap: 0.25rem;
        background: var(--bg-secondary);
        padding: 0.25rem;
        border-radius: 10px;
        border: 1px solid var(--border-light);
        box-shadow: var(--shadow-light);
    }

    .unsafe-filter-tab {
        padding: 0.4rem 0.8rem;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        white-space: nowrap;
        user-select: none;
        position: relative;
    }

    .unsafe-filter-tab:hover {
        background: var(--bg-primary);
        color: var(--text-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .unsafe-filter-tab.active {
        background: linear-gradient(135deg, var(--primary-blue), #3b82f6);
        color: white;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        transform: translateY(-2px);
    }

    /* Enhanced Swimlane Container */
    .enhanced-swimlane-container {
        background: var(--bg-secondary);
        border-radius: 16px;
        border: 1px solid var(--border-light);
        overflow: hidden;
        box-shadow: var(--shadow-light);
        transition: all 0.3s ease;
    }

    .card.expanded .enhanced-swimlane-container {
        min-height: 600px;
    }

    .card.compact .enhanced-swimlane-container {
        min-height: 400px;
    }

    /* Integrated Risk Analysis Styles */
    .integrated-risk-section {
        background: var(--bg-primary);
        border-radius: 12px;
        margin: 1.5rem;
        border: 1px solid var(--border-light);
        overflow: hidden;
    }

    .risk-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
        border-bottom: 1px solid var(--border-light);
    }

    .risk-section-header h4 {
        margin: 0;
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 600;
    }

    .risk-summary-stats {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .risk-stat {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.3rem 0.6rem;
        border-radius: 6px;
        background: var(--bg-secondary);
    }

    .risk-stat.high-risk {
        color: #dc2626;
        background: rgba(220, 38, 38, 0.1);
    }

    .risk-stat.medium-risk {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.1);
    }

    .risk-stat.low-risk {
        color: #10b981;
        background: rgba(16, 185, 129, 0.1);
    }

    .risk-analysis-tabs {
        display: flex;
        background: var(--bg-secondary);
        padding: 0.25rem;
        margin: 0 1.5rem;
        border-radius: 8px;
        gap: 0.25rem;
    }

    .risk-tab {
        flex: 1;
        padding: 0.4rem 0.6rem;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
    }

    .risk-tab:hover {
        background: var(--bg-primary);
        color: var(--text-primary);
    }

    .risk-tab.active {
        background: var(--primary-blue);
        color: white;
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    }

    .risk-views-container {
        padding: 1rem 1.5rem;
    }

    .risk-view {
        width: 100%;
    }

    /* Swimlane Container */
    .swimlane-container {
        flex: 1;
        background: var(--bg-primary);
        border-radius: 8px;
        overflow: hidden;
        margin: 1rem 1.5rem;
        border: 1px solid var(--border-light);
    }

    /* Dual Swimlane Layout */
    .dual-swimlane {
        position: relative;
        min-height: 300px;
    }

    .swimlane {
        position: relative;
        height: 100px;
        display: flex;
        border-bottom: 1px solid var(--border-light);
    }

    .rust-domain {
        background: linear-gradient(135deg, rgba(255, 107, 71, 0.08) 0%, rgba(255, 107, 71, 0.03) 100%);
    }

    .ffi-domain {
        background: linear-gradient(135deg, rgba(74, 158, 255, 0.08) 0%, rgba(74, 158, 255, 0.03) 100%);
    }

    .domain-label {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 1rem 1.5rem;
        min-width: 200px;
        background: rgba(255, 255, 255, 0.5);
        border-right: 1px solid var(--border-light);
    }

    .domain-icon {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-primary);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .domain-info h4 {
        margin: 0 0 0.2rem 0;
        color: var(--text-primary);
        font-size: 0.9rem;
        font-weight: 700;
    }

    .domain-info p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.7rem;
    }

    .timeline-track {
        flex: 1;
        position: relative;
        padding: 0.8rem;
        background: var(--bg-primary);
    }

    .timeline-axis {
        height: 30px;
        background: linear-gradient(90deg, var(--border-light) 0%, var(--border-light) 100%);
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        position: relative;
    }

    /* Enhanced Legend */
    .enhanced-legend {
        padding: 1.5rem 2rem;
        background: var(--bg-primary);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .legend-section h4 {
        margin: 0 0 1rem 0;
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 600;
        border-bottom: 2px solid var(--primary-blue);
        padding-bottom: 0.5rem;
    }

    .legend-items {
        display: grid;
        gap: 0.8rem;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.9rem;
        color: var(--text-secondary);
    }

    .event-symbol {
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        border-radius: 50%;
    }

    .rust-alloc { background: #ff6b47; color: white; }
    .ffi-alloc { background: #4a9eff; color: white; }
    .boundary-up { color: #00d4aa; font-size: 1.2rem; }
    .boundary-down { color: #ff4757; font-size: 1.2rem; }
    .dealloc { color: #a0a0a0; font-size: 1.2rem; }

    .risk-indicator {
        width: 20px;
        height: 12px;
        border-radius: 6px;
        display: inline-block;
    }

    .high-risk { background: linear-gradient(90deg, #ff4757, #ff3742); }
    .medium-risk { background: linear-gradient(90deg, #ffa502, #ff9f43); }
    .leak-risk { background: linear-gradient(90deg, #ff6b47, #ff5722); }

    /* Memory Passport Modal */
    .memory-passport-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        backdrop-filter: blur(4px);
    }

    .passport-content {
        background: var(--bg-primary);
        border-radius: 16px;
        max-width: 800px;
        width: 90%;
        max-height: 80%;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        border: 1px solid var(--border-light);
    }

    .passport-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 2rem;
        background: linear-gradient(135deg, var(--primary-blue), #3b82f6);
        color: white;
    }

    .passport-header h3 {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .passport-close {
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 4px;
        transition: background 0.2s ease;
    }

    .passport-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .passport-body {
        padding: 2rem;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Risk Action Modal Styles */
    .risk-action-section {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border-light);
    }

    .risk-action-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .risk-action-section h4 {
        margin: 0 0 1rem 0;
        color: var(--text-primary);
        font-size: 1.1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .risk-action-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .risk-action-item {
        padding: 0.75rem;
        background: var(--bg-secondary);
        border-radius: 8px;
        border: 1px solid var(--border-light);
    }

    .risk-action-item strong {
        color: var(--text-primary);
        font-weight: 600;
        margin-right: 0.5rem;
    }

    .risk-action-item code {
        background: var(--bg-primary);
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        color: var(--primary-blue);
    }

    /* Recommended Actions */
    .recommended-actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .recommended-action {
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 1rem;
        border: 1px solid var(--border-light);
        transition: all 0.2s ease;
    }

    .recommended-action:hover {
        border-color: var(--primary-blue);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.1);
    }

    .action-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .action-header i {
        color: var(--primary-blue);
        font-size: 1.1rem;
        width: 20px;
    }

    .action-header strong {
        color: var(--text-primary);
        font-weight: 600;
        flex: 1;
    }

    .priority-badge {
        padding: 0.2rem 0.6rem;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .priority-critical {
        background: rgba(220, 38, 38, 0.1);
        color: #dc2626;
        border: 1px solid rgba(220, 38, 38, 0.2);
    }

    .priority-high {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .priority-medium {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.2);
    }

    .priority-low {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .action-description {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Risk Factors */
    .risk-factors-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .risk-factor-item {
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 1rem;
        border: 1px solid var(--border-light);
    }

    .factor-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .factor-header strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    .severity-badge {
        padding: 0.2rem 0.6rem;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        color: white;
    }

    .factor-description {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Quick Actions */
    .quick-actions {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .quick-action-btn {
        padding: 0.75rem 1.5rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-light);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .quick-action-btn:hover {
        background: var(--primary-blue);
        color: white;
        border-color: var(--primary-blue);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }

    .quick-action-btn i {
        font-size: 0.9rem;
    }
  </style>
</head>

<body>
  <div class="dashboard-container">
    <!-- Header -->
    <header class="header">
      <div>
        <h1>{{PROJECT_NAME}} - Binary Memory Analysis Dashboard</h1>
        <div class="subtitle">Real-time Rust Memory Usage Monitoring</div>
      </div>
      <button id="theme-toggle" class="theme-toggle">
        <i class="fa fa-moon"></i>
        <span>Toggle Theme</span>
      </button>
    </header>

    <!-- KPI Metrics -->
    <section class="grid grid-4">
      <div class="kpi-card">
        <div class="kpi-value" id="total-allocations">-</div>
        <div class="kpi-label">Total Allocations</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value" id="active-variables">-</div>
        <div class="kpi-label">Active Variables</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value" id="total-memory">-</div>
        <div class="kpi-label">Total Memory</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value" id="safety-score">-</div>
        <div class="kpi-label">Safety Score</div>
      </div>
    </section>

    <!-- Key Performance Metrics (high priority position) -->
    <section class="grid grid-2">
      <div class="card">
        <h2><i class="fa fa-tachometer-alt"></i> Performance Metrics</h2>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
          <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
            <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-blue);" id="peak-memory">0B</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary);">Peak Memory</div>
          </div>
          <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
            <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-green);" id="allocation-rate">0/sec
            </div>
            <div style="font-size: 0.8rem; color: var(--text-secondary);">Allocation Rate</div>
          </div>
          <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
            <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-orange);" id="avg-lifetime">0ms</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary);">Avg Lifetime</div>
          </div>
          <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
            <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-red);" id="fragmentation">0%</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary);">Fragmentation</div>
          </div>
        </div>
      </div>
      <div class="card">
        <h2><i class="fa fa-shield-alt"></i> Thread Safety Analysis</h2>
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
          <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
            <div style="font-size: 1.2rem; font-weight: 600; color: var(--primary-blue);" id="arc-count">0</div>
            <div style="font-size: 0.7rem; color: var(--text-secondary);">Arc</div>
          </div>
          <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
            <div style="font-size: 1.2rem; font-weight: 600; color: var(--primary-green);" id="rc-count">0</div>
            <div style="font-size: 0.7rem; color: var(--text-secondary);">Rc</div>
          </div>
          <div style="text-align: center; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
            <div style="font-size: 1.2rem; font-weight: 600; color: var(--primary-orange);" id="collections-count">0
            </div>
            <div style="font-size: 0.7rem; color: var(--text-secondary);">Collections</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Memory Operations Analysis (Moved to front as summary) -->
    <section class="card">
      <h2><i class="fa fa-exchange"></i> Memory Operations Analysis</h2>
      <div id="memoryOperations" style="padding: 16px; background: var(--bg-secondary); border-radius: 8px;">
        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
          <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: 8px;">
            <div id="time-span" style="font-size: 1.4rem; font-weight: 700; color: var(--primary-blue);">-</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Time Span</div>
          </div>
          <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: 8px;">
            <div id="allocation-burst" style="font-size: 1.4rem; font-weight: 700; color: var(--primary-orange);">-</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Alloc Burst</div>
          </div>
          <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: 8px;">
            <div id="peak-concurrency" style="font-size: 1.4rem; font-weight: 700; color: var(--primary-red);">-</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Peak Concurrency</div>
          </div>
          <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: 8px;">
            <div id="thread-activity" style="font-size: 1.4rem; font-weight: 700; color: var(--primary-green);">-</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Thread Activity</div>
          </div>
          <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: 8px;">
            <div id="borrow-ops" style="font-size: 1.4rem; font-weight: 700; color: var(--primary-blue);">-</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Borrow Ops</div>
          </div>
          <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: 8px;">
            <div id="clone-ops" style="font-size: 1.4rem; font-weight: 700; color: var(--primary-orange);">-</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Clone Ops</div>
          </div>
          <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: 8px;">
            <div id="mut-ratio" style="font-size: 1.4rem; font-weight: 700; color: var(--primary-red);">-</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Mut/Immut</div>
          </div>
          <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: 8px;">
            <div id="avg-borrows" style="font-size: 1.4rem; font-weight: 700; color: var(--primary-green);">-</div>
            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Avg/Alloc</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Enhanced 3D Memory Layout & Timeline Playback -->
    <section class="card">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap;">
        <h2 style="margin: 0;"><i class="fa fa-cube"></i> 3D Memory Layout Visualization</h2>
        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
          <button id="toggle3DView" class="theme-toggle"
            style="background: var(--primary-green); font-size: 12px; padding: 6px 12px; white-space: nowrap;">
            <i class="fa fa-eye"></i>
            <span>3D View</span>
          </button>
          <button id="reset3DView" class="theme-toggle"
            style="background: var(--primary-orange); font-size: 12px; padding: 6px 12px; white-space: nowrap;">
            <i class="fa fa-refresh"></i>
            <span>Reset</span>
          </button>
          <button id="autoRotate3D" class="theme-toggle"
            style="background: var(--primary-blue); font-size: 12px; padding: 6px 12px; white-space: nowrap;">
            <i class="fa fa-rotate-right"></i>
            <span>Auto Rotate</span>
          </button>
          <button id="focusLargest" class="theme-toggle"
            style="background: var(--primary-red); font-size: 12px; padding: 6px 12px; white-space: nowrap;">
            <i class="fa fa-search-plus"></i>
            <span>Focus Largest</span>
          </button>
        </div>
      </div>
      <div id="memory3DContainer" class="memory-3d-container">
        <div class="memory-3d-info" id="memory3DInfo">
          Loading 3D visualization...
        </div>
      </div>

      <!-- Timeline Playback Controls -->
      <div class="timeline-container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
          <h3 style="margin: 0; font-size: 1rem;"><i class="fa fa-play-circle"></i> Memory Timeline Playback</h3>
          <div style="font-size: 0.8rem; color: var(--text-secondary);">
            <span id="timelineCurrentTime">0ms</span> / <span id="timelineTotalTime">0ms</span>
          </div>
        </div>
        <div class="timeline-slider" id="timelineSlider">
          <div class="timeline-progress" id="timelineProgress"></div>
          <div class="timeline-thumb" id="timelineThumb"></div>
        </div>
        <div class="timeline-controls">
          <button id="timelinePlay" class="timeline-btn">
            <i class="fa fa-play"></i> Play
          </button>
          <button id="timelinePause" class="timeline-btn" disabled>
            <i class="fa fa-pause"></i> Pause
          </button>
          <button id="timelineReset" class="timeline-btn">
            <i class="fa fa-refresh"></i> Reset
          </button>
          <button id="timelineStep" class="timeline-btn">
            <i class="fa fa-step-forward"></i> Step
          </button>
          <div style="display: flex; align-items: center; gap: 8px; margin-left: 16px;">
            <label style="font-size: 0.8rem; color: var(--text-secondary);">Speed:</label>
            <select id="timelineSpeed"
              style="background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 4px; padding: 2px 6px; font-size: 0.8rem;">
              <option value="0.25">0.25x</option>
              <option value="0.5">0.5x</option>
              <option value="1" selected>1x</option>
              <option value="2">2x</option>
              <option value="4">4x</option>
              <option value="8">8x</option>
            </select>
          </div>
        </div>
        <div style="margin-top: 8px; font-size: 0.8rem; color: var(--text-secondary); text-align: center;">
          Active Allocations: <span id="timelineActiveCount"
            style="color: var(--primary-blue); font-weight: 600;">0</span>
        </div>
      </div>
    </section>

    <!-- Unsafe Rust & FFI Memory Analysis (Enhanced with Integrated Risk Analysis) -->
    <section class="card" style="min-height: 700px;">
      <div class="unsafe-analysis-header">
        <div>
          <h2><i class="fa fa-shield-alt"></i> Unsafe Rust & FFI Memory Analysis</h2>
          <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px;">
            Advanced memory passport system with cross-boundary visualization and integrated risk assessment
          </p>
        </div>
        <!-- Enhanced Filter Controls with Dynamic Sizing -->
        <div class="unsafe-filter-controls">
          <div class="size-controls">
            <button id="expandAnalysis" class="control-btn">
              <i class="fa fa-expand"></i>
            </button>
            <button id="compactAnalysis" class="control-btn">
              <i class="fa fa-compress"></i>
            </button>
          </div>
          <div class="unsafe-filter-tabs">
            <button class="unsafe-filter-tab active" data-filter="critical">
              🚨 Critical (<span id="unsafe-critical-count">0</span>)
            </button>
            <button class="unsafe-filter-tab" data-filter="leaks">
              💧 Leaks (<span id="unsafe-leak-count">0</span>)
            </button>
            <button class="unsafe-filter-tab" data-filter="cross-boundary">
              🔄 Cross-Boundary (<span id="unsafe-boundary-count">0</span>)
            </button>
            <button class="unsafe-filter-tab" data-filter="risk-assessment">
              ⚠️ Risk Analysis
            </button>
            <button class="unsafe-filter-tab" data-filter="all">
              📊 All Data (<span id="unsafe-total-count">0</span>)
            </button>
          </div>
        </div>
      </div>

      <!-- Enhanced Cross-Boundary Swimlane Timeline -->
      <div class="enhanced-swimlane-container" id="enhancedSwimlaneContainer">
        <div class="swimlane-header">
          <h3><i class="fa fa-timeline"></i> Memory Passport Timeline</h3>
          <div class="timeline-controls">
            <button id="timelineZoomIn" class="timeline-control-btn">
              <i class="fa fa-search-plus"></i> Zoom In
            </button>
            <button id="timelineZoomOut" class="timeline-control-btn">
              <i class="fa fa-search-minus"></i> Zoom Out
            </button>
            <button id="timelineReset" class="timeline-control-btn">
              <i class="fa fa-refresh"></i> Reset View
            </button>
          </div>
        </div>

        <div class="dual-swimlane">
          <!-- Rust Safety Domain -->
          <div class="swimlane rust-domain">
            <div class="domain-label">
              <div class="domain-icon">🦀</div>
              <div class="domain-info">
                <h4>Rust Safety Domain</h4>
                <p>Ownership & borrow checker controlled</p>
              </div>
            </div>
            <div class="timeline-track" id="rustTimelineTrack"></div>
          </div>

          <!-- Timeline Axis -->
          <div class="timeline-axis" id="timelineAxis"></div>

          <!-- C/FFI Domain -->
          <div class="swimlane ffi-domain">
            <div class="domain-label">
              <div class="domain-icon">⚡</div>
              <div class="domain-info">
                <h4>C/FFI Domain</h4>
                <p>Manual memory management</p>
              </div>
            </div>
            <div class="timeline-track" id="ffiTimelineTrack"></div>
          </div>
        </div>

        <!-- Integrated Risk Analysis Section -->
        <div class="integrated-risk-section">
          <div class="risk-section-header">
            <h4><i class="fa fa-exclamation-triangle"></i> Safety Risk Analysis</h4>
            <div class="risk-summary-stats">
              <span class="risk-stat high-risk">
                <span id="high-risk-count">0</span> High
              </span>
              <span class="risk-stat medium-risk">
                <span id="medium-risk-count">0</span> Medium
              </span>
              <span class="risk-stat low-risk">
                <span id="low-risk-count">0</span> Low
              </span>
            </div>
          </div>

          <!-- Risk Analysis Tabs -->
          <div class="risk-analysis-tabs">
            <button class="risk-tab active" data-view="table">
              <i class="fa fa-table"></i> Risk Items
            </button>
            <button class="risk-tab" data-view="patterns">
              <i class="fa fa-chart-pie"></i> Pattern Analysis
            </button>
            <button class="risk-tab" data-view="locations">
              <i class="fa fa-map-marker"></i> Code Locations
            </button>
          </div>

          <!-- Risk Views Container -->
          <div class="risk-views-container">
            <!-- Risk Items Table View -->
            <div id="riskTableView" class="risk-view active">
              <div class="scroll" style="max-height: 200px;">
                <table>
                  <thead>
                    <tr>
                      <th>Location</th>
                      <th>Operation</th>
                      <th>Risk Level</th>
                      <th>Memory Size</th>
                      <th>Assessment</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody id="unsafeTable"></tbody>
                </table>
              </div>
            </div>

            <!-- Pattern Analysis View -->
            <div id="riskPatternsView" class="risk-view" style="display: none;">
              <div id="riskPatternsChart" style="height: 200px; background: var(--bg-secondary); border-radius: 8px;">
                <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary);">
                  <i class="fa fa-chart-pie" style="font-size: 1.5rem; opacity: 0.5;"></i>
                  <span style="margin-left: 1rem;">Risk pattern analysis loading...</span>
                </div>
              </div>
            </div>

            <!-- Code Locations View -->
            <div id="riskLocationsView" class="risk-view" style="display: none;">
              <div id="riskLocationsHeatmap" style="height: 200px; background: var(--bg-secondary); border-radius: 8px;">
                <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary);">
                  <i class="fa fa-map" style="font-size: 1.5rem; opacity: 0.5;"></i>
                  <span style="margin-left: 1rem;">Code location heatmap loading...</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Enhanced Legend with Pattern Recognition -->
        <div class="enhanced-legend">
          <div class="legend-section">
            <h4>Event Types</h4>
            <div class="legend-items">
              <div class="legend-item">
                <span class="event-symbol rust-alloc">●</span>
                <span>Unsafe Rust Allocation</span>
              </div>
              <div class="legend-item">
                <span class="event-symbol ffi-alloc">●</span>
                <span>FFI C Allocation</span>
              </div>
              <div class="legend-item">
                <span class="event-symbol boundary-up">▲</span>
                <span>FFI → Rust Transfer</span>
              </div>
              <div class="legend-item">
                <span class="event-symbol boundary-down">▼</span>
                <span>Rust → FFI Transfer</span>
              </div>
              <div class="legend-item">
                <span class="event-symbol dealloc">✕</span>
                <span>Memory Deallocation</span>
              </div>
            </div>
          </div>
          <div class="legend-section">
            <h4>Risk Patterns</h4>
            <div class="legend-items">
              <div class="legend-item">
                <span class="risk-indicator high-risk"></span>
                <span>High Risk - Potential double-free</span>
              </div>
              <div class="legend-item">
                <span class="risk-indicator medium-risk"></span>
                <span>Medium Risk - Ownership unclear</span>
              </div>
              <div class="legend-item">
                <span class="risk-indicator leak-risk"></span>
                <span>Memory Leak - No deallocation</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Memory Passport Modal -->
      <div id="memoryPassport" class="memory-passport-modal" style="display: none;">
        <div class="passport-content">
          <div class="passport-header">
            <h3><i class="fa fa-id-card"></i> Memory Passport</h3>
            <button class="passport-close">&times;</button>
          </div>
          <div class="passport-body" id="passportBody">
            <!-- Dynamic content populated by JavaScript -->
          </div>
        </div>
      </div>

      <!-- Risk Action Modal -->
      <div id="riskActionModal" class="memory-passport-modal" style="display: none;">
        <div class="passport-content">
          <div class="passport-header">
            <h3><i class="fa fa-tools"></i> Risk Mitigation Actions</h3>
            <button class="passport-close" onclick="closeRiskActionModal()">&times;</button>
          </div>
          <div class="passport-body" id="riskActionBody">
            <!-- Dynamic content populated by JavaScript -->
          </div>
        </div>
      </div>
    </section>

    <!-- Memory Analysis Dashboard module removed -->
      
      <div class="card">
        <h2>Memory Over Time</h2>
        <div class="chart-container">
          <canvas id="timelineChart"></canvas>
        </div>
        <div style="margin-top:8px; font-size:12px; color: var(--text-secondary); display:flex; gap:8px; align-items:center;">
          <label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
            <input id="toggleGrowthRate" type="checkbox" style="accent-color: var(--primary-green)">
            <span>Show Growth Rate</span>
          </label>
          <span style="opacity:0.8">Left Y: Cumulative memory, Right Y: Growth rate</span>
        </div>
        <!-- Integrated Key Metrics -->
        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px;">
          <div style="text-align: center; padding: 8px; background: var(--bg-secondary); border-radius: 6px;">
            <div style="font-size: 1rem; font-weight: 700; color: var(--primary-blue);" id="memoryFragmentation">0%</div>
            <div style="font-size: 0.7rem; color: var(--text-secondary);">Fragmentation</div>
          </div>
          <div style="text-align: center; padding: 8px; background: var(--bg-secondary); border-radius: 6px;">
            <div style="font-size: 1rem; font-weight: 700; color: var(--primary-green);" id="memoryEfficiency">0%</div>
            <div style="font-size: 0.7rem; color: var(--text-secondary);">Efficiency</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Memory Distribution Visualization -->
    <section class="card">
      <h2><i class="fa fa-chart-area"></i> Memory Distribution Visualization</h2>
      <!-- 动态尺寸控制 -->
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
        <div style="display: flex; gap: 8px; align-items: center;">
          <label style="font-size: 0.8rem; color: var(--text-secondary);">Scale:</label>
          <input type="range" id="memoryDistScale" min="50" max="200" value="100" 
                 style="width: 80px; accent-color: var(--primary-blue);">
          <span id="memoryDistScaleValue" style="font-size: 0.8rem; color: var(--text-secondary); min-width: 30px;">100%</span>
        </div>
        <div style="display: flex; gap: 8px;">
          <button id="memoryDistFit" class="theme-toggle" 
                  style="background: var(--primary-green); font-size: 10px; padding: 4px 8px;">
            <i class="fa fa-expand-arrows-alt"></i>
            <span>Fit</span>
          </button>
          <button id="memoryDistReset" class="theme-toggle" 
                  style="background: var(--primary-orange); font-size: 10px; padding: 4px 8px;">
            <i class="fa fa-refresh"></i>
            <span>Reset</span>
          </button>
        </div>
      </div>
      
      <div id="memoryDistributionViz"
        style="height: 200px; background: var(--bg-secondary); border-radius: 8px; position: relative; overflow: hidden; border: 1px solid var(--border-light);">
        <!-- Memory blocks visualization will be inserted here -->
      </div>
    </section>

    <!-- Memory Analysis (wider layout) -->
    <section class="grid grid-2">
      <div class="card">
        <h2>Type Treemap</h2>
        <div id="treemap" class="chart-container"
          style="height: 360px; padding: 0; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden;">
        </div>
      </div>
      <div class="card">
        <h2><i class="fa fa-timeline"></i> Variable Lifecycle Visualization</h2>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
          <div style="display: flex; gap: 6px;">
            <button id="filter-heap" class="theme-toggle"
              style="background: var(--primary-orange); font-size: 10px; padding: 3px 6px;">
              <span>Heap</span>
            </button>
            <button id="filter-stack" class="theme-toggle"
              style="background: var(--primary-blue); font-size: 10px; padding: 3px 6px;">
              <span>Stack</span>
            </button>
            <button id="toggle-lifecycle" class="theme-toggle"
              style="background: var(--primary-green); font-size: 10px; padding: 3px 6px;">
              <span>All</span>
            </button>
          </div>
          <div style="display: flex; gap: 12px; font-size: 0.75rem; color: var(--text-secondary);">
            <span>Heap: <span id="heap-count-mini"
                style="color: var(--primary-orange); font-weight: 600;">-</span></span>
            <span>Stack: <span id="stack-count-mini"
                style="color: var(--primary-blue); font-weight: 600;">-</span></span>
          </div>
        </div>
        <div style="margin-bottom: 8px;">
          <button id="manual-init-btn"
            style="background: var(--primary-red); color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 0.8rem; cursor: pointer;">
            🔄 Manual Initialize
          </button>
          <span id="init-status" style="margin-left: 8px; font-size: 0.8rem; color: var(--text-secondary);">Waiting for
            data...</span>
        </div>
        <div id="lifecycleVisualizationContainer" class="scroll" style="max-height: 320px; padding: 8px;">
          <!-- Variable lifecycle items will be inserted here -->
        </div>
      </div>
    </section>

    <!-- Advanced Analysis -->
    <section class="grid grid-2">
      <div class="card">
        <h2><i class="fa fa-puzzle-piece"></i> Memory Fragmentation Analysis</h2>
        <div style="padding: 16px; background: var(--bg-secondary); border-radius: 8px;">
          <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px;">
            <div style="text-align: center; padding: 12px; background: var(--bg-primary); border-radius: 6px;">
              <div style="font-size: 1.2rem; font-weight: 700; color: var(--primary-blue);" id="fragmentation-level">5.2%</div>
              <div style="font-size: 0.7rem; color: var(--text-secondary);">Fragmentation</div>
            </div>
            <div style="text-align: center; padding: 12px; background: var(--bg-primary); border-radius: 6px;">
              <div style="font-size: 1.2rem; font-weight: 700; color: var(--primary-green);" id="memory-utilization">94.8%</div>
              <div style="font-size: 0.7rem; color: var(--text-secondary);">Utilization</div>
            </div>
          </div>
          <div id="memoryFragmentation" style="height: 120px; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 6px; padding: 8px;">
            <!-- Simple fragmentation visualization -->
            <div style="display: flex; align-items: center; height: 100%; gap: 2px;">
              <div style="height: 100%; width: 15%; background: var(--primary-blue); border-radius: 2px; opacity: 0.8;"></div>
              <div style="height: 60%; width: 8%; background: var(--primary-orange); border-radius: 2px; opacity: 0.6;"></div>
              <div style="height: 80%; width: 12%; background: var(--primary-blue); border-radius: 2px; opacity: 0.8;"></div>
              <div style="height: 30%; width: 5%; background: var(--primary-red); border-radius: 2px; opacity: 0.5;"></div>
              <div style="height: 100%; width: 20%; background: var(--primary-blue); border-radius: 2px; opacity: 0.8;"></div>
              <div style="height: 40%; width: 6%; background: var(--primary-orange); border-radius: 2px; opacity: 0.6;"></div>
              <div style="height: 90%; width: 18%; background: var(--primary-blue); border-radius: 2px; opacity: 0.8;"></div>
              <div style="height: 25%; width: 4%; background: var(--primary-red); border-radius: 2px; opacity: 0.5;"></div>
              <div style="height: 70%; width: 12%; background: var(--primary-blue); border-radius: 2px; opacity: 0.8;"></div>
            </div>
            <div style="text-align: center; font-size: 0.7rem; color: var(--text-secondary); margin-top: 4px;">
              Memory Layout: <span style="color: var(--primary-blue);">■ Allocated</span> 
              <span style="color: var(--primary-orange);">■ Small Gaps</span> 
              <span style="color: var(--primary-red);">■ Large Gaps</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <h2><i class="fa fa-fire"></i> Borrow Activity Heatmap</h2>
        <div id="borrowPatternChart" style="height: 200px;"></div>
      </div>
    </section>

    <!-- Memory Allocation Details (moved from Advanced Analysis) -->
    <section class="grid grid-2">
      <div class="card">
        <h2><i class="fa fa-table"></i> Memory Allocation Details</h2>
        <div class="scroll">
          <table>
            <thead>
              <tr>
                <th>Variable</th>
                <th>Type</th>
                <th>Size</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody id="allocTable"></tbody>
          </table>
        </div>
      </div>
      
      <div class="card">
        <h2><i class="fa fa-info-circle"></i> System Status</h2>
        <div style="padding: 16px; background: var(--bg-secondary); border-radius: 8px;">
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
            <div style="text-align: center; padding: 12px; background: var(--bg-primary); border-radius: 6px;">
              <div style="font-size: 1.2rem; font-weight: 700; color: var(--primary-blue);" id="dashboard-status">Ready</div>
              <div style="font-size: 0.7rem; color: var(--text-secondary);">Dashboard</div>
            </div>
            <div style="text-align: center; padding: 12px; background: var(--bg-primary); border-radius: 6px;">
              <div style="font-size: 1.2rem; font-weight: 700; color: var(--primary-green);" id="data-status">Loading</div>
              <div style="font-size: 0.7rem; color: var(--text-secondary);">Data Status</div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <!-- Variable Relationships (Full Width) -->
    <section class="card">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap;">
        <h2 style="margin: 0;"><i class="fa fa-share-alt"></i> Variable Relationships Graph</h2>
        <div style="display: flex; gap: 8px; flex-wrap: nowrap;">
          <button id="reset-zoom" class="theme-toggle"
            style="background: var(--primary-orange); font-size: 12px; padding: 6px 12px; white-space: nowrap;">
            <i class="fa fa-expand"></i>
            <span>Reset View</span>
          </button>
          <button id="auto-layout" class="theme-toggle"
            style="background: var(--primary-green); font-size: 12px; padding: 6px 12px; white-space: nowrap;">
            <i class="fa fa-magic"></i>
            <span>Auto Layout</span>
          </button>
        </div>
      </div>
      <div id="graph"
        style="height: 400px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 8px; position: relative; overflow: hidden;">
      </div>
    </section>

  </div>

  <script>
    // Global safe update function - must be defined first
    function safeUpdateElement(id, value, defaultValue = '-') {
      try {
        const el = document.getElementById(id);
        if (el) {
          el.textContent = value;
          return true;
        } else {
          console.warn(`Element with ID '${id}' not found`);
          return false;
        }
      } catch (error) {
        console.error(`Error updating element ${id}:`, error);
        return false;
      }
    }

    // Enhanced Lifecycle Visualization Functions
    function inferAllocationType(typeName) {
      if (!typeName) return 'unknown';

      const heapTypes = ['Box', 'Vec', 'String', 'HashMap', 'BTreeMap', 'Arc', 'Rc', 'alloc::', 'std::collections'];
      const stackTypes = ['i32', 'i64', 'f32', 'f64', 'bool', 'char', 'usize', 'isize', 'u8', 'u16', 'u32', 'u64'];

      for (const heapType of heapTypes) {
        if (typeName.includes(heapType)) return 'heap';
      }

      for (const stackType of stackTypes) {
        if (typeName.includes(stackType)) return 'stack';
      }

      if (typeName.includes('*') || typeName.includes('&')) return 'heap';

      return 'unknown';
    }

    function formatTimestamp(timestamp) {
      if (!timestamp || isNaN(timestamp) || timestamp <= 0) return 'N/A';

      // Handle different timestamp formats
      let timeInMs;
      if (timestamp > 1e15) {
        // Nanoseconds
        timeInMs = timestamp / 1000000;
      } else if (timestamp > 1e12) {
        // Microseconds  
        timeInMs = timestamp / 1000;
      } else {
        // Already in milliseconds
        timeInMs = timestamp;
      }

      const date = new Date(timeInMs);
      if (isNaN(date.getTime())) return 'N/A';

      // Format as relative time if recent, otherwise absolute time
      const now = Date.now();
      const diffMs = Math.abs(now - timeInMs);

      if (diffMs < 1000) {
        return `${diffMs.toFixed(0)}ms ago`;
      } else if (diffMs < 60000) {
        return `${(diffMs / 1000).toFixed(1)}s ago`;
      } else {
        return date.toLocaleTimeString() + '.' + String(date.getMilliseconds()).padStart(3, '0');
      }
    }

    function formatTimestampSafe(timestamp, fallbackIndex) {
      if (!timestamp || isNaN(timestamp) || timestamp <= 0) {
        // Return synthetic time based on index
        return `T+${(fallbackIndex * 1).toFixed(1)}ms`;
      }

      // Handle nanosecond timestamps (typical format from Rust)
      let timeInMs;
      if (timestamp > 1e15) {
        // Nanoseconds (typical Rust timestamp format)
        timeInMs = timestamp / 1000000;
      } else if (timestamp > 1e12) {
        // Microseconds  
        timeInMs = timestamp / 1000;
      } else if (timestamp > 1e9) {
        // Milliseconds
        timeInMs = timestamp;
      } else {
        // Seconds to milliseconds
        timeInMs = timestamp * 1000;
      }

      // Convert to relative time from program start
      // Use the first allocation timestamp as reference if available
      const firstTimestamp = window.analysisData?.memory_analysis?.allocations?.[0]?.timestamp_alloc || timestamp;
      const relativeTimeMs = (timestamp - firstTimestamp) / 1000000;

      if (Math.abs(relativeTimeMs) < 0.001) {
        return 'T+0.00ms';
      } else if (relativeTimeMs >= 0) {
        return `T+${relativeTimeMs.toFixed(2)}ms`;
      } else {
        return `T${relativeTimeMs.toFixed(2)}ms`;
      }
    }

    function calculateDropTime(allocTime, lifetimeMs) {
      if (!allocTime || lifetimeMs === undefined || isNaN(allocTime) || isNaN(lifetimeMs)) return null;
      return allocTime + (lifetimeMs * 1000000); // Convert ms to nanoseconds and add
    }

    function formatLifetime(lifetimeMs) {
      if (lifetimeMs === undefined || lifetimeMs === null) return 'N/A';
      if (lifetimeMs < 1) return `${(lifetimeMs * 1000).toFixed(1)}μs`;
      if (lifetimeMs < 1000) return `${lifetimeMs.toFixed(1)}ms`;
      return `${(lifetimeMs / 1000).toFixed(2)}s`;
    }

    function formatBytes(bytes) {
      if (bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
    }

    function initEnhancedLifecycleVisualization() {
      // Debug what's available
      console.log('Checking data availability...');
      console.log('window.analysisData exists:', !!window.analysisData);
      console.log('window.analysisData type:', typeof window.analysisData);

      if (window.analysisData) {
        console.log('window.analysisData keys:', Object.keys(window.analysisData));
      }

      // Try multiple data structure paths
      let allocations = null;

      if (window.analysisData) {
        // Method 1: Direct allocations (old structure)
        if (window.analysisData.allocations && Array.isArray(window.analysisData.allocations)) {
          allocations = window.analysisData.allocations;
          console.log('✅ Found allocations directly:', allocations.length);
        }
        // Method 2: Memory analysis structure (new structure)
        else if (window.analysisData.memory_analysis && window.analysisData.memory_analysis.allocations) {
          allocations = window.analysisData.memory_analysis.allocations;
          console.log('✅ Found allocations in memory_analysis:', allocations.length);
        }
        // Method 3: Check all keys for allocations
        else {
          for (const [key, value] of Object.entries(window.analysisData)) {
            if (value && typeof value === 'object' && value.allocations && Array.isArray(value.allocations)) {
              allocations = value.allocations;
              console.log('✅ Found allocations in', key + ':', allocations.length);
              break;
            }
          }
        }
      }

      if (!allocations || !Array.isArray(allocations) || allocations.length === 0) {
        console.warn('No allocation data found in window.analysisData');

        // Fallback: Try to get data from other global variables that might be set by the dashboard
        if (typeof getAllocations === 'function') {
          try {
            allocations = getAllocations();
            console.log('✅ Got allocations from getAllocations():', allocations.length);
          } catch (e) {
            console.warn('getAllocations() failed:', e);
          }
        }

        // Another fallback: Check if data is in a different global variable
        if (!allocations && window.memoryAnalysisData) {
          if (window.memoryAnalysisData.allocations) {
            allocations = window.memoryAnalysisData.allocations;
            console.log('✅ Got allocations from memoryAnalysisData:', allocations.length);
          }
        }

        // Final fallback: Try to extract from existing DOM elements
        if (!allocations) {
          const existingTable = document.getElementById('allocTable');
          if (existingTable && existingTable.children.length > 1) {
            console.log('Trying to extract data from existing table...');
            // This is a last resort - we'll create dummy data based on table rows
            const rows = existingTable.querySelectorAll('tbody tr');
            if (rows.length > 0) {
              allocations = Array.from(rows).map((row, index) => {
                const cells = row.querySelectorAll('td');
                return {
                  var_name: cells[0]?.textContent || `var_${index}`,
                  type_name: cells[1]?.textContent || 'unknown',
                  size: parseInt(cells[2]?.textContent) || 0,
                  timestamp_alloc: Date.now() * 1000000 + index * 1000000,
                  lifetime_ms: parseFloat(cells[3]?.textContent) || 1.0,
                  is_leaked: cells[4]?.textContent?.includes('Yes') || false
                };
              });
              console.log('✅ Extracted', allocations.length, 'allocations from existing table');
            }
          }
        }

        if (!allocations || allocations.length === 0) {
          console.error('❌ No allocation data available from any source');
          return;
        }
      }

      if (allocations.length === 0) {
        console.warn('No allocation data found');
        return;
      }

      console.log('✅ Found', allocations.length, 'allocations for enhanced visualization');
      console.log('Sample allocation:', allocations[0]);

      // Statistics
      let heapCount = 0, stackCount = 0, unknownCount = 0;
      let totalLifetime = 0, validLifetimes = 0;
      let totalMemory = 0;

      allocations.forEach(alloc => {
        const type = inferAllocationType(alloc.type_name);
        if (type === 'heap') heapCount++;
        else if (type === 'stack') stackCount++;
        else unknownCount++;

        // Check multiple possible lifetime fields and ensure they're valid numbers
        const lifetime = alloc.lifetime_ms || alloc.lifetime || 0;
        if (lifetime !== undefined && lifetime !== null && !isNaN(lifetime) && lifetime > 0) {
          totalLifetime += lifetime;
          validLifetimes++;
        }

        totalMemory += alloc.size || 0;
      });

      console.log('Statistics calculated:', { heapCount, stackCount, totalLifetime, validLifetimes });

      // Update mini counters
      const heapCountMini = document.getElementById('heap-count-mini');
      const stackCountMini = document.getElementById('stack-count-mini');

      if (heapCountMini) {
        safeUpdateElement('heap-count-mini', heapCount);
        console.log('Updated heap-count-mini:', heapCount);
      } else {
        console.warn('heap-count-mini element not found');
      }

      if (stackCountMini) {
        safeUpdateElement('stack-count-mini', stackCount);
        console.log('Updated stack-count-mini:', stackCount);
      } else {
        console.warn('stack-count-mini element not found');
      }

      // Create lifecycle visualization
      console.log('Calling createLifecycleVisualization...');
      createLifecycleVisualization(allocations);

      // Update enhanced statistics
      console.log('Calling updateEnhancedStatistics...');
      updateEnhancedStatistics(allocations, heapCount, stackCount, validLifetimes, totalLifetime);

      // Setup filters
      console.log('Calling setupLifecycleFilters...');
      setupLifecycleFilters(allocations);

      console.log('✅ All enhanced features processing completed');
    }

    function createLifecycleVisualization(allocations) {
      console.log('createLifecycleVisualization called with', allocations.length, 'allocations');
      const container = document.getElementById('lifecycleVisualizationContainer');
      if (!container) {
        console.error('❌ Lifecycle visualization container not found in DOM');
        return;
      }
      console.log('✅ Found lifecycleVisualizationContainer, creating visualization...');
      container.innerHTML = '';

      // Calculate timeline bounds
      const timestamps = allocations.map(a => a.timestamp_alloc).filter(t => t);
      const minTime = Math.min(...timestamps);
      const maxTime = Math.max(...timestamps);
      const timeRange = maxTime - minTime || 1;

      allocations.forEach((alloc, index) => {
        const allocType = inferAllocationType(alloc.type_name);
        let startTime = alloc.timestamp_alloc || alloc.timestamp || Date.now() * 1000000;
        const lifetime = alloc.lifetime_ms || alloc.lifetime || 0;
        let endTime = startTime + (lifetime * 1000000); // Convert ms to nanoseconds

        // Calculate lifetime from timestamps if not provided
        let calculatedLifetime = 0;
        if (alloc.timestamp_dealloc && alloc.timestamp_alloc) {
          calculatedLifetime = (alloc.timestamp_dealloc - alloc.timestamp_alloc) / 1000000; // Convert to ms
        } else if (alloc.lifetime_ms) {
          calculatedLifetime = alloc.lifetime_ms;
        } else {
          // Default lifetime for active allocations
          calculatedLifetime = 10; // 10ms default
        }

        // Use actual timestamps if available, otherwise create synthetic ones
        if (alloc.timestamp_alloc && !isNaN(alloc.timestamp_alloc)) {
          startTime = alloc.timestamp_alloc;
          endTime = alloc.timestamp_dealloc || (startTime + calculatedLifetime * 1000000);
        } else {
          // Create synthetic timeline based on allocation order
          startTime = minTime + (index * (timeRange / allocations.length));
          endTime = startTime + (calculatedLifetime * 1000000);
        }

        // Debug and validate time data
        console.log('Debug allocation:', {
          var_name: alloc.var_name,
          timestamp_alloc: alloc.timestamp_alloc,
          timestamp_dealloc: alloc.timestamp_dealloc,
          calculatedLifetime: calculatedLifetime,
          startTime: startTime,
          endTime: endTime,
          isValidStart: !isNaN(startTime) && startTime > 0,
          isValidEnd: !isNaN(endTime) && endTime > 0
        });

        // Calculate positions and widths with bounds checking
        let startPercent = ((startTime - minTime) / timeRange) * 100;
        let endPercent = ((endTime - minTime) / timeRange) * 100;

        // Ensure values are within bounds
        startPercent = Math.max(0, Math.min(startPercent, 100));
        endPercent = Math.max(startPercent, Math.min(endPercent, 100));

        let width = endPercent - startPercent;
        width = Math.max(width, 2); // Minimum 2% width
        width = Math.min(width, 100 - startPercent); // Don't exceed container

        // Create lifecycle item
        const item = document.createElement('div');
        item.className = `lifecycle-item ${allocType}`;
        item.setAttribute('data-type', allocType);

        // Enhanced solid colors for better visibility
        const barColor = allocType === 'heap' ? '#ff6b35' :
          allocType === 'stack' ? '#4dabf7' : '#868e96';
        const barGradient = allocType === 'heap' ? '#ff6b35' :
          allocType === 'stack' ? '#4dabf7' :
            '#868e96';

        item.innerHTML = `
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
            <div style="display: flex; align-items: center; gap: 8px;">
              <span style="font-weight: 600; font-size: 0.9rem; min-width: 120px;">${alloc.var_name || 'unnamed'}</span>
              <span class="allocation-type type-${allocType}">${allocType}</span>
            </div>
            <div style="display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-secondary);">
              <span>${formatBytes(alloc.size || 0)}</span>
              <span>${formatLifetime(lifetime)}</span>
            </div>
          </div>
          
          <!-- Enhanced Timeline Progress Bar -->
          <div style="position: relative; height: 24px; background: linear-gradient(90deg, #e8eaed, #ddd); border-radius: 12px; margin: 10px 0; border: 1px solid #bbb; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);">
            
            <!-- Variable active period with enhanced gradient -->
            <div style="position: absolute; top: 1px; left: ${startPercent}%; width: ${width}%; height: calc(100% - 2px); 
                        background: ${barGradient}; 
                        border-radius: 11px; 
                        box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.3);
                        transition: all 0.3s ease;
                        position: relative;
                        overflow: hidden;">
              
              <!-- Animated shine effect -->
              <div style="position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 
                          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
                          animation: shine 2s infinite;"></div>
            </div>
            
            ${alloc.is_leaked ? `
              <!-- Leaked indicator -->
              <div style="position: absolute; top: -3px; right: 2px; width: 20px; height: 30px; 
                          background: linear-gradient(45deg, #ff4757, #ff3742); 
                          border-radius: 2px; 
                          box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                          display: flex; align-items: center; justify-content: center;
                          font-size: 10px; color: white; font-weight: bold;">⚠</div>
            ` : ''}
          </div>
          
          <!-- Time info -->
          <div style="display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-secondary); font-family: monospace;">
            <span>Start: ${formatTimestampSafe(startTime, index)}</span>
            <span>${alloc.is_leaked ? 'LEAKED' : (formatTimestampSafe(endTime, index + 1) !== 'N/A' ? 'End: ' + formatTimestampSafe(endTime, index + 1) : 'Active')}</span>
          </div>
        `;

        // Enhanced hover effect and styling
        item.style.cssText += `
          margin-bottom: 18px;
          padding: 16px;
          background: linear-gradient(135deg, var(--bg-primary), #fafbfc);
          border-radius: 12px;
          border-left: 5px solid ${barColor};
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          cursor: pointer;
          box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        `;

        item.addEventListener('mouseenter', () => {
          item.style.transform = 'translateX(8px) translateY(-2px)';
          item.style.boxShadow = '0 8px 25px rgba(0,0,0,0.15)';
          item.style.background = `linear-gradient(135deg, var(--bg-primary), ${barColor}08)`;
        });

        item.addEventListener('mouseleave', () => {
          item.style.transform = 'translateX(0) translateY(0)';
          item.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';
          item.style.background = 'linear-gradient(135deg, var(--bg-primary), #fafbfc)';
        });

        container.appendChild(item);
      });
    }

    function updateEnhancedStatistics(allocations, heapCount, stackCount, validLifetimes, totalLifetime) {
      console.log('Updating enhanced statistics...');

      // Update Enhanced Memory Statistics
      const totalAllocsEnhanced = document.getElementById('total-allocs-enhanced');
      const heapStackRatio = document.getElementById('heap-stack-ratio');
      const avgLifetimeEnhanced = document.getElementById('avg-lifetime-enhanced');
      const memoryEfficiency = document.getElementById('memory-efficiency');

      if (totalAllocsEnhanced) {
        safeUpdateElement('total-allocs-enhanced', allocations.length);
        console.log('Updated total-allocs-enhanced:', allocations.length);
      }

      // Safe DOM updates with enhanced error handling
      if (heapStackRatio) {
        try {
          const ratio = stackCount > 0 ? (heapCount / stackCount).toFixed(1) : heapCount;
          safeUpdateElement('heap-stack-ratio', ratio + ':1');
          console.log('Updated heap-stack-ratio:', ratio + ':1');
        } catch (error) {
          console.error('Error updating heap-stack-ratio:', error);
        }
      }

      if (avgLifetimeEnhanced) {
        try {
          const avgLifetime = validLifetimes > 0 ? formatLifetime(totalLifetime / validLifetimes) : 'N/A';
          safeUpdateElement('avg-lifetime-enhanced', avgLifetime);
          console.log('Updated avg-lifetime-enhanced:', avgLifetime);
        } catch (error) {
          console.error('Error updating avg-lifetime-enhanced:', error);
        }
      }

      const memoryEfficiencyEl = document.getElementById('memory-efficiency');
      if (memoryEfficiencyEl) {
        try {
          const efficiency = allocations.length > 0 ? ((allocations.length - allocations.filter(a => a.is_leaked).length) / allocations.length * 100).toFixed(0) : 0;
          safeUpdateElement('memory-efficiency', efficiency + '%');
          console.log('Updated memory-efficiency:', efficiency + '%');
        } catch (error) {
          console.error('Error updating memory-efficiency:', error);
        }
      }
    }


    function setupLifecycleFilters(allocations) {
      const heapBtn = document.getElementById('filter-heap');
      const stackBtn = document.getElementById('filter-stack');
      const allBtn = document.getElementById('toggle-lifecycle');

      // Check if all buttons exist
      if (!heapBtn || !stackBtn || !allBtn) {
        console.warn('Some filter buttons not found');
        return;
      }

      let currentFilter = 'all';

      function applyFilter(filter) {
        currentFilter = filter;
        const items = document.querySelectorAll('.lifecycle-item');

        // Update button states
        [heapBtn, stackBtn, allBtn].forEach(btn => btn.style.opacity = '0.6');

        if (filter === 'heap') {
          heapBtn.style.opacity = '1';
          items.forEach(item => {
            item.style.display = item.getAttribute('data-type') === 'heap' ? 'block' : 'none';
          });
        } else if (filter === 'stack') {
          stackBtn.style.opacity = '1';
          items.forEach(item => {
            item.style.display = item.getAttribute('data-type') === 'stack' ? 'block' : 'none';
          });
        } else {
          allBtn.style.opacity = '1';
          items.forEach(item => {
            item.style.display = 'block';
          });
        }
      }

      heapBtn.addEventListener('click', () => applyFilter('heap'));
      stackBtn.addEventListener('click', () => applyFilter('stack'));
      allBtn.addEventListener('click', () => applyFilter('all'));

      // Initialize
      applyFilter('all');
    }

    // Initialize enhanced features when DOM is loaded
    function initEnhancedFeatures() {
      try {
        initEnhancedLifecycleVisualization();
      } catch (error) {
        console.error('Error initializing enhanced lifecycle visualization:', error);
      }
    }

    // Safe initialization wrapper with duplicate prevention
    let enhancedInitialized = false;
    function safeInitEnhanced() {
      if (enhancedInitialized) {
        return; // Already initialized
      }

      try {
        initEnhancedFeatures();
        enhancedInitialized = true;
        console.log('✅ Enhanced features initialized successfully');
      } catch (error) {
        console.warn('Enhanced features initialization failed:', error);
      }
    }

    {{JS_CONTENT}}

    // Override problematic functions AFTER JS_CONTENT loads
    window.updateLifecycleStatistics = function () {
      // Safe override - prevent errors from missing DOM elements
      try {
        // Try to find and update elements safely
        const elements = ['active-vars', 'freed-vars', 'leaked-vars', 'avg-lifetime-stat'];
        elements.forEach(id => {
          const el = document.getElementById(id);
          safeUpdateElement(id, '-');
        });
      } catch (e) {
        // Silently ignore errors
      }
    };

    // Override other potential problem functions
    window.updateKPIMetrics = function () { return; };
    window.populateLifetimeTable = function () { return; };
    window.updateMemoryStats = function () { return; };

    // Manual initialization function for testing
    function manualInitialize() {
      const statusEl = document.getElementById('init-status');
      safeUpdateElement('init-status', 'Initializing...');

      console.log('🔄 Manual initialization triggered');
      console.log('window.analysisData:', window.analysisData);

      if (window.analysisData && window.analysisData.memory_analysis && window.analysisData.memory_analysis.allocations) {
        console.log('✅ Data found, calling initEnhancedLifecycleVisualization...');
        initEnhancedLifecycleVisualization();
        safeUpdateElement('init-status', 'Initialized successfully!');
      } else {
        console.warn('❌ No data found, trying to load...');
        safeUpdateElement('init-status', 'Loading data...');

        // Try to load data manually
        fetch('./large_scale_user_memory_analysis.json')
          .then(response => response.json())
          .then(memoryData => {
            console.log('✅ Manually loaded data:', memoryData);
            window.analysisData = {
              memory_analysis: memoryData
            };
            initEnhancedLifecycleVisualization();
            safeUpdateElement('init-status', 'Data loaded and initialized!');
          })
          .catch(error => {
            console.error('❌ Failed to load data:', error);
            safeUpdateElement('init-status', 'Failed to load data');
          });
      }
    }

    // Wait for all scripts to load, then initialize
    function waitForDataAndInit() {
      if (window.analysisData && window.analysisData.memory_analysis && window.analysisData.memory_analysis.allocations) {
        safeUpdateElement('data-status', 'Processing');
        
        try {
          safeInitEnhanced();
          
          // Auto-load Safety Risk Analysis when data is ready
          setTimeout(() => {
            console.log('🛡️ Data ready - auto-loading Safety Risk Analysis...');
            try {
              initializeEnhancedUnsafeAnalysis();
              loadSafetyRisks();
              console.log('✅ Safety Risk Analysis loaded automatically');
            } catch (riskError) {
              console.error('❌ Error auto-loading safety risks:', riskError);
            }
          }, 500);
          
          // Initialize enhanced visualization features
          if (window.enhancedVisualizer) {
            setTimeout(() => {
              console.log('Initializing enhanced visualizer...');
              window.enhancedVisualizer.init();
              window.enhancedVisualizer.initializeWithData(window.analysisData);
              console.log('Enhanced visualizer initialized');
              safeUpdateElement('data-status', 'Ready');
            }, 1000); // Give more time for DOM elements to be ready
          } else {
            safeUpdateElement('data-status', 'Ready');
          }
        } catch (error) {
          console.error('❌ Error during data initialization:', error);
          safeUpdateElement('data-status', 'Error');
        }
      } else {
        setTimeout(waitForDataAndInit, 200);
      }
    }


    // Initialize enhanced features after everything loads
    // Theme System Functions
    function initializeThemeSystem() {
      console.log('🎨 Initializing theme system...');
      
      const themeToggle = document.getElementById('theme-toggle');
      const htmlElement = document.documentElement;
      
      // Load saved theme or default to light
      const savedTheme = localStorage.getItem('theme') || 'light';
      htmlElement.className = savedTheme;
      
      if (themeToggle) {
        // Update button text based on current theme
        updateThemeButtonText(savedTheme);
        
        themeToggle.addEventListener('click', function() {
          const currentTheme = htmlElement.className;
          const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
          
          htmlElement.className = newTheme;
          localStorage.setItem('theme', newTheme);
          updateThemeButtonText(newTheme);
          
          console.log('🎨 Theme switched to:', newTheme);
        });
      }
    }
    
    function updateThemeButtonText(theme) {
      const themeToggle = document.getElementById('theme-toggle');
      if (themeToggle) {
        themeToggle.innerHTML = theme === 'dark' 
          ? '<i class="fa fa-sun-o"></i>' 
          : '<i class="fa fa-moon-o"></i>';
        themeToggle.title = theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
      }
    }

    document.addEventListener('DOMContentLoaded', function () {
      console.log('🚀 Dashboard initialization started');
      
      // Initialize theme system first
      initializeThemeSystem();
      
      // Update status indicators
      safeUpdateElement('dashboard-status', 'Initializing');
      safeUpdateElement('data-status', 'Loading');
      
      try {
        // Setup manual initialize button
        const manualBtn = document.getElementById('manual-init-btn');
        if (manualBtn) {
          manualBtn.addEventListener('click', manualInitialize);
        }
        
        // Load safety risks after initialization with longer delay
        setTimeout(function() {
          try {
            console.log('🛡️ Auto-loading safety risks on dashboard initialization...');
            loadSafetyRisks();
            // Also ensure unsafe analysis is initialized
            if (window.analysisData) {
              initializeEnhancedUnsafeAnalysis();
            }
          } catch (error) {
            console.error('❌ Error loading safety risks:', error);
          }
        }, 1500); // Increased delay to ensure data is loaded

        // Start checking for data immediately
        waitForDataAndInit();
        
        // Initialize dashboard functions if data is already available
        setTimeout(() => {
          if (window.analysisData && window.analysisData.memory_analysis && window.analysisData.memory_analysis.allocations) {
            console.log('🎯 Data ready - calling initDashboard...');
            try {
              if (typeof initDashboard === 'function') {
                initDashboard();
              } else {
                console.warn('initDashboard function not found, calling individual functions...');
                // Call individual functions from our generated JS
                const allocations = window.analysisData.memory_analysis.allocations;
                updateKPIs(allocations);
                renderMemoryOverTime(allocations);
                renderTypeTreemap(allocations);
                renderBorrowHeatmap(allocations);
                renderVariableGraph(allocations);
                populateAllocationTable(allocations);
              }
            } catch (error) {
              console.error('❌ Error calling dashboard functions:', error);
            }
          }
        }, 2000);
        
        safeUpdateElement('dashboard-status', 'Ready');
        console.log('✅ Dashboard initialization completed');
        
      } catch (error) {
        console.error('❌ Dashboard initialization failed:', error);
        safeUpdateElement('dashboard-status', 'Error');
        safeUpdateElement('data-status', 'Failed');
      }
    });
  </script>
</body>

</html>
"#;