@actioneer/ads 0.6.0 → 0.7.0

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

@@ -4,7 +4,7 @@ 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
+ * from ChainOfThought / 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
@@ -13,7 +13,7 @@ import { ToolState } from './tool';
  * wants a counting clock, ticks `elapsed`).
  *
  * What it renders, always:
- *   1. Phases  — steps grouped by `group`, each a `Task` disclosure; finished
+ *   1. Phases  — steps grouped by `group`, each a private disclosure; finished
  *                phases fold away while another is active.
  *   2. Steps   — a tree-connected `ChainOfThought` per phase; settled steps
  *                hang off the phase on a measured tree connector.

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

@@ -1,52 +1,111 @@
 "use client";
 import { jsxs as i, jsx as t, Fragment as q } from "react/jsx-runtime";
-import { memo as _, useState as J, useRef as z, useEffect as D } from "react";
-import { cn as P } from "../../lib/cn.js";
-import { Clock as Q } from "../../lib/icons.js";
-import { Alert as V, AlertTitle as X, AlertDescription as Y } from "../alert.js";
-import { Button as Z } from "../button.js";
-import { Text as ee } from "../typography.js";
-import { ChainOfThoughtStep as te, ChainOfThoughtTrigger as ne, ChainOfThoughtContent as oe, ChainOfThoughtItem as re, ChainOfThoughtSearchResults as ae, ChainOfThoughtSearchResult as se, ChainOfThought as le } from "./chain-of-thought.js";
-import { TraceStateIcon as N } from "./chain-of-thought-icon.js";
+import { createContext as J, memo as P, useState as Q, useRef as j, useEffect as R, useContext as V } from "react";
+import { motion as X } from "motion/react";
+import { cn as Y } from "../../lib/cn.js";
+import { Clock as Z, ChevronDown as ee } from "../../lib/icons.js";
+import { springDisclosure as te } from "../../lib/motion.js";
+import { Alert as ne, AlertTitle as oe, AlertDescription as re } from "../alert.js";
+import { Button as ae } from "../button.js";
+import { Collapsible as se, CollapsibleTrigger as ie, CollapsibleContent as le } from "../collapsible.js";
+import { Text as ce } from "../typography.js";
+import { ChainOfThoughtStep as de, ChainOfThoughtTrigger as ue, ChainOfThoughtContent as he, ChainOfThoughtItem as me, ChainOfThoughtSearchResults as pe, ChainOfThoughtSearchResult as fe, ChainOfThought as ge } from "./chain-of-thought.js";
+import { TraceStateIcon as C } from "./chain-of-thought-icon.js";
 import { ResearchActivity as L } from "./research-activity.js";
-import { Task as ie, TaskTrigger as ce, TaskContent as de } from "./task.js";
-import { Tool as ue, ToolHeader as he, ToolContent as me, ToolInput as fe, ToolOutput as pe } from "./tool.js";
-const ge = "Main Agent", Te = 60;
-function C(e) {
+import { Tool as ve, ToolHeader as be, ToolContent as xe, ToolInput as Ne, ToolOutput as Ce } from "./tool.js";
+const Te = "Main Agent", we = 60, _ = J(!0);
+function ye({
+  title: e,
+  icon: r,
+  summary: a,
+  open: l,
+  onOpenChange: s,
+  children: d
+}) {
+  return /* @__PURE__ */ t(se, { open: l, onOpenChange: s, children: /* @__PURE__ */ i(_.Provider, { value: l, children: [
+    /* @__PURE__ */ t(ie, { asChild: !0, className: "group", children: /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full cursor-pointer items-center gap-2 rounded-sm text-base text-secondary outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
+        children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+              "aria-hidden": !0,
+              children: r
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "text-base", children: e }),
+          /* @__PURE__ */ i("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+            a != null && /* @__PURE__ */ t("span", { className: "text-xs text-tertiary tabular-nums", children: a }),
+            /* @__PURE__ */ t(
+              ee,
+              {
+                className: "size-4 shrink-0 transition-transform duration-150 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none",
+                "aria-hidden": !0
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(Se, { children: d })
+  ] }) });
+}
+function Se({ children: e }) {
+  const r = V(_);
+  return /* @__PURE__ */ t(le, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ t(
+    X.div,
+    {
+      initial: !1,
+      animate: r ? "open" : "closed",
+      variants: {
+        open: { height: "auto", opacity: 1 },
+        closed: { height: 0, opacity: 0 }
+      },
+      transition: te,
+      className: "overflow-hidden text-secondary outline-none data-[state=closed]:pointer-events-none",
+      children: /* @__PURE__ */ t("div", { className: "mt-2 ml-2 [--tree-rail-lead:9px]", children: e })
+    }
+  ) });
+}
+function T(e) {
   const r = Math.floor(e);
   return `${Math.floor(r / 60)}:${String(r % 60).padStart(2, "0")}`;
 }
 function k(e) {
   if (e.elapsed != null) return e.elapsed;
-  if (e.seconds != null) return C(e.seconds);
+  if (e.seconds != null) return T(e.seconds);
 }
-function w(e) {
+function N(e) {
   const r = [];
   for (const a of e) r.includes(a.group) || r.push(a.group);
   return r;
 }
-function ve(e) {
-  const r = new Set(e.flatMap((l) => l.sources ?? [])).size, a = e.reduce((l, d) => l + (d.seconds ?? 0), 0), c = [];
-  return r && c.push(`${r} ${r === 1 ? "source" : "sources"}`), a && e.length > 1 && c.push(C(a)), c.join(" · ") || void 0;
+function Ae(e) {
+  const r = new Set(e.flatMap((s) => s.sources ?? [])).size, a = e.reduce((s, d) => s + (d.seconds ?? 0), 0), l = [];
+  return r && l.push(`${r} ${r === 1 ? "source" : "sources"}`), a && e.length > 1 && l.push(T(a)), l.join(" · ") || void 0;
 }
-function be(e) {
-  var l, d, h;
-  const r = (d = (l = e.calls) == null ? void 0 : l[0]) == null ? void 0 : d.name, a = (((h = e.calls) == null ? void 0 : h.length) ?? 0) - 1, c = a > 0 ? ` ${a} other call${a === 1 ? "" : "s"} in this step ${a === 1 ? "is" : "are"} waiting behind it.` : "";
+function Oe(e) {
+  var s, d, h;
+  const r = (d = (s = e.calls) == null ? void 0 : s[0]) == null ? void 0 : d.name, a = (((h = e.calls) == null ? void 0 : h.length) ?? 0) - 1, l = a > 0 ? ` ${a} other call${a === 1 ? "" : "s"} in this step ${a === 1 ? "is" : "are"} waiting behind it.` : "";
   return {
     title: r ? `The ${r} call has not returned` : "This step has not finished",
     detail: /* @__PURE__ */ i(q, { children: [
       e.detail,
-      c,
+      l,
       " Send for review to the Actioneer team to help with future runs."
     ] })
   };
 }
-const F = _(({ call: e }) => /* @__PURE__ */ i(ue, { children: [
-  /* @__PURE__ */ t(he, { title: e.name, type: `tool-${e.name}`, state: e.state }),
-  /* @__PURE__ */ i(me, { children: [
-    e.input !== void 0 && /* @__PURE__ */ t(fe, { input: e.input }),
+const F = P(({ call: e }) => /* @__PURE__ */ i(ve, { children: [
+  /* @__PURE__ */ t(be, { title: e.name, type: `tool-${e.name}`, state: e.state }),
+  /* @__PURE__ */ i(xe, { children: [
+    e.input !== void 0 && /* @__PURE__ */ t(Ne, { input: e.input }),
     /* @__PURE__ */ t(
-      pe,
+      Ce,
       {
         output: e.state === "output-available" ? e.output : void 0,
         errorText: e.state === "output-error" ? e.error : void 0
@@ -55,133 +114,133 @@ const F = _(({ call: e }) => /* @__PURE__ */ i(ue, { children: [
   ] })
 ] }));
 F.displayName = "AgentTrace.ToolCard";
-const G = _(
+const G = P(
   ({
     step: e,
     mainAgent: r,
     renderCall: a
   }) => {
     var d, h;
-    const c = k(e), l = e.icon ?? (e.state && e.status !== "pending" ? /* @__PURE__ */ t(
-      N,
+    const l = k(e), s = e.icon ?? (e.state && e.status !== "pending" ? /* @__PURE__ */ t(
+      C,
       {
         stage: e.state,
         toolName: (h = (d = e.calls) == null ? void 0 : d[0]) == null ? void 0 : h.name,
         status: e.status
       }
     ) : void 0);
-    return /* @__PURE__ */ i(te, { status: e.status === "error" ? "error" : "complete", children: [
-      /* @__PURE__ */ i(ne, { leftIcon: l, endContent: c, children: [
+    return /* @__PURE__ */ i(de, { status: e.status === "error" ? "error" : "complete", children: [
+      /* @__PURE__ */ i(ue, { leftIcon: s, endContent: l, children: [
         /* @__PURE__ */ t("span", { children: e.label }),
         e.agent && e.agent !== r && /* @__PURE__ */ t("span", { className: "ml-2 text-xs font-normal text-tertiary", children: e.agent })
       ] }),
-      /* @__PURE__ */ t(oe, { rail: !1, children: /* @__PURE__ */ i("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(re, { children: e.detail }) }),
-        e.sources && e.sources.length > 0 && /* @__PURE__ */ t("div", { className: "ads-tree-rail pb-3", children: /* @__PURE__ */ t(ae, { children: e.sources.map((m) => /* @__PURE__ */ t(se, { children: m }, m)) }) }),
-        (e.calls ?? []).map((m, S) => /* @__PURE__ */ t(
+      /* @__PURE__ */ t(he, { rail: !1, children: /* @__PURE__ */ i("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(me, { children: e.detail }) }),
+        e.sources && e.sources.length > 0 && /* @__PURE__ */ t("div", { className: "ads-tree-rail pb-3", children: /* @__PURE__ */ t(pe, { children: e.sources.map((m) => /* @__PURE__ */ t(fe, { children: m }, m)) }) }),
+        (e.calls ?? []).map((m, w) => /* @__PURE__ */ t(
           "div",
           {
             className: "ads-tree-branch pb-2 last:pb-0",
             style: { "--tree-elbow": "23px" },
             children: a ? a(m) : /* @__PURE__ */ t(F, { call: m })
           },
-          S
+          w
         ))
       ] }) })
     ] });
   }
 );
 G.displayName = "AgentTrace.StepRow";
-const we = ({
+const $e = ({
   steps: e,
-  mainAgent: r = ge,
-  slowSeconds: a = Te,
-  reviewedStepIds: c,
-  onSendForReview: l,
-  slowMessage: d = be,
+  mainAgent: r = Te,
+  slowSeconds: a = we,
+  reviewedStepIds: l,
+  onSendForReview: s,
+  slowMessage: d = Oe,
   renderCall: h,
   className: m,
-  ...S
+  ...w
 }) => {
-  var R, j;
-  const n = e.find((o) => o.status === "active") ?? null, f = e.filter((o) => o.status === "complete" || o.status === "error"), x = new Set(c ?? []), g = e.length > 0 && e.every((o) => o.status === "complete" || o.status === "error"), [H, y] = J(() => new Set(w(e))), A = z(null);
-  D(() => {
+  var D, E;
+  const n = e.find((o) => o.status === "active") ?? null, p = e.filter((o) => o.status === "complete" || o.status === "error"), y = new Set(l ?? []), g = e.length > 0 && e.every((o) => o.status === "complete" || o.status === "error"), [H, S] = Q(() => new Set(N(e))), A = j(null);
+  R(() => {
     const o = (n == null ? void 0 : n.group) ?? null;
-    o == null || o === A.current || (A.current = o, y(new Set(w(e).filter((u) => u !== o))));
+    o == null || o === A.current || (A.current = o, S(new Set(N(e).filter((u) => u !== o))));
   }, [n == null ? void 0 : n.group, e]);
-  const M = z(g);
-  D(() => {
-    g && !M.current && (y(new Set(w(e))), A.current = null), M.current = g;
+  const M = j(g);
+  R(() => {
+    g && !M.current && (S(new Set(N(e))), A.current = null), M.current = g;
   }, [g, e]);
-  const T = w(f).map((o) => {
-    var p, b;
-    const u = f.filter((v) => v.group === o), s = u[0];
+  const v = N(p).map((o) => {
+    var f, x;
+    const u = p.filter((b) => b.group === o), c = u[0];
     return {
       group: o,
-      icon: (s == null ? void 0 : s.groupIcon) ?? /* @__PURE__ */ t(
-        N,
+      icon: (c == null ? void 0 : c.groupIcon) ?? /* @__PURE__ */ t(
+        C,
         {
-          stage: s == null ? void 0 : s.state,
-          toolName: (b = (p = s == null ? void 0 : s.calls) == null ? void 0 : p[0]) == null ? void 0 : b.name,
+          stage: c == null ? void 0 : c.state,
+          toolName: (x = (f = c == null ? void 0 : c.calls) == null ? void 0 : f[0]) == null ? void 0 : x.name,
           status: "complete"
         }
       ),
       steps: u
     };
-  }), U = (n == null ? void 0 : n.seconds) ?? 0, B = n != null && U >= a, $ = n ? d(n) : null, K = n ? n.icon ?? /* @__PURE__ */ t(
-    N,
+  }), U = (n == null ? void 0 : n.seconds) ?? 0, B = n != null && U >= a, O = n ? d(n) : null, K = n ? n.icon ?? /* @__PURE__ */ t(
+    C,
     {
       stage: n.state,
-      toolName: (j = (R = n.calls) == null ? void 0 : R[0]) == null ? void 0 : j.name,
+      toolName: (E = (D = n.calls) == null ? void 0 : D[0]) == null ? void 0 : E.name,
       status: "active"
     }
-  ) : void 0, O = f.reduce((o, u) => o + (u.seconds ?? 0), 0), E = new Set(f.flatMap((o) => o.sources ?? [])).size, W = `Completed ${f.length} research ${f.length === 1 ? "step" : "steps"}${O ? ` · ${C(O)}` : ""}`, I = (
+  ) : void 0, $ = p.reduce((o, u) => o + (u.seconds ?? 0), 0), z = new Set(p.flatMap((o) => o.sources ?? [])).size, W = `Completed ${p.length} research ${p.length === 1 ? "step" : "steps"}${$ ? ` · ${T($)}` : ""}`, I = (
     /* Each PHASE is a branch row hanging off the summary/live line — the same
        tree language the steps use one level down. The wrapper (not the
        container) carries the rail + elbow per principle 14; inter-phase
        spacing is padding INSIDE the wrapper so the rail spans it unbroken.
-       --tree-elbow lands on the TaskTrigger icon's centre (measured). */
-    /* @__PURE__ */ t("div", { className: "flex flex-col", children: T.map(({ group: o, icon: u, steps: s }) => /* @__PURE__ */ t(
+       --tree-elbow lands on the phase trigger icon's centre (measured). */
+    /* @__PURE__ */ t("div", { className: "flex flex-col", children: v.map(({ group: o, icon: u, steps: c }) => /* @__PURE__ */ t(
       "div",
       {
         className: "ads-tree-branch pb-3 last:pb-0 [--tree-elbow:11px]",
-        children: /* @__PURE__ */ i(
-          ie,
+        children: /* @__PURE__ */ t(
+          ye,
           {
+            title: o,
+            icon: u,
+            summary: Ae(c),
             open: !H.has(o),
-            onOpenChange: (p) => y((b) => {
-              const v = new Set(b);
-              return p ? v.delete(o) : v.add(o), v;
+            onOpenChange: (f) => S((x) => {
+              const b = new Set(x);
+              return f ? b.delete(o) : b.add(o), b;
             }),
-            children: [
-              /* @__PURE__ */ t(ce, { title: o, icon: u, endContent: ve(s) }),
-              /* @__PURE__ */ t(de, { children: /* @__PURE__ */ t(le, { children: s.map((p) => /* @__PURE__ */ t(
-                G,
-                {
-                  step: p,
-                  mainAgent: r,
-                  renderCall: h
-                },
-                p.id
-              )) }) })
-            ]
+            children: /* @__PURE__ */ t(ge, { children: c.map((f) => /* @__PURE__ */ t(
+              G,
+              {
+                step: f,
+                mainAgent: r,
+                renderCall: h
+              },
+              f.id
+            )) })
           }
         )
       },
       o
     )) })
   );
-  return /* @__PURE__ */ i("div", { "data-slot": "agent-trace", className: P("w-full", m), ...S, children: [
-    g && T.length > 0 ? (
+  return /* @__PURE__ */ i("div", { "data-slot": "agent-trace", className: Y("w-full", m), ...w, children: [
+    g && v.length > 0 ? (
       /* Settled trace = one summary line; the phase tree waits one click
          away instead of stacking above the answer. */
       /* @__PURE__ */ t(
         L,
         {
           status: "complete",
-          elapsed: C(O),
-          sourceCount: E,
-          icon: /* @__PURE__ */ t(N, { outcome: "completed" }),
+          elapsed: T($),
+          sourceCount: z,
+          icon: /* @__PURE__ */ t(C, { outcome: "completed" }),
           summary: W,
           children: I
         }
@@ -196,50 +255,50 @@ const we = ({
         {
           status: "active",
           elapsed: k(n) ?? "0:00",
-          sourceCount: E,
+          sourceCount: z,
           icon: K,
           activity: n.label,
           activityKey: n.id,
-          stepIndex: f.length + 1,
+          stepIndex: p.length + 1,
           stepCount: e.length,
-          collapsible: T.length > 0,
-          children: T.length > 0 ? I : /* @__PURE__ */ t("span", {})
+          collapsible: v.length > 0,
+          children: v.length > 0 ? I : /* @__PURE__ */ t("span", {})
         }
       )
     ) : I,
-    n && B && $ && /* @__PURE__ */ t(
-      V,
+    n && B && O && /* @__PURE__ */ t(
+      ne,
       {
         variant: "warning",
-        icon: /* @__PURE__ */ t(Q, {}),
+        icon: /* @__PURE__ */ t(Z, {}),
         className: "mt-3 border border-border bg-card",
         children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
           /* @__PURE__ */ i("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ i(X, { children: [
-              $.title,
+            /* @__PURE__ */ i(oe, { children: [
+              O.title,
               " —",
               " ",
               /* @__PURE__ */ t("span", { className: "tabular-nums text-tertiary", children: k(n) })
             ] }),
-            /* @__PURE__ */ t(Y, { className: "text-base leading-6", children: $.detail })
+            /* @__PURE__ */ t(re, { className: "text-base leading-6", children: O.detail })
           ] }),
-          l && /* @__PURE__ */ t(
-            Z,
+          s && /* @__PURE__ */ t(
+            ae,
             {
               size: "sm",
-              variant: x.has(n.id) ? "ghost" : "solid",
-              disabled: x.has(n.id),
-              onClick: () => l(n),
-              children: x.has(n.id) ? "Sent" : "Skip and send"
+              variant: y.has(n.id) ? "ghost" : "solid",
+              disabled: y.has(n.id),
+              onClick: () => s(n),
+              children: y.has(n.id) ? "Sent" : "Skip and send"
             }
           )
         ] })
       }
     ),
-    T.length === 0 && !n && /* @__PURE__ */ t(ee, { size: "sm", className: "text-tertiary", children: "No steps yet." })
+    v.length === 0 && !n && /* @__PURE__ */ t(ce, { size: "sm", className: "text-tertiary", children: "No steps yet." })
   ] });
 };
-we.displayName = "AgentTrace";
+$e.displayName = "AgentTrace";
 export {
-  we as AgentTrace
+  $e as AgentTrace
 };

package/components/ai-elements/chain-of-thought.d.ts

@@ -38,8 +38,8 @@ export type ChainOfThoughtTriggerProps = Omit<ComponentProps<typeof CollapsibleT
     endContent?: ReactNode;
     /**
      * Show the disclosure caret at the row's trailing edge, next to
-     * `endContent` — the same anatomy as `TaskTrigger`, so a nested trace reads
-     * consistently at both levels. With the caret on, the leading icon keeps its
+     * `endContent`, so a nested trace reads consistently at both levels. With
+     * the caret on, the leading icon keeps its
      * meaning instead of being swapped for an affordance.
      */
     caret?: boolean;

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

@@ -71,7 +71,7 @@ const k = O(!1), S = O("tree"), I = c(
           // reaching EVERY step — the same branch language as Tree/TreeItem.
           // The last step drops the rail; its elbow draws the final segment.
           // The rail sits at the container's left edge; the PARENT indents
-          // the group so that edge lands on its icon's centre (TaskContent
+          // the group so that edge lands on its icon's centre (AgentTrace
           // and ResearchActivity both use ml-2 for a size-4 icon), and sets
           // --tree-rail-lead so the FIRST row's rail climbs the gap to hang
           // from that icon instead of floating below it.

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

@@ -4,12 +4,7 @@ export * from './chain-of-thought-icon';
 export * from './chart';
 export * from './inline-citation';
 export * from './message';
-export * from './queue';
 export * from './research-activity';
 export * from './shimmer';
-export * from './speech-input';
-export * from './task';
-export * from './task-progress';
 export * from './tool';
 export * from './transcript';
-export * from './voice';

package/components/ai-elements/inline-citation.js

@@ -289,7 +289,7 @@ const G = ({
   "blockquote",
   {
     className: c(
-      "border-l-2 border-border pl-3 text-base italic text-tertiary",
+      "border-l border-border pl-3 text-base italic text-tertiary",
       t
     ),
     ...s,

package/components/alert.d.ts

@@ -1,18 +1,18 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 /**
- * Alert — persistent inline messaging, ported from HeroUI v3's anatomy onto
- * ADS tokens: a NEUTRAL surface (no colored wash) where only the indicator
- * icon and the title carry the variant color; the description stays muted.
- * Flat per the elevation rule (an alert isn't clickable); generous 2xl
- * radius per the source. The `--alert-accent` var carries the variant color
- * down to AlertTitle without prop-drilling.
+ * Alert — inline status messaging on a raised white surface. Status color is
+ * confined to the indicator, title, and optional timeout progress bar; the
+ * description stays muted. Timed alerts enter from the right and leave to the
+ * left once their progress completes.
  */
 declare const alertVariants: (props?: ({
     variant?: "success" | "warning" | "danger" | "info" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
     icon?: React.ReactNode;
+    /** Auto-dismiss after this many milliseconds. Omit or use 0 for a persistent alert. */
+    duration?: number;
     onClose?: () => void;
 }
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;