Tool call

Tells you what the assistant did, one short line per step.

Examples

In a reply

Move $50 to Vacation fund.
Done: Moved $50 to Vacation fund

Working

Running: Finding transactions1 of 2

With the reason it failed

Failed: Move failedLow balance

Status

  • Running: Moving $50 to Vacation fund

    running

  • Done: Found 12 matching transactions

    done

  • Failed: Could not move moneyLow balance

    failed

Detail

  • Done: Split the bill three ways

    unsetdefault

  • Running: Splitting the billStep 2 of 3

    a string

Usage

When to use it
Use
A step the assistant ran between a request and its answer: a search, a transfer, a lookup.
Use
A list of steps or checks in order, one line each, such as the checks before a payment.
Use
A failure the person can act on, with the reason.
Not for
The state of a job in a list, such as a payment in your activity. Use Status.
Not for
The assistant's answer. Use Message.
Not for
A notice or banner. Use an alert.

Rules

7 rules
Must
Name the real step; never "Thinking". Because Thinking gives the person nothing to check or stop before money moves.
Must
Put the failure reason in detail. Because without it the person cannot tell whether to top up, retry or give up.
Must
Use present tense while running and past tense after. Because a done check beside Moving reads as a transfer still in flight.
Never
Wrap each step in a card with a title bar or chevron; keep the single line. Because a card per step pushes the assistant's answer below a stack of panels.
Must
Put steps that appear while waiting in a container with aria-live="polite". Because each row is role="status", but a live region added after load is not announced.
Should
Keep the label short with the key words first; it truncates to one line with no tooltip.
Should
Add a position such as "Step 2 of 3" in detail on a step that runs long.

Accessibility

4 checks
Each row is role status with a hidden state word (Running, Done, Failed) before the label.
A change of state is announced politely.
The spinner keeps turning under reduced motion; the marks swap at once.
Failed is told by the warning shape and the word, not color alone.

Edge cases

6 edge cases
Long label
Truncates with an ellipsis; the full text is not reachable.
Narrow container
The detail truncates first so the label stays whole; the mark stays 16px.
Right to left
The mark sits at the start and the detail at the end.
Reduced motion
The spinner keeps turning by design.
Empty label
Only the mark draws; do not render it.
Status swaps
The mark changes at once with no layout shift.

API

3 props
status
'running' | 'done' | 'failed' default required
label
string default required
detail
string

Tokens

10 tokens
--surface
#f6f5f2
--radius-field
12px
--text-sm
14px
--fg
#0f0f0d
--weight-medium
500
--danger-text
#b42323
--success-text
#17703a
--fg-2
#4a4943
--fg-3
#6b6a63
--dur-spin
900ms

Install

For your coding agent

GitHub

Please star me pookie

141

A new design system every week

Leave your email before you copy the prompt.