Agents
File Diff
A change an agent proposes to a file, with accept and reject.
File Diff shows a code change an agent proposes: added and removed lines with old and new line numbers, +/− stats, long unchanged runs folded away, and Accept/Reject. The header records the decision afterwards.
Preview
src/billing/tax.ts+4 −1
| 1 | 1 | import { Invoice } from './types' |
| 2 | 2 | |
| 3 | −export const tax = (i: Invoice) => i.subtotal * i.rate | |
| 3 | +export function tax(i: Invoice) { | |
| 4 | + if (!i.customer.taxId) return 0 | |
| 5 | + return Math.round(i.subtotal * i.rate * 100) / 100 | |
| 6 | +} | |
| 4 | 7 | |
| 5 | 8 | export function total(i: Invoice) { |
| 6 | 9 | return i.subtotal + tax(i) |
| 7 | 10 | } |
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/file-diff.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/file-diff.
Builds on: button, motion
Usage
import { FileDiff } from "@/components/ui/file-diff";
<FileDiff filename="src/tax.ts" lines={diff} onAccept={apply} />API reference
FileDiff
| Prop | Type | Default | Description |
|---|---|---|---|
| filename | string | — | Path shown. |
| lines | { type: "add" | "remove" | "context"; content }[] | — | The diff. |
| onAccept · onReject | () => void | — | Decision. |
| foldAfter | number | 6 | Fold long unchanged runs. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: code diff component react · ai code review ui · file diff viewer · accept reject changes ui · agent code changes