Space Tab

The Space tab is a real-time 3D visualization of your codebase built with Rust and WebGPU. It renders your project's file structure as an interactive node graph, with spaceships representing active Claude Code sessions navigating between files as they are read and modified.

What you see

File nodes

Each file in your codebase is represented as a node in 3D space. Nodes are organized by directory structure, with related files clustered together. The visualization supports two layout modes:

• Flat layout — All files spread across a 2D plane, grouped by top-level directory
• Hierarchy layout — Files arranged in a tree structure reflecting the actual directory hierarchy

Spaceships

Each active Claude Code session is represented by a spaceship. The ship consists of four parts:

| Part | Visual | Meaning | |---|---|---| | Body | Main hull | The Claude Code session | | Wings | Side panels | Session activity level | | Cockpit | Transparent canopy | Session state (idle/active) | | Engine | Glowing exhaust | Currently processing a request |

When Claude Code reads or modifies a file, the corresponding spaceship animates toward that file's node, creating a visible trail of activity.

Particles and effects

• Discovery particles — When a new file is first accessed by Claude Code, a burst of particles appears at the file node
• Connection lines — Active file relationships are shown as faint lines between nodes
• Heat accumulation — Files that are accessed frequently glow brighter over time
• Pulse effects — Re-accessing a recently touched file creates a pulse animation

Additive mode

Additive mode starts with all nodes hidden and progressively reveals them as Claude Code discovers files during its work. This creates a "fog of war" effect where you watch your codebase materialize as the AI explores it.

Toggle additive mode from the Space tab toolbar. When enabled:

1. All file nodes start invisible
2. As Claude Code reads files, those nodes fade in
3. Nodes that are written to get a brighter glow
4. The spaceship travels to each discovered file, creating a visual narrative of the AI's exploration

Controls

Navigation

| Input | Action | |---|---| | Click + drag | Rotate the camera | | Scroll wheel | Zoom in/out | | Right-click + drag | Pan the camera | | Double-click a node | Center the camera on that file |

Toolbar

The Space tab toolbar provides:

• Layout toggle — Switch between flat and hierarchy layouts
• Additive mode — Toggle the progressive discovery visualization
• Reset camera — Return to the default camera position
• Node filter — Filter visible nodes by file extension or directory

Technical details

The Space tab is built with a Rust/WASM architecture:

Rust (lib.rs) → wasm-pack → WebAssembly → space-wgpu-bridge.js → Overlay

• Geometry generation — Ship geometry is generated in Rust (generate_ship_geometry()) with vertex and index buffers
• Shaders — WGSL shaders handle per-part coloring, engine glow animation, and particle effects
• State management — All visualization state (node positions, ship positions, particle systems) lives in Rust
• Bridge layer — JavaScript communicates with Rust through a thin bridge layer that wraps wasm_bindgen exports

Integration with tool activity

The Space tab subscribes to Claude Code's tool activity via IPC. When Claude Code uses tools (Read, Write, Edit, Grep, Glob, Bash), the tool name and target file path are forwarded to the Space tab, which:

1. Locates (or creates) the file node
2. Animates the spaceship toward that node
3. Triggers visual effects based on the tool type (read = subtle, write = bright)
4. Updates heat accumulation for frequently accessed files

This creates a real-time visual representation of what Claude Code is doing in your codebase, making it easier to follow along during complex multi-file operations.