Tracker
A strip of blocks, one per day or run, coloured by how it went, for nightly evals, uptime or a run history.
- Use it for
- How each day or run went, for uptime, nightly evals or a run history.
- Not for
- Counts that need a scale. Try DotBars.
Tracker preview
Loading example…
Installation
npm install @stackunseen/uiimport { Tracker } from '@stackunseen/ui';@stackunseen/ui/styles.cssUsage and props
Pass what your server recorded; a period with nothing recorded is unknown, never ok. Each block names its status in words, and every block is in a hidden table.
Supported inputs
This is the public signature used by this example. Open Code to see how the values and callbacks fit together.
label · segments: { label, status: ok | degraded | failed | unknown, detail? }[] · summary? · axis?: [start, end]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
- label · segments: { label, status: ok | degraded | failed | unknown, detail? }[] · summary? · axis?: [start, end]
- Keeps honest
- Pass what your server recorded; a period with nothing recorded is unknown, never ok. Each block names its status in words, and every block is in a hidden table.
- MCP
read_component "Tracker"on the docs endpoint
Keyboard and customization
Keyboard
Inert content; the hidden table is read in order.
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