@actioneer/ads 0.5.2 → 0.5.3

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

@@ -14,12 +14,17 @@ import { ToolState } from './tool';
  * 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
+ *   2. Steps   — a tree-connected `ChainOfThought` 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 FULLY SETTLED trace rests as ONE summary line ("Completed N research
+ * steps · time") and expands on click to reveal the phases — the same
+ * single-line contract the Chain of Thought family keeps. The phase rows
+ * never stack above the answer once the run is over.
  */
 /** A single tool call within a step. */
 export interface AgentTraceCall {

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

@@ -1,51 +1,51 @@
 "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) {
+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")}`;
 }
-function v(e) {
+function A(e) {
   if (e.elapsed != null) return e.elapsed;
-  if (e.seconds != null) return x(e.seconds);
+  if (e.seconds != null) return S(e.seconds);
 }
-function y(e) {
+function T(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 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 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.` : "";
+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.` : "";
   return {
     title: o ? `The ${o} call has not returned` : "This step has not finished",
-    detail: /* @__PURE__ */ a(j, { children: [
+    detail: /* @__PURE__ */ a(U, { children: [
       e.detail,
-      l,
+      i,
       " 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 }),
+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 }),
     /* @__PURE__ */ t(
-      ie,
+      ue,
       {
         output: e.state === "output-available" ? e.output : void 0,
         errorText: e.state === "output-error" ? e.error : void 0
@@ -53,28 +53,28 @@ const A = b(({ call: e }) => /* @__PURE__ */ a(ne, { children: [
     )
   ] })
 ] }));
-A.displayName = "AgentTrace.ToolCard";
-const O = b(
+R.displayName = "AgentTrace.ToolCard";
+const j = I(
   ({
     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: [
+    const i = A(e);
+    return /* @__PURE__ */ a(X, { status: e.status === "error" ? "error" : "complete", children: [
+      /* @__PURE__ */ a(Y, { leftIcon: e.icon, endContent: i, 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(
+      /* @__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(
           "div",
           {
             className: "ads-tree-branch pb-2 last:pb-0",
             style: { "--tree-elbow": "23px" },
-            children: s ? s(i) : /* @__PURE__ */ t(A, { call: i })
+            children: s ? s(l) : /* @__PURE__ */ t(R, { call: l })
           },
           c
         ))
@@ -82,99 +82,129 @@ const O = b(
     ] });
   }
 );
-O.displayName = "AgentTrace.StepRow";
-const ue = ({
+j.displayName = "AgentTrace.StepRow";
+const ge = ({
   steps: e,
-  mainAgent: o = ae,
-  slowSeconds: s = le,
-  reviewedStepIds: l,
-  onSendForReview: i,
-  slowMessage: c = de,
-  renderCall: h,
-  className: $,
-  ...k
+  mainAgent: o = he,
+  slowSeconds: s = me,
+  reviewedStepIds: i,
+  onSendForReview: l,
+  slowMessage: c = pe,
+  renderCall: p,
+  className: z,
+  ...D
 }) => {
-  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;
+  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;
     return {
-      group: r,
-      icon: (d = f.find((u) => u.group === r)) == null ? void 0 : d.groupIcon,
-      steps: f.filter((u) => u.group === r)
+      group: n,
+      icon: (u = d.find((h) => h.group === n)) == null ? void 0 : u.groupIcon,
+      steps: d.filter((h) => h.group === n)
     };
-  }), 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,
+  }), _ = (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 = (
+    /* 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(
+      "div",
       {
-        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
-          )) }) })
-        ]
+        className: "ads-tree-branch pb-3 last:pb-0 [--tree-elbow:11px]",
+        children: /* @__PURE__ */ a(
+          oe,
+          {
+            open: !L.has(n),
+            onOpenChange: (g) => C((H) => {
+              const x = new Set(H);
+              return g ? x.delete(n) : x.add(n), x;
+            }),
+            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,
+                {
+                  step: g,
+                  mainAgent: o,
+                  renderCall: p
+                },
+                g.id
+              )) }) })
+            ]
+          }
+        )
       },
-      r
-    )) }),
-    n && /* @__PURE__ */ a("div", { className: "mt-3", children: [
+      n
+    )) })
+  );
+  return /* @__PURE__ */ a("div", { "data-slot": "agent-trace", className: K("w-full", z), ...D, children: [
+    m && f.length > 0 ? (
+      /* Settled trace = one summary line; the phase tree waits one click
+         away instead of stacking above the answer. */
       /* @__PURE__ */ t(
-        Y,
+        E,
+        {
+          status: "complete",
+          elapsed: S(b),
+          sourceCount: O,
+          summary: G,
+          children: y
+        }
+      )
+    ) : r ? (
+      /* 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,
         {
           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", {})
+          elapsed: A(r) ?? "0:00",
+          sourceCount: O,
+          activity: r.label,
+          activityKey: r.id,
+          stepIndex: d.length + 1,
+          stepCount: e.length,
+          collapsible: f.length > 0,
+          children: f.length > 0 ? y : /* @__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 })
+      )
+    ) : 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) })
         ] }),
-        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." })
+        /* @__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"
+        }
+      )
+    ] }) }),
+    f.length === 0 && !r && /* @__PURE__ */ t(V, { size: "sm", className: "text-tertiary", children: "No steps yet." })
   ] });
 };
-ue.displayName = "AgentTrace";
+ge.displayName = "AgentTrace";
 export {
-  ue as AgentTrace
+  ge as AgentTrace
 };

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

@@ -3,9 +3,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsi
 import { ComponentProps, ReactNode } from 'react';
 /**
  * How steps connect to one another.
- * - `rail`  — a short vertical segment between icons (the default).
  * - `tree`  — the Tree connector: a continuous rail with an elbow reaching
- *             EVERY step, so a nested trace reads as branches of its parent.
+ *             EVERY step, so a trace reads as branches of its parent (the
+ *             default — every trace carries the branch language).
+ * - `rail`  — a short vertical segment between icons; opt-in for flat lists
+ *             where the branch metaphor doesn't apply.
  * - `none`  — no connector; an outer structure carries the hierarchy.
  */
 export type ChainOfThoughtConnector = "rail" | "tree" | "none";
@@ -48,8 +50,17 @@ export type ChainOfThoughtTriggerProps = Omit<ComponentProps<typeof CollapsibleT
     swapIconOnHover?: boolean;
 };
 export declare const ChainOfThoughtTrigger: import('react').MemoExoticComponent<({ className, children, leftIcon, endContent, caret, swapIconOnHover, ...props }: ChainOfThoughtTriggerProps) => import("react").JSX.Element>;
-export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
-export declare const ChainOfThoughtContent: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => import("react").JSX.Element>;
+export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent> & {
+    /**
+     * Draw the pass-through rail descending from the step icon alongside the
+     * open content (default). Turn OFF when the content draws its own
+     * `.ads-tree-rail`/`.ads-tree-branch` structure at the same x — AgentTrace's
+     * step body does — so the branch termination stays with the last elbow
+     * instead of running past it.
+     */
+    rail?: boolean;
+};
+export declare const ChainOfThoughtContent: import('react').MemoExoticComponent<({ className, children, rail, ...props }: ChainOfThoughtContentProps) => import("react").JSX.Element>;
 export type ChainOfThoughtItemProps = ComponentProps<"div">;
 export declare const ChainOfThoughtItem: import('react').MemoExoticComponent<({ className, ...props }: ChainOfThoughtItemProps) => import("react").JSX.Element>;
 export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
@@ -103,7 +114,12 @@ export type ChainOfThoughtEvidenceTableProps = Omit<ComponentProps<"div">, "chil
  */
 export declare const ChainOfThoughtEvidenceTable: import('react').MemoExoticComponent<({ className, columns, rows, totalRows, flag, ...props }: ChainOfThoughtEvidenceTableProps) => import("react").JSX.Element>;
 export type ChainOfThoughtMetricsProps = ComponentProps<"div">;
-/** A quiet inline stat row — no fills, separated by spacing alone. */
+/** The stat readout on one recessed fill — the warm greige muted surface
+ *  groups the metrics into a single contained block (principle 1: delineate
+ *  with fill, never a stroke; a sage-50 tint was tried and reverted — the
+ *  neutral fill keeps the semantic value colors as the only color). One
+ *  metric per ROW, receipt-style: label leading, value trailing, so the
+ *  figures align on the right edge and scan vertically. */
 export declare const ChainOfThoughtMetrics: import('react').MemoExoticComponent<({ className, role, ...props }: ChainOfThoughtMetricsProps) => import("react").JSX.Element>;
 export type ChainOfThoughtMetricProps = Omit<ComponentProps<"div">, "children" | "color"> & {
     label: ReactNode;