Run diffPro
Two runs of the same task side by side, with step alignment, changed outputs and time, token and cost deltas.
On this page
ProThe same question on two prompt versions, aligned step by step with time, token and cost deltas.
Installation
Usage
import { RunDiff } from "@/components/ui/chatcn/pro/run-diff"
<RunDiff a={{ id: "a", label: "Baseline", steps: baseline }} b={{ id: "b", label: "Candidate", steps: candidate }} />Steps align on their kind and title with a longest common subsequence, so one extra retry shows as one added row instead of shifting every row after it. Changed outputs open to the full text of A and a word level diff of B.
Deltas read B against A. Lower is better for time, tokens and cost: a drop is green with a down trend, a rise red with an up trend, and the sign carries it without color. Only changes folds runs of identical steps into one quiet row.
Examples
States
ProOnly changes with identical steps folded, two identical runs, and nothing to compare.
Props
| Prop | Type | Notes |
|---|---|---|
a, b | RunDiffRun | { id, label, meta?, steps, status? } |
onlyChanges, defaultOnlyChanges, onOnlyChangesChange | boolean | |
defaultOpen | string[] | Changed rows open at first. Default the first |
labels, locale |
Accessibility
- Every row starts with its change in words for screen readers; insertions and deletions in the word diff are named.
- Changed rows are buttons with
aria-expanded.
Motion
Only the row chevron turns, for 150 ms. Reduced motion removes it.