@actioneer/ads 0.5.3 → 0.5.5

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

@@ -1,51 +1,52 @@
 "use client";
-import { jsxs as a, jsx as t, Fragment as U } from "react/jsx-runtime";
-import { memo as I, useState as B, useRef as k, useEffect as M } from "react";
-import { cn as K } from "../../lib/cn.js";
-import { Clock as W } from "../../lib/icons.js";
-import { Alert as q, AlertTitle as J, AlertDescription as P } from "../alert.js";
-import { Button as Q } from "../button.js";
-import { Text as V } from "../typography.js";
-import { ChainOfThoughtStep as X, ChainOfThoughtTrigger as Y, ChainOfThoughtContent as Z, ChainOfThoughtItem as ee, ChainOfThoughtSearchResults as te, ChainOfThoughtSearchResult as ne, ChainOfThought as re } from "./chain-of-thought.js";
-import { ResearchActivity as E } from "./research-activity.js";
-import { Task as oe, TaskTrigger as se, TaskContent as le } from "./task.js";
-import { Tool as ae, ToolHeader as ie, ToolContent as ce, ToolInput as de, ToolOutput as ue } from "./tool.js";
-const he = "Main Agent", me = 60;
-function S(e) {
-  const o = Math.floor(e);
-  return `${Math.floor(o / 60)}:${String(o % 60).padStart(2, "0")}`;
+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 { 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) {
+  const r = Math.floor(e);
+  return `${Math.floor(r / 60)}:${String(r % 60).padStart(2, "0")}`;
 }
-function A(e) {
+function k(e) {
   if (e.elapsed != null) return e.elapsed;
-  if (e.seconds != null) return S(e.seconds);
+  if (e.seconds != null) return C(e.seconds);
 }
-function T(e) {
-  const o = [];
-  for (const s of e) o.includes(s.group) || o.push(s.group);
-  return o;
+function w(e) {
+  const r = [];
+  for (const a of e) r.includes(a.group) || r.push(a.group);
+  return r;
 }
-function fe(e) {
-  const o = new Set(e.flatMap((l) => l.sources ?? [])).size, s = e.reduce((l, c) => l + (c.seconds ?? 0), 0), i = [];
-  return o && i.push(`${o} ${o === 1 ? "source" : "sources"}`), s && e.length > 1 && i.push(S(s)), i.join(" · ") || void 0;
+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 pe(e) {
-  var l, c, p;
-  const o = (c = (l = e.calls) == null ? void 0 : l[0]) == null ? void 0 : c.name, s = (((p = e.calls) == null ? void 0 : p.length) ?? 0) - 1, i = s > 0 ? ` ${s} other call${s === 1 ? "" : "s"} in this step ${s === 1 ? "is" : "are"} waiting behind it.` : "";
+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.` : "";
   return {
-    title: o ? `The ${o} call has not returned` : "This step has not finished",
-    detail: /* @__PURE__ */ a(U, { children: [
+    title: r ? `The ${r} call has not returned` : "This step has not finished",
+    detail: /* @__PURE__ */ i(q, { children: [
       e.detail,
-      i,
+      c,
       " Send for review to the Actioneer team to help with future runs."
     ] })
   };
 }
-const R = I(({ call: e }) => /* @__PURE__ */ a(ae, { children: [
-  /* @__PURE__ */ t(ie, { title: e.name, type: `tool-${e.name}`, state: e.state }),
-  /* @__PURE__ */ a(ce, { children: [
-    e.input !== void 0 && /* @__PURE__ */ t(de, { input: e.input }),
+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 }),
     /* @__PURE__ */ t(
-      ue,
+      pe,
       {
         output: e.state === "output-available" ? e.output : void 0,
         errorText: e.state === "output-error" ? e.error : void 0
@@ -53,158 +54,192 @@ const R = I(({ call: e }) => /* @__PURE__ */ a(ae, { children: [
     )
   ] })
 ] }));
-R.displayName = "AgentTrace.ToolCard";
-const j = I(
+F.displayName = "AgentTrace.ToolCard";
+const G = _(
   ({
     step: e,
-    mainAgent: o,
-    renderCall: s
+    mainAgent: r,
+    renderCall: a
   }) => {
-    const i = A(e);
-    return /* @__PURE__ */ a(X, { status: e.status === "error" ? "error" : "complete", children: [
-      /* @__PURE__ */ a(Y, { leftIcon: e.icon, endContent: i, children: [
+    var d, h;
+    const c = k(e), l = e.icon ?? (e.state && e.status !== "pending" ? /* @__PURE__ */ t(
+      N,
+      {
+        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: [
         /* @__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 })
+        e.agent && e.agent !== r && /* @__PURE__ */ t("span", { className: "ml-2 text-xs font-normal text-tertiary", children: e.agent })
       ] }),
-      /* @__PURE__ */ t(Z, { rail: !1, 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(ee, { children: e.detail }) }),
-        e.sources && e.sources.length > 0 && /* @__PURE__ */ t("div", { className: "ads-tree-rail pb-3", children: /* @__PURE__ */ t(te, { children: e.sources.map((l) => /* @__PURE__ */ t(ne, { children: l }, l)) }) }),
-        (e.calls ?? []).map((l, c) => /* @__PURE__ */ t(
+      /* @__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(
           "div",
           {
             className: "ads-tree-branch pb-2 last:pb-0",
             style: { "--tree-elbow": "23px" },
-            children: s ? s(l) : /* @__PURE__ */ t(R, { call: l })
+            children: a ? a(m) : /* @__PURE__ */ t(F, { call: m })
           },
-          c
+          S
         ))
       ] }) })
     ] });
   }
 );
-j.displayName = "AgentTrace.StepRow";
-const ge = ({
+G.displayName = "AgentTrace.StepRow";
+const we = ({
   steps: e,
-  mainAgent: o = he,
-  slowSeconds: s = me,
-  reviewedStepIds: i,
+  mainAgent: r = ge,
+  slowSeconds: a = Te,
+  reviewedStepIds: c,
   onSendForReview: l,
-  slowMessage: c = pe,
-  renderCall: p,
-  className: z,
-  ...D
+  slowMessage: d = be,
+  renderCall: h,
+  className: m,
+  ...S
 }) => {
-  const r = e.find((n) => n.status === "active") ?? null, d = e.filter((n) => n.status === "complete" || n.status === "error"), w = new Set(i ?? []), m = e.length > 0 && e.every((n) => n.status === "complete" || n.status === "error"), [L, C] = B(() => new Set(T(e))), v = k(null);
-  M(() => {
-    const n = (r == null ? void 0 : r.group) ?? null;
-    n == null || n === v.current || (v.current = n, C(new Set(T(e).filter((u) => u !== n))));
-  }, [r == null ? void 0 : r.group, e]);
-  const $ = k(m);
-  M(() => {
-    m && !$.current && (C(new Set(T(e))), v.current = null), $.current = m;
-  }, [m, e]);
-  const f = T(d).map((n) => {
-    var u;
+  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(() => {
+    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))));
+  }, [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;
+  }, [g, e]);
+  const T = w(f).map((o) => {
+    var p, b;
+    const u = f.filter((v) => v.group === o), s = u[0];
     return {
-      group: n,
-      icon: (u = d.find((h) => h.group === n)) == null ? void 0 : u.groupIcon,
-      steps: d.filter((h) => h.group === n)
+      group: o,
+      icon: (s == null ? void 0 : s.groupIcon) ?? /* @__PURE__ */ t(
+        N,
+        {
+          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,
+          status: "complete"
+        }
+      ),
+      steps: u
     };
-  }), _ = (r == null ? void 0 : r.seconds) ?? 0, F = r != null && _ >= s, N = r ? c(r) : null, b = d.reduce((n, u) => n + (u.seconds ?? 0), 0), O = new Set(d.flatMap((n) => n.sources ?? [])).size, G = `Completed ${d.length} research ${d.length === 1 ? "step" : "steps"}${b ? ` · ${S(b)}` : ""}`, y = (
+  }), U = (n == null ? void 0 : n.seconds) ?? 0, B = n != null && U >= a, $ = n ? d(n) : null, K = n ? n.icon ?? /* @__PURE__ */ t(
+    N,
+    {
+      stage: n.state,
+      toolName: (j = (R = n.calls) == null ? void 0 : R[0]) == null ? void 0 : j.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 = (
     /* 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: f.map(({ group: n, icon: u, steps: h }) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "flex flex-col", children: T.map(({ group: o, icon: u, steps: s }) => /* @__PURE__ */ t(
       "div",
       {
         className: "ads-tree-branch pb-3 last:pb-0 [--tree-elbow:11px]",
-        children: /* @__PURE__ */ a(
-          oe,
+        children: /* @__PURE__ */ i(
+          ie,
           {
-            open: !L.has(n),
-            onOpenChange: (g) => C((H) => {
-              const x = new Set(H);
-              return g ? x.delete(n) : x.add(n), x;
+            open: !H.has(o),
+            onOpenChange: (p) => y((b) => {
+              const v = new Set(b);
+              return p ? v.delete(o) : v.add(o), v;
             }),
             children: [
-              /* @__PURE__ */ t(se, { title: n, icon: u, endContent: fe(h) }),
-              /* @__PURE__ */ t(le, { children: /* @__PURE__ */ t(re, { children: h.map((g) => /* @__PURE__ */ t(
-                j,
+              /* @__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: g,
-                  mainAgent: o,
-                  renderCall: p
+                  step: p,
+                  mainAgent: r,
+                  renderCall: h
                 },
-                g.id
+                p.id
               )) }) })
             ]
           }
         )
       },
-      n
+      o
     )) })
   );
-  return /* @__PURE__ */ a("div", { "data-slot": "agent-trace", className: K("w-full", z), ...D, children: [
-    m && f.length > 0 ? (
+  return /* @__PURE__ */ i("div", { "data-slot": "agent-trace", className: P("w-full", m), ...S, children: [
+    g && T.length > 0 ? (
       /* Settled trace = one summary line; the phase tree waits one click
          away instead of stacking above the answer. */
       /* @__PURE__ */ t(
-        E,
+        L,
         {
           status: "complete",
-          elapsed: S(b),
-          sourceCount: O,
-          summary: G,
-          children: y
+          elapsed: C(O),
+          sourceCount: E,
+          icon: /* @__PURE__ */ t(N, { outcome: "completed" }),
+          summary: W,
+          children: I
         }
       )
-    ) : r ? (
+    ) : n ? (
       /* Running trace = the live line IS the one summary line (reason
          first: the in-flight step is narrated here, not placed in the
          tree). The settled phases rest behind it, hidden until the reader
          expands — never stacked open above the answer while work runs. */
       /* @__PURE__ */ t(
-        E,
+        L,
         {
           status: "active",
-          elapsed: A(r) ?? "0:00",
-          sourceCount: O,
-          activity: r.label,
-          activityKey: r.id,
-          stepIndex: d.length + 1,
+          elapsed: k(n) ?? "0:00",
+          sourceCount: E,
+          icon: K,
+          activity: n.label,
+          activityKey: n.id,
+          stepIndex: f.length + 1,
           stepCount: e.length,
-          collapsible: f.length > 0,
-          children: f.length > 0 ? y : /* @__PURE__ */ t("span", {})
-        }
-      )
-    ) : y,
-    r && F && N && /* @__PURE__ */ t(q, { variant: "warning", icon: /* @__PURE__ */ t(W, {}), 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(J, { children: [
-          N.title,
-          " —",
-          " ",
-          /* @__PURE__ */ t("span", { className: "tabular-nums text-tertiary", children: A(r) })
-        ] }),
-        /* @__PURE__ */ t(P, { children: N.detail })
-      ] }),
-      l && /* @__PURE__ */ t(
-        Q,
-        {
-          size: "sm",
-          variant: w.has(r.id) ? "ghost" : "solid",
-          disabled: w.has(r.id),
-          onClick: () => l(r),
-          children: w.has(r.id) ? "Sent" : "Skip and send"
+          collapsible: T.length > 0,
+          children: T.length > 0 ? I : /* @__PURE__ */ t("span", {})
         }
       )
-    ] }) }),
-    f.length === 0 && !r && /* @__PURE__ */ t(V, { size: "sm", className: "text-tertiary", children: "No steps yet." })
+    ) : I,
+    n && B && $ && /* @__PURE__ */ t(
+      V,
+      {
+        variant: "warning",
+        icon: /* @__PURE__ */ t(Q, {}),
+        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__ */ t("span", { className: "tabular-nums text-tertiary", children: k(n) })
+            ] }),
+            /* @__PURE__ */ t(Y, { className: "text-base leading-6", children: $.detail })
+          ] }),
+          l && /* @__PURE__ */ t(
+            Z,
+            {
+              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"
+            }
+          )
+        ] })
+      }
+    ),
+    T.length === 0 && !n && /* @__PURE__ */ t(ee, { size: "sm", className: "text-tertiary", children: "No steps yet." })
   ] });
 };
-ge.displayName = "AgentTrace";
+we.displayName = "AgentTrace";
 export {
-  ge as AgentTrace
+  we as AgentTrace
 };

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+export declare const CHAIN_OF_THOUGHT_STATES: readonly ["thinking", "planning", "exploring-schema", "searching-knowledge", "inspecting-files", "querying-data", "analyzing-results", "processing-attachments", "delegating", "awaiting-input", "saving-knowledge", "composing-response", "completed", "paused", "incomplete"];
+/** One agent-trace stage or lifecycle status — see `CHAIN_OF_THOUGHT_STATES`. */
+export type ChainOfThoughtState = (typeof CHAIN_OF_THOUGHT_STATES)[number];
+export type ActiveChainOfThoughtState = Exclude<ChainOfThoughtState, "completed" | "paused" | "incomplete">;
+/** Resolve known, prefixed, and dynamically suffixed tool names to one trace stage. */
+export declare function resolveTraceState(toolName?: string, fallback?: ActiveChainOfThoughtState): ActiveChainOfThoughtState;
+/** Human-readable description per state — e.g. for a tooltip or a settings list. */
+export declare const CHAIN_OF_THOUGHT_DESCRIPTIONS: Record<"paused" | "completed" | "thinking" | "planning" | "exploring-schema" | "searching-knowledge" | "inspecting-files" | "querying-data" | "analyzing-results" | "processing-attachments" | "delegating" | "awaiting-input" | "saving-knowledge" | "composing-response" | "incomplete", string>;
+export interface ChainOfThoughtIconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> {
+    /** Which trace stage or lifecycle status to render. */
+    state: ChainOfThoughtState;
+    /** Defaults to the grid's native 16 px size. */
+    size?: number | string;
+    /** Active steps animate; complete, pending, and error steps pass `false`. */
+    animated?: boolean;
+    /** Accessible name. Omit to keep the icon decorative — pair with `aria-hidden` at the call site, the convention every other ADS icon follows. */
+    label?: string;
+}
+/**
+ * One animated (or, for the three lifecycle states, static) squircle-grid
+ * icon. `currentColor`-based like every ADS icon — set its color with a
+ * `text-*` class on an ancestor, not a prop. `prefers-reduced-motion` is
+ * already handled inside the source markup.
+ */
+export declare const ChainOfThoughtIcon: React.ForwardRefExoticComponent<ChainOfThoughtIconProps & React.RefAttributes<SVGSVGElement>>;
+export interface TraceStateIconProps extends Omit<ChainOfThoughtIconProps, "state"> {
+    /** Explicit chain-of-thought stage, when known. */
+    stage?: ActiveChainOfThoughtState;
+    /** Tool name executed by this step — used to infer a stage when `stage` is absent. */
+    toolName?: string;
+    /** ADS 2 step status changes motion/emphasis while preserving the stage icon. */
+    status?: "active" | "complete" | "pending" | "error";
+    /** Whole-chain outcome. Do not use this for an individual completed step. */
+    outcome?: "completed" | "paused" | "incomplete";
+}
+/**
+ * Resolves a semantic stage from an explicit state or tool name. Step status
+ * controls motion only: active animates; complete, pending, and error freeze
+ * the same glyph. `outcome` is reserved for the whole-chain summary.
+ */
+export declare const TraceStateIcon: React.ForwardRefExoticComponent<TraceStateIconProps & React.RefAttributes<SVGSVGElement>>;