mcp-vector-search 0.12.1__py3-none-any.whl → 0.12.2__py3-none-any.whl

mcp_vector_search/__init__.py

@@ -1,7 +1,7 @@
 """MCP Vector Search - CLI-first semantic code search with MCP integration."""
 
-__version__ = "0.12.1"
-__build__ = "51"
+__version__ = "0.12.2"
+__build__ = "52"
 __author__ = "Robert Matsuoka"
 __email__ = "bobmatnyc@gmail.com"
 

mcp_vector_search/cli/commands/visualize.py

@@ -1069,12 +1069,18 @@ def _create_visualization_html(html_file: Path) -> None:
                 .style("pointer-events", "none")
                 .text(d => collapsedNodes.has(d.id) ? "+" : "−");
 
-            // Add labels (show "Import:" prefix for L1 nodes)
+            // Add labels (show actual import statement for L1 nodes)
             node.append("text")
                 .text(d => {
                     // L1 (depth 1) nodes are imports
                     if (d.depth === 1 && d.type !== 'directory' && d.type !== 'file') {
-                        return `Import: ${d.name}`;
+                        if (d.content) {
+                            // Extract first line of import statement
+                            const importLine = d.content.split('\n')[0].trim();
+                            // Truncate if too long (max 60 chars)
+                            return importLine.length > 60 ? importLine.substring(0, 57) + '...' : importLine;
+                        }
+                        return d.name;  // Fallback to name if no content
                     }
                     return d.name;
                 })
@@ -1230,9 +1236,14 @@ def _create_visualization_html(html_file: Path) -> None:
             const meta = document.getElementById('pane-meta');
             const content = document.getElementById('pane-content');
 
-            // Set title with "Import:" prefix for L1 nodes
+            // Set title with actual import statement for L1 nodes
             if (node.depth === 1 && node.type !== 'directory' && node.type !== 'file') {
-                title.textContent = `Import: ${node.name}`;
+                if (node.content) {
+                    const importLine = node.content.split('\n')[0].trim();
+                    title.textContent = importLine;
+                } else {
+                    title.textContent = `Import: ${node.name}`;
+                }
             } else {
                 title.textContent = node.name;
             }
@@ -1360,10 +1371,15 @@ def _create_visualization_html(html_file: Path) -> None:
         }
 
         function showImportDetails(node, container) {
-            // L1 nodes are import statements
+            // L1 nodes are import statements - show import content prominently
             const importHtml = `
                 <div class="import-details">
-                    <div class="import-statement">${escapeHtml(node.name)}</div>
+                    ${node.content ? `
+                        <div style="margin-bottom: 16px;">
+                            <div class="detail-label" style="margin-bottom: 8px;">Import Statement:</div>
+                            <pre><code>${escapeHtml(node.content)}</code></pre>
+                        </div>
+                    ` : '<p style="color: #8b949e;">No import content available</p>'}
                     <div class="detail-row">
                         <span class="detail-label">File:</span> ${node.file_path}
                     </div>
@@ -1377,12 +1393,6 @@ def _create_visualization_html(html_file: Path) -> None:
                             <span class="detail-label">Language:</span> ${node.language}
                         </div>
                     ` : ''}
-                    ${node.content ? `
-                        <div style="margin-top: 16px;">
-                            <div class="detail-label" style="margin-bottom: 8px;">Import Statement:</div>
-                            <pre><code>${escapeHtml(node.content)}</code></pre>
-                        </div>
-                    ` : ''}
                 </div>
             `;
 

mcp_vector_search/visualization/index.html

@@ -2,10 +2,15 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
     <title>Code Chunk Relationship Graph</title>
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="favicon-v1.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-v1-16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-v1-32.png">
+    <link rel="icon" type="image/png" sizes="64x64" href="favicon-v1-64.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="favicon-v1-512.png">
+
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <style>
         body {
@@ -80,26 +85,43 @@
             cursor: pointer;
             stroke: #c9d1d9;
             stroke-width: 1.5px;
+            transition: all 0.2s ease;
+        }
+
+        .node circle:hover,
+        .node rect:hover {
+            stroke-width: 3px !important;
+            filter: brightness(1.2);
+            cursor: pointer;
         }
 
-        .node.directory circle { fill: #ffa657; }
-        .node.file circle { fill: #58a6ff; }
         .node.module circle { fill: #238636; }
         .node.class circle { fill: #1f6feb; }
         .node.function circle { fill: #d29922; }
         .node.method circle { fill: #8957e5; }
-        .node.imports circle { fill: #6e7681; }
-        .node.text circle { fill: #6e7681; }
         .node.code circle { fill: #6e7681; }
+        .node.file circle {
+            fill: none;
+            stroke: #58a6ff;
+            stroke-width: 2px;
+            stroke-dasharray: 5,3;
+            opacity: 0.6;
+        }
+        .node.directory circle {
+            fill: none;
+            stroke: #79c0ff;
+            stroke-width: 2px;
+            stroke-dasharray: 3,3;
+            opacity: 0.5;
+        }
         .node.subproject circle { fill: #da3633; stroke-width: 3px; }
 
-        .node-icon {
-            font-size: 35px !important;
-            text-anchor: middle;
-            pointer-events: none;
-            user-select: none;
-            fill: #0d1117;
-            font-weight: bold;
+        /* Non-code document nodes - squares */
+        .node.docstring rect { fill: #8b949e; }
+        .node.comment rect { fill: #6e7681; }
+        .node rect {
+            stroke: #c9d1d9;
+            stroke-width: 1.5px;
         }
 
         .node text {
@@ -110,10 +132,19 @@
             user-select: none;
         }
 
+        .node-icon {
+            font-size: 35px !important;
+            text-anchor: middle;
+            pointer-events: none;
+            user-select: none;
+            fill: #0d1117;
+            font-weight: bold;
+        }
+
         .link {
-            stroke: #58a6ff;
-            stroke-opacity: 0.4;
-            stroke-width: 2px;
+            stroke: #30363d;
+            stroke-opacity: 0.6;
+            stroke-width: 1.5px;
         }
 
         .link.dependency {
@@ -144,73 +175,141 @@
             color: #8b949e;
         }
 
-        #code-viewer {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            width: 500px;
-            max-height: 80vh;
-            background: rgba(13, 17, 23, 0.95);
-            border: 1px solid #30363d;
-            border-radius: 6px;
-            padding: 16px;
+        #content-pane {
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 600px;
+            height: 100vh;
+            background: rgba(13, 17, 23, 0.98);
+            border-left: 1px solid #30363d;
             overflow-y: auto;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-            display: none;
+            box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
+            transform: translateX(100%);
+            transition: transform 0.3s ease-in-out;
+            z-index: 1000;
         }
 
-        #code-viewer.visible {
-            display: block;
+        #content-pane.visible {
+            transform: translateX(0);
         }
 
-        #code-viewer .header {
-            margin-bottom: 12px;
-            padding-bottom: 12px;
+        #content-pane .pane-header {
+            position: sticky;
+            top: 0;
+            background: rgba(13, 17, 23, 0.98);
+            padding: 20px;
             border-bottom: 1px solid #30363d;
+            z-index: 1;
         }
 
-        #code-viewer .title {
-            font-size: 14px;
+        #content-pane .pane-title {
+            font-size: 16px;
             font-weight: bold;
             color: #58a6ff;
-            margin-bottom: 4px;
+            margin-bottom: 8px;
+            padding-right: 30px;
         }
 
-        #code-viewer .meta {
-            font-size: 11px;
+        #content-pane .pane-meta {
+            font-size: 12px;
             color: #8b949e;
         }
 
-        #code-viewer .close-btn {
-            float: right;
+        #content-pane .collapse-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
             cursor: pointer;
             color: #8b949e;
-            font-size: 20px;
+            font-size: 24px;
             line-height: 1;
-            margin-top: -4px;
+            background: none;
+            border: none;
+            padding: 0;
+            transition: color 0.2s;
         }
 
-        #code-viewer .close-btn:hover {
+        #content-pane .collapse-btn:hover {
             color: #c9d1d9;
         }
 
-        #code-viewer pre {
+        #content-pane .pane-content {
+            padding: 20px;
+        }
+
+        #content-pane pre {
             margin: 0;
-            padding: 12px;
+            padding: 16px;
             background: #0d1117;
             border: 1px solid #30363d;
             border-radius: 6px;
             overflow-x: auto;
-            font-size: 11px;
-            line-height: 1.5;
+            font-size: 12px;
+            line-height: 1.6;
         }
 
-        #code-viewer code {
+        #content-pane code {
             color: #c9d1d9;
             font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
         }
 
-        .node.highlighted circle {
+        #content-pane .directory-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        #content-pane .directory-list li {
+            padding: 8px 12px;
+            margin: 4px 0;
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 4px;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+        }
+
+        #content-pane .directory-list .item-icon {
+            margin-right: 8px;
+            font-size: 14px;
+        }
+
+        #content-pane .directory-list .item-type {
+            margin-left: auto;
+            padding-left: 12px;
+            font-size: 10px;
+            color: #8b949e;
+        }
+
+        #content-pane .import-details {
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 6px;
+            padding: 16px;
+        }
+
+        #content-pane .import-details .import-statement {
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 12px;
+            color: #79c0ff;
+            margin-bottom: 12px;
+        }
+
+        #content-pane .import-details .detail-row {
+            font-size: 11px;
+            color: #8b949e;
+            margin: 4px 0;
+        }
+
+        #content-pane .import-details .detail-label {
+            color: #c9d1d9;
+            font-weight: 600;
+        }
+
+        .node.highlighted circle,
+        .node.highlighted rect {
             stroke: #f0e68c;
             stroke-width: 3px;
             filter: drop-shadow(0 0 8px #f0e68c);
@@ -228,25 +327,37 @@
         <h3>Legend</h3>
         <div class="legend">
             <div class="legend-item">
-                📁 <span class="legend-color" style="background: #ffa657;"></span> Directory
+                <span class="legend-color" style="background: #da3633;"></span> Subproject
+            </div>
+            <div class="legend-item">
+                <span class="legend-color" style="border: 2px dashed #79c0ff; border-radius: 50%; background: transparent;"></span> Directory
+            </div>
+            <div class="legend-item">
+                <span class="legend-color" style="border: 2px dashed #58a6ff; border-radius: 50%; background: transparent;"></span> File
+            </div>
+            <div class="legend-item">
+                <span class="legend-color" style="background: #238636;"></span> Module
             </div>
             <div class="legend-item">
-                📄 <span class="legend-color" style="background: #58a6ff;"></span> File
+                <span class="legend-color" style="background: #1f6feb;"></span> Class
             </div>
             <div class="legend-item">
-                C <span class="legend-color" style="background: #1f6feb;"></span> Class
+                <span class="legend-color" style="background: #d29922;"></span> Function
             </div>
             <div class="legend-item">
-                ƒ <span class="legend-color" style="background: #d29922;"></span> Function
+                <span class="legend-color" style="background: #8957e5;"></span> Method
             </div>
             <div class="legend-item">
-                m <span class="legend-color" style="background: #8957e5;"></span> Method
+                <span class="legend-color" style="background: #6e7681;"></span> Code
+            </div>
+            <div class="legend-item" style="font-style: italic; color: #79c0ff;">
+                <span class="legend-color" style="background: #6e7681;"></span> Import
             </div>
             <div class="legend-item">
-                M <span class="legend-color" style="background: #238636;"></span> Module
+                <span class="legend-color" style="background: #8b949e; border-radius: 2px;"></span> Docstring ▢
             </div>
             <div class="legend-item">
-                • <span class="legend-color" style="background: #6e7681;"></span> Text/Other
+                <span class="legend-color" style="background: #6e7681; border-radius: 2px;"></span> Comment ▢
             </div>
         </div>
 
@@ -261,13 +372,13 @@
     <svg id="graph"></svg>
     <div id="tooltip" class="tooltip"></div>
 
-    <div id="code-viewer">
-        <div class="header">
-            <span class="close-btn" onclick="closeCodeViewer()">×</span>
-            <div class="title" id="viewer-title"></div>
-            <div class="meta" id="viewer-meta"></div>
+    <div id="content-pane">
+        <div class="pane-header">
+            <button class="collapse-btn" onclick="closeContentPane()">×</button>
+            <div class="pane-title" id="pane-title"></div>
+            <div class="pane-meta" id="pane-meta"></div>
         </div>
-        <pre><code id="viewer-code"></code></pre>
+        <div class="pane-content" id="pane-content"></div>
     </div>
 
     <script>
@@ -286,7 +397,6 @@
         let simulation;
         let allNodes = [];
         let allLinks = [];
-        let allLinksOriginal = []; // Keep original link structure before D3 modifies it
         let visibleNodes = new Set();
         let collapsedNodes = new Set();
         let highlightedNode = null;
@@ -296,8 +406,6 @@
 
             allNodes = data.nodes;
             allLinks = data.links;
-            // Deep copy links before D3 modifies them
-            allLinksOriginal = JSON.parse(JSON.stringify(data.links));
 
             // Find root nodes - start with only top-level nodes
             let rootNodes;
@@ -305,21 +413,36 @@
                 // In monorepos, subproject nodes are roots
                 rootNodes = allNodes.filter(n => n.type === 'subproject');
             } else {
-                // Regular projects: prefer directories, fallback to files
+                // Regular projects: Find root nodes by graph structure
                 const dirNodes = allNodes.filter(n => n.type === 'directory');
                 const fileNodes = allNodes.filter(n => n.type === 'file');
 
-                if (dirNodes.length > 0) {
-                    // Show root-level directories (minimum depth)
-                    const minDirDepth = Math.min(...dirNodes.map(n => n.depth || 0));
-                    rootNodes = dirNodes.filter(n => (n.depth || 0) === minDirDepth);
-                } else if (fileNodes.length > 0) {
-                    // No directories, show root-level files
-                    const minFileDepth = Math.min(...fileNodes.map(n => n.depth || 0));
-                    rootNodes = fileNodes.filter(n => (n.depth || 0) === minFileDepth);
-                } else {
-                    // No directories or files, show all nodes
-                    rootNodes = allNodes;
+                // Find minimum depth for directories and files (for fallback)
+                let minDirDepth = Infinity;
+                let minFileDepth = Infinity;
+
+                dirNodes.forEach(d => {
+                    if (d.depth < minDirDepth) minDirDepth = d.depth;
+                });
+
+                fileNodes.forEach(f => {
+                    if (f.depth < minFileDepth) minFileDepth = f.depth;
+                });
+
+                // CORRECT: Find root nodes by checking graph structure
+                // Root nodes are nodes with no incoming links (no parent)
+                const targetIds = new Set(allLinks.map(link => link.target));
+                rootNodes = allNodes.filter(node => !targetIds.has(node.id));
+
+                console.log(`Root nodes found via links: ${rootNodes.length}`, rootNodes.map(n => n.name));
+
+                // Fallback only if we got 0 root nodes (shouldn't happen with correct data)
+                if (rootNodes.length === 0) {
+                    console.warn('No root nodes found via links, falling back to depth-based detection');
+                    rootNodes = [
+                        ...dirNodes.filter(n => n.depth === minDirDepth),
+                        ...fileNodes.filter(n => n.depth === minFileDepth)
+                    ];
                 }
             }
 
@@ -327,58 +450,35 @@
             visibleNodes = new Set(rootNodes.map(n => n.id));
             collapsedNodes = new Set(rootNodes.map(n => n.id));
 
+            console.log('=== INITIAL STATE ===');
+            console.log(`Total nodes: ${allNodes.length}`);
+            console.log(`Total links: ${allLinks.length}`);
+            console.log(`Root nodes: ${rootNodes.length}`, rootNodes.map(n => n.name));
+            console.log(`Initial visibleNodes:`, Array.from(visibleNodes));
+            console.log(`Initial collapsedNodes:`, Array.from(collapsedNodes));
+
             renderGraph();
         }
 
         function renderGraph() {
+            console.log('=== renderGraph() called ===');
+            console.log(`visibleNodes.size: ${visibleNodes.size}`);
+            console.log(`collapsedNodes.size: ${collapsedNodes.size}`);
+
             const visibleNodesList = allNodes.filter(n => visibleNodes.has(n.id));
+            console.log(`Rendering ${visibleNodesList.length} visible nodes`);
+
             const visibleLinks = allLinks.filter(l =>
                 visibleNodes.has(l.source.id || l.source) &&
                 visibleNodes.has(l.target.id || l.target)
             );
-
-            // Dynamic collision radius based on node type
-            const getNodeRadius = (d) => {
-                if (d.type === 'directory') return 35;
-                if (d.type === 'file') return 32;
-                if (d.type === 'subproject') return 38;
-                return d.complexity ? Math.min(20 + d.complexity * 2, 35) : 25;
-            };
-
-            // Dynamic link distance based on node types
-            const getLinkDistance = (link) => {
-                const source = typeof link.source === 'object' ? link.source : visibleNodesList.find(n => n.id === link.source);
-                const target = typeof link.target === 'object' ? link.target : visibleNodesList.find(n => n.id === link.target);
-
-                if (!source || !target) return 150;
-
-                // Longer distances for directory relationships
-                if (source.type === 'directory' || target.type === 'directory') return 200;
-                if (source.type === 'file' || target.type === 'file') return 150;
-                return 100;
-            };
+            console.log(`Rendering ${visibleLinks.length} visible links`);
 
             simulation = d3.forceSimulation(visibleNodesList)
-                .force("link", d3.forceLink(visibleLinks)
-                    .id(d => d.id)
-                    .distance(getLinkDistance)
-                    .strength(0.5))
-                .force("charge", d3.forceManyBody()
-                    .strength(d => {
-                        // Stronger repulsion for directories and files
-                        if (d.type === 'directory') return -800;
-                        if (d.type === 'file') return -600;
-                        return -400;
-                    })
-                    .distanceMax(500))
+                .force("link", d3.forceLink(visibleLinks).id(d => d.id).distance(100))
+                .force("charge", d3.forceManyBody().strength(-400))
                 .force("center", d3.forceCenter(width / 2, height / 2))
-                .force("collision", d3.forceCollide()
-                    .radius(getNodeRadius)
-                    .strength(0.9))
-                .force("x", d3.forceX(width / 2).strength(0.05))
-                .force("y", d3.forceY(height / 2).strength(0.05))
-                .alphaDecay(0.02)
-                .velocityDecay(0.3);
+                .force("collision", d3.forceCollide().radius(40));
 
             g.selectAll("*").remove();
 
@@ -404,16 +504,59 @@
                 .on("mouseover", showTooltip)
                 .on("mouseout", hideTooltip);
 
-            // Add circles
-            node.append("circle")
+            // Add shapes based on node type (circles for code, squares for docs)
+            const isDocNode = d => ['docstring', 'comment'].includes(d.type);
+
+            // Add circles for code nodes
+            node.filter(d => !isDocNode(d))
+                .append("circle")
                 .attr("r", d => {
-                    if (d.type === 'directory') return 25;
-                    if (d.type === 'file') return 22;
-                    if (d.type === 'subproject') return 28;
-                    return d.complexity ? Math.min(12 + d.complexity * 2, 25) : 15;
+                    if (d.type === 'subproject') return 20;
+                    if (d.type === 'directory') return 40;  // Largest for directory containers
+                    if (d.type === 'file') return 30;  // Larger transparent circle for files
+                    return d.complexity ? Math.min(8 + d.complexity * 2, 25) : 12;
+                })
+                .attr("stroke", d => hasChildren(d) ? "#ffffff" : "none")
+                .attr("stroke-width", d => hasChildren(d) ? 3 : 0)
+                .style("fill", d => d.color || null);  // Use custom color if available
+
+            // Add rectangles for document nodes
+            node.filter(d => isDocNode(d))
+                .append("rect")
+                .attr("width", d => {
+                    const size = d.complexity ? Math.min(8 + d.complexity * 2, 25) : 12;
+                    return size * 2;
+                })
+                .attr("height", d => {
+                    const size = d.complexity ? Math.min(8 + d.complexity * 2, 25) : 12;
+                    return size * 2;
                 })
+                .attr("x", d => {
+                    const size = d.complexity ? Math.min(8 + d.complexity * 2, 25) : 12;
+                    return -size;
+                })
+                .attr("y", d => {
+                    const size = d.complexity ? Math.min(8 + d.complexity * 2, 25) : 12;
+                    return -size;
+                })
+                .attr("rx", 2)  // Rounded corners
+                .attr("ry", 2)
+                .attr("stroke", d => hasChildren(d) ? "#ffffff" : "none")
+                .attr("stroke-width", d => hasChildren(d) ? 3 : 0)
                 .style("fill", d => d.color || null);
 
+            // Add expand/collapse indicator
+            node.filter(d => hasChildren(d))
+                .append("text")
+                .attr("class", "expand-indicator")
+                .attr("text-anchor", "middle")
+                .attr("dy", 5)
+                .style("font-size", "16px")
+                .style("font-weight", "bold")
+                .style("fill", "#ffffff")
+                .style("pointer-events", "none")
+                .text(d => collapsedNodes.has(d.id) ? "+" : "−");
+
             // Add icons based on node type
             node.append("text")
                 .attr("class", "node-icon")
@@ -426,24 +569,27 @@
                     if (d.type === 'method') return 'm';
                     if (d.type === 'module') return 'M';
                     if (d.type === 'imports') return '⇄';
+                    if (d.type === 'docstring') return '📝';
+                    if (d.type === 'comment') return '💬';
+                    if (d.type === 'subproject') return '📦';
                     return '•';
                 });
 
-            // Add expand/collapse indicator for nodes with children
-            node.filter(d => hasChildren(d))
-                .append("text")
-                .attr("class", "expand-indicator")
-                .attr("text-anchor", "middle")
-                .attr("dy", -20)
-                .style("font-size", "14px")
-                .style("font-weight", "bold")
-                .style("fill", "#58a6ff")
-                .style("pointer-events", "none")
-                .text(d => collapsedNodes.has(d.id) ? "+" : "−");
-
-            // Add labels
+            // Add labels (show actual import statement for import nodes)
             node.append("text")
-                .text(d => d.name)
+                .text(d => {
+                    // Import nodes have type === 'imports'
+                    if (d.type === 'imports') {
+                        if (d.content) {
+                            // Extract first line of import statement
+                            const importLine = d.content.split('\n')[0].trim();
+                            // Truncate if too long (max 60 chars)
+                            return importLine.length > 60 ? importLine.substring(0, 57) + '...' : importLine;
+                        }
+                        return d.name;  // Fallback to name if no content
+                    }
+                    return d.name;
+                })
                 .attr("dy", 30);
 
             simulation.on("tick", () => {
@@ -460,50 +606,87 @@
         }
 
         function hasChildren(node) {
-            // Use original links (not modified by D3)
-            return allLinksOriginal.some(l => l.source === node.id);
+            // Handle both pre-mutation (string IDs) and post-mutation (object references)
+            const result = allLinks.some(l => {
+                const sourceId = typeof l.source === 'object' ? l.source.id : l.source;
+                return sourceId === node.id;
+            });
+            console.log(`hasChildren(${node.name}):`, result,
+                `Checking ${allLinks.length} links for node ID: ${node.id}`);
+            return result;
         }
 
         function handleNodeClick(event, d) {
+            console.log('=== NODE CLICKED ===');
+            console.log('Node:', d.name, 'Type:', d.type, 'ID:', d.id);
+            console.log('Event:', event);
+
             event.stopPropagation();
 
-            // If node has children, toggle expansion
-            if (hasChildren(d)) {
-                if (collapsedNodes.has(d.id)) {
+            // Always show content pane when clicking any node
+            showContentPane(d);
+
+            // If node has children, also toggle expansion
+            const nodeHasChildren = hasChildren(d);
+            console.log('Node has children:', nodeHasChildren);
+
+            if (nodeHasChildren) {
+                const isCollapsed = collapsedNodes.has(d.id);
+                console.log('Node is collapsed:', isCollapsed);
+
+                if (isCollapsed) {
+                    console.log('Expanding node...');
                     expandNode(d);
                 } else {
+                    console.log('Collapsing node...');
                     collapseNode(d);
                 }
+                console.log('Calling renderGraph()...');
                 renderGraph();
+                console.log('renderGraph() complete');
             } else {
-                // Leaf node - show code viewer
-                showCodeViewer(d);
+                console.log('Node has no children, skipping expansion');
             }
         }
 
         function expandNode(node) {
+            console.log(`expandNode(${node.name}):`, 'Removing from collapsedNodes');
             collapsedNodes.delete(node.id);
 
-            // Find direct children using original links (not modified by D3)
-            const children = allLinksOriginal
-                .filter(l => l.source === node.id)
-                .map(l => allNodes.find(n => n.id === l.target))
+            // Find direct children
+            const childLinks = allLinks.filter(l => (l.source.id || l.source) === node.id);
+            console.log(`  Found ${childLinks.length} child links for node ${node.id}`);
+
+            const children = childLinks
+                .map(l => {
+                    const targetId = l.target.id || l.target;
+                    const child = allNodes.find(n => n.id === targetId);
+                    if (!child) {
+                        console.warn(`  Could not find child node with ID: ${targetId}`);
+                    }
+                    return child;
+                })
                 .filter(n => n);
 
+            console.log(`  Found ${children.length} child nodes:`, children.map(c => c.name));
+
             children.forEach(child => {
+                console.log(`    Adding child to visibleNodes: ${child.name} (${child.id})`);
                 visibleNodes.add(child.id);
                 collapsedNodes.add(child.id); // Children start collapsed
             });
+
+            console.log(`  visibleNodes now has ${visibleNodes.size} items`);
         }
 
         function collapseNode(node) {
             collapsedNodes.add(node.id);
 
-            // Hide all descendants recursively using original links
+            // Hide all descendants recursively
             function hideDescendants(parentId) {
-                const children = allLinksOriginal
-                    .filter(l => l.source === parentId)
-                    .map(l => l.target);
+                const children = allLinks
+                    .filter(l => (l.source.id || l.source) === parentId)
+                    .map(l => l.target.id || l.target);
 
                 children.forEach(childId => {
                     visibleNodes.delete(childId);
@@ -586,19 +769,30 @@
             }
         }
 
-        function showCodeViewer(node) {
+        function showContentPane(node) {
             // Highlight the node
             highlightedNode = node;
             renderGraph();
 
-            // Populate code viewer
-            const viewer = document.getElementById('code-viewer');
-            const title = document.getElementById('viewer-title');
-            const meta = document.getElementById('viewer-meta');
-            const code = document.getElementById('viewer-code');
-
-            title.textContent = node.name;
+            // Populate content pane
+            const pane = document.getElementById('content-pane');
+            const title = document.getElementById('pane-title');
+            const meta = document.getElementById('pane-meta');
+            const content = document.getElementById('pane-content');
+
+            // Set title with actual import statement for import nodes
+            if (node.type === 'imports') {
+                if (node.content) {
+                    const importLine = node.content.split('\n')[0].trim();
+                    title.textContent = importLine;
+                } else {
+                    title.textContent = `Import: ${node.name}`;
+                }
+            } else {
+                title.textContent = node.name;
+            }
 
+            // Set metadata
             let metaText = `${node.type} • ${node.file_path}`;
             if (node.start_line) {
                 metaText += ` • Lines ${node.start_line}-${node.end_line}`;
@@ -608,22 +802,178 @@
             }
             meta.textContent = metaText;
 
-            // Show content if available
+            // Display content based on node type
+            if (node.type === 'directory') {
+                showDirectoryContents(node, content);
+            } else if (node.type === 'file') {
+                showFileContents(node, content);
+            } else if (node.type === 'imports') {
+                // Import nodes show import details
+                showImportDetails(node, content);
+            } else {
+                // Class, function, method, code nodes
+                showCodeContent(node, content);
+            }
+
+            pane.classList.add('visible');
+        }
+
+        function showDirectoryContents(node, container) {
+            // Find all direct children of this directory
+            const children = allLinks
+                .filter(l => (l.source.id || l.source) === node.id)
+                .map(l => allNodes.find(n => n.id === (l.target.id || l.target)))
+                .filter(n => n);
+
+            if (children.length === 0) {
+                container.innerHTML = '<p style="color: #8b949e;">Empty directory</p>';
+                return;
+            }
+
+            // Group by type
+            const files = children.filter(n => n.type === 'file');
+            const subdirs = children.filter(n => n.type === 'directory');
+            const chunks = children.filter(n => n.type !== 'file' && n.type !== 'directory');
+
+            let html = '<ul class="directory-list">';
+
+            // Show subdirectories first
+            subdirs.forEach(child => {
+                html += `
+                    <li>
+                        <span class="item-icon">📁</span>
+                        ${child.name}
+                        <span class="item-type">directory</span>
+                    </li>
+                `;
+            });
+
+            // Then files
+            files.forEach(child => {
+                html += `
+                    <li>
+                        <span class="item-icon">📄</span>
+                        ${child.name}
+                        <span class="item-type">file</span>
+                    </li>
+                `;
+            });
+
+            // Then code chunks
+            chunks.forEach(child => {
+                const icon = child.type === 'class' ? '🔷' : child.type === 'function' ? '⚡' : '📝';
+                html += `
+                    <li>
+                        <span class="item-icon">${icon}</span>
+                        ${child.name}
+                        <span class="item-type">${child.type}</span>
+                    </li>
+                `;
+            });
+
+            html += '</ul>';
+
+            // Add summary
+            const summary = `<p style="color: #8b949e; font-size: 11px; margin-top: 16px;">
+                Total: ${children.length} items (${subdirs.length} directories, ${files.length} files, ${chunks.length} code chunks)
+            </p>`;
+
+            container.innerHTML = html + summary;
+        }
+
+        function showFileContents(node, container) {
+            // Find all chunks in this file
+            const fileChunks = allLinks
+                .filter(l => (l.source.id || l.source) === node.id)
+                .map(l => allNodes.find(n => n.id === (l.target.id || l.target)))
+                .filter(n => n);
+
+            if (fileChunks.length === 0) {
+                container.innerHTML = '<p style="color: #8b949e;">No code chunks found in this file</p>';
+                return;
+            }
+
+            // Collect all content from chunks and sort by line number
+            const sortedChunks = fileChunks
+                .filter(c => c.content)
+                .sort((a, b) => a.start_line - b.start_line);
+
+            if (sortedChunks.length === 0) {
+                container.innerHTML = '<p style="color: #8b949e;">File content not available</p>';
+                return;
+            }
+
+            // Combine all chunks to show full file
+            const fullContent = sortedChunks.map(c => c.content).join('\n\n');
+
+            container.innerHTML = `
+                <p style="color: #8b949e; font-size: 11px; margin-bottom: 12px;">
+                    Contains ${fileChunks.length} code chunks
+                </p>
+                <pre><code>${escapeHtml(fullContent)}</code></pre>
+            `;
+        }
+
+        function showImportDetails(node, container) {
+            // Import nodes (type === 'imports') - show import content prominently
+            const importHtml = `
+                <div class="import-details">
+                    ${node.content ? `
+                        <div style="margin-bottom: 16px;">
+                            <div class="detail-label" style="margin-bottom: 8px;">Import Statement:</div>
+                            <pre><code>${escapeHtml(node.content)}</code></pre>
+                        </div>
+                    ` : '<p style="color: #8b949e;">No import content available</p>'}
+                    <div class="detail-row">
+                        <span class="detail-label">File:</span> ${node.file_path}
+                    </div>
+                    ${node.start_line ? `
+                        <div class="detail-row">
+                            <span class="detail-label">Location:</span> Lines ${node.start_line}-${node.end_line}
+                        </div>
+                    ` : ''}
+                    ${node.language ? `
+                        <div class="detail-row">
+                            <span class="detail-label">Language:</span> ${node.language}
+                        </div>
+                    ` : ''}
+                </div>
+            `;
+
+            container.innerHTML = importHtml;
+        }
+
+        function showCodeContent(node, container) {
+            // Show code for function, class, method, or code chunks
+            let html = '';
+
+            if (node.docstring) {
+                html += `
+                    <div style="margin-bottom: 16px; padding: 12px; background: #161b22; border: 1px solid #30363d; border-radius: 6px;">
+                        <div style="font-size: 11px; color: #8b949e; margin-bottom: 8px; font-weight: 600;">DOCSTRING</div>
+                        <pre style="margin: 0; padding: 0; background: transparent; border: none;"><code>${escapeHtml(node.docstring)}</code></pre>
+                    </div>
+                `;
+            }
+
             if (node.content) {
-                code.textContent = node.content;
-            } else if (node.docstring) {
-                code.textContent = `// Docstring:
-${node.docstring}`;
+                html += `<pre><code>${escapeHtml(node.content)}</code></pre>`;
             } else {
-                code.textContent = '// No content available';
+                html += '<p style="color: #8b949e;">No content available</p>';
             }
 
-            viewer.classList.add('visible');
+            container.innerHTML = html;
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
         }
 
-        function closeCodeViewer() {
-            const viewer = document.getElementById('code-viewer');
-            viewer.classList.remove('visible');
+        function closeContentPane() {
+            const pane = document.getElementById('content-pane');
+            pane.classList.remove('visible');
 
             // Remove highlight
             highlightedNode = null;
@@ -634,7 +984,7 @@ ${node.docstring}`;
         window.addEventListener('DOMContentLoaded', () => {
             const loadingEl = document.getElementById('loading');
 
-            fetch(`chunk-graph.json?t=${Date.now()}`)
+            fetch("chunk-graph.json")
                 .then(response => {
                     if (!response.ok) {
                         throw new Error(`HTTP ${response.status}: ${response.statusText}`);

{mcp_vector_search-0.12.1.dist-info → mcp_vector_search-0.12.2.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: mcp-vector-search
-Version: 0.12.1
+Version: 0.12.2
 Summary: CLI-first semantic code search with MCP integration
 Project-URL: Homepage, https://github.com/bobmatnyc/mcp-vector-search
 Project-URL: Documentation, https://mcp-vector-search.readthedocs.io
@@ -490,6 +490,10 @@ uv sync
 # Install in development mode
 uv pip install -e .
 
+# Test CLI from source (recommended during development)
+./dev-mcp version        # Shows [DEV] indicator
+./dev-mcp search "test"  # No reinstall needed after code changes
+
 # Run tests
 uv run pytest
 
@@ -498,6 +502,8 @@ uv run ruff check
 uv run mypy src/
 ```
 
+For detailed development workflow and `dev-mcp` usage, see the [Development](#-development) section below.
+
 ### Adding Language Support
 
 1. Create a new parser in `src/mcp_vector_search/parsers/`
@@ -570,10 +576,64 @@ uv sync && uv pip install -e .
 # Run development tests
 ./scripts/dev-test.sh
 
-# Test CLI locally
+# Run CLI from source (recommended during development)
+./dev-mcp version        # Visual [DEV] indicator
+./dev-mcp status         # Any command works
+./dev-mcp search "auth"  # Immediate feedback on changes
+
+# Alternative: use uv run directly
 uv run mcp-vector-search version
 ```
 
+#### Using the `dev-mcp` Development Helper
+
+The `./dev-mcp` script provides a streamlined way to run the CLI from source code during development, eliminating the need for repeated installations.
+
+**Key Features:**
+- **Visual [DEV] Indicator**: Shows `[DEV]` prefix to distinguish from installed version
+- **No Reinstall Required**: Reflects code changes immediately
+- **Complete Argument Forwarding**: Works with all CLI commands and options
+- **Verbose Mode**: Debug output with `--verbose` flag
+- **Built-in Help**: Script usage with `--help`
+
+**Usage Examples:**
+```bash
+# Basic commands (note the [DEV] prefix in output)
+./dev-mcp version
+./dev-mcp status
+./dev-mcp index
+./dev-mcp search "authentication logic"
+
+# With CLI options
+./dev-mcp search "error handling" --limit 10
+./dev-mcp index --force
+
+# Script verbose mode (shows Python interpreter, paths)
+./dev-mcp --verbose search "database"
+
+# Script help (shows dev-mcp usage, not CLI help)
+./dev-mcp --help
+
+# CLI command help (forwards --help to the CLI)
+./dev-mcp search --help
+./dev-mcp index --help
+```
+
+**When to Use:**
+- **`./dev-mcp`** → Development workflow (runs from source code)
+- **`mcp-vector-search`** → Production usage (runs installed version via pipx/pip)
+
+**Benefits:**
+- **Instant Feedback**: Changes to source code are reflected immediately
+- **No Build Step**: Skip the reinstall cycle during active development
+- **Clear Context**: Visual `[DEV]` indicator prevents confusion about which version is running
+- **Error Handling**: Built-in checks for uv installation and project structure
+
+**Requirements:**
+- Must have `uv` installed (`pip install uv`)
+- Must run from project root directory
+- Requires `pyproject.toml` in current directory
+
 **Stage B: Local Deployment Testing**
 ```bash
 # Build and test clean deployment

{mcp_vector_search-0.12.1.dist-info → mcp_vector_search-0.12.2.dist-info}/RECORD

@@ -1,4 +1,4 @@
-mcp_vector_search/__init__.py,sha256=x50WkrKjIL9FUVrHMUHOyx99aKCd-VPkQ4dT60f0tlA,300
+mcp_vector_search/__init__.py,sha256=VI7aQii3CQwhLiBXYs4cQi58X3uMRZ9oKNT2G7olYd4,300
 mcp_vector_search/py.typed,sha256=lCKeV9Qcn9sGtbRsgg-LJO2ZwWRuknnnlmomq3bJFH0,43
 mcp_vector_search/cli/__init__.py,sha256=TNB7CaOASz8u3yHWLbNmo8-GtHF0qwUjVKWAuNphKgo,40
 mcp_vector_search/cli/didyoumean.py,sha256=8yF15w74xq9uUT46ww-XNidBs7cSPVYV7mKiMS4bRqY,16318
@@ -21,7 +21,7 @@ mcp_vector_search/cli/commands/reset.py,sha256=bsIT6zjDf6gsvIkVaRaUClYzlTyNe--8t
 mcp_vector_search/cli/commands/search.py,sha256=yyou7wO9qZ_w2oiKdyOrk2WUxvkFpc-Up8hpflxYlyw,24802
 mcp_vector_search/cli/commands/status.py,sha256=-Ke58000-bi74T0J-dy1zaD3C2TuZBSdERm9mIm3kXI,19814
 mcp_vector_search/cli/commands/uninstall.py,sha256=XjFoSJlQkM1GPg7zaK65jOvb-hb87F2Ciyldbn8y2jc,14953
-mcp_vector_search/cli/commands/visualize.py,sha256=1KlMP6upluYFWeu54Y7btHYBc73Qok-jKBdva0EoHm8,51677
+mcp_vector_search/cli/commands/visualize.py,sha256=VwzrMCOTfdjzDOrP3ry3SwW68YKYNRFKV4vzlbxfqRM,52331
 mcp_vector_search/cli/commands/watch.py,sha256=2pyWRoo4fIppFnyQ4sW4IBLHmpb_IwnTjRnzHkVBPcQ,8927
 mcp_vector_search/config/__init__.py,sha256=r_qAQkU5gc0EQ2pv8EQARACe4klhrR_WRJqCb9lfGc0,54
 mcp_vector_search/config/constants.py,sha256=afXR6SvLLd8QYY4MG4s1vq-hCJiQsE5PhnE-XG9lvb4,1092
@@ -61,9 +61,33 @@ mcp_vector_search/utils/gitignore.py,sha256=hJHt5YsfEvLIfweaa968tGTavcbxqh3X5nSa
 mcp_vector_search/utils/monorepo.py,sha256=leTYx4ffN4IO0wDg7OWYfXMWMPp2Q_uEHl5WQFNk5Hs,8657
 mcp_vector_search/utils/timing.py,sha256=THC7mfbTYnUpnnDcblgQacYMzbEkfFoIShx6plmhCgg,11285
 mcp_vector_search/utils/version.py,sha256=d7fS-CLemxb8UzZ9j18zH0Y0Ud097ljKKYYOPulnGPE,1138
-mcp_vector_search/visualization/index.html,sha256=OHbMTjsyFXj0s8vKd9MjCgfIEflWfSlNNBTDUzOxgfM,22899
-mcp_vector_search-0.12.1.dist-info/METADATA,sha256=cO-orPU1CPd1VxYtrbNPdMPxhTWmAWfF_f7wE6C3Qw0,20606
-mcp_vector_search-0.12.1.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-mcp_vector_search-0.12.1.dist-info/entry_points.txt,sha256=y3Ygtc_JiBchNEIL-tPABo7EbzBExGAxwGdkkeP5D2I,86
-mcp_vector_search-0.12.1.dist-info/licenses/LICENSE,sha256=FqZUgGJH_tZKZLQsMCpXaLawRyLmyFKRVfMwYyEcyTs,1072
-mcp_vector_search-0.12.1.dist-info/RECORD,,
+mcp_vector_search/visualization/favicon-v1-1024.png,sha256=1pESJk22wsG29ryTC31884wnpP6tG1AAJZJlxUBcZu8,3129
+mcp_vector_search/visualization/favicon-v1-128.png,sha256=29jmI1odupCm1eUZnbQhtunwN9VmQ9Ld7AGxivt65ko,127
+mcp_vector_search/visualization/favicon-v1-16.png,sha256=WEitLws7EWu9zvgmYV0JNklwtRJNZmzhq_nuixD5_TY,74
+mcp_vector_search/visualization/favicon-v1-256.png,sha256=o2hBl9H7pjH2Ovp5HRUF5uQS_BxQXTE2vyZLiiX-cRg,270
+mcp_vector_search/visualization/favicon-v1-32.png,sha256=_t-DLHfL_pBXbYtKJLi02wOeGP_HH11QWdElS3fc9uU,83
+mcp_vector_search/visualization/favicon-v1-512.png,sha256=Fwfv5FcwfQpeL1oewc_1WypEKG88TY3aMr85S-iWO4s,843
+mcp_vector_search/visualization/favicon-v1-64.png,sha256=nD-ibvLuxrrmDjhiIf1hIWMsyOIkozk2W7fakDCmlF0,91
+mcp_vector_search/visualization/favicon-v1.ico,sha256=VYru2inbgzlru_ZLpqOO_rMrGxCGU7_eFcMuLx2Bx58,96
+mcp_vector_search/visualization/favicon-v2-1024.png,sha256=1pESJk22wsG29ryTC31884wnpP6tG1AAJZJlxUBcZu8,3129
+mcp_vector_search/visualization/favicon-v2-128.png,sha256=29jmI1odupCm1eUZnbQhtunwN9VmQ9Ld7AGxivt65ko,127
+mcp_vector_search/visualization/favicon-v2-16.png,sha256=WEitLws7EWu9zvgmYV0JNklwtRJNZmzhq_nuixD5_TY,74
+mcp_vector_search/visualization/favicon-v2-256.png,sha256=o2hBl9H7pjH2Ovp5HRUF5uQS_BxQXTE2vyZLiiX-cRg,270
+mcp_vector_search/visualization/favicon-v2-32.png,sha256=_t-DLHfL_pBXbYtKJLi02wOeGP_HH11QWdElS3fc9uU,83
+mcp_vector_search/visualization/favicon-v2-512.png,sha256=Fwfv5FcwfQpeL1oewc_1WypEKG88TY3aMr85S-iWO4s,843
+mcp_vector_search/visualization/favicon-v2-64.png,sha256=nD-ibvLuxrrmDjhiIf1hIWMsyOIkozk2W7fakDCmlF0,91
+mcp_vector_search/visualization/favicon-v2.ico,sha256=VYru2inbgzlru_ZLpqOO_rMrGxCGU7_eFcMuLx2Bx58,96
+mcp_vector_search/visualization/favicon-v3-1024.png,sha256=1pESJk22wsG29ryTC31884wnpP6tG1AAJZJlxUBcZu8,3129
+mcp_vector_search/visualization/favicon-v3-128.png,sha256=29jmI1odupCm1eUZnbQhtunwN9VmQ9Ld7AGxivt65ko,127
+mcp_vector_search/visualization/favicon-v3-16.png,sha256=WEitLws7EWu9zvgmYV0JNklwtRJNZmzhq_nuixD5_TY,74
+mcp_vector_search/visualization/favicon-v3-256.png,sha256=o2hBl9H7pjH2Ovp5HRUF5uQS_BxQXTE2vyZLiiX-cRg,270
+mcp_vector_search/visualization/favicon-v3-32.png,sha256=_t-DLHfL_pBXbYtKJLi02wOeGP_HH11QWdElS3fc9uU,83
+mcp_vector_search/visualization/favicon-v3-512.png,sha256=Fwfv5FcwfQpeL1oewc_1WypEKG88TY3aMr85S-iWO4s,843
+mcp_vector_search/visualization/favicon-v3-64.png,sha256=nD-ibvLuxrrmDjhiIf1hIWMsyOIkozk2W7fakDCmlF0,91
+mcp_vector_search/visualization/favicon-v3.ico,sha256=VYru2inbgzlru_ZLpqOO_rMrGxCGU7_eFcMuLx2Bx58,96
+mcp_vector_search/visualization/index.html,sha256=10dKa2itpjqxw9aHMs-HWpw5WWTe5EB1NqYRs5fnxxw,36830
+mcp_vector_search-0.12.2.dist-info/METADATA,sha256=zZzHr70_Z_MueRsrzCSCrUJU5WcXl97fs7WrA6zrIhQ,22839
+mcp_vector_search-0.12.2.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+mcp_vector_search-0.12.2.dist-info/entry_points.txt,sha256=y3Ygtc_JiBchNEIL-tPABo7EbzBExGAxwGdkkeP5D2I,86
+mcp_vector_search-0.12.2.dist-info/licenses/LICENSE,sha256=FqZUgGJH_tZKZLQsMCpXaLawRyLmyFKRVfMwYyEcyTs,1072
+mcp_vector_search-0.12.2.dist-info/RECORD,,