CodeDiff

A unified diff with tinted additions and removals, sized for chat.

Install it:

npx shadcn add @ambientui/code-diff

Live

composer.tsx

composer.tsx0s

Behavior

  • ·Read-only by design: this is the assistant showing what it changed, not asking anything.
  • ·Tint carries the sign so the eye finds the change before reading it — and the sign column stays anyway, because color alone is not a signal everyone receives.
  • ·Counts are derived from the lines when not given, so a diff can never advertise a total it does not contain.
  • ·Uses --positive-wash and --destructive-wash: the same status tokens as every other pass/fail surface.

When to use

  • ·Whenever an answer changed code the user has not seen yet.

When not to

  • ·When the change still needs the user's approval — that is ReviewableDiff, where each hunk is a decision.
  • ·For whole files; a diff is an argument about what changed.