mcp-vector-search 1.0.3__py3-none-any.whl → 1.1.22__py3-none-any.whl

mcp_vector_search/cli/commands/visualize/templates/scripts.py

@@ -50,6 +50,9 @@ let navigationIndex = -1;
 // Call lines visibility
 let showCallLines = true;
 
+// File filter: 'all', 'code', 'docs'
+let currentFileFilter = 'all';
+
 // Chunk types for code nodes (function, class, method, text, imports, module)
 const chunkTypes = ['function', 'class', 'method', 'text', 'imports', 'module'];
 
@@ -57,8 +60,8 @@ const chunkTypes = ['function', 'class', 'method', 'text', 'imports', 'module'];
 const sizeConfig = {
     minRadius: 12,      // Minimum node radius (50% larger for readability)
     maxRadius: 24,      // Maximum node radius
-    chunkMinRadius: 9,  // Minimum for chunks (50% larger for readability)
-    chunkMaxRadius: 16  // Maximum for chunks
+    chunkMinRadius: 5,  // Minimum for small chunks (more visible size contrast)
+    chunkMaxRadius: 28  // Maximum for large chunks (more visible size contrast)
 };
 
 // Dynamic dimensions that update when viewer opens/closes
@@ -76,13 +79,133 @@ const margin = {top: 40, right: 120, bottom: 20, left: 120};
 // DATA LOADING
 // ============================================================================
 
+let graphStatusCheckInterval = null;
+
+async function checkGraphStatus() {
+    try {
+        const response = await fetch('/api/graph-status');
+        const status = await response.json();
+        return status;
+    } catch (error) {
+        console.error('Failed to check graph status:', error);
+        return { ready: false, size: 0 };
+    }
+}
+
+function showLoadingIndicator(message) {
+    const loadingDiv = document.getElementById('graph-loading-indicator') || createLoadingDiv();
+    loadingDiv.querySelector('.loading-message').textContent = message;
+    loadingDiv.style.display = 'flex';
+}
+
+function hideLoadingIndicator() {
+    const loadingDiv = document.getElementById('graph-loading-indicator');
+    if (loadingDiv) {
+        loadingDiv.style.display = 'none';
+    }
+}
+
+function createLoadingDiv() {
+    const div = document.createElement('div');
+    div.id = 'graph-loading-indicator';
+    div.style.cssText = `
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: rgba(255, 255, 255, 0.95);
+        padding: 30px 50px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        z-index: 10000;
+    `;
+
+    const spinner = document.createElement('div');
+    spinner.style.cssText = `
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #3498db;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        animation: spin 1s linear infinite;
+    `;
+
+    const message = document.createElement('div');
+    message.className = 'loading-message';
+    message.style.cssText = 'color: #333; font-size: 16px; font-family: Arial, sans-serif;';
+    message.textContent = 'Loading graph data...';
+
+    div.appendChild(spinner);
+    div.appendChild(message);
+    document.body.appendChild(div);
+
+    // Add spinner animation
+    const style = document.createElement('style');
+    style.textContent = '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }';
+    document.head.appendChild(style);
+
+    return div;
+}
+
 async function loadGraphData() {
+    try {
+        // Check if graph is ready
+        const status = await checkGraphStatus();
+
+        if (!status.ready) {
+            console.log('Graph data not ready yet, will poll every 5 seconds...');
+            showLoadingIndicator('Generating graph data... This may take a few minutes.');
+
+            // Start polling for graph readiness
+            graphStatusCheckInterval = setInterval(async () => {
+                const checkStatus = await checkGraphStatus();
+                if (checkStatus.ready) {
+                    clearInterval(graphStatusCheckInterval);
+                    console.log('Graph data is now ready, loading...');
+                    showLoadingIndicator('Graph data ready! Loading visualization...');
+                    await loadGraphDataActual();
+                    hideLoadingIndicator();
+                }
+            }, 5000); // Poll every 5 seconds
+
+            return;
+        }
+
+        // Graph is already ready, load it
+        await loadGraphDataActual();
+    } catch (error) {
+        console.error('Failed to load graph data:', error);
+        hideLoadingIndicator();
+        document.body.innerHTML =
+            '<div style="color: red; padding: 20px; font-family: Arial;">Error loading visualization data. Check console for details.</div>';
+    }
+}
+
+async function loadGraphDataActual() {
     try {
         const response = await fetch('/api/graph');
         const data = await response.json();
+
+        // Check if we got an error response
+        if (data.error) {
+            console.warn('Graph data not available yet:', data.error);
+            showLoadingIndicator('Waiting for graph data...');
+            return;
+        }
+
         allNodes = data.nodes || [];
         allLinks = data.links || [];
 
+        // Store trend data globally for visualization
+        window.graphTrendData = data.trends || null;
+        if (window.graphTrendData) {
+            console.log(`Loaded trend data: ${window.graphTrendData.entries_count} entries`);
+        }
+
         console.log(`Loaded ${allNodes.length} nodes and ${allLinks.length} links`);
 
         // DEBUG: Log first few nodes to see actual structure
@@ -180,14 +303,14 @@ function buildTreeStructure() {
         dir_hierarchy: 0,
         dir_containment: 0,
         file_containment: 0,
-        chunk_containment: 0  // undefined links = chunk-to-chunk (class -> method)
+        chunk_hierarchy: 0  // chunk_hierarchy links = class -> method
     };
 
     let relationshipsMatched = {
         dir_hierarchy: 0,
         dir_containment: 0,
         file_containment: 0,
-        chunk_containment: 0
+        chunk_hierarchy: 0
     };
 
     // Process all relationship links
@@ -202,11 +325,12 @@ function buildTreeStructure() {
             category = 'dir_containment';
         } else if (linkType === 'file_containment') {
             category = 'file_containment';
-        } else if (linkType === undefined || linkType === 'undefined') {
-            // Undefined links are chunk-to-chunk (e.g., class -> method)
-            category = 'chunk_containment';
+        } else if (linkType === 'chunk_hierarchy') {
+            // chunk_hierarchy links are chunk-to-chunk (e.g., class -> method)
+            category = 'chunk_hierarchy';
         } else {
-            // Skip semantic, caller, and other non-hierarchical links
+            // Skip semantic, caller, undefined, and other non-hierarchical links
+            // This includes links without a 'type' field (e.g., subproject links)
             return;
         }
 
@@ -238,7 +362,7 @@ function buildTreeStructure() {
     console.log(`  dir_hierarchy: ${relationshipsMatched.dir_hierarchy}/${relationshipsProcessed.dir_hierarchy} matched`);
     console.log(`  dir_containment: ${relationshipsMatched.dir_containment}/${relationshipsProcessed.dir_containment} matched`);
     console.log(`  file_containment: ${relationshipsMatched.file_containment}/${relationshipsProcessed.file_containment} matched`);
-    console.log(`  chunk_containment: ${relationshipsMatched.chunk_containment}/${relationshipsProcessed.chunk_containment} matched`);
+    console.log(`  chunk_hierarchy (class→method): ${relationshipsMatched.chunk_hierarchy}/${relationshipsProcessed.chunk_hierarchy} matched`);
     console.log(`  Total parent-child links: ${parentMap.size}`);
     console.log('=== END TREE RELATIONSHIPS ===');
 
@@ -330,11 +454,18 @@ function buildTreeStructure() {
                     console.log(`Promoting ${chunkChildren.length} children from ${onlyChild.type} to file ${node.name}`);
                     // Replace the single chunk with its children
                     node.children = chunkChildren;
-                    // Store info about the collapsed chunk
+                    // Store info about the collapsed chunk (include ALL relevant properties)
                     node.collapsed_chunk = {
                         type: onlyChild.type,
                         name: onlyChild.name,
-                        id: onlyChild.id
+                        id: onlyChild.id,
+                        content: onlyChild.content,
+                        docstring: onlyChild.docstring,
+                        start_line: onlyChild.start_line,
+                        end_line: onlyChild.end_line,
+                        file_path: onlyChild.file_path,
+                        language: onlyChild.language,
+                        complexity: onlyChild.complexity
                     };
                 } else {
                     // Collapse file+chunk into combined name (like directory chains)
@@ -379,18 +510,10 @@ function buildTreeStructure() {
         }
     }
 
-    // Collapse all child nodes of the root (but keep root's direct children visible initially)
-    // This way, only the root level (first level) is visible, all deeper levels are collapsed
+    // Collapse ALL nodes except the root itself
+    // This ensures only the root node is visible initially, all children are collapsed
     if (treeData.children) {
-        treeData.children.forEach(child => {
-            // Collapse all descendants of each root child, but keep the root children themselves visible
-            if (child.children && child.children.length > 0) {
-                child.children.forEach(grandchild => collapseAll(grandchild));
-                // Move children to _children to collapse
-                child._children = child.children;
-                child.children = null;
-            }
-        });
+        treeData.children.forEach(child => collapseAll(child));
     }
 
     console.log('Tree structure built with all directories and files collapsed');
@@ -438,11 +561,18 @@ let allLineCounts = [];  // Collect all line counts for percentile calculation
 function calculateNodeSizes(node) {
     if (!node) return 0;
 
-    // For chunks: use line count directly
+    // For chunks: use actual line count (primary metric)
+    // Falls back to content-based estimate only if line numbers unavailable
     if (chunkTypes.includes(node.type)) {
+        // Primary: use actual line span from start_line/end_line
+        // This ensures visual correlation with displayed line ranges
+        const contentLength = node.content ? node.content.length : 0;
         const lineCount = (node.start_line && node.end_line)
             ? node.end_line - node.start_line + 1
-            : 1;
+            : Math.max(1, Math.floor(contentLength / 40));  // Fallback: estimate ~40 chars per line
+
+        // Use actual line count for sizing (NOT content length)
+        // This prevents inversion where sparse 101-line files appear smaller than dense 3-line files
         node._lineCount = lineCount;
         allLineCounts.push(lineCount);
 
@@ -461,6 +591,16 @@ function calculateNodeSizes(node) {
         totalLines += calculateNodeSizes(child);
     });
 
+    // Handle collapsed file+chunk: use the collapsed chunk's line count
+    if (node.type === 'file' && node.collapsed_chunk) {
+        const cc = node.collapsed_chunk;
+        if (cc.start_line && cc.end_line) {
+            totalLines = cc.end_line - cc.start_line + 1;
+        } else if (cc.content) {
+            totalLines = Math.max(1, Math.floor(cc.content.length / 40));
+        }
+    }
+
     node._lineCount = totalLines || 1;  // Minimum 1 for empty dirs/files
 
     // DON'T add files/directories to allLineCounts - they skew percentiles
@@ -905,43 +1045,145 @@ function calculateAverageComplexity(node) {
     return count > 0 ? totalComplexity / count : 0;
 }
 
-function getNodeRadius(d) {
+// Get stroke color based on complexity - red outline for high complexity
+function getNodeStrokeColor(d) {
     const nodeData = d.data;
-    const lineCount = nodeData._lineCount || 1;
 
-    // Determine min/max based on node type
-    let minR, maxR;
+    // Only chunks have direct complexity
     if (chunkTypes.includes(nodeData.type)) {
-        minR = sizeConfig.chunkMinRadius;
-        maxR = sizeConfig.chunkMaxRadius;
-    } else {
-        minR = sizeConfig.minRadius;
-        maxR = sizeConfig.maxRadius;
+        const complexity = nodeData.complexity || 0;
+        // Complexity thresholds:
+        // 0-5: white (simple)
+        // 5-10: orange (moderate)
+        // 10+: red (complex)
+        if (complexity >= 10) {
+            return '#e74c3c';  // Red for high complexity
+        } else if (complexity >= 5) {
+            return '#f39c12';  // Orange for moderate
+        }
+        return '#fff';  // White for low complexity
+    }
+
+    // Files and directories: check average complexity of children
+    if (nodeData.type === 'file' || nodeData.type === 'directory') {
+        const avgComplexity = calculateAverageComplexity(nodeData);
+        if (avgComplexity >= 10) {
+            return '#e74c3c';  // Red
+        } else if (avgComplexity >= 5) {
+            return '#f39c12';  // Orange
+        }
+    }
+
+    return '#fff';  // Default white
+}
+
+// Get stroke width based on complexity - thicker for high complexity
+function getNodeStrokeWidth(d) {
+    const nodeData = d.data;
+    const complexity = chunkTypes.includes(nodeData.type)
+        ? (nodeData.complexity || 0)
+        : calculateAverageComplexity(nodeData);
+
+    if (complexity >= 10) return 3;  // Thick red outline
+    if (complexity >= 5) return 2.5;  // Medium orange outline
+    return 2;  // Default
+}
+
+function getNodeRadius(d) {
+    const nodeData = d.data;
+
+    // Size configuration based on node type
+    const dirMinRadius = 8;   // Min for directories
+    const dirMaxRadius = 40;  // Max for directories
+    const fileMinRadius = 6;  // Min for files
+    const fileMaxRadius = 30; // Max for files
+    const chunkMinRadius = sizeConfig.chunkMinRadius;  // From config
+    const chunkMaxRadius = sizeConfig.chunkMaxRadius;  // From config
+
+    // Directory nodes: size by file_count (logarithmic scale)
+    if (nodeData.type === 'directory') {
+        const fileCount = nodeData.file_count || 0;
+        if (fileCount === 0) return dirMinRadius;
+
+        // Logarithmic scale: log2(fileCount + 1) for smooth scaling
+        // +1 to avoid log(0), gives range [1, log2(max_files+1)]
+        const logCount = Math.log2(fileCount + 1);
+        const maxLogCount = Math.log2(100 + 1);  // Assume max ~100 files per dir
+        const normalized = Math.min(logCount / maxLogCount, 1.0);
+
+        return dirMinRadius + (normalized * (dirMaxRadius - dirMinRadius));
     }
 
-    // Percentile-based relative sizing:
-    // - Below 20th percentile → minimum size
-    // - Above 80th percentile → maximum size
-    // - Between 20th-80th → linear interpolation
+    // File nodes: size by total lines of code (sum of all chunks)
+    if (nodeData.type === 'file') {
+        const lineCount = nodeData._lineCount || 1;
+
+        // Collapsed file+chunk: use chunk sizing (since it's really a chunk)
+        if (nodeData.collapsed_chunk) {
+            const minLines = 5;
+            const maxLines = 150;
+
+            let normalized;
+            if (lineCount <= minLines) {
+                normalized = 0;
+            } else if (lineCount >= maxLines) {
+                normalized = 1;
+            } else {
+                const logMin = Math.log(minLines);
+                const logMax = Math.log(maxLines);
+                const logCount = Math.log(lineCount);
+                normalized = (logCount - logMin) / (logMax - logMin);
+            }
+            return chunkMinRadius + (normalized * (chunkMaxRadius - chunkMinRadius));
+        }
+
+        // Regular files: linear scaling based on total lines
+        const minFileLines = 5;
+        const maxFileLines = 300;
+
+        let normalized;
+        if (lineCount <= minFileLines) {
+            normalized = 0;
+        } else if (lineCount >= maxFileLines) {
+            normalized = 1;
+        } else {
+            normalized = (lineCount - minFileLines) / (maxFileLines - minFileLines);
+        }
 
-    if (percentile80 <= percentile20) {
-        return (minR + maxR) / 2;  // Default if no range
+        return fileMinRadius + (normalized * (fileMaxRadius - fileMinRadius));
     }
 
-    let normalized;
-    if (lineCount <= percentile20) {
-        // Below 20th percentile - use minimum size
-        normalized = 0;
-    } else if (lineCount >= percentile80) {
-        // Above 80th percentile - use maximum size
-        normalized = 1;
-    } else {
-        // Linear interpolation between 20th and 80th percentile
-        normalized = (lineCount - percentile20) / (percentile80 - percentile20);
+    // Chunk nodes: size by lines of code (absolute thresholds, not percentiles)
+    // This ensures 330-line functions are ALWAYS big, regardless of codebase distribution
+    if (chunkTypes.includes(nodeData.type)) {
+        const lineCount = nodeData._lineCount || 1;
+
+        // Absolute thresholds for intuitive sizing:
+        // - 1-10 lines: small (imports, constants, simple functions)
+        // - 10-50 lines: medium (typical functions)
+        // - 50-150 lines: large (complex functions)
+        // - 150+ lines: maximum (very large functions/classes)
+        const minLines = 5;
+        const maxLines = 150;  // Anything over 150 lines gets max size
+
+        let normalized;
+        if (lineCount <= minLines) {
+            normalized = 0;
+        } else if (lineCount >= maxLines) {
+            normalized = 1;
+        } else {
+            // Logarithmic scaling for better visual distribution
+            const logMin = Math.log(minLines);
+            const logMax = Math.log(maxLines);
+            const logCount = Math.log(lineCount);
+            normalized = (logCount - logMin) / (logMax - logMin);
+        }
+
+        return chunkMinRadius + (normalized * (chunkMaxRadius - chunkMinRadius));
     }
 
-    // Scale to radius range
-    return minR + (normalized * (maxR - minR));
+    // Default fallback for other node types
+    return sizeConfig.minRadius;
 }
 
 // ============================================================================
@@ -997,9 +1239,62 @@ function renderLinearTree() {
     // Create hierarchy from tree data
     // D3 hierarchy automatically respects children vs _children
     console.log('Creating D3 hierarchy...');
+
+    // DEBUG: Check if treeData children have content property BEFORE D3 processes them
+    console.log('=== PRE-D3 HIERARCHY DEBUG ===');
+    if (treeData.children && treeData.children.length > 0) {
+        const firstChild = treeData.children[0];
+        console.log('First root child:', firstChild.name, 'type:', firstChild.type);
+        console.log('First child keys:', Object.keys(firstChild));
+        console.log('First child has content:', 'content' in firstChild);
+
+        // Find a chunk node in the tree
+        function findFirstChunk(node) {
+            if (chunkTypes.includes(node.type)) {
+                return node;
+            }
+            if (node.children) {
+                for (const child of node.children) {
+                    const found = findFirstChunk(child);
+                    if (found) return found;
+                }
+            }
+            if (node._children) {
+                for (const child of node._children) {
+                    const found = findFirstChunk(child);
+                    if (found) return found;
+                }
+            }
+            return null;
+        }
+
+        const sampleChunk = findFirstChunk(treeData);
+        if (sampleChunk) {
+            console.log('Sample chunk node BEFORE D3:', sampleChunk.name, 'type:', sampleChunk.type);
+            console.log('Sample chunk keys:', Object.keys(sampleChunk));
+            console.log('Sample chunk has content:', 'content' in sampleChunk);
+            console.log('Sample chunk content length:', sampleChunk.content ? sampleChunk.content.length : 0);
+        }
+    }
+    console.log('=== END PRE-D3 HIERARCHY DEBUG ===');
+
     const root = d3.hierarchy(treeData, d => d.children);
     console.log(`Hierarchy created: ${root.descendants().length} nodes`);
 
+    // DEBUG: Check if content is preserved AFTER D3 processes them
+    console.log('=== POST-D3 HIERARCHY DEBUG ===');
+    const debugDescendants = root.descendants();
+    const chunkDescendants = debugDescendants.filter(d => chunkTypes.includes(d.data.type));
+    console.log(`Found ${chunkDescendants.length} chunk nodes in D3 hierarchy`);
+    if (chunkDescendants.length > 0) {
+        const firstChunkD3 = chunkDescendants[0];
+        console.log('First chunk in D3 hierarchy:', firstChunkD3.data.name, 'type:', firstChunkD3.data.type);
+        console.log('First chunk d.data keys:', Object.keys(firstChunkD3.data));
+        console.log('First chunk has content in d.data:', 'content' in firstChunkD3.data);
+        console.log('First chunk content length:', firstChunkD3.data.content ? firstChunkD3.data.content.length : 0);
+    }
+    console.log('=== END POST-D3 HIERARCHY DEBUG ===');
+
     // Apply tree layout
     console.log('Applying tree layout...');
     treeLayout(root);
@@ -1047,8 +1342,17 @@ function renderLinearTree() {
     nodes.append('circle')
         .attr('r', d => getNodeRadius(d))  // Dynamic size based on content
         .attr('fill', d => getNodeFillColor(d))  // Complexity-based coloring
-        .attr('stroke', '#fff')
-        .attr('stroke-width', 2);
+        .attr('stroke', d => getNodeStrokeColor(d))  // Red/orange for high complexity
+        .attr('stroke-width', d => getNodeStrokeWidth(d))
+        .attr('class', d => {
+            // Add complexity grade class if available
+            const grade = d.data.complexity_grade || '';
+            const hasSmells = (d.data.smell_count && d.data.smell_count > 0) || (d.data.smells && d.data.smells.length > 0);
+            const classes = [];
+            if (grade) classes.push(`grade-${grade}`);
+            if (hasSmells) classes.push('has-smells');
+            return classes.join(' ');
+        });
 
     // Add external call arrow indicators (only for chunk nodes)
     nodes.each(function(d) {
@@ -1187,8 +1491,17 @@ function renderCircularTree() {
     nodes.append('circle')
         .attr('r', d => getNodeRadius(d))  // Dynamic size based on content
         .attr('fill', d => getNodeFillColor(d))  // Complexity-based coloring
-        .attr('stroke', '#fff')
-        .attr('stroke-width', 2);
+        .attr('stroke', d => getNodeStrokeColor(d))  // Red/orange for high complexity
+        .attr('stroke-width', d => getNodeStrokeWidth(d))
+        .attr('class', d => {
+            // Add complexity grade class if available
+            const grade = d.data.complexity_grade || '';
+            const hasSmells = (d.data.smell_count && d.data.smell_count > 0) || (d.data.smells && d.data.smells.length > 0);
+            const classes = [];
+            if (grade) classes.push(`grade-${grade}`);
+            if (hasSmells) classes.push('has-smells');
+            return classes.join(' ');
+        });
 
     // Add external call arrow indicators (only for chunk nodes)
     nodes.each(function(d) {
@@ -1523,6 +1836,11 @@ function displayFileInfo(fileData, addToHistory = true) {
 function displayChunkContent(chunkData, addToHistory = true) {
     openViewerPanel();
 
+    // Expand path to node and highlight it in tree
+    if (chunkData.id) {
+        expandAndHighlightNode(chunkData.id);
+    }
+
     // Add to navigation history
     if (addToHistory) {
         addToNavHistory({type: 'chunk', data: chunkData});
@@ -1861,19 +2179,70 @@ function findPathToNode(node, targetId, path = []) {
     return [];
 }
 
+// Expand path to a node and highlight it (without triggering content display)
+function expandAndHighlightNode(nodeId) {
+    console.log('=== EXPAND AND HIGHLIGHT ===');
+    console.log('Target nodeId:', nodeId);
+
+    // Find the path to this node in the tree structure
+    const pathToNode = findPathToNode(treeData, nodeId);
+
+    if (pathToNode.length > 0) {
+        console.log('Found path:', pathToNode.map(n => n.name).join(' -> '));
+
+        // Expand all nodes along the path (except the target node itself)
+        let needsRerender = false;
+        pathToNode.slice(0, -1).forEach(node => {
+            if (node._children) {
+                console.log('Expanding:', node.name);
+                node.children = node._children;
+                node._children = null;
+                needsRerender = true;
+            }
+        });
+
+        if (needsRerender) {
+            renderVisualization();
+        }
+
+        // Highlight after a short delay to allow render to complete
+        setTimeout(() => {
+            highlightNodeInTree(nodeId);
+        }, 50);
+    } else {
+        console.log('Path not found - trying direct highlight');
+        highlightNodeInTree(nodeId);
+    }
+}
+
 // Highlight and scroll to a node in the rendered tree
-function highlightNodeInTree(nodeId) {
+function highlightNodeInTree(nodeId, persistent = true) {
+    console.log('=== HIGHLIGHT NODE ===');
+    console.log('Looking for nodeId:', nodeId);
+
     // Remove any existing highlight
     d3.selectAll('.node-highlight').classed('node-highlight', false);
+    if (persistent) {
+        d3.selectAll('.node-selected').classed('node-selected', false);
+    }
 
     // Find and highlight the target node in the rendered SVG
     const svg = d3.select('#graph');
-    const targetNode = svg.selectAll('.node')
-        .filter(d => d.data.id === nodeId);
+    const allNodes = svg.selectAll('.node');
+    console.log('Total nodes in SVG:', allNodes.size());
+
+    const targetNode = allNodes.filter(d => d.data.id === nodeId);
+    console.log('Matching nodes found:', targetNode.size());
 
     if (!targetNode.empty()) {
-        // Add highlight class
-        targetNode.classed('node-highlight', true);
+        // Add highlight class (persistent = orange glow that stays)
+        if (persistent) {
+            targetNode.classed('node-selected', true);
+            console.log('Applied .node-selected class');
+        } else {
+            targetNode.classed('node-highlight', true);
+            console.log('Applied .node-highlight class');
+        }
 
         // Pulse the node circle - scale up from current size
         targetNode.select('circle')
@@ -2033,6 +2402,127 @@ function toggleLayout() {
     renderVisualization();
 }
 
+// ============================================================================
+// FILE TYPE FILTER
+// ============================================================================
+
+// Code file extensions
+const codeExtensions = new Set([
+    '.py', '.js', '.ts', '.jsx', '.tsx', '.java', '.c', '.cpp', '.h', '.hpp',
+    '.cs', '.go', '.rs', '.rb', '.php', '.swift', '.kt', '.scala', '.r',
+    '.sh', '.bash', '.zsh', '.ps1', '.bat', '.sql', '.html', '.css', '.scss',
+    '.sass', '.less', '.vue', '.svelte', '.astro', '.elm', '.clj', '.ex', '.exs',
+    '.hs', '.ml', '.lua', '.pl', '.pm', '.m', '.mm', '.f', '.f90', '.for',
+    '.asm', '.s', '.v', '.vhd', '.sv', '.nim', '.zig', '.d', '.dart', '.groovy',
+    '.coffee', '.litcoffee', '.purs', '.rkt', '.scm', '.lisp', '.cl'
+]);
+
+// Doc file extensions
+const docExtensions = new Set([
+    '.md', '.markdown', '.rst', '.txt', '.adoc', '.asciidoc', '.org', '.tex',
+    '.rtf', '.doc', '.docx', '.pdf', '.json', '.yaml', '.yml', '.toml', '.ini',
+    '.cfg', '.conf', '.xml', '.csv', '.tsv', '.log', '.man', '.info', '.pod',
+    '.rdoc', '.textile', '.wiki'
+]);
+
+function getFileType(filename) {
+    if (!filename) return 'unknown';
+    const ext = '.' + filename.split('.').pop().toLowerCase();
+    if (codeExtensions.has(ext)) return 'code';
+    if (docExtensions.has(ext)) return 'docs';
+    return 'unknown';
+}
+
+function setFileFilter(filter) {
+    currentFileFilter = filter;
+
+    // Update button states
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.filter === filter);
+    });
+
+    // Apply filter to the tree
+    applyFileFilter();
+
+    console.log(`File filter set to: ${filter}`);
+}
+
+function applyFileFilter() {
+    if (!treeData) return;
+
+    console.log('=== APPLYING FILE FILTER (VISIBILITY) ===');
+    console.log('Current filter:', currentFileFilter);
+
+    // Get all node elements in the visualization
+    const nodeElements = d3.selectAll('.node');
+    const linkElements = d3.selectAll('.link');
+
+    if (currentFileFilter === 'all') {
+        // Show everything
+        nodeElements.style('display', null);
+        linkElements.style('display', null);
+        console.log('Showing all nodes');
+        return;
+    }
+
+    // Build set of visible node IDs based on filter
+    const visibleIds = new Set();
+
+    // Recursive function to check if a node or any descendant matches filter
+    function checkNodeAndDescendants(node) {
+        let hasMatchingDescendant = false;
+
+        // Check children (both visible and collapsed)
+        const children = node.children || node._children || [];
+        children.forEach(child => {
+            if (checkNodeAndDescendants(child)) {
+                hasMatchingDescendant = true;
+            }
+        });
+
+        // Check if this node itself matches
+        let matches = false;
+        if (node.type === 'directory') {
+            // Directories are visible if they have matching descendants
+            matches = hasMatchingDescendant;
+        } else if (node.type === 'file') {
+            const fileType = getFileType(node.name);
+            matches = (fileType === currentFileFilter) || (fileType === 'unknown');
+        } else if (chunkTypes.includes(node.type)) {
+            // Chunks match if their parent file matches
+            // For simplicity, check file_path extension
+            if (node.file_path) {
+                const ext = node.file_path.substring(node.file_path.lastIndexOf('.'));
+                const fileType = getFileType(node.file_path);
+                matches = (fileType === currentFileFilter) || (fileType === 'unknown');
+            }
+        }
+
+        if (matches || hasMatchingDescendant) {
+            visibleIds.add(node.id);
+            return true;
+        }
+        return false;
+    }
+
+    checkNodeAndDescendants(treeData);
+    console.log(`Filter found ${visibleIds.size} visible nodes`);
+
+    // Apply visibility to DOM elements
+    nodeElements.style('display', function(d) {
+        return visibleIds.has(d.data.id) ? null : 'none';
+    });
+
+    // Hide links where either end is hidden
+    linkElements.style('display', function(d) {
+        const sourceVisible = visibleIds.has(d.source.data.id);
+        const targetVisible = visibleIds.has(d.target.data.id);
+        return (sourceVisible && targetVisible) ? null : 'none';
+    });
+
+    console.log('=== FILTER COMPLETE (VISIBILITY) ===');
+}
+
 // ============================================================================
 // VIEWER PANEL CONTROLS
 // ============================================================================
@@ -2475,13 +2965,1558 @@ function closeSearchResults() {
 }
 
 // ============================================================================
-// INITIALIZATION
+// THEME TOGGLE
 // ============================================================================
 
-// Load data and initialize UI when page loads
-document.addEventListener('DOMContentLoaded', () => {
-    console.log('=== PAGE INITIALIZATION ===');
-    console.log('DOMContentLoaded event fired');
+function toggleTheme() {
+    const html = document.documentElement;
+    const currentTheme = html.getAttribute('data-theme') || 'dark';
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+    // Update theme
+    if (newTheme === 'light') {
+        html.setAttribute('data-theme', 'light');
+    } else {
+        html.removeAttribute('data-theme');
+    }
+
+    // Save preference
+    localStorage.setItem('theme', newTheme);
+
+    // Update icon only
+    const themeIcon = document.getElementById('theme-icon');
+
+    if (newTheme === 'light') {
+        themeIcon.textContent = '☀️';
+    } else {
+        themeIcon.textContent = '🌙';
+    }
+
+    console.log(`Theme toggled to: ${newTheme}`);
+}
+
+function loadThemePreference() {
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    const html = document.documentElement;
+
+    if (savedTheme === 'light') {
+        html.setAttribute('data-theme', 'light');
+        const themeIcon = document.getElementById('theme-icon');
+        if (themeIcon) themeIcon.textContent = '☀️';
+    }
+
+    console.log(`Loaded theme preference: ${savedTheme}`);
+}
+
+// ============================================================================
+// ANALYSIS REPORTS
+// ============================================================================
+
+function getComplexityGrade(complexity) {
+    if (complexity === undefined || complexity === null) return 'N/A';
+    if (complexity <= 5) return 'A';
+    if (complexity <= 10) return 'B';
+    if (complexity <= 15) return 'C';
+    if (complexity <= 20) return 'D';
+    return 'F';
+}
+
+function getGradeColor(grade) {
+    const colors = {
+        'A': '#2ea043',
+        'B': '#1f6feb',
+        'C': '#d29922',
+        'D': '#f0883e',
+        'F': '#da3633',
+        'N/A': '#6e7681'
+    };
+    return colors[grade] || colors['N/A'];
+}
+
+function showComplexityReport() {
+    openViewerPanel();
+
+    const viewerTitle = document.getElementById('viewer-title');
+    const viewerContent = document.getElementById('viewer-content');
+
+    viewerTitle.textContent = '📊 Complexity Report';
+
+    // Collect all chunk nodes with complexity data
+    const chunksWithComplexity = [];
+
+    function collectChunks(node) {
+        if (chunkTypes.includes(node.type)) {
+            const complexity = node.complexity !== undefined ? node.complexity : null;
+            chunksWithComplexity.push({
+                name: node.name,
+                type: node.type,
+                file_path: node.file_path || 'Unknown',
+                start_line: node.start_line || 0,
+                end_line: node.end_line || 0,
+                complexity: complexity,
+                grade: getComplexityGrade(complexity),
+                node: node
+            });
+        }
+
+        // Recursively process children
+        const children = node.children || node._children || [];
+        children.forEach(child => collectChunks(child));
+    }
+
+    // Start from treeData root
+    if (treeData) {
+        collectChunks(treeData);
+    }
+
+    // Calculate statistics
+    const totalFunctions = chunksWithComplexity.length;
+    const validComplexity = chunksWithComplexity.filter(c => c.complexity !== null);
+    const avgComplexity = validComplexity.length > 0
+        ? (validComplexity.reduce((sum, c) => sum + c.complexity, 0) / validComplexity.length).toFixed(2)
+        : 'N/A';
+
+    // Count by grade
+    const gradeCounts = {
+        'A': 0, 'B': 0, 'C': 0, 'D': 0, 'F': 0, 'N/A': 0
+    };
+    chunksWithComplexity.forEach(c => {
+        gradeCounts[c.grade]++;
+    });
+
+    // Sort by complexity (highest first)
+    const sortedChunks = [...chunksWithComplexity].sort((a, b) => {
+        if (a.complexity === null) return 1;
+        if (b.complexity === null) return -1;
+        return b.complexity - a.complexity;
+    });
+
+    // Build HTML
+    let html = '<div class="complexity-report">';
+
+    // Summary Stats
+    html += '<div class="complexity-summary">';
+    html += '<div class="summary-grid">';
+    html += `<div class="summary-card">
+        <div class="summary-label">Total Functions</div>
+        <div class="summary-value">${totalFunctions}</div>
+    </div>`;
+    html += `<div class="summary-card">
+        <div class="summary-label">Average Complexity</div>
+        <div class="summary-value">${avgComplexity}</div>
+    </div>`;
+    html += `<div class="summary-card">
+        <div class="summary-label">With Complexity Data</div>
+        <div class="summary-value">${validComplexity.length}</div>
+    </div>`;
+    html += '</div>';
+
+    // Grade Distribution
+    html += '<div class="grade-distribution">';
+    html += '<div class="distribution-title">Grade Distribution</div>';
+    html += '<div class="distribution-bars">';
+
+    const maxCount = Math.max(...Object.values(gradeCounts));
+    ['A', 'B', 'C', 'D', 'F', 'N/A'].forEach(grade => {
+        const count = gradeCounts[grade];
+        const percentage = totalFunctions > 0 ? (count / totalFunctions * 100) : 0;
+        const barWidth = maxCount > 0 ? (count / maxCount * 100) : 0;
+        html += `
+            <div class="distribution-row">
+                <div class="distribution-grade" style="color: ${getGradeColor(grade)}">${grade}</div>
+                <div class="distribution-bar-container">
+                    <div class="distribution-bar" style="width: ${barWidth}%; background: ${getGradeColor(grade)}"></div>
+                </div>
+                <div class="distribution-count">${count} (${percentage.toFixed(1)}%)</div>
+            </div>
+        `;
+    });
+    html += '</div></div>';
+    html += '</div>';
+
+    // Complexity Hotspots Table
+    html += '<div class="complexity-hotspots">';
+    html += '<h3 class="section-title">Complexity Hotspots</h3>';
+
+    if (sortedChunks.length === 0) {
+        html += '<p style="color: var(--text-secondary); text-align: center; padding: 20px;">No functions found with complexity data.</p>';
+    } else {
+        html += '<div class="hotspots-table-container">';
+        html += '<table class="hotspots-table">';
+        html += `
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>File</th>
+                    <th>Lines</th>
+                    <th>Complexity</th>
+                    <th>Grade</th>
+                </tr>
+            </thead>
+            <tbody>
+        `;
+
+        sortedChunks.forEach(chunk => {
+            const lines = chunk.end_line > 0 ? chunk.end_line - chunk.start_line + 1 : 'N/A';
+            const complexityDisplay = chunk.complexity !== null ? chunk.complexity.toFixed(1) : 'N/A';
+            const gradeColor = getGradeColor(chunk.grade);
+
+            // Get relative file path
+            const fileName = chunk.file_path.split('/').pop() || chunk.file_path;
+            const lineRange = chunk.start_line > 0 ? `L${chunk.start_line}-${chunk.end_line}` : '';
+
+            html += `
+                <tr class="hotspot-row" onclick='navigateToChunk(${JSON.stringify(chunk.name)})'>
+                    <td class="hotspot-name">${escapeHtml(chunk.name)}</td>
+                    <td class="hotspot-file" title="${escapeHtml(chunk.file_path)}">${escapeHtml(fileName)}</td>
+                    <td class="hotspot-lines">${lines}</td>
+                    <td class="hotspot-complexity">${complexityDisplay}</td>
+                    <td class="hotspot-grade">
+                        <span class="grade-badge" style="background: ${gradeColor}">${chunk.grade}</span>
+                    </td>
+                </tr>
+            `;
+        });
+
+        html += '</tbody></table></div>';
+    }
+
+    html += '</div>'; // complexity-hotspots
+    html += '</div>'; // complexity-report
+
+    viewerContent.innerHTML = html;
+
+    // Hide section dropdown for reports (no code sections)
+    const sectionNav = document.getElementById('section-nav');
+    if (sectionNav) {
+        sectionNav.style.display = 'none';
+    }
+}
+
+function navigateToChunk(chunkName) {
+    // Find the chunk node in the tree
+    function findChunk(node) {
+        if (chunkTypes.includes(node.type) && node.name === chunkName) {
+            return node;
+        }
+        const children = node.children || node._children || [];
+        for (const child of children) {
+            const found = findChunk(child);
+            if (found) return found;
+        }
+        return null;
+    }
+
+    if (treeData) {
+        const chunk = findChunk(treeData);
+        if (chunk) {
+            // Display the chunk content
+            displayChunkContent(chunk);
+
+            // Highlight the node in the visualization
+            highlightNode(chunk.id);
+        }
+    }
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+function highlightNode(nodeId) {
+    // Remove existing highlights
+    d3.selectAll('.node').classed('node-highlight', false);
+
+    // Add highlight to the target node
+    d3.selectAll('.node')
+        .filter(d => d.data.id === nodeId)
+        .classed('node-highlight', true);
+}
+
+// ============================================================================
+// CODE SMELLS DETECTION AND REPORTING
+// ============================================================================
+
+function detectCodeSmells(nodes) {
+    const smells = [];
+
+    function analyzeNode(node) {
+        // Only analyze code chunks
+        if (!chunkTypes.includes(node.type)) {
+            const children = node.children || node._children || [];
+            children.forEach(child => analyzeNode(child));
+            return;
+        }
+
+        const lineCount = (node.end_line && node.start_line)
+            ? node.end_line - node.start_line + 1
+            : 0;
+        const complexity = node.complexity || 0;
+
+        // 1. Long Method - Functions with > 50 lines
+        if (node.type === 'function' || node.type === 'method') {
+            if (lineCount > 100) {
+                smells.push({
+                    type: 'Long Method',
+                    severity: 'error',
+                    node: node,
+                    details: `${lineCount} lines (very long)`
+                });
+            } else if (lineCount > 50) {
+                smells.push({
+                    type: 'Long Method',
+                    severity: 'warning',
+                    node: node,
+                    details: `${lineCount} lines`
+                });
+            }
+        }
+
+        // 2. High Complexity - Functions with complexity > 15
+        if ((node.type === 'function' || node.type === 'method') && complexity > 0) {
+            if (complexity > 20) {
+                smells.push({
+                    type: 'High Complexity',
+                    severity: 'error',
+                    node: node,
+                    details: `Complexity: ${complexity.toFixed(1)} (very complex)`
+                });
+            } else if (complexity > 15) {
+                smells.push({
+                    type: 'High Complexity',
+                    severity: 'warning',
+                    node: node,
+                    details: `Complexity: ${complexity.toFixed(1)}`
+                });
+            }
+        }
+
+        // 3. Deep Nesting - Proxy using complexity > 20
+        if ((node.type === 'function' || node.type === 'method') && complexity > 20) {
+            smells.push({
+                type: 'Deep Nesting',
+                severity: complexity > 25 ? 'error' : 'warning',
+                node: node,
+                details: `Complexity: ${complexity.toFixed(1)} (likely deep nesting)`
+            });
+        }
+
+        // 4. God Class - Classes with > 20 methods or > 500 lines
+        if (node.type === 'class') {
+            const children = node.children || node._children || [];
+            const methodCount = children.filter(c => c.type === 'method').length;
+
+            if (methodCount > 30 || lineCount > 800) {
+                smells.push({
+                    type: 'God Class',
+                    severity: 'error',
+                    node: node,
+                    details: `${methodCount} methods, ${lineCount} lines (very large)`
+                });
+            } else if (methodCount > 20 || lineCount > 500) {
+                smells.push({
+                    type: 'God Class',
+                    severity: 'warning',
+                    node: node,
+                    details: `${methodCount} methods, ${lineCount} lines`
+                });
+            }
+        }
+
+        // Recursively process children
+        const children = node.children || node._children || [];
+        children.forEach(child => analyzeNode(child));
+    }
+
+    if (nodes) {
+        analyzeNode(nodes);
+    }
+
+    return smells;
+}
+
+function showCodeSmells() {
+    openViewerPanel();
+
+    const viewerTitle = document.getElementById('viewer-title');
+    const viewerContent = document.getElementById('viewer-content');
+
+    viewerTitle.textContent = '🔍 Code Smells';
+
+    // Detect all code smells
+    const allSmells = detectCodeSmells(treeData);
+
+    // Count by type and severity
+    const smellCounts = {
+        'Long Method': { total: 0, warning: 0, error: 0 },
+        'High Complexity': { total: 0, warning: 0, error: 0 },
+        'Deep Nesting': { total: 0, warning: 0, error: 0 },
+        'God Class': { total: 0, warning: 0, error: 0 }
+    };
+
+    let totalWarnings = 0;
+    let totalErrors = 0;
+
+    allSmells.forEach(smell => {
+        smellCounts[smell.type].total++;
+        smellCounts[smell.type][smell.severity]++;
+        if (smell.severity === 'warning') totalWarnings++;
+        if (smell.severity === 'error') totalErrors++;
+    });
+
+    // Build HTML
+    let html = '<div class="code-smells-report">';
+
+    // Summary Cards
+    html += '<div class="smell-summary-grid">';
+    html += `
+        <div class="smell-summary-card">
+            <div class="smell-card-header">
+                <span class="smell-card-icon">🔍</span>
+                <div class="smell-card-title">Total Smells</div>
+            </div>
+            <div class="smell-card-count">${allSmells.length}</div>
+        </div>
+        <div class="smell-summary-card warning">
+            <div class="smell-card-header">
+                <span class="smell-card-icon">⚠️</span>
+                <div class="smell-card-title">Warnings</div>
+            </div>
+            <div class="smell-card-count" style="color: var(--warning)">${totalWarnings}</div>
+        </div>
+        <div class="smell-summary-card error">
+            <div class="smell-card-header">
+                <span class="smell-card-icon">🚨</span>
+                <div class="smell-card-title">Errors</div>
+            </div>
+            <div class="smell-card-count" style="color: var(--error)">${totalErrors}</div>
+        </div>
+    `;
+    html += '</div>';
+
+    // Filters
+    html += '<div class="smell-filters">';
+    html += '<div class="filter-title">Filter by Type</div>';
+    html += '<div class="filter-checkboxes">';
+
+    Object.keys(smellCounts).forEach(type => {
+        const count = smellCounts[type].total;
+        html += `
+            <div class="filter-checkbox-item">
+                <input type="checkbox" id="filter-${type.replace(/\\s+/g, '-')}"
+                       checked onchange="filterCodeSmells()">
+                <label class="filter-checkbox-label" for="filter-${type.replace(/\\s+/g, '-')}">${type}</label>
+                <span class="filter-checkbox-count">${count}</span>
+            </div>
+        `;
+    });
+
+    html += '</div></div>';
+
+    // Smells Table
+    html += '<div id="smells-table-wrapper">';
+    html += '<h3 class="section-title">Detected Code Smells</h3>';
+
+    if (allSmells.length === 0) {
+        html += '<p style="color: var(--text-secondary); text-align: center; padding: 20px;">No code smells detected! Great job! 🎉</p>';
+    } else {
+        html += '<div class="smells-table-container">';
+        html += '<table class="smells-table">';
+        html += `
+            <thead>
+                <tr>
+                    <th>Type</th>
+                    <th>Severity</th>
+                    <th>Name</th>
+                    <th>File</th>
+                    <th>Details</th>
+                </tr>
+            </thead>
+            <tbody id="smells-table-body">
+        `;
+
+        // Sort by severity (error first) then by type
+        const sortedSmells = [...allSmells].sort((a, b) => {
+            if (a.severity !== b.severity) {
+                return a.severity === 'error' ? -1 : 1;
+            }
+            return a.type.localeCompare(b.type);
+        });
+
+        sortedSmells.forEach(smell => {
+            const fileName = smell.node.file_path ? smell.node.file_path.split('/').pop() : 'Unknown';
+            const severityIcon = smell.severity === 'error' ? '🚨' : '⚠️';
+
+            html += `
+                <tr class="smell-row" data-smell-type="${smell.type.replace(/\\s+/g, '-')}"
+                    onclick='navigateToChunk(${JSON.stringify(smell.node.name)})'>
+                    <td><span class="smell-type-badge">${escapeHtml(smell.type)}</span></td>
+                    <td><span class="severity-badge ${smell.severity}">${severityIcon} ${smell.severity.toUpperCase()}</span></td>
+                    <td class="smell-name">${escapeHtml(smell.node.name)}</td>
+                    <td class="smell-file" title="${escapeHtml(smell.node.file_path || '')}">${escapeHtml(fileName)}</td>
+                    <td class="smell-details">${escapeHtml(smell.details)}</td>
+                </tr>
+            `;
+        });
+
+        html += '</tbody></table></div>';
+    }
+
+    html += '</div>'; // smells-table-wrapper
+    html += '</div>'; // code-smells-report
+
+    viewerContent.innerHTML = html;
+
+    // Hide section dropdown for reports (no code sections)
+    const sectionNav = document.getElementById('section-nav');
+    if (sectionNav) {
+        sectionNav.style.display = 'none';
+    }
+}
+
+function filterCodeSmells() {
+    const rows = document.querySelectorAll('.smell-row');
+
+    rows.forEach(row => {
+        const smellType = row.getAttribute('data-smell-type');
+        const checkbox = document.getElementById(`filter-${smellType}`);
+
+        if (checkbox && checkbox.checked) {
+            row.style.display = '';
+        } else {
+            row.style.display = 'none';
+        }
+    });
+}
+
+// ============================================================================
+// DEPENDENCIES ANALYSIS AND REPORTING
+// ============================================================================
+
+function showDependencies() {
+    openViewerPanel();
+
+    const viewerTitle = document.getElementById('viewer-title');
+    const viewerContent = document.getElementById('viewer-content');
+
+    viewerTitle.textContent = '🔗 Code Structure';
+
+    // Code file extensions (exclude docs like .md, .txt, .rst)
+    const codeExtensions = ['.py', '.js', '.ts', '.jsx', '.tsx', '.go', '.rs', '.java', '.c', '.cpp', '.h', '.hpp', '.cs', '.rb', '.php', '.swift', '.kt', '.scala', '.ex', '.exs', '.clj', '.vue', '.svelte'];
+
+    function isCodeFile(filePath) {
+        const ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase();
+        return codeExtensions.includes(ext);
+    }
+
+    // Build directory structure from nodes (code files only)
+    const dirStructure = new Map();
+
+    allNodes.forEach(node => {
+        if (node.type === 'file' && node.file_path && isCodeFile(node.file_path)) {
+            const parts = node.file_path.split('/');
+            const fileName = parts.pop();
+            const dirPath = parts.join('/') || '/';
+
+            if (!dirStructure.has(dirPath)) {
+                dirStructure.set(dirPath, []);
+            }
+            dirStructure.get(dirPath).push({
+                name: fileName,
+                path: node.file_path,
+                chunks: allNodes.filter(n => n.file_path === node.file_path && n.type !== 'file').length
+            });
+        }
+    });
+
+    // Calculate stats
+    const totalDirs = dirStructure.size;
+    const totalFiles = Array.from(dirStructure.values()).reduce((sum, files) => sum + files.length, 0);
+    const totalChunks = allNodes.filter(n => n.type !== 'file' && n.type !== 'directory').length;
+
+    let html = `
+        <div class="report-section">
+            <h3>📁 Directory Overview</h3>
+            <p style="color: var(--text-secondary); margin-bottom: 15px;">Showing code organization by directory structure.</p>
+            <div class="metrics-grid">
+                <div class="metric-card">
+                    <div class="metric-value">${totalDirs}</div>
+                    <div class="metric-label">Directories</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-value">${totalFiles}</div>
+                    <div class="metric-label">Files</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-value">${totalChunks}</div>
+                    <div class="metric-label">Code Chunks</div>
+                </div>
+            </div>
+        </div>
+        <div class="report-section">
+            <h3>📂 Directory Structure</h3>
+    `;
+
+    // Sort directories
+    const sortedDirs = Array.from(dirStructure.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+
+    sortedDirs.forEach(([dir, files]) => {
+        const dirDisplay = dir === '/' ? 'Root' : dir;
+        const totalChunksInDir = files.reduce((sum, f) => sum + f.chunks, 0);
+
+        html += `
+            <div class="dependency-item" style="margin-bottom: 20px; padding: 12px; background: var(--bg-secondary); border-radius: 6px; border-left: 3px solid var(--accent-blue);">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                    <strong style="color: var(--accent-blue);">📁 ${escapeHtml(dirDisplay)}</strong>
+                    <span style="color: var(--text-secondary); font-size: 12px;">${files.length} files, ${totalChunksInDir} chunks</span>
+                </div>
+                <ul style="margin: 0; padding: 0 0 0 20px; list-style: none;">
+        `;
+
+        files.sort((a, b) => a.name.localeCompare(b.name)).forEach(file => {
+            html += `<li style="padding: 4px 0; color: var(--text-primary);">
+                📄 ${escapeHtml(file.name)}
+                <span style="color: var(--text-secondary); font-size: 11px;">(${file.chunks} chunks)</span>
+            </li>`;
+        });
+
+        html += `</ul></div>`;
+    });
+
+    html += '</div>';
+
+    viewerContent.innerHTML = html;
+
+    // Hide section dropdown for reports (no code sections)
+    const sectionNav = document.getElementById('section-nav');
+    if (sectionNav) {
+        sectionNav.style.display = 'none';
+    }
+}
+
+function buildFileDependencyGraph() {
+    // Map: file_path -> { dependsOn: Set<file_path>, usedBy: Set<file_path> }
+    const fileDeps = new Map();
+
+    allLinks.forEach(link => {
+        if (link.type === 'caller') {
+            const sourceNode = allNodes.find(n => n.id === link.source);
+            const targetNode = allNodes.find(n => n.id === link.target);
+
+            if (sourceNode && targetNode && sourceNode.file_path && targetNode.file_path) {
+                // Skip self-references (same file)
+                if (sourceNode.file_path === targetNode.file_path) {
+                    return;
+                }
+
+                // sourceNode calls targetNode → source depends on target
+                if (!fileDeps.has(sourceNode.file_path)) {
+                    fileDeps.set(sourceNode.file_path, { dependsOn: new Set(), usedBy: new Set() });
+                }
+                if (!fileDeps.has(targetNode.file_path)) {
+                    fileDeps.set(targetNode.file_path, { dependsOn: new Set(), usedBy: new Set() });
+                }
+
+                fileDeps.get(sourceNode.file_path).dependsOn.add(targetNode.file_path);
+                fileDeps.get(targetNode.file_path).usedBy.add(sourceNode.file_path);
+            }
+        }
+    });
+
+    return fileDeps;
+}
+
+function findCircularDeps(fileDeps) {
+    // Simple cycle detection using DFS
+    const cycles = [];
+    const visited = new Set();
+    const recStack = new Set();
+    const pathStack = [];
+
+    function dfs(filePath) {
+        visited.add(filePath);
+        recStack.add(filePath);
+        pathStack.push(filePath);
+
+        const deps = fileDeps.get(filePath);
+        if (deps && deps.dependsOn) {
+            for (const depFile of deps.dependsOn) {
+                if (!visited.has(depFile)) {
+                    dfs(depFile);
+                } else if (recStack.has(depFile)) {
+                    // Found a cycle
+                    const cycleStartIndex = pathStack.indexOf(depFile);
+                    if (cycleStartIndex !== -1) {
+                        const cycle = pathStack.slice(cycleStartIndex);
+                        cycle.push(depFile); // Complete the cycle
+                        // Check if this cycle is already recorded
+                        const cycleStr = cycle.sort().join('|');
+                        if (!cycles.some(c => c.sort().join('|') === cycleStr)) {
+                            cycles.push([...cycle]);
+                        }
+                    }
+                }
+            }
+        }
+
+        pathStack.pop();
+        recStack.delete(filePath);
+    }
+
+    for (const filePath of fileDeps.keys()) {
+        if (!visited.has(filePath)) {
+            dfs(filePath);
+        }
+    }
+
+    return cycles;
+}
+
+function toggleDependencyDetails(rowId, index) {
+    const detailsRow = document.getElementById(`${rowId}-details`);
+    const btn = document.querySelector(`#${rowId} .expand-btn`);
+
+    if (detailsRow.style.display === 'none') {
+        detailsRow.style.display = '';
+        btn.textContent = '▲';
+    } else {
+        detailsRow.style.display = 'none';
+        btn.textContent = '▼';
+    }
+}
+
+// ============================================================================
+// TRENDS / METRICS SNAPSHOT
+// ============================================================================
+
+function showTrends() {
+    openViewerPanel();
+
+    const viewerTitle = document.getElementById('viewer-title');
+    const viewerContent = document.getElementById('viewer-content');
+
+    viewerTitle.textContent = '📈 Codebase Metrics Snapshot';
+
+    // Calculate metrics from current codebase
+    const metrics = calculateCodebaseMetrics();
+
+    // Build HTML
+    let html = '<div class="trends-report">';
+
+    // Snapshot Banner
+    html += '<div class="snapshot-banner">';
+    html += '<div class="snapshot-header">';
+    html += '<div class="snapshot-icon">📊</div>';
+    html += '<div class="snapshot-info">';
+    html += '<div class="snapshot-title">Codebase Metrics Snapshot</div>';
+    html += `<div class="snapshot-timestamp">Generated: ${new Date().toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true
+    })}</div>`;
+    html += '</div></div>';
+    html += '<div class="snapshot-description">';
+    html += 'This snapshot serves as the baseline for future trend tracking. ';
+    html += 'With git history analysis, you could track how these metrics evolve over time.';
+    html += '</div>';
+    html += '</div>';
+
+    // Key Metrics Cards
+    html += '<div class="metrics-section">';
+    html += '<h3 class="section-title">Key Metrics</h3>';
+    html += '<div class="metrics-grid">';
+
+    html += `<div class="metric-card">
+        <div class="metric-icon">📝</div>
+        <div class="metric-value">${metrics.totalLines.toLocaleString()}</div>
+        <div class="metric-label">Lines of Code</div>
+    </div>`;
+
+    html += `<div class="metric-card">
+        <div class="metric-icon">⚡</div>
+        <div class="metric-value">${metrics.totalFunctions}</div>
+        <div class="metric-label">Functions/Methods</div>
+    </div>`;
+
+    html += `<div class="metric-card">
+        <div class="metric-icon">🎯</div>
+        <div class="metric-value">${metrics.totalClasses}</div>
+        <div class="metric-label">Classes</div>
+    </div>`;
+
+    html += `<div class="metric-card">
+        <div class="metric-icon">📄</div>
+        <div class="metric-value">${metrics.totalFiles}</div>
+        <div class="metric-label">Files</div>
+    </div>`;
+
+    html += '</div></div>';
+
+    // Code Health Score
+    html += '<div class="health-section">';
+    html += '<h3 class="section-title">Code Health Score</h3>';
+    html += '<div class="health-card">';
+
+    const healthInfo = getHealthScoreInfo(metrics.healthScore);
+    html += `<div class="health-score-display">
+        <div class="health-score-value">${metrics.healthScore}/100</div>
+        <div class="health-score-label">${healthInfo.emoji} ${healthInfo.label}</div>
+    </div>`;
+
+    html += '<div class="health-progress-container">';
+    html += `<div class="health-progress-bar" style="width: ${metrics.healthScore}%; background: ${healthInfo.color}"></div>`;
+    html += '</div>';
+
+    html += `<div class="health-description">${healthInfo.description}</div>`;
+    html += '</div></div>';
+
+    // Complexity Distribution
+    html += '<div class="distribution-section">';
+    html += '<h3 class="section-title">Complexity Distribution</h3>';
+    html += '<div class="distribution-chart">';
+
+    const complexityDist = metrics.complexityDistribution;
+    const maxPct = Math.max(...Object.values(complexityDist));
+
+    ['A', 'B', 'C', 'D', 'F'].forEach(grade => {
+        const pct = complexityDist[grade] || 0;
+        const barWidth = maxPct > 0 ? (pct / maxPct * 100) : 0;
+        const color = getGradeColor(grade);
+        const range = getComplexityRange(grade);
+
+        html += `<div class="distribution-bar-row">
+            <div class="distribution-bar-label">
+                <span class="distribution-grade" style="color: ${color}">${grade}</span>
+                <span class="distribution-range">${range}</span>
+            </div>
+            <div class="distribution-bar-container">
+                <div class="distribution-bar-fill" style="width: ${barWidth}%; background: ${color}"></div>
+            </div>
+            <div class="distribution-bar-value">${pct.toFixed(1)}%</div>
+        </div>`;
+    });
+
+    html += '</div></div>';
+
+    // Function Size Distribution
+    html += '<div class="size-distribution-section">';
+    html += '<h3 class="section-title">Function Size Distribution</h3>';
+    html += '<div class="distribution-chart">';
+
+    const sizeDist = metrics.sizeDistribution;
+    const maxSizePct = Math.max(...Object.values(sizeDist));
+
+    [
+        { key: 'small', label: 'Small (1-20 lines)', color: '#238636' },
+        { key: 'medium', label: 'Medium (21-50 lines)', color: '#1f6feb' },
+        { key: 'large', label: 'Large (51-100 lines)', color: '#d29922' },
+        { key: 'veryLarge', label: 'Very Large (100+ lines)', color: '#da3633' }
+    ].forEach(({ key, label, color }) => {
+        const pct = sizeDist[key] || 0;
+        const barWidth = maxSizePct > 0 ? (pct / maxSizePct * 100) : 0;
+
+        html += `<div class="distribution-bar-row">
+            <div class="distribution-bar-label">
+                <span class="size-label">${label}</span>
+            </div>
+            <div class="distribution-bar-container">
+                <div class="distribution-bar-fill" style="width: ${barWidth}%; background: ${color}"></div>
+            </div>
+            <div class="distribution-bar-value">${pct.toFixed(1)}%</div>
+        </div>`;
+    });
+
+    html += '</div></div>';
+
+    // Historical Trends Section
+    html += '<div class="trends-section">';
+    html += '<h3 class="section-title">📊 Historical Trends</h3>';
+
+    // Check if trend data is available
+    if (window.graphTrendData && window.graphTrendData.entries && window.graphTrendData.entries.length > 0) {
+        const trendEntries = window.graphTrendData.entries;
+
+        // Render trend charts
+        html += '<div class="trends-container">';
+        html += '<div id="health-score-chart" class="trend-chart"></div>';
+        html += '<div id="complexity-chart" class="trend-chart"></div>';
+        html += '<div id="files-chunks-chart" class="trend-chart"></div>';
+        html += '</div>';
+
+        html += `<div class="trend-info">Showing ${trendEntries.length} data points from ${trendEntries[0].date} to ${trendEntries[trendEntries.length - 1].date}</div>`;
+    } else {
+        // No trend data yet - show placeholder
+        html += '<div class="future-placeholder">';
+        html += '<div class="future-icon">📊</div>';
+        html += '<div class="future-title">No Historical Data Yet</div>';
+        html += '<div class="future-description">';
+        html += 'Trend data will be collected automatically after each indexing operation. ';
+        html += 'Run <code>mcp-vector-search index</code> to generate the first snapshot.';
+        html += '</div>';
+        html += '</div>';
+    }
+
+    html += '</div>'; // trends-section
+
+    html += '</div>'; // trends-report
+
+    viewerContent.innerHTML = html;
+
+    // Hide section dropdown for reports (no code sections)
+    const sectionNav = document.getElementById('section-nav');
+    if (sectionNav) {
+        sectionNav.style.display = 'none';
+    }
+
+    // Render D3 charts if trend data is available
+    if (window.graphTrendData && window.graphTrendData.entries && window.graphTrendData.entries.length > 0) {
+        renderTrendCharts(window.graphTrendData.entries);
+    }
+}
+
+// ============================================================================
+// REMEDIATION REPORT GENERATION
+// ============================================================================
+
+function generateRemediationReport() {
+    // Gather complexity data (metrics are stored directly on nodes, not in a metrics object)
+    const complexityData = [];
+    allNodes.forEach(node => {
+        if (node.complexity !== undefined && node.complexity !== null) {
+            const complexity = node.complexity;
+            let grade = 'A';
+            if (complexity > 40) grade = 'F';
+            else if (complexity > 30) grade = 'D';
+            else if (complexity > 20) grade = 'C';
+            else if (complexity > 10) grade = 'B';
+
+            // Calculate lines from start_line and end_line
+            const lines = (node.end_line && node.start_line) ? (node.end_line - node.start_line + 1) : 0;
+
+            if (grade !== 'A' && grade !== 'B') {  // Only include C, D, F
+                complexityData.push({
+                    name: node.name || node.id,
+                    file: node.file_path || 'Unknown',
+                    type: node.type || 'unknown',
+                    complexity: complexity,
+                    grade: grade,
+                    lines: lines
+                });
+            }
+        }
+    });
+
+    // Gather code smell data
+    const smells = [];
+    allNodes.forEach(node => {
+        const file = node.file_path || 'Unknown';
+        const name = node.name || node.id;
+        const lines = (node.end_line && node.start_line) ? (node.end_line - node.start_line + 1) : 0;
+        const complexity = node.complexity || 0;
+        const depth = node.depth || 0;
+
+        // Long Method
+        if (lines > 50) {
+            smells.push({
+                file, name,
+                smell: 'Long Method',
+                severity: lines > 100 ? 'error' : 'warning',
+                detail: `${lines} lines (recommended: <50)`
+            });
+        }
+
+        // High Complexity
+        if (complexity > 15) {
+            smells.push({
+                file, name,
+                smell: 'High Complexity',
+                severity: complexity > 25 ? 'error' : 'warning',
+                detail: `Complexity: ${complexity} (recommended: <15)`
+            });
+        }
+
+        // Deep Nesting (using depth field)
+        if (depth > 4) {
+            smells.push({
+                file, name,
+                smell: 'Deep Nesting',
+                severity: depth > 6 ? 'error' : 'warning',
+                detail: `Depth: ${depth} (recommended: <4)`
+            });
+        }
+
+        // God Class (for classes only)
+        if (node.type === 'class' && lines > 300) {
+            smells.push({
+                file, name,
+                smell: 'God Class',
+                severity: 'error',
+                detail: `${lines} lines - consider breaking into smaller classes`
+            });
+        }
+    });
+
+    // Sort by severity (errors first) then by file
+    complexityData.sort((a, b) => {
+        const gradeOrder = { F: 0, D: 1, C: 2 };
+        return (gradeOrder[a.grade] || 99) - (gradeOrder[b.grade] || 99);
+    });
+
+    smells.sort((a, b) => {
+        if (a.severity !== b.severity) {
+            return a.severity === 'error' ? -1 : 1;
+        }
+        return a.file.localeCompare(b.file);
+    });
+
+    // Generate Markdown
+    const date = new Date().toISOString().split('T')[0];
+    let markdown = `# Code Remediation Report
+Generated: ${date}
+
+## Summary
+
+- **High Complexity Items**: ${complexityData.length}
+- **Code Smells Detected**: ${smells.length}
+- **Critical Issues (Errors)**: ${smells.filter(s => s.severity === 'error').length}
+
+---
+
+## 🔴 Priority: High Complexity Code
+
+These functions/methods have complexity scores that make them difficult to maintain and test.
+
+| Grade | Name | File | Complexity | Lines |
+|-------|------|------|------------|-------|
+`;
+
+    complexityData.forEach(item => {
+        const gradeEmoji = item.grade === 'F' ? '🔴' : item.grade === 'D' ? '🟠' : '🟡';
+        markdown += `| ${gradeEmoji} ${item.grade} | \\`${item.name}\\` | ${item.file} | ${item.complexity} | ${item.lines} |\\n`;
+    });
+
+    markdown += `
+---
+
+## 🔍 Code Smells
+
+### Critical Issues (Errors)
+
+`;
+
+    const errors = smells.filter(s => s.severity === 'error');
+    if (errors.length === 0) {
+        markdown += '_No critical issues found._\\n';
+    } else {
+        markdown += '| Smell | Name | File | Detail |\\n|-------|------|------|--------|\\n';
+        errors.forEach(s => {
+            markdown += `| 🔴 ${s.smell} | \\`${s.name}\\` | ${s.file} | ${s.detail} |\\n`;
+        });
+    }
+
+    markdown += `
+### Warnings
+
+`;
+
+    const warnings = smells.filter(s => s.severity === 'warning');
+    if (warnings.length === 0) {
+        markdown += '_No warnings found._\\n';
+    } else {
+        markdown += '| Smell | Name | File | Detail |\\n|-------|------|------|--------|\\n';
+        warnings.forEach(s => {
+            markdown += `| 🟡 ${s.smell} | \\`${s.name}\\` | ${s.file} | ${s.detail} |\\n`;
+        });
+    }
+
+    markdown += `
+---
+
+## Recommended Actions
+
+1. **Start with Grade F items** - These have the highest complexity and are hardest to maintain
+2. **Address Critical code smells** - God Classes and deeply nested code should be refactored
+3. **Break down long methods** - Extract helper functions to reduce complexity
+4. **Add tests before refactoring** - Ensure behavior is preserved
+
+---
+
+_Generated by MCP Vector Search Visualization_
+`;
+
+    // Save the file with dialog (or fallback to download)
+    const blob = new Blob([markdown], { type: 'text/markdown' });
+    const defaultFilename = `remediation-report-${date}.md`;
+
+    async function saveWithDialog() {
+        try {
+            // Use File System Access API if available (shows save dialog)
+            if ('showSaveFilePicker' in window) {
+                const handle = await window.showSaveFilePicker({
+                    suggestedName: defaultFilename,
+                    types: [{
+                        description: 'Markdown files',
+                        accept: { 'text/markdown': ['.md'] }
+                    }]
+                });
+                const writable = await handle.createWritable();
+                await writable.write(blob);
+                await writable.close();
+                return handle.name;
+            }
+        } catch (err) {
+            if (err.name === 'AbortError') {
+                return null; // User cancelled
+            }
+            console.warn('Save dialog failed, falling back to download:', err);
+        }
+
+        // Fallback: standard download
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = defaultFilename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        return defaultFilename;
+    }
+
+    saveWithDialog().then(savedFilename => {
+        if (savedFilename === null) {
+            // User cancelled - don't show confirmation
+            return;
+        }
+
+        // Show confirmation
+        openViewerPanel();
+        document.getElementById('viewer-title').textContent = '📋 Report Saved';
+        document.getElementById('viewer-content').innerHTML = `
+            <div class="report-section">
+                <h3>✅ Remediation Report Generated</h3>
+                <p>The report has been saved as <code>${escapeHtml(savedFilename)}</code></p>
+            <div class="metrics-grid">
+                <div class="metric-card">
+                    <div class="metric-value">${complexityData.length}</div>
+                    <div class="metric-label">Complexity Issues</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-value">${smells.length}</div>
+                    <div class="metric-label">Code Smells</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-value">${errors.length}</div>
+                    <div class="metric-label">Critical Errors</div>
+                </div>
+            </div>
+            <p style="margin-top: 15px; color: var(--text-secondary);">Share this report with your team for prioritized remediation.</p>
+        </div>
+    `;
+
+        // Hide section dropdown for reports (no code sections)
+        const sectionNav = document.getElementById('section-nav');
+        if (sectionNav) {
+            sectionNav.style.display = 'none';
+        }
+    });
+}
+
+// Render trend line charts using D3
+function renderTrendCharts(entries) {
+    // Chart dimensions
+    const margin = {top: 20, right: 30, bottom: 40, left: 50};
+    const width = 600 - margin.left - margin.right;
+    const height = 250 - margin.top - margin.bottom;
+
+    // Parse dates
+    const parseDate = d3.timeParse('%Y-%m-%d');
+    entries.forEach(d => {
+        d.parsedDate = parseDate(d.date);
+    });
+
+    // 1. Health Score Chart
+    renderLineChart('#health-score-chart', entries, {
+        title: 'Health Score Over Time',
+        width, height, margin,
+        yAccessor: d => d.metrics.health_score || 0,
+        yLabel: 'Health Score',
+        color: '#238636',
+        yDomain: [0, 100]
+    });
+
+    // 2. Average Complexity Chart
+    renderLineChart('#complexity-chart', entries, {
+        title: 'Average Complexity Over Time',
+        width, height, margin,
+        yAccessor: d => d.metrics.avg_complexity || 0,
+        yLabel: 'Avg Complexity',
+        color: '#d29922',
+        yDomain: [0, d3.max(entries, d => d.metrics.avg_complexity || 0) * 1.1]
+    });
+
+    // 3. Files and Chunks Chart (dual line)
+    renderDualLineChart('#files-chunks-chart', entries, {
+        title: 'Files and Chunks Over Time',
+        width, height, margin,
+        y1Accessor: d => d.metrics.total_files || 0,
+        y2Accessor: d => d.metrics.total_chunks || 0,
+        y1Label: 'Files',
+        y2Label: 'Chunks',
+        color1: '#1f6feb',
+        color2: '#8957e5'
+    });
+}
+
+// Render single line chart
+function renderLineChart(selector, data, config) {
+    const svg = d3.select(selector)
+        .append('svg')
+        .attr('width', config.width + config.margin.left + config.margin.right)
+        .attr('height', config.height + config.margin.top + config.margin.bottom)
+        .append('g')
+        .attr('transform', `translate(${config.margin.left},${config.margin.top})`);
+
+    // Add title
+    svg.append('text')
+        .attr('x', config.width / 2)
+        .attr('y', -5)
+        .attr('text-anchor', 'middle')
+        .style('font-size', '14px')
+        .style('font-weight', 'bold')
+        .text(config.title);
+
+    // Create scales
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(data, d => d.parsedDate))
+        .range([0, config.width]);
+
+    const yScale = d3.scaleLinear()
+        .domain(config.yDomain || [0, d3.max(data, config.yAccessor)])
+        .range([config.height, 0]);
+
+    // Create line generator
+    const line = d3.line()
+        .x(d => xScale(d.parsedDate))
+        .y(d => yScale(config.yAccessor(d)))
+        .curve(d3.curveMonotoneX);
+
+    // Add X axis
+    svg.append('g')
+        .attr('transform', `translate(0,${config.height})`)
+        .call(d3.axisBottom(xScale).ticks(5).tickFormat(d3.timeFormat('%b %d')))
+        .selectAll('text')
+        .style('font-size', '11px');
+
+    // Add Y axis
+    svg.append('g')
+        .call(d3.axisLeft(yScale).ticks(5))
+        .selectAll('text')
+        .style('font-size', '11px');
+
+    // Add Y axis label
+    svg.append('text')
+        .attr('transform', 'rotate(-90)')
+        .attr('y', 0 - config.margin.left + 10)
+        .attr('x', 0 - (config.height / 2))
+        .attr('dy', '1em')
+        .style('text-anchor', 'middle')
+        .style('font-size', '12px')
+        .text(config.yLabel);
+
+    // Add line path
+    svg.append('path')
+        .datum(data)
+        .attr('fill', 'none')
+        .attr('stroke', config.color)
+        .attr('stroke-width', 2)
+        .attr('d', line);
+
+    // Add dots
+    svg.selectAll('.dot')
+        .data(data)
+        .enter().append('circle')
+        .attr('class', 'dot')
+        .attr('cx', d => xScale(d.parsedDate))
+        .attr('cy', d => yScale(config.yAccessor(d)))
+        .attr('r', 4)
+        .attr('fill', config.color)
+        .style('cursor', 'pointer')
+        .append('title')
+        .text(d => `${d.date}: ${config.yAccessor(d).toFixed(1)}`);
+}
+
+// Render dual line chart (two Y axes)
+function renderDualLineChart(selector, data, config) {
+    const svg = d3.select(selector)
+        .append('svg')
+        .attr('width', config.width + config.margin.left + config.margin.right)
+        .attr('height', config.height + config.margin.top + config.margin.bottom)
+        .append('g')
+        .attr('transform', `translate(${config.margin.left},${config.margin.top})`);
+
+    // Add title
+    svg.append('text')
+        .attr('x', config.width / 2)
+        .attr('y', -5)
+        .attr('text-anchor', 'middle')
+        .style('font-size', '14px')
+        .style('font-weight', 'bold')
+        .text(config.title);
+
+    // Create scales
+    const xScale = d3.scaleTime()
+        .domain(d3.extent(data, d => d.parsedDate))
+        .range([0, config.width]);
+
+    const y1Scale = d3.scaleLinear()
+        .domain([0, d3.max(data, config.y1Accessor) * 1.1])
+        .range([config.height, 0]);
+
+    const y2Scale = d3.scaleLinear()
+        .domain([0, d3.max(data, config.y2Accessor) * 1.1])
+        .range([config.height, 0]);
+
+    // Create line generators
+    const line1 = d3.line()
+        .x(d => xScale(d.parsedDate))
+        .y(d => y1Scale(config.y1Accessor(d)))
+        .curve(d3.curveMonotoneX);
+
+    const line2 = d3.line()
+        .x(d => xScale(d.parsedDate))
+        .y(d => y2Scale(config.y2Accessor(d)))
+        .curve(d3.curveMonotoneX);
+
+    // Add X axis
+    svg.append('g')
+        .attr('transform', `translate(0,${config.height})`)
+        .call(d3.axisBottom(xScale).ticks(5).tickFormat(d3.timeFormat('%b %d')))
+        .selectAll('text')
+        .style('font-size', '11px');
+
+    // Add Y1 axis (left)
+    svg.append('g')
+        .call(d3.axisLeft(y1Scale).ticks(5))
+        .selectAll('text')
+        .style('font-size', '11px')
+        .style('fill', config.color1);
+
+    // Add Y2 axis (right)
+    svg.append('g')
+        .attr('transform', `translate(${config.width},0)`)
+        .call(d3.axisRight(y2Scale).ticks(5))
+        .selectAll('text')
+        .style('font-size', '11px')
+        .style('fill', config.color2);
+
+    // Add line 1
+    svg.append('path')
+        .datum(data)
+        .attr('fill', 'none')
+        .attr('stroke', config.color1)
+        .attr('stroke-width', 2)
+        .attr('d', line1);
+
+    // Add line 2
+    svg.append('path')
+        .datum(data)
+        .attr('fill', 'none')
+        .attr('stroke', config.color2)
+        .attr('stroke-width', 2)
+        .attr('stroke-dasharray', '5,5')
+        .attr('d', line2);
+
+    // Add legend
+    const legend = svg.append('g')
+        .attr('transform', `translate(${config.width - 120}, 10)`);
+
+    legend.append('line')
+        .attr('x1', 0).attr('x2', 20)
+        .attr('y1', 5).attr('y2', 5)
+        .attr('stroke', config.color1)
+        .attr('stroke-width', 2);
+    legend.append('text')
+        .attr('x', 25).attr('y', 9)
+        .style('font-size', '11px')
+        .text(config.y1Label);
+
+    legend.append('line')
+        .attr('x1', 0).attr('x2', 20)
+        .attr('y1', 20).attr('y2', 20)
+        .attr('stroke', config.color2)
+        .attr('stroke-width', 2)
+        .attr('stroke-dasharray', '5,5');
+    legend.append('text')
+        .attr('x', 25).attr('y', 24)
+        .style('font-size', '11px')
+        .text(config.y2Label);
+}
+
+function calculateCodebaseMetrics() {
+    const metrics = {
+        totalLines: 0,
+        totalFunctions: 0,
+        totalClasses: 0,
+        totalFiles: 0,
+        complexityDistribution: { A: 0, B: 0, C: 0, D: 0, F: 0 },
+        sizeDistribution: { small: 0, medium: 0, large: 0, veryLarge: 0 },
+        healthScore: 0
+    };
+
+    const chunksWithComplexity = [];
+
+    function analyzeNode(node) {
+        // Count files
+        if (node.type === 'file') {
+            metrics.totalFiles++;
+        }
+
+        // Count classes
+        if (node.type === 'class') {
+            metrics.totalClasses++;
+        }
+
+        // Count functions and methods
+        if (node.type === 'function' || node.type === 'method') {
+            metrics.totalFunctions++;
+
+            // Calculate lines
+            const lineCount = (node.end_line && node.start_line)
+                ? node.end_line - node.start_line + 1
+                : 0;
+            metrics.totalLines += lineCount;
+
+            // Size distribution
+            if (lineCount <= 20) {
+                metrics.sizeDistribution.small++;
+            } else if (lineCount <= 50) {
+                metrics.sizeDistribution.medium++;
+            } else if (lineCount <= 100) {
+                metrics.sizeDistribution.large++;
+            } else {
+                metrics.sizeDistribution.veryLarge++;
+            }
+
+            // Complexity distribution
+            if (node.complexity !== undefined && node.complexity !== null) {
+                const grade = getComplexityGrade(node.complexity);
+                if (grade in metrics.complexityDistribution) {
+                    metrics.complexityDistribution[grade]++;
+                }
+                chunksWithComplexity.push(node);
+            }
+        }
+
+        // Recursively process children
+        const children = node.children || node._children || [];
+        children.forEach(child => analyzeNode(child));
+    }
+
+    if (treeData) {
+        analyzeNode(treeData);
+    }
+
+    // Convert complexity counts to percentages
+    const totalWithComplexity = chunksWithComplexity.length;
+    if (totalWithComplexity > 0) {
+        Object.keys(metrics.complexityDistribution).forEach(grade => {
+            metrics.complexityDistribution[grade] =
+                (metrics.complexityDistribution[grade] / totalWithComplexity) * 100;
+        });
+    }
+
+    // Convert size counts to percentages
+    const totalFuncs = metrics.totalFunctions;
+    if (totalFuncs > 0) {
+        Object.keys(metrics.sizeDistribution).forEach(size => {
+            metrics.sizeDistribution[size] =
+                (metrics.sizeDistribution[size] / totalFuncs) * 100;
+        });
+    }
+
+    // Calculate health score
+    metrics.healthScore = calculateHealthScore(chunksWithComplexity);
+
+    return metrics;
+}
+
+function calculateHealthScore(chunks) {
+    if (chunks.length === 0) return 100;
+
+    let score = 0;
+    chunks.forEach(chunk => {
+        const grade = getComplexityGrade(chunk.complexity);
+        const gradeScores = { A: 100, B: 80, C: 60, D: 40, F: 20 };
+        score += gradeScores[grade] || 50;
+    });
+
+    return Math.round(score / chunks.length);
+}
+
+function getHealthScoreInfo(score) {
+    if (score >= 80) {
+        return {
+            emoji: '🟢',
+            label: 'Excellent',
+            color: '#238636',
+            description: 'Your codebase has excellent complexity distribution with most code in the A-B range.'
+        };
+    } else if (score >= 60) {
+        return {
+            emoji: '🟡',
+            label: 'Good',
+            color: '#d29922',
+            description: 'Your codebase is in good shape, but could benefit from refactoring some complex functions.'
+        };
+    } else if (score >= 40) {
+        return {
+            emoji: '🟠',
+            label: 'Needs Attention',
+            color: '#f0883e',
+            description: 'Your codebase has significant complexity issues that should be addressed soon.'
+        };
+    } else {
+        return {
+            emoji: '🔴',
+            label: 'Critical',
+            color: '#da3633',
+            description: 'Your codebase has critical complexity issues requiring immediate refactoring.'
+        };
+    }
+}
+
+function getComplexityRange(grade) {
+    const ranges = {
+        'A': '1-5',
+        'B': '6-10',
+        'C': '11-15',
+        'D': '16-20',
+        'F': '21+'
+    };
+    return ranges[grade] || '';
+}
+
+function showComingSoon(reportName) {
+    alert(`${reportName} - Coming Soon!\n\nThis feature will display detailed ${reportName.toLowerCase()} in a future release.`);
+}
+
+// ============================================================================
+// INITIALIZATION
+// ============================================================================
+
+// Load data and initialize UI when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('=== PAGE INITIALIZATION ===');
+    console.log('DOMContentLoaded event fired');
+
+    // Load theme preference before anything else
+    loadThemePreference();
 
     // Initialize toggle label highlighting
     const labels = document.querySelectorAll('.toggle-label');