VS Code Extension Overview
Relevant source files
The following files were used as context for generating this wiki page:
The Code Review Graph VS Code extension provides a local-first, interactive environment for visualizing code dependencies, analyzing change impact (blast radius), and facilitating token-efficient code reviews. It serves as the frontend for the code-review-graph Python CLI, allowing developers to explore structural relationships such as call graphs, inheritance chains, and test coverage directly within their editor.
The extension integrates a Tree-sitter powered backend with a D3.js force-directed graph visualization to help developers understand the "blast radius" of their changes. By mapping local git diffs to a structural knowledge graph, it provides prioritized review guidance and helps identify architectural hotspots or bottlenecks without sending large code volumes to AI tools.
Sources: code-review-graph-vscode/README.md:1-15, CLAUDE.md:5-15
Architecture and Components
The extension is structured into a TypeScript-based frontend that communicates with a SQLite database generated by the Python CLI. It utilizes VS Code's Webview API for interactive visualizations and TreeView providers for hierarchical navigation.
System Architecture
The following diagram illustrates the interaction between the VS Code extension, the local SQLite database, and the Python CLI.
The extension acts as a coordinator, invoking the CLI to build or update the graph while reading directly from the SQLite database to populate its views.
Sources: code-review-graph-vscode/src/extension.ts:250-300, code-review-graph-vscode/package.json:30-60, CLAUDE.md:25-35
Core Features and Functionality
The extension provides several commands and views to assist in code analysis and review.
Feature Summary
| Feature | Description |
|---|---|
| Interactive Graph | A D3.js force-directed visualization of code entities (Files, Classes, Functions). |
| Blast Radius Analysis | Calculates and displays the transitive impact of a change across the graph. |
| Semantic Queries | Executes patterns like callers_of, callees_of, and tests_for. |
| Review Changes | Integrates with Git to analyze uncommitted changes and provide risk-scored guidance. |
| Watch Mode | Automatically triggers incremental graph updates when files are saved. |
Sources: code-review-graph-vscode/README.md:38-55, code-review-graph-vscode/package.json:63-120
Git Integration and Change Review
The codeReviewGraph.reviewChanges command retrieves uncommitted changes via git diff, calculates the impact radius using the SqliteReader, and generates a review report in a dedicated Output Channel.
Configuration and Settings
Users can customize the extension behavior through VS Code settings, ranging from CLI paths to visualization thresholds.
| Setting | Default | Description |
|---|---|---|
codeReviewGraph.cliPath | "" | Path to the CLI binary; defaults to PATH. |
codeReviewGraph.autoUpdate | true | Enables incremental updates on file save. |
codeReviewGraph.blastRadiusDepth | 2 | Depth of transitive dependency traversal (1-10). |
codeReviewGraph.graph.maxNodes | 500 | Limits the number of nodes in the webview for performance. |
codeReviewGraph.graphTheme | "auto" | Sets light, dark, or automatic theme for the D3 graph. |
Sources: code-review-graph-vscode/package.json:160-220, code-review-graph-vscode/README.md:72-85
Interactive Graph Visualization
The Webview component (rendered by graph.ts) uses D3.js to visualize nodes and edges. It supports node dragging, semantic filtering, and camera controls like "Fit to View".
Node and Edge Types
The graph distinguishes between different code entities and relationship types, using distinct colors and shapes for clarity.
Webview Communication
The extension host and the webview communicate via asynchronous messages to sync state and handle user interactions like clicking a node to navigate to source code.
Implementation Details
Database Resolution
The extension dynamically locates the graph database by searching for .code-review-graph/graph.db (primary) or .code-review-graph.db (fallback) relative to the workspace root.
Sources: code-review-graph-vscode/src/extension.ts:25-45
Auto-Update Mechanism
A debounced onDidSaveTextDocument listener triggers the CLI update command. It waits for 2000ms after the last save before executing to prevent excessive rebuilds.
Sources: code-review-graph-vscode/src/extension.ts:545-570
Query Patterns
The queryGraph command supports 8 distinct patterns to explore code:
callers_of/callees_ofimports_of/importers_ofchildren_of(containment)tests_forinheritors_offile_summary
Sources: code-review-graph-vscode/src/extension.ts:250-280
Conclusion
The Code Review Graph VS Code extension bridges the gap between static code analysis and the developer's active workflow. By providing structural context and impact analysis directly within the IDE, it reduces the cognitive load of code reviews and enables more efficient interaction with AI coding assistants by providing them with high-density, token-efficient structural data.