2 variants

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.

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. */

173 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Live checklist

The run as it happens rather than the record of it. A compact checklist that ticks itself off, with a count and a bar that move with it.

Fix the seat discount bug

1 of 5

Read the issue and the failing test, done
Find where the discount is applied, in progress
Fix the rounding in the seat total, not started
Run the test suite, not started
Open a pull request, not started

usage.tsx

import { AgentChecklist } from "@/components/registry/agent-checklist";

export function Run({ steps }) {
  return (
    <AgentChecklist
      title="Fix the seat discount bug"
      steps={steps} // [{ id, label, status: "done" | "running" | "failed" | "pending" }]
    />
  );
}

"use client";

import { Check, X } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

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

export interface ChecklistStep {
  id: string;
  label: string;

99 more lines ship with an easeUI Pro license.

Buy a license

Install

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