Session state badgePro
The six agent session states as one badge: pending, working, needs you, error, done and stale.
On this page
ProThe six session states, each a glyph and a word.
Installation
Usage
import { SessionStateBadge } from "@/components/ui/chatcn/pro/session-state-badge"
<SessionStateBadge state={session.state} />Blue is working, amber needs you, green finished, red failed, gray waits or went quiet. Every state also has its own glyph and word, so it reads in mono and for people who do not see the hue. stale is for an agent that is still running but has gone quiet: pair it with agent-heartbeat.
Examples
States
ProSmall and plain, a custom label and a live change.
Props
| Prop | Type | Notes |
|---|---|---|
state | "pending" | "active" | "awaiting-input" | "error" | "complete" | "stale" | The session state |
label | ReactNode | Replaces the word: "Needs approval" |
variant | "badge" | "plain" | plain for rows that have a surface |
size | "sm" | "md" | Default md |
announce | boolean | Polite announcement of changes. Default true |
Accessibility
- The word is a polite live region, so a change is heard once. Turn
announceoff in lists where many badges change together. - The glyph is decorative; the word carries the state.
Motion
The glyph crossfades for 150 ms on a real change, never on first paint. Reduced motion swaps it.