1 variant

Diff Review

A coding agent's edit to one file as a diff to accept or reject, with line numbers, added and removed counts, and code that folds away once decided.

			export async function GET(request: Request) {
12	12		const { searchParams } = new URL(request.url);
13		-	const page = searchParams.get("page");
14		-	const items = await db.item.findMany();
	13	+	const page = Number(searchParams.get("page") ?? 1);
	14	+	const items = await db.item.findMany({
	15	+	take: PAGE_SIZE,
	16	+	skip: (page - 1) * PAGE_SIZE,
	17	+	});
15	18
16	19		return Response.json({ items, page });
17	20		}

usage.tsx

import { DiffReview } from "@/components/registry/diff-review";

export function ProposedEdit({ patch }: { patch: string }) {
  return (
    <DiffReview
      path="app/api/items/route.ts"
      diff={patch}
      onDecision={(decision) => apply(decision)}
    />
  );
}

"use client";

import { Check, ChevronDown, FileCode2, Undo2 } from "lucide-react";
import { useId, useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export type DiffDecision = "accepted" | "rejected";

export interface DiffReviewProps {
  /** The file the agent changed: "app/api/route.ts". */
  path: string;
  /** A unified diff, the kind git prints. Lines start with +, - or a space, and @@ starts a hunk. */

161 more lines ship with an easeUI Pro license.

Install

$ bunx --bun shadcn add @easeui-pro/diff-review