@horon-ai/react 0.0.0-stage → 0.1.1

package/src/components/message-extras.tsx

@@ -0,0 +1,146 @@
+import { Copy, FileText, X } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
+import { cn } from "../lib/cn";
+import { IconButton } from "./icon-button";
+import { LiquidGlass } from "./liquid-glass";
+
+/** Figma `Date separator` (Message extras 109:667): caption between two 10% ink lines. */
+export function DateSeparator({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div role="separator" className={cn("flex items-center gap-3", className)}>
+      <span className="h-px flex-1 bg-overlay-ink-10" />
+      <span className="shrink-0 text-caption text-text-secondary">{children}</span>
+      <span className="h-px flex-1 bg-overlay-ink-10" />
+    </div>
+  );
+}
+
+export type MessageAction = { label: string; icon: ReactNode; onClick?: () => void };
+
+/** Figma `Message actions` (109:667): a pill of 30px icon buttons with 16px icons, solid or regular glass. */
+export function MessageActions({
+  actions,
+  surface = "solid",
+  className,
+}: {
+  actions: MessageAction[];
+  /** `solid` (default) is an opaque surface pill with a default border; `glass` is the regular glass pill. */
+  surface?: "solid" | "glass";
+  className?: string;
+}) {
+  return (
+    <div
+      role="toolbar"
+      className={cn(
+        "relative flex w-fit items-center gap-0.5 overflow-clip rounded-full p-[3px]",
+        surface === "glass" ? "bg-glass-regular" : "border border-border-default bg-bg-surface",
+        className,
+      )}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      {actions.map((action) => (
+        <button
+          key={action.label}
+          type="button"
+          aria-label={action.label}
+          onClick={action.onClick}
+          className="relative flex size-7.5 motion-press cursor-pointer items-center justify-center rounded-full text-text-secondary motion-colors hover:bg-overlay-ink-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand [&>svg]:size-4"
+        >
+          {action.icon}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export type AttachmentProps = {
+  name: ReactNode;
+  /** Caption, such as "PDF · 2.4 MB". */
+  detail?: ReactNode;
+  /** Image thumbnail URL; files show a document icon on a sky tile. */
+  thumbnail?: string;
+  onRemove?: () => void;
+  removeLabel?: string;
+  className?: string;
+};
+
+/** Figma `Attachment` (109:667): a flat subtle card with a 40px thumb, name, detail and remove button. */
+export function Attachment({ name, detail, thumbnail, onRemove, removeLabel = "Remove", className }: AttachmentProps) {
+  return (
+    <div
+      className={cn(
+        "flex w-full max-w-70 min-w-0 motion-rise items-center gap-2.5 rounded-lg bg-bg-subtle py-2 pr-2 pl-2",
+        className,
+      )}
+    >
+      {thumbnail ? (
+        <span
+          aria-hidden
+          className="size-10 shrink-0 rounded-[10px] bg-cover bg-center"
+          style={{ backgroundImage: `url(${JSON.stringify(thumbnail)})` }}
+        />
+      ) : (
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-accent-sky-500-16 text-text-brand">
+          <FileText aria-hidden className="size-5" />
+        </span>
+      )}
+      <span className="flex min-w-0 flex-1 flex-col gap-px">
+        <span className="truncate text-label-md text-text-primary">{name}</span>
+        {detail && <span className="truncate text-caption text-text-secondary">{detail}</span>}
+      </span>
+      {onRemove && (
+        <IconButton
+          size="sm"
+          icon={<X aria-hidden />}
+          label={removeLabel}
+          onClick={onRemove}
+          className="text-text-secondary"
+        />
+      )}
+    </div>
+  );
+}
+
+export type CodeBlockProps = Omit<ComponentProps<"div">, "className" | "children"> & {
+  code: string;
+  language?: string;
+  copyLabel?: string;
+  copiedLabel?: string;
+  className?: string;
+};
+
+/** Figma `Code block` (109:667): ink surface, 14px radius, 6% header with copy, Geist Mono 13/20 code. */
+export function CodeBlock({
+  code,
+  language,
+  copyLabel = "Copy",
+  copiedLabel = "Copied",
+  className,
+  ...props
+}: CodeBlockProps) {
+  const { copied, copy } = useCopyToClipboard(1500);
+  return (
+    <div className={cn("flex flex-col overflow-clip rounded-lg bg-surface-ink", className)} {...props}>
+      <div className="flex items-center gap-2 bg-bg-surface-6 py-2 pr-3.5 pl-3.5 text-caption text-text-on-ink">
+        <span className="min-w-0 flex-1 opacity-70">{language}</span>
+        <button
+          type="button"
+          onClick={() => copy(code)}
+          className="flex shrink-0 motion-press cursor-pointer items-center gap-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
+        >
+          <Copy aria-hidden className="size-3.5 shrink-0" />
+          <span className="min-w-10 text-left">
+            <span key={copied ? "copied" : "copy"} className="inline-block animate-fade-in">
+              {copied ? copiedLabel : copyLabel}
+            </span>
+          </span>
+        </button>
+      </div>
+      <pre className="overflow-x-auto px-3.5 pt-3 pb-3.5 font-mono text-code text-text-on-ink">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

package/src/components/modal.tsx

@@ -0,0 +1,108 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { X } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+
+export const Modal = BaseDialog.Root;
+export const ModalTrigger = BaseDialog.Trigger;
+export const ModalClose = BaseDialog.Close;
+
+export type ModalSize = "sm" | "md" | "lg";
+export type ModalSurface = "solid" | "glass";
+
+type DivProps = Omit<ComponentProps<"div">, "className"> & { className?: string };
+
+export type ModalContentProps = Omit<ComponentProps<typeof BaseDialog.Popup>, "className" | "title"> & {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Width: `sm` 400px, `md` 560px (default), `lg` 720px. Never wider than the viewport minus 32px. */
+  size?: ModalSize;
+  /** `solid` (default) is the opaque page fill with a 0 24 64 shadow; `glass` is the veil (`veil-overlay`). */
+  surface?: ModalSurface;
+  /** Tile or icon before the title. */
+  leading?: ReactNode;
+  /** Label for the close button; hides it when `null`. */
+  closeLabel?: string | null;
+  /** `ModalFooter`, kept below the scrolling body. */
+  footer?: ReactNode;
+  className?: string;
+};
+
+const widthClass: Record<ModalSize, string> = {
+  sm: "w-full max-w-100",
+  md: "w-full max-w-140",
+  lg: "w-full max-w-180",
+};
+
+/**
+ * A modal for work that needs a form or a longer read, where `Dialog` is a short confirmation. It has three
+ * fixed parts: a header (title, description and close), a body that scrolls on its own once the modal reaches
+ * the viewport height, and a footer whose actions sit at the right. 24px padding, 20px radius, 32% scrim.
+ */
+export function ModalContent({
+  title,
+  description,
+  size = "md",
+  surface = "solid",
+  leading,
+  closeLabel = "Close",
+  footer,
+  className,
+  children,
+  ...props
+}: ModalContentProps) {
+  return (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop className="fixed inset-0 z-50 bg-bg-scrim/32 motion-fade backdrop-blur-[6px]" />
+      <BaseDialog.Viewport className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <BaseDialog.Popup
+          className={cn(
+            // The 16px viewport padding caps `w-full`, so the popup never exceeds
+            // the screen even on the narrowest phone.
+            "relative flex max-h-[calc(100dvh-2rem)] flex-col overflow-clip rounded-xl outline-none",
+            widthClass[size],
+            surface === "solid" ? "bg-bg-surface shadow-[0_24px_64px_#0A142433]" : "veil-overlay",
+            "motion-popup duration-240 data-starting-style:translate-y-2",
+            className,
+          )}
+          {...props}
+        >
+          <header className={cn("flex shrink-0 items-start px-6 pt-6 pb-4", leading ? "gap-3.5" : "gap-2")}>
+            {leading}
+            <div className="flex min-w-0 flex-1 flex-col gap-1">
+              <BaseDialog.Title className="text-title-md text-text-primary">{title}</BaseDialog.Title>
+              {description && (
+                <BaseDialog.Description className="text-body-md text-text-secondary">
+                  {description}
+                </BaseDialog.Description>
+              )}
+            </div>
+            {closeLabel !== null && (
+              <BaseDialog.Close
+                aria-label={closeLabel}
+                className="-mt-1 -mr-2 flex size-8 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full text-text-secondary motion-colors hover:bg-overlay-ink-6 hover:text-text-primary focus-visible:outline-2 focus-visible:outline-text-brand [&_svg]:size-4"
+              >
+                <X />
+              </BaseDialog.Close>
+            )}
+          </header>
+          <div
+            className={cn(
+              "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 text-body-md text-text-primary",
+              footer ? "pb-2" : "pb-6",
+            )}
+          >
+            {children}
+          </div>
+          {footer}
+        </BaseDialog.Popup>
+      </BaseDialog.Viewport>
+    </BaseDialog.Portal>
+  );
+}
+
+/** The modal's action row: actions at the right, secondary first and primary last, 8px apart, 24px padding. */
+export function ModalFooter({ className, ...props }: DivProps) {
+  return <div className={cn("flex shrink-0 items-center justify-end gap-2 px-6 pt-4 pb-6", className)} {...props} />;
+}

package/src/components/orchestrator-panel.tsx

@@ -0,0 +1,175 @@
+import { Stop } from "@phosphor-icons/react";
+import { Children, isValidElement, type CSSProperties, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { SegmentedControl } from "./segmented-control";
+import { Spinner } from "./spinner";
+
+export type OrchestratorLead = {
+  /** One letter shown in the 22px ink tile. */
+  initial: string;
+  name: ReactNode;
+  /** Role caption next to the name, such as "Lead". */
+  role?: ReactNode;
+  /** Status text, such as "1 working". */
+  status?: ReactNode;
+  /** Shows the 13px spinner while the lead waits on its lanes. */
+  running?: boolean;
+  elapsed?: ReactNode;
+};
+
+export type OrchestratorPlanItem = {
+  label: string;
+  /** Dot color of the lane that runs this step, such as "bg-sky-600". Defaults to the live blue. */
+  dotClassName?: string;
+  /** Pulses the dot while the lane works. */
+  running?: boolean;
+};
+
+export type OrchestratorSummary = {
+  title?: ReactNode;
+  /** Right-aligned count, such as "1 of 3 returned". */
+  count?: ReactNode;
+  body: ReactNode;
+};
+
+export type OrchestratorPanelProps = {
+  title: ReactNode;
+  /** Label before the segmented picker, such as "Bots in parallel". */
+  parallelLabel?: ReactNode;
+  /** Choices of the parallel picker. */
+  parallelOptions?: number[];
+  parallelValue?: number;
+  onParallelChange?: (value: number) => void;
+  stopLabel?: ReactNode;
+  /** Renders the Stop button when set. */
+  onStop?: () => void;
+  lead: OrchestratorLead;
+  plan?: OrchestratorPlanItem[];
+  /** `AgentLane` cards; the branch connector draws one elbow per lane. */
+  children?: ReactNode;
+  summary?: OrchestratorSummary;
+  className?: string;
+};
+
+const stagger = (index: number) => ({ "--i": index, animationDelay: `calc(var(--i) * 30ms)` }) as CSSProperties;
+
+/** Figma `Orchestrator` (Agents N1): a 24px-radius solid panel, header with a parallel picker and Stop, a lead row, its plan, branching lanes and a summary. */
+export function OrchestratorPanel({
+  title,
+  parallelLabel = "Bots in parallel",
+  parallelOptions,
+  parallelValue,
+  onParallelChange,
+  stopLabel = "Stop",
+  onStop,
+  lead,
+  plan,
+  children,
+  summary,
+  className,
+}: OrchestratorPanelProps) {
+  const lanes = Children.toArray(children);
+  return (
+    <section
+      className={cn(
+        "flex w-full min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        className,
+      )}
+    >
+      <header className="flex flex-col gap-3 px-5 pt-4 pb-3.5">
+        <h3 className="text-label-lg text-text-primary">{title}</h3>
+        <div className="flex flex-wrap items-center gap-2.5">
+          <span className="text-body-sm text-text-secondary">{parallelLabel}</span>
+          {parallelOptions && (
+            <SegmentedControl
+              aria-label={typeof parallelLabel === "string" ? parallelLabel : undefined}
+              size="sm"
+              surface="inset"
+              value={parallelValue === undefined ? undefined : String(parallelValue)}
+              onValueChange={(next) => onParallelChange?.(Number(next))}
+              items={parallelOptions.map((option) => ({ value: String(option), label: String(option) }))}
+            />
+          )}
+          <span className="min-w-0 flex-1" />
+          {onStop && (
+            <button
+              type="button"
+              onClick={onStop}
+              className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center justify-center gap-1.5 rounded-full bg-overlay-ink-6 px-3 text-label-sm text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-text-brand"
+            >
+              <Stop aria-hidden className="size-3.5" />
+              {stopLabel}
+            </button>
+          )}
+        </div>
+      </header>
+      <div role="separator" className="h-px bg-overlay-ink-8" />
+      <div className="flex flex-col gap-2.5 px-5 pt-4 pb-5">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="flex size-5.5 shrink-0 items-center justify-center rounded-[5px] bg-interactive-primary text-label-sm text-text-inverse">
+            {lead.initial}
+          </span>
+          <span className="min-w-0 truncate text-label-lg text-text-primary">{lead.name}</span>
+          <span className="min-w-0 flex-1 truncate text-body-sm text-text-secondary">{lead.role ?? "Lead"}</span>
+          {lead.running && <Spinner size={13} />}
+          {lead.status && <span className="shrink-0 text-caption text-text-secondary">{lead.status}</span>}
+          {lead.elapsed && <span className="shrink-0 text-caption text-text-secondary">{lead.elapsed}</span>}
+        </div>
+        {plan && plan.length > 0 && (
+          <ul className="flex flex-col gap-1.5 pt-0.5 pb-1 pl-7.5">
+            {plan.map((item, index) => (
+              <li key={item.label} className="flex min-w-0 motion-rise items-center gap-2.5" style={stagger(index)}>
+                <span
+                  aria-hidden
+                  className={cn("shrink-0 rounded-full text-sky-400", item.running && "animate-live-pulse")}
+                >
+                  <span className={cn("block size-1.5 rounded-full", item.dotClassName ?? "bg-status-live")} />
+                </span>
+                <span className="min-w-0 text-body-sm wrap-break-word text-text-primary">{item.label}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+        {lanes.length > 0 && (
+          <div className="flex items-start">
+            <div className="flex min-w-0 flex-1 flex-col gap-2.5 pl-7.5">
+              {lanes.map((lane, index) => (
+                <div
+                  key={isValidElement(lane) && lane.key != null ? lane.key : `lane-${index}`}
+                  className="relative motion-rise"
+                  style={stagger(index)}
+                >
+                  <span
+                    aria-hidden
+                    className="absolute top-0 -left-7.5 h-5.5 w-7.5 rounded-bl-lg border-b-[1.5px] border-l-[1.5px] border-overlay-ink-14"
+                  />
+                  {index < lanes.length - 1 && (
+                    <span
+                      aria-hidden
+                      className="absolute top-5.5 -bottom-2.5 -left-7.5 border-l-[1.5px] border-overlay-ink-14"
+                    />
+                  )}
+                  {lane}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        <div className="motion-reveal" data-collapsed={!summary || undefined}>
+          <div>
+            {summary && (
+              <div className="flex flex-col gap-1 rounded-2xl bg-overlay-ink-4 px-4 py-3" style={stagger(lanes.length)}>
+                <div className="flex items-center gap-2">
+                  <span className="min-w-0 flex-1 text-label-md text-text-primary">{summary.title ?? "Summary"}</span>
+                  {summary.count && <span className="shrink-0 text-caption text-text-secondary">{summary.count}</span>}
+                </div>
+                <p className="text-body-sm text-text-secondary">{summary.body}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/page-header.tsx

@@ -0,0 +1,48 @@
+import { CaretLeft } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { IconButton } from "./icon-button";
+import { LiquidGlass } from "./liquid-glass";
+
+export type PageHeaderProps = {
+  title: ReactNode;
+  onBack?: () => void;
+  backLabel?: string;
+  /** Trailing 40px icon buttons, such as search. */
+  actions?: ReactNode;
+  /** Content under the top row, such as a `SegmentedControl` filter. */
+  children?: ReactNode;
+  /** `solid` (default) is an opaque surface header with a default border; `glass` is the regular glass header. */
+  surface?: "solid" | "glass";
+  className?: string;
+};
+
+/** Figma `Header with filter` (Segmented filters 88:723): a 28px-radius header, 8px padding, solid or regular glass. */
+export function PageHeader({
+  title,
+  onBack,
+  backLabel = "Back",
+  actions,
+  children,
+  surface = "solid",
+  className,
+}: PageHeaderProps) {
+  return (
+    <header
+      className={cn(
+        "relative flex max-w-full min-w-0 flex-col gap-1.5 overflow-clip rounded-[28px] p-2",
+        surface === "glass" ? "bg-glass-regular" : "border border-border-default bg-bg-surface",
+        className,
+      )}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <div className="relative flex h-10 min-w-0 items-center gap-2">
+        {onBack && <IconButton icon={<CaretLeft />} label={backLabel} onClick={onBack} />}
+        <h1 className={cn("min-w-0 flex-1 truncate text-label-lg text-text-primary", !onBack && "pl-2")}>{title}</h1>
+        {actions}
+      </div>
+      {children && <div className="relative animate-swap-move">{children}</div>}
+    </header>
+  );
+}

package/src/components/plan-card.tsx

@@ -0,0 +1,70 @@
+import { Collapsible } from "@base-ui/react/collapsible";
+import { ListChecks, WarningCircle } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Spinner } from "./spinner";
+
+export type PlanCardStatus = "running" | "failed";
+
+export type PlanCardProps = {
+  /** Label line next to the 16px list icon, such as "Plan · 5 steps". */
+  label?: ReactNode;
+  title: ReactNode;
+  /** `PlanStep`s, stacked without dividers. */
+  children?: ReactNode;
+  /** Footer state. Unset hides the footer; a change expands or collapses it. */
+  status?: PlanCardStatus;
+  /** Footer text, such as "Stopped · step 4 failed" or "Running · 1 of 5". */
+  statusLabel?: ReactNode;
+  elapsed?: ReactNode;
+  className?: string;
+};
+
+/** Figma `Plan card` (Agents N3): a 20px-radius solid card with a label, title, the steps and a status footer. */
+export function PlanCard({ label, title, children, status, statusLabel, elapsed, className }: PlanCardProps) {
+  return (
+    <section
+      className={cn(
+        "flex w-full min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
+        className,
+      )}
+    >
+      <header className="flex flex-col gap-2 px-6 pt-5 pb-3.5">
+        {label && (
+          <div className="flex min-w-0 items-center gap-2 text-body-sm text-text-secondary">
+            <ListChecks aria-hidden className="size-4 shrink-0" />
+            <span className="min-w-0 wrap-break-word">{label}</span>
+          </div>
+        )}
+        <h3 className="min-w-0 text-label-lg font-semibold wrap-break-word text-text-primary">{title}</h3>
+      </header>
+      <div className="flex flex-col px-6 pt-1.5 pb-1">{children}</div>
+      <Collapsible.Root open={status !== undefined}>
+        <Collapsible.Panel keepMounted className="motion-collapse">
+          <div className="h-px bg-overlay-ink-8" />
+          <div
+            className={cn(
+              "flex min-w-0 items-center gap-2 px-6 pt-3.5 pb-4 text-label-md motion-colors",
+              status === "failed" ? "text-text-danger" : "text-text-primary",
+            )}
+          >
+            {status === "running" && <Spinner size={14} />}
+            {status === "failed" && <WarningCircle aria-hidden className="size-4 shrink-0" />}
+            <span key={String(status)} className="min-w-0 flex-1 animate-fade-in wrap-break-word">
+              {statusLabel}
+            </span>
+            {elapsed && (
+              <span
+                key={elapsed ? "with-elapsed" : "without-elapsed"}
+                className="shrink-0 animate-fade-in text-caption text-text-secondary"
+              >
+                {elapsed}
+              </span>
+            )}
+          </div>
+        </Collapsible.Panel>
+      </Collapsible.Root>
+    </section>
+  );
+}

package/src/components/plan-step.tsx

@@ -0,0 +1,111 @@
+import { ArrowClockwise, Check } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Spinner } from "./spinner";
+
+export type PlanStepStatus = "done" | "running" | "failed" | "pending";
+
+export type PlanStepProps = {
+  status: PlanStepStatus;
+  /** Step number, shown on pending steps. */
+  index: number;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Tool id in mono, such as "stripe.query". */
+  tool?: ReactNode;
+  elapsed?: ReactNode;
+  error?: ReactNode;
+  onRetry?: () => void;
+  /** Hides the rail line under the last step. */
+  last?: boolean;
+  className?: string;
+};
+
+/** Figma `Plan step` (Agent plan 191:8296): a 24px marker on a 2px rail, sky when done. */
+export function PlanStep({
+  status,
+  index,
+  title,
+  description,
+  tool,
+  elapsed,
+  error,
+  onRetry,
+  last,
+  className,
+}: PlanStepProps) {
+  return (
+    <div className={cn("flex min-w-0 items-stretch gap-3.5", className)}>
+      <div className="flex shrink-0 flex-col items-center gap-1">
+        <span
+          className={cn(
+            "flex size-6 shrink-0 items-center justify-center rounded-md text-label-sm motion-colors",
+            status === "done" && "bg-status-live text-interactive-on-primary",
+            status === "failed" && "bg-bg-danger text-text-danger",
+            status === "pending" && "border border-border-default text-text-secondary",
+            status === "running" && "bg-bg-subtle",
+          )}
+        >
+          <span key={status} className="flex animate-pop-in items-center justify-center">
+            {status === "done" && <Check aria-hidden className="size-3.5" />}
+            {status === "running" && <Spinner size={20} />}
+            {status === "failed" && "!"}
+            {status === "pending" && index}
+          </span>
+        </span>
+        {!last && (
+          <span
+            className={cn(
+              "w-0.5 flex-1 rounded-[1px] motion-colors",
+              status === "done" ? "bg-status-live" : "bg-border-default",
+            )}
+          />
+        )}
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col pt-0.5 pb-4.5">
+        <div className="flex items-start gap-3">
+          <p
+            className={cn(
+              "min-w-0 flex-1 text-label-lg wrap-break-word",
+              status === "pending" ? "text-text-secondary" : "text-text-primary",
+            )}
+          >
+            {title}
+          </p>
+          {elapsed && (status === "done" || status === "running") && (
+            <span className="shrink-0 text-caption text-text-secondary">{elapsed}</span>
+          )}
+        </div>
+        <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1.5">
+          {description && (
+            <span className="min-w-0 text-body-sm wrap-break-word text-text-secondary">{description}</span>
+          )}
+          {tool && (
+            <span className="rounded-xs bg-bg-subtle px-2 py-0.5 font-mono text-label-md text-text-secondary">
+              {tool}
+            </span>
+          )}
+        </div>
+        <div className="motion-reveal" data-collapsed={status !== "failed" || undefined}>
+          <div>
+            <div className="mt-1.5 flex flex-col gap-1.5">
+              <p className="text-body-sm wrap-break-word text-text-danger">{error}</p>
+              {onRetry && (
+                <button
+                  type="button"
+                  onClick={onRetry}
+                  inert={status !== "failed"}
+                  className="flex h-7.5 w-fit motion-press cursor-pointer items-center gap-1.5 rounded-full bg-overlay-ink-6 px-3 text-label-sm text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
+                >
+                  <ArrowClockwise aria-hidden className="size-3.5" />
+                  Retry from here
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}