Run cost
Live credit and token spend against a budget, with a cap the agent pauses at.
A run cost shows the credits a run has used against its budget, as a number and a meter. A cap marks where the agent pauses, drawn as a line across the bar; when the spend reaches it the status turns amber and the run pauses. The breakdown under the bar shows the tokens and tool calls behind the number, and the button starts, stops, resumes or raises the cap by status.
Usage
<!-- include core.css + run-cost.css -->
<div class="rc panel">
<div class="rc-h"><span class="muted">Credits used</span><span class="rc-st tag"><span class="dot"></span><span class="rc-stt">Idle</span></span></div>
<div class="rc-big"><span class="rc-n num">0</span><span class="muted"> / 2,000</span></div>
<div class="rc-track"><div class="rc-fill"></div><div class="rc-cap" data-tip="The agent pauses here"></div></div>
<div class="rc-f">
<label class="rc-cap-t"><button class="toggle" role="switch" aria-checked="true"></button><span>Pause at 90%</span></label>
<button class="pill primary sm rc-go">Start run</button>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
used | number | Credits used so far. |
budget | number | The whole budget, like 2000. |
capAt | number | Where the agent pauses, as a percentage of the budget. Defaults to 90. |
capOn | boolean | Whether the cap is on. Leave it out to let the switch change it. |
status | idle | running | stopped | paused | spent | running is blue, paused amber, spent red. |
statusLabel | string | Words in the status tag. Defaults by status. |
rows | RunCostRow[] | The breakdown under the bar; each row has a label and a value. |
actionLabel | string | Words on the button. Defaults by status. |
title | string | Defaults to "Credits used". |
bare | boolean | Sits flat in a chat thread (the default). Set false to give it a card of its own. |
onAction / action | callback | Called by the button. |
onCapChange / capChange | callback | Fires when the cap switch changes. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). In
Blueprint the bar, the tag and the toggle are squared off; in Soft they are rounded. The fill takes
the accent mark while running and the warning mark once paused at the cap, and the status tag tints
to match its state, all from the tokens.