Skip to content

Run Receipt

anime.js

A tear-off receipt of a run's tokens, cost and tools that prints line by line.

Run R-2041
atlas-l · 31 Oct 21:42
Input tokens
2,140
Output tokens
412
Cached tokens
1,600
Tool calls
5
Duration
2.84 s
Total$0.0092
Thank you for running

Install

$ npx shadcn@latest add https://spotcheckui.com/r/run-receipt.json

Also installs animejs.

Usage

import { RunReceipt } from "@/components/spotcheck/run-receipt"

<RunReceipt
  title="Run R-2041"
  meta="atlas-l · 31 Oct 21:42"
  lines={[
    { label: "Input tokens", value: "2,140" },
    { label: "Output tokens", value: "412" },
    { label: "Tool calls", value: "5" },
  ]}
  total={{ label: "Total", value: "$0.0092" }}
/>

It prints the first time it scrolls into view. Change its key to print it again.

Props

  • title * RequiredstringDefault —The run's name, printed at the top.
  • metastringDefault —A second line, such as the model and time.
  • lines * RequiredReceiptLine[]Default —
  • total * RequiredReceiptLineDefault —
  • footerstringDefault Thank you for runningPrinted at the very bottom.
  • classNamestringDefault —

Keyboard

Nothing to operate: this component displays information.

Reduced motion

The finished receipt appears at once.