The viewer's code block stops lexing with a hand-rolled dialect table and
reads real TextMate grammars instead, run once in `/api/source`.
Three things make that safe to depend on:
* Highlighting never fails a request. A missing grammar, an oversized
slice, an ESM import that did not resolve — every one of them answers
`engine: 'plain'` with a reason and the source still goes out.
* Identifiers survive whatever token boundaries a grammar chose. Every
code token is split into identifier runs before it goes on the wire, so
the graph's call-site overlay claims a token the highlighter produced
rather than re-cutting the line. `assignRefs` now matches on a token's
text rather than on the class a grammar gave it, so a language that
scopes type names as `storage.type` still links.
* The theme classifies rather than colours: its foregrounds are sentinels
the server maps back to class names, and the viewer paints them from
CSS custom properties — one token stream serves light and dark with no
refetch, and the ramp lives only in app.css.
Comments move from --ink-3 to a new --code-comment. --ink-3 measures
3.46:1 on paper and 3.00:1 on the hot-line tint, both under AA for 12.5px
text; --code-comment is the smallest step along the same ramp that clears
4.5:1 on every background a code line can have, and stays quieter than
the strings and numbers above it.
Shipping: @shikijs/core and @shikijs/engine-javascript are runtime
dependencies (no wasm, no native module); @shikijs/langs stays a
devDependency and `npm run build:textmate` writes only the closure the
engine's 40-odd languages reach — 56 grammars, 2.6 MB, against 11 MB for
all 722. check-ui-build.mjs asserts the tree after every build and inside
every release archive.
The core screen of `codegraph ui`: who calls a symbol on the left, its
verbatim body in the middle with a port on every line that has an outgoing
edge, and what it calls on the right — each callee row placed beside the line
that makes the call, with a hairline connector between them.
The callee rail is the part that is not a list. A row wants to sit at the
centre of its first call-site line and is pushed down only when that would
collide with the row above, so the rail keeps source order; the connector
still runs to the real line, so the displacement is visible rather than
silent. Positions come from measuring the laid-out DOM, so they are
recomputed on resize, on font load and whenever a fold opens.
Honesty is carried in the drawing, not in a footnote: a filled port means the
resolver matched something on that line and a hollow one means it only
guessed; uncertain connectors are dashed and their targets fold away behind
their count; synthesized edges are dashed differently and tagged with the
mechanism that made them; references that leave the index are text with a
soft underline rather than links to nowhere, and they are counted. Long
bodies keep their head plus a window round every call site — windowed on
graph edges only, since a function calling `console.log` two hundred times
would otherwise window round every line and buy nothing. Containers over 80
lines show a members outline with per-member fan-in/fan-out instead of 700
lines of braces.
Two small additions to the read-only API this needed:
* `/api/node` gives every outline member its own fanIn/fanOut (two batched
queries for the whole outline). A class's own fan-out is nearly always
zero because its methods do the calling, so without these the outline
cannot say which member carries weight.
* `/api/stats` gains `blastScale` — the denominator the blast bar is drawn
against, so one symbol's radius reads as wide or narrow *for this repo*.
It is measured across the index's 24 most-depended-on symbols (found with
a new `getTopDependedOn`, distinct dependents rather than edges), memoised
against the index stamp, and reported as sampled; a symbol wider than the
sample becomes the scale instead of overflowing the track.
Verified against a real index in a real browser: parity with the prototype on
`CodeGraph.sync` (259 lines, 27 callee rows, no overlaps), `GraphTraverser`
(20-member outline), a 773-line function (26 windows, 78 connectors), light
and dark, hover linking in both directions, keyboard-only navigation, and
reflow on resize and on fold toggles.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Colby McHenry
