AI Agent Steps Timeline — HTML CSS JS Snippet

Agentic AI products — coding assistants, research agents, workflow copilots — do not answer in one shot. They plan, call tools, read results, and iterate, often for tens of seconds. Users tolerate that wait only if they can *see* the work happening: which tool is running, what it was asked, what came back. That transparency layer is the agent trace UI, and every serious agent product (Claude Code, ChatGPT agent mode, Perplexity Pro search, Devin) has converged on the same pattern this snippet implements: a vertical timeline of steps with live running states, tool-name badges, expandable input/result payloads, per-step durations, and a final highlighted answer card.

The timeline structure: connector lines without an extra element

Each step is a flex row: a 28px icon tile on the left and the step content on the right. The vertical connector between steps is not a separate element — it is a ::before pseudo-element on each .step, absolutely positioned at left: 13px (the horizontal centre of the icon tile) running from top: 30px (just below the icon) to bottom: -4px (into the next step's padding). The last step suppresses its line with :last-child::before { display: none }. Because the line belongs to the step itself, steps can be appended dynamically and the rail grows automatically — no total-height calculation, no SVG.

Step lifecycle: running → done, driven by scheduled timeouts

The trace is modelled as an array of step objects — icon, display name, tool name, duration, input payload, result payload. The run() function walks this array accumulating an offset: at each step's start time it appends the DOM node with a .running class (indigo border, spinning arc icon via a rotate(360deg) keyframe), and at start-plus-duration it swaps to .done (green check icon, duration stamp). In a real product these two moments correspond exactly to the tool_use and tool_result events your agent loop emits — the demo's setTimeout calls are placeholders for event-stream handlers, which is why the component structure transfers directly to production.

Expandable payloads with the CSS grid-rows trick

Clicking a step row toggles its detail panel — the tool's input JSON and result. The expand/collapse animation uses the modern grid-template-rows: 0fr → 1fr technique: the detail wrapper is a single-track grid whose row animates between zero and full content height, with an inner overflow: hidden element doing the clipping. Unlike the old max-height hack, this animates to the *true* content height regardless of payload size, so short and long JSON blobs both animate smoothly. The chevron rotates 90° in sync via a transform transition. Input payloads render in slate mono text; results render in green (.detail-box.result pre), the universal trace-viewer convention for distinguishing what went in from what came out.

Status header, elapsed clock, and the answer reveal

The header carries a pulsing indigo dot (scale + opacity keyframes) and a live status line that mirrors the current step's name — the equivalent of the "thinking…" ticker in commercial agents. A 100ms setInterval updates the elapsed readout from performance.now() deltas, formatted with font-variant-numeric: tabular-nums so digits don't jitter. When the final step completes, the dot turns green and stops pulsing, the status summarises the run ("Done — 4 steps, 2 tools"), and the answer card — a gradient-tinted, indigo-bordered panel — fades and lifts in with an opacity/translateY transition. Separating *trace* from *answer* visually matters: the trace is evidence, the answer is the deliverable, and users need to find the latter instantly on return visits.

Every timer handle is collected into an array and cleared at the top of run(), so the Replay button can restart the trace mid-flight without orphaned timeouts corrupting the new run — the same discipline you need when a user cancels a real agent run and starts another.