1 variant

Agent Timeline

The record of an agent run, with a status mark and a duration on every step, each one folding out to show its own detail.

4 steps queued, search, read, edit, verify
grep -rn "checkout" app/ → 3 matches
86 lines, a POST handler, seat validation, a Stripe session
Rewriting the success and cancel URLs, running3.1s
Run the type check, not started yet

3 of 5 steps · 5.5s total

usage.tsx

import { AgentTimeline } from "@/components/registry/agent-timeline";

export function RunLog() {
  return (
    <AgentTimeline
      steps={[
        { id: "plan", label: "Drafted a plan", status: "done", durationMs: 820 },
        { id: "edit", label: "Editing the route", status: "running", durationMs: 3100 },
        { id: "verify", label: "Run the type check", status: "pending" },
      ]}
    />
  );
}

"use client";

import { Check, ChevronRight, X } from "lucide-react";
import { useReducedMotion } from "motion/react";
import { type ReactNode, useState } from "react";
import { cn } from "@/lib/utils";

export type AgentStepStatus = "done" | "running" | "failed" | "pending";

export interface AgentStep {
  id: string;
  /** One line naming what the step did. */

189 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/agent-timeline

Props

AgentTimeline

stepsRequiredAgentStep[]

In the order they ran.

defaultOpenIdsstring[]Default []

Steps whose detail starts unfolded.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

AgentStep

idRequiredstring

Stable, since the open state is tracked by it.

labelRequiredstring

One line naming what the step did.

statusRequired"done" | "running" | "failed" | "pending"

Drives the mark and the text a screen reader hears.

durationMsnumber

Wall time. Printed to one decimal in tabular figures, so the column never rewraps.

detailReactNode

Folded away under the row. Without it the row has no disclosure at all.