Best of nPro
Several attempts at one task side by side, from different models: tests, diff size, cost and time on aligned rows with the best of each marked, the same file's diff in every column, and one Apply.
On this page
ProThree models on one rounding bug, side by side: tests, diff size, cost and time on aligned rows with the best of each marked, and the same file's diff in every column. Pick one and apply it.
Installation
Usage
import { BestOfN } from "@/components/ui/chatcn/pro/best-of-n"
<BestOfN task={task} attempts={attempts} onApply={apply} applying={applyingId} applied={appliedId} />Pass each attempt's changed files as DiffFiles from diffText or parsePatch. The compare bar lists every file any attempt touched, most changed first, and each column shows its diff of that file. Only finished attempts compete for Best, and only when two or more have a value.
Examples
States
ProEvery attempt running, one failed among four that scroll sideways, and applied.
Props
| Prop | Type | Notes |
|---|---|---|
attempts | BestOfNAttempt[] | model, status, activity, summary, error, tests, files, cost, durationMs, tokens, recommended |
task | ReactNode | The task every attempt ran |
value, defaultValue, onValueChange | string | Chosen attempt. Defaults to the recommended one |
file, defaultFile, onFileChange | string | File compared across columns |
onApply | (id) => void | Apply attempt n |
applying, applied, appliedTo | string | In flight, done, and where it went |
diffHeight | number | string | Default 260 |
Keyboard
| Key | Action |
|---|---|
ArrowLeft ArrowRight Home End | Choose an attempt (mirrored in right to left) |
Space Enter | Choose the focused attempt |
Accessibility
- Attempts are a radio group; each reads its number, model and test result. Best is a word with a check, not a color.
- Diffs keep the + and - glyphs and read Added and Removed.
Motion
Selection moves the ring in 150 ms. Columns scroll with snap points on narrow screens. Nothing else moves.