ToolbarStat
Small read-only figures for a session: time, context used and subagents. Pick ToolbarStat for any other figure; the three others format their value and switch tone on their own.
- ToolbarStat
- SessionClock
- ContextStat
- SubagentStat
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ToolbarStat
Session time: 47:12Ran for: 3:01:01Context: 48.2K · 24%Context: 183.4K · 92%Subagents: 3 · 1 runningSubagents: 0Cost: $0.42
Dark theme, ToolbarStat
Session time: 47:12Ran for: 3:01:01Context: 48.2K · 24%Context: 183.4K · 92%Subagents: 3 · 1 runningSubagents: 0Cost: $0.42
High contrast theme, ToolbarStat
Session time: 47:12Ran for: 3:01:01Context: 48.2K · 24%Context: 183.4K · 92%Subagents: 3 · 1 runningSubagents: 0Cost: $0.42
UsageLink to the section Usage
import { ToolbarStat, SessionClock, ContextStat, SubagentStat } from '@skribly/ui/agents'<SessionClock label={t('time')} since={session.startedAt} />
<ContextStat label={t('context')} tokens={48210} window={200000} />
<SubagentStat label={t('subagents')} count={3} running={1} runningLabel={(n) => t('running', { n })} />
<ToolbarStat label={t('cost')} value="$0.42" icon={<Coins />} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Each figure reads its label before the value, such as "Context: 48K · 24%".
- The clock is a timer, which screen readers do not announce on every tick.
- Near the limit ContextStat switches to a warning icon as well as a warning tint, and the percentage says the same; SubagentStat says how many run in words.
- Figures are text and take no focus.
This demo runs through axe in all three themes on every test run. See what the tests check.