"Code Lens X-ray: see the line of code behind each line on screen"

Code Lens labels what you select on screen with the component, file and line that renders it. Labels tell you where to go. They don't show you the code, or how the parts of a page fit together.

X-ray does. After a lens, press X or click X-ray on the result card. A round loupe follows the pointer, and inside it each line of text is drawn as the line of code it comes from, with its line number, in the same place on screen. Click inside the loupe to open that line in your editor.

The video is six real runs, one app each, written in Python, Swift, zsh, Go, Rust and Ruby. Nothing in it is mocked up.

What the loupe shows

Each line of text under the loupe is replaced by its source line, aligned so the words in the code sit on the words they draw. Text that no component in your Project claims stays faint, so you can tell what Lens matched and what it didn't. The component at the centre of the loupe is named under its rim.

Text is often kept in one file and shown by another. A line whose words are kept in a data list or a translation file draws the line they are kept on, so five cards from one .map( read as five different lines, not the same render line five times. A click still opens the line that renders it, which is the line you usually want to edit.

The page's structure

The loupe also draws how the code connects:

• The page, and each component that renders others, is a frame.
• Each group of text a component shows is a box, with the component's name, file and line on its edge.
• Each item of a list is its own numbered box, such as 2 of 3, with the entry it shows, such as plans[1].
• Arrows show what renders what and which data and translation files each component reads, labelled with the code that does it, such as <Hero />, TOOLS.map( or t("title"), and its line.
• Parts of the page that are off screen show as tabs on the frame's edge.

A Map beside the selection lists the same tree as text, and each row opens its file at the line.

None of this is worked out when you press X. When Bigshot builds a Project's Code map, it also works out each page's tree: the page, the components it renders in render order, and the data and translation files they read, with the line of each use. Pages, layouts and, in stacks without routes, top-level views are the roots. The trees are stored in the Project's index on your Mac, so X-ray opens as soon as the lens does.

What it gets wrong

The first version of X-ray, in Bigshot 1.7.5, missed a whole class of components. On a pricing page that does plans.map((plan) => <PricingCard plan={plan} />), the card's text arrives through props. The matcher credited the text to plans.ts, where the words are kept, and the card never got a box. The same happened to the site header and the FAQ. X-ray drew the page frame and some data lines, and not much else.

Bigshot 1.7.6 follows the data. A page that only maps a list into a child hands the list on: the child reads it, X-ray opens where the child prints the field, and the page stops reading it. A child that only uses the entry for an attribute, such as an icon's d={path}, doesn't take the list from its parent.

Text that is assembled in code is still hard. In a Java Swing test app, a row like Bed B · Basil and mint is name + " · " + crop, so no single string in the code holds it. Lens now claims a short line made of several whole strings from one record, joined by separators, and X-ray lights each field. That took the app's misses from 10 to 3, but Lens still finds only 6 of its 19 lines, because Swing has little component structure to follow. We left Java out of the video for that reason.

For coding agents

Copy for Agent on the result card includes the part of the page's tree that is on screen: the components in render order, and the files they read, with lines. Paste it into Claude Code or Codex along with your request, and the agent starts at the files that render what you selected instead of searching the repo for the text.

Trying it

X-ray is part of Code Lens in Bigshot 1.7.5 and later. It is in the free version, with one Project. Turn on the Code map for a Project, select part of the screen with Lens, and press X. The Code Lens docs cover the rest, and the benchmarks post covers how accurate the matching under it is.