Agent Timeline

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type StepStatus = "pending" | "running" | "success" | "error";
7 
8export type AgentTimelineProps = React.HTMLAttributes<HTMLOListElement>;
9 
10const AgentTimeline = React.forwardRef<HTMLOListElement, AgentTimelineProps>(
11  ({ className, children, ...props }, ref) => (
12    <ol
13      ref={ref}
14      data-slot="agent-timeline"
15      className={`flex flex-col ${className ?? ""}`}
16      {...props}
17    >
18      {children}
19    </ol>
20  ),
21);
22AgentTimeline.displayName = "AgentTimeline";
23 
24export type AgentStepProps = Omit<
25  React.HTMLAttributes<HTMLLIElement>,
26  "title"
27> & {
28  status?: StepStatus;
29  title: React.ReactNode;
30  /** Optional sub-label (tool name, duration, …). */
31  meta?: React.ReactNode;
32  /** Collapsible body (reasoning text, tool I/O). */
33  children?: React.ReactNode;
34  defaultOpen?: boolean;
35  /** Hide the connector below this step (use on the last item). */
36  last?: boolean;
37};
38 
39const STATUS_RING: Record<StepStatus, string> = {
40  pending: "border-border bg-background text-muted-foreground",
41  running: "border-primary bg-primary/10 text-primary",
42  success: "border-primary bg-primary text-primary-foreground",
43  error: "border-destructive bg-destructive text-white",
44};
45 
46const CONNECTOR_FILL: Record<StepStatus, string> = {
47  pending: "bg-border",
48  running: "bg-gradient-to-b from-primary to-border",
49  success: "bg-primary",
50  error: "bg-destructive",
51};
52 
53const AgentStep = React.forwardRef<HTMLLIElement, AgentStepProps>(
54  (
55    {
56      status = "pending",
57      title,
58      meta,
59      children,
60      defaultOpen = false,
61      last = false,
62      className,
63      ...props
64    },
65    ref,
66  ) => {
67    const reduce = useReducedMotion();
68    const [open, setOpen] = React.useState(defaultOpen);
69    const hasBody = Boolean(children);
70 
71    return (
72      <li
73        ref={ref}
74        data-slot="agent-step"
75        data-status={status}
76        className={`relative flex gap-3 pb-2 ${className ?? ""}`}
77        {...props}
78      >
79        {/* Rail */}
80        <div className="relative flex flex-col items-center">
81          <span
82            className={`relative z-raised flex size-6 shrink-0 items-center justify-center rounded-full border ${STATUS_RING[status]} transition-colors`}
83          >
84            {status === "running" ? (
85// … truncated