@actioneer/ads 0.3.1 → 0.4.0

package/components/ai-elements/agent-trace.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { ToolState } from './tool';
+/**
+ * AgentTrace — the ENTIRE agent reasoning trace as one component, so any
+ * consumer gets the complete, correct experience instead of hand-wiring it
+ * from ChainOfThought / Task / Tool primitives and getting a subset (a
+ * misaligned connector, no live line, no slow-call handoff).
+ *
+ * It is live-only and fully controlled: pass the current agent state, update
+ * it as the run progresses, and the component reflects it. There is no
+ * internal replay engine — the consuming app owns progression (and, if it
+ * wants a counting clock, ticks `elapsed`).
+ *
+ * What it renders, always:
+ *   1. Phases  — steps grouped by `group`, each a `Task` disclosure; finished
+ *                phases fold away while another is active.
+ *   2. Steps   — a `ChainOfThought connector="tree"` per phase; settled steps
+ *                hang off the phase on a measured tree connector.
+ *   3. Tools   — each call is a `Tool` card hung off its step as a branch.
+ * Plus the reason-first live line (the `active` step is narrated by
+ * `ResearchActivity` and joins the tree only once it settles) and, when an
+ * active step outruns `slowSeconds`, the handoff `Alert`.
+ */
+/** A single tool call within a step. */
+export interface AgentTraceCall {
+    name: string;
+    state: ToolState;
+    input?: unknown;
+    /** Rendered when the call succeeds. */
+    output?: unknown;
+    /** Rendered when the call errors. */
+    error?: string;
+}
+/**
+ * `active` is the in-flight step (there should be at most one) — it is owned
+ * by the live line, not the tree. `pending` steps are not shown yet.
+ */
+export type AgentTraceStepStatus = "complete" | "active" | "error" | "pending";
+export interface AgentTraceStep {
+    /** Stable identity — used for the review handoff and React keys. */
+    id: string;
+    /** Phase / section this step belongs to, e.g. "Research". */
+    group: string;
+    /** Icon for the phase header (only the first step in a group needs it). */
+    groupIcon?: ReactNode;
+    /** The step's own leading icon. */
+    icon?: ReactNode;
+    label: string;
+    /** Attribution — shown only when it differs from `mainAgent`. */
+    agent?: string;
+    /** The agent's own narration for this step. */
+    detail?: ReactNode;
+    /** Cubes / tables / sources this step touched, as chips. */
+    sources?: string[];
+    status: AgentTraceStepStatus;
+    /** Preformatted elapsed (e.g. "0:06"); falls back to `seconds`. */
+    elapsed?: ReactNode;
+    /** Wall clock in seconds — powers the phase total and slow detection. */
+    seconds?: number;
+    calls?: AgentTraceCall[];
+}
+export interface AgentTraceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    steps: AgentTraceStep[];
+    /** Attribution equal to this is suppressed (it's the orchestrator). */
+    mainAgent?: string;
+    /** An active step past this many seconds shows the handoff. Default 60. */
+    slowSeconds?: number;
+    /** Ids already handed off — their button reads "Sent" and is disabled. */
+    reviewedStepIds?: string[];
+    /** Fires when the reader hands a slow step off for review. */
+    onSendForReview?: (step: AgentTraceStep) => void;
+    /** Override the handoff copy for a given stuck step. */
+    slowMessage?: (step: AgentTraceStep) => {
+        title: ReactNode;
+        detail: ReactNode;
+    };
+    /**
+     * Render a tool call yourself instead of the built-in card — for consumers
+     * with richer tool rendering (SQL extraction, custom payloads). Falls back
+     * to the default `Tool` card.
+     */
+    renderCall?: (call: AgentTraceCall) => ReactNode;
+}
+export declare const AgentTrace: {
+    ({ steps, mainAgent, slowSeconds, reviewedStepIds, onSendForReview, slowMessage, renderCall, className, ...props }: AgentTraceProps): import("react").JSX.Element;
+    displayName: string;
+};

package/components/ai-elements/agent-trace.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsxs as a, jsx as t, Fragment as j } from "react/jsx-runtime";
+import { memo as b, useState as D, useRef as _, useEffect as z } from "react";
+import { cn as L } from "../../lib/cn.js";
+import { Clock as F } from "../../lib/icons.js";
+import { Alert as G, AlertTitle as H, AlertDescription as U } from "../alert.js";
+import { Button as B } from "../button.js";
+import { Text as K } from "../typography.js";
+import { ChainOfThoughtStep as P, ChainOfThoughtTrigger as W, ChainOfThoughtContent as q, ChainOfThoughtItem as J, ChainOfThoughtSearchResults as Q, ChainOfThoughtSearchResult as V, ChainOfThought as X } from "./chain-of-thought.js";
+import { ResearchActivity as Y } from "./research-activity.js";
+import { Task as Z, TaskTrigger as ee, TaskContent as te } from "./task.js";
+import { Tool as ne, ToolHeader as re, ToolContent as oe, ToolInput as se, ToolOutput as ie } from "./tool.js";
+const ae = "Main Agent", le = 60;
+function x(e) {
+  const o = Math.floor(e);
+  return `${Math.floor(o / 60)}:${String(o % 60).padStart(2, "0")}`;
+}
+function v(e) {
+  if (e.elapsed != null) return e.elapsed;
+  if (e.seconds != null) return x(e.seconds);
+}
+function y(e) {
+  const o = [];
+  for (const s of e) o.includes(s.group) || o.push(s.group);
+  return o;
+}
+function ce(e) {
+  const o = new Set(e.flatMap((i) => i.sources ?? [])).size, s = e.reduce((i, c) => i + (c.seconds ?? 0), 0), l = [];
+  return o && l.push(`${o} ${o === 1 ? "source" : "sources"}`), s && e.length > 1 && l.push(x(s)), l.join(" · ") || void 0;
+}
+function de(e) {
+  var i, c, h;
+  const o = (c = (i = e.calls) == null ? void 0 : i[0]) == null ? void 0 : c.name, s = (((h = e.calls) == null ? void 0 : h.length) ?? 0) - 1, l = s > 0 ? ` ${s} other call${s === 1 ? "" : "s"} in this step ${s === 1 ? "is" : "are"} waiting behind it.` : "";
+  return {
+    title: o ? `The ${o} call has not returned` : "This step has not finished",
+    detail: /* @__PURE__ */ a(j, { children: [
+      e.detail,
+      l,
+      " Send for review to the Actioneer team to help with future runs."
+    ] })
+  };
+}
+const A = b(({ call: e }) => /* @__PURE__ */ a(ne, { children: [
+  /* @__PURE__ */ t(re, { title: e.name, type: `tool-${e.name}`, state: e.state }),
+  /* @__PURE__ */ a(oe, { children: [
+    e.input !== void 0 && /* @__PURE__ */ t(se, { input: e.input }),
+    /* @__PURE__ */ t(
+      ie,
+      {
+        output: e.state === "output-available" ? e.output : void 0,
+        errorText: e.state === "output-error" ? e.error : void 0
+      }
+    )
+  ] })
+] }));
+A.displayName = "AgentTrace.ToolCard";
+const O = b(
+  ({
+    step: e,
+    mainAgent: o,
+    renderCall: s
+  }) => {
+    const l = v(e);
+    return /* @__PURE__ */ a(P, { status: e.status === "error" ? "error" : "complete", children: [
+      /* @__PURE__ */ a(W, { leftIcon: e.icon, endContent: l, children: [
+        /* @__PURE__ */ t("span", { children: e.label }),
+        e.agent && e.agent !== o && /* @__PURE__ */ t("span", { className: "ml-2 text-xs font-normal text-tertiary", children: e.agent })
+      ] }),
+      /* @__PURE__ */ t(q, { children: /* @__PURE__ */ a("div", { className: "-ml-5", style: { "--tree-rail-lead": "18px" }, children: [
+        e.detail != null && /* @__PURE__ */ t("div", { className: "ads-tree-rail pb-3", children: /* @__PURE__ */ t(J, { children: e.detail }) }),
+        e.sources && e.sources.length > 0 && /* @__PURE__ */ t("div", { className: "ads-tree-rail pb-3", children: /* @__PURE__ */ t(Q, { children: e.sources.map((i) => /* @__PURE__ */ t(V, { children: i }, i)) }) }),
+        (e.calls ?? []).map((i, c) => /* @__PURE__ */ t(
+          "div",
+          {
+            className: "ads-tree-branch pb-2 last:pb-0",
+            style: { "--tree-elbow": "23px" },
+            children: s ? s(i) : /* @__PURE__ */ t(A, { call: i })
+          },
+          c
+        ))
+      ] }) })
+    ] });
+  }
+);
+O.displayName = "AgentTrace.StepRow";
+const ue = ({
+  steps: e,
+  mainAgent: o = ae,
+  slowSeconds: s = le,
+  reviewedStepIds: l,
+  onSendForReview: i,
+  slowMessage: c = de,
+  renderCall: h,
+  className: $,
+  ...k
+}) => {
+  var S;
+  const n = e.find((r) => r.status === "active") ?? null, f = e.filter((r) => r.status === "complete" || r.status === "error"), p = new Set(l ?? []), [E, C] = D(/* @__PURE__ */ new Set()), w = _(null);
+  z(() => {
+    const r = (n == null ? void 0 : n.group) ?? null;
+    r == null || r === w.current || (w.current = r, C(new Set(y(e).filter((d) => d !== r))));
+  }, [n == null ? void 0 : n.group, e]);
+  const N = y(f).map((r) => {
+    var d;
+    return {
+      group: r,
+      icon: (d = f.find((u) => u.group === r)) == null ? void 0 : d.groupIcon,
+      steps: f.filter((u) => u.group === r)
+    };
+  }), M = (n == null ? void 0 : n.seconds) ?? 0, I = n != null && M >= s, g = n ? c(n) : null;
+  return /* @__PURE__ */ a("div", { "data-slot": "agent-trace", className: L("w-full", $), ...k, children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-3", children: N.map(({ group: r, icon: d, steps: u }) => /* @__PURE__ */ a(
+      Z,
+      {
+        open: !E.has(r),
+        onOpenChange: (m) => C((R) => {
+          const T = new Set(R);
+          return m ? T.delete(r) : T.add(r), T;
+        }),
+        children: [
+          /* @__PURE__ */ t(ee, { title: r, icon: d, endContent: ce(u) }),
+          /* @__PURE__ */ t(te, { children: /* @__PURE__ */ t(X, { connector: "tree", children: u.map((m) => /* @__PURE__ */ t(
+            O,
+            {
+              step: m,
+              mainAgent: o,
+              renderCall: h
+            },
+            m.id
+          )) }) })
+        ]
+      },
+      r
+    )) }),
+    n && /* @__PURE__ */ a("div", { className: "mt-3", children: [
+      /* @__PURE__ */ t(
+        Y,
+        {
+          status: "active",
+          open: !0,
+          onOpenChange: () => {
+          },
+          elapsed: v(n) ?? "0:00",
+          sourceCount: ((S = n.sources) == null ? void 0 : S.length) ?? 0,
+          activity: n.label,
+          activityKey: n.id,
+          activityPlacement: "bottom",
+          collapsible: !1,
+          children: /* @__PURE__ */ t("span", {})
+        }
+      ),
+      I && g && /* @__PURE__ */ t(G, { variant: "warning", icon: /* @__PURE__ */ t(F, {}), className: "mt-3", children: /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+        /* @__PURE__ */ a("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ a(H, { children: [
+            g.title,
+            " —",
+            " ",
+            /* @__PURE__ */ t("span", { className: "tabular-nums text-tertiary", children: v(n) })
+          ] }),
+          /* @__PURE__ */ t(U, { children: g.detail })
+        ] }),
+        i && /* @__PURE__ */ t(
+          B,
+          {
+            size: "sm",
+            variant: p.has(n.id) ? "ghost" : "secondary",
+            disabled: p.has(n.id),
+            onClick: () => i(n),
+            children: p.has(n.id) ? "Sent" : "Skip and send"
+          }
+        )
+      ] }) })
+    ] }),
+    N.length === 0 && !n && /* @__PURE__ */ t(K, { size: "sm", className: "text-tertiary", children: "No steps yet." })
+  ] });
+};
+ue.displayName = "AgentTrace";
+export {
+  ue as AgentTrace
+};

package/components/ai-elements/chain-of-thought.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as e, jsxs as c, Fragment as R } from "react/jsx-runtime";
+import { jsx as t, jsxs as c, Fragment as R } from "react/jsx-runtime";
 import { Badge as y } from "../badge.js";
 import { Collapsible as N, CollapsibleTrigger as C, CollapsibleContent as T } from "../collapsible.js";
 import { ChevronRight as M, ChevronDown as w, WarningCircle as j, Database as _ } from "../../lib/icons.js";
@@ -13,8 +13,8 @@ const k = O(!1), E = O("rail"), B = l(
     role: o = "list",
     connector: r = "rail",
     children: a,
-    ...t
-  }) => /* @__PURE__ */ e(
+    ...e
+  }) => /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "chain-of-thought",
@@ -27,8 +27,8 @@ const k = O(!1), E = O("rail"), B = l(
         ],
         i
       ),
-      ...t,
-      children: /* @__PURE__ */ e(E.Provider, { value: r, children: a })
+      ...e,
+      children: /* @__PURE__ */ t(E.Provider, { value: r, children: a })
     }
   )
 ), F = l(
@@ -37,54 +37,54 @@ const k = O(!1), E = O("rail"), B = l(
     defaultOpen: o,
     open: r,
     onOpenChange: a,
-    status: t = "complete",
+    status: e = "complete",
     role: s = "listitem",
     "aria-busy": h,
     children: m,
     ...d
   }) => {
     const p = S(E), u = r !== void 0, [g, f] = D(
-      o ?? t === "active"
-    ), b = A(t), z = b.current !== "active" && t === "active", v = u ? r : z || g;
+      o ?? e === "active"
+    ), b = A(e), z = b.current !== "active" && e === "active", v = u ? r : z || g;
     return I(() => {
       const x = b.current;
-      b.current = t, !(x === "active" || t !== "active") && (u || f(!0), a == null || a(!0));
-    }, [u, a, t]), /* @__PURE__ */ e(
+      b.current = e, !(x === "active" || e !== "active") && (u || f(!0), a == null || a(!0));
+    }, [u, a, e]), /* @__PURE__ */ t(
       N,
       {
         "data-slot": "chain-of-thought-step",
-        "data-status": t,
+        "data-status": e,
         open: v,
         onOpenChange: (x) => {
           u || f(x), a == null || a(x);
         },
         role: s,
-        "aria-current": t === "active" ? "step" : void 0,
-        "aria-busy": h ?? (t === "active" || void 0),
+        "aria-current": e === "active" ? "step" : void 0,
+        "aria-busy": h ?? (e === "active" || void 0),
         className: n(
           "group/cot-step relative pb-2",
           // Connector rail: a 16px segment centred in the 28px gap between a
           // collapsed step's icon and the next one (top-8 = 32px from the step
           // top, ending 4px past its box). It stretches with an open step.
-          p === "rail" && "before:absolute before:top-8 before:-bottom-1 before:left-2 before:w-px before:bg-border before:content-['']",
+          p === "rail" && "before:absolute before:top-8 before:-bottom-1 before:left-2 before:w-px before:bg-border-strong before:content-['']",
           // Tree connector: a continuous rail down the group with an elbow
           // reaching EVERY step — the same branch language as Tree/TreeItem.
           // The last step drops the rail; its elbow draws the final segment.
           p === "tree" && [
             "ps-5",
-            "before:absolute before:inset-y-0 before:left-0 before:border-l before:border-border before:content-['']",
+            "before:absolute before:inset-y-0 before:left-0 before:border-l before:border-border-strong before:content-['']",
             "last:before:hidden",
             // top-0.5 + h-4 lands the elbow at 18px — the step icon's centre.
-            "after:absolute after:left-0 after:top-0.5 after:h-4 after:w-4 after:rounded-bl-[9px] after:border-b after:border-l after:border-border after:content-['']"
+            "after:absolute after:left-0 after:top-0.5 after:h-4 after:w-4 after:rounded-bl-[9px] after:border-b after:border-l after:border-border-strong after:content-['']"
           ],
-          t === "complete" && "text-secondary",
-          t === "active" && "text-primary",
-          t === "pending" && "text-tertiary/60",
-          t === "error" && "text-danger",
+          e === "complete" && "text-secondary",
+          e === "active" && "text-primary",
+          e === "pending" && "text-tertiary/60",
+          e === "error" && "text-danger",
           i
         ),
         ...d,
-        children: /* @__PURE__ */ e(k.Provider, { value: v, children: m })
+        children: /* @__PURE__ */ t(k.Provider, { value: v, children: m })
       }
     );
   }
@@ -94,10 +94,10 @@ const k = O(!1), E = O("rail"), B = l(
     children: o,
     leftIcon: r,
     endContent: a,
-    caret: t = !0,
+    caret: e = !0,
     swapIconOnHover: s = !0,
     ...h
-  }) => /* @__PURE__ */ e(C, { asChild: !0, ...h, children: /* @__PURE__ */ c(
+  }) => /* @__PURE__ */ t(C, { asChild: !0, ...h, children: /* @__PURE__ */ c(
     "button",
     {
       type: "button",
@@ -111,23 +111,23 @@ const k = O(!1), E = O("rail"), B = l(
         i
       ),
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "span",
           {
             "aria-hidden": !0,
             className: "relative z-10 block size-4 shrink-0",
             children: r ? /* @__PURE__ */ c(R, { children: [
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ t(
                 "span",
                 {
                   className: n(
                     "absolute inset-0 flex items-center justify-center transition-opacity duration-(--duration-fast) ease-out [&>svg]:size-4 motion-reduce:transition-none",
-                    !t && s && "group-hover/cot-trigger:opacity-0 group-data-[state=open]/cot-trigger:opacity-0"
+                    !e && s && "group-hover/cot-trigger:opacity-0 group-data-[state=open]/cot-trigger:opacity-0"
                   ),
                   children: r
                 }
               ),
-              !t && s && /* @__PURE__ */ e(
+              !e && s && /* @__PURE__ */ t(
                 M,
                 {
                   className: n(
@@ -137,13 +137,13 @@ const k = O(!1), E = O("rail"), B = l(
                   )
                 }
               )
-            ] }) : /* @__PURE__ */ e("span", { className: "absolute top-1/2 left-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-dot bg-current" })
+            ] }) : /* @__PURE__ */ t("span", { className: "absolute top-1/2 left-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-dot bg-current" })
           }
         ),
-        /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", children: o }),
+        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", children: o }),
         /* @__PURE__ */ c("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
-          a != null && /* @__PURE__ */ e("span", { className: "text-xs text-tertiary tabular-nums", children: a }),
-          t && /* @__PURE__ */ e(
+          a != null && /* @__PURE__ */ t("span", { className: "text-xs text-tertiary tabular-nums", children: a }),
+          e && /* @__PURE__ */ t(
             w,
             {
               className: "size-4 shrink-0 text-tertiary transition-transform duration-(--duration-fast) ease-out group-data-[state=open]/cot-trigger:rotate-180 motion-reduce:transition-none",
@@ -157,7 +157,7 @@ const k = O(!1), E = O("rail"), B = l(
 ), W = l(
   ({ className: i, children: o, ...r }) => {
     const a = S(k);
-    return /* @__PURE__ */ e(T, { forceMount: !0, asChild: !0, ...r, children: /* @__PURE__ */ e(
+    return /* @__PURE__ */ t(T, { forceMount: !0, asChild: !0, ...r, children: /* @__PURE__ */ t(
       L.div,
       {
         "data-slot": "chain-of-thought-content",
@@ -173,12 +173,12 @@ const k = O(!1), E = O("rail"), B = l(
           "data-[state=closed]:pointer-events-none",
           i
         ),
-        children: /* @__PURE__ */ e("div", { className: "pt-2 pb-1 pl-7", children: o })
+        children: /* @__PURE__ */ t("div", { className: "pt-2 pb-1 pl-7", children: o })
       }
     ) });
   }
 ), X = l(
-  ({ className: i, ...o }) => /* @__PURE__ */ e(
+  ({ className: i, ...o }) => /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "chain-of-thought-item",
@@ -191,7 +191,7 @@ const k = O(!1), E = O("rail"), B = l(
     }
   )
 ), q = l(
-  ({ className: i, ...o }) => /* @__PURE__ */ e(
+  ({ className: i, ...o }) => /* @__PURE__ */ t(
     "div",
     {
       className: n("flex flex-wrap items-center gap-2", i),
@@ -199,7 +199,7 @@ const k = O(!1), E = O("rail"), B = l(
     }
   )
 ), G = l(
-  ({ className: i, children: o, ...r }) => /* @__PURE__ */ e(
+  ({ className: i, children: o, ...r }) => /* @__PURE__ */ t(
     y,
     {
       className: n("gap-1 font-normal", i),
@@ -215,7 +215,7 @@ const k = O(!1), E = O("rail"), B = l(
     title: o,
     tag: r,
     meta: a,
-    source: t,
+    source: e,
     error: s,
     icon: h,
     defaultOpen: m = !1,
@@ -230,7 +230,7 @@ const k = O(!1), E = O("rail"), B = l(
       className: n("w-full", i),
       ...p,
       children: [
-        /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ c(
+        /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ c(
           "button",
           {
             type: "button",
@@ -241,7 +241,7 @@ const k = O(!1), E = O("rail"), B = l(
               "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none"
             ),
             children: [
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ t(
                 "span",
                 {
                   "aria-hidden": !0,
@@ -249,11 +249,11 @@ const k = O(!1), E = O("rail"), B = l(
                     "shrink-0 [&>svg]:size-3.5",
                     s != null ? "text-danger" : "text-tertiary"
                   ),
-                  children: h ?? (s != null ? /* @__PURE__ */ e(j, {}) : /* @__PURE__ */ e(_, {}))
+                  children: h ?? (s != null ? /* @__PURE__ */ t(j, {}) : /* @__PURE__ */ t(_, {}))
                 }
               ),
-              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: o }),
-              r != null && /* @__PURE__ */ e(
+              /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: o }),
+              r != null && /* @__PURE__ */ t(
                 y,
                 {
                   color: "default",
@@ -262,8 +262,8 @@ const k = O(!1), E = O("rail"), B = l(
                   children: r
                 }
               ),
-              a != null && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: a }),
-              /* @__PURE__ */ e(
+              a != null && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: a }),
+              /* @__PURE__ */ t(
                 w,
                 {
                   "aria-hidden": !0,
@@ -276,7 +276,7 @@ const k = O(!1), E = O("rail"), B = l(
             ]
           }
         ) }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           T,
           {
             "data-slot": "chain-of-thought-evidence-content",
@@ -285,9 +285,9 @@ const k = O(!1), E = O("rail"), B = l(
               "data-[state=closed]:pointer-events-none data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none"
             ),
             children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-1.5 pt-1.5", children: [
-              s != null && /* @__PURE__ */ e("p", { className: "text-xs text-danger", children: s }),
+              s != null && /* @__PURE__ */ t("p", { className: "text-xs text-danger", children: s }),
               d,
-              t != null && /* @__PURE__ */ e("p", { className: "text-xs text-tertiary", children: t })
+              e != null && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: e })
             ] })
           }
         )
@@ -300,10 +300,10 @@ const k = O(!1), E = O("rail"), B = l(
     columns: o,
     rows: r,
     totalRows: a,
-    flag: t,
+    flag: e,
     ...s
   }) => {
-    const h = a != null && a > r.length, m = (t == null ? void 0 : t.color) ?? "default";
+    const h = a != null && a > r.length, m = (e == null ? void 0 : e.color) ?? "default";
     return /* @__PURE__ */ c(
       "div",
       {
@@ -311,8 +311,8 @@ const k = O(!1), E = O("rail"), B = l(
         className: n("overflow-hidden rounded-lg bg-surface", i),
         ...s,
         children: [
-          /* @__PURE__ */ e("div", { className: "max-h-56 overflow-auto", children: /* @__PURE__ */ c("table", { className: "w-full border-collapse text-xs tabular-nums", children: [
-            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "text-tertiary", children: o.map((d) => /* @__PURE__ */ e(
+          /* @__PURE__ */ t("div", { className: "max-h-56 overflow-auto", children: /* @__PURE__ */ c("table", { className: "w-full border-collapse text-xs tabular-nums", children: [
+            /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { className: "text-tertiary", children: o.map((d) => /* @__PURE__ */ t(
               "th",
               {
                 className: n(
@@ -323,9 +323,9 @@ const k = O(!1), E = O("rail"), B = l(
               },
               d.key
             )) }) }),
-            /* @__PURE__ */ e("tbody", { children: r.map((d, p) => {
-              const u = t != null && String(d[t.key]) === String(t.value);
-              return /* @__PURE__ */ e("tr", { className: n(u && "bg-muted"), children: o.map((g, f) => /* @__PURE__ */ e(
+            /* @__PURE__ */ t("tbody", { children: r.map((d, p) => {
+              const u = e != null && String(d[e.key]) === String(e.value);
+              return /* @__PURE__ */ t("tr", { className: n(u && "bg-muted"), children: o.map((g, f) => /* @__PURE__ */ t(
                 "td",
                 {
                   className: n(
@@ -353,7 +353,7 @@ const k = O(!1), E = O("rail"), B = l(
     );
   }
 ), Q = l(
-  ({ className: i, role: o = "list", ...r }) => /* @__PURE__ */ e(
+  ({ className: i, role: o = "list", ...r }) => /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "chain-of-thought-metrics",
@@ -374,37 +374,37 @@ const k = O(!1), E = O("rail"), B = l(
     label: o,
     value: r,
     sub: a,
-    color: t = "default",
+    color: e = "default",
     role: s = "listitem",
     ...h
   }) => /* @__PURE__ */ c(
     "div",
     {
       "data-slot": "chain-of-thought-metric",
-      "data-color": t,
+      "data-color": e,
       role: s,
       className: n("min-w-0", i),
       ...h,
       children: [
-        /* @__PURE__ */ e("div", { className: "text-xs text-tertiary", children: o }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: o }),
+        /* @__PURE__ */ t(
           "div",
           {
             className: n(
               "text-base font-semibold tabular-nums",
-              V[t]
+              V[e]
             ),
             children: r
           }
         ),
-        a != null && /* @__PURE__ */ e("div", { className: "text-xs text-tertiary", children: a })
+        a != null && /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: a })
       ]
     }
   )
 ), Z = l(
   ({ className: i, children: o, caption: r, ...a }) => /* @__PURE__ */ c("div", { className: n("space-y-2", i), ...a, children: [
-    /* @__PURE__ */ e("div", { className: "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: o }),
-    r && /* @__PURE__ */ e("p", { className: "text-xs text-tertiary", children: r })
+    /* @__PURE__ */ t("div", { className: "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: o }),
+    r && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: r })
   ] })
 );
 B.displayName = "ChainOfThought";

package/components/ai-elements/index.d.ts

@@ -1,3 +1,4 @@
+export * from './agent-trace';
 export * from './chain-of-thought';
 export * from './chart';
 export * from './inline-citation';

package/components/ai-elements/tool.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as o, jsxs as l } from "react/jsx-runtime";
 import { isValidElement as c } from "react";
-import { Collapsible as u, CollapsibleContent as m, CollapsibleTrigger as p } from "../collapsible.js";
+import { Collapsible as u, CollapsibleTrigger as m, CollapsibleContent as p } from "../collapsible.js";
 import { Badge as f } from "../badge.js";
 import { Wrench as g, ChevronDown as h, CloseCircle as x, CheckCircle as b, Clock as N, CircleDashed as v } from "../../lib/icons.js";
 import { cn as n } from "../../lib/cn.js";
@@ -47,7 +47,7 @@ const S = ({
   state: a,
   ...i
 }) => /* @__PURE__ */ l(
-  p,
+  m,
   {
     className: n(
       "group/tool-header flex w-full items-center justify-between gap-4 py-3 text-left transition-colors hover:text-primary motion-reduce:transition-none",
@@ -73,7 +73,7 @@ const S = ({
 );
 S.displayName = "ToolHeader";
 const j = ({ className: e, ...t }) => /* @__PURE__ */ o(
-  m,
+  p,
   {
     className: n(
       "overflow-hidden text-foreground outline-none",