Code Synapse

Interactive code knowledge graph viewer. Visualize repository structure, dependencies, and blast radius through 2D and 3D graph rendering.

Features

• Explorer view — full repository graph colored by cluster
• Context view — 360 degree view around a selected symbol (callers/callees, 2 hops)
• Impact view — blast radius analysis with depth coloring and risk assessment
• 2D/3D toggle — switch between Sigma.js (WebGL 2D) and 3d-force-graph (Three.js 3D)
• Source-agnostic — pluggable parser system (currently supports GitNexus, extensible to any JSON graph format)

Stack

Dependency	Purpose
React 19	UI framework
Vite 8	Dev server and build
Sigma.js 3	WebGL 2D graph rendering
3d-force-graph	Three.js 3D graph rendering
ELK.js	Layout engine (stress, layered, radial)
Tailwind CSS 4	Styling
Graphology	Graph data structure

Quick start

npm install
npm run dev

Open http://localhost:5173. Connect to a GitNexus server or load a JSON graph file directly.

With GitNexus

# Terminal 1
gitnexus serve

# Terminal 2
npm run dev

Architecture

src/
  types/          # GraphModel, GraphNode, GraphEdge (source-agnostic)
  data/
    parsers/      # Pluggable format parsers (gitnexus.ts, add more here)
    fetcher.ts    # HTTP fetch + file drop
    filters.ts    # Subgraph extraction, BFS impact computation
  graph/
    SigmaRenderer # 2D WebGL renderer
    ThreeDRenderer # 3D Three.js renderer
    graph-builder # Model -> Graphology graph conversion
    colors        # Tokyo Night-inspired palette
  layout/
    elk-layout    # ELK.js layout computation
  views/          # Explorer, Context, Impact (self-contained)
  components/     # Sidebar, DetailPanel

Adding a new data source = one parser file (~50 lines) + register in parsers/index.ts. Views, layout, and renderers stay unchanged.