Components › Agent Activity › Agent Activity Timeline
AG01 · Activity

Agent Activity Timeline

Purpose Displays the chronological sequence of actions an AI agent is performing. Makes multi-step agent execution legible without overwhelming detail.
Use when An agent is running a task that involves more than one discrete action — searching, reading, writing, calling APIs, making decisions. The timeline shows the sequence in real time.
Do not use For single-step AI responses where no meaningful sequence of actions exists. A disclosure alert (TD01) is sufficient for simple AI actions.
Failure mode prevented Users watch a loading spinner while an agent executes dozens of operations with no visibility into what it is doing, where it is, or whether it is stuck.
Example Dark Academia
Dark Academia
The Atelier
Neon Tide
The Archive
Candlelight
The Conservatory
Agent Running Analyze Q1 pipeline errors and draft incident report 14s
  1. Search error logs 127 records retrieved · 1.2s
  2. Identify top error types 3 categories found · 0.4s
  3. Notify Slack #incidents 403 Forbidden — skipped, continuing
  4. Draft incident report… In progress
  5. Format and deliver output Queued
Overview
timeline-live — actively running, with animated current steptimeline-complete — all steps finished, final status showntimeline-error — one step failed, blocked execution shown in red
Design rule

The timeline must reflect real execution state — not a marketing illusion. If the agent is stuck, the timeline must show it is stuck. A fake progress animation that loops is an accessibility and trust violation.

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 card background
--rad-border-subtle Card border
--rad-color-text-primary Step name text
--rad-color-text-secondary Task description text
--rad-color-text-meta Step metadata and pending labels
--rad-color-approve Focus ring
--rad-radius-card Card border radius

Component-scoped tokens

Token Controls
--rad-timeline-line-color Vertical connector line
--rad-timeline-done-dot Completed step dot fill
--rad-timeline-active-dot Active step dot fill
--rad-timeline-pending-dot Queued step dot fill
--rad-timeline-active-meta Active step metadata color

"*An agent that acts invisibly asks for trust it has not earned. Show the work.*"

← Previous Task Builder Next → Tool Execution Log

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 →