DiffReview

Unified or split review of agent edits across files, with word-level highlights. Give it the old and new contents of each file, or a unified patch when you only have the diff, and it computes the hunks. The reviewer accepts or rejects each hunk or a whole file, comments on lines or hunks, marks files viewed and applies, and the agent gets back what it needs to act on.

What the agent gets back. onSubmit(result, { toPatch }) receives:

• files: each file's decision (accepted, rejected, partial, pending or unchanged), whether it was marked viewed, and its content with only the accepted hunks applied, unreviewed ones left out. Each file also carries the ids of the hunks accepted, rejected or left pending.
• rejectedHunks: each rejected hunk with its lines, so the agent knows what not to do again.
• comments: each with its file, its line range (side, startLine, endLine), its text and the lines it is on (excerpt).
• toPatch(): the accepted changes as a git-style unified diff, which git apply reads.

reviewToolOutput(result) shapes that for the model. It gives a one-sentence summary, each file's decision with its applied contents, the rejected hunks and the comments; pass { contents: false, patch: toPatch() } to send a patch instead of contents. It is plain JSON, so it is an AI SDK tool output as it is: addToolOutput({ tool: 'review_changes', toolCallId, output: reviewToolOutput(result) }). For an AG-UI agent paused on an interrupt, reviewResumeEntry(interrupt.id, result) is the resume entry, with the same payload: pass it to useAgUiAgent's resolve.

The review is sent once per state of the review. A double click or a repeated ⌘ or Ctrl + Enter sends one review, until a decision, a comment, a viewed mark or the files change. Files compare by content, so an inline files array does not count as a change.

Comments. Select lines from a hunk with Shift and the up or down arrow: down starts at its first changed line, up at its last. Or click a line number and Shift-click another. C comments on the selected lines, or on the whole hunk when none are selected, and the hunk's comment button does the same. ⌘ or Ctrl + Enter saves the comment and Escape cancels it. Lines are numbered in the proposed file, or in the original when only removed lines are selected (side: 'old'). Control comments with comments and onCommentsChange, or start from defaultComments.

Files. A review of several files lists them first. The list is one tab stop: the arrow keys move between files and Enter goes to one. Any file can be accepted or rejected whole, with its buttons or with Alt + A and Alt + R. A file can be marked viewed with its checkbox, or with V, which also moves to the next file. A viewed file folds away (collapseViewed={false} keeps it open), and viewed and onViewedChange control the marks. A renamed file shows its old path. A binary file reads "Binary file, not shown": it is detected from a NUL character in its contents or from a binary patch, or set with binary. Binary files, renames without changes, and files created or deleted empty are each decided as a whole, under the id `${path}:file`.

Context. Unchanged lines between hunks can be shown, 20 at a time or all at once, from the bar between hunks or with E around the focused hunk. That needs both contents: a patch alone has no lines outside its hunks.

Large files. Large files stay responsive. A file that needs more than a few hundred edits is diffed in a worker and reads "Comparing changes…" until it is done; Apply waits for it. Webpack 5, Next.js and Vite emit the package's worker without configuration. diffWorker takes a function that starts your own worker, or false to diff on the main thread after the first paint. A file changed in more places than maxEditLength (2,000 lines added plus removed) is reviewed as one hunk that replaces the changed region, and the review says so. A long review renders only the rows near the screen. The rest keep their height and their text for screen readers, and every hunk stays in place for focus and for J and K. Performance and limits has the numbers.

Your own markup. useDiffReview is all of this without the markup. It gives the files, decisions, comments, selection, viewed marks and shown context, and the keyboard. It also gives getters for items, buttons, the comment editor and a file navigator.

On the server. parseFileChange, applyHunks, computeReviewResult, toPatch, reviewToolOutput and reviewResumeEntry are in signoff-ui/core, with no React. A server render diffs the files a render may diff, and shows the rest as being compared, so hydration matches. Long changed lines skip word-level highlights rather than stall.

• A <section> named by its title. Hunks use a roving tabindex, so the whole review is one tab stop that J, K and the arrows move through.
• Each hunk is a group named like "Hunk 2 of 4, app/api/chat/route.ts, lines 12 to 20, accepted"; a file decided as a whole, like "Change 5 of 6, logo.png, binary file, not reviewed".
• Every shortcut is also a button: "Accept hunk 2", "Reject hunk 2", "Reset hunk 2" with aria-pressed, "Comment on hunk 2", "Accept file app/route.ts", the "Viewed app/route.ts" checkbox, the layout toggle and Apply. Shortcuts only work while focus is inside the review.
• Selected lines are announced as they change, line by line: "Added: const ip = … Lines 15 to 17 selected." The comment editor is a labelled text area ("Comment on lines 15 to 17, for the agent") that takes focus, and focus returns to the hunk when it closes.
• The file list is a navigation landmark ("Files in this review") with one tab stop: the arrow keys, Home and End move through it, and each entry reads its path, how many changes are decided and whether it is viewed. A folded file has an expand button with aria-expanded.
• Line numbers and the buttons that show unchanged lines are clickable but out of the tab order (Shift and the arrows select lines, E shows context); the numbers are hidden from screen readers, which read the lines themselves.
• Progress, decisions, comments, viewed marks and shown context are announced: "Hunk 2 of 4 accepted. 2 remaining."
• Changed lines keep their + and − glyphs and are read as "Added:" or "Removed:", so cyan and magenta never carry the meaning alone.
• A long review renders only the rows near the screen. The rest keep their place as visually hidden text, read in the same order with the same "Added:" and "Removed:", and every hunk stays rendered, so its name, focus and J and K never depend on scrolling.
• A file still being diffed reads "Comparing changes…" and is aria-busy; the review itself is not, so its announcements go out meanwhile. A file past maxEditLength says it is shown as one replacing hunk.

Every color, radius and font is a CSS variable, so the overrides in Theming apply, on :root or scoped to any element. These hooks are read from the component's markup.