553 / 1002

Agent File Diff

A compact unified diff viewer with line numbers, hunk headers, added and removed lines, collapsible unchanged context and a button that copies the patch.

src/session.ts+2-1

@@ -18,7 +18,8 @@ export async function loadSession(req)

const token = readToken(req);

const store = await openStore();

Removed: const user = store.get(token);

Added: const user = token ? store.get(token) : null;

Added: if (!user) return redirect("/login");

const prefs = await loadPrefs(user.id);

Install

terminal

npx shadcn@latest add https://hyperblur.dev/r/agent-file-diff.json

Works in any React project set up with the shadcn CLI. The file lands in components/hyperblur/agent-file-diff.tsx.

Use

example.tsx

import { AgentFileDiff } from "@/components/hyperblur/agent-file-diff"

<AgentFileDiff fileName="src/session.ts" patch={patch} context={1} />

Props

Prop	Type	Default	Description
patch	string	a sample patch	A unified diff. Lines before the first hunk are ignored, except the +++ line that supplies the file name.
fileName	string		Overrides the file name shown in the header.
context	number	2	Unchanged lines kept visible around each change. Longer runs collapse into a button that expands them.
accent	string	"#2f7bff"	Tint of the hunk header and the focus ring.
onCopy	(patch: string) => void		Called after the patch is copied.

PreviousAgent Model Picker NextAgent Composer with Attachments

Agent Model Picker Agent Composer with Attachments