An agent run isn't a progress bar — it's a rail of independent decisions, each one reporting its own status as it lands. AgentTimeline renders that rail as an <ol> of AgentSteps, and every piece of motion in it is keyed off one prop: status.

Each AgentStep is a ring, a connector, and a body. The ring shows the step's current status. The connector below it fills as that status resolves, drawing the eye down to whatever's next. The body is optional — only steps with children get a chevron and something to expand.

last is the only structural prop — it just hides the connector on the final step, so the rail doesn't dangle a line into nothing.

The connector is a motion.span inside an overflow-hidden track, scaled from an origin-top. scaleY maps directly off status: 0 while pending, 0.5 while running — a half-fill that reads as "in flight" — and 1 once the step lands on success or error. Every transition rides the same spring: stiffness: 320, damping: 32, mass: 0.9.

A connector that grows by animating height has to re-run layout on every tick — the browser recalculates where every element below it sits, every frame. scaleY on a fixed-height track is a compositor transform: the browser scales an already-painted layer with no layout or paint work at all. The track's own height never changes; only the fill inside it stretches from a pinned top edge.

<span className="relative my-1 w-px flex-1 overflow-hidden rounded bg-border">
  <motion.span className="absolute inset-0 origin-top ..." /> {/* scaleY, not height */}
</span>

The ring's icon swap — dot → spinner → check — is a plain conditional render, not a cross-fade transition; only the connector and the collapsible body get the spring treatment. The running ring also grows a motion-reduce-gated animate-ping halo, layered absolutely over the same box so it never disturbs the ring's own layout.

Steps with children get a chevron and an AnimatePresence-wrapped panel. Opening one is the same spring as the connector — height: "auto" and opacity animating together, so the panel never overshoots into visible overflow the way a plain duration tween would.

height: "auto" is the one place this component reaches for a layout animation instead of a transform — Motion measures the panel's natural height and interpolates a real pixel value under the hood, which is why the wrapper needs overflow-hidden to hide the in-between states. It's the right trade-off here: the panel's content is arbitrary (reasoning text, tool output), so there's no fixed size to fake with a transform, and it only happens on a deliberate click, not every frame of a running step.

The chevron is unrelated motion living on the same button — a plain rotate-90 toggle driven by open, with its own transition-transform, so it never has to wait on the spring to know which way it's pointing.

<ChevronIcon
  className={`transition-transform ${open ? "rotate-90" : ""}`}
/>

The title pulses only while status === "running" — motion-safe:animate-pulse scoped to that one class, so a step that's already resolved sits perfectly still. Nothing here polls or ticks on an interval; every step is a pure function of the status its caller passes in, so the whole timeline is exactly as busy as the run actually is.

className={`... ${status === "running" ? "text-muted-foreground motion-safe:animate-pulse" : ""}`}

A full run, advancing on its own — watch the connectors spring-fill as each step lands and the running step's body morph open.

One prop drives all of it: status in, a filled connector and a settled ring out. That's the whole timeline — a rail that never has to be told how to move, only what happened.