Components › Transparency & Disclosure › Operational Transparency
TD06 · Transparency

Operational Transparency

Developer reference: Streaming Text · formerly AI01

Purpose Surfaces each phase of a multi-step AI operation as it happens — a collapsible progress list that keeps users oriented without demanding attention. Steps resolve from running → done with a check mark, and the whole list collapses to a single summary row.
Use when An AI operation takes more than 2–3 seconds, or involves named phases the user would recognize (parsing, analyzing, validating, generating). Use when the steps themselves are meaningful — not just filler.
Do not use For single-step or near-instant responses. For streaming raw token output — use a text output component. Do not fabricate step names that don't correspond to real operations.
Failure mode prevented Users left staring at a generic spinner with no sense of what the AI is doing, how far along it is, or how to stop it.
Example Dark Academia
Dark Academia
The Atelier
Neon Tide
The Archive
Candlelight
The Conservatory
Identifying Snaps
  • Working on your request…
  • Parsing pipeline…
  • Identifying Snaps
Overview
Design rule

Show the user what the system is doing, not just that it's busy. Each step name should reflect a real operation. The list must be collapsible — users who trust the process shouldn't be forced to watch it. The stop control is always reachable, and completion is always acknowledged.

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 Card background
--rad-border-subtle Card border
--rad-color-approve Cursor color, generating status text
--rad-color-reject Stop button background
--rad-color-text-primary Output text
--rad-color-text-meta Token count, default control button text
--rad-color-focus Focus ring color
--rad-radius-card Card border radius

Component-scoped tokens

Token Controls
--rad-stream-controls-divider Border above controls row
--rad-stream-btn-border Default control button border
--rad-stream-btn-hover-bg Default control button hover background
--rad-stream-stop-hover-bg Stop button hover background

"*This is what you look like from the outside, token by token. Render it faithfully.*"

← Previous Environmental Impact Next → AI Loading States

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 →