Agents and live work

Which component to use for a conversation with an agent, or work that is running right now. Find the job, take the component, and read the “not when” before you commit: it names the thing people reach for by mistake, and what to use instead.

At a glance

Job	Use	Not when	Instead	Because
Show an agent's tool call as a chip — running, then what it found	`ToolChip`	The call writes a change a person has to answer	`ConfirmCard`	Nothing should be written until the yes; a chip reports a call, it does not ask.
		The thing is a status label with nothing to open	`Tag`	A tag is a word for a state; a chip is a call with arguments and a result.
		The work is a long run with a count of parts, on a row of a list	`LiveProgress`	Live progress shows where the work is and how far it has got.
Ask a person to confirm or approve a change an agent proposes, inline	`ConfirmCard`	The decision interrupts the whole page and has nothing to do with a conversation	`Dialog`	A dialog is modal and goes away when answered; a confirm card stays in the thread as the record.
		The person only needs to know something, not answer it	`Alert`	An alert reports; a confirm card asks and blocks the write until answered.
		The tool call has already run	`ToolChip`	A chip reports what a call did; a confirm card is for a change not yet made.
Show a person asking and a system answering, as it happens	`Conversation`	The record is an interview or meeting that nobody is adding to, with several speakers	`Transcript`	A transcript is worked through and marked as evidence; a conversation is two-sided and live.
		People are leaving notes about a record	`Comment`	A comment is one authored note about something, with a time that matters.
		The history is who did what to a record, in order	`Feed`	A feed groups each person's run of actions; it is not an exchange.
Show that work is happening right now, where the work is	`Live`	One row's progress with a count — `§2.5 ▬▬▬▭ 4/6`	`LiveProgress`	Live progress adds where, a bar and a count to the pulse, and becomes a tag when it finishes.
		Many items moving between waiting, working and done	`Lanes`	Lanes show the whole run by state; a pulse marks one place.
		A short wait with nothing running in the background	`Spinner`	A spinner is a control waiting; a pulse is work in progress somewhere the reader can look.
		A state that has settled — done, failed	`Tag`	A pulse means moving; a finished thing is a status word.
Show one row's live work — where it is, how far, and how it ended	`LiveProgress`	A single task with a percentage and no list around it	`Progress`	A progress bar is the bare measure; live progress is a row's whole live state.
		The whole run at a glance, by state	`Lanes`	Lanes show every item in its state; live progress sits on one row.
		A standalone task list the system is working through, not a row in a table	`ProgressList`	A progress list names every task with its mark and counts them; live progress is one row's summary.
		A level that is simply true	`Meter`	A meter is not work advancing.
Show many items of a run moving between waiting, working and done	`Lanes`	One sequence of named steps	`Stepper`	A stepper is one path; lanes are many items sorted by state.
		One item's progress in a row	`LiveProgress`	A row carries its own live state; lanes are the overview.
		Only the totals matter — how many done, failed and still to go	`SegmentedProgress`	A segmented bar is the count at a glance; lanes name every item.
		What happened, in order, after the run	`Timeline`	Lanes are now; a timeline is then.

`ToolChip`

Show an agent's tool call as a chip — running, then what it found.

Use when

Each tool an agent calls inside a conversation: a pulse and what it is doing while it runs, the result once it lands.
Refused and failed calls say so in a tag, in words; the arguments are a press away for the one reader who wants them.

Not when

The call writes a change a person has to answer → ConfirmCard. Nothing should be written until the yes; a chip reports a call, it does not ask.
The thing is a status label with nothing to open → Tag. A tag is a word for a state; a chip is a call with arguments and a result.
The work is a long run with a count of parts, on a row of a list → LiveProgress. Live progress shows where the work is and how far it has got.

Confused with ConfirmCard, Tag, LiveProgress, LiveReact ToolChipHooks toolWordsClasses .tool-chip

See it on the demo page

`ConfirmCard`

Ask a person to confirm or approve a change an agent proposes, inline.

Use when

An agent wants to write something: the card says the change, the values it will write, and who answers (tier). Nothing is written until the yes.
A change that costs money: spend says so in a tag before the button, and the yes becomes Approve Spend.
Once answered it stays as a record — the buttons go and the answer takes their place.

Not when

The decision interrupts the whole page and has nothing to do with a conversation → Dialog. A dialog is modal and goes away when answered; a confirm card stays in the thread as the record.
The person only needs to know something, not answer it → Alert. An alert reports; a confirm card asks and blocks the write until answered.
The tool call has already run → ToolChip. A chip reports what a call did; a confirm card is for a change not yet made.

Confused with Dialog, ToolChip, AlertReact ConfirmCardClasses .confirm-card

See it on the demo page

`Conversation`

Show a person asking and a system answering, as it happens.

Use when

A chat with an agent or assistant: sent turns are bubbles, received turns are prose at full measure. New turns are announced.
TurnPending while waiting for the reply — it carries the word, because an animation is not an announcement.
Tool calls and confirmations sit inside received turns as ToolChip and ConfirmCard.

Not when

The record is an interview or meeting that nobody is adding to, with several speakers → Transcript. A transcript is worked through and marked as evidence; a conversation is two-sided and live.
People are leaving notes about a record → Comment. A comment is one authored note about something, with a time that matters.
The history is who did what to a record, in order → Feed. A feed groups each person's run of actions; it is not an exchange.

Confused with Transcript, Comment, Feed, ToolChipReact Conversation Turn TurnPendingClasses .conversation .turn

See it on the demo page

`Live`

Show that work is happening right now, where the work is.

Use when

LiveIndicator — a pulse with its words in a polite live region, "Agents working", at the head of a page or panel.
LiveMark on a section heading, a Contents entry or a row; LiveSection around a part of a document being written.
Pulse only beside words that already say the same thing — it is decorative and hidden from assistive tech.

Not when

One row's progress with a count — §2.5 ▬▬▬▭ 4/6 → LiveProgress. Live progress adds where, a bar and a count to the pulse, and becomes a tag when it finishes.
Many items moving between waiting, working and done → Lanes. Lanes show the whole run by state; a pulse marks one place.
A short wait with nothing running in the background → Spinner. A spinner is a control waiting; a pulse is work in progress somewhere the reader can look.
A state that has settled — done, failed → Tag. A pulse means moving; a finished thing is a status word.

Confused with LiveProgress, Lanes, Spinner, TagReact Pulse LiveIndicator LiveMark LiveSectionHooks liveWhereClasses .live-pulse .live-indicator .live-mark .live-section

See it on the demo page

`LiveProgress`

Show one row's live work — where it is, how far, and how it ended.

Use when

Under a title in a list or a table row while a run works on that item: pulse, place, bar and count.
Queued, done and failed in the same slot, so a row does not change shape as the work moves.

Not when

A single task with a percentage and no list around it → Progress. A progress bar is the bare measure; live progress is a row's whole live state.
The whole run at a glance, by state → Lanes. Lanes show every item in its state; live progress sits on one row.
A standalone task list the system is working through, not a row in a table → ProgressList. A progress list names every task with its mark and counts them; live progress is one row's summary.
A level that is simply true → Meter. A meter is not work advancing.

Confused with Progress, Lanes, Live, ToolChip, ProgressListReact LiveProgressClasses .live-progress

See it on the demo page

`Lanes`

Show many items of a run moving between waiting, working and done.

Use when

An agent run seen by a reader: each agent a pill that slides from Waiting to Working to Done; AGENT_LANES are the defaults.
Every lane says its count; arrivals in an announce lane are said once in a polite live region.

Not when

One sequence of named steps → Stepper. A stepper is one path; lanes are many items sorted by state.
One item's progress in a row → LiveProgress. A row carries its own live state; lanes are the overview.
Only the totals matter — how many done, failed and still to go → SegmentedProgress. A segmented bar is the count at a glance; lanes name every item.
What happened, in order, after the run → Timeline. Lanes are now; a timeline is then.

Confused with Stepper, LiveProgress, Live, Shelf, SegmentedProgress, ProgressListReact LanesHooks AGENT_LANESClasses .lanes .lane

See it on the demo page

Other guides: Screens · Overlays · Status and feedback · Navigation · Data · Input · Reading

Generated from the when.ts beside each component — the same data the Claude Code plugin reads.