MVP / agentic
thinking steps
A visible list of agent work with one shared state, elapsed time, and optional detail text per step.
Specimen
A visible list of agent work with one shared state, elapsed time, and optional detail text per step. Copy Preview, Code, or Install from the tabs. The raw file and standalone fixture remain below.
Preview
Drafting the public channel summary from the latest commits…
Code
<style>
.au-thinking-steps {
border-top: 1px solid var(--au-border-color);
display: grid;
}
.au-thinking-step {
align-items: center;
border-bottom: 1px solid var(--au-border-color);
display: grid;
gap: 9px;
grid-template-columns: 8px minmax(0, 1fr) auto;
min-height: 42px;
padding: 9px 0;
}
.au-thinking-step__dot {
background: var(--au-fg-subtle);
border-radius: 50%;
height: 6px;
width: 6px;
}
.au-thinking-step__label {
color: var(--au-fg-muted);
font-size: 12px;
}
.au-thinking-step__time {
color: var(--au-fg-subtle);
font: 10px/1.3 var(--au-font-mono);
}
.au-thinking-step__detail {
background: var(--au-surface-muted);
border: 1px solid var(--au-border-color);
border-radius: var(--au-radius-md);
color: var(--au-fg-muted);
font-size: 13px;
font-style: italic;
grid-column: 2 / -1;
line-height: 1.5;
margin: 0;
padding: 10px 12px;
}
.au-thinking-step[data-au-state="running"] .au-thinking-step__dot {
background: var(--au-action);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-action) 18%, transparent);
}
.au-thinking-step[data-au-state="success"] .au-thinking-step__dot {
background: var(--au-success);
}
.au-thinking-step[data-au-state="error"] .au-thinking-step__dot {
background: var(--au-danger);
}
.au-thinking-step[data-au-state="cancelled"] .au-thinking-step__dot {
background: var(--au-warning);
}
</style>
<div class="au-thinking-steps" aria-label="Agent steps">
<div class="au-thinking-step" data-au-state="success">
<span class="au-thinking-step__dot" aria-hidden="true"></span>
<span class="au-thinking-step__label">Read the repository</span>
<time class="au-thinking-step__time">0.4s</time>
</div>
<div class="au-thinking-step" data-au-state="running">
<span class="au-thinking-step__dot" aria-hidden="true"></span>
<span class="au-thinking-step__label">Prepare release notes</span>
<time class="au-thinking-step__time">running</time>
<p class="au-thinking-step__detail">Drafting the public channel summary from the latest commits…</p>
</div>
</div>Install
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/thinking-steps/thinking-steps.css">Component contract
- Dependencies
tokens.css,thinking-steps.css.- States
- Each step supports `idle`, `running`, `success`, and `error`. Cancellation is represented by the host's step label and state policy.
- CSS variables
- No component-specific variables. Status colors come from the semantic token layer.
- Events
- Native form, focus, and click events. No custom event or runtime is required.
- No JavaScript
- Pre-rendered steps, labels, elapsed times, and detail text remain readable without JavaScript.
- Host boundary
- The host owns step order, state transitions, elapsed time, retry behavior, and whether internal details should be shown.
Accessibility and security
Accessibility: Give the group an accessible label and expose elapsed time as text. The state dot is supporting information only. Security: Step labels, elapsed time, and optional detail text are untrusted host data. Escape them and avoid presenting a failed step as successful through color alone.
Source files
The page is documentation, not a package boundary. Copy the raw files and edit them in your application.