Code block

Monospace surface for code, shell, and diffs. Carries an optional filename + language header with copy. Supports line numbers, highlighted lines, and the add/remove diff variant.

Included in the single kansho full pack. Components are not offered as separate installs.

TypeScript with header and copy

lib/runs/load.tsts

1export async function load(id: string) {
2  const row = await db.select().from(runs).where(eq(runs.id, id));
3  if (!row) throw new RunNotFoundError(id);
4  return row;
5}

Highlighted lines

lib/runs/load.tsts

1export async function load(id: string) {
2  const row = await db.select().from(runs).where(eq(runs.id, id));
3  if (!row) throw new RunNotFoundError(id);
4  return row;
5}

Diff variant

lib/risk.tsts

function risk(commit: Commit) {
−  if (commit.files.length === 0) return 'low';
+  if (commit.files.length === 0) return 'doc-only';
+  if (commit.touchesSchema) return 'high';
  return 'medium';
}

Shell — no line numbers, no filename

# rebuild the index after the new event type lands
psql -c "REINDEX INDEX CONCURRENTLY idx_audit_log_event;"

Inside an assistant message

Assistant

Here's the smallest change that fixes it:

lib/risk.tsts

function risk(commit: Commit) {
−  if (commit.files.length === 0) return 'low';
+  if (commit.files.length === 0) return 'doc-only';
+  if (commit.touchesSchema) return 'high';
  return 'medium';
}

Streamlined chat variant

For the route handler, the whole cookie write can stay compact:

app/api/session/route.tsts

response.cookies.set("session", token, {
  httpOnly: true,
  sameSite: "lax",
  secure: true,
});

Scrollable with maxHeight

long.txttxt

1line 1
2line 2
3line 3
4line 4
5line 5
6line 6
7line 7
8line 8
9line 9
10line 10
11line 11
12line 12
13line 13
14line 14
15line 15
16line 16
17line 17
18line 18
19line 19
20line 20
21line 21
22line 22
23line 23
24line 24
25line 25
26line 26
27line 27
28line 28
29line 29
30line 30
31line 31
32line 32
33line 33
34line 34
35line 35
36line 36
37line 37
38line 38
39line 39
40line 40

Component documentation

Code Block

components/agent/code-block.tsx

Purpose

Displays code or diff lines with optional filename, line numbers, highlighting, scrolling, and copy feedback.

Appropriate use

Use for read-only code and command output in agent messages or inspection surfaces.

Example

components/agent/code-block.tsx has a representative live example in the "TypeScript with header and copy" section on /components/code-block.

States

Supports default or chat variants, plain code or typed context/add/remove lines, optional line numbers, highlighted rows, filename, language, and max height.

API and props

CodeBlock accepts code, lines, language, filename, showLineNumbers, highlightLines, maxHeight, variant, and className.

Dependencies

Direct imports are React, Lucide icons, IconButton, and cn.

Accessibility

The scrollable code region is keyboard-focusable and named; the copy control has a changing accessible label and polite copied feedback.

Limitations

It is a renderer, not a syntax parser or editor; highlighting is caller-supplied and clipboard failure has no visible error state.

Source

Source: components/agent/code-block.tsx.

Full pack

components/agent/code-block.tsx is documented at /components/code-block and installs only through the single Kansho full pack; no individual component install is offered.