pro169 lines · framer-motion

Diff Review

Keep or drop each change the agent made. A code review panel for agent changes: file list with status dots, per-hunk Keep / Drop, the agent's reason under each hunk, and a submit that waits until every hunk is decided.

Use it for: Coding agents, doc editors, config changes.
Themes: Light + dark
License: Commercial use (draft)

Live

Reviewcoder changed 2 files0/3 hunks

@@ -12,4 +12,4 @@ export function fee(total: number)

 const rate = 0.029;
-const fee = total * rate;
+const fee = Math.round(total * rate * 100) / 100;
 return fee;

why · Round to cents before returning. Fixes the 37 EU invoices that were a cent off.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface Hunk {
  id: string;
  header: string;
  lines: string[];
  rationale?: string;
}
export interface DiffFile {
  path: string;
  hunks: Hunk[];
}

export interface DiffReviewProps {
  files?: DiffFile[];
  agent?: string;
  /** Show the agent's reason under each hunk. */
  showRationale?: boolean;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Left: files, each with a dot (grey open, amber partial, green all kept, red something dropped).
→Right: hunks with header, coloured +/- lines and Keep / Drop toggles. Dropped hunks strike through and fade.
→Optional 'why' line with the agent's rationale.
→Keep all shortcut; Submit enabled only when every hunk is decided.

Accessibility

✓File list is a nav; current file has aria-current.
✓Toggles use aria-pressed.
✓Status line is role=status.
✓Honours prefers-reduced-motion.