@elabs-ai/components-ai 4.0.0

package/src/_persona-rive.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+/**
+ * The Rive half of `Persona`, split out so it can be `lazy()`-loaded.
+ *
+ * `@rive-app/react-webgl2` declares no `sideEffects`, so a static import from
+ * `persona.tsx` put the whole WebGL2 runtime (and its `rive.wasm`) into the entry
+ * chunk of every `@elabs-ai/components-ai` consumer — including the vast majority that never
+ * render a `Persona`. Keeping every Rive *value* import in this module, reached
+ * only through `lazy(() => import("./_persona-rive"))`, confines it to its own
+ * chunk. `persona.tsx` may still `import type` from Rive (types erase).
+ *
+ * See ADR 0019 and `pnpm heavy-deps:check`.
+ *
+ * @lazy-boundary This module must only ever be reached via `import()`. The gate
+ * fails if anything imports it statically, which would put Rive back in the
+ * entry chunk and make the `lazy()` pointless.
+ */
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useReducedMotion } from "@elabs-ai/components-tokens";
+import type { RiveParameters } from "@rive-app/react-webgl2";
+import {
+  useRive,
+  useStateMachineInput,
+  useViewModel,
+  useViewModelInstance,
+  useViewModelInstanceColor,
+} from "@rive-app/react-webgl2";
+import type { ReactNode } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+
+import type { PersonaSource, PersonaState } from "./persona-sources";
+
+// Delays Rive initialization by one frame so that React Strict Mode's
+// immediate unmount cycle never creates a WebGL2 context. Only the
+// second (real) mount will initialise, avoiding context exhaustion.
+const useStrictModeSafeInit = () => {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setReady(true));
+    return () => {
+      cancelAnimationFrame(id);
+      setReady(false);
+    };
+  }, []);
+
+  return ready;
+};
+
+// The state machine name is always 'default' for Elements AI visuals
+const stateMachine = "default";
+
+const getCurrentTheme = (): "light" | "dark" => {
+  if (typeof window !== "undefined") {
+    if (document.documentElement.classList.contains("dark")) {
+      return "dark";
+    }
+    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+  }
+  return "light";
+};
+
+const useTheme = (enabled: boolean) => {
+  const [theme, setTheme] = useState<"light" | "dark">(getCurrentTheme);
+
+  useEffect(() => {
+    // Skip if not enabled (avoids unnecessary observers for non-dynamic-color variants)
+    if (!enabled) {
+      return;
+    }
+
+    // Watch for classList changes
+    const observer = new MutationObserver(() => {
+      setTheme(getCurrentTheme());
+    });
+
+    observer.observe(document.documentElement, {
+      attributeFilter: ["class"],
+      attributes: true,
+    });
+
+    // Watch for OS-level theme changes
+    let mql: MediaQueryList | null = null;
+    const handleMediaChange = () => {
+      setTheme(getCurrentTheme());
+    };
+
+    if (window.matchMedia) {
+      mql = window.matchMedia("(prefers-color-scheme: dark)");
+      mql.addEventListener("change", handleMediaChange);
+    }
+
+    return () => {
+      observer.disconnect();
+      if (mql) {
+        mql.removeEventListener("change", handleMediaChange);
+      }
+    };
+  }, [enabled]);
+
+  return theme;
+};
+
+interface PersonaWithModelProps {
+  rive: ReturnType<typeof useRive>["rive"];
+  source: PersonaSource;
+  children: ReactNode;
+}
+
+const PersonaWithModel = memo(({ rive, source, children }: PersonaWithModelProps) => {
+  const theme = useTheme(source.dynamicColor);
+  const viewModel = useViewModel(rive, { useDefault: true });
+  const viewModelInstance = useViewModelInstance(viewModel, {
+    rive,
+    useDefault: true,
+  });
+  const viewModelInstanceColor = useViewModelInstanceColor("color", viewModelInstance);
+
+  useEffect(() => {
+    if (!(viewModelInstanceColor && source.dynamicColor)) {
+      return;
+    }
+
+    const [r, g, b] = theme === "dark" ? [255, 255, 255] : [0, 0, 0];
+    viewModelInstanceColor.setRgb(r, g, b);
+  }, [viewModelInstanceColor, theme, source.dynamicColor]);
+
+  return children;
+});
+
+PersonaWithModel.displayName = "PersonaWithModel";
+
+const PersonaWithoutModel = memo(({ children }: { children: ReactNode }) => children);
+
+PersonaWithoutModel.displayName = "PersonaWithoutModel";
+
+export interface PersonaRiveProps {
+  className?: string;
+  onLoad?: RiveParameters["onLoad"];
+  onLoadError?: RiveParameters["onLoadError"];
+  onPause?: RiveParameters["onPause"];
+  onPlay?: RiveParameters["onPlay"];
+  onReady?: () => void;
+  onStop?: RiveParameters["onStop"];
+  source: PersonaSource;
+  /** Resolved `.riv` URL — `Persona`'s `src` override, or the variant default. */
+  src: string;
+  state: PersonaState;
+}
+
+const PersonaRive = ({
+  className,
+  onLoad,
+  onLoadError,
+  onPause,
+  onPlay,
+  onReady,
+  onStop,
+  source,
+  src,
+  state,
+}: PersonaRiveProps) => {
+  // Stabilize callbacks to prevent useRive from reinitializing
+  const callbacksRef = useRef({ onLoad, onLoadError, onPause, onPlay, onReady, onStop });
+
+  useEffect(() => {
+    callbacksRef.current = { onLoad, onLoadError, onPause, onPlay, onReady, onStop };
+  }, [onLoad, onLoadError, onPause, onPlay, onReady, onStop]);
+
+  const stableCallbacks = useMemo(
+    () => ({
+      onLoad: ((loadedRive) =>
+        callbacksRef.current.onLoad?.(loadedRive)) as RiveParameters["onLoad"],
+      onLoadError: ((err) =>
+        callbacksRef.current.onLoadError?.(err)) as RiveParameters["onLoadError"],
+      onPause: ((event) => callbacksRef.current.onPause?.(event)) as RiveParameters["onPause"],
+      onPlay: ((event) => callbacksRef.current.onPlay?.(event)) as RiveParameters["onPlay"],
+      onReady: () => callbacksRef.current.onReady?.(),
+      onStop: ((event) => callbacksRef.current.onStop?.(event)) as RiveParameters["onStop"],
+    }),
+    [],
+  );
+
+  // Delay initialisation by one frame to avoid creating (and leaking)
+  // a WebGL2 context during React Strict Mode's first throw-away mount.
+  const ready = useStrictModeSafeInit();
+  const prefersReducedMotion = useReducedMotion();
+
+  const { rive, RiveComponent } = useRive(
+    ready
+      ? {
+          autoplay: !prefersReducedMotion,
+          onLoad: stableCallbacks.onLoad,
+          onLoadError: stableCallbacks.onLoadError,
+          onPause: stableCallbacks.onPause,
+          onPlay: stableCallbacks.onPlay,
+          onRiveReady: stableCallbacks.onReady,
+          onStop: stableCallbacks.onStop,
+          src,
+          stateMachines: stateMachine,
+        }
+      : null,
+  );
+
+  // `autoplay` only governs the INITIAL mount — honor a mid-session
+  // reduced-motion preference change by pausing/resuming the running
+  // instance. The state-machine inputs below keep updating either way, so
+  // the artwork still shows the correct resting pose while paused.
+  useEffect(() => {
+    if (!rive) return;
+    if (prefersReducedMotion) {
+      rive.pause();
+    } else {
+      rive.play();
+    }
+  }, [rive, prefersReducedMotion]);
+
+  const listeningInput = useStateMachineInput(rive, stateMachine, "listening");
+  const thinkingInput = useStateMachineInput(rive, stateMachine, "thinking");
+  const speakingInput = useStateMachineInput(rive, stateMachine, "speaking");
+  const asleepInput = useStateMachineInput(rive, stateMachine, "asleep");
+
+  // Rive state machine inputs are mutable objects that must be set via direct
+  // property assignment — this is the intended Rive API, not a React anti-pattern.
+  useEffect(() => {
+    if (listeningInput) {
+      listeningInput.value = state === "listening";
+    }
+    if (thinkingInput) {
+      thinkingInput.value = state === "thinking";
+    }
+    if (speakingInput) {
+      speakingInput.value = state === "speaking";
+    }
+    if (asleepInput) {
+      asleepInput.value = state === "asleep";
+    }
+  }, [state, listeningInput, thinkingInput, speakingInput, asleepInput]);
+
+  const Wrapper = source.hasModel ? PersonaWithModel : PersonaWithoutModel;
+
+  return (
+    <Wrapper rive={rive} source={source}>
+      <RiveComponent className={cn("size-16 shrink-0", className)} />
+    </Wrapper>
+  );
+};
+
+export default PersonaRive;

package/src/_streamdown-i18n.ts

@@ -0,0 +1,119 @@
+"use client";
+
+/**
+ * The shared Streamdown wiring for every streamed-markdown surface in
+ * `@elabs-ai/components-ai` — the plugin set and the locale bridge.
+ *
+ * Why the locale bridge exists (#310)
+ * -----------------------------------
+ * Streamdown renders its own chrome inside the markdown it draws: a code-block
+ * header with a copy control, table copy/download menus, a Mermaid toolbar, an
+ * external-link interstitial. Those labels live in the dependency, not in our
+ * source, so `pnpm microcopy:check` structurally cannot see them and a
+ * `<LocaleProvider>` used to stop at the Streamdown boundary — every localized
+ * app leaked "Copy Code" / "Download diagram" / "You're about to visit an
+ * external website." in English.
+ *
+ * Streamdown exposes the whole set through one `translations` prop, so the fix
+ * is to map its keys onto our `ai.streamdown.*` namespace and resolve them with
+ * `t()`. The English defaults in
+ * `packages/ui/src/components/locale-provider/messages.ts` are byte-identical to
+ * streamdown's own, so this is a no-op for anyone who overrides nothing.
+ *
+ * Memoization matters: Streamdown puts `translations` into a React context, so a
+ * fresh object per render would re-render every code block and table in the
+ * document. The map is memoized on `t`, which is itself stable per locale.
+ */
+import {
+  STREAMDOWN_TRANSLATION_KEYS,
+  useStreamdownTranslations,
+  type StreamdownTranslationKey,
+} from "@elabs-ai/components-ui";
+import { cjk } from "@streamdown/cjk";
+import { createCodePlugin } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { useEffect, useMemo, useState } from "react";
+import type { StreamdownTranslations } from "streamdown";
+import { buildCodeBlockTheme } from "./_code-block-theme";
+import { lazyMermaid } from "./_lazy-mermaid";
+
+/**
+ * Reactive replacement for `@streamdown/code`'s pre-configured `code` export
+ * (issue #315 follow-up, the "major" carve-out: only `<CodeBlock>` had been
+ * de-GitHub-ed — every fenced code block rendered through `Message`/
+ * `MarkdownView`/`Reasoning`'s Streamdown instance still went through this
+ * plugin, whose `getThemes()` is FROZEN at import time to
+ * `["github-light", "github-dark"]`).
+ *
+ * Streamdown's dual-theme mechanism (`createCodePlugin({ themes: [light, dark] })`)
+ * expects exactly TWO themes and picks between them purely via the `.dark` CSS
+ * selector — but brand-ui ships THREE themes (light/dark),
+ * and any dark-declaring theme matches `.dark` too (see `_code-block-theme.ts`). Passing a real
+ * light/dark PAIR would still force such a theme into the dark slot. Instead
+ * this pins BOTH slots to `buildCodeBlockTheme()` — the SAME brand-token-derived
+ * theme the active `data-theme` resolves to — so whichever slot the `.dark`
+ * selector picks, it's the CORRECT theme for whatever is actually active.
+ *
+ * Re-derives on every `data-theme` mutation (a `MutationObserver` on
+ * `<html>`, mirroring `code-block.tsx`'s own) and returns a NEW plugin object
+ * each time, because Streamdown only re-reads `plugins.code.getThemes()` when
+ * the `plugins.code` object's REFERENCE changes (see streamdown's internal
+ * `shikiTheme` memo) — a mutated-in-place plugin would never be picked up.
+ */
+function useReactiveCodePlugin() {
+  const [revision, setRevision] = useState(0);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const observer = new MutationObserver(() => setRevision((r) => r + 1));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  return useMemo(() => {
+    const theme = buildCodeBlockTheme();
+    return createCodePlugin({ themes: [theme, theme] });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- revision is the trigger; the theme itself is re-read live off document.documentElement.
+  }, [revision]);
+}
+
+/**
+ * The plugin set every `@elabs-ai/components-ai` markdown surface renders with.
+ *
+ * `mermaid` is the LAZY plugin (`./_lazy-mermaid`): the engine + d3 + DOMPurify
+ * load on first diagram render, not in the entry chunk of every consumer. `code`
+ * is the reactive, brand-token-derived plugin above (#315) — never the
+ * `@streamdown/code` package's static `github-light`/`github-dark` default.
+ * Memoized so Streamdown sees a referentially stable `plugins` prop except when
+ * the active theme actually changes.
+ */
+export function useStreamdownPlugins() {
+  const code = useReactiveCodePlugin();
+  return useMemo(() => ({ cjk, code, math, mermaid: lazyMermaid }), [code]);
+}
+
+/*
+ * The translation MAP moved down to `@elabs-ai/components-ui`
+ * (`lib/streamdown-translations.ts`) when `@elabs-ai/components-viewer`
+ * became a second Streamdown renderer — the two packages may not import each
+ * other. What stays here is the half that needs the dependency itself: the
+ * proof that the shared key list is still COMPLETE.
+ */
+
+// `satisfies` proves every key in the shared list is real…
+const _keysAreReal =
+  STREAMDOWN_TRANSLATION_KEYS satisfies readonly (keyof StreamdownTranslations)[];
+void _keysAreReal;
+
+// …and this proves the converse. If a streamdown upgrade ADDS a translation
+// key, the assignment below stops building until the shared list (and the
+// `ai.streamdown.*` English defaults) catch up, instead of silently leaking
+// that key in English. The tripwire lives in the package that pins the version.
+type MissingTranslationKeys = Exclude<keyof StreamdownTranslations, StreamdownTranslationKey>;
+const _noMissingTranslationKeys: [MissingTranslationKeys] extends [never] ? true : false = true;
+void _noMissingTranslationKeys;
+
+export { useStreamdownTranslations };

package/src/agent-timeline.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Calculator, Database, PencilLine, Search } from "lucide-react";
+import { AgentStep, AgentTimeline } from "./agent-timeline";
+import { ToolDetails, ToolInput, ToolOutput } from "./tool";
+
+const meta = {
+  title: "AI/AgentTimeline",
+  component: AgentTimeline,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AgentTimeline>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// The execution-trace grammar (#192, research 10 §B.3): one rail, one status
+// vocabulary, business summaries — not JSON — as the readable line.
+export const Default: Story = {
+  render: () => (
+    <AgentTimeline className="max-w-prose">
+      <AgentStep
+        icon={Search}
+        status="complete"
+        name="Searched financial filings"
+        summary="3 documents · Q3 10-Q, earnings deck, board pack"
+      />
+      <AgentStep
+        icon={Database}
+        status="complete"
+        name="Queried finance.revenue"
+        summary="8 rows reconciled · 0 variances"
+      />
+      <AgentStep icon={Calculator} status="running" name="Computing QoQ deltas" />
+      <AgentStep icon={PencilLine} status="pending" name="Draft the board note" />
+    </AgentTimeline>
+  ),
+};
+
+// An inspect-only tool call rides the rail as a step; its JSON stays one
+// expand away behind the default-collapsed ToolDetails (research 10 §B.5).
+export const InspectOnlyToolStep: Story = {
+  name: "Inspect-only Tool as a step",
+  render: () => (
+    <AgentTimeline className="max-w-prose">
+      <AgentStep
+        icon={Database}
+        status="complete"
+        name="Queried finance.revenue"
+        summary="8 rows reconciled · 0 variances"
+      >
+        <ToolDetails>
+          <ToolInput
+            input={{
+              sql: "select quarter, region, sum(amount) from finance.revenue group by 1,2",
+            }}
+          />
+          <ToolOutput
+            output={{ rows: 8, q3_total: 48200000, qoq_growth: 0.124 }}
+            errorText={undefined}
+          />
+        </ToolDetails>
+      </AgentStep>
+      <AgentStep icon={Calculator} status="failed" name="Computing QoQ deltas" />
+      <AgentStep icon={PencilLine} status="skipped" name="Draft the board note" />
+    </AgentTimeline>
+  ),
+};

package/src/agent-timeline.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Search } from "lucide-react";
+import { AgentStep, AgentTimeline } from "./agent-timeline";
+import {
+  ChainOfThought,
+  ChainOfThoughtContent,
+  ChainOfThoughtHeader,
+  ChainOfThoughtStep,
+} from "./chain-of-thought";
+
+describe("AgentTimeline / AgentStep (#192, research 10 §B.3)", () => {
+  it("renders steps as list items on the canonical rail with status, badge and summary", () => {
+    render(
+      <AgentTimeline data-testid="timeline">
+        <AgentStep
+          icon={Search}
+          status="complete"
+          name="Searched financial filings"
+          summary="3 documents"
+        />
+        <AgentStep status="running" name="Computing QoQ deltas" />
+      </AgentTimeline>,
+    );
+    expect(screen.getByTestId("timeline").tagName).toBe("OL");
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveAttribute("data-status", "complete");
+    expect(items[1]).toHaveAttribute("data-status", "running");
+    expect(screen.getByText("Complete")).toBeInTheDocument(); // StatusBadge label
+    expect(screen.getByText("3 documents")).toBeInTheDocument();
+    expect(screen.getByText("Searched financial filings")).toBeInTheDocument();
+  });
+
+  it("renders rich detail children under the node; hideBadge drops the badge", () => {
+    render(
+      <AgentTimeline>
+        <AgentStep name="Queried finance.revenue" status="complete" hideBadge>
+          <div data-testid="detail">8 rows · 0 variances</div>
+        </AgentStep>
+      </AgentTimeline>,
+    );
+    expect(screen.getByTestId("detail")).toBeInTheDocument();
+    expect(screen.queryByText("Complete")).not.toBeInTheDocument();
+  });
+
+  it("merges className and spreads props on the li", () => {
+    render(
+      <AgentTimeline>
+        <AgentStep name="Step" className="custom-step" aria-label="step" />
+      </AgentTimeline>,
+    );
+    const li = screen.getByRole("listitem");
+    expect(li).toHaveClass("custom-step");
+    expect(li).toHaveAttribute("aria-label", "step");
+  });
+});
+
+describe("ChainOfThoughtStep → AgentStep alias (#192 convergence)", () => {
+  it("renders on the canonical rail with the 3-state vocabulary mapped in", () => {
+    render(
+      <ChainOfThought defaultOpen>
+        <ChainOfThoughtHeader>Working</ChainOfThoughtHeader>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtStep label="Searched filings" description="Q3 10-Q" status="active" />
+        </ChainOfThoughtContent>
+      </ChainOfThought>,
+    );
+    const li = screen.getByRole("listitem");
+    expect(li).toHaveAttribute("data-status", "running");
+    expect(screen.getByText("Searched filings")).toBeInTheDocument();
+    expect(screen.getByText("Q3 10-Q")).toBeInTheDocument();
+  });
+});

package/src/agent-timeline.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+/**
+ * AgentTimeline / AgentStep — the agent execution-trace rail (#192,
+ * research 10 §B.3).
+ *
+ * The convergence compound of the execution-trace grammar: sequenced,
+ * status-bearing agent steps render on ONE visual spine — the canonical
+ * `@elabs-ai/components-ui` Timeline rail (`TimelineRoot`/`TimelineItem`, #190) — speaking
+ * ONE status vocabulary — the closed 7-state `Status` enum (`StatusBadge`,
+ * #189). `ChainOfThought`'s steps and `Task`'s body compose this instead of
+ * hand-rolling rails; an inspect-only `Tool` call renders as an `AgentStep`
+ * with its JSON behind a `ToolDetails` disclosure as children.
+ *
+ * Deliberately NOT converged (different speech-acts, research 10 §B.3):
+ * `Plan` (a proposal, not an executed step), `Checkpoint` (a divider/restore
+ * point), `Reasoning` (inline thinking prose).
+ *
+ * The shared rail is motion-free; the gated entrance animation lives here,
+ * in the composing consumer (research 10 §B.2).
+ */
+import { StatusBadge, TimelineItem, TimelineRoot, type Status } from "@elabs-ai/components-ui";
+import type { TimelineItemProps, TimelineRootProps } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { LucideIcon } from "lucide-react";
+import { forwardRef, memo, type ReactNode } from "react";
+
+export type AgentTimelineProps = TimelineRootProps;
+
+/** The `<ol>` rail an agent run's steps sit on (canonical @elabs-ai/components-ui spine). */
+export const AgentTimeline = forwardRef<HTMLOListElement, AgentTimelineProps>(
+  function AgentTimeline({ className, ...props }, ref) {
+    return <TimelineRoot ref={ref} className={cn("not-prose w-full", className)} {...props} />;
+  },
+);
+
+export interface AgentStepProps extends Omit<TimelineItemProps, "children" | "description"> {
+  /** Optional leading concept glyph on the title row (Lucide). */
+  icon?: LucideIcon;
+  /** What the agent did — the step's title (`text-body`). */
+  name: ReactNode;
+  /** The business summary line under the name (`text-meta`), not JSON. */
+  summary?: ReactNode;
+  /**
+   * The canonical execution status (closed 7-state enum). Drives the rail
+   * node AND the `StatusBadge`. `skipped` is the agent-step-only state with
+   * no SDK source (research 10 §B.1).
+   */
+  status?: Status;
+  /**
+   * Drop the inline `StatusBadge` (the rail node still carries the status
+   * color). For quiet prose rails — e.g. the `ChainOfThought` alias — where a
+   * badge per step would shout.
+   */
+  hideBadge?: boolean;
+  /** Rich detail under the node (e.g. a `ToolDetails` disclosure, results). */
+  children?: ReactNode;
+}
+
+/**
+ * One executed/executing step: icon + name + `StatusBadge` + business
+ * summary, with composed children for detail. Memoized for long transcripts
+ * (research 10 §G.6).
+ */
+export const AgentStep = memo(
+  forwardRef<HTMLLIElement, AgentStepProps>(function AgentStep(
+    {
+      icon: Icon,
+      name,
+      summary,
+      status = "pending",
+      hideBadge = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      <TimelineItem
+        ref={ref}
+        status={status}
+        description={
+          summary ? <span className="text-meta text-muted-foreground">{summary}</span> : undefined
+        }
+        detail={children}
+        className={cn(
+          "fade-in-0 slide-in-from-top-2 animate-in [--tw-ease:var(--ease-entrance)] motion-reduce:animate-none",
+          className,
+        )}
+        {...props}
+      >
+        <span className="inline-flex items-center gap-2">
+          {Icon ? (
+            <Icon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+          ) : null}
+          {name}
+          {hideBadge ? null : <StatusBadge size="sm" status={status} />}
+        </span>
+      </TimelineItem>
+    );
+  }),
+);
+
+AgentTimeline.displayName = "AgentTimeline";
+AgentStep.displayName = "AgentStep";