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

mcp_vector_search/cli/commands/visualize.py

@@ -2,6 +2,7 @@
 
 import asyncio
 import json
+import shutil
 from pathlib import Path
 
 import typer
@@ -57,7 +58,9 @@ async def _export_chunks(output: Path, file_filter: str | None) -> None:
         project_manager = ProjectManager(Path.cwd())
 
         if not project_manager.is_initialized():
-            console.print("[red]Project not initialized. Run 'mcp-vector-search init' first.[/red]")
+            console.print(
+                "[red]Project not initialized. Run 'mcp-vector-search init' first.[/red]"
+            )
             raise typer.Exit(1)
 
         config = project_manager.load_config()
@@ -75,7 +78,9 @@ async def _export_chunks(output: Path, file_filter: str | None) -> None:
         chunks = await database.get_all_chunks()
 
         if len(chunks) == 0:
-            console.print("[yellow]No chunks found in index. Run 'mcp-vector-search index' first.[/yellow]")
+            console.print(
+                "[yellow]No chunks found in index. Run 'mcp-vector-search index' first.[/yellow]"
+            )
             raise typer.Exit(1)
 
         console.print(f"[green]✓[/green] Retrieved {len(chunks)} chunks")
@@ -83,8 +88,11 @@ async def _export_chunks(output: Path, file_filter: str | None) -> None:
         # Apply file filter if specified
         if file_filter:
             from fnmatch import fnmatch
+
             chunks = [c for c in chunks if fnmatch(str(c.file_path), file_filter)]
-            console.print(f"[cyan]Filtered to {len(chunks)} chunks matching '{file_filter}'[/cyan]")
+            console.print(
+                f"[cyan]Filtered to {len(chunks)} chunks matching '{file_filter}'[/cyan]"
+            )
 
         # Collect subprojects for monorepo support
         subprojects = {}
@@ -93,17 +101,23 @@ async def _export_chunks(output: Path, file_filter: str | None) -> None:
                 subprojects[chunk.subproject_name] = {
                     "name": chunk.subproject_name,
                     "path": chunk.subproject_path,
-                    "color": _get_subproject_color(chunk.subproject_name, len(subprojects)),
+                    "color": _get_subproject_color(
+                        chunk.subproject_name, len(subprojects)
+                    ),
                 }
 
         # Build graph data structure
         nodes = []
         links = []
         chunk_id_map = {}  # Map chunk IDs to array indices
+        file_nodes = {}  # Track file nodes by path
+        dir_nodes = {}  # Track directory nodes by path
 
         # Add subproject root nodes for monorepos
         if subprojects:
-            console.print(f"[cyan]Detected monorepo with {len(subprojects)} subprojects[/cyan]")
+            console.print(
+                f"[cyan]Detected monorepo with {len(subprojects)} subprojects[/cyan]"
+            )
             for sp_name, sp_data in subprojects.items():
                 node = {
                     "id": f"subproject_{sp_name}",
@@ -118,11 +132,96 @@ async def _export_chunks(output: Path, file_filter: str | None) -> None:
                 }
                 nodes.append(node)
 
+        # Load directory index for enhanced directory metadata
+        console.print("[cyan]Loading directory index...[/cyan]")
+        from ...core.directory_index import DirectoryIndex
+
+        dir_index_path = (
+            project_manager.project_root / ".mcp-vector-search" / "directory_index.json"
+        )
+        dir_index = DirectoryIndex(dir_index_path)
+        dir_index.load()
+
+        # Create directory nodes from directory index
+        console.print(
+            f"[green]✓[/green] Loaded {len(dir_index.directories)} directories"
+        )
+        for dir_path_str, directory in dir_index.directories.items():
+            dir_id = f"dir_{hash(dir_path_str) & 0xFFFFFFFF:08x}"
+            dir_nodes[dir_path_str] = {
+                "id": dir_id,
+                "name": directory.name,
+                "type": "directory",
+                "file_path": dir_path_str,
+                "start_line": 0,
+                "end_line": 0,
+                "complexity": 0,
+                "depth": directory.depth,
+                "dir_path": dir_path_str,
+                "file_count": directory.file_count,
+                "subdirectory_count": directory.subdirectory_count,
+                "total_chunks": directory.total_chunks,
+                "languages": directory.languages or {},
+                "is_package": directory.is_package,
+                "last_modified": directory.last_modified,
+            }
+
+        # Create file nodes from chunks
+        for chunk in chunks:
+            file_path_str = str(chunk.file_path)
+            file_path = Path(file_path_str)
+
+            # Create file node with parent directory reference
+            if file_path_str not in file_nodes:
+                file_id = f"file_{hash(file_path_str) & 0xFFFFFFFF:08x}"
+
+                # Convert absolute path to relative path for parent directory lookup
+                try:
+                    relative_file_path = file_path.relative_to(
+                        project_manager.project_root
+                    )
+                    parent_dir = relative_file_path.parent
+                    # Use relative path for parent directory (matches directory_index)
+                    parent_dir_str = (
+                        str(parent_dir) if parent_dir != Path(".") else None
+                    )
+                except ValueError:
+                    # File is outside project root
+                    parent_dir_str = None
+
+                # Look up parent directory ID from dir_nodes (must match exactly)
+                parent_dir_id = None
+                if parent_dir_str and parent_dir_str in dir_nodes:
+                    parent_dir_id = dir_nodes[parent_dir_str]["id"]
+
+                file_nodes[file_path_str] = {
+                    "id": file_id,
+                    "name": file_path.name,
+                    "type": "file",
+                    "file_path": file_path_str,
+                    "start_line": 0,
+                    "end_line": 0,
+                    "complexity": 0,
+                    "depth": len(file_path.parts) - 1,
+                    "parent_dir_id": parent_dir_id,
+                    "parent_dir_path": parent_dir_str,
+                }
+
+        # Add directory nodes to graph
+        for dir_node in dir_nodes.values():
+            nodes.append(dir_node)
+
+        # Add file nodes to graph
+        for file_node in file_nodes.values():
+            nodes.append(file_node)
+
         # Add chunk nodes
         for chunk in chunks:
             node = {
                 "id": chunk.chunk_id or chunk.id,
-                "name": chunk.function_name or chunk.class_name or f"L{chunk.start_line}",
+                "name": chunk.function_name
+                or chunk.class_name
+                or f"L{chunk.start_line}",
                 "type": chunk.chunk_type,
                 "file_path": str(chunk.file_path),
                 "start_line": chunk.start_line,
@@ -130,6 +229,9 @@ async def _export_chunks(output: Path, file_filter: str | None) -> None:
                 "complexity": chunk.complexity_score,
                 "parent_id": chunk.parent_chunk_id,
                 "depth": chunk.chunk_depth,
+                "content": chunk.content,  # Add content for code viewer
+                "docstring": chunk.docstring,
+                "language": chunk.language,
             }
 
             # Add subproject info for monorepos
@@ -140,34 +242,90 @@ async def _export_chunks(output: Path, file_filter: str | None) -> None:
             nodes.append(node)
             chunk_id_map[node["id"]] = len(nodes) - 1
 
+        # Link directories to their parent directories (hierarchical structure)
+        for dir_path_str, dir_info in dir_index.directories.items():
+            if dir_info.parent_path:
+                parent_path_str = str(dir_info.parent_path)
+                if parent_path_str in dir_nodes:
+                    parent_dir_id = f"dir_{hash(parent_path_str) & 0xFFFFFFFF:08x}"
+                    child_dir_id = f"dir_{hash(dir_path_str) & 0xFFFFFFFF:08x}"
+                    links.append(
+                        {
+                            "source": parent_dir_id,
+                            "target": child_dir_id,
+                            "type": "dir_hierarchy",
+                        }
+                    )
+
+        # Link directories to subprojects in monorepos (simple flat structure)
+        if subprojects:
+            for dir_path_str, dir_node in dir_nodes.items():
+                for sp_name, sp_data in subprojects.items():
+                    if dir_path_str.startswith(sp_data.get("path", "")):
+                        links.append(
+                            {
+                                "source": f"subproject_{sp_name}",
+                                "target": dir_node["id"],
+                                "type": "dir_containment",
+                            }
+                        )
+                        break
+
+        # Link files to their parent directories
+        for _file_path_str, file_node in file_nodes.items():
+            if file_node.get("parent_dir_id"):
+                links.append(
+                    {
+                        "source": file_node["parent_dir_id"],
+                        "target": file_node["id"],
+                        "type": "dir_containment",
+                    }
+                )
+
         # Build hierarchical links from parent-child relationships
         for chunk in chunks:
             chunk_id = chunk.chunk_id or chunk.id
+            file_path = str(chunk.file_path)
+
+            # Link chunk to its file node if it has no parent (top-level chunks)
+            if not chunk.parent_chunk_id and file_path in file_nodes:
+                links.append(
+                    {
+                        "source": file_nodes[file_path]["id"],
+                        "target": chunk_id,
+                        "type": "file_containment",
+                    }
+                )
 
             # Link to subproject root if in monorepo
             if chunk.subproject_name and not chunk.parent_chunk_id:
-                links.append({
-                    "source": f"subproject_{chunk.subproject_name}",
-                    "target": chunk_id,
-                })
+                links.append(
+                    {
+                        "source": f"subproject_{chunk.subproject_name}",
+                        "target": chunk_id,
+                    }
+                )
 
             # Link to parent chunk
             if chunk.parent_chunk_id and chunk.parent_chunk_id in chunk_id_map:
-                links.append({
-                    "source": chunk.parent_chunk_id,
-                    "target": chunk_id,
-                })
+                links.append(
+                    {
+                        "source": chunk.parent_chunk_id,
+                        "target": chunk_id,
+                    }
+                )
 
         # Parse inter-project dependencies for monorepos
         if subprojects:
             console.print("[cyan]Parsing inter-project dependencies...[/cyan]")
             dep_links = _parse_project_dependencies(
-                project_manager.project_root,
-                subprojects
+                project_manager.project_root, subprojects
             )
             links.extend(dep_links)
             if dep_links:
-                console.print(f"[green]✓[/green] Found {len(dep_links)} inter-project dependencies")
+                console.print(
+                    f"[green]✓[/green] Found {len(dep_links)} inter-project dependencies"
+                )
 
         # Get stats
         stats = await database.get_stats()
@@ -261,11 +419,13 @@ def _parse_project_dependencies(project_root: Path, subprojects: dict) -> list[d
                 for other_sp_name in subprojects.keys():
                     if other_sp_name != sp_name and dep_name == other_sp_name:
                         # Found inter-project dependency
-                        dependency_links.append({
-                            "source": f"subproject_{sp_name}",
-                            "target": f"subproject_{other_sp_name}",
-                            "type": "dependency",
-                        })
+                        dependency_links.append(
+                            {
+                                "source": f"subproject_{sp_name}",
+                                "target": f"subproject_{other_sp_name}",
+                                "type": "dependency",
+                            }
+                        )
 
         except Exception as e:
             logger.debug(f"Failed to parse {package_json}: {e}")
@@ -276,7 +436,9 @@ def _parse_project_dependencies(project_root: Path, subprojects: dict) -> list[d
 
 @app.command()
 def serve(
-    port: int = typer.Option(8080, "--port", "-p", help="Port for visualization server"),
+    port: int = typer.Option(
+        8080, "--port", "-p", help="Port for visualization server"
+    ),
     graph_file: Path = typer.Option(
         Path("chunk-graph.json"),
         "--graph",
@@ -339,24 +501,30 @@ def serve(
 
     # Copy graph file to visualization directory if it exists
     if graph_file.exists():
-        import shutil
-
         dest = viz_dir / "chunk-graph.json"
         shutil.copy(graph_file, dest)
         console.print(f"[green]✓[/green] Copied graph data to {dest}")
     else:
+        # Auto-generate graph file if it doesn't exist
         console.print(
-            f"[yellow]Warning: Graph file {graph_file} not found. "
-            "Run 'mcp-vector-search visualize export' first.[/yellow]"
+            f"[yellow]Graph file {graph_file} not found. Generating it now...[/yellow]"
         )
+        asyncio.run(_export_chunks(graph_file, None))
+        console.print()
+
+        # Copy the newly generated graph to visualization directory
+        if graph_file.exists():
+            dest = viz_dir / "chunk-graph.json"
+            shutil.copy(graph_file, dest)
+            console.print(f"[green]✓[/green] Copied graph data to {dest}")
 
     # Change to visualization directory
     os.chdir(viz_dir)
 
     # Start server
-    Handler = http.server.SimpleHTTPRequestHandler
+    handler = http.server.SimpleHTTPRequestHandler
     try:
-        with socketserver.TCPServer(("", port), Handler) as httpd:
+        with socketserver.TCPServer(("", port), handler) as httpd:
             url = f"http://localhost:{port}"
             console.print()
             console.print(
@@ -390,7 +558,7 @@ def serve(
 
 def _create_visualization_html(html_file: Path) -> None:
     """Create the D3.js visualization HTML file."""
-    html_content = '''<!DOCTYPE html>
+    html_content = """<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
@@ -476,8 +644,30 @@ def _create_visualization_html(html_file: Path) -> None:
         .node.function circle { fill: #d29922; }
         .node.method circle { fill: #8957e5; }
         .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; }
 
+        /* 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 {
             font-size: 11px;
             fill: #c9d1d9;
@@ -519,6 +709,146 @@ def _create_visualization_html(html_file: Path) -> None:
             font-size: 12px;
             color: #8b949e;
         }
+
+        #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: -4px 0 24px rgba(0, 0, 0, 0.5);
+            transform: translateX(100%);
+            transition: transform 0.3s ease-in-out;
+            z-index: 1000;
+        }
+
+        #content-pane.visible {
+            transform: translateX(0);
+        }
+
+        #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;
+        }
+
+        #content-pane .pane-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: #58a6ff;
+            margin-bottom: 8px;
+            padding-right: 30px;
+        }
+
+        #content-pane .pane-meta {
+            font-size: 12px;
+            color: #8b949e;
+        }
+
+        #content-pane .collapse-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            cursor: pointer;
+            color: #8b949e;
+            font-size: 24px;
+            line-height: 1;
+            background: none;
+            border: none;
+            padding: 0;
+            transition: color 0.2s;
+        }
+
+        #content-pane .collapse-btn:hover {
+            color: #c9d1d9;
+        }
+
+        #content-pane .pane-content {
+            padding: 20px;
+        }
+
+        #content-pane pre {
+            margin: 0;
+            padding: 16px;
+            background: #0d1117;
+            border: 1px solid #30363d;
+            border-radius: 6px;
+            overflow-x: auto;
+            font-size: 12px;
+            line-height: 1.6;
+        }
+
+        #content-pane code {
+            color: #c9d1d9;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+
+        #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);
+        }
     </style>
 </head>
 <body>
@@ -534,6 +864,12 @@ def _create_visualization_html(html_file: Path) -> None:
             <div class="legend-item">
                 <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>
@@ -549,6 +885,15 @@ def _create_visualization_html(html_file: Path) -> None:
             <div class="legend-item">
                 <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 (L1)
+            </div>
+            <div class="legend-item">
+                <span class="legend-color" style="background: #8b949e; border-radius: 2px;"></span> Docstring ▢
+            </div>
+            <div class="legend-item">
+                <span class="legend-color" style="background: #6e7681; border-radius: 2px;"></span> Comment ▢
+            </div>
         </div>
 
         <div id="subprojects-legend" style="display: none;">
@@ -562,6 +907,15 @@ def _create_visualization_html(html_file: Path) -> None:
     <svg id="graph"></svg>
     <div id="tooltip" class="tooltip"></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>
+        <div class="pane-content" id="pane-content"></div>
+    </div>
+
     <script>
         const width = window.innerWidth;
         const height = window.innerHeight;
@@ -580,6 +934,7 @@ def _create_visualization_html(html_file: Path) -> None:
         let allLinks = [];
         let visibleNodes = new Set();
         let collapsedNodes = new Set();
+        let highlightedNode = null;
 
         function visualizeGraph(data) {
             g.selectAll("*").remove();
@@ -587,19 +942,37 @@ def _create_visualization_html(html_file: Path) -> None:
             allNodes = data.nodes;
             allLinks = data.links;
 
-            // Find root nodes
+            // Find root nodes - start with only top-level nodes
             let rootNodes;
             if (data.metadata && data.metadata.is_monorepo) {
                 // In monorepos, subproject nodes are roots
                 rootNodes = allNodes.filter(n => n.type === 'subproject');
             } else {
-                // Regular projects: nodes without parents or depth 0/1
-                rootNodes = allNodes.filter(n =>
-                    !n.parent_id || n.depth === 0 || n.depth === 1 || n.type === 'module'
-                );
+                // Regular projects: show root-level directories AND files
+                const dirNodes = allNodes.filter(n => n.type === 'directory');
+                const fileNodes = allNodes.filter(n => n.type === 'file');
+
+                // Find minimum depth for directories and files
+                const minDirDepth = dirNodes.length > 0
+                    ? Math.min(...dirNodes.map(n => n.depth))
+                    : Infinity;
+                const minFileDepth = fileNodes.length > 0
+                    ? Math.min(...fileNodes.map(n => n.depth))
+                    : Infinity;
+
+                // Include both root-level directories and root-level files
+                rootNodes = [
+                    ...dirNodes.filter(n => n.depth === minDirDepth),
+                    ...fileNodes.filter(n => n.depth === minFileDepth)
+                ];
+
+                // Fallback to all files if nothing found
+                if (rootNodes.length === 0) {
+                    rootNodes = fileNodes;
+                }
             }
 
-            // Start with only root nodes visible
+            // Start with only root nodes visible, all collapsed
             visibleNodes = new Set(rootNodes.map(n => n.id));
             collapsedNodes = new Set(rootNodes.map(n => n.id));
 
@@ -631,22 +1004,59 @@ def _create_visualization_html(html_file: Path) -> None:
                 .selectAll("g")
                 .data(visibleNodesList)
                 .join("g")
-                .attr("class", d => `node ${d.type}`)
+                .attr("class", d => {
+                    let classes = `node ${d.type}`;
+                    if (highlightedNode && d.id === highlightedNode.id) {
+                        classes += ' highlighted';
+                    }
+                    return classes;
+                })
                 .call(drag(simulation))
-                .on("click", toggleNode)
+                .on("click", handleNodeClick)
                 .on("mouseover", showTooltip)
                 .on("mouseout", hideTooltip);
 
-            // Add circles with expand indicator
-            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 === '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) ? 2 : 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) ? 2 : 0)
+                .style("fill", d => d.color || null);
+
             // Add expand/collapse indicator
             node.filter(d => hasChildren(d))
                 .append("text")
@@ -659,9 +1069,15 @@ def _create_visualization_html(html_file: Path) -> None:
                 .style("pointer-events", "none")
                 .text(d => collapsedNodes.has(d.id) ? "+" : "−");
 
-            // Add labels
+            // Add labels (show "Import:" prefix for L1 nodes)
             node.append("text")
-                .text(d => d.name)
+                .text(d => {
+                    // L1 (depth 1) nodes are imports
+                    if (d.depth === 1 && d.type !== 'directory' && d.type !== 'file') {
+                        return `Import: ${d.name}`;
+                    }
+                    return d.name;
+                })
                 .attr("dy", 30);
 
             simulation.on("tick", () => {
@@ -681,20 +1097,21 @@ def _create_visualization_html(html_file: Path) -> None:
             return allLinks.some(l => (l.source.id || l.source) === node.id);
         }
 
-        function toggleNode(event, d) {
+        function handleNodeClick(event, d) {
             event.stopPropagation();
 
-            if (!hasChildren(d)) return;
+            // Always show content pane when clicking any node
+            showContentPane(d);
 
-            if (collapsedNodes.has(d.id)) {
-                // Expand: show children
-                expandNode(d);
-            } else {
-                // Collapse: hide children
-                collapseNode(d);
+            // If node has children, also toggle expansion
+            if (hasChildren(d)) {
+                if (collapsedNodes.has(d.id)) {
+                    expandNode(d);
+                } else {
+                    collapseNode(d);
+                }
+                renderGraph();
             }
-
-            renderGraph();
         }
 
         function expandNode(node) {
@@ -802,6 +1219,213 @@ def _create_visualization_html(html_file: Path) -> None:
             }
         }
 
+        function showContentPane(node) {
+            // Highlight the node
+            highlightedNode = node;
+            renderGraph();
+
+            // 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 "Import:" prefix for L1 nodes
+            if (node.depth === 1 && node.type !== 'directory' && node.type !== 'file') {
+                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}`;
+            }
+            if (node.language) {
+                metaText += ` • ${node.language}`;
+            }
+            meta.textContent = metaText;
+
+            // Display content based on node type
+            if (node.type === 'directory') {
+                showDirectoryContents(node, content);
+            } else if (node.type === 'file') {
+                showFileContents(node, content);
+            } else if (node.depth === 1 && node.type !== 'directory' && node.type !== 'file') {
+                // L1 nodes are imports
+                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) {
+            // L1 nodes are import statements
+            const importHtml = `
+                <div class="import-details">
+                    <div class="import-statement">${escapeHtml(node.name)}</div>
+                    <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>
+                    ` : ''}
+                    ${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>
+            `;
+
+            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) {
+                html += `<pre><code>${escapeHtml(node.content)}</code></pre>`;
+            } else {
+                html += '<p style="color: #8b949e;">No content available</p>';
+            }
+
+            container.innerHTML = html;
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function closeContentPane() {
+            const pane = document.getElementById('content-pane');
+            pane.classList.remove('visible');
+
+            // Remove highlight
+            highlightedNode = null;
+            renderGraph();
+        }
+
         // Auto-load graph data on page load
         window.addEventListener('DOMContentLoaded', () => {
             const loadingEl = document.getElementById('loading');
@@ -827,7 +1451,7 @@ def _create_visualization_html(html_file: Path) -> None:
         });
     </script>
 </body>
-</html>'''
+</html>"""
 
     with open(html_file, "w") as f:
         f.write(html_content)