Skip to content
Uxelith
Sign in
Prov1.0.1AI & Agents

Plan Timeline

An AI agent's plan as it works through it: the current step pulses, a step waiting on you turns amber, finished steps tick and the line fills down to the next, so you see where it is at a glance.

Installs with Uxelith ProHow
Pricing
Licence
Pro
Packages
2
Updated
29 Oct 2026
Live

Installation

Usage

example.tsx
import { PlanTimeline } from "@/components/plan-timeline"

export function AgentPlan() {
  return (
    <PlanTimeline
      steps={[
        { id: "search", title: "Find places nearby", status: "done", meta: "1.4s · 5 results" },
        { id: "ask", title: "Ask before emailing", status: "waiting", meta: "needs you" },
        { id: "send", title: "Send the invite", status: "pending" },
      ]}
    />
  )
}

Props

PropTypeDefaultDescription
steps{ id: string; title: ReactNode; status: "pending" | "active" | "waiting" | "done" | "failed"; meta?: ReactNode }[]—The plan, in order.
...propsHTMLAttributes<HTMLOListElement>—Any ol attribute.

Accessibility

  • An ordered list; the current step carries aria-current="step".
  • Every status is spoken as text, not only shown as colour.
  • With prefers-reduced-motion the pulse and the fill don't move.

Changelog

  1. v1.0.1Latest

    Fix: the "needs you" step text now meets 4.5:1 contrast in light and dark themes.

More in AI & Agents

All 4 in AI & Agents
  • AI & AgentsPro

    Approval Card

    The moment an AI agent asks before acting: what it wants to do, why, and exactly what will happen. Approve is held for a beat so it's never an accident; Deny is one press. Then it folds into a one-line record.

  • AI & AgentsPro

    Streaming Answer

    An AI answer that arrives like writing: tokens come in bursts but words appear at a steady pace, each sharpening into place behind a caret, after a Thinking shimmer. Light markdown; sentences announced to screen readers.

  • AI & AgentsPro

    Tool Call

    One step an AI agent took: the tool, what it sent and what came back. Queued, running with a light sweeping its edge, done with a self-drawing tick and the time taken, or failed. Opens to show arguments and the result.