Understanding the Interface
TokenPrint uses a docked-shell layout: a persistent top navigation bar, a central 3D canvas, and context-dependent side panels. The canvas is always present; panels and overlays appear based on the active mode.
Top navigation bar
The top bar contains, left to right:
- TokenPrint logo — click to reset to the default view.
- Mode buttons — Architecture, Generation, Walkthrough, Debugger.
- Model selector — shows the currently loaded model name. Click to open the Model Explorer modal.
- Report — generates a Model Health Report for the currently loaded model.
- Docs — links to this documentation.
3D canvas
The central canvas renders a React Three Fiber scene. Camera controls:
| Input | Action |
|---|---|
| Left drag | Orbit |
| Right drag / two-finger drag | Pan |
| Scroll / pinch | Zoom |
| Click an object | Select and open Tensor Inspector |
| Double-click | Focus camera on clicked object |
Camera bar
A unified camera control bar sits in the bottom transport bar and works identically in all modes: OVERVIEW, LAYER, OP, FOLLOW, a 3D/2D toggle, and TRACE. See Camera System for the full breakdown.
Right panel
The right panel is context-sensitive:
- Architecture mode — Tensor Inspector showing selected tensor name, shape, dtype, and parameter count.
- Generation mode — current op name, layer, KV phase, weight preview, top-k skyline, and generation controls.
- Walkthrough mode — chapter explanation with real numbers, chapter navigation, model scale selector.
- Debugger mode — tiled dashboard: breakpoints, flame graph, sentinels, watch expressions, layer table.
Keyboard shortcuts
| Key | Action |
|---|---|
Space | Play / pause generation |
← / → | Step backward / forward one op |
F | Return the camera to the overview position |
T | Live token-follow camera |
1–4 | Switch mode (Architecture / Generation / Walkthrough / Debugger) |
Esc | Deselect / close modal |
R | Reset camera to default position |