RepoLens — GitHub Codebase Intelligence

Codebase comprehension is a graph problem: files have dependencies, directories contain files, and understanding a codebase means navigating these relationships. RepoLens models the entire repository as a force-directed graph where nodes are files/directories and edges represent imports/references. The Canvas API renderer handles 1,000+ nodes at 60fps with custom hit-testing, making it practical for real-world repositories. AI integration provides contextual understanding — not just what a file contains, but what would break if it changes.

The system uses a server-client architecture where GitHub API calls happen server-side (authenticated via NextAuth.js GitHub OAuth), and graph rendering happens entirely client-side on Canvas. The dependency graph is built from GitHub's recursive tree endpoint in a single API call, then parsed into nodes and edges. The force-directed simulation runs in requestAnimationFrame for smooth 60fps animation. AI features (file explanation, repo chat) use Google Gemini with the file tree as context. The collaboration view splits repos by ownership with avatar display.

Graph nodes represent files and directories with metadata (name, path, language, size, type). Edges represent containment (directory→file) and dependencies (file→file). The force simulation assigns x/y positions iteratively. Language colors match GitHub's scheme. Search indexes symbols across the repo for instant lookup. Chat context includes the full file tree structure for accurate codebase Q&A.

The biggest challenge was Canvas API performance with large repositories. SVG rendering buckled at 1,000+ nodes. Solved with custom spatial hashing for hit-testing (O(1) instead of O(n)), viewport culling (only render visible nodes), and level-of-detail (render simplified shapes when zoomed out). GitHub OAuth token management required careful handling of scope limits and token refresh for large repos. Symbol extraction across files required language-aware parsing.

Graph computation is offloaded to the server, and the client only receives the final node/edge data. Canvas rendering is GPU-accelerated by default. Large repos use progressive loading — file tree first, then dependency analysis in the background. API rate limits are managed with request batching and caching of recent repos.

GitHub API failures trigger graceful degradation — if tree fetch fails, show available repos with an error. Gemini API failures show cached explanations where available. Canvas rendering handles WebGL context loss by falling back to 2D canvas. Network disconnection pauses live features but keeps the cached graph interactive.

Graph rendering metrics (node count, render time, FPS) displayed in debug mode. GitHub API rate limit status visible to users. AI response times tracked per query. Error boundaries prevent full-page crashes from individual component failures.

Custom Canvas over D3.js for better performance control and zero dependencies. Gemini over OpenAI for free tier availability. GitHub OAuth over personal tokens for better security posture. Force-directed layout over hierarchical for more natural codebase visualization. NextAuth.js v4 over v5 for stability in production.