Design Atlas
한국어
✧ AI interface patterns

Diff review

변경사항 검토

Shows a model's proposed edit as removed (red) and added (green) lines, acceptable or rejectable hunk by hunk.

Also known as: Inline diffAccept/reject changesCode diff view
···
html
<div class="diff" id="diff">
  <div class="ln head">utils.ts</div>
  <div class="ln ctx">function formatPrice(n) {</div>
  <div class="ln del">&nbsp;&nbsp;return '$' + n;</div>
  <div class="ln add">&nbsp;&nbsp;return '$' + n.toFixed(2);</div>
  <div class="ln ctx">}</div>
  <div class="actions" id="acts">
    <button class="rej">거부</button>
    <button class="acc">승인</button>
  </div>
</div>
css
.diff{width:min(300px,96%);border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface);font-family:ui-monospace,monospace;font-size:11px}
.ln{padding:4px 12px;white-space:pre;color:var(--fg)}
.ln.head{background:var(--bg);color:var(--muted);font-family:inherit;font-weight:700;font-size:10.5px;padding:7px 12px}
.ln.del{background:color-mix(in srgb, #e5484d 16%, transparent);color:#e5484d;text-decoration:line-through;text-decoration-thickness:1px;transition:opacity .3s,max-height .3s;max-height:30px}
.ln.add{background:color-mix(in srgb, #0f9d78 16%, transparent);color:#0f9d78;transition:background .3s}
.ln.del[data-gone]{opacity:0;max-height:0;padding-top:0;padding-bottom:0}
.ln.add[data-kept]{background:transparent;color:var(--fg)}
.actions{display:flex;gap:8px;padding:9px 12px;border-top:1px solid var(--line)}
.actions button{flex:1;padding:6px 0;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--line);font-family:inherit}
.rej{background:var(--bg);color:var(--muted)}
.acc{background:var(--accent-3);color:#fff;border-color:var(--accent-3)}
js
const diff = document.getElementById('diff'), del = diff.querySelector('.del'), add = diff.querySelector('.add'), acts = document.getElementById('acts');
function run() {
  del.removeAttribute('data-gone'); add.removeAttribute('data-kept'); acts.style.opacity = 1;
  setTimeout(() => {
    del.setAttribute('data-gone', '');
    add.setAttribute('data-kept', '');
    acts.style.opacity = .35;
  }, 2600);
}
run();
setInterval(run, 3800);

When a model edits code or a document, showing only the final result forces a person to re-read everything from scratch to figure out what changed and why. Borrowing version control's diff notation — minus for removed, plus for added — lets changed spots jump out immediately and cuts review time considerably.

Rather than accept-or-reject-everything, splitting the change into meaningful hunks that can each be accepted or rejected handles the common case of "this part is right, that part isn't." An accepted line fades from highlighted green into normal text; a rejected line reverts to what it was.

Auto-applying a change before anyone reviews it and applying it after review are different trust situations — auto-apply is fine for an easily-reversible document edit, but a costly change like production code is safer with a review step that isn't skipped.

When to use

Use it for a proposed edit to something that already exists — code, a document. Doesn't apply to something generated from scratch, where there's no prior version to diff against.