# Diff Apply: Agent Refactor

> An assistant wraps an invoice fetch in a retry with backoff: an import, a doc comment and the new body land one after another. Keep or undo each change, or all of them from the header.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/diff-apply-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/diff-apply-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/diff-apply-demo/light.png
- Registry item: https://keyframeui.com/r/diff-apply-demo.json
- Categories: code, developer, ai
- Listed: 2026-11-02, source last changed 2026-11-02

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/diff-apply-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/diff-apply.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/diff-apply#diff-apply-demo

## Files

### `registry/demos/diff-apply-demo.tsx`

```tsx
"use client";

import { DiffApply } from "@/components/ui/diff-apply";

const before = `
import type { Invoice } from "./types";

const API = "https://api.northwind.dev/v2";

export async function fetchInvoice(id: string): Promise<Invoice> {
  const res = await fetch(\`\${API}/invoices/\${id}\`);
  if (!res.ok) {
    throw new Error("Request failed");
  }
  return res.json();
}

export function formatTotal(invoice: Invoice) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: invoice.currency,
  }).format(invoice.total / 100);
}
`;

const after = `
import type { Invoice } from "./types";
import { retry } from "@/lib/retry";

const API = "https://api.northwind.dev/v2";

/** Retries 5xx responses up to 3 times, backing off from 250ms. */
export async function fetchInvoice(id: string): Promise<Invoice> {
  return retry(
    async () => {
      const res = await fetch(\`\${API}/invoices/\${id}\`);
      if (res.status >= 500) throw new Error(\`Northwind \${res.status}\`);
      if (!res.ok) throw new Error(\`Invoice \${id} not found\`);
      return res.json();
    },
    { attempts: 3, backoff: (n) => 250 * 2 ** n },
  );
}

export function formatTotal(invoice: Invoice) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: invoice.currency,
  }).format(invoice.total / 100);
}
`;

export function DiffApplyDemo() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <div className="flex items-center gap-2.5 px-1 text-[13px] text-zinc-600 dark:text-zinc-400">
        <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-zinc-900 text-white dark:bg-white dark:text-zinc-900">
          <svg aria-hidden viewBox="0 0 16 16" className="size-3.5" fill="currentColor">
            <path d="M8 1.5c.3 2.9 1.6 4.2 4.5 4.5-2.9.3-4.2 1.6-4.5 4.5-.3-2.9-1.6-4.2-4.5-4.5 2.9-.3 4.2-1.6 4.5-4.5Zm4.25 7.25c.15 1.45.8 2.1 2.25 2.25-1.45.15-2.1.8-2.25 2.25-.15-1.45-.8-2.1-2.25-2.25 1.45-.15 2.1-.8 2.25-2.25Z" />
          </svg>
        </span>
        <p className="min-w-0 truncate">
          <span className="font-medium text-zinc-900 dark:text-zinc-100">Retry invoice fetches</span> when Northwind
          returns a 5xx, with backoff
        </p>
      </div>
      <DiffApply filename="billing/fetch-invoice.ts" before={before} after={after} />
    </div>
  );
}
```