DiffView

Side-by-side or unified diff view for showing file changes the agent made.

Preview

		…	@@ -12,6 +12,10 @@ model User {
12	12		id String @id @default(cuid())
13	13		email String @unique
14	14		createdAt DateTime @default(now())
	15	+	role Role @default(USER)
	16	+	sessions Session[]
15	17		}
		…	@@ -20,0 +22,7 @@
	22	+
	23	+	enum Role {
	24	+	USER
	25	+	ADMIN
	26	+	}

		…	@@ -8,7 +8,14 @@ import { db } from './db'
8	8		export async function getSession(req: Request) {
9	9		const token = req.headers.get('authorization')
10		−	if (!token) return null
	10	+	if (!token) throw new AuthError('Missing token')
	11	+	const payload = await verifyJWT(token)
11	12		return db.session.findUnique({ where: { token } })
12	13		}

Variants

Schema diff

		…	@@ -12,6 +12,10 @@ model User {
12	12		id String @id @default(cuid())
13	13		email String @unique
14	14		createdAt DateTime @default(now())
	15	+	role Role @default(USER)
	16	+	sessions Session[]
15	17		}
		…	@@ -20,0 +22,7 @@
	22	+
	23	+	enum Role {
	24	+	USER
	25	+	ADMIN
	26	+	}

		…	@@ -8,7 +8,14 @@ import { db } from './db'
8	8		export async function getSession(req: Request) {
9	9		const token = req.headers.get('authorization')
10		−	if (!token) return null
	10	+	if (!token) throw new AuthError('Missing token')
	11	+	const payload = await verifyJWT(token)
11	12		return db.session.findUnique({ where: { token } })
12	13		}

Single file

		…	@@ -8,7 +8,14 @@ import { db } from './db'
8	8		export async function getSession(req: Request) {
9	9		const token = req.headers.get('authorization')
10		−	if (!token) return null
	10	+	if (!token) throw new AuthError('Missing token')
	11	+	const payload = await verifyJWT(token)
11	12		return db.session.findUnique({ where: { token } })
12	13		}

Props

Prop	Type	Description
files*	DiffFile[]	One entry per changed file. Each carries a path, optional stat, and an array of diff lines.
defaultOpen	boolean	Whether file blocks start expanded. Defaults to true.
className	string	Additional class names for the wrapper.

* required.

Usage

import { DiffView } from "@/components/sandbox/diff-view";

<DiffView
  files={[
    {
      path: "prisma/schema.prisma",
      lines: [
        { kind: "unchanged", text: "model User {", lineOld: 1, lineNew: 1 },
        { kind: "added",     text: "  role Role @default(USER)", lineNew: 2 },
      ],
    },
  ]}
/>