@mastra/playground-ui 60.2.1-alpha.0 → 61.0.0-alpha.2

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

@@ -3,38 +3,42 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const reactResizablePanels = require('react-resizable-panels');
 const domains_traces_hooks_useSpanDetail = require('../../hooks/use-span-detail.cjs.js');
 const domains_traces_hooks_useTraceSpanNavigation = require('../../hooks/use-trace-span-navigation.cjs.js');
 const domains_traces_hooks_useTraceSpans = require('../../hooks/use-trace-spans.cjs.js');
 const domains_traces_components_spanDataPanelView = require('../span-data-panel-view.cjs.js');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
+const resize_separator = require('../../../../resize/separator.cjs.js');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
   const { selected } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "thread-trace-span-panel",
-      className: utils_cn.cn(
-        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
-        "flex min-h-0 min-w-0 flex-col overflow-hidden",
-        selected && "animate-in border-l border-border duration-300 fade-in-0",
-        className
-      ),
-      ...props,
-      children: selected && // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SelectedSpanPanel,
-        {
-          traceId: selected.traceId,
-          spanId: selected.spanId,
-          panelClassName
-        },
-        selected.traceId
-      )
-    }
-  );
+  if (!selected) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(resize_separator.PanelSeparator, { variant: "pill" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "thread-trace-span", minSize: 320, defaultSize: "35%", maxSize: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "thread-trace-span-panel",
+        className: utils_cn.cn(
+          // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
+          "flex h-full min-h-0 min-w-0 animate-in flex-col overflow-hidden border-l border-border duration-300 fade-in-0",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SelectedSpanPanel,
+          {
+            traceId: selected.traceId,
+            spanId: selected.spanId,
+            panelClassName
+          },
+          selected.traceId
+        )
+      }
+    ) })
+  ] });
 }
 function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
   const { selectSpan } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
@@ -51,7 +55,8 @@ function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
       span: spanDetailData?.span,
       isLoading,
       onPrevious: handlePreviousSpan,
-      onNext: handleNextSpan
+      onNext: handleNextSpan,
+      onClose: () => selectSpan(traceId, void 0)
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-span-panel.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The side panel with the selected span's detail. The cell stays mounted (empty) while no span\n * is selected so the root grid can animate its column open and closed.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  return (\n    <div\n      data-slot=\"thread-trace-span-panel\"\n      className={cn(\n        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n        'flex min-h-0 min-w-0 flex-col overflow-hidden',\n        selected && 'animate-in border-l border-border duration-300 fade-in-0',\n        className,\n      )}\n      {...props}\n    >\n      {selected && (\n        // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.\n        <SelectedSpanPanel\n          key={selected.traceId}\n          traceId={selected.traceId}\n          spanId={selected.spanId}\n          panelClassName={panelClassName}\n        />\n      )}\n    </div>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n    />\n  );\n}\n"],"names":["useThreadTrace","jsx","cn","useSpanDetail","useTraceSpans","useTraceSpanNavigation","SpanDataPanelView"],"mappings":";;;;;;;;;;;;AAiBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,uEAAA,EAAe;AACpC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA;AAAA,QAET,+CAAA;AAAA,QACA,QAAA,IAAY,0DAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA;AAAA,sBAECD,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UAEC,SAAS,QAAA,CAAS,OAAA;AAAA,UAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB;AAAA,SAAA;AAAA,QAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,GAEJ;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAID,uEAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAIG,gDAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAIC,iDAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAIC,mEAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACEJ,cAAA;AAAA,IAACK,6DAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ;AAAA;AAAA,GACV;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-span-panel.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Panel } from 'react-resizable-panels';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { PanelSeparator } from '@/lib/resize/separator';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The resizable side column with the selected span's detail; rendered only while a\n * span is selected.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  if (!selected) return null;\n  return (\n    <>\n      <PanelSeparator variant=\"pill\" />\n      <Panel id=\"thread-trace-span\" minSize={320} defaultSize=\"35%\" maxSize=\"50%\">\n        <div\n          data-slot=\"thread-trace-span-panel\"\n          className={cn(\n            // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n            'flex h-full min-h-0 min-w-0 animate-in flex-col overflow-hidden border-l border-border duration-300 fade-in-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM. */}\n          <SelectedSpanPanel\n            key={selected.traceId}\n            traceId={selected.traceId}\n            spanId={selected.spanId}\n            panelClassName={panelClassName}\n          />\n        </div>\n      </Panel>\n    </>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n      onClose={() => selectSpan(traceId, undefined)}\n    />\n  );\n}\n"],"names":["useThreadTrace","jsxs","Fragment","jsx","PanelSeparator","Panel","cn","useSpanDetail","useTraceSpans","useTraceSpanNavigation","SpanDataPanelView"],"mappings":";;;;;;;;;;;;;;AAmBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,uEAAA,EAAe;AACpC,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,+BAAA,EAAA,EAAe,SAAQ,MAAA,EAAO,CAAA;AAAA,oBAC/BD,cAAA,CAACE,8BAAM,EAAA,EAAG,mBAAA,EAAoB,SAAS,GAAA,EAAK,WAAA,EAAY,KAAA,EAAM,OAAA,EAAQ,KAAA,EACpE,QAAA,kBAAAF,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAWG,WAAA;AAAA;AAAA,UAET,+GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAGJ,QAAA,kBAAAH,cAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YAEC,SAAS,QAAA,CAAS,OAAA;AAAA,YAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,YACjB;AAAA,WAAA;AAAA,UAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,KACF,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIH,uEAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAIO,gDAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAIC,iDAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAIC,mEAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACEN,cAAA;AAAA,IAACO,6DAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ,cAAA;AAAA,MACR,OAAA,EAAS,MAAM,UAAA,CAAW,OAAA,EAAS,MAAS;AAAA;AAAA,GAC9C;AAEJ;;;;"}

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

@@ -1,36 +1,40 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Panel } from 'react-resizable-panels';
 import { useSpanDetail } from '../../hooks/use-span-detail.es.js';
 import { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation.es.js';
 import { useTraceSpans } from '../../hooks/use-trace-spans.es.js';
 import { SpanDataPanelView } from '../span-data-panel-view.es.js';
 import { useThreadTrace } from './thread-trace-context.es.js';
+import { PanelSeparator } from '../../../../resize/separator.es.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
   const { selected } = useThreadTrace();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "thread-trace-span-panel",
-      className: cn(
-        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
-        "flex min-h-0 min-w-0 flex-col overflow-hidden",
-        selected && "animate-in border-l border-border duration-300 fade-in-0",
-        className
-      ),
-      ...props,
-      children: selected && // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.
-      /* @__PURE__ */ jsx(
-        SelectedSpanPanel,
-        {
-          traceId: selected.traceId,
-          spanId: selected.spanId,
-          panelClassName
-        },
-        selected.traceId
-      )
-    }
-  );
+  if (!selected) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PanelSeparator, { variant: "pill" }),
+    /* @__PURE__ */ jsx(Panel, { id: "thread-trace-span", minSize: 320, defaultSize: "35%", maxSize: "50%", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "thread-trace-span-panel",
+        className: cn(
+          // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
+          "flex h-full min-h-0 min-w-0 animate-in flex-col overflow-hidden border-l border-border duration-300 fade-in-0",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          SelectedSpanPanel,
+          {
+            traceId: selected.traceId,
+            spanId: selected.spanId,
+            panelClassName
+          },
+          selected.traceId
+        )
+      }
+    ) })
+  ] });
 }
 function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
   const { selectSpan } = useThreadTrace();
@@ -47,7 +51,8 @@ function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
       span: spanDetailData?.span,
       isLoading,
       onPrevious: handlePreviousSpan,
-      onNext: handleNextSpan
+      onNext: handleNextSpan,
+      onClose: () => selectSpan(traceId, void 0)
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-span-panel.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The side panel with the selected span's detail. The cell stays mounted (empty) while no span\n * is selected so the root grid can animate its column open and closed.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  return (\n    <div\n      data-slot=\"thread-trace-span-panel\"\n      className={cn(\n        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n        'flex min-h-0 min-w-0 flex-col overflow-hidden',\n        selected && 'animate-in border-l border-border duration-300 fade-in-0',\n        className,\n      )}\n      {...props}\n    >\n      {selected && (\n        // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.\n        <SelectedSpanPanel\n          key={selected.traceId}\n          traceId={selected.traceId}\n          spanId={selected.spanId}\n          panelClassName={panelClassName}\n        />\n      )}\n    </div>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAiBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,cAAA,EAAe;AACpC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,+CAAA;AAAA,QACA,QAAA,IAAY,0DAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA;AAAA,sBAEC,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UAEC,SAAS,QAAA,CAAS,OAAA;AAAA,UAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB;AAAA,SAAA;AAAA,QAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,GAEJ;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,cAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAI,aAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAI,cAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAI,uBAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACE,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ;AAAA;AAAA,GACV;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-span-panel.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Panel } from 'react-resizable-panels';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { PanelSeparator } from '@/lib/resize/separator';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The resizable side column with the selected span's detail; rendered only while a\n * span is selected.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  if (!selected) return null;\n  return (\n    <>\n      <PanelSeparator variant=\"pill\" />\n      <Panel id=\"thread-trace-span\" minSize={320} defaultSize=\"35%\" maxSize=\"50%\">\n        <div\n          data-slot=\"thread-trace-span-panel\"\n          className={cn(\n            // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n            'flex h-full min-h-0 min-w-0 animate-in flex-col overflow-hidden border-l border-border duration-300 fade-in-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM. */}\n          <SelectedSpanPanel\n            key={selected.traceId}\n            traceId={selected.traceId}\n            spanId={selected.spanId}\n            panelClassName={panelClassName}\n          />\n        </div>\n      </Panel>\n    </>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n      onClose={() => selectSpan(traceId, undefined)}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,cAAA,EAAe;AACpC,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,SAAQ,MAAA,EAAO,CAAA;AAAA,oBAC/B,GAAA,CAAC,SAAM,EAAA,EAAG,mBAAA,EAAoB,SAAS,GAAA,EAAK,WAAA,EAAY,KAAA,EAAM,OAAA,EAAQ,KAAA,EACpE,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA;AAAA,UAET,+GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAGJ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YAEC,SAAS,QAAA,CAAS,OAAA;AAAA,YAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,YACjB;AAAA,WAAA;AAAA,UAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,KACF,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,cAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAI,aAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAI,cAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAI,uBAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACE,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ,cAAA;AAAA,MACR,OAAA,EAAS,MAAM,UAAA,CAAW,OAAA,EAAS,MAAS;AAAA;AAAA,GAC9C;AAEJ;;;;"}

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;;;;"}