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

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-details.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-border1 border-b\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["useThreadTraceRow","jsx","cn","DataPanel"],"mappings":";;;;;;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIA,6EAAA,EAAkB;AACzC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIF,6EAAA,EAAkB;AAC/C,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAAC,cAAA,CAACE,oBAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,yBAAA,EAA2B,UAAS,CAAA,EAClE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;;;"}
+{"version":3,"file":"thread-trace-details.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-border border-b\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["useThreadTraceRow","jsx","cn","DataPanel"],"mappings":";;;;;;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIA,6EAAA,EAAkB;AACzC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIF,6EAAA,EAAkB;AAC/C,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAAC,cAAA,CAACE,oBAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;;;"}

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { D as DataPanel } from '../../../../data-panel-D2JtbyKg.js';
-import { c as cn } from '../../../../cn-C6s2yXwM.js';
+import { D as DataPanel } from '../../../../data-panel-CWjgS1Gh.js';
+import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceDetails({ className, children, ...props }) {
   const { isExpanded } = useThreadTraceRow();
@@ -24,7 +24,7 @@ function ThreadTraceDetails({ className, children, ...props }) {
 }
 function ThreadTraceDetailsHeader({ className, children, ...props }) {
   const { detailsHeaderRef } = useThreadTraceRow();
-  return /* @__PURE__ */ jsx("div", { ref: detailsHeaderRef, "data-slot": "thread-trace-details-header", className, ...props, children: /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-border1 border-b", children }) });
+  return /* @__PURE__ */ jsx("div", { ref: detailsHeaderRef, "data-slot": "thread-trace-details-header", className, ...props, children: /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-border border-b", children }) });
 }
 function ThreadTraceDetailsActions({ className, ...props }) {
   return /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-details.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-border1 border-b\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,iBAAA,EAAkB;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,iBAAA,EAAkB;AAC/C,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAA,GAAA,CAAC,UAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,yBAAA,EAA2B,UAAS,CAAA,EAClE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-details.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-border border-b\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,iBAAA,EAAkB;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,iBAAA,EAAkB;AAC/C,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAA,GAAA,CAAC,UAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
-const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useThreadTrace } from './thread-trace-context.es.js';
-import { c as cn } from '../../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = useThreadTrace();

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

@@ -5,11 +5,11 @@ 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-BhJ8Lp_j.cjs');
-const tabsRoot = require('../../../../tabs-root-DcnvZuD4.cjs');
-const tabsTab = require('../../../../tabs-tab-tRgFBx85.cjs');
-const tabsContent = require('../../../../tabs-content-CRKte85r.cjs');
-const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
+const dataPanel = require('../../../../data-panel-CWZJKBeW.cjs');
+const tabsRoot = require('../../../../tabs-root-C5ABfm1F.cjs');
+const tabsTab = require('../../../../tabs-tab-DA466DbX.cjs');
+const tabsContent = require('../../../../tabs-content-Bz6CZuv9.cjs');
+const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
   const { messagesRef, messagesHeight, tab, setTab } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
@@ -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-border1", className),
+      className: utils_cn.cn("relative min-w-0 border-x border-border", className),
       ...props,
       style: { minHeight, ...props.style },
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -38,7 +38,7 @@ function ThreadTraceMessages({ className, innerClassName, children, ...props })
   );
 }
 function ThreadTraceMessagesHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: utils_cn.cn("border-b border-border1", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: utils_cn.cn("border-b border-border", className), ...props });
 }
 function ThreadTraceTabList({ variant = "pill-ghost", size = "sm", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant, size, ...props });

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-border1', 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-border1', 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,0CAAA,EAA4C,SAAS,CAAA;AAAA,MAClE,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,yBAAA,EAA2B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC3F;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-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;;;;;;;;"}

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

@@ -1,11 +1,11 @@
 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-D2JtbyKg.js';
-import { T as TabList, a as Tabs } from '../../../../tabs-root-yY2eNDS2.js';
-import { T as Tab } from '../../../../tabs-tab-CgMaandp.js';
-import { T as TabContent } from '../../../../tabs-content-Drm6Y6Ul.js';
-import { c as cn } from '../../../../cn-C6s2yXwM.js';
+import { D as DataPanel } from '../../../../data-panel-CWjgS1Gh.js';
+import { T as TabList, a as Tabs } from '../../../../tabs-root-CcEQrwTM.js';
+import { T as Tab } from '../../../../tabs-tab-BycF4dvx.js';
+import { T as TabContent } from '../../../../tabs-content-CKC4kIpH.js';
+import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
   const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();
@@ -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-border1", className),
+      className: cn("relative min-w-0 border-x border-border", className),
       ...props,
       style: { minHeight, ...props.style },
       children: /* @__PURE__ */ jsx(
@@ -34,7 +34,7 @@ function ThreadTraceMessages({ className, innerClassName, children, ...props })
   );
 }
 function ThreadTraceMessagesHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(DataPanel.Header, { className: cn("border-b border-border1", className), ...props });
+  return /* @__PURE__ */ jsx(DataPanel.Header, { className: cn("border-b border-border", className), ...props });
 }
 function ThreadTraceTabList({ variant = "pill-ghost", size = "sm", ...props }) {
   return /* @__PURE__ */ jsx(TabList, { variant, size, ...props });

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-border1', 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-border1', 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,0CAAA,EAA4C,SAAS,CAAA;AAAA,MAClE,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,yBAAA,EAA2B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC3F;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-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;;;;"}

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
-const threadRail = require('../../../../thread-rail-BvhuZLav.cjs');
-const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
+const threadRail = require('../../../../thread-rail-b-8RHNX_.cjs');
+const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceRail({ turns, className, railClassName, ...props }) {
   const { currentTraceId, visibleTraceIds, scrollToTrace } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();

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

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { useThreadTrace } from './thread-trace-context.es.js';
-import { T as ThreadRail } from '../../../../thread-rail-CPAHjoV1.js';
-import { c as cn } from '../../../../cn-C6s2yXwM.js';
+import { T as ThreadRail } from '../../../../thread-rail-vsR5C0j4.js';
+import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceRail({ turns, className, railClassName, ...props }) {
   const { currentTraceId, visibleTraceIds, scrollToTrace } = useThreadTrace();

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

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_hooks_useVisibleTraceRows = require('../../hooks/use-visible-trace-rows.cjs.js');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
-const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceRoot({
   traceIds,

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, useMemo } from 'react';
 import { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows.es.js';
 import { ThreadTraceContext } from './thread-trace-context.es.js';
-import { c as cn } from '../../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceRoot({
   traceIds,

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

@@ -7,7 +7,7 @@ const React = require('react');
 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 hooks_useMeasuredAutoHeight = require('../../../../hooks/use-measured-auto-height.cjs.js');
-const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 const THREAD_TRACE_MESSAGES_TAB = "messages";
 const scrollIntoViewOnMount = (row) => {
@@ -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-border1 pr-4 pl-14 transition-opacity hover:opacity-100",
+        "group grid grid-cols-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14 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-border1 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":";;;;;;;;;;;AASO,MAAM,yBAAA,GAA4B;AAOzC,MAAM,qBAAA,GAAwB,CAAC,GAAA,KAA+B;AAC5D,EAAA,GAAA,EAAK,cAAA,CAAe,EAAE,KAAA,EAAO,OAAA,EAAS,CAAA;AACxC,CAAA;AAOO,SAAS,eAAe,EAAE,OAAA,EAAS,WAAW,QAAA,EAAU,GAAG,OAAM,EAAwB;AAC9F,EAAA,MAAM,OAAOA,uEAAA,EAAe;AAE5B,EAAA,MAAM,iBAAiB,IAAA,CAAK,QAAA,EAAU,YAAY,OAAA,GAAU,IAAA,CAAK,SAAS,MAAA,GAAS,MAAA;AACnF,EAAA,MAAM,kBAAkB,IAAA,CAAK,SAAA,EAAW,YAAY,OAAA,GAAU,IAAA,CAAK,UAAU,OAAA,GAAU,MAAA;AACvF,EAAA,MAAM,YAAA,GAAe,eAAA,EAAiB,EAAA,CAAG,EAAE,CAAA;AAC3C,EAAA,MAAM,WAAW,cAAA,KAAmB,MAAA;AACpC,EAAA,MAAM,SAAA,GAAY,KAAK,cAAA,KAAmB,OAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,gBAAA,CAAiB,GAAA,CAAI,OAAO,CAAA;AACpD,EAAA,MAAM,QAAA,GAAW,KAAK,aAAA,KAAkB,OAAA;AAKxC,EAAA,MAAM,WAAWC,iDAAA,EAAsC;AACvD,EAAA,MAAM,WAAWA,iDAAA,EAAsC;AACvD,EAAA,MAAM,gBAAgBA,iDAAA,EAAsC;AAG5D,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAIC,eAAiB,yBAAyB,CAAA;AAIhE,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAChF,EAAA,IAAI,GAAA,KAAQ,yBAAA,IAA6B,QAAA,CAAS,MAAA,KAAW,kBAAA,EAAoB;AAC/E,IAAA,qBAAA,CAAsB,SAAS,MAAM,CAAA;AAAA,EACvC;AAEA,EAAA,MAAM,EAAE,cAAA,EAAgB,kBAAA,EAAoB,gBAAA,EAAiB,GAAI,IAAA;AACjE,EAAA,MAAM,cAAA,GAAiBC,iBAAA;AAAA,IACrB,CAAC,OAAA,KAAsB,kBAAA,CAAmB,OAAA,EAAS,OAAO,CAAA;AAAA,IAC1D,CAAC,oBAAoB,OAAO;AAAA,GAC9B;AACA,EAAA,MAAM,WAAA,GAAcA,iBAAA;AAAA,IAClB,CAAC,QAAA,KAAsB,gBAAA,CAAiB,OAAA,EAAS,QAAQ,CAAA;AAAA,IACzD,CAAC,kBAAkB,OAAO;AAAA,GAC5B;AAEA,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO;AAAA,MACL,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,aAAa,QAAA,CAAS,GAAA;AAAA,MACtB,aAAa,QAAA,CAAS,GAAA;AAAA,MACtB,kBAAkB,aAAA,CAAc,GAAA;AAAA,MAChC,cAAA,EAAgB,kBAAA;AAAA,MAChB,gBAAgB,QAAA,CAAS,MAAA;AAAA,MACzB,qBAAqB,aAAA,CAAc;AAAA,KACrC,CAAA;AAAA,IACA;AAAA,MACE,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA,CAAS,GAAA;AAAA,MACT,QAAA,CAAS,GAAA;AAAA,MACT,aAAA,CAAc,GAAA;AAAA,MACd,kBAAA;AAAA,MACA,QAAA,CAAS,MAAA;AAAA,MACT,aAAA,CAAc;AAAA;AAChB,GACF;AAEA,EAAA,uBACEC,cAAA,CAACC,iFAAA,CAAsB,QAAA,EAAtB,EAA+B,OAAO,YAAA,EACrC,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,SAAA,EAAWE,WAAA;AAAA;AAAA,QAET,oHAAA;AAAA,QACA,QAAA,IAAY,YAAY,aAAA,GAAgB,YAAA;AAAA,QACxC;AAAA,OACF;AAAA,MACA,eAAA,EAAe,OAAA;AAAA,MACf,eAAa,QAAA,IAAY,MAAA;AAAA,MACzB,GAAA,EAAK,WAAW,qBAAA,GAAwB,MAAA;AAAA,MACvC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;;"}
+{"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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"}

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

@@ -3,7 +3,7 @@ import { useState, useCallback, useMemo } from 'react';
 import { useThreadTrace } from './thread-trace-context.es.js';
 import { ThreadTraceRowContext } from './thread-trace-row-context.es.js';
 import { useMeasuredAutoHeight } from '../../../../hooks/use-measured-auto-height.es.js';
-import { c as cn } from '../../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 const THREAD_TRACE_MESSAGES_TAB = "messages";
 const scrollIntoViewOnMount = (row) => {
@@ -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-border1 pr-4 pl-14 transition-opacity hover:opacity-100",
+        "group grid grid-cols-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14 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-border1 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":";;;;;;;AASO,MAAM,yBAAA,GAA4B;AAOzC,MAAM,qBAAA,GAAwB,CAAC,GAAA,KAA+B;AAC5D,EAAA,GAAA,EAAK,cAAA,CAAe,EAAE,KAAA,EAAO,OAAA,EAAS,CAAA;AACxC,CAAA;AAOO,SAAS,eAAe,EAAE,OAAA,EAAS,WAAW,QAAA,EAAU,GAAG,OAAM,EAAwB;AAC9F,EAAA,MAAM,OAAO,cAAA,EAAe;AAE5B,EAAA,MAAM,iBAAiB,IAAA,CAAK,QAAA,EAAU,YAAY,OAAA,GAAU,IAAA,CAAK,SAAS,MAAA,GAAS,MAAA;AACnF,EAAA,MAAM,kBAAkB,IAAA,CAAK,SAAA,EAAW,YAAY,OAAA,GAAU,IAAA,CAAK,UAAU,OAAA,GAAU,MAAA;AACvF,EAAA,MAAM,YAAA,GAAe,eAAA,EAAiB,EAAA,CAAG,EAAE,CAAA;AAC3C,EAAA,MAAM,WAAW,cAAA,KAAmB,MAAA;AACpC,EAAA,MAAM,SAAA,GAAY,KAAK,cAAA,KAAmB,OAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,gBAAA,CAAiB,GAAA,CAAI,OAAO,CAAA;AACpD,EAAA,MAAM,QAAA,GAAW,KAAK,aAAA,KAAkB,OAAA;AAKxC,EAAA,MAAM,WAAW,qBAAA,EAAsC;AACvD,EAAA,MAAM,WAAW,qBAAA,EAAsC;AACvD,EAAA,MAAM,gBAAgB,qBAAA,EAAsC;AAG5D,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAI,SAAiB,yBAAyB,CAAA;AAIhE,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAAwB,IAAI,CAAA;AAChF,EAAA,IAAI,GAAA,KAAQ,yBAAA,IAA6B,QAAA,CAAS,MAAA,KAAW,kBAAA,EAAoB;AAC/E,IAAA,qBAAA,CAAsB,SAAS,MAAM,CAAA;AAAA,EACvC;AAEA,EAAA,MAAM,EAAE,cAAA,EAAgB,kBAAA,EAAoB,gBAAA,EAAiB,GAAI,IAAA;AACjE,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,OAAA,KAAsB,kBAAA,CAAmB,OAAA,EAAS,OAAO,CAAA;AAAA,IAC1D,CAAC,oBAAoB,OAAO;AAAA,GAC9B;AACA,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,QAAA,KAAsB,gBAAA,CAAiB,OAAA,EAAS,QAAQ,CAAA;AAAA,IACzD,CAAC,kBAAkB,OAAO;AAAA,GAC5B;AAEA,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO;AAAA,MACL,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,aAAa,QAAA,CAAS,GAAA;AAAA,MACtB,aAAa,QAAA,CAAS,GAAA;AAAA,MACtB,kBAAkB,aAAA,CAAc,GAAA;AAAA,MAChC,cAAA,EAAgB,kBAAA;AAAA,MAChB,gBAAgB,QAAA,CAAS,MAAA;AAAA,MACzB,qBAAqB,aAAA,CAAc;AAAA,KACrC,CAAA;AAAA,IACA;AAAA,MACE,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA,CAAS,GAAA;AAAA,MACT,QAAA,CAAS,GAAA;AAAA,MACT,aAAA,CAAc,GAAA;AAAA,MACd,kBAAA;AAAA,MACA,QAAA,CAAS,MAAA;AAAA,MACT,aAAA,CAAc;AAAA;AAChB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,qBAAA,CAAsB,QAAA,EAAtB,EAA+B,OAAO,YAAA,EACrC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,oHAAA;AAAA,QACA,QAAA,IAAY,YAAY,aAAA,GAAgB,YAAA;AAAA,QACxC;AAAA,OACF;AAAA,MACA,eAAA,EAAe,OAAA;AAAA,MACf,eAAa,QAAA,IAAY,MAAA;AAAA,MACzB,GAAA,EAAK,WAAW,qBAAA,GAAwB,MAAA;AAAA,MACvC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
+{"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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"}

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

@@ -8,7 +8,7 @@ const domains_traces_hooks_useTraceSpanNavigation = require('../../hooks/use-tra
 const domains_traces_hooks_useTraceSpans = require('../../hooks/use-trace-spans.cjs.js');
 const domains_traces_components_spanDataPanelView = require('../span-data-panel-view.cjs.js');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
-const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
   const { selected } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
@@ -19,7 +19,7 @@ function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
       className: utils_cn.cn(
         // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
         "flex min-h-0 min-w-0 flex-col overflow-hidden",
-        selected && "animate-in border-l border-border1 duration-300 fade-in-0",
+        selected && "animate-in border-l border-border duration-300 fade-in-0",
         className
       ),
       ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-span-panel.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The side panel with the selected span's detail. The cell stays mounted (empty) while no span\n * is selected so the root grid can animate its column open and closed.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  return (\n    <div\n      data-slot=\"thread-trace-span-panel\"\n      className={cn(\n        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n        'flex min-h-0 min-w-0 flex-col overflow-hidden',\n        selected && 'animate-in border-l border-border1 duration-300 fade-in-0',\n        className,\n      )}\n      {...props}\n    >\n      {selected && (\n        // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.\n        <SelectedSpanPanel\n          key={selected.traceId}\n          traceId={selected.traceId}\n          spanId={selected.spanId}\n          panelClassName={panelClassName}\n        />\n      )}\n    </div>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n    />\n  );\n}\n"],"names":["useThreadTrace","jsx","cn","useSpanDetail","useTraceSpans","useTraceSpanNavigation","SpanDataPanelView"],"mappings":";;;;;;;;;;;;AAiBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,uEAAA,EAAe;AACpC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA;AAAA,QAET,+CAAA;AAAA,QACA,QAAA,IAAY,2DAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA;AAAA,sBAECD,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UAEC,SAAS,QAAA,CAAS,OAAA;AAAA,UAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB;AAAA,SAAA;AAAA,QAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,GAEJ;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAID,uEAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAIG,gDAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAIC,iDAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAIC,mEAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACEJ,cAAA;AAAA,IAACK,6DAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ;AAAA;AAAA,GACV;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-span-panel.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The side panel with the selected span's detail. The cell stays mounted (empty) while no span\n * is selected so the root grid can animate its column open and closed.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  return (\n    <div\n      data-slot=\"thread-trace-span-panel\"\n      className={cn(\n        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n        'flex min-h-0 min-w-0 flex-col overflow-hidden',\n        selected && 'animate-in border-l border-border duration-300 fade-in-0',\n        className,\n      )}\n      {...props}\n    >\n      {selected && (\n        // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.\n        <SelectedSpanPanel\n          key={selected.traceId}\n          traceId={selected.traceId}\n          spanId={selected.spanId}\n          panelClassName={panelClassName}\n        />\n      )}\n    </div>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n    />\n  );\n}\n"],"names":["useThreadTrace","jsx","cn","useSpanDetail","useTraceSpans","useTraceSpanNavigation","SpanDataPanelView"],"mappings":";;;;;;;;;;;;AAiBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,uEAAA,EAAe;AACpC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA;AAAA,QAET,+CAAA;AAAA,QACA,QAAA,IAAY,0DAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA;AAAA,sBAECD,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UAEC,SAAS,QAAA,CAAS,OAAA;AAAA,UAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB;AAAA,SAAA;AAAA,QAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,GAEJ;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAID,uEAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAIG,gDAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAIC,iDAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAIC,mEAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACEJ,cAAA;AAAA,IAACK,6DAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ;AAAA;AAAA,GACV;AAEJ;;;;"}

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

@@ -4,7 +4,7 @@ import { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation.es
 import { useTraceSpans } from '../../hooks/use-trace-spans.es.js';
 import { SpanDataPanelView } from '../span-data-panel-view.es.js';
 import { useThreadTrace } from './thread-trace-context.es.js';
-import { c as cn } from '../../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
   const { selected } = useThreadTrace();
@@ -15,7 +15,7 @@ function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
       className: cn(
         // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
         "flex min-h-0 min-w-0 flex-col overflow-hidden",
-        selected && "animate-in border-l border-border1 duration-300 fade-in-0",
+        selected && "animate-in border-l border-border duration-300 fade-in-0",
         className
       ),
       ...props,

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

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

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

@@ -11,8 +11,8 @@ 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-C2dx_QZN.cjs');
-const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
+const Button = require('../../../../Button-CVewl8nT.cjs');
+const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceSpans({ className, timelineClassName, ...props }) {
   const { selectSpan } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
@@ -58,7 +58,7 @@ function ThreadTraceSpans({ className, timelineClassName, ...props }) {
               isLoading
             }
           ) }),
-          overflows && isClamped && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "from-surface1 via-surface1/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
+          overflows && isClamped && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "from-sidebar via-sidebar/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
         ]
       }
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-spans.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"from-surface1 via-surface1/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["useThreadTrace","useThreadTraceRow","useTraceSpans","useMemo","formatHierarchicalSpans","useExpandedSpanIds","jsxs","Fragment","cn","jsx","TraceSpanTree","Button","ChevronDown","ChevronUp"],"mappings":"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"}
+{"version":3,"file":"thread-trace-spans.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"from-sidebar via-sidebar/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["useThreadTrace","useThreadTraceRow","useTraceSpans","useMemo","formatHierarchicalSpans","useExpandedSpanIds","jsxs","Fragment","cn","jsx","TraceSpanTree","Button","ChevronDown","ChevronUp"],"mappings":"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"}

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

@@ -7,8 +7,8 @@ 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-DS6O6fvU.js';
-import { c as cn } from '../../../../cn-C6s2yXwM.js';
+import { B as Button } from '../../../../Button-cWcBEd-G.js';
+import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceSpans({ className, timelineClassName, ...props }) {
   const { selectSpan } = useThreadTrace();
@@ -54,7 +54,7 @@ function ThreadTraceSpans({ className, timelineClassName, ...props }) {
               isLoading
             }
           ) }),
-          overflows && isClamped && /* @__PURE__ */ jsx("div", { className: "from-surface1 via-surface1/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
+          overflows && isClamped && /* @__PURE__ */ jsx("div", { className: "from-sidebar via-sidebar/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
         ]
       }
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-spans.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"from-surface1 via-surface1/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-spans.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"from-sidebar via-sidebar/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}