Run receipt

Pro

What one run cost and where it went: per model (input, output and cached tokens, cost), tool calls, and any other figures the app measures. Every figure is the service's own measure; while the run is going the total is labelled "so far". A cost that wasn't measured says so: with no measured model cost the total reads "Not measured", and when only some models have a cost the total is labelled partial. It is never shown as $0.00. When your server decides what's exact and what's a guess, give totalText and each model's costText, and they're shown as written.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/run-receipt

Brings in: locale, ops, relative-time, scale, status-dot, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { RunReceipt } from "@/components/run-receipt"
import type { RunReceipt as RunReceiptData } from "@/lib/ops"

const receipt: RunReceiptData = {
  runId: "run_7f3a91",
  title: "Add region to projects",
  startedAt: new Date(Date.now() - 48 * 60_000).toISOString(),
  duration: 431,
  status: "succeeded",
  models: [
    { model: "Claude Opus 5.5", inputTokens: 182_400, outputTokens: 9_820, cachedTokens: 141_000, cost: 1.94 },
    { model: "Claude Haiku 5.5", inputTokens: 22_100, outputTokens: 1_900, cost: 0.02 },
    { model: "Self-hosted embedder", inputTokens: 48_000, outputTokens: 0 },
  ],
  toolCalls: 38,
  meters: [{ label: "Database queries", value: "1,204" }, { label: "Staging compute", value: "6 min" }, { label: "GitHub API calls" }],
  costNote: "The self-hosted embedder doesn’t report cost.",
}

export default function Example() {
  return <RunReceipt className="max-w-2xl" receipt={receipt} />
}

<RunReceipt>

Prop	Type	Default	Description
receiptrequired	`RunReceiptData`	—	The run's measured usage. A model without a cost counts as not measured.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under runReceipt in <LocaleProvider strings={{ … }}>; the table is exported as runReceiptStrings.

Key	English
receiptFor	Receipt for {title}
costNotMeasured	Cost not measured
partialSoFar	partial, so far
partialNotMeasured	partial: some costs not measured
soFar	so far
total	total
model	Model
in	In
out	Out
cached	Cached
cost	Cost
noModelUsage	No model usage recorded.
notMeasured	Not measured
toolCalls	Tool calls