Receipt
StableA paper receipt for one agent task: torn edges, dotted leaders, a total, and a FIX stamp that lands.
Itemises one SAMPLE task, “Fix flaky checkout test”: the main session, a skill, an agent and its retries, each with tokens and cost, then the total and a rubber stamp with the verdict. The lines are hard-coded in home/Receipt.tsx and say “Sample data” in print; the only prop is className. The paper stays near-white in both themes, with a shadow that follows its torn edges.
Updated View source
One task, itemised
import { Receipt } from '@rchursin/home/Receipt'
/** One task's tokens and cost, printed on paper. The paper stays white in both themes. */export default function ReceiptTask() { return <Receipt className="w-full max-w-sm" />}Usage
import { Receipt } from '@rchursin/home/Receipt'<Receipt className="w-full max-w-sm" />API
Receipt props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Extra classes on the wrapper that carries the shadow, e.g. a width or a slight rotation (lg:rotate-[1.5deg]). |
Accessibility
- The printed lines are aria-hidden. A visually hidden <figcaption> sums the receipt up in one sentence: the task, the total of 211.4 thousand tokens and $3.20, and the verdict.
- The FIX stamp is hidden from screen readers too; the caption already gives the verdict in words.
- The paper stays near-white in both themes and the totals are near-black. The grey lines are neutral-600 (#525252), about 7:1 even on the greyer bottom of the paper, and the caption carries the same facts.
- Lines print one by one only when motion is allowed (plain CSS, no script needed). The stamp also waits for the page to arm its arrivals (useLuxe or KitPage) and then lands as it scrolls into view. With reduced motion the receipt is complete at once.
Guidelines
Do
- Give it room: it reads best at its full 384 pixel width.
- Keep the “Sample data” mark while the numbers are made up.
Don’t
- Don’t use it for real billing; it is a picture of one task, not a document.
- Don’t place two receipts side by side; the stamp is the point and two compete.
In use
Related
- TerminalA dark terminal window with sample scan output: usage bars, a context cost and a verdict per item, printed line by line.
- The ReceiptAn editorial home page about cost: a printed receipt for agent work, figures that count up, a ledger and a cost chart.
- Light & grainA ceiling halo for heroes, film grain for flat grounds, a fade for product shots and a shadow that follows torn paper.
- Verdict badgeKeep, fix, merge or cut: a mono badge where each verdict has its own shape, and the word is always there.
Source
The component’s own files, exactly as they run on this site.
/** * A printed receipt for one agent task (SAMPLE data): every agent and skill that * ran, its tokens and its cost, the total, and a verdict stamp. Lines print one by one * when motion is allowed. */import type { CSSProperties, ReactNode } from "react"import { Logo } from "../brand/Logo"import { cx } from "../components/cx"
const lines = [ { label: "main session", tokens: "41.2k", cost: "$0.62" }, { label: "skill pr-review", tokens: "12.8k", cost: "$0.19" }, { label: "agent test-fixer", tokens: "96.4k", cost: "$1.46" }, { label: " retry ×2", tokens: "61.0k", cost: "$0.93" },]
function Row({ i, children, className }: { i: number; children?: ReactNode; className?: string }) { return ( <div className={cx("fx-reveal-line", className)} style={{ "--i": i } as CSSProperties}> {children}