Components › Agent Activity › Collapsible Agent Steps
AG03 · Activity

Collapsible Agent Steps

Purpose Condenses long agent reasoning chains into expandable summaries. Prevents overwhelming walls of text while preserving transparency.
Use when An agent produces verbose reasoning, chain-of-thought output, or intermediate steps that are important for accountability but not required for the user's immediate goal.
Do not use As a way to hide required information. If a piece of reasoning is necessary for the user to evaluate the output, it must be visible by default — not collapsed.
Failure mode prevented Long agent reasoning dumps overwhelm the user and bury the actual result. The result becomes harder to find. Auditability suffers because nobody reads walls of text.
Example Dark Academia
Dark Academia
The Atelier
Neon Tide
The Archive
Candlelight
The Conservatory
  1. 01

    Parsed task as a comparative error analysis across two pipeline connectors.

  2. 02

    Queried Salesforce error logs for the past 30 days. Retrieved 127 records matching "pipeline error".

  3. 03

    Queried Workday error logs for the same period. Retrieved 84 records. Both datasets indexed.

Overview
steps-collapsed-default — reasoning hidden by default, expandable on demandsteps-expanded-default — reasoning visible by default, collapsible to reduce noisesteps-summary-only — shows a one-line summary; full reasoning available in a modal or drawer
Design rule

The collapsed state must show enough information to help the user decide whether to expand — the step count and elapsed time are the minimum. "Agent reasoning" alone is not sufficient.

Theming API

Override these CSS custom properties to apply your own visual treatment without touching the component's behavioral contracts.

Shared semantic tokens

Token Controls
--rad-surface-card Component wrapper background
--rad-border-subtle Card and divider borders
--rad-color-text-primary Toggle label text
--rad-color-text-secondary Step body text
--rad-color-text-meta Elapsed time label
--rad-color-approve Focus ring
--rad-radius-card Card border radius

Component-scoped tokens

Token Controls
--rad-steps-toggle-bg Collapsed toggle background
--rad-steps-toggle-hover-bg Toggle hover state
--rad-steps-toggle-border Toggle and body border
--rad-steps-body-bg Expanded body background
--rad-steps-num-color Step number color
--rad-steps-step-border Between-step divider
--rad-steps-icon-color Expand/collapse arrow

"*Transparency should be available on demand — not forced on everyone, not hidden from anyone.*"

← Previous Tool Execution Log Next → Process vs Result Layout

Intellectual Property

RAD is the original work of Jackie Curry. All rights reserved. No portion may be reproduced, adapted, or incorporated into any product or system without express written permission.

Permitted: citation in academic or editorial contexts with full attribution.

Licensing

© 2025 Jackie Curry. All rights reserved. Publication date: 2025.

For licensing inquiries, connect on LinkedIn →