Hyperspekt

A live, interactive graph that exposes your codebase's architecture. Computed metrics on its topology let you see impact, blast radius, and architectural gaps at a glance.

Built by Ansicht.

Supported Languages

Languages are auto-detected from workspace files. Multiple languages can coexist in a single workspace (polyglot support).

Features

Graph Visualization

• Live force-directed dependency graph rendered in a webview panel with Barnes-Hut repulsion, edge attraction, community gravity, and simulated-annealing cooling
• Minimap overview panel for navigating large graphs (toggle with M)
• Fit-to-screen button to auto-zoom the graph to fit the viewport
• Alt+drag rectangle zoom for zooming into a specific region
• Community and module layout modes with position persistence across sessions (cycle with Ctrl+L)
• Incremental updates on file save — debounced, content-hashed, with stable definition IDs so the graph does not flicker

Parsing & Resolution

• Tree-sitter parsing of the full definition hierarchy: modules, functions, structs, enums, constants, traits, classes, type aliases, struct fields, and enum variants
• Five-strategy reference resolution applied in order: fully-qualified, alias-resolved, module-qualified, same-module, and name-only (with ambiguity guard)
• Chained field access resolution via fieldChain on ReferenceIR — resolves a.b.c access patterns across type boundaries
• Resolution rate diagnostics showing internal/external resolution percentages

Architecture Metrics

Three metrics computed on every graph update, displayed in the status bar as [Qdep] X.XX [Qta] X.XX [C] X.XX, color-coded by health:

Git Integration

• Per-definition change detection against HEAD: added, modified, deleted, unchanged
• Ghost nodes for definitions removed from modified files, with stable IDs and deleted status
• Edge git status propagation from endpoints (deleted > added > modified > unchanged)

Navigation

• Ctrl+Click a node to jump to its source definition
• Ctrl+Shift+Click a node to open a HEAD-vs-working-tree diff
• Ctrl+Click an edge to open the reference site in source
• Shift+E to trace symbol exposure (what does this symbol expose?)
• Shift+U to trace symbol usage (what uses this symbol?)
• P to find the shortest path between two nodes

File-to-Graph Interop

• Focus Current Symbol (Ctrl+Shift+G) — highlight the definition at the cursor in the graph
• Inspect File (Ctrl+Shift+I) — filter the graph to show only definitions from the current file
• Available from both the editor context menu and explorer context menu

Getting Started

Prerequisites

• VS Code 1.85 or later
• A workspace containing supported source files (.move, .rs, .ts, .tsx, .js, .jsx, .go, .sol)

Install

Build from source (see Development) or install the packaged .vsix.

Activate

1. Open a workspace with supported source files. The extension activates automatically when a supported file is opened.
2. Click the Hyperspekt icon in the activity bar, or run Hyperspekt: Show Dependency Graph from the Command Palette (Ctrl+Shift+P).

Commands

Webview Controls

A floating control bar at the bottom center provides quick access to filters and layout. Active toggles are highlighted in green.

Tooltips: Hover over a node to see its kind, canonical path, git status, and provider/consumer scores. Hover over an edge to see its kind, source text, and weight. Hold Alt to suppress tooltips.

Configuration

Architecture

src/
  providers/
    move/           Move (Sui) language provider + LSP client
    rust/           Rust language provider
    typescript/     TypeScript/JavaScript language provider
    go/             Go language provider
    solidity/       Solidity language provider
    shared/         Shared provider utilities
    AbstractLanguageProvider.ts
    CompositeLanguageProvider.ts
  analysis/        Tree-sitter parsing, IR builder, IR resolver, reference resolution
  git/             Git change detection, ghost node synthesis, HEAD baseline
  graph/
    metrics/       Modularity, circularity, type authority computations
    differ.ts      Graph diffing for incremental updates
    incremental.ts File-save watcher, debounced re-parse, delta emission
    state.ts       Core graph state (nodes, edges, full rebuild)
  types/           Shared type definitions (DefId, NodeData, EdgeData, etc.)
  util/            Logging, ID allocation, tracing
  webview/         Panel manager, webview HTML/resource serving
  extension.ts     Activation, command registration, pipeline orchestration

webview/
  graph/
    forceLayout.ts Custom force-directed layout (Barnes-Hut, cooling schedule)
    renderer.ts    Cytoscape graph rendering, interaction handlers
  ui/
    toolbar.ts     Control bar state and types
    tooltip.ts     Hover tooltips with viewport clamping
  main.ts          Webview entry point, VS Code API message bridge

Development

npm install
npm run build      # esbuild bundle
npm test           # vitest
npx tsc --noEmit   # type-check without emitting
npm run watch      # rebuild on file changes

To package as a .vsix:

npm run package

License

See the bundled LICENSE.txt, or our license terms for the full EULA.