Agent Status
A live status pill for a running agent — its mark in a live ring, what it is doing now and for how long, opening in place to the latest steps and the controls to pause, stop, approve or retry.
The pill is a composition, so it follows your theme preset. Copy the source from the Code tab and drive it from your agent's events; the two runs here are simulated and nothing is pushed, fetched or opened.
What it's made of
| Part | Component |
|---|---|
| Live ring around the agent's mark | Progress, circular at xs — spinning while it works, closed when it ends |
| Waiting for you | Status, a pulsing dot on the ring |
| Step progress | Progress, one segment per step |
| Approve, Deny, Retry, Pause, Resume, Stop, Open run | Button, an Icon Button on a narrow stage |
| Switching runs in the preview | Segmented Control |
States
| State | The pill says | In the panel |
|---|---|---|
| Ready | Ready | The last run's steps, Open run |
| Working | The current step, with a count when it has one ("Running tests 8 of 12") and the elapsed time | Pause, Stop, Open run |
| Needs your approval | The request ("Needs your approval to run git push"), with Deny and Approve inline | Approve, Deny, Open run |
| Paused | Paused; the ring and the timer stop where they are | Resume, Stop, Open run |
| Done | Done in, then the outcome ("Done in 14s · 6 files changed") | Open run |
| Failed | The failure ("Fetch failed · 2 sources timed out"), with Retry inline | Retry, Open run |
| Stopped | Stopped after, then the time it ran | The step it stopped on reads Stopped by you |
A run that is done or stopped settles back to Ready after four seconds, and the panel keeps its steps. The timer leaves out time spent paused or failed, so it never jumps when the run carries on.
Write the current step in the present tense and the finished one in the past tense — "Running tests", then "Passed 12 of 12 tests" — so the words carry the status as well as the icon.
Motion
Every movement explains a change, and none plays when the pill first appears.
- A new step rolls in from just below; a count changes in place.
- The pill's width follows its label. Opening grows it into the panel on the panel curve, and the panel's content fades in a beat later.
- The ring spins while the agent works and freezes where it is when paused. A dot pulses on it while it waits for you. When the run ends the ring closes and the mark turns into a check, or a cross when it failed.
- New steps fade in at the bottom of the panel while the oldest folds away at the top; the step bar fills from the start.
With reduced motion every change is instant, and the ring and the dot stand still. All states, text and announcements stay.
Keyboard and screen readers
- The pill is a button that opens and closes the panel. Its name reads the agent, the current step and the elapsed time.
- Tab moves from the pill to the inline Deny and Approve, or Retry, when they show; with the panel open, through its controls. Escape closes the panel and returns focus to the pill, and so does a press outside it.
- Pause and Resume, and Approve and the Pause after it, are one button, so focus stays in place. A focused control that leaves with the state hands focus to the pill.
- Each new step and each outcome is announced once in a polite status region — never a count tick or the timer.
- Status is never colour alone: every state is in words, and the step bar has a value such as "4 of 6 steps finished".
On a narrow stage
Below 400px of width the inline actions and Open run become icon buttons with the same names, and the timer steps aside while the inline actions show. A long step label ends in an ellipsis in the pill and wraps in full in the panel.
On touch every control answers a 44px tap, the pill included, while the pill keeps its slim height: the tap area reaches past the drawn edge instead of making the pill taller. The panel floats over the page, so leave it room below the pill on a phone.