Components
Eval results
An eval run case by case, against the run before.
An eval suite's latest run: one bar segment per case, the pass count against the run before, and
the cases — all of them, or only the failed ones. The Run evals button spins while the suite runs
and the count reads Running 3 of 8. A failed case opens to show what was expected and what it
got, with a fix button that reruns just that case.
Preview
Pricing copy evalsCopy agent · 8 cases · run 2h ago
8 of 8 passedAll passing
Names the Pro seat limit
Prices match the billing table
Mentions the yearly discount
Makes no “unlimited” claims
Team plan lists SSO
Reads at grade 8 or below
One call to action per plan
Free plan says no card is needed
Usage
<!-- include core.css + eval-results.css -->
<div class="evr panel">
<div class="evr-h">
<div class="evr-ht"><b>Pricing copy evals</b><span class="muted evr-st">Copy agent · 8 cases</span></div>
<button class="pill primary sm evr-run"><svg class="i xs"><use href="#i-play"/></svg>Run evals</button>
</div>
<div class="evr-sum">
<div class="evr-segs" aria-hidden="true"></div>
<div class="evr-nums"><span class="evr-pass num"></span><span class="tag evr-dl"></span></div>
</div>
<div class="evr-list" role="list" aria-label="Cases"></div>
</div>
<!-- eval-results.js fills the segments and cases and runs the suite -->Properties
| Name | Type | Description |
|---|---|---|
title | string | The suite's name, like "Pricing copy evals". |
subtitle | string | The line under the title, like "Copy agent · 8 cases · run 2h ago". Crossfades when it changes. |
cases | EvalCase[] | One per case: id, name, status, and (for a failure) time, expected, got, source, fix. |
onRun | () => void | Adds the run button. |
running | boolean | Whether the whole suite is running: the button spins and the count reads "Running 3 of 8". |
runLabel | string | The run button's label. Defaults to "Run evals". |
previousPassed | number | How many passed the run before. Once the run settles, a tag compares with it. |
filter / defaultFilter | all | fail | Which cases show: all of them, or only the failed ones. |
open / defaultOpen | string[] | Ids of the failed cases that are open. Leave it out to let each one open itself. |
EvalCase | Type | Description |
|---|---|---|
status | queued | running | pass | fail | How the case did; picks its glyph and bar colour. |
time | string | How long it took, like "0.9s", shown once it has a result. |
expected / got / source | string | For a failed case: what should have come back, what did, and where the answer comes from. |
fix | { label; onClick } | A white button under a failed case's details, like "Use $24 and rerun". |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The panel
sits on a surface with the card shadow; pass and fail take the --dm-ok and --dm-bad tokens for
their glyphs and bar segments, and a failed case tints with --dm-bad-bg, so it all reads against
the stage. In Soft the panel, pills and segmented control are rounder.