Code View

Code View shows code an agent wrote or changed, in a compact panel. Pass code for a numbered listing, or diff for a unified diff where each changed line carries a sign and a tint.

It does not highlight syntax. Most products already have a highlighter, and a second one would disagree with it. Pass renderLine to color each line with yours.

Installing code-view brings Button along as a registry dependency.

Listing and diff

A listing numbers every line. In a diff, removed lines take no number, so the numbers match the new file.

Copy

Copy puts the code on the clipboard. For a diff, it copies the new file's lines and leaves removed lines out. The icon changes to a check for a moment. If the browser refuses clipboard access, the block says "Copy failed" instead of pretending it worked.

Actions

actions puts your own controls in the header, before Copy. Pass a button for each action your application handles, such as downloading the file. An embedded Code View has no header, so it shows none.

Long lines

Lines do not wrap. The block scrolls sideways.

Embedded

embedded drops the frame and the header, leaving the numbered lines. Use it inside a surface that already names the file, such as an Artifact Panel. The header's Copy button and a diff's counts go with it, so supply Copy from the surrounding surface. The code region is still named by filename.

The block is a figure with the file name as its caption. The code region can take focus, so a keyboard user can scroll long lines, and it is named by the file.

Copy announces "Copied" or "Copy failed" through a polite status. Diff counts are read as "2 added" and "1 removed". A changed line is marked by its sign as well as its tint, and keeps the primary text color.

import { CodeView } from "@/components/ai/code-view"

<CodeView filename={file.path} code={file.contents} />

<CodeView filename={edit.path} diff={edit.lines} renderLine={(text) => highlight(text, "ts")} />

Diff

Two lines added and one removed. The numbers follow the new file.

CodeView

Accepts native figure props beyond those listed.

Types