UI componentsCharts
Token Usage
Per-turn input/output token counts with running totals. Designed to answer "is this conversation blowing the budget?" without a calculator.
Preview
Loading token usage preview…
Installation
pnpm dlx agent-observability-ui@latest add token-usage-sectionnpx agent-observability-ui@latest add token-usage-sectionyarn dlx agent-observability-ui@latest add token-usage-sectionbunx --bun agent-observability-ui@latest add token-usage-sectionUsage
import { TokenUsageSection } from '@/components/token-usage-section'
;<TokenUsageSection />Props
| Prop | Type | Default | Description |
|---|---|---|---|
metrics | SessionMetrics | null | — | Override the metrics resolved from provider context. |
Latency Over Turns
User-perceived latency plotted turn-by-turn. Reveals drift, warm-up effects, and the one bad turn that tanks the average.
Chart Shared
Layout primitives for building additional charts that match the look of the built-in ones. Exports a ChartCard wrapper (title / subtitle / recharts container / legend row), a ChartTooltipShell for custom recharts tooltips, and a ChartLegendItem color-swatch row.