Agent Steps - Canvas Design System

When to Use

Use when: A multi-step AI run has produced something and the person should be able to see how it got there: Prepare my workshop's working pane, a generated agenda's "how this was made" panel. Say what each step found, in numbers where you have them ("5 open commitments become the candidate priorities").

Don't use when: The person is waiting on live progress with nothing else to look at; that is Agent Status in stages mode. Verdicts against a list of rules are Agent Check.

Variants

A run with a summary row

Each step is done, fail, now or todo, with a detail line. fail is a step whose own check failed and that the run went on to fix, so it is amber, not an error. A step can swap its state's glyph with icon, as the revision does here. The summary row closes the list.

Done: Read the brief and Q3 Roadmap Offsite

5 open commitments become the candidate priorities.
Done: Built a first agenda from 7 library activities
Needs another pass: Round 1: 2 of 7 checks failed

The decision had 8 minutes. Choosing 3 of 12 with 12 people needs about 24.
Done: Revised

Swapped Crazy 8s for 1-2-4-All and gave the decision 30 minutes.
In progress: Checking again
Not started: Write the pre-read and your notes

Rounds2 of 3

<?= ws_agent_steps([
    ['label' => 'Read the brief and Q3 Roadmap Offsite', 'state' => 'done',
     'detail' => '5 open commitments become the candidate priorities.'],
    ['label' => 'Round 1: 2 of 7 checks failed', 'state' => 'fail', 'detail' => '...'],
    ['label' => 'Revised', 'state' => 'done', 'icon' => 'auto_fix_high', 'detail' => '...'],
    ['label' => 'Checking again', 'state' => 'now'],
    ['label' => 'Write the pre-read and your notes', 'state' => 'todo'],
], ['summary' => ['label' => 'Rounds', 'value' => '2 of 3']]) ?>

States

Step	Looks	Says
`done`	A tick in a stone circle	"Done:"
`fail`	An exclamation in an amber circle	"Needs another pass:"
`now`	A turning ring in a filled red circle; still under reduced motion	"In progress:", and `aria-current="step"`
`todo`	An empty circle, the title muted	"Not started:"

Options

Option	Type	Default	Purpose
`$steps`	array		Each: `label`, `state` (`done` \| `fail` \| `now` \| `todo`), `detail`, `icon`
`label`	string	`'What Workshopr did'`	The list's accessible name
`summary`	array	`null`	A row under the list: `label` and `value`
`id` / `class` / `attrs`	string / string / array		Element id, classes and attributes

Accessibility

Concern	Behavior
Structure	An ordered list named by `label`, so the run reads in order and a screen reader says how many steps there are.
State in words	Each step starts with visually hidden words for its state ("Done:", "Needs another pass:", "In progress:", "Not started:"), and each state has its own glyph shape, so nothing rests on colour. The step in progress carries `aria-current="step"`.
Glyphs	`aria-hidden`; the words carry the meaning. The turning ring stops under reduced motion.
Not live	This is a record, not a live region. For progress a screen reader should hear as it happens, use Agent Status.

Tokens

Token	Used for
`--brand`	The step in progress
`--color-warning` / `--color-warning-surface` / `--color-warning-surface-ink`	A step that needs another pass
`--gray-100` / `--gray-200` / `--gray-300`	Done circles, the connecting line, still-to-come circles
`--card-bg` / `--radius-lg`	The summary row

CSS Classes

Class	Purpose
`.ws-agent-steps`	Root
`.ws-agent-steps__list`	The ordered list
`.ws-agent-steps__step`	One step, `--done` / `--fail` / `--now` / `--todo`; draws the line to the next
`.ws-agent-steps__icon` / `__glyph`	The state circle and its glyph
`.ws-agent-steps__title` / `__detail`	A step's title and detail
`.ws-agent-steps__summary` / `__summary-value`	The summary row

Files

File	Purpose
`includes/components/helpers.php`	`ws_agent_steps()` helper
`includes/components/agent-steps.php`	Template
`includes/components/components.css`	Styles, in the agent components section