Trace

1"use client";2​3import * as React from "react";4import { CaretRightIcon } from "@phosphor-icons/react/ssr";5​6import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";7import { cn } from "@/lib/utils";8​9// An agent's steps as it works (extrapolated from the console, Figma 427:2715: the inbox's muted dates and the10// "Advanced settings" disclosure). Each line is 14px muted purple with an 18px glyph 8px before it; a line that is a11// link or button turns ink under the pointer. A running step breathes (1.6s, held still with reduced motion), a pending12// one is faded, a failed one is red. A step that can open shows a caret after its title that turns a quarter when open;13// its detail hangs from a hairline 16px in, in 14px secondary ink, and opens with its height (200ms, the strong ease-out).14function Trace({ className, ...props }: React.ComponentProps<"div">) {15  return (16    <div17      data-slot="trace"18      className={cn(19        "flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:rounded-xs *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none *:has-[>[data-slot=trace-line]]:focus-visible:outline-2 *:has-[>[data-slot=trace-line]]:focus-visible:outline-offset-2 *:has-[>[data-slot=trace-line]]:focus-visible:outline-focus-ring",20        className,21      )}22      {...props}23    />24  );25}26​27function TraceLine({ className, status, ...props }: React.ComponentProps<"span"> & { status?: "running" | "error" | "pending" }) {28  return (29    <span30      data-slot="trace-line"31      data-status={status}32      className={cn(33        "flex w-fit max-w-full min-w-0 items-center gap-2 font-sans text-body leading-body text-fg-muted transition-colors duration-150 ease-out in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-fg data-[status=error]:text-danger data-[status=error]:in-[a:hover,button:hover]:text-danger-strong data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:animate-pulse-soft motion-reduce:transition-none motion-reduce:data-[status=running]:*:data-[slot=trace-title]:animate-none",34        className,35      )}36      {...props}37    />38  );39}40​41function TraceIcon({ className, ...props }: React.ComponentProps<"span">) {42  return (43    <span44      data-slot="trace-icon"45      aria-hidden="true"46      className={cn("flex size-4.5 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4.5 [[data-slot=trace-title]~&]:-ml-1", className)}47      {...props}48    />49  );50}51​52function TraceTitle({ className, ...props }: React.ComponentProps<"span">) {53  return <span data-slot="trace-title" className={cn("min-w-0 truncate", className)} {...props} />;54}55​56/** A step's quiet detail at its end: a duration or a count, in the faint purple with even figures. */57function TraceDescription({ className, ...props }: React.ComponentProps<"span">) {58  return <span data-slot="trace-description" className={cn("shrink-0 text-fg-subtle tabular-nums", className)} {...props} />;59}60​61function TraceCollapsible({62  className,63  ...props64}: Omit<React.ComponentProps<typeof Collapsible>, "asChild" | "open"> & ({ open?: undefined } | { open: boolean; onOpenChange: NonNullable<React.ComponentProps<typeof Collapsible>["onOpenChange"]> })) {65  return <Collapsible data-slot="trace-collapsible" className={cn("flex w-full min-w-0 flex-col", className)} {...props} />;66}67​68function TraceCollapsibleTrigger({ className, children, ...props }: Omit<React.ComponentProps<typeof CollapsibleTrigger>, "asChild">) {69  return (70    <CollapsibleTrigger71      data-slot="trace-collapsible-trigger"72      className={cn(73        "group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-xs text-left text-fg-muted outline-none transition-colors duration-150 ease-out hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring has-[[data-status=error]]:text-danger motion-reduce:transition-none",74        className,75      )}76      {...props}77    >78      {children}79      <TraceIcon className="transition-transform duration-200 ease-out group-aria-expanded/trace-collapsible-trigger:rotate-90 motion-reduce:transition-none">80        <CaretRightIcon weight="bold" className="size-3.5" />81      </TraceIcon>82    </CollapsibleTrigger>83  );84}85​86function TraceCollapsibleContent({ className, children, ...props }: Omit<React.ComponentProps<typeof CollapsibleContent>, "asChild">) {87  return (88    <CollapsibleContent data-slot="trace-collapsible-content" className="min-w-0" {...props}>89      <div data-slot="trace-collapsible-content-inner" className={cn("mt-2 mb-1 ml-2 min-w-0 border-l border-line-field pr-1 pl-4 font-sans text-body leading-body [overflow-wrap:anywhere] text-fg-secondary", className)}>90        {children}91      </div>92    </CollapsibleContent>93  );94}95​96export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle };