Diff view

Unified multi-file diff with per-file headers, hunk separators, and add/remove colouring.

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

Multi-file diff

		…	@@ -1,6 +1,8 @@
1	1		import { nanoid } from 'nanoid';
2		−	import { createHmac } from 'crypto';
	2	+	import { SignJWT, jwtVerify } from 'jose';
	3	+	import { getSecret } from './secret';
3	4
4	5		const SESSION_TTL = 60 * 60 * 24 * 7;
		…	@@ -12,10 +14,12 @@
12	14		export async function createSession(userId: string) {
13	15		const sessionId = nanoid();
14		−	const token = signHmac({ sub: userId, sid: sessionId });
	16	+	const token = await new SignJWT({ sub: userId, sid: sessionId })
	17	+	.setProtectedHeader({ alg: 'HS256' })
	18	+	.setExpirationTime(SESSION_TTL + 's')
	19	+	.sign(getSecret());
15	20		return { sessionId, token };
16	21		}

	…	@@ -0,0 +1,8 @@
1	+	import { createSecretKey } from 'crypto';
2	+
3	+	let _key: CryptoKey \| undefined;
4	+
5	+	export function getSecret() {
6	+	if (!_key) _key = createSecretKey(process.env.SESSION_SECRET!, 'utf8');
7	+	return _key;
8	+	}

		…	@@ -8,6 +8,7 @@
8	8		"dependencies": {
	9	+	"jose": "^5.2.1",
9	10		"nanoid": "^5.0.7",
10	11		"next": "^15.3.2"
11	12		}

Single file, collapsed by default

Component documentation

Diff View

components/sandbox/diff-view.tsx

Purpose

Renders multi-file unified-style diffs with collapsible file blocks and hunks.

Appropriate use

Use for read-only review when line kinds and old/new line numbers are already calculated.

Example

components/sandbox/diff-view.tsx has a representative live example in the "Multi-file diff" section on /components/diff-view.

States

Line kinds are added, removed, unchanged, and hunk; each file can be open or closed and may include a caller-authored stat summary.

API and props

DiffView accepts files, defaultOpen, and className; DiffFile supplies path, optional stat, and lines, while DiffLine supplies kind, text, and optional lineOld and lineNew numbers.

Dependencies

Direct imports are React, Lucide icons, and cn.

Accessibility

Each file header is a native disclosure button with expanded and controls state; additions/removals use visible signs and line numbers as well as colour.

Limitations

It does not compute diffs, syntax-highlight, virtualise large changes, or provide review comments and staging actions.

Source

Source: components/sandbox/diff-view.tsx.

Full pack

components/sandbox/diff-view.tsx is documented at /components/diff-view and installs only through the single Kansho full pack; no individual component install is offered.