Status legend
The key to a monitoring view: which colour means what, and how many agents are in each state right now. The inline variant labels a chart or grid; the pill variant turns each status into a tappable filter.
Included in the single kansho full pack. Components are not offered as separate installs.
Inline
Dot + label + live count — sits above a grid or chartPills as filters
aria-pressed toggles; click the active pill again to clearFiltering by: all
Included components
This page is the canonical destination for these components. All ship in the single Kansho pack.
Status dot
components/agent/status-dot.tsxComponent documentation
Status dot
components/agent/status-dot.tsxPurpose
Renders a tiny shared-status colour dot with an optional running pulse.
Appropriate use
Use beside visible status text or supply an accessible label when the dot stands alone.
Example
components/agent/status-dot.tsx has a representative live example in the "Inline" section on /components/status-legend.
States
Supports every shared status, optional pulse meaningful only for running, and caller-supplied size classes.
API and props
StatusDot accepts status, pulse, size, aria-label, and className.
Dependencies
Direct imports are React, shared status types/meta, and cn.
Accessibility
With aria-label it becomes a named image; without one it is decorative and must sit beside visible status text.
Limitations
Colour and pulse cannot carry meaning alone; motion-safe prevents the halo animation when reduced motion is requested.
Source
Source: components/agent/status-dot.tsx.
Full pack
components/agent/status-dot.tsx is documented at /components/status-legend and installs only through the single Kansho full pack; no individual component install is offered.
Status Legend
components/monitor/status-legend.tsxPurpose
Explains shared status meanings and optionally turns them into count filters.
Appropriate use
Use beside status-dense operational views when people need a textual key or a compact filter bar.
Example
components/monitor/status-legend.tsx has a representative live example in the "Pills as filters" section on /components/status-legend.
States
Variants are inline and pills; entries use the six shared statuses, optional label overrides, and optional counts; pills are read-only without onSelect and may otherwise have one active status or all.
API and props
StatusLegend accepts entries, variant, active, onSelect, and className.
Dependencies
Direct imports are React, StatusDot, shared status metadata and types, and cn.
Accessibility
Labels and counts repeat the colour meaning; interactive pills are native buttons with aria-pressed state.
Limitations
Filtering is controlled by the host; without onSelect the pill treatment is display-only and does not change data.
Source
Source: components/monitor/status-legend.tsx.
Full pack
components/monitor/status-legend.tsx is documented at /components/status-legend and installs only through the single Kansho full pack; no individual component install is offered.