CostLedger
Where the money went, run by run, with measured and estimated costs kept apart and never added together.
Used in Analytics.
- Use it for
- Cost per run or step over a period, with measured and estimated amounts kept apart.
- Not for
- One number for the current request. Try UsageMeter.
CostLedger preview
Loading example…
Installation
npm install @stackunseen/uiimport { CostLedger } 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.
The footer adds only measured rows and counts the estimated and unknown ones, unless your billing supplies the total. Rows in two currencies get no sum.
Supported inputs
This is the public signature used by this example. Open Code to see how the values and callbacks fit together.
rows: CostLedgerRow[] · total? · period? · onOpen? · locale?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
- rows: CostLedgerRow[] · total? · period? · onOpen? · locale?
- Keeps honest
- The footer adds only measured rows and counts the estimated and unknown ones, unless your billing supplies the total. Rows in two currencies get no sum.
- MCP
read_component "CostLedger"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