Session cost footerPro

The status bar under a coding session: model, tokens in and out, cost and time, all live. A hairline on the top edge fills toward the budget; hover the numbers for the breakdown.

Markdown

On this page

ProA coding session at work: tokens and cost tick, the clock runs and the top hairline fills toward a $10 budget. Hover the numbers for the breakdown.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/session-cost-footer

Usage

tsx

import { SessionCostFooter } from "@/components/ui/chatcn/pro/session-cost-footer"

<SessionCostFooter
  model="Claude Sonnet 5.5"
  status="running"
  startedAt={startedAt}
  inputTokens={usage.input}
  outputTokens={usage.output}
  cost={usage.cost}
  budget={10}
  breakdown={lines}
/>

Pass the running totals as they change; the cost rolls digit by digit and the clock ticks from startedAt while status is running. breakdown lines (cached input, input, output, sandbox time) show on hover or focus with a bar for each line's share. With a budget, the hairline turns amber from 80% and red from 95%; paused shows Raise budget.

Examples

States

ProIdle after a run, near the budget, paused at it, no budget with a long model name, loading and usage unavailable.

Props

Prop	Type	Notes
`model`	`string`	With a dot: blue working, amber paused, gray idle
`inputTokens`, `outputTokens`, `cost`	`number`	Running totals, cost in USD
`breakdown`	`SessionCostLine[]`	`label`, `tokens`, `cost`, `detail`
`status`	`"running" \| "idle" \| "paused"`	Default `idle`
`startedAt`, `elapsedMs`	`number`	Live clock, or the final time
`budget`, `onRaiseBudget`	`number`, `() => void`
`loading`, `error`		Error says how to fix it

Keyboard

Key	Action
`Tab`	Focus the numbers, which opens the breakdown on Enter
`Escape`	Close the breakdown

Accessibility

The bar is a labelled group, not a live region, so the ticking clock is never read out. Every number has a spoken label (Input tokens, Cost, Time).
The breakdown is a table with row headers and a total. Budget levels are written in words as well as color.

Motion

Cost digits roll in 300 ms and never count up on mount. The budget hairline eases over 500 ms. The breakdown opens from the bar in 180 ms. Reduced motion swaps digits with a short fade and keeps the hairline still.