Snippet
AI Agent Timeline
Vertical timeline showing AI tool calls flipping from running to done.
Last updated: October 2026
What this snippet does: Displays the sequence of steps an AI agent takes — search, read, edit, test — with live status indicators. Running steps pulse; completed steps turn green. Perfect for showing what an autonomous agent is doing.
🎬 Live Demo
Click Run Agent to see the states flip.
📝
How It Works
A vertical line runs down the container. Each step has a marker (icon) and a status class (running, done, error) that changes color and adds a pulse animation.
1
HTML
<div class="timeline">
<div class="tl-item running">
<div class="tl-marker">🔍</div>
<div class="tl-head">
<span class="tl-title">Search codebase</span>
<span class="tl-time">14:23:08</span>
</div>
<div class="tl-body">Querying for "auth"...</div>
</div>
</div>
2
Core CSS
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
content: ''; position: absolute; left: 11px;
top: 4px; bottom: 4px; width: 2px; background: #1e293b;
}
.tl-item.running .tl-marker {
background: #3b82f6;
animation: pulse-ring 1.4s infinite;
}
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.5); }
70% { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
}
3
JavaScript — Drive from Real Events
function updateStep(index, status) {
const item = container.children[index];
item.classList.remove('running', 'done', 'error');
item.classList.add(status);
}
// Stream from your agent
for await (const event of agentStream) {
updateStep(event.step, event.status);
}🎯 Use Cases
- Agent products — Cursor, Claude Code, Devin-style UIs
- CI/CD dashboards — Step-by-step build progress
- Workflow tools — Show multi-step automation
- Onboarding wizards — Sequential progress indicators
⚠️ Common Mistakes
- Blocking animation on data. Show running state immediately, update on stream events.
- No error state. Steps fail — color them red and let the user retry.
- Missing timestamps. Users want to know when each step fired.
- Too much detail. Keep step titles short. Move verbose info to a tooltip.