RunCompare
Two runs or checkpoints side by side: outcome, measurements, effects and timelines.
Used in Evaluations.
- Use it for
- Two runs or checkpoints side by side.
- Not for
- Two versions of one document. Try ArtifactDiff.
RunCompare preview
Loading example…
Installation
npm install @stackunseen/uiimport { RunCompare } from '@stackunseen/ui/conversation-flow';@stackunseen/ui/styles.css and @stackunseen/ui/conversation-flow.cssUsage and props
Import this component from @stackunseen/ui/conversation-flow. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/conversation-flow.css.
Rows compare server data only. An effect is confirmed on a side only by that side's acknowledged receipt. Artifact comparison is supplied by the server.
Supported inputs
This is the public signature used by this example. Open Code to see how the values and callbacks fit together.
left · right: { label, summary, timeline?, receipts? } · onlyDifferences? · onOnlyDifferencesChange? · artifacts?All props
Loading…
For your coding agent
Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.
- Contract
- left · right: { label, summary, timeline?, receipts? } · onlyDifferences? · onOnlyDifferencesChange? · artifacts?
- Keeps honest
- Rows compare server data only. An effect is confirmed on a side only by that side's acknowledged receipt. Artifact comparison is supplied by the server.
- MCP
read_component "RunCompare"on the docs endpoint
Keyboard and customization
Keyboard
Tab reaches controls; Enter or Space activates buttons. Accordions use arrow keys, Home and End. Select menus support arrows and typeahead; Escape closes menus and dialogs and restores focus.
Customization
Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio