Change review
A diff to review hunk by hunk — keep or undo each change, or ask the agent about a line.
Change review walks a set of changed files as a diff. Pick a file in the list, then keep or
undo each hunk on its own — Keep turns to a green done chip, an undone hunk's Undo sits on the
surface, and pressing either again takes the choice back. Keep all settles the current file and
steps to the next; Undo all settles it in place. Hover a line to reveal its comment button and
ask the agent about that change. The file list rolls each file up to kept, undone or part-decided.
Usage
<!-- include core.css + change-review.css -->
<div class="dm-crx dm-panel" data-dm="">
<div class="dm-crx-side">
<div class="dm-crx-sh"><b>3 files changed</b><span class="dm-muted dm-crx-tot dm-num"></span></div>
<div class="dm-crx-files"><!-- file buttons --></div>
</div>
<div class="dm-crx-main">
<div class="dm-crx-mh">
<span class="dm-crx-fn dm-num">src/PricingCard.tsx</span>
<span class="dm-crx-sp"></span>
<button class="dm-pill dm-ghost dm-sm dm-crx-rej">Undo all</button>
<button class="dm-pill dm-primary dm-sm dm-crx-ok">Keep all</button>
</div>
<div class="dm-crx-diff"><!-- hunks --></div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
files | ChangedFile[] | The files to review. Each has a name, an optional path and its hunks. |
file | number | The file shown on the right, by index (controlled). |
defaultFile | number | The file shown first when uncontrolled. Defaults to 0. |
onFileChange | (index) => void | Called when the shown file changes. |
decisions | Record<string, 'kept' | 'undone'> | Kept or undone, by hunk key (controlled). |
defaultDecisions | Record<string, 'kept' | 'undone'> | Starting decisions when uncontrolled. |
onDecisionsChange | (decisions) => void | Called when any hunk's decision changes. |
onComment | (comment) => void | Called when the person asks the agent about a line. Without a question it sends "Why this change?". |
title | string | Header over the file list. Defaults to "N files changed". |
ChangedFile / Hunk / DiffLine
| Name | Type | Description |
|---|---|---|
file.name | string | Like "PricingCard.tsx". Its extension becomes the type label. |
file.path | string | Shown above the diff. Defaults to the name. |
hunk.title | string | What the change does, like "Use the shared button". |
hunk.key | string | Identifies the hunk in decisions. Defaults to "<file name>#<index>". |
line.kind | add | del | ctx | add and del lines are coloured; ctx lines are unchanged context. |
line.line | number | The line number shown in the gutter. |
line.text | string | The line's text. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). Added and
removed lines take the ok and bad tints; a hunk's Keep reads as the accent on a tint of itself, and
turns to the green done chip once kept — all from the theme tokens. The comment box uses the field
tokens, becoming a squircle in Blueprint where the browser supports it.