Agent status card

Use it for

• AI and automation products that hand work to agents
• Hero sections that show a queue being worked through
• Approval flows where a person signs off on each step

Avoid

• Real status feeds, where timing comes from the server and not a script
• Long lists, where many moving chips compete for attention

How it works

One active index and one phase (working, input, done, rest) drive every card: cards before the index are done, the active card shows the phase and later cards wait. An effect schedules the next phase with a single timeout, so the loop is a handful of state changes rather than a frame loop. The working bar is a CSS animation timed to the same duration, the ask pulses with a scaling ring and the check draws with stroke-dashoffset.

Accessibility

Every status is real text and the Approve button is a real button named after its ticket, so keyboard and screen reader users can approve before the auto approve. The loop pauses off screen. Reduced motion skips the working phase and the pulse: each ticket waits for approval with no timers.