@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/domains/traces/components/span-type-legend.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-type-legend.es.js","sources":["../../../../src/domains/traces/components/span-type-legend.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi, spanTypePrefixes } from './shared';\nimport { Badge } from '@/ds/components/Badge';\n\nfunction useUsedSpanTypes(spans: UISpan[]) {\n  return useMemo(() => {\n    const collectTypes = (list: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of list) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(spans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [spans]);\n}\n\n/**\n * Legend of the span types present in `spans`, one small badge per type carrying the\n * type's own color dot. Sits in its own bordered section above the rows. Renders nothing when empty.\n */\nexport function SpanTypeLegend({ spans }: { spans: UISpan[] }) {\n  const usedSpanTypes = useUsedSpanTypes(spans);\n  if (usedSpanTypes.length === 0) return null;\n\n  // Bleeds past the panel's `px-2` so the bottom border reaches the container edges.\n  return (\n    <div data-slot=\"span-type-legend\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n      {usedSpanTypes.map(type => {\n        const spanUI = getSpanTypeUi(type);\n        return (\n          <Badge\n            key={type}\n            size=\"sm\"\n            emphasis=\"muted\"\n            icon={<span className=\"inline-block size-1.5 rounded-full\" style={{ backgroundColor: spanUI?.color }} />}\n          >\n            {spanUI?.label || type}\n          </Badge>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["types"],"mappings":";;;;;AAKA,SAAS,iBAAiB,KAAA,EAAiB;AACzC,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAgC;AACpD,MAAA,MAAMA,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,QAAA,MAAM,MAAA,GAAS,KAAK,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACpD,QAAA,IAAI,MAAA,EAAQA,MAAAA,CAAM,GAAA,CAAI,MAAM,CAAA;AAC5B,QAAA,IAAI,KAAK,KAAA,EAAO;AACd,UAAA,KAAA,MAAW,CAAA,IAAK,aAAa,IAAA,CAAK,KAAK,GAAGA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QACvD;AAAA,MACF;AACA,MAAA,OAAOA,MAAAA;AAAA,IACT,CAAA;AACA,IAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAChC,IAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAAC,gBAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACnE,IAAA,MAAM,KAAA,GAAQ,iBAAiB,MAAA,CAAO,CAAA,CAAA,KAAK,MAAM,OAAA,IAAW,KAAA,CAAM,GAAA,CAAI,CAAC,CAAC,CAAA;AACxE,IAAA,IAAI,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;AAMO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAM,EAAwB;AAC7D,EAAA,MAAM,aAAA,GAAgB,iBAAiB,KAAK,CAAA;AAC5C,EAAA,IAAI,aAAA,CAAc,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAGvC,EAAA,uBACE,GAAA,CAAC,SAAI,WAAA,EAAU,kBAAA,EAAmB,WAAU,0CAAA,EACzC,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,IAAA,MAAM,MAAA,GAAS,cAAc,IAAI,CAAA;AACjC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,IAAA;AAAA,QACL,QAAA,EAAS,OAAA;AAAA,QACT,IAAA,kBAAM,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAqC,OAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA,EAAM,EAAG,CAAA;AAAA,QAErG,kBAAQ,KAAA,IAAS;AAAA,OAAA;AAAA,MALb;AAAA,KAMP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-type-legend.es.js","sources":["../../../../src/domains/traces/components/span-type-legend.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi, spanTypePrefixes } from './shared';\nimport { Badge } from '@/ds/components/Badge';\n\nfunction useUsedSpanTypes(spans: UISpan[]) {\n  return useMemo(() => {\n    const collectTypes = (list: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of list) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(spans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [spans]);\n}\n\n/**\n * Legend of the span types present in `spans`, one small badge per type carrying the\n * type's own color dot. Sits in its own bordered section above the rows. Renders nothing when empty.\n */\nexport function SpanTypeLegend({ spans }: { spans: UISpan[] }) {\n  const usedSpanTypes = useUsedSpanTypes(spans);\n  if (usedSpanTypes.length === 0) return null;\n\n  // Bleeds past the panel's `px-2` so the bottom border reaches the container edges.\n  return (\n    <div data-slot=\"span-type-legend\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n      {usedSpanTypes.map(type => {\n        const spanUI = getSpanTypeUi(type);\n        return (\n          <Badge\n            key={type}\n            size=\"sm\"\n            emphasis=\"subtle\"\n            icon={<span className=\"inline-block size-1.5 rounded-full\" style={{ backgroundColor: spanUI?.color }} />}\n          >\n            {spanUI?.label || type}\n          </Badge>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["types"],"mappings":";;;;;AAKA,SAAS,iBAAiB,KAAA,EAAiB;AACzC,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAgC;AACpD,MAAA,MAAMA,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,QAAA,MAAM,MAAA,GAAS,KAAK,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACpD,QAAA,IAAI,MAAA,EAAQA,MAAAA,CAAM,GAAA,CAAI,MAAM,CAAA;AAC5B,QAAA,IAAI,KAAK,KAAA,EAAO;AACd,UAAA,KAAA,MAAW,CAAA,IAAK,aAAa,IAAA,CAAK,KAAK,GAAGA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QACvD;AAAA,MACF;AACA,MAAA,OAAOA,MAAAA;AAAA,IACT,CAAA;AACA,IAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAChC,IAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAAC,gBAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACnE,IAAA,MAAM,KAAA,GAAQ,iBAAiB,MAAA,CAAO,CAAA,CAAA,KAAK,MAAM,OAAA,IAAW,KAAA,CAAM,GAAA,CAAI,CAAC,CAAC,CAAA;AACxE,IAAA,IAAI,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;AAMO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAM,EAAwB;AAC7D,EAAA,MAAM,aAAA,GAAgB,iBAAiB,KAAK,CAAA;AAC5C,EAAA,IAAI,aAAA,CAAc,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAGvC,EAAA,uBACE,GAAA,CAAC,SAAI,WAAA,EAAU,kBAAA,EAAmB,WAAU,0CAAA,EACzC,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,IAAA,MAAM,MAAA,GAAS,cAAc,IAAI,CAAA;AACjC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,IAAA;AAAA,QACL,QAAA,EAAS,QAAA;AAAA,QACT,IAAA,kBAAM,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAqC,OAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA,EAAM,EAAG,CAAA;AAAA,QAErG,kBAAQ,KAAA,IAAS;AAAA,OAAA;AAAA,MALb;AAAA,KAMP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const dataPanel = require('../../../../data-panel-D2kZv9vY.cjs');
+const dataPanel = require('../../../../data-panel-CjvoI_lx.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceDetails({ className, children, ...props }) {

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { D as DataPanel } from '../../../../data-panel-DzzwYYxO.js';
+import { D as DataPanel } from '../../../../data-panel-42fdcagQ.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceDetails({ className, children, ...props }) {

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

@@ -8,7 +8,16 @@ const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listRef, "data-slot": "thread-trace-list", className: utils_cn.cn("min-h-0 overflow-y-auto", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace-list-inner", className: utils_cn.cn("relative min-h-full", innerClassName), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      "data-slot": "thread-trace-list",
+      className: utils_cn.cn("min-h-0 overflow-x-hidden overflow-y-auto", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace-list-inner", className: utils_cn.cn("relative min-h-full", innerClassName), children })
+    }
+  );
 }
 
 exports.ThreadTraceList = ThreadTraceList;

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-list.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-list.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceListProps extends ComponentProps<'div'> {\n  /** Class name of the inner wrapper that establishes the positioning context for the rail. */\n  innerClassName?: string;\n}\n\n/** The scroll container holding the rows; visible-row tracking observes `[data-trace-id]` inside it. */\nexport function ThreadTraceList({ className, innerClassName, children, ...props }: ThreadTraceListProps) {\n  const { listRef } = useThreadTrace();\n  return (\n    <div ref={listRef} data-slot=\"thread-trace-list\" className={cn('min-h-0 overflow-y-auto', className)} {...props}>\n      <div data-slot=\"thread-trace-list-inner\" className={cn('relative min-h-full', innerClassName)}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["useThreadTrace","jsx","cn"],"mappings":";;;;;;;;AAWO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIA,uEAAA,EAAe;AACnC,EAAA,uBACEC,cAAA,CAAC,SAAI,GAAA,EAAK,OAAA,EAAS,aAAU,mBAAA,EAAoB,SAAA,EAAWC,WAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EAAI,GAAG,KAAA,EACxG,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,yBAAA,EAA0B,SAAA,EAAWC,YAAG,qBAAA,EAAuB,cAAc,CAAA,EACzF,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-list.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-list.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceListProps extends ComponentProps<'div'> {\n  /** Class name of the inner wrapper that establishes the positioning context for the rail. */\n  innerClassName?: string;\n}\n\n/** The scroll container holding the rows; visible-row tracking observes `[data-trace-id]` inside it. */\nexport function ThreadTraceList({ className, innerClassName, children, ...props }: ThreadTraceListProps) {\n  const { listRef } = useThreadTrace();\n  return (\n    <div\n      ref={listRef}\n      data-slot=\"thread-trace-list\"\n      className={cn('min-h-0 overflow-x-hidden overflow-y-auto', className)}\n      {...props}\n    >\n      <div data-slot=\"thread-trace-list-inner\" className={cn('relative min-h-full', innerClassName)}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["useThreadTrace","jsx","cn"],"mappings":";;;;;;;;AAWO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIA,uEAAA,EAAe;AACnC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA;AAAA,MACnE,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,WAAWC,WAAA,CAAG,qBAAA,EAAuB,cAAc,CAAA,EACzF,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -4,7 +4,16 @@ import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = useThreadTrace();
-  return /* @__PURE__ */ jsx("div", { ref: listRef, "data-slot": "thread-trace-list", className: cn("min-h-0 overflow-y-auto", className), ...props, children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace-list-inner", className: cn("relative min-h-full", innerClassName), children }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      "data-slot": "thread-trace-list",
+      className: cn("min-h-0 overflow-x-hidden overflow-y-auto", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace-list-inner", className: cn("relative min-h-full", innerClassName), children })
+    }
+  );
 }
 
 export { ThreadTraceList };

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-list.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-list.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceListProps extends ComponentProps<'div'> {\n  /** Class name of the inner wrapper that establishes the positioning context for the rail. */\n  innerClassName?: string;\n}\n\n/** The scroll container holding the rows; visible-row tracking observes `[data-trace-id]` inside it. */\nexport function ThreadTraceList({ className, innerClassName, children, ...props }: ThreadTraceListProps) {\n  const { listRef } = useThreadTrace();\n  return (\n    <div ref={listRef} data-slot=\"thread-trace-list\" className={cn('min-h-0 overflow-y-auto', className)} {...props}>\n      <div data-slot=\"thread-trace-list-inner\" className={cn('relative min-h-full', innerClassName)}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAWO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,cAAA,EAAe;AACnC,EAAA,uBACE,GAAA,CAAC,SAAI,GAAA,EAAK,OAAA,EAAS,aAAU,mBAAA,EAAoB,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EAAI,GAAG,KAAA,EACxG,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,yBAAA,EAA0B,SAAA,EAAW,GAAG,qBAAA,EAAuB,cAAc,CAAA,EACzF,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-list.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-list.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceListProps extends ComponentProps<'div'> {\n  /** Class name of the inner wrapper that establishes the positioning context for the rail. */\n  innerClassName?: string;\n}\n\n/** The scroll container holding the rows; visible-row tracking observes `[data-trace-id]` inside it. */\nexport function ThreadTraceList({ className, innerClassName, children, ...props }: ThreadTraceListProps) {\n  const { listRef } = useThreadTrace();\n  return (\n    <div\n      ref={listRef}\n      data-slot=\"thread-trace-list\"\n      className={cn('min-h-0 overflow-x-hidden overflow-y-auto', className)}\n      {...props}\n    >\n      <div data-slot=\"thread-trace-list-inner\" className={cn('relative min-h-full', innerClassName)}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAWO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,cAAA,EAAe;AACnC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA;AAAA,MACnE,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,WAAW,EAAA,CAAG,qBAAA,EAAuB,cAAc,CAAA,EACzF,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceRow = require('./thread-trace-row.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const dataPanel = require('../../../../data-panel-D2kZv9vY.cjs');
-const tabsRoot = require('../../../../tabs-root-5s72GhmI.cjs');
-const tabsTab = require('../../../../tabs-tab-BzurlE52.cjs');
-const tabsContent = require('../../../../tabs-content-DKELc1lK.cjs');
+const dataPanel = require('../../../../data-panel-CjvoI_lx.cjs');
+const tabsRoot = require('../../../../tabs-root-BqC8X_h6.cjs');
+const tabsTab = require('../../../../tabs-tab-lm4xyjtD.cjs');
+const tabsContent = require('../../../../tabs-content-DQNRMjup.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
@@ -18,7 +18,7 @@ function ThreadTraceMessages({ className, innerClassName, children, ...props })
     "div",
     {
       "data-slot": "thread-trace-messages",
-      className: utils_cn.cn("relative min-w-0 border-x border-border", className),
+      className: utils_cn.cn("relative min-w-0 border-r border-border", className),
       ...props,
       style: { minHeight, ...props.style },
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -45,7 +45,7 @@ function ThreadTraceTabList({ variant = "pill-ghost", size = "sm", ...props }) {
 }
 const ThreadTraceTab = tabsTab.Tab;
 function ThreadTraceTabContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { className: utils_cn.cn("pr-4", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { className: utils_cn.cn("px-4", className), ...props });
 }
 
 exports.ThreadTraceMessages = ThreadTraceMessages;

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-messages.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-messages.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelHeaderProps } from '@/ds/components/DataPanel';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceMessagesProps extends ComponentProps<'div'> {\n  /** Class name of the sticky, measured wrapper around the children. */\n  innerClassName?: string;\n}\n\n/**\n * The left column of a row: the same Messages / Feedback / Scores tabs as the trace panel's side\n * column, one set per turn. Children are a `ThreadTrace.MessagesHeader` (holding the\n * `ThreadTrace.TabList`) followed by one `ThreadTrace.TabContent` per view. Like the trace\n * panel's side column it is framed by a left border (closing the rail gutter) and a right border,\n * which every row continues so they read as one line down the thread. Its measured height is the\n * clamp budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();\n  // A short Feedback / Scores view keeps the row as tall as the Messages view, so the span tree\n  // next to it is not clipped.\n  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? undefined : (messagesHeight ?? undefined);\n  return (\n    <div\n      data-slot=\"thread-trace-messages\"\n      className={cn('relative min-w-0 border-x border-border', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <Tabs<string>\n        ref={messagesRef}\n        defaultTab={THREAD_TRACE_MESSAGES_TAB}\n        value={tab}\n        onValueChange={setTab}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </Tabs>\n    </div>\n  );\n}\n\nexport type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;\n\n/**\n * The bordered tab row at the top of the messages column, same chrome as the trace panel's side\n * column; its border spans the column and continues into the details header's border as one line.\n */\nexport function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps) {\n  return <DataPanel.Header className={cn('border-b border-border', className)} {...props} />;\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column; keeps a gutter before the column's right border. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('pr-4', className)} {...props} />;\n}\n"],"names":["useThreadTraceRow","THREAD_TRACE_MESSAGES_TAB","jsx","cn","Tabs","DataPanel","TabList","Tab","TabContent"],"mappings":";;;;;;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,EAAK,MAAA,KAAWA,6EAAA,EAAkB;AAGvE,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQC,8EAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAAD,cAAA;AAAA,QAACE,aAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,UAAA,EAAYH,8EAAA;AAAA,UACZ,KAAA,EAAO,GAAA;AAAA,UACP,aAAA,EAAe,MAAA;AAAA,UACf,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAWE,WAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAQO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBAAOD,cAAA,CAACG,mBAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAWF,YAAG,wBAAA,EAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC1F;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAOD,cAAA,CAACI,gBAAA,EAAA,EAAQ,OAAA,EAAkB,IAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAC3D;AAGO,MAAM,cAAA,GAAiBC;AAKvB,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBAAOL,cAAA,CAACM,0BAAW,SAAA,EAAWL,WAAA,CAAG,QAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAClE;;;;;;;;"}
+{"version":3,"file":"thread-trace-messages.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-messages.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelHeaderProps } from '@/ds/components/DataPanel';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceMessagesProps extends ComponentProps<'div'> {\n  /** Class name of the sticky, measured wrapper around the children. */\n  innerClassName?: string;\n}\n\n/**\n * The left column of a row: the same Messages / Feedback / Scores tabs as the trace panel's side\n * column, one set per turn. Children are a `ThreadTrace.MessagesHeader` (holding the\n * `ThreadTrace.TabList`) followed by one `ThreadTrace.TabContent` per view. Like the trace\n * panel's side column it is framed by a left border (closing the rail gutter) and a right border,\n * which every row continues so they read as one line down the thread. Its measured height is the\n * clamp budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();\n  // A short Feedback / Scores view keeps the row as tall as the Messages view, so the span tree\n  // next to it is not clipped.\n  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? undefined : (messagesHeight ?? undefined);\n  return (\n    <div\n      data-slot=\"thread-trace-messages\"\n      className={cn('relative min-w-0 border-r border-border', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <Tabs<string>\n        ref={messagesRef}\n        defaultTab={THREAD_TRACE_MESSAGES_TAB}\n        value={tab}\n        onValueChange={setTab}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </Tabs>\n    </div>\n  );\n}\n\nexport type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;\n\n/**\n * The bordered tab row at the top of the messages column, same chrome as the trace panel's side\n * column; its border spans the column and continues into the details header's border as one line.\n */\nexport function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps) {\n  return <DataPanel.Header className={cn('border-b border-border', className)} {...props} />;\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column; keeps a gutter before the column's right border. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('px-4', className)} {...props} />;\n}\n"],"names":["useThreadTraceRow","THREAD_TRACE_MESSAGES_TAB","jsx","cn","Tabs","DataPanel","TabList","Tab","TabContent"],"mappings":";;;;;;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,EAAK,MAAA,KAAWA,6EAAA,EAAkB;AAGvE,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQC,8EAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAAD,cAAA;AAAA,QAACE,aAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,UAAA,EAAYH,8EAAA;AAAA,UACZ,KAAA,EAAO,GAAA;AAAA,UACP,aAAA,EAAe,MAAA;AAAA,UACf,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAWE,WAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAQO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBAAOD,cAAA,CAACG,mBAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAWF,YAAG,wBAAA,EAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC1F;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAOD,cAAA,CAACI,gBAAA,EAAA,EAAQ,OAAA,EAAkB,IAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAC3D;AAGO,MAAM,cAAA,GAAiBC;AAKvB,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBAAOL,cAAA,CAACM,0BAAW,SAAA,EAAWL,WAAA,CAAG,QAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAClE;;;;;;;;"}

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

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row.es.js';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { D as DataPanel } from '../../../../data-panel-DzzwYYxO.js';
-import { T as TabList, a as Tabs } from '../../../../tabs-root-Dh-McKbO.js';
-import { T as Tab } from '../../../../tabs-tab-BDdO7sWN.js';
-import { T as TabContent } from '../../../../tabs-content-C3x4OoZ_.js';
+import { D as DataPanel } from '../../../../data-panel-42fdcagQ.js';
+import { T as TabList, a as Tabs } from '../../../../tabs-root-4vL8SHCO.js';
+import { T as Tab } from '../../../../tabs-tab-7e2as-AV.js';
+import { T as TabContent } from '../../../../tabs-content-h2qqD8t-.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
@@ -14,7 +14,7 @@ function ThreadTraceMessages({ className, innerClassName, children, ...props })
     "div",
     {
       "data-slot": "thread-trace-messages",
-      className: cn("relative min-w-0 border-x border-border", className),
+      className: cn("relative min-w-0 border-r border-border", className),
       ...props,
       style: { minHeight, ...props.style },
       children: /* @__PURE__ */ jsx(
@@ -41,7 +41,7 @@ function ThreadTraceTabList({ variant = "pill-ghost", size = "sm", ...props }) {
 }
 const ThreadTraceTab = Tab;
 function ThreadTraceTabContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabContent, { className: cn("pr-4", className), ...props });
+  return /* @__PURE__ */ jsx(TabContent, { className: cn("px-4", className), ...props });
 }
 
 export { ThreadTraceMessages, ThreadTraceMessagesHeader, ThreadTraceTab, ThreadTraceTabContent, ThreadTraceTabList };

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-messages.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-messages.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelHeaderProps } from '@/ds/components/DataPanel';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceMessagesProps extends ComponentProps<'div'> {\n  /** Class name of the sticky, measured wrapper around the children. */\n  innerClassName?: string;\n}\n\n/**\n * The left column of a row: the same Messages / Feedback / Scores tabs as the trace panel's side\n * column, one set per turn. Children are a `ThreadTrace.MessagesHeader` (holding the\n * `ThreadTrace.TabList`) followed by one `ThreadTrace.TabContent` per view. Like the trace\n * panel's side column it is framed by a left border (closing the rail gutter) and a right border,\n * which every row continues so they read as one line down the thread. Its measured height is the\n * clamp budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();\n  // A short Feedback / Scores view keeps the row as tall as the Messages view, so the span tree\n  // next to it is not clipped.\n  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? undefined : (messagesHeight ?? undefined);\n  return (\n    <div\n      data-slot=\"thread-trace-messages\"\n      className={cn('relative min-w-0 border-x border-border', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <Tabs<string>\n        ref={messagesRef}\n        defaultTab={THREAD_TRACE_MESSAGES_TAB}\n        value={tab}\n        onValueChange={setTab}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </Tabs>\n    </div>\n  );\n}\n\nexport type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;\n\n/**\n * The bordered tab row at the top of the messages column, same chrome as the trace panel's side\n * column; its border spans the column and continues into the details header's border as one line.\n */\nexport function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps) {\n  return <DataPanel.Header className={cn('border-b border-border', className)} {...props} />;\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column; keeps a gutter before the column's right border. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('pr-4', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,EAAK,MAAA,KAAW,iBAAA,EAAkB;AAGvE,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQ,yBAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,UAAA,EAAY,yBAAA;AAAA,UACZ,KAAA,EAAO,GAAA;AAAA,UACP,aAAA,EAAe,MAAA;AAAA,UACf,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAQO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBAAO,GAAA,CAAC,SAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAW,GAAG,wBAAA,EAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC1F;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,EAAkB,IAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAC3D;AAGO,MAAM,cAAA,GAAiB;AAKvB,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBAAO,GAAA,CAAC,cAAW,SAAA,EAAW,EAAA,CAAG,QAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAClE;;;;"}
+{"version":3,"file":"thread-trace-messages.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-messages.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelHeaderProps } from '@/ds/components/DataPanel';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceMessagesProps extends ComponentProps<'div'> {\n  /** Class name of the sticky, measured wrapper around the children. */\n  innerClassName?: string;\n}\n\n/**\n * The left column of a row: the same Messages / Feedback / Scores tabs as the trace panel's side\n * column, one set per turn. Children are a `ThreadTrace.MessagesHeader` (holding the\n * `ThreadTrace.TabList`) followed by one `ThreadTrace.TabContent` per view. Like the trace\n * panel's side column it is framed by a left border (closing the rail gutter) and a right border,\n * which every row continues so they read as one line down the thread. Its measured height is the\n * clamp budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();\n  // A short Feedback / Scores view keeps the row as tall as the Messages view, so the span tree\n  // next to it is not clipped.\n  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? undefined : (messagesHeight ?? undefined);\n  return (\n    <div\n      data-slot=\"thread-trace-messages\"\n      className={cn('relative min-w-0 border-r border-border', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <Tabs<string>\n        ref={messagesRef}\n        defaultTab={THREAD_TRACE_MESSAGES_TAB}\n        value={tab}\n        onValueChange={setTab}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </Tabs>\n    </div>\n  );\n}\n\nexport type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;\n\n/**\n * The bordered tab row at the top of the messages column, same chrome as the trace panel's side\n * column; its border spans the column and continues into the details header's border as one line.\n */\nexport function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps) {\n  return <DataPanel.Header className={cn('border-b border-border', className)} {...props} />;\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column; keeps a gutter before the column's right border. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('px-4', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,EAAK,MAAA,KAAW,iBAAA,EAAkB;AAGvE,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQ,yBAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,UAAA,EAAY,yBAAA;AAAA,UACZ,KAAA,EAAO,GAAA;AAAA,UACP,aAAA,EAAe,MAAA;AAAA,UACf,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAQO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBAAO,GAAA,CAAC,SAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAW,GAAG,wBAAA,EAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC1F;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,EAAkB,IAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAC3D;AAGO,MAAM,cAAA,GAAiB;AAKvB,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBAAO,GAAA,CAAC,cAAW,SAAA,EAAW,EAAA,CAAG,QAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAClE;;;;"}

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

@@ -98,7 +98,7 @@ function ThreadTraceRoot({
         // The span cell always exists and collapses to zero so opening/closing it animates
         // via `grid-template-columns`, like the trace panel's columns.
         "grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out",
-        selected ? "grid-cols-[minmax(0,1fr)_40%]" : "grid-cols-[minmax(0,1fr)_0%]",
+        selected ? "grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" : "grid-cols-[minmax(0,2fr)_minmax(0,0fr)]",
         className
       ),
       ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-root.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /**\n   * The row to start from: it mounts expanded and is scrolled into view once. Only read at mount,\n   * so a row that arrives on a later page is left alone.\n   */\n  anchorTraceId?: string | null;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  anchorTraceId,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  const [anchor] = useState(() => anchorTraceId ?? null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set(anchor ? [anchor] : []));\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      anchorTraceId: anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace\"\n        className={cn(\n          // The span cell always exists and collapses to zero so opening/closing it animates\n          // via `grid-template-columns`, like the trace panel's columns.\n          'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n          selected ? 'grid-cols-[minmax(0,1fr)_40%]' : 'grid-cols-[minmax(0,1fr)_0%]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","cn"],"mappings":"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"}
+{"version":3,"file":"thread-trace-root.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /**\n   * The row to start from: it mounts expanded and is scrolled into view once. Only read at mount,\n   * so a row that arrives on a later page is left alone.\n   */\n  anchorTraceId?: string | null;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  anchorTraceId,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  const [anchor] = useState(() => anchorTraceId ?? null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set(anchor ? [anchor] : []));\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      anchorTraceId: anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace\"\n        className={cn(\n          // The span cell always exists and collapses to zero so opening/closing it animates\n          // via `grid-template-columns`, like the trace panel's columns.\n          'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n          selected ? 'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]' : 'grid-cols-[minmax(0,2fr)_minmax(0,0fr)]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","cn"],"mappings":"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"}

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

@@ -94,7 +94,7 @@ function ThreadTraceRoot({
         // The span cell always exists and collapses to zero so opening/closing it animates
         // via `grid-template-columns`, like the trace panel's columns.
         "grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out",
-        selected ? "grid-cols-[minmax(0,1fr)_40%]" : "grid-cols-[minmax(0,1fr)_0%]",
+        selected ? "grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" : "grid-cols-[minmax(0,2fr)_minmax(0,0fr)]",
         className
       ),
       ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-root.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /**\n   * The row to start from: it mounts expanded and is scrolled into view once. Only read at mount,\n   * so a row that arrives on a later page is left alone.\n   */\n  anchorTraceId?: string | null;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  anchorTraceId,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  const [anchor] = useState(() => anchorTraceId ?? null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set(anchor ? [anchor] : []));\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      anchorTraceId: anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace\"\n        className={cn(\n          // The span cell always exists and collapses to zero so opening/closing it animates\n          // via `grid-template-columns`, like the trace panel's columns.\n          'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n          selected ? 'grid-cols-[minmax(0,1fr)_40%]' : 'grid-cols-[minmax(0,1fr)_0%]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-root.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /**\n   * The row to start from: it mounts expanded and is scrolled into view once. Only read at mount,\n   * so a row that arrives on a later page is left alone.\n   */\n  anchorTraceId?: string | null;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  anchorTraceId,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  const [anchor] = useState(() => anchorTraceId ?? null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set(anchor ? [anchor] : []));\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      anchorTraceId: anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace\"\n        className={cn(\n          // The span cell always exists and collapses to zero so opening/closing it animates\n          // via `grid-template-columns`, like the trace panel's columns.\n          'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n          selected ? 'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]' : 'grid-cols-[minmax(0,2fr)_minmax(0,0fr)]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -86,7 +86,7 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
       "data-slot": "thread-trace-row",
       className: utils_cn.cn(
         // Same fixed messages width as the trace panel; the details column takes the rest.
-        "group grid grid-cols-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14 transition-opacity hover:opacity-100",
+        "group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100",
         isActive || isCurrent ? "opacity-100" : "opacity-50",
         className
       ),

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-row.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { ThreadTraceRowContext } from './thread-trace-row-context';\nimport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nimport { useMeasuredAutoHeight } from '@/hooks/use-measured-auto-height';\nimport { cn } from '@/lib/utils';\n\nexport const THREAD_TRACE_MESSAGES_TAB = 'messages';\n\nexport interface ThreadTraceRowProps extends ComponentProps<'div'> {\n  traceId: string;\n}\n\n// Module-level so the callback ref keeps its identity and React only invokes it on mount/unmount.\nconst scrollIntoViewOnMount = (row: HTMLDivElement | null) => {\n  row?.scrollIntoView({ block: 'start' });\n};\n\n/**\n * One agent turn: the messages column on the left and the details column on the right. The whole\n * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,\n * so the reader keeps track of which turn they are on without hovering.\n */\nexport function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps) {\n  const root = useThreadTrace();\n\n  const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : undefined;\n  const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : undefined;\n  const revealSpanId = featuredSpanIds?.at(-1);\n  const isActive = selectedSpanId !== undefined;\n  const isCurrent = root.currentTraceId === traceId;\n  const isExpanded = root.expandedTraceIds.has(traceId);\n  const isAnchor = root.anchorTraceId === traceId;\n\n  // A long trace is clamped to the real height of its messages column (not a nominal row height),\n  // so the timeline never dwarfs the turn it belongs to. The refs live here because the messages\n  // and the timeline are sibling parts.\n  const messages = useMeasuredAutoHeight<HTMLDivElement>();\n  const timeline = useMeasuredAutoHeight<HTMLDivElement>();\n  const detailsHeader = useMeasuredAutoHeight<HTMLDivElement>();\n\n  // Which view the messages column shows (Messages / Feedback / Scores), one per row.\n  const [tab, setTab] = useState<string>(THREAD_TRACE_MESSAGES_TAB);\n  // The clamp budget is the height of the *Messages* view: a short Feedback or Scores view\n  // must not squash the span tree next to it, so the last Messages height is kept while\n  // another view is showing.\n  const [messagesViewHeight, setMessagesViewHeight] = useState<number | null>(null);\n  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {\n    setMessagesViewHeight(messages.height);\n  }\n\n  const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;\n  const highlightSpans = useCallback(\n    (spanIds: string[]) => rootHighlightSpans(traceId, spanIds),\n    [rootHighlightSpans, traceId],\n  );\n  const setExpanded = useCallback(\n    (expanded: boolean) => setTraceExpanded(traceId, expanded),\n    [setTraceExpanded, traceId],\n  );\n\n  const contextValue = useMemo<ThreadTraceRowContextValue>(\n    () => ({\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      isAnchor,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      setTab,\n      messagesRef: messages.ref,\n      timelineRef: timeline.ref,\n      detailsHeaderRef: detailsHeader.ref,\n      messagesHeight: messagesViewHeight,\n      timelineHeight: timeline.height,\n      detailsHeaderHeight: detailsHeader.height,\n    }),\n    [\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      isAnchor,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      messages.ref,\n      timeline.ref,\n      detailsHeader.ref,\n      messagesViewHeight,\n      timeline.height,\n      detailsHeader.height,\n    ],\n  );\n\n  return (\n    <ThreadTraceRowContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace-row\"\n        className={cn(\n          // Same fixed messages width as the trace panel; the details column takes the rest.\n          'group grid grid-cols-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14 transition-opacity hover:opacity-100',\n          isActive || isCurrent ? 'opacity-100' : 'opacity-50',\n          className,\n        )}\n        data-trace-id={traceId}\n        data-active={isActive || undefined}\n        ref={isAnchor ? scrollIntoViewOnMount : undefined}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n"],"names":["useThreadTrace","useMeasuredAutoHeight","useState","useCallback","useMemo","jsx","ThreadTraceRowContext","cn"],"mappings":"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"}
+{"version":3,"file":"thread-trace-row.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { ThreadTraceRowContext } from './thread-trace-row-context';\nimport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nimport { useMeasuredAutoHeight } from '@/hooks/use-measured-auto-height';\nimport { cn } from '@/lib/utils';\n\nexport const THREAD_TRACE_MESSAGES_TAB = 'messages';\n\nexport interface ThreadTraceRowProps extends ComponentProps<'div'> {\n  traceId: string;\n}\n\n// Module-level so the callback ref keeps its identity and React only invokes it on mount/unmount.\nconst scrollIntoViewOnMount = (row: HTMLDivElement | null) => {\n  row?.scrollIntoView({ block: 'start' });\n};\n\n/**\n * One agent turn: the messages column on the left and the details column on the right. The whole\n * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,\n * so the reader keeps track of which turn they are on without hovering.\n */\nexport function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps) {\n  const root = useThreadTrace();\n\n  const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : undefined;\n  const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : undefined;\n  const revealSpanId = featuredSpanIds?.at(-1);\n  const isActive = selectedSpanId !== undefined;\n  const isCurrent = root.currentTraceId === traceId;\n  const isExpanded = root.expandedTraceIds.has(traceId);\n  const isAnchor = root.anchorTraceId === traceId;\n\n  // A long trace is clamped to the real height of its messages column (not a nominal row height),\n  // so the timeline never dwarfs the turn it belongs to. The refs live here because the messages\n  // and the timeline are sibling parts.\n  const messages = useMeasuredAutoHeight<HTMLDivElement>();\n  const timeline = useMeasuredAutoHeight<HTMLDivElement>();\n  const detailsHeader = useMeasuredAutoHeight<HTMLDivElement>();\n\n  // Which view the messages column shows (Messages / Feedback / Scores), one per row.\n  const [tab, setTab] = useState<string>(THREAD_TRACE_MESSAGES_TAB);\n  // The clamp budget is the height of the *Messages* view: a short Feedback or Scores view\n  // must not squash the span tree next to it, so the last Messages height is kept while\n  // another view is showing.\n  const [messagesViewHeight, setMessagesViewHeight] = useState<number | null>(null);\n  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {\n    setMessagesViewHeight(messages.height);\n  }\n\n  const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;\n  const highlightSpans = useCallback(\n    (spanIds: string[]) => rootHighlightSpans(traceId, spanIds),\n    [rootHighlightSpans, traceId],\n  );\n  const setExpanded = useCallback(\n    (expanded: boolean) => setTraceExpanded(traceId, expanded),\n    [setTraceExpanded, traceId],\n  );\n\n  const contextValue = useMemo<ThreadTraceRowContextValue>(\n    () => ({\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      isAnchor,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      setTab,\n      messagesRef: messages.ref,\n      timelineRef: timeline.ref,\n      detailsHeaderRef: detailsHeader.ref,\n      messagesHeight: messagesViewHeight,\n      timelineHeight: timeline.height,\n      detailsHeaderHeight: detailsHeader.height,\n    }),\n    [\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      isAnchor,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      messages.ref,\n      timeline.ref,\n      detailsHeader.ref,\n      messagesViewHeight,\n      timeline.height,\n      detailsHeader.height,\n    ],\n  );\n\n  return (\n    <ThreadTraceRowContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace-row\"\n        className={cn(\n          // Same fixed messages width as the trace panel; the details column takes the rest.\n          'group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100',\n          isActive || isCurrent ? 'opacity-100' : 'opacity-50',\n          className,\n        )}\n        data-trace-id={traceId}\n        data-active={isActive || undefined}\n        ref={isAnchor ? scrollIntoViewOnMount : undefined}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n"],"names":["useThreadTrace","useMeasuredAutoHeight","useState","useCallback","useMemo","jsx","ThreadTraceRowContext","cn"],"mappings":"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"}

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

@@ -82,7 +82,7 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
       "data-slot": "thread-trace-row",
       className: cn(
         // Same fixed messages width as the trace panel; the details column takes the rest.
-        "group grid grid-cols-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14 transition-opacity hover:opacity-100",
+        "group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100",
         isActive || isCurrent ? "opacity-100" : "opacity-50",
         className
       ),

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-row.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { ThreadTraceRowContext } from './thread-trace-row-context';\nimport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nimport { useMeasuredAutoHeight } from '@/hooks/use-measured-auto-height';\nimport { cn } from '@/lib/utils';\n\nexport const THREAD_TRACE_MESSAGES_TAB = 'messages';\n\nexport interface ThreadTraceRowProps extends ComponentProps<'div'> {\n  traceId: string;\n}\n\n// Module-level so the callback ref keeps its identity and React only invokes it on mount/unmount.\nconst scrollIntoViewOnMount = (row: HTMLDivElement | null) => {\n  row?.scrollIntoView({ block: 'start' });\n};\n\n/**\n * One agent turn: the messages column on the left and the details column on the right. The whole\n * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,\n * so the reader keeps track of which turn they are on without hovering.\n */\nexport function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps) {\n  const root = useThreadTrace();\n\n  const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : undefined;\n  const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : undefined;\n  const revealSpanId = featuredSpanIds?.at(-1);\n  const isActive = selectedSpanId !== undefined;\n  const isCurrent = root.currentTraceId === traceId;\n  const isExpanded = root.expandedTraceIds.has(traceId);\n  const isAnchor = root.anchorTraceId === traceId;\n\n  // A long trace is clamped to the real height of its messages column (not a nominal row height),\n  // so the timeline never dwarfs the turn it belongs to. The refs live here because the messages\n  // and the timeline are sibling parts.\n  const messages = useMeasuredAutoHeight<HTMLDivElement>();\n  const timeline = useMeasuredAutoHeight<HTMLDivElement>();\n  const detailsHeader = useMeasuredAutoHeight<HTMLDivElement>();\n\n  // Which view the messages column shows (Messages / Feedback / Scores), one per row.\n  const [tab, setTab] = useState<string>(THREAD_TRACE_MESSAGES_TAB);\n  // The clamp budget is the height of the *Messages* view: a short Feedback or Scores view\n  // must not squash the span tree next to it, so the last Messages height is kept while\n  // another view is showing.\n  const [messagesViewHeight, setMessagesViewHeight] = useState<number | null>(null);\n  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {\n    setMessagesViewHeight(messages.height);\n  }\n\n  const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;\n  const highlightSpans = useCallback(\n    (spanIds: string[]) => rootHighlightSpans(traceId, spanIds),\n    [rootHighlightSpans, traceId],\n  );\n  const setExpanded = useCallback(\n    (expanded: boolean) => setTraceExpanded(traceId, expanded),\n    [setTraceExpanded, traceId],\n  );\n\n  const contextValue = useMemo<ThreadTraceRowContextValue>(\n    () => ({\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      isAnchor,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      setTab,\n      messagesRef: messages.ref,\n      timelineRef: timeline.ref,\n      detailsHeaderRef: detailsHeader.ref,\n      messagesHeight: messagesViewHeight,\n      timelineHeight: timeline.height,\n      detailsHeaderHeight: detailsHeader.height,\n    }),\n    [\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      isAnchor,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      messages.ref,\n      timeline.ref,\n      detailsHeader.ref,\n      messagesViewHeight,\n      timeline.height,\n      detailsHeader.height,\n    ],\n  );\n\n  return (\n    <ThreadTraceRowContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace-row\"\n        className={cn(\n          // Same fixed messages width as the trace panel; the details column takes the rest.\n          'group grid grid-cols-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14 transition-opacity hover:opacity-100',\n          isActive || isCurrent ? 'opacity-100' : 'opacity-50',\n          className,\n        )}\n        data-trace-id={traceId}\n        data-active={isActive || undefined}\n        ref={isAnchor ? scrollIntoViewOnMount : undefined}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-row.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { ThreadTraceRowContext } from './thread-trace-row-context';\nimport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nimport { useMeasuredAutoHeight } from '@/hooks/use-measured-auto-height';\nimport { cn } from '@/lib/utils';\n\nexport const THREAD_TRACE_MESSAGES_TAB = 'messages';\n\nexport interface ThreadTraceRowProps extends ComponentProps<'div'> {\n  traceId: string;\n}\n\n// Module-level so the callback ref keeps its identity and React only invokes it on mount/unmount.\nconst scrollIntoViewOnMount = (row: HTMLDivElement | null) => {\n  row?.scrollIntoView({ block: 'start' });\n};\n\n/**\n * One agent turn: the messages column on the left and the details column on the right. The whole\n * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,\n * so the reader keeps track of which turn they are on without hovering.\n */\nexport function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps) {\n  const root = useThreadTrace();\n\n  const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : undefined;\n  const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : undefined;\n  const revealSpanId = featuredSpanIds?.at(-1);\n  const isActive = selectedSpanId !== undefined;\n  const isCurrent = root.currentTraceId === traceId;\n  const isExpanded = root.expandedTraceIds.has(traceId);\n  const isAnchor = root.anchorTraceId === traceId;\n\n  // A long trace is clamped to the real height of its messages column (not a nominal row height),\n  // so the timeline never dwarfs the turn it belongs to. The refs live here because the messages\n  // and the timeline are sibling parts.\n  const messages = useMeasuredAutoHeight<HTMLDivElement>();\n  const timeline = useMeasuredAutoHeight<HTMLDivElement>();\n  const detailsHeader = useMeasuredAutoHeight<HTMLDivElement>();\n\n  // Which view the messages column shows (Messages / Feedback / Scores), one per row.\n  const [tab, setTab] = useState<string>(THREAD_TRACE_MESSAGES_TAB);\n  // The clamp budget is the height of the *Messages* view: a short Feedback or Scores view\n  // must not squash the span tree next to it, so the last Messages height is kept while\n  // another view is showing.\n  const [messagesViewHeight, setMessagesViewHeight] = useState<number | null>(null);\n  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {\n    setMessagesViewHeight(messages.height);\n  }\n\n  const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;\n  const highlightSpans = useCallback(\n    (spanIds: string[]) => rootHighlightSpans(traceId, spanIds),\n    [rootHighlightSpans, traceId],\n  );\n  const setExpanded = useCallback(\n    (expanded: boolean) => setTraceExpanded(traceId, expanded),\n    [setTraceExpanded, traceId],\n  );\n\n  const contextValue = useMemo<ThreadTraceRowContextValue>(\n    () => ({\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      isAnchor,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      setTab,\n      messagesRef: messages.ref,\n      timelineRef: timeline.ref,\n      detailsHeaderRef: detailsHeader.ref,\n      messagesHeight: messagesViewHeight,\n      timelineHeight: timeline.height,\n      detailsHeaderHeight: detailsHeader.height,\n    }),\n    [\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      isAnchor,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      messages.ref,\n      timeline.ref,\n      detailsHeader.ref,\n      messagesViewHeight,\n      timeline.height,\n      detailsHeader.height,\n    ],\n  );\n\n  return (\n    <ThreadTraceRowContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace-row\"\n        className={cn(\n          // Same fixed messages width as the trace panel; the details column takes the rest.\n          'group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100',\n          isActive || isCurrent ? 'opacity-100' : 'opacity-50',\n          className,\n        )}\n        data-trace-id={traceId}\n        data-active={isActive || undefined}\n        ref={isAnchor ? scrollIntoViewOnMount : undefined}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -11,7 +11,7 @@ const domains_traces_components_formatHierarchicalSpans = require('../format-hie
 const domains_traces_components_traceSpanTree = require('../trace-span-tree.cjs.js');
 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-CIwF6NHM.cjs');
+const Button = require('../../../../Button-BnmR2HRc.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceSpans({ className, timelineClassName, ...props }) {

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

@@ -7,7 +7,7 @@ import { formatHierarchicalSpans } from '../format-hierarchical-spans.es.js';
 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-BY9qlu8K.js';
+import { B as Button } from '../../../../Button-C6eUqcPI.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceSpans({ className, timelineClassName, ...props }) {

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

@@ -6,7 +6,6 @@ const domains_traces_components_threadTrace_threadTraceDetails = require('./thre
 const domains_traces_components_threadTrace_threadTraceList = require('./thread-trace/thread-trace-list.cjs.js');
 const domains_traces_components_threadTrace_threadTraceLoadMoreSentinel = require('./thread-trace/thread-trace-load-more-sentinel.cjs.js');
 const domains_traces_components_threadTrace_threadTraceMessages = require('./thread-trace/thread-trace-messages.cjs.js');
-const domains_traces_components_threadTrace_threadTraceRail = require('./thread-trace/thread-trace-rail.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRoot = require('./thread-trace/thread-trace-root.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRow = require('./thread-trace/thread-trace-row.cjs.js');
 const domains_traces_components_threadTrace_threadTraceSpanPanel = require('./thread-trace/thread-trace-span-panel.cjs.js');
@@ -16,7 +15,6 @@ 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,
-  Rail: domains_traces_components_threadTrace_threadTraceRail.ThreadTraceRail,
   LoadMoreSentinel: domains_traces_components_threadTrace_threadTraceLoadMoreSentinel.ThreadTraceLoadMoreSentinel,
   Row: domains_traces_components_threadTrace_threadTraceRow.ThreadTraceRow,
   Messages: domains_traces_components_threadTrace_threadTraceMessages.ThreadTraceMessages,

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 { ThreadTraceLoadMoreSentinel } from './thread-trace-load-more-sentinel';\nimport {\n  ThreadTraceMessages,\n  ThreadTraceMessagesHeader,\n  ThreadTraceTab,\n  ThreadTraceTabContent,\n  ThreadTraceTabList,\n} from './thread-trace-messages';\nimport { ThreadTraceRail } from './thread-trace-rail';\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} anchorTraceId={anchor}>\n *   <ThreadTrace.List>\n *     <ThreadTrace.Rail turns={turns} />\n *     <ThreadTrace.LoadMoreSentinel ref={setEndOfListElement} />\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  Rail: ThreadTraceRail,\n  LoadMoreSentinel: ThreadTraceLoadMoreSentinel,\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 { ThreadTraceRailProps } from './thread-trace-rail';\nexport type { ThreadTraceLoadMoreSentinelProps } from './thread-trace-load-more-sentinel';\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","ThreadTraceRail","ThreadTraceLoadMoreSentinel","ThreadTraceRow","ThreadTraceMessages","ThreadTraceMessagesHeader","ThreadTraceTabList","ThreadTraceTab","ThreadTraceTabContent","ThreadTraceDetails","ThreadTraceDetailsHeader","ThreadTraceDetailsActions","ThreadTraceSpans","ThreadTraceSpanPanel"],"mappings":";;;;;;;;;;;;;;;;AAiDO,MAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAOA,qEAAA,EAAiB;AAAA,EACxD,IAAA,EAAMC,qEAAA;AAAA,EACN,IAAA,EAAMC,qEAAA;AAAA,EACN,gBAAA,EAAkBC,6FAAA;AAAA,EAClB,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 { ThreadTraceLoadMoreSentinel } from './thread-trace-load-more-sentinel';\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} anchorTraceId={anchor}>\n *   <ThreadTrace.List>\n *     <ThreadTrace.LoadMoreSentinel ref={setEndOfListElement} />\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  LoadMoreSentinel: ThreadTraceLoadMoreSentinel,\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 { ThreadTraceLoadMoreSentinelProps } from './thread-trace-load-more-sentinel';\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","ThreadTraceLoadMoreSentinel","ThreadTraceRow","ThreadTraceMessages","ThreadTraceMessagesHeader","ThreadTraceTabList","ThreadTraceTab","ThreadTraceTabContent","ThreadTraceDetails","ThreadTraceDetailsHeader","ThreadTraceDetailsActions","ThreadTraceSpans","ThreadTraceSpanPanel"],"mappings":";;;;;;;;;;;;;;;AA+CO,MAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAOA,qEAAA,EAAiB;AAAA,EACxD,IAAA,EAAMC,qEAAA;AAAA,EACN,gBAAA,EAAkBC,6FAAA;AAAA,EAClB,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;;;;;;;"}

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

@@ -2,7 +2,6 @@ import { ThreadTraceDetailsActions, ThreadTraceDetailsHeader, ThreadTraceDetails
 import { ThreadTraceList } from './thread-trace/thread-trace-list.es.js';
 import { ThreadTraceLoadMoreSentinel } from './thread-trace/thread-trace-load-more-sentinel.es.js';
 import { ThreadTraceTabContent, ThreadTraceTab, ThreadTraceTabList, ThreadTraceMessagesHeader, ThreadTraceMessages } from './thread-trace/thread-trace-messages.es.js';
-import { ThreadTraceRail } from './thread-trace/thread-trace-rail.es.js';
 import { ThreadTraceRoot } from './thread-trace/thread-trace-root.es.js';
 import { ThreadTraceRow } from './thread-trace/thread-trace-row.es.js';
 export { THREAD_TRACE_MESSAGES_TAB } from './thread-trace/thread-trace-row.es.js';
@@ -13,7 +12,6 @@ export { useThreadTraceRow } from './thread-trace/thread-trace-row-context.es.js
 
 const ThreadTrace = Object.assign(ThreadTraceRoot, {
   List: ThreadTraceList,
-  Rail: ThreadTraceRail,
   LoadMoreSentinel: ThreadTraceLoadMoreSentinel,
   Row: ThreadTraceRow,
   Messages: ThreadTraceMessages,

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 { ThreadTraceLoadMoreSentinel } from './thread-trace-load-more-sentinel';\nimport {\n  ThreadTraceMessages,\n  ThreadTraceMessagesHeader,\n  ThreadTraceTab,\n  ThreadTraceTabContent,\n  ThreadTraceTabList,\n} from './thread-trace-messages';\nimport { ThreadTraceRail } from './thread-trace-rail';\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} anchorTraceId={anchor}>\n *   <ThreadTrace.List>\n *     <ThreadTrace.Rail turns={turns} />\n *     <ThreadTrace.LoadMoreSentinel ref={setEndOfListElement} />\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  Rail: ThreadTraceRail,\n  LoadMoreSentinel: ThreadTraceLoadMoreSentinel,\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 { ThreadTraceRailProps } from './thread-trace-rail';\nexport type { ThreadTraceLoadMoreSentinelProps } from './thread-trace-load-more-sentinel';\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":";;;;;;;;;;;;;AAiDO,MAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAO,eAAA,EAAiB;AAAA,EACxD,IAAA,EAAM,eAAA;AAAA,EACN,IAAA,EAAM,eAAA;AAAA,EACN,gBAAA,EAAkB,2BAAA;AAAA,EAClB,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 { ThreadTraceLoadMoreSentinel } from './thread-trace-load-more-sentinel';\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} anchorTraceId={anchor}>\n *   <ThreadTrace.List>\n *     <ThreadTrace.LoadMoreSentinel ref={setEndOfListElement} />\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  LoadMoreSentinel: ThreadTraceLoadMoreSentinel,\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 { ThreadTraceLoadMoreSentinelProps } from './thread-trace-load-more-sentinel';\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":";;;;;;;;;;;;AA+CO,MAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAO,eAAA,EAAiB;AAAA,EACxD,IAAA,EAAM,eAAA;AAAA,EACN,gBAAA,EAAkB,2BAAA;AAAA,EAClB,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;;;;"}