@@ -25,15 +25,15 @@ npx codebase-visualizer ./src
2525# => 3D map ready at http://localhost:3333
2626```
2727
28- Opens an interactive 3D force-directed graph in your browser with 6 views.
28+ Opens an interactive 3D force-directed graph in your browser with 8 views, 3D module clouds, a group legend, search, detail panel, and configurable settings .
2929
3030### MCP Mode (for LLMs)
3131
3232``` bash
3333npx codebase-visualizer --mcp ./src
3434```
3535
36- Starts a stdio MCP server exposing 6 tools for LLM-assisted code understanding. No browser, no HTTP.
36+ Starts a stdio MCP server exposing 8 tools for LLM-assisted code understanding. No browser, no HTTP.
3737
3838### CLI Options
3939
@@ -83,39 +83,63 @@ Add to `.cursor/mcp.json` or `.vscode/mcp.json`:
8383| ` codebase_overview ` | High-level architecture: modules, entry points, key metrics |
8484| ` file_context ` | Everything about one file: exports, imports, dependents, metrics |
8585| ` get_dependents ` | Blast radius: what breaks if you change this file |
86- | ` find_hotspots ` | Ranked problem files by any metric (coupling, pagerank, tension ...) |
86+ | ` find_hotspots ` | Ranked problem files by any metric (coupling, pagerank, churn, complexity, blast_radius, coverage ...) |
8787| ` get_module_structure ` | Module map with cross-deps, cohesion scores, circular deps |
8888| ` analyze_forces ` | Centrifuge analysis: cohesion, tension files, bridges, extraction candidates |
89+ | ` find_dead_exports ` | Unused exports across the codebase — code that can be safely removed |
90+ | ` get_groups ` | Top-level directory groups with aggregate metrics: files, LOC, importance, coupling |
8991
90- ## Browser Views
92+ ## Browser Features
9193
92- ### 1. Galaxy View (default)
94+ ### 8 Views
9395
94- 3D force-directed graph. Node color = module, node size = PageRank importance. First impression of the codebase shape.
96+ | # | View | What It Shows |
97+ | ---| ------| ---------------|
98+ | 1 | ** Galaxy** (default) | 3D force-directed graph. Color = module, size = PageRank importance |
99+ | 2 | ** Dependency Flow** | DAG layout (top-to-bottom). Circular deps in red |
100+ | 3 | ** Hotspot** | Health coloring: green (healthy) to red (high coupling). Size = LOC |
101+ | 4 | ** Focus** | Click a node to see its 2-hop neighborhood. Everything else fades |
102+ | 5 | ** Module** | Files cluster by directory. Cross-module edges in yellow |
103+ | 6 | ** Forces** | Centrifuge analysis: tension (yellow), bridges (cyan), junk drawers (red), extraction candidates (green) |
104+ | 7 | ** Churn** | Git commit frequency heatmap. Red = frequently changed files |
105+ | 8 | ** Coverage** | Test coverage: green = has tests, red = untested |
95106
96- ### 2. Dependency Flow
107+ ### 3D Module Clouds
97108
98- DAG layout (top-to-bottom). Entry points at top, leaf dependencies at bottom. Circular dependencies highlighted in red.
109+ Transparent 3D spheres group files by top-level directory with:
110+ - Phong shading + wireframe overlay for depth perception
111+ - Zoom-based opacity fade (clouds disappear when camera is close)
112+ - Smart grouping: ` src/components/ui/ ` becomes "components", ` convex/agents/eval/ ` becomes "convex"
113+ - Dynamic threshold based on project size
99114
100- ### 3. Hotspot View
115+ Toggle via Settings > "Module Clouds" checkbox.
101116
102- Health coloring: green (healthy) to red (high coupling). Node size = lines of code. Instantly shows where the problems are.
117+ ### Group Legend
103118
104- ### 4. Focus View
119+ Bottom-left legend shows:
120+ - View-specific color coding
121+ - When clouds are enabled: color swatch + group name + file count + importance percentage for each group (up to 8 groups, sorted by PageRank)
105122
106- Click any node to see its 2-hop neighborhood. Everything else fades to 10% opacity. Click another node to shift focus.
123+ ### Other UI
107124
108- ### 5. Module View
125+ - ** Search** : find any file by name, fly camera to it
126+ - ** Detail Panel** : click any node to see full metrics — PageRank, coupling, fan-in/out, complexity, blast radius, dead exports, test coverage
127+ - ** Settings Panel** : configure node opacity/size, link color/width, physics charge/distance, cloud opacity
128+ - ** Project Bar** : project name, file/function/dependency counts, circular dep count, tension file count
109129
110- Files cluster by directory. Cross-module edges highlighted in yellow. Shows how the codebase is organized.
130+ ## REST API
111131
112- ### 6. Force Analysis View
113-
114- Centrifuge force visualization:
115- - ** Yellow** = tension files (pulled by multiple modules)
116- - ** Cyan** = bridge files (high betweenness centrality)
117- - ** Red** = junk drawer modules (low cohesion)
118- - ** Green** = extraction candidates (high escape velocity)
132+ | Endpoint | Returns |
133+ | ----------| ---------|
134+ | ` GET /api/graph ` | All nodes (with metrics) + edges + stats |
135+ | ` GET /api/groups ` | Group metrics sorted by importance (name, files, LOC, importance, fanIn, fanOut, color) |
136+ | ` GET /api/forces ` | Force analysis (cohesion, tension, bridges, extraction candidates) |
137+ | ` GET /api/modules ` | Module-level metrics |
138+ | ` GET /api/hotspots?metric=coupling&limit=10 ` | Ranked hotspot files |
139+ | ` GET /api/file/<path> ` | Single file details + metrics |
140+ | ` GET /api/meta ` | Project name |
141+ | ` GET /api/ping ` | Health check |
142+ | ` POST /api/mcp ` | MCP tool invocation (web mode) |
119143
120144## Metrics
121145
@@ -127,29 +151,33 @@ Centrifuge force visualization:
127151| ** Cohesion** | Does a module belong together? (internal / total deps) |
128152| ** Tension** | Is a file torn between modules? (entropy of cross-module pulls) |
129153| ** Escape Velocity** | Should this module be its own package? (high external use, low internal deps) |
154+ | ** Churn** | Git commit frequency (files that change often) |
155+ | ** Cyclomatic Complexity** | Average complexity of exported functions |
156+ | ** Blast Radius** | Transitive dependents affected if this file changes |
157+ | ** Dead Exports** | Unused exports (code that can be safely removed) |
158+ | ** Test Coverage** | Whether a test file exists for each source file |
130159
131160## How It Works
132161
133162```
134- Parse (TS Compiler API) -> Build Graph (graphology) -> Analyze (metrics) -> Serve (Express + 3d-force-graph)
163+ Parse (TS Compiler API) -> Build Graph (graphology) -> Analyze (metrics) -> Serve (Next.js + 3d-force-graph)
135164```
136165
137- 1 . ** Parser** extracts files, exported functions, and import relationships using the TypeScript Compiler API
138- 2 . ** Graph builder** creates nodes (files + functions) and edges (import dependencies ) using graphology
139- 3 . ** Analyzer** computes PageRank, betweenness centrality, coupling, cohesion, tension, and escape velocity
140- 4 . ** Server** serves the 3D visualization via Express (browser mode) or exposes graph queries via MCP stdio (LLM mode)
166+ 1 . ** Parser** extracts files, exported functions, and import relationships using the TypeScript Compiler API. Resolves tsconfig path aliases ( ` @/ ` imports), respects ` .gitignore ` , detects test file associations.
167+ 2 . ** Graph builder** creates nodes (files + functions) and edges (import deps + test associations ) using graphology. Detects circular dependencies via iterative DFS.
168+ 3 . ** Analyzer** computes PageRank, betweenness centrality, coupling, cohesion, tension, escape velocity, churn, complexity, blast radius, dead exports, test coverage, and group-level aggregations.
169+ 4 . ** Server** serves the 3D visualization via Next.js (browser mode) or exposes graph queries via MCP stdio (LLM mode).
141170
142171## Requirements
143172
144173- Node.js >= 18
145174- TypeScript codebase (` .ts ` / ` .tsx ` files)
146175
147- ## Limitations (v0.1.0)
176+ ## Limitations
148177
149178- TypeScript only (no JavaScript CommonJS, Python, Go, etc.)
150179- Static analysis only (no runtime/dynamic imports)
151180- File-level + exported function-level granularity (no internal function calls)
152- - No file watching / hot reload
153181- Client-side 3D rendering requires WebGL
154182
155183## License
0 commit comments