@mastra/playground-ui 60.2.0 → 61.0.0-alpha.1

package/dist/domains/traces/components/thread-trace/thread-trace-spans.cjs.js

@@ -12,58 +12,58 @@ const domains_traces_components_traceSpanTree = require('../trace-span-tree.cjs.
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
 const Button = require('../../../../Button-CXhSUBxN.cjs');
+const collapsibleBox = require('../../../../collapsible-box-DdUueeh6.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
+function useSpansClamp() {
+  const { isExpanded, setExpanded, messagesHeight, timelineHeight, detailsHeaderHeight } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
+  const budget = messagesHeight !== null ? messagesHeight - (detailsHeaderHeight ?? 0) : null;
+  const overflows = budget !== null && timelineHeight !== null && timelineHeight > budget;
+  return { budget, overflows, isExpanded, setExpanded };
+}
 function ThreadTraceSpans({ className, timelineClassName, ...props }) {
   const { selectSpan } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
-  const {
-    traceId,
-    isActive,
-    isExpanded,
-    selectedSpanId,
-    featuredSpanIds,
-    revealSpanId,
-    setExpanded,
-    timelineRef,
-    messagesHeight,
-    timelineHeight,
-    detailsHeaderHeight
-  } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
+  const { traceId, selectedSpanId, featuredSpanIds, revealSpanId, timelineRef, isActive } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
+  const { budget, overflows, isExpanded, setExpanded } = useSpansClamp();
   const { data, isLoading } = domains_traces_hooks_useTraceSpans.useTraceSpans(traceId, { passive: true });
   const hierarchicalSpans = React.useMemo(() => domains_traces_components_formatHierarchicalSpans.formatHierarchicalSpans(data?.spans ?? []), [data]);
   const { expandedSpanIds, setExpandedSpanIds } = domains_traces_hooks_useExpandedSpanIds.useExpandedSpanIds(hierarchicalSpans);
-  const timelineBudget = messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;
-  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;
-  const isClamped = overflows && !isExpanded;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-slot": "thread-trace-spans",
-        className: utils_cn.cn("relative overflow-hidden", className),
-        style: !isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : void 0,
-        "data-testid": "trace-row-timeline",
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timelineRef, className: utils_cn.cn("px-4 pt-2 pb-4", timelineClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-            domains_traces_components_traceSpanTree.TraceSpanTree,
-            {
-              hierarchicalSpans,
-              selectedSpanId,
-              featuredSpanIds,
-              revealSpanId,
-              onSpanClick: (id) => selectSpan(traceId, selectedSpanId === id ? void 0 : id),
-              expandedSpanIds,
-              setExpandedSpanIds,
-              isLoading
-            }
-          ) }),
-          overflows && isClamped && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t from-sidebar via-sidebar/80 to-transparent pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
-        ]
-      }
-    ),
-    overflows && !isClamped && !isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(false), children: "Show less" }) })
-  ] });
+  const box = {
+    collapsedHeight: budget ?? 0,
+    isExpanded: isExpanded || budget === null,
+    isClipped: overflows,
+    setClipped: () => {
+    },
+    setExpanded,
+    toggleExpanded: () => setExpanded(!isExpanded)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    collapsibleBox.CollapsibleBox,
+    {
+      state: box,
+      expandLabel: "Expand",
+      "data-slot": "thread-trace-spans",
+      "data-testid": "trace-row-timeline",
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timelineRef, className: utils_cn.cn("px-4 pt-2 pb-4", timelineClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+          domains_traces_components_traceSpanTree.TraceSpanTree,
+          {
+            hierarchicalSpans,
+            selectedSpanId,
+            featuredSpanIds,
+            revealSpanId,
+            onSpanClick: (id) => selectSpan(traceId, selectedSpanId === id ? void 0 : id),
+            expandedSpanIds,
+            setExpandedSpanIds,
+            isLoading
+          }
+        ) }),
+        isExpanded && overflows && !isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "sm", variant: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, {}), onClick: () => setExpanded(false), children: "Collapse" }) })
+      ]
+    }
+  );
 }
 
 exports.ThreadTraceSpans = ThreadTraceSpans;

package/dist/domains/traces/components/thread-trace/thread-trace-spans.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-spans.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t from-sidebar via-sidebar/80 to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["useThreadTrace","useThreadTraceRow","useTraceSpans","useMemo","formatHierarchicalSpans","useExpandedSpanIds","jsxs","Fragment","cn","jsx","TraceSpanTree","Button","ChevronDown","ChevronUp"],"mappings":"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"}
+{"version":3,"file":"thread-trace-spans.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { Minimize2 } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { CollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport type { CollapsibleBoxState } from '@/ds/components/CollapsibleBox';\nimport { cn } from '@/lib/utils';\n\n/**\n * The span tree is clamped to the messages column while the row is collapsed. The budget is the\n * messages height minus the details header (when there is one), otherwise the right cell overshoots the left.\n */\nfunction useSpansClamp() {\n  const { isExpanded, setExpanded, messagesHeight, timelineHeight, detailsHeaderHeight } = useThreadTraceRow();\n  const budget = messagesHeight !== null ? messagesHeight - (detailsHeaderHeight ?? 0) : null;\n  const overflows = budget !== null && timelineHeight !== null && timelineHeight > budget;\n  return { budget, overflows, isExpanded, setExpanded };\n}\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped (and faded) to the messages column while the row is collapsed.\n * Clicking the fade or its Expand button expands it; a Collapse button sits under the expanded tree\n * (hidden while a span of the row is open). Clamping needs the measured height of `ThreadTrace.Messages`.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const { traceId, selectedSpanId, featuredSpanIds, revealSpanId, timelineRef, isActive } = useThreadTraceRow();\n  const { budget, overflows, isExpanded, setExpanded } = useSpansClamp();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The clamp applies whenever the row is collapsed, not only once `overflows` is known: the\n  // measurement lags a frame on mount, which would otherwise let the cell grow and snap back.\n  // Overflow is already measured by the row, so the box's own measurement is ignored.\n  const box: CollapsibleBoxState = {\n    collapsedHeight: budget ?? 0,\n    isExpanded: isExpanded || budget === null,\n    isClipped: overflows,\n    setClipped: () => {},\n    setExpanded,\n    toggleExpanded: () => setExpanded(!isExpanded),\n  };\n\n  return (\n    <CollapsibleBox\n      state={box}\n      expandLabel=\"Expand\"\n      data-slot=\"thread-trace-spans\"\n      data-testid=\"trace-row-timeline\"\n      className={className}\n      {...props}\n    >\n      <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n        <TraceSpanTree\n          hierarchicalSpans={hierarchicalSpans}\n          selectedSpanId={selectedSpanId}\n          featuredSpanIds={featuredSpanIds}\n          revealSpanId={revealSpanId}\n          onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          isLoading={isLoading}\n        />\n      </div>\n      {isExpanded && overflows && !isActive && (\n        <div className=\"flex justify-center pb-2\">\n          <Button size=\"sm\" variant=\"ghost\" icon={<Minimize2 />} onClick={() => setExpanded(false)}>\n            Collapse\n          </Button>\n        </div>\n      )}\n    </CollapsibleBox>\n  );\n}\n"],"names":["useThreadTraceRow","useThreadTrace","useTraceSpans","useMemo","formatHierarchicalSpans","useExpandedSpanIds","jsxs","CollapsibleBox","jsx","cn","TraceSpanTree","Button","Minimize2"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,SAAS,aAAA,GAAgB;AACvB,EAAA,MAAM,EAAE,UAAA,EAAY,WAAA,EAAa,gBAAgB,cAAA,EAAgB,mBAAA,KAAwBA,6EAAA,EAAkB;AAC3G,EAAA,MAAM,MAAA,GAAS,cAAA,KAAmB,IAAA,GAAO,cAAA,IAAkB,uBAAuB,CAAA,CAAA,GAAK,IAAA;AACvF,EAAA,MAAM,SAAA,GAAY,MAAA,KAAW,IAAA,IAAQ,cAAA,KAAmB,QAAQ,cAAA,GAAiB,MAAA;AACjF,EAAA,OAAO,EAAE,MAAA,EAAQ,SAAA,EAAW,UAAA,EAAY,WAAA,EAAY;AACtD;AAYO,SAAS,iBAAiB,EAAE,SAAA,EAAW,iBAAA,EAAmB,GAAG,OAAM,EAA0B;AAClG,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,uEAAA,EAAe;AACtC,EAAA,MAAM,EAAE,SAAS,cAAA,EAAgB,eAAA,EAAiB,cAAc,WAAA,EAAa,QAAA,KAAaD,6EAAA,EAAkB;AAC5G,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAA,EAAW,UAAA,EAAY,WAAA,KAAgB,aAAA,EAAc;AAGrE,EAAA,MAAM,EAAE,MAAM,SAAA,EAAU,GAAIE,iDAAc,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AACpE,EAAA,MAAM,iBAAA,GAAoBC,aAAA,CAAQ,MAAMC,yEAAA,CAAwB,IAAA,EAAM,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAC1F,EAAA,MAAM,EAAE,eAAA,EAAiB,kBAAA,EAAmB,GAAIC,2DAAmB,iBAAiB,CAAA;AAKpF,EAAA,MAAM,GAAA,GAA2B;AAAA,IAC/B,iBAAiB,MAAA,IAAU,CAAA;AAAA,IAC3B,UAAA,EAAY,cAAc,MAAA,KAAW,IAAA;AAAA,IACrC,SAAA,EAAW,SAAA;AAAA,IACX,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,WAAA;AAAA,IACA,cAAA,EAAgB,MAAM,WAAA,CAAY,CAAC,UAAU;AAAA,GAC/C;AAEA,EAAA,uBACEC,eAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,GAAA;AAAA,MACP,WAAA,EAAY,QAAA;AAAA,MACZ,WAAA,EAAU,oBAAA;AAAA,MACV,aAAA,EAAY,oBAAA;AAAA,MACZ,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,SAAI,GAAA,EAAK,WAAA,EAAa,WAAWC,WAAA,CAAG,gBAAA,EAAkB,iBAAiB,CAAA,EACtE,QAAA,kBAAAD,cAAA;AAAA,UAACE,qDAAA;AAAA,UAAA;AAAA,YACC,iBAAA;AAAA,YACA,cAAA;AAAA,YACA,eAAA;AAAA,YACA,YAAA;AAAA,YACA,aAAa,CAAA,EAAA,KAAM,UAAA,CAAW,SAAS,cAAA,KAAmB,EAAA,GAAK,SAAY,EAAE,CAAA;AAAA,YAC7E,eAAA;AAAA,YACA,kBAAA;AAAA,YACA;AAAA;AAAA,SACF,EACF,CAAA;AAAA,QACC,UAAA,IAAc,SAAA,IAAa,CAAC,QAAA,oBAC3BF,cAAA,CAAC,SAAI,SAAA,EAAU,0BAAA,EACb,QAAA,kBAAAA,cAAA,CAACG,aAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,SAAQ,OAAA,EAAQ,IAAA,kBAAMH,cAAA,CAACI,qBAAA,EAAA,EAAU,CAAA,EAAI,OAAA,EAAS,MAAM,WAAA,CAAY,KAAK,CAAA,EAAG,QAAA,EAAA,UAAA,EAE1F,CAAA,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/domains/traces/components/thread-trace/thread-trace-spans.es.js

@@ -1,5 +1,5 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Minimize2 } from 'lucide-react';
 import { useMemo } from 'react';
 import { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids.es.js';
 import { useTraceSpans } from '../../hooks/use-trace-spans.es.js';
@@ -8,58 +8,58 @@ import { TraceSpanTree } from '../trace-span-tree.es.js';
 import { useThreadTrace } from './thread-trace-context.es.js';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
 import { B as Button } from '../../../../Button-D43ghVKt.js';
+import { C as CollapsibleBox } from '../../../../collapsible-box-DW-y0Oi1.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
+function useSpansClamp() {
+  const { isExpanded, setExpanded, messagesHeight, timelineHeight, detailsHeaderHeight } = useThreadTraceRow();
+  const budget = messagesHeight !== null ? messagesHeight - (detailsHeaderHeight ?? 0) : null;
+  const overflows = budget !== null && timelineHeight !== null && timelineHeight > budget;
+  return { budget, overflows, isExpanded, setExpanded };
+}
 function ThreadTraceSpans({ className, timelineClassName, ...props }) {
   const { selectSpan } = useThreadTrace();
-  const {
-    traceId,
-    isActive,
-    isExpanded,
-    selectedSpanId,
-    featuredSpanIds,
-    revealSpanId,
-    setExpanded,
-    timelineRef,
-    messagesHeight,
-    timelineHeight,
-    detailsHeaderHeight
-  } = useThreadTraceRow();
+  const { traceId, selectedSpanId, featuredSpanIds, revealSpanId, timelineRef, isActive } = useThreadTraceRow();
+  const { budget, overflows, isExpanded, setExpanded } = useSpansClamp();
   const { data, isLoading } = useTraceSpans(traceId, { passive: true });
   const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);
   const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);
-  const timelineBudget = messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;
-  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;
-  const isClamped = overflows && !isExpanded;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-slot": "thread-trace-spans",
-        className: cn("relative overflow-hidden", className),
-        style: !isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : void 0,
-        "data-testid": "trace-row-timeline",
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { ref: timelineRef, className: cn("px-4 pt-2 pb-4", timelineClassName), children: /* @__PURE__ */ jsx(
-            TraceSpanTree,
-            {
-              hierarchicalSpans,
-              selectedSpanId,
-              featuredSpanIds,
-              revealSpanId,
-              onSpanClick: (id) => selectSpan(traceId, selectedSpanId === id ? void 0 : id),
-              expandedSpanIds,
-              setExpandedSpanIds,
-              isLoading
-            }
-          ) }),
-          overflows && isClamped && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t from-sidebar via-sidebar/80 to-transparent pb-2", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
-        ]
-      }
-    ),
-    overflows && !isClamped && !isActive && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ChevronUp, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(false), children: "Show less" }) })
-  ] });
+  const box = {
+    collapsedHeight: budget ?? 0,
+    isExpanded: isExpanded || budget === null,
+    isClipped: overflows,
+    setClipped: () => {
+    },
+    setExpanded,
+    toggleExpanded: () => setExpanded(!isExpanded)
+  };
+  return /* @__PURE__ */ jsxs(
+    CollapsibleBox,
+    {
+      state: box,
+      expandLabel: "Expand",
+      "data-slot": "thread-trace-spans",
+      "data-testid": "trace-row-timeline",
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: timelineRef, className: cn("px-4 pt-2 pb-4", timelineClassName), children: /* @__PURE__ */ jsx(
+          TraceSpanTree,
+          {
+            hierarchicalSpans,
+            selectedSpanId,
+            featuredSpanIds,
+            revealSpanId,
+            onSpanClick: (id) => selectSpan(traceId, selectedSpanId === id ? void 0 : id),
+            expandedSpanIds,
+            setExpandedSpanIds,
+            isLoading
+          }
+        ) }),
+        isExpanded && overflows && !isActive && /* @__PURE__ */ jsx("div", { className: "flex justify-center pb-2", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", icon: /* @__PURE__ */ jsx(Minimize2, {}), onClick: () => setExpanded(false), children: "Collapse" }) })
+      ]
+    }
+  );
 }
 
 export { ThreadTraceSpans };

package/dist/domains/traces/components/thread-trace/thread-trace-spans.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-spans.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t from-sidebar via-sidebar/80 to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-spans.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { Minimize2 } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { CollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport type { CollapsibleBoxState } from '@/ds/components/CollapsibleBox';\nimport { cn } from '@/lib/utils';\n\n/**\n * The span tree is clamped to the messages column while the row is collapsed. The budget is the\n * messages height minus the details header (when there is one), otherwise the right cell overshoots the left.\n */\nfunction useSpansClamp() {\n  const { isExpanded, setExpanded, messagesHeight, timelineHeight, detailsHeaderHeight } = useThreadTraceRow();\n  const budget = messagesHeight !== null ? messagesHeight - (detailsHeaderHeight ?? 0) : null;\n  const overflows = budget !== null && timelineHeight !== null && timelineHeight > budget;\n  return { budget, overflows, isExpanded, setExpanded };\n}\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped (and faded) to the messages column while the row is collapsed.\n * Clicking the fade or its Expand button expands it; a Collapse button sits under the expanded tree\n * (hidden while a span of the row is open). Clamping needs the measured height of `ThreadTrace.Messages`.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const { traceId, selectedSpanId, featuredSpanIds, revealSpanId, timelineRef, isActive } = useThreadTraceRow();\n  const { budget, overflows, isExpanded, setExpanded } = useSpansClamp();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The clamp applies whenever the row is collapsed, not only once `overflows` is known: the\n  // measurement lags a frame on mount, which would otherwise let the cell grow and snap back.\n  // Overflow is already measured by the row, so the box's own measurement is ignored.\n  const box: CollapsibleBoxState = {\n    collapsedHeight: budget ?? 0,\n    isExpanded: isExpanded || budget === null,\n    isClipped: overflows,\n    setClipped: () => {},\n    setExpanded,\n    toggleExpanded: () => setExpanded(!isExpanded),\n  };\n\n  return (\n    <CollapsibleBox\n      state={box}\n      expandLabel=\"Expand\"\n      data-slot=\"thread-trace-spans\"\n      data-testid=\"trace-row-timeline\"\n      className={className}\n      {...props}\n    >\n      <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n        <TraceSpanTree\n          hierarchicalSpans={hierarchicalSpans}\n          selectedSpanId={selectedSpanId}\n          featuredSpanIds={featuredSpanIds}\n          revealSpanId={revealSpanId}\n          onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          isLoading={isLoading}\n        />\n      </div>\n      {isExpanded && overflows && !isActive && (\n        <div className=\"flex justify-center pb-2\">\n          <Button size=\"sm\" variant=\"ghost\" icon={<Minimize2 />} onClick={() => setExpanded(false)}>\n            Collapse\n          </Button>\n        </div>\n      )}\n    </CollapsibleBox>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAmBA,SAAS,aAAA,GAAgB;AACvB,EAAA,MAAM,EAAE,UAAA,EAAY,WAAA,EAAa,gBAAgB,cAAA,EAAgB,mBAAA,KAAwB,iBAAA,EAAkB;AAC3G,EAAA,MAAM,MAAA,GAAS,cAAA,KAAmB,IAAA,GAAO,cAAA,IAAkB,uBAAuB,CAAA,CAAA,GAAK,IAAA;AACvF,EAAA,MAAM,SAAA,GAAY,MAAA,KAAW,IAAA,IAAQ,cAAA,KAAmB,QAAQ,cAAA,GAAiB,MAAA;AACjF,EAAA,OAAO,EAAE,MAAA,EAAQ,SAAA,EAAW,UAAA,EAAY,WAAA,EAAY;AACtD;AAYO,SAAS,iBAAiB,EAAE,SAAA,EAAW,iBAAA,EAAmB,GAAG,OAAM,EAA0B;AAClG,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,cAAA,EAAe;AACtC,EAAA,MAAM,EAAE,SAAS,cAAA,EAAgB,eAAA,EAAiB,cAAc,WAAA,EAAa,QAAA,KAAa,iBAAA,EAAkB;AAC5G,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAA,EAAW,UAAA,EAAY,WAAA,KAAgB,aAAA,EAAc;AAGrE,EAAA,MAAM,EAAE,MAAM,SAAA,EAAU,GAAI,cAAc,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AACpE,EAAA,MAAM,iBAAA,GAAoB,OAAA,CAAQ,MAAM,uBAAA,CAAwB,IAAA,EAAM,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAC1F,EAAA,MAAM,EAAE,eAAA,EAAiB,kBAAA,EAAmB,GAAI,mBAAmB,iBAAiB,CAAA;AAKpF,EAAA,MAAM,GAAA,GAA2B;AAAA,IAC/B,iBAAiB,MAAA,IAAU,CAAA;AAAA,IAC3B,UAAA,EAAY,cAAc,MAAA,KAAW,IAAA;AAAA,IACrC,SAAA,EAAW,SAAA;AAAA,IACX,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,WAAA;AAAA,IACA,cAAA,EAAgB,MAAM,WAAA,CAAY,CAAC,UAAU;AAAA,GAC/C;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,GAAA;AAAA,MACP,WAAA,EAAY,QAAA;AAAA,MACZ,WAAA,EAAU,oBAAA;AAAA,MACV,aAAA,EAAY,oBAAA;AAAA,MACZ,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,GAAA,EAAK,WAAA,EAAa,WAAW,EAAA,CAAG,gBAAA,EAAkB,iBAAiB,CAAA,EACtE,QAAA,kBAAA,GAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,iBAAA;AAAA,YACA,cAAA;AAAA,YACA,eAAA;AAAA,YACA,YAAA;AAAA,YACA,aAAa,CAAA,EAAA,KAAM,UAAA,CAAW,SAAS,cAAA,KAAmB,EAAA,GAAK,SAAY,EAAE,CAAA;AAAA,YAC7E,eAAA;AAAA,YACA,kBAAA;AAAA,YACA;AAAA;AAAA,SACF,EACF,CAAA;AAAA,QACC,UAAA,IAAc,SAAA,IAAa,CAAC,QAAA,oBAC3B,GAAA,CAAC,SAAI,SAAA,EAAU,0BAAA,EACb,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,SAAQ,OAAA,EAAQ,IAAA,kBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAAI,OAAA,EAAS,MAAM,WAAA,CAAY,KAAK,CAAA,EAAG,QAAA,EAAA,UAAA,EAE1F,CAAA,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/domains/traces/components/thread-trace.cjs.js

@@ -15,8 +15,9 @@ const domains_traces_components_threadTrace_threadTraceRowContext = require('./t
 const ThreadTrace = Object.assign(domains_traces_components_threadTrace_threadTraceRoot.ThreadTraceRoot, {
   List: domains_traces_components_threadTrace_threadTraceList.ThreadTraceList,
   Row: domains_traces_components_threadTrace_threadTraceRow.ThreadTraceRow,
+  Divider: domains_traces_components_threadTrace_threadTraceRow.ThreadTraceDivider,
+  RowBody: domains_traces_components_threadTrace_threadTraceRow.ThreadTraceRowBody,
   Messages: domains_traces_components_threadTrace_threadTraceMessages.ThreadTraceMessages,
-  MessagesHeader: domains_traces_components_threadTrace_threadTraceMessages.ThreadTraceMessagesHeader,
   TabList: domains_traces_components_threadTrace_threadTraceMessages.ThreadTraceTabList,
   Tab: domains_traces_components_threadTrace_threadTraceMessages.ThreadTraceTab,
   TabContent: domains_traces_components_threadTrace_threadTraceMessages.ThreadTraceTabContent,

package/dist/domains/traces/components/thread-trace.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace.cjs.js","sources":["../../../../src/domains/traces/components/thread-trace/index.ts"],"sourcesContent":["import { ThreadTraceDetails, ThreadTraceDetailsActions, ThreadTraceDetailsHeader } from './thread-trace-details';\nimport { ThreadTraceList } from './thread-trace-list';\nimport {\n  ThreadTraceMessages,\n  ThreadTraceMessagesHeader,\n  ThreadTraceTab,\n  ThreadTraceTabContent,\n  ThreadTraceTabList,\n} from './thread-trace-messages';\nimport { ThreadTraceRoot } from './thread-trace-root';\nimport { ThreadTraceRow } from './thread-trace-row';\nimport { ThreadTraceSpanPanel } from './thread-trace-span-panel';\nimport { ThreadTraceSpans } from './thread-trace-spans';\n\n/**\n * A memory thread rendered as its traces: one row per agent turn (oldest first), with the\n * messages on the left and the span tree on the right. Clicking a span opens its detail panel on\n * the side so the conversation stays readable. Every part takes `className` and spreads the rest\n * of its props, so the layout can be restyled from the call site.\n *\n * @example\n * <ThreadTrace traceIds={ids} onLoadOlder={fetchOlderPage}>\n *   <ThreadTrace.List>\n *     {ids.map((traceId, i) => (\n *       <ThreadTrace.Row key={traceId} traceId={traceId}>\n *         <ThreadTrace.Messages>\n *           <ThreadTrace.MessagesHeader>\n *             <ThreadTrace.TabList>\n *               <ThreadTrace.Tab value=\"messages\">Messages</ThreadTrace.Tab>\n *             </ThreadTrace.TabList>\n *           </ThreadTrace.MessagesHeader>\n *           <ThreadTrace.TabContent value=\"messages\">…</ThreadTrace.TabContent>\n *         </ThreadTrace.Messages>\n *         <ThreadTrace.Details>\n *           <ThreadTrace.DetailsHeader>\n *             <ThreadTrace.DetailsActions>…</ThreadTrace.DetailsActions>\n *           </ThreadTrace.DetailsHeader>\n *           <ThreadTrace.Spans />\n *         </ThreadTrace.Details>\n *       </ThreadTrace.Row>\n *     ))}\n *   </ThreadTrace.List>\n *   <ThreadTrace.SpanPanel />\n * </ThreadTrace>\n */\nexport const ThreadTrace = Object.assign(ThreadTraceRoot, {\n  List: ThreadTraceList,\n  Row: ThreadTraceRow,\n  Messages: ThreadTraceMessages,\n  MessagesHeader: ThreadTraceMessagesHeader,\n  TabList: ThreadTraceTabList,\n  Tab: ThreadTraceTab,\n  TabContent: ThreadTraceTabContent,\n  Details: ThreadTraceDetails,\n  DetailsHeader: ThreadTraceDetailsHeader,\n  DetailsActions: ThreadTraceDetailsActions,\n  Spans: ThreadTraceSpans,\n  SpanPanel: ThreadTraceSpanPanel,\n});\n\nexport { useThreadTrace } from './thread-trace-context';\nexport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nexport { useThreadTraceRow } from './thread-trace-row-context';\nexport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nexport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nexport type { ThreadTraceRootProps } from './thread-trace-root';\nexport type { ThreadTraceListProps } from './thread-trace-list';\nexport type { ThreadTraceRowProps } from './thread-trace-row';\nexport type {\n  ThreadTraceMessagesProps,\n  ThreadTraceMessagesHeaderProps,\n  ThreadTraceTabListProps,\n  ThreadTraceTabProps,\n  ThreadTraceTabContentProps,\n} from './thread-trace-messages';\nexport type {\n  ThreadTraceDetailsProps,\n  ThreadTraceDetailsHeaderProps,\n  ThreadTraceDetailsActionsProps,\n} from './thread-trace-details';\nexport type { ThreadTraceSpansProps } from './thread-trace-spans';\nexport type { ThreadTraceSpanPanelProps } from './thread-trace-span-panel';\n"],"names":["ThreadTraceRoot","ThreadTraceList","ThreadTraceRow","ThreadTraceMessages","ThreadTraceMessagesHeader","ThreadTraceTabList","ThreadTraceTab","ThreadTraceTabContent","ThreadTraceDetails","ThreadTraceDetailsHeader","ThreadTraceDetailsActions","ThreadTraceSpans","ThreadTraceSpanPanel"],"mappings":";;;;;;;;;;;;;;AA6CO,MAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAOA,qEAAA,EAAiB;AAAA,EACxD,IAAA,EAAMC,qEAAA;AAAA,EACN,GAAA,EAAKC,mEAAA;AAAA,EACL,QAAA,EAAUC,6EAAA;AAAA,EACV,cAAA,EAAgBC,mFAAA;AAAA,EAChB,OAAA,EAASC,4EAAA;AAAA,EACT,GAAA,EAAKC,wEAAA;AAAA,EACL,UAAA,EAAYC,+EAAA;AAAA,EACZ,OAAA,EAASC,2EAAA;AAAA,EACT,aAAA,EAAeC,iFAAA;AAAA,EACf,cAAA,EAAgBC,kFAAA;AAAA,EAChB,KAAA,EAAOC,uEAAA;AAAA,EACP,SAAA,EAAWC;AACb,CAAC;;;;;;;"}
+{"version":3,"file":"thread-trace.cjs.js","sources":["../../../../src/domains/traces/components/thread-trace/index.ts"],"sourcesContent":["import { ThreadTraceDetails, ThreadTraceDetailsActions, ThreadTraceDetailsHeader } from './thread-trace-details';\nimport { ThreadTraceList } from './thread-trace-list';\nimport {\n  ThreadTraceMessages,\n  ThreadTraceTab,\n  ThreadTraceTabContent,\n  ThreadTraceTabList,\n} from './thread-trace-messages';\nimport { ThreadTraceRoot } from './thread-trace-root';\nimport { ThreadTraceDivider, ThreadTraceRow, ThreadTraceRowBody } from './thread-trace-row';\nimport { ThreadTraceSpanPanel } from './thread-trace-span-panel';\nimport { ThreadTraceSpans } from './thread-trace-spans';\n\n/**\n * A memory thread rendered as its traces: one row per agent turn (oldest first), with the\n * messages on the left and the span tree on the right. Clicking a span opens its detail panel on\n * the side so the conversation stays readable. Every part takes `className` and spreads the rest\n * of its props, so the layout can be restyled from the call site.\n *\n * @example\n * <ThreadTrace traceIds={ids} onLoadOlder={fetchOlderPage}>\n *   <ThreadTrace.List>\n *     {ids.map((traceId, i) => (\n *       <ThreadTrace.Row key={traceId} traceId={traceId}>\n *         <ThreadTrace.Divider label={`Turn ${i + 1}`}>\n *           <ThreadTrace.TabList>\n *             <ThreadTrace.Tab value=\"messages\">Messages</ThreadTrace.Tab>\n *           </ThreadTrace.TabList>\n *         </ThreadTrace.Divider>\n *         <ThreadTrace.RowBody>\n *           <ThreadTrace.Messages>\n *             <ThreadTrace.TabContent value=\"messages\">…</ThreadTrace.TabContent>\n *           </ThreadTrace.Messages>\n *           <ThreadTrace.Details>\n *             <ThreadTrace.DetailsHeader>\n *               <ThreadTrace.DetailsActions>…</ThreadTrace.DetailsActions>\n *             </ThreadTrace.DetailsHeader>\n *             <ThreadTrace.Spans />\n *           </ThreadTrace.Details>\n *         </ThreadTrace.RowBody>\n *       </ThreadTrace.Row>\n *     ))}\n *   </ThreadTrace.List>\n *   <ThreadTrace.SpanPanel />\n * </ThreadTrace>\n */\nexport const ThreadTrace = Object.assign(ThreadTraceRoot, {\n  List: ThreadTraceList,\n  Row: ThreadTraceRow,\n  Divider: ThreadTraceDivider,\n  RowBody: ThreadTraceRowBody,\n  Messages: ThreadTraceMessages,\n  TabList: ThreadTraceTabList,\n  Tab: ThreadTraceTab,\n  TabContent: ThreadTraceTabContent,\n  Details: ThreadTraceDetails,\n  DetailsHeader: ThreadTraceDetailsHeader,\n  DetailsActions: ThreadTraceDetailsActions,\n  Spans: ThreadTraceSpans,\n  SpanPanel: ThreadTraceSpanPanel,\n});\n\nexport { useThreadTrace } from './thread-trace-context';\nexport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nexport { useThreadTraceRow } from './thread-trace-row-context';\nexport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nexport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nexport type { ThreadTraceRootProps } from './thread-trace-root';\nexport type { ThreadTraceListProps } from './thread-trace-list';\nexport type { ThreadTraceRowProps, ThreadTraceRowBodyProps, ThreadTraceDividerProps } from './thread-trace-row';\nexport type {\n  ThreadTraceMessagesProps,\n  ThreadTraceTabListProps,\n  ThreadTraceTabProps,\n  ThreadTraceTabContentProps,\n} from './thread-trace-messages';\nexport type {\n  ThreadTraceDetailsProps,\n  ThreadTraceDetailsHeaderProps,\n  ThreadTraceDetailsActionsProps,\n} from './thread-trace-details';\nexport type { ThreadTraceSpansProps } from './thread-trace-spans';\nexport type { ThreadTraceSpanPanelProps } from './thread-trace-span-panel';\n"],"names":["ThreadTraceRoot","ThreadTraceList","ThreadTraceRow","ThreadTraceDivider","ThreadTraceRowBody","ThreadTraceMessages","ThreadTraceTabList","ThreadTraceTab","ThreadTraceTabContent","ThreadTraceDetails","ThreadTraceDetailsHeader","ThreadTraceDetailsActions","ThreadTraceSpans","ThreadTraceSpanPanel"],"mappings":";;;;;;;;;;;;;;AA8CO,MAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAOA,qEAAA,EAAiB;AAAA,EACxD,IAAA,EAAMC,qEAAA;AAAA,EACN,GAAA,EAAKC,mEAAA;AAAA,EACL,OAAA,EAASC,uEAAA;AAAA,EACT,OAAA,EAASC,uEAAA;AAAA,EACT,QAAA,EAAUC,6EAAA;AAAA,EACV,OAAA,EAASC,4EAAA;AAAA,EACT,GAAA,EAAKC,wEAAA;AAAA,EACL,UAAA,EAAYC,+EAAA;AAAA,EACZ,OAAA,EAASC,2EAAA;AAAA,EACT,aAAA,EAAeC,iFAAA;AAAA,EACf,cAAA,EAAgBC,kFAAA;AAAA,EAChB,KAAA,EAAOC,uEAAA;AAAA,EACP,SAAA,EAAWC;AACb,CAAC;;;;;;;"}

package/dist/domains/traces/components/thread-trace.es.js

@@ -1,8 +1,8 @@
 import { ThreadTraceDetailsActions, ThreadTraceDetailsHeader, ThreadTraceDetails } from './thread-trace/thread-trace-details.es.js';
 import { ThreadTraceList } from './thread-trace/thread-trace-list.es.js';
-import { ThreadTraceTabContent, ThreadTraceTab, ThreadTraceTabList, ThreadTraceMessagesHeader, ThreadTraceMessages } from './thread-trace/thread-trace-messages.es.js';
+import { ThreadTraceTabContent, ThreadTraceTab, ThreadTraceTabList, ThreadTraceMessages } from './thread-trace/thread-trace-messages.es.js';
 import { ThreadTraceRoot } from './thread-trace/thread-trace-root.es.js';
-import { ThreadTraceRow } from './thread-trace/thread-trace-row.es.js';
+import { ThreadTraceRowBody, ThreadTraceDivider, ThreadTraceRow } from './thread-trace/thread-trace-row.es.js';
 export { THREAD_TRACE_MESSAGES_TAB } from './thread-trace/thread-trace-row.es.js';
 import { ThreadTraceSpanPanel } from './thread-trace/thread-trace-span-panel.es.js';
 import { ThreadTraceSpans } from './thread-trace/thread-trace-spans.es.js';
@@ -12,8 +12,9 @@ export { useThreadTraceRow } from './thread-trace/thread-trace-row-context.es.js
 const ThreadTrace = Object.assign(ThreadTraceRoot, {
   List: ThreadTraceList,
   Row: ThreadTraceRow,
+  Divider: ThreadTraceDivider,
+  RowBody: ThreadTraceRowBody,
   Messages: ThreadTraceMessages,
-  MessagesHeader: ThreadTraceMessagesHeader,
   TabList: ThreadTraceTabList,
   Tab: ThreadTraceTab,
   TabContent: ThreadTraceTabContent,

package/dist/domains/traces/components/thread-trace.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace.es.js","sources":["../../../../src/domains/traces/components/thread-trace/index.ts"],"sourcesContent":["import { ThreadTraceDetails, ThreadTraceDetailsActions, ThreadTraceDetailsHeader } from './thread-trace-details';\nimport { ThreadTraceList } from './thread-trace-list';\nimport {\n  ThreadTraceMessages,\n  ThreadTraceMessagesHeader,\n  ThreadTraceTab,\n  ThreadTraceTabContent,\n  ThreadTraceTabList,\n} from './thread-trace-messages';\nimport { ThreadTraceRoot } from './thread-trace-root';\nimport { ThreadTraceRow } from './thread-trace-row';\nimport { ThreadTraceSpanPanel } from './thread-trace-span-panel';\nimport { ThreadTraceSpans } from './thread-trace-spans';\n\n/**\n * A memory thread rendered as its traces: one row per agent turn (oldest first), with the\n * messages on the left and the span tree on the right. Clicking a span opens its detail panel on\n * the side so the conversation stays readable. Every part takes `className` and spreads the rest\n * of its props, so the layout can be restyled from the call site.\n *\n * @example\n * <ThreadTrace traceIds={ids} onLoadOlder={fetchOlderPage}>\n *   <ThreadTrace.List>\n *     {ids.map((traceId, i) => (\n *       <ThreadTrace.Row key={traceId} traceId={traceId}>\n *         <ThreadTrace.Messages>\n *           <ThreadTrace.MessagesHeader>\n *             <ThreadTrace.TabList>\n *               <ThreadTrace.Tab value=\"messages\">Messages</ThreadTrace.Tab>\n *             </ThreadTrace.TabList>\n *           </ThreadTrace.MessagesHeader>\n *           <ThreadTrace.TabContent value=\"messages\">…</ThreadTrace.TabContent>\n *         </ThreadTrace.Messages>\n *         <ThreadTrace.Details>\n *           <ThreadTrace.DetailsHeader>\n *             <ThreadTrace.DetailsActions>…</ThreadTrace.DetailsActions>\n *           </ThreadTrace.DetailsHeader>\n *           <ThreadTrace.Spans />\n *         </ThreadTrace.Details>\n *       </ThreadTrace.Row>\n *     ))}\n *   </ThreadTrace.List>\n *   <ThreadTrace.SpanPanel />\n * </ThreadTrace>\n */\nexport const ThreadTrace = Object.assign(ThreadTraceRoot, {\n  List: ThreadTraceList,\n  Row: ThreadTraceRow,\n  Messages: ThreadTraceMessages,\n  MessagesHeader: ThreadTraceMessagesHeader,\n  TabList: ThreadTraceTabList,\n  Tab: ThreadTraceTab,\n  TabContent: ThreadTraceTabContent,\n  Details: ThreadTraceDetails,\n  DetailsHeader: ThreadTraceDetailsHeader,\n  DetailsActions: ThreadTraceDetailsActions,\n  Spans: ThreadTraceSpans,\n  SpanPanel: ThreadTraceSpanPanel,\n});\n\nexport { useThreadTrace } from './thread-trace-context';\nexport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nexport { useThreadTraceRow } from './thread-trace-row-context';\nexport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nexport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nexport type { ThreadTraceRootProps } from './thread-trace-root';\nexport type { ThreadTraceListProps } from './thread-trace-list';\nexport type { ThreadTraceRowProps } from './thread-trace-row';\nexport type {\n  ThreadTraceMessagesProps,\n  ThreadTraceMessagesHeaderProps,\n  ThreadTraceTabListProps,\n  ThreadTraceTabProps,\n  ThreadTraceTabContentProps,\n} from './thread-trace-messages';\nexport type {\n  ThreadTraceDetailsProps,\n  ThreadTraceDetailsHeaderProps,\n  ThreadTraceDetailsActionsProps,\n} from './thread-trace-details';\nexport type { ThreadTraceSpansProps } from './thread-trace-spans';\nexport type { ThreadTraceSpanPanelProps } from './thread-trace-span-panel';\n"],"names":[],"mappings":";;;;;;;;;;;AA6CO,MAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAO,eAAA,EAAiB;AAAA,EACxD,IAAA,EAAM,eAAA;AAAA,EACN,GAAA,EAAK,cAAA;AAAA,EACL,QAAA,EAAU,mBAAA;AAAA,EACV,cAAA,EAAgB,yBAAA;AAAA,EAChB,OAAA,EAAS,kBAAA;AAAA,EACT,GAAA,EAAK,cAAA;AAAA,EACL,UAAA,EAAY,qBAAA;AAAA,EACZ,OAAA,EAAS,kBAAA;AAAA,EACT,aAAA,EAAe,wBAAA;AAAA,EACf,cAAA,EAAgB,yBAAA;AAAA,EAChB,KAAA,EAAO,gBAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAC;;;;"}
+{"version":3,"file":"thread-trace.es.js","sources":["../../../../src/domains/traces/components/thread-trace/index.ts"],"sourcesContent":["import { ThreadTraceDetails, ThreadTraceDetailsActions, ThreadTraceDetailsHeader } from './thread-trace-details';\nimport { ThreadTraceList } from './thread-trace-list';\nimport {\n  ThreadTraceMessages,\n  ThreadTraceTab,\n  ThreadTraceTabContent,\n  ThreadTraceTabList,\n} from './thread-trace-messages';\nimport { ThreadTraceRoot } from './thread-trace-root';\nimport { ThreadTraceDivider, ThreadTraceRow, ThreadTraceRowBody } from './thread-trace-row';\nimport { ThreadTraceSpanPanel } from './thread-trace-span-panel';\nimport { ThreadTraceSpans } from './thread-trace-spans';\n\n/**\n * A memory thread rendered as its traces: one row per agent turn (oldest first), with the\n * messages on the left and the span tree on the right. Clicking a span opens its detail panel on\n * the side so the conversation stays readable. Every part takes `className` and spreads the rest\n * of its props, so the layout can be restyled from the call site.\n *\n * @example\n * <ThreadTrace traceIds={ids} onLoadOlder={fetchOlderPage}>\n *   <ThreadTrace.List>\n *     {ids.map((traceId, i) => (\n *       <ThreadTrace.Row key={traceId} traceId={traceId}>\n *         <ThreadTrace.Divider label={`Turn ${i + 1}`}>\n *           <ThreadTrace.TabList>\n *             <ThreadTrace.Tab value=\"messages\">Messages</ThreadTrace.Tab>\n *           </ThreadTrace.TabList>\n *         </ThreadTrace.Divider>\n *         <ThreadTrace.RowBody>\n *           <ThreadTrace.Messages>\n *             <ThreadTrace.TabContent value=\"messages\">…</ThreadTrace.TabContent>\n *           </ThreadTrace.Messages>\n *           <ThreadTrace.Details>\n *             <ThreadTrace.DetailsHeader>\n *               <ThreadTrace.DetailsActions>…</ThreadTrace.DetailsActions>\n *             </ThreadTrace.DetailsHeader>\n *             <ThreadTrace.Spans />\n *           </ThreadTrace.Details>\n *         </ThreadTrace.RowBody>\n *       </ThreadTrace.Row>\n *     ))}\n *   </ThreadTrace.List>\n *   <ThreadTrace.SpanPanel />\n * </ThreadTrace>\n */\nexport const ThreadTrace = Object.assign(ThreadTraceRoot, {\n  List: ThreadTraceList,\n  Row: ThreadTraceRow,\n  Divider: ThreadTraceDivider,\n  RowBody: ThreadTraceRowBody,\n  Messages: ThreadTraceMessages,\n  TabList: ThreadTraceTabList,\n  Tab: ThreadTraceTab,\n  TabContent: ThreadTraceTabContent,\n  Details: ThreadTraceDetails,\n  DetailsHeader: ThreadTraceDetailsHeader,\n  DetailsActions: ThreadTraceDetailsActions,\n  Spans: ThreadTraceSpans,\n  SpanPanel: ThreadTraceSpanPanel,\n});\n\nexport { useThreadTrace } from './thread-trace-context';\nexport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nexport { useThreadTraceRow } from './thread-trace-row-context';\nexport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nexport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nexport type { ThreadTraceRootProps } from './thread-trace-root';\nexport type { ThreadTraceListProps } from './thread-trace-list';\nexport type { ThreadTraceRowProps, ThreadTraceRowBodyProps, ThreadTraceDividerProps } from './thread-trace-row';\nexport type {\n  ThreadTraceMessagesProps,\n  ThreadTraceTabListProps,\n  ThreadTraceTabProps,\n  ThreadTraceTabContentProps,\n} from './thread-trace-messages';\nexport type {\n  ThreadTraceDetailsProps,\n  ThreadTraceDetailsHeaderProps,\n  ThreadTraceDetailsActionsProps,\n} from './thread-trace-details';\nexport type { ThreadTraceSpansProps } from './thread-trace-spans';\nexport type { ThreadTraceSpanPanelProps } from './thread-trace-span-panel';\n"],"names":[],"mappings":";;;;;;;;;;;AA8CO,MAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAO,eAAA,EAAiB;AAAA,EACxD,IAAA,EAAM,eAAA;AAAA,EACN,GAAA,EAAK,cAAA;AAAA,EACL,OAAA,EAAS,kBAAA;AAAA,EACT,OAAA,EAAS,kBAAA;AAAA,EACT,QAAA,EAAU,mBAAA;AAAA,EACV,OAAA,EAAS,kBAAA;AAAA,EACT,GAAA,EAAK,cAAA;AAAA,EACL,UAAA,EAAY,qBAAA;AAAA,EACZ,OAAA,EAAS,kBAAA;AAAA,EACT,aAAA,EAAe,wBAAA;AAAA,EACf,cAAA,EAAgB,yBAAA;AAAA,EAChB,KAAA,EAAO,gBAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAC;;;;"}

package/dist/domains/traces/components/thread-view-by-trace.cjs.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('@mastra/react');
+const reactQuery = require('@tanstack/react-query');
 const lucideReact = require('lucide-react');
 const React = require('react');
-require('@mastra/react');
-require('@tanstack/react-query');
 require('@base-ui/react/combobox');
-require('../../../toast-nm-fM7BR.cjs');
 const domains_scores_components_traceScoresTab = require('../../scores/components/trace-scores-tab.cjs.js');
 require('@mastra/core/utils/safe-stringify');
 const Button = require('../../../Button-CXhSUBxN.cjs');
@@ -21,7 +20,7 @@ const domains_traces_components_traceThreadItemView = require('./trace-thread-it
 const domains_traces_components_tracesErrorContent = require('./traces-error-content.cjs.js');
 const domains_traces_hooks_useTraceSpans = require('../hooks/use-trace-spans.cjs.js');
 const domains_traces_hooks_useTracesListSource = require('../hooks/use-traces-list-source.cjs.js');
-const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const icons_ScorersIcon = require('../../../icons/ScorersIcon.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace/thread-trace-row-context.cjs.js');
@@ -36,7 +35,7 @@ function ThreadViewByTrace({
   pageSize = 10
 }) {
   const legacyFilters = React.useMemo(() => ({ threadId }), [threadId]);
-  const { rows, isLoading, error, hasNextPage, isFetchingNextPage, fetchNextPage } = domains_traces_hooks_useTracesListSource.useTracesListSource({
+  const { rows, isLoading, isPlaceholderData, error, hasNextPage, isFetchingNextPage, fetchNextPage } = domains_traces_hooks_useTracesListSource.useTracesListSource({
     initialAutoRefetch: false,
     withQueryTrace,
     legacyFilters,
@@ -51,10 +50,24 @@ function ThreadViewByTrace({
     })
   });
   const traceIds = rows.map((trace) => trace.traceId).reverse();
+  const listSettled = !isLoading && !isPlaceholderData;
+  const client = react.useMastraClient();
+  const [readyThreadId, setReadyThreadId] = React.useState(null);
+  const isReady = readyThreadId === threadId;
+  const firstPageSpansSettled = reactQuery.useQueries({
+    queries: (isReady || !listSettled ? [] : traceIds).map((traceId) => ({
+      ...domains_traces_hooks_useTraceSpans.traceSpansQueryOptions(client, traceId),
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false
+    })),
+    combine: (results) => results.every((result) => !result.isPending)
+  });
+  if (!isReady && listSettled && firstPageSpansSettled) setReadyThreadId(threadId);
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_tracesErrorContent.TracesErrorContent, { error, resource: "traces", errorTitle: "Failed to load traces" }) });
   }
-  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadViewSkeleton.ThreadViewSkeleton, {});
+  if (!isReady) return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadViewSkeleton.ThreadViewSkeleton, { withFeedback });
   if (traceIds.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "body", tone: "muted", children: "No traces found for this thread." }) });
   }
@@ -67,7 +80,7 @@ function ThreadViewByTrace({
         if (hasNextPage && !isFetchingNextPage) fetchNextPage();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.List, { "data-testid": "thread-view-by-trace", children: traceIds.map((traceId) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Row, { traceId, children: /* @__PURE__ */ jsxRuntime.jsx(ThreadTraceRowContent, { withFeedback, onOpenScore }) }, traceId)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.List, { "data-testid": "thread-view-by-trace", children: traceIds.map((traceId, index) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Row, { traceId, children: /* @__PURE__ */ jsxRuntime.jsx(ThreadTraceRowContent, { turn: index + 1, withFeedback, onOpenScore }) }, traceId)) }),
         /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.SpanPanel, {})
       ]
     },
@@ -75,6 +88,7 @@ function ThreadViewByTrace({
   );
 }
 function ThreadTraceRowContent({
+  turn,
   withFeedback,
   onOpenScore
 }) {
@@ -84,8 +98,12 @@ function ThreadTraceRowContent({
   const { data: traceData } = domains_traces_hooks_useTraceSpans.useTraceSpans(traceId, { passive: true });
   const rootSpanId = traceData?.spans.find((span) => span.parentSpanId == null)?.spanId;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Messages, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.MessagesHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.TabList, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Divider, { label: `Turn ${turn}`, children: [
+      traceHref && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { render: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: traceHref }), variant: "ghost", size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {}), children: "Go to trace" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "h-4 w-px bg-border" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.TabList, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Tab, { value: "messages", children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareTextIcon, {}) }),
           "Messages"
@@ -98,22 +116,23 @@ function ThreadTraceRowContent({
           /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(icons_ScorersIcon.ScorersIcon, {}) }),
           "Scores"
         ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "messages", flush: true, children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceThreadItemView.TraceThreadItemView, { traceId, onHighlightSpans: highlightSpans }) }),
-      withFeedback && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "feedback", className: "min-h-0 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceFeedbackTab.TraceFeedbackTab, { traceId, variant: "thread" }, traceId) }),
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "scores", className: "min-h-0 py-3", children: rootSpanId ? /* @__PURE__ */ jsxRuntime.jsx(
-        domains_scores_components_traceScoresTab.TraceScoresTab,
-        {
-          traceId,
-          spanId: rootSpanId,
-          onScoreSelect: (scoreId) => onOpenScore(traceId, scoreId)
-        },
-        traceId
-      ) : null })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Details, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.DetailsHeader, { children: traceHref && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.DetailsActions, { children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { render: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: traceHref }), variant: "ghost", size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {}), children: "Go to trace" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Spans, {})
+    /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.RowBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Messages, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "messages", flush: true, children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceThreadItemView.TraceThreadItemView, { traceId, onHighlightSpans: highlightSpans }) }),
+        withFeedback && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "feedback", className: "min-h-0 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceFeedbackTab.TraceFeedbackTab, { traceId, variant: "thread" }, traceId) }),
+        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "scores", className: "min-h-0 py-3", children: rootSpanId ? /* @__PURE__ */ jsxRuntime.jsx(
+          domains_scores_components_traceScoresTab.TraceScoresTab,
+          {
+            traceId,
+            spanId: rootSpanId,
+            onScoreSelect: (scoreId) => onOpenScore(traceId, scoreId)
+          },
+          traceId
+        ) : null })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Details, { children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Spans, {}) })
     ] })
   ] });
 }

package/dist/domains/traces/components/thread-view-by-trace.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-view-by-trace.cjs.js","sources":["../../../../src/domains/traces/components/thread-view-by-trace.tsx"],"sourcesContent":["import { ExternalLinkIcon, MessageSquareReplyIcon, MessageSquareTextIcon } from 'lucide-react';\nimport { useMemo } from 'react';\nimport { TraceScoresTab } from '@/domains/scores';\nimport { ThreadTrace, useThreadTraceRow } from '@/domains/traces/components/thread-trace';\nimport type { ThreadTraceSelectedSpan } from '@/domains/traces/components/thread-trace';\n\nimport { ThreadViewSkeleton } from '@/domains/traces/components/thread-view-skeleton';\nimport { TraceFeedbackTab } from '@/domains/traces/components/trace-feedback-tab';\nimport { TraceThreadItemView } from '@/domains/traces/components/trace-thread-item-view';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } from '@/domains/traces/hooks/use-traces-list-source';\nimport type { UseTracesListSourceArgs } from '@/domains/traces/hooks/use-traces-list-source';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { useLinkComponent } from '@/lib/framework';\n\n// `queryTraces` requires a time range and rejects ranges over 31 days; the legacy endpoint is left unbounded.\nconst THREAD_WINDOW_MS = 31 * 24 * 60 * 60 * 1000;\n\nexport interface ThreadViewByTraceProps {\n  threadId: string;\n  /** Lists the thread through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Shows the per-trace Feedback tab and fetches its feedback. */\n  withFeedback: boolean;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  /** Turns loaded per page: the latest ones on open, then older ones as the reader scrolls up. */\n  pageSize?: number;\n}\n\n/**\n * A memory thread rendered as its traces, like a chat: one row per agent turn (oldest at the top),\n * opened on the latest turns, with older turns loaded as the reader scrolls up. Each row shows the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens its\n * detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  onOpenScore,\n  pageSize = 10,\n}: ThreadViewByTraceProps) {\n  const legacyFilters = useMemo<UseTracesListSourceArgs['legacyFilters']>(() => ({ threadId }), [threadId]);\n  const { rows, isLoading, error, hasNextPage, isFetchingNextPage, fetchNextPage } = useTracesListSource({\n    initialAutoRefetch: false,\n    withQueryTrace,\n    legacyFilters,\n    limit: pageSize,\n    query: now => ({\n      timeRange: {\n        from: new Date(now.getTime() - THREAD_WINDOW_MS).toISOString(),\n        to: now.toISOString(),\n      },\n      where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n      orderBy: [{ field: 'startedAt', direction: 'desc' }],\n    }),\n  });\n  // Pages come newest first; the conversation reads oldest first.\n  const traceIds = rows.map(trace => trace.traceId).reverse();\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"traces\" errorTitle=\"Failed to load traces\" />\n      </div>\n    );\n  }\n\n  if (isLoading) return <ThreadViewSkeleton />;\n\n  if (traceIds.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No traces found for this thread.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <ThreadTrace\n      key={threadId}\n      traceIds={traceIds}\n      onSelectedSpanChange={onSelectedSpanChange}\n      onLoadOlder={() => {\n        if (hasNextPage && !isFetchingNextPage) fetchNextPage();\n      }}\n    >\n      <ThreadTrace.List data-testid=\"thread-view-by-trace\">\n        {traceIds.map(traceId => (\n          <ThreadTrace.Row key={traceId} traceId={traceId}>\n            <ThreadTraceRowContent withFeedback={withFeedback} onOpenScore={onOpenScore} />\n          </ThreadTrace.Row>\n        ))}\n      </ThreadTrace.List>\n      <ThreadTrace.SpanPanel />\n    </ThreadTrace>\n  );\n}\n\nfunction ThreadTraceRowContent({\n  withFeedback,\n  onOpenScore,\n}: {\n  withFeedback: boolean;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}) {\n  const { traceId, highlightSpans } = useThreadTraceRow();\n  const { Link, paths } = useLinkComponent();\n  const traceHref = paths.traceLink(traceId);\n  // Same query the span tree observes (passive: the tree drives refetches).\n  const { data: traceData } = useTraceSpans(traceId, { passive: true });\n  const rootSpanId = traceData?.spans.find(span => span.parentSpanId == null)?.spanId;\n\n  return (\n    <>\n      <ThreadTrace.Messages>\n        <ThreadTrace.MessagesHeader>\n          <ThreadTrace.TabList>\n            <ThreadTrace.Tab value=\"messages\">\n              <Icon size=\"xs\">\n                <MessageSquareTextIcon />\n              </Icon>\n              Messages\n            </ThreadTrace.Tab>\n            {withFeedback && (\n              <ThreadTrace.Tab value=\"feedback\">\n                <Icon size=\"xs\">\n                  <MessageSquareReplyIcon />\n                </Icon>\n                Feedback\n              </ThreadTrace.Tab>\n            )}\n            <ThreadTrace.Tab value=\"scores\">\n              <Icon size=\"xs\">\n                <ScorersIcon />\n              </Icon>\n              Scores\n            </ThreadTrace.Tab>\n          </ThreadTrace.TabList>\n        </ThreadTrace.MessagesHeader>\n        <ThreadTrace.TabContent value=\"messages\" flush>\n          <TraceThreadItemView traceId={traceId} onHighlightSpans={highlightSpans} />\n        </ThreadTrace.TabContent>\n        {withFeedback && (\n          <ThreadTrace.TabContent value=\"feedback\" className=\"min-h-0 py-3\">\n            <TraceFeedbackTab key={traceId} traceId={traceId} variant=\"thread\" />\n          </ThreadTrace.TabContent>\n        )}\n        <ThreadTrace.TabContent value=\"scores\" className=\"min-h-0 py-3\">\n          {rootSpanId ? (\n            <TraceScoresTab\n              key={traceId}\n              traceId={traceId}\n              spanId={rootSpanId}\n              onScoreSelect={scoreId => onOpenScore(traceId, scoreId)}\n            />\n          ) : null}\n        </ThreadTrace.TabContent>\n      </ThreadTrace.Messages>\n      <ThreadTrace.Details>\n        <ThreadTrace.DetailsHeader>\n          {traceHref && (\n            <ThreadTrace.DetailsActions>\n              <Button render={<Link href={traceHref} />} variant=\"ghost\" size=\"sm\" icon={<ExternalLinkIcon />}>\n                Go to trace\n              </Button>\n            </ThreadTrace.DetailsActions>\n          )}\n        </ThreadTrace.DetailsHeader>\n        <ThreadTrace.Spans />\n      </ThreadTrace.Details>\n    </>\n  );\n}\n"],"names":["useMemo","useTracesListSource","jsx","TracesErrorContent","ThreadViewSkeleton","Txt","jsxs","ThreadTrace","useThreadTraceRow","useLinkComponent","useTraceSpans","Fragment","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","TraceThreadItemView","TraceFeedbackTab","TraceScoresTab","Button","ExternalLinkIcon"],"mappings":"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"}
+{"version":3,"file":"thread-view-by-trace.cjs.js","sources":["../../../../src/domains/traces/components/thread-view-by-trace.tsx"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQueries } from '@tanstack/react-query';\nimport { ExternalLinkIcon, MessageSquareReplyIcon, MessageSquareTextIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport { TraceScoresTab } from '@/domains/scores';\nimport { ThreadTrace, useThreadTraceRow } from '@/domains/traces/components/thread-trace';\nimport type { ThreadTraceSelectedSpan } from '@/domains/traces/components/thread-trace';\n\nimport { ThreadViewSkeleton } from '@/domains/traces/components/thread-view-skeleton';\nimport { TraceFeedbackTab } from '@/domains/traces/components/trace-feedback-tab';\nimport { TraceThreadItemView } from '@/domains/traces/components/trace-thread-item-view';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { traceSpansQueryOptions, useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } from '@/domains/traces/hooks/use-traces-list-source';\nimport type { UseTracesListSourceArgs } from '@/domains/traces/hooks/use-traces-list-source';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { useLinkComponent } from '@/lib/framework';\n\n// `queryTraces` requires a time range and rejects ranges over 31 days; the legacy endpoint is left unbounded.\nconst THREAD_WINDOW_MS = 31 * 24 * 60 * 60 * 1000;\n\nexport interface ThreadViewByTraceProps {\n  threadId: string;\n  /** Lists the thread through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Shows the per-trace Feedback tab and fetches its feedback. */\n  withFeedback: boolean;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  /** Turns loaded per page: the latest ones on open, then older ones as the reader scrolls up. */\n  pageSize?: number;\n}\n\n/**\n * A memory thread rendered as its traces, like a chat: one row per agent turn (oldest at the top),\n * opened on the latest turns, with older turns loaded as the reader scrolls up. Each row shows the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens its\n * detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  onOpenScore,\n  pageSize = 10,\n}: ThreadViewByTraceProps) {\n  const legacyFilters = useMemo<UseTracesListSourceArgs['legacyFilters']>(() => ({ threadId }), [threadId]);\n  const { rows, isLoading, isPlaceholderData, error, hasNextPage, isFetchingNextPage, fetchNextPage } =\n    useTracesListSource({\n      initialAutoRefetch: false,\n      withQueryTrace,\n      legacyFilters,\n      limit: pageSize,\n      query: now => ({\n        timeRange: {\n          from: new Date(now.getTime() - THREAD_WINDOW_MS).toISOString(),\n          to: now.toISOString(),\n        },\n        where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n        orderBy: [{ field: 'startedAt', direction: 'desc' }],\n      }),\n    });\n  // Pages come newest first; the conversation reads oldest first.\n  const traceIds = rows.map(trace => trace.traceId).reverse();\n  const listSettled = !isLoading && !isPlaceholderData;\n\n  // The first page is shown only once its turns' spans have settled too, so the rows mount complete\n  // instead of each one loading on its own. Older pages keep their per-row loading.\n  const client = useMastraClient();\n  const [readyThreadId, setReadyThreadId] = useState<string | null>(null);\n  const isReady = readyThreadId === threadId;\n  const firstPageSpansSettled = useQueries({\n    queries: (isReady || !listSettled ? [] : traceIds).map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n    })),\n    combine: results => results.every(result => !result.isPending),\n  });\n  if (!isReady && listSettled && firstPageSpansSettled) setReadyThreadId(threadId);\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"traces\" errorTitle=\"Failed to load traces\" />\n      </div>\n    );\n  }\n\n  if (!isReady) return <ThreadViewSkeleton withFeedback={withFeedback} />;\n\n  if (traceIds.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No traces found for this thread.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <ThreadTrace\n      key={threadId}\n      traceIds={traceIds}\n      onSelectedSpanChange={onSelectedSpanChange}\n      onLoadOlder={() => {\n        if (hasNextPage && !isFetchingNextPage) fetchNextPage();\n      }}\n    >\n      <ThreadTrace.List data-testid=\"thread-view-by-trace\">\n        {traceIds.map((traceId, index) => (\n          <ThreadTrace.Row key={traceId} traceId={traceId}>\n            <ThreadTraceRowContent turn={index + 1} withFeedback={withFeedback} onOpenScore={onOpenScore} />\n          </ThreadTrace.Row>\n        ))}\n      </ThreadTrace.List>\n      <ThreadTrace.SpanPanel />\n    </ThreadTrace>\n  );\n}\n\nfunction ThreadTraceRowContent({\n  turn,\n  withFeedback,\n  onOpenScore,\n}: {\n  /** 1-based position among the loaded turns. */\n  turn: number;\n  withFeedback: boolean;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}) {\n  const { traceId, highlightSpans } = useThreadTraceRow();\n  const { Link, paths } = useLinkComponent();\n  const traceHref = paths.traceLink(traceId);\n  // Same query the span tree observes (passive: the tree drives refetches).\n  const { data: traceData } = useTraceSpans(traceId, { passive: true });\n  const rootSpanId = traceData?.spans.find(span => span.parentSpanId == null)?.spanId;\n\n  return (\n    <>\n      <ThreadTrace.Divider label={`Turn ${turn}`}>\n        {traceHref && (\n          <>\n            <Button render={<Link href={traceHref} />} variant=\"ghost\" size=\"sm\" icon={<ExternalLinkIcon />}>\n              Go to trace\n            </Button>\n            <span aria-hidden className=\"h-4 w-px bg-border\" />\n          </>\n        )}\n        <ThreadTrace.TabList>\n          <ThreadTrace.Tab value=\"messages\">\n            <Icon size=\"xs\">\n              <MessageSquareTextIcon />\n            </Icon>\n            Messages\n          </ThreadTrace.Tab>\n          {withFeedback && (\n            <ThreadTrace.Tab value=\"feedback\">\n              <Icon size=\"xs\">\n                <MessageSquareReplyIcon />\n              </Icon>\n              Feedback\n            </ThreadTrace.Tab>\n          )}\n          <ThreadTrace.Tab value=\"scores\">\n            <Icon size=\"xs\">\n              <ScorersIcon />\n            </Icon>\n            Scores\n          </ThreadTrace.Tab>\n        </ThreadTrace.TabList>\n      </ThreadTrace.Divider>\n      <ThreadTrace.RowBody>\n        <ThreadTrace.Messages>\n          <ThreadTrace.TabContent value=\"messages\" flush>\n            <TraceThreadItemView traceId={traceId} onHighlightSpans={highlightSpans} />\n          </ThreadTrace.TabContent>\n          {withFeedback && (\n            <ThreadTrace.TabContent value=\"feedback\" className=\"min-h-0 py-3\">\n              <TraceFeedbackTab key={traceId} traceId={traceId} variant=\"thread\" />\n            </ThreadTrace.TabContent>\n          )}\n          <ThreadTrace.TabContent value=\"scores\" className=\"min-h-0 py-3\">\n            {rootSpanId ? (\n              <TraceScoresTab\n                key={traceId}\n                traceId={traceId}\n                spanId={rootSpanId}\n                onScoreSelect={scoreId => onOpenScore(traceId, scoreId)}\n              />\n            ) : null}\n          </ThreadTrace.TabContent>\n        </ThreadTrace.Messages>\n        <ThreadTrace.Details>\n          <ThreadTrace.Spans />\n        </ThreadTrace.Details>\n      </ThreadTrace.RowBody>\n    </>\n  );\n}\n"],"names":["useMemo","useTracesListSource","useMastraClient","useState","useQueries","traceSpansQueryOptions","jsx","TracesErrorContent","ThreadViewSkeleton","Txt","jsxs","ThreadTrace","useThreadTraceRow","useLinkComponent","useTraceSpans","Fragment","Button","ExternalLinkIcon","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","TraceThreadItemView","TraceFeedbackTab","TraceScoresTab"],"mappings":"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"}