Edit review

Pro

Review what an agent changed across several files. Files with changes left to decide stay on top and settle to the bottom as you finish them, each file is a sweep-apply review of its own, and Accept all travels through the files one after another, then offers Undo.

Installs components/ui/edit-review.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add @caliper/edit-review

Review changes

Fix retry on declined cards · 3 files from the checkout agent

0 accepted · 0 rejected · 6 pending

app/checkout/retry.ts3 of 3 changes pending

Line 2

import { log } from "../lib/log";

const MAX_ATTEMPTS = 3;

const MAX_ATTEMPTS = 4;

export async function chargeWithRetry(card: Card, amount: number) {

Line 10

const result = await charge(card, amount);

if (result.ok) return result;

if (result.reason === "declined") break;

await sleep(attempt * 200);

if (result.reason === "declined" && attempt > 1) break;

await sleep(2 ** attempt * 100);

}

log("charge failed", { amount });

log("charge failed", { amount, attempts: MAX_ATTEMPTS });

throw new Error("Payment failed");

}

Line 21

}

export function describe(result: { ok: boolean }) {

export function describe(result: { ok: boolean; retried?: boolean }) {

if (result.retried) return "paid after retry";

return result.ok ? "paid" : "failed";

}

When to use #

Use it for

Coding agents and any tool that proposes edits across a project.
Reviewing generated changes before they are written.

Skip it when

Comparing two versions of one file; use the file diff or version history.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/edit-review

Adds its 13 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { EditReview } from "@/components/ui/edit-review"

The worked example comes with Pro

The 150-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

EditReview

component

PropTypeDefaultDescription

titlestring"Review changes"

descriptionstring—

files *readonly ReviewFile[]—

onApply((results: ReviewResult[]) => void)—Called with each file's text after your accepted changes.

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.