Skip to content

Commit eca5561

Browse files
committed
docs: update README to reflect full product
- 8 views (added Churn + Coverage) - 8 MCP tools (added find_dead_exports + get_groups) - Analytics v2 metrics (churn, complexity, blast radius, dead exports, test coverage) - 3D module clouds with smart grouping - Group legend with importance % - REST API reference (9 endpoints) - Next.js server (was Express) - Parser improvements (path aliases, gitignore-aware, test associations)
1 parent ac664b1 commit eca5561

1 file changed

Lines changed: 56 additions & 28 deletions

File tree

README.md

Lines changed: 56 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -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
3333
npx 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

Comments
 (0)