Component 3 of 3 · the editor
The thinnest of the three. It does not parse anything and it does not draw anything: it spawns the engine over your open folder and embeds the visualizer as a webview. What it contributes is the part that only an editor can — knowing where your caret is, and being able to put it somewhere else.
not on the Marketplace yet — installed from the repository by the install script
Why a third piece exists
Everything else the extension shows, the browser UI already shows. This is the list that justifies installing it — and, read the other way, the list of what you give up by staying in a tab.
Move through a file and the selection moves with you — the entity under the caret is the entity highlighted, with its neighbourhood drawn around it. Turn it off with mezz.autoVisualize when you want the view to stay put.
Click one and the file opens at the line. The graph stops being a diagram of the code and becomes a way of moving through it.
The extension runs mezz watch over the open folder, so the graph tracks the code as you edit rather than as you remember to re-run something.
A structural diff over git worktrees — what entities and edges changed between two revisions, not what lines did. It needs a checkout on disk, which is why this one is local-only.
How far the picture reaches is one control with three rungs, ordered narrowest first: edits, then rewiring — the far ends of the edges that moved — then the whole neighbourhood. It replaced two checkboxes that were both node filters, so the lines on screen were not the lines that changed.
Markers and line numbers on both sides, unchanged stretches folded, side by side once the column is wide enough. Gained and lost edges are their own list rather than badges on the head graph — a relationship that disappeared has no row there to badge, and it is the one change a diff reader most wants told.
Folders and files as a real VS Code tree with checkboxes, in the activity bar, next to the explorer you already use.
The Refactor action on a quality row opens a terminal with Claude Code already working on that entity, from a prompt built out of the same measurements that ranked it. It needs a terminal, so it only exists here.
How it is put together
On activation the extension starts mezz watch on the workspace folder, at mezz.serverPort. The webview is the visualizer build, talking to that server
over the same seven endpoints it would use in a browser — plus a message channel to the
extension host for the two things HTTP cannot do: report where the cursor is, and ask for
a file to be opened.
There is no second renderer and no fork. The webview bundle and the browser bundle come
out of the same ui/ sources, which is why a fix to the graph shows up in
both.
Two build outputs, one source: webview-dist/ for the extension, ui/dist/ for the standalone browser UI.
Activity bar
| View | What it holds | Kind |
|---|---|---|
| Visual Scopes | Native tree with checkboxes — which folders and files get drawn. | tree |
| Analysis Scope | What gets analyzed, separately from what gets drawn. Can follow the active editor. | tree |
| Controls | Aggregation level, tree depth and density, label toggles, zoom. | webview |
| Diff | Structural comparison between two commits. | webview |
| Inspector | Kind, location, metrics and source for the selection, plus Go to Source. | webview |
| Description | The Elevator spec entry covering the selected entity, when one exists. | webview |
| Quality | Every entity ranked by metric, with smell badges. | webview |
| Educator | Good-practice lessons matched against the code, with in-editor hovers. | webview |
| Educator Problems | Those matches as a list. | tree |
The webview rows are the visualizer's own panels, hosted in the sidebar instead of in a tab. The two trees are native, because a checkbox tree is one thing VS Code does better than anything you would draw yourself.
Commands
Configuration
| Setting | Does | Default |
|---|---|---|
| mezz.binaryPath | Path to the mezz binary. Empty means look for it on $PATH. | empty |
| mezz.claudeBinary | Path to the Claude Code executable the Refactor action launches. | empty |
| mezz.serverPort | Port for the watch server the extension spawns. | 3200 |
| mezz.includeTests | Include test files in the analysis. | false |
| mezz.language | Restrict analysis to one language. Empty analyses everything detected. | empty |
| mezz.autoVisualize | Update the visualization when you switch file. | true |
| mezz.analysisScopeFollowMode | Granularity of Follow Active Editor — file or folder. | folder |
| mezz.educator.hoverEnabled | Educator content in the editor hover, for Java source. | true |
The extension needs the mezz binary on your $PATH, or mezz.binaryPath pointing at it. That is the whole contract between components 3
and 1.
Getting it
The extension cannot be installed alone — it needs the binary it spawns and the UI it
embeds. ./scripts/install.sh builds the binaries into ~/.cargo/bin, packages the .vsix and installs it into your
default profile. Reload the window and the icon appears.
./scripts/install.sh Work PersonalMEZZ_CODE_CLI=cursor ./scripts/install.shMEZZ_SKIP_EXTENSION=1 …git clone https://github.com/llvator/mezzanine.git
cd mezzanine
./scripts/install.sh # binaries + extension, one step# from vscode-extension/
npm run install:local # rebuilds the webview + extension, packages
# a .vsix, installs it over the previous oneRequires the VS Code code CLI on your $PATH — Command Palette → Shell Command: Install 'code' command in PATH.