@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

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

@@ -1,28 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
-import { THREAD_TRACE_SPANS_TAB } from './thread-trace-row.es.js';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { D as DataPanel } from '../../../../data-panel-5iuux0r_.js';
-import { T as TabList, a as Tabs } from '../../../../tabs-root-BAy8m6GO.js';
-import { T as Tab } from '../../../../tabs-tab-K5mQhs7r.js';
-import { T as TabContent } from '../../../../tabs-content-CW6RtAEV.js';
-import { c as cn } from '../../../../cn-ByEbywDh.js';
+import { D as DataPanel } from '../../../../data-panel-D2JtbyKg.js';
+import { c as cn } from '../../../../cn-C6s2yXwM.js';
 
 function ThreadTraceDetails({ className, children, ...props }) {
-  const { isExpanded, isFirst, tab, setTab } = useThreadTraceRow();
+  const { isExpanded } = useThreadTraceRow();
   return /* @__PURE__ */ jsx(
-    Tabs,
+    "div",
     {
-      defaultTab: THREAD_TRACE_SPANS_TAB,
-      value: tab,
-      onValueChange: setTab,
       "data-slot": "thread-trace-details",
       className: cn(
-        "min-w-0 overflow-hidden border-x border-b border-border1 group-last:rounded-b-xl",
+        "min-w-0 overflow-hidden",
         // While collapsed the messages column alone sets the row height: `h-0` keeps this
         // cell out of the grid's row sizing (so measurement rounding can't nudge the row by
-        // a pixel between tabs) and `min-h-full` stretches it back to the row afterwards.
+        // a pixel) and `min-h-full` stretches it back to the row afterwards.
         !isExpanded && "h-0 min-h-full",
-        isFirst && "rounded-t-xl border-t",
         className
       ),
       ...props,
@@ -30,23 +22,20 @@ function ThreadTraceDetails({ className, children, ...props }) {
     }
   );
 }
-function ThreadTraceDetailsHeader({
-  className,
-  headerClassName,
-  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: cn("min-h-0 border-b border-border1 py-1.5", headerClassName), children }) });
-}
-function ThreadTraceTabList({ variant = "pill-ghost", ...props }) {
-  return /* @__PURE__ */ jsx(TabList, { variant, ...props });
+  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 }) });
 }
 function ThreadTraceDetailsActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace-details-actions", className: cn("flex shrink-0 items-center", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "thread-trace-details-actions",
+      className: cn("ml-auto flex shrink-0 items-center", className),
+      ...props
+    }
+  );
 }
-const ThreadTraceTab = Tab;
-const ThreadTraceTabContent = TabContent;
 
-export { ThreadTraceDetails, ThreadTraceDetailsActions, ThreadTraceDetailsHeader, ThreadTraceTab, ThreadTraceTabContent, ThreadTraceTabList };
+export { ThreadTraceDetails, ThreadTraceDetailsActions, ThreadTraceDetailsHeader };
 //# sourceMappingURL=thread-trace-details.es.js.map

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 { THREAD_TRACE_SPANS_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } 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 type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The tabbed details column of a row; the spans tab is `ThreadTrace.SpansTab`, others are `ThreadTrace.TabContent`. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded, isFirst, tab, setTab } = useThreadTraceRow();\n  return (\n    <Tabs<string>\n      defaultTab={THREAD_TRACE_SPANS_TAB}\n      value={tab}\n      onValueChange={setTab}\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden border-x border-b border-border1 group-last:rounded-b-xl',\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 between tabs) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        isFirst && 'rounded-t-xl border-t',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Tabs>\n  );\n}\n\nexport interface ThreadTraceDetailsHeaderProps extends ComponentProps<'div'> {\n  headerClassName?: string;\n}\n\n/**\n * Same header/tab layout as the traces page so both surfaces read identically. Children are a\n * `ThreadTrace.TabList` plus an optional `ThreadTrace.DetailsActions`. Measured: its height is\n * taken out of the timeline budget so the details cell never overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({\n  className,\n  headerClassName,\n  children,\n  ...props\n}: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Explicit border: the measuring wrapper makes the header the \"last\" child. */}\n      <DataPanel.Header className={cn('min-h-0 border-b border-border1 py-1.5', headerClassName)}>\n        {children}\n      </DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant'> & { variant?: TabListProps['variant'] };\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} {...props} />;\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), rendered after the tabs. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div data-slot=\"thread-trace-details-actions\" className={cn('flex shrink-0 items-center', className)} {...props} />\n  );\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\nexport const ThreadTraceTabContent = TabContent;\n"],"names":[],"mappings":";;;;;;;;;AAYO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAY,OAAA,EAAS,GAAA,EAAK,MAAA,KAAW,iBAAA,EAAkB;AAC/D,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,sBAAA;AAAA,MACZ,KAAA,EAAO,GAAA;AAAA,MACP,aAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,kFAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf,OAAA,IAAW,uBAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAWO,SAAS,wBAAA,CAAyB;AAAA,EACvC,SAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkC;AAChC,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,iBAAA,EAAkB;AAC/C,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,kBAAkB,WAAA,EAAU,6BAAA,EAA8B,WAAuB,GAAG,KAAA,EAE5F,8BAAC,SAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAW,EAAA,CAAG,0CAA0C,eAAe,CAAA,EACtF,UACH,CAAA,EACF,CAAA;AAEJ;AAIO,SAAS,mBAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,GAAG,OAAM,EAA4B;AAChG,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC/C;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,8BAAA,EAA+B,SAAA,EAAW,GAAG,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAErH;AAGO,MAAM,cAAA,GAAiB;AAGvB,MAAM,qBAAA,GAAwB;;;;"}
+{"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;;;;"}

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

@@ -4,11 +4,11 @@ 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-DnbTIGXa.cjs');
+const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listRef, "data-slot": "thread-trace-list", className: utils_cn.cn("min-h-0 overflow-y-auto", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace-list-inner", className: utils_cn.cn("relative min-h-full pb-4", innerClassName), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listRef, "data-slot": "thread-trace-list", className: utils_cn.cn("min-h-0 overflow-y-auto", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace-list-inner", className: utils_cn.cn("relative min-h-full", innerClassName), children }) });
 }
 
 exports.ThreadTraceList = ThreadTraceList;

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

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

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

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { useThreadTrace } from './thread-trace-context.es.js';
-import { c as cn } from '../../../../cn-ByEbywDh.js';
+import { c as cn } from '../../../../cn-C6s2yXwM.js';
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = useThreadTrace();
-  return /* @__PURE__ */ jsx("div", { ref: listRef, "data-slot": "thread-trace-list", className: cn("min-h-0 overflow-y-auto", className), ...props, children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace-list-inner", className: cn("relative min-h-full pb-4", innerClassName), children }) });
+  return /* @__PURE__ */ jsx("div", { ref: listRef, "data-slot": "thread-trace-list", className: cn("min-h-0 overflow-y-auto", className), ...props, children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace-list-inner", className: cn("relative min-h-full", innerClassName), children }) });
 }
 
 export { ThreadTraceList };

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

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

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

@@ -3,22 +3,54 @@
 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 utils_cn = require('../../../../cn-DnbTIGXa.cjs');
+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');
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
-  const { messagesRef } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace-messages", className: utils_cn.cn("relative min-w-0 pr-4", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const { messagesRef, messagesHeight, tab, setTab } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
+  const minHeight = tab === domains_traces_components_threadTrace_threadTraceRow.THREAD_TRACE_MESSAGES_TAB ? void 0 : messagesHeight ?? void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref: messagesRef,
-      "data-slot": "thread-trace-messages-inner",
-      className: utils_cn.cn("sticky top-0 py-4", innerClassName),
-      "data-testid": "trace-row-messages",
-      children
+      "data-slot": "thread-trace-messages",
+      className: utils_cn.cn("relative min-w-0 border-x border-border1", className),
+      ...props,
+      style: { minHeight, ...props.style },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        tabsRoot.Tabs,
+        {
+          ref: messagesRef,
+          defaultTab: domains_traces_components_threadTrace_threadTraceRow.THREAD_TRACE_MESSAGES_TAB,
+          value: tab,
+          onValueChange: setTab,
+          "data-slot": "thread-trace-messages-inner",
+          className: utils_cn.cn("sticky top-0", innerClassName),
+          "data-testid": "trace-row-messages",
+          children
+        }
+      )
     }
-  ) });
+  );
+}
+function ThreadTraceMessagesHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: utils_cn.cn("border-b border-border1", className), ...props });
+}
+function ThreadTraceTabList({ variant = "pill-ghost", size = "sm", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant, size, ...props });
+}
+const ThreadTraceTab = tabsTab.Tab;
+function ThreadTraceTabContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { className: utils_cn.cn("pr-4", className), ...props });
 }
 
 exports.ThreadTraceMessages = ThreadTraceMessages;
+exports.ThreadTraceMessagesHeader = ThreadTraceMessagesHeader;
+exports.ThreadTraceTab = ThreadTraceTab;
+exports.ThreadTraceTabContent = ThreadTraceTabContent;
+exports.ThreadTraceTabList = ThreadTraceTabList;
 //# sourceMappingURL=thread-trace-messages.cjs.js.map

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 { useThreadTraceRow } from './thread-trace-row-context';\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 messages column. It has no borders so consecutive turns read as one continuous conversation;\n * the details column carries the borders. Its measured height is the clamp budget of the timeline.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef } = useThreadTraceRow();\n  return (\n    <div data-slot=\"thread-trace-messages\" className={cn('relative min-w-0 pr-4', className)} {...props}>\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <div\n        ref={messagesRef}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0 py-4', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["useThreadTraceRow","jsx","cn"],"mappings":";;;;;;;;AAcO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAY,GAAIA,6EAAA,EAAkB;AAC1C,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,uBAAA,EAAwB,SAAA,EAAWC,YAAG,uBAAA,EAAyB,SAAS,CAAA,EAAI,GAAG,KAAA,EAE5F,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,WAAA,EAAU,6BAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,mBAAA,EAAqB,cAAc,CAAA;AAAA,MACjD,aAAA,EAAY,oBAAA;AAAA,MAEX;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
+{"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;;;;;;;;"}

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

@@ -1,20 +1,48 @@
 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 { c as cn } from '../../../../cn-ByEbywDh.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';
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
-  const { messagesRef } = useThreadTraceRow();
-  return /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace-messages", className: cn("relative min-w-0 pr-4", className), ...props, children: /* @__PURE__ */ jsx(
+  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();
+  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? void 0 : messagesHeight ?? void 0;
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: messagesRef,
-      "data-slot": "thread-trace-messages-inner",
-      className: cn("sticky top-0 py-4", innerClassName),
-      "data-testid": "trace-row-messages",
-      children
+      "data-slot": "thread-trace-messages",
+      className: cn("relative min-w-0 border-x border-border1", className),
+      ...props,
+      style: { minHeight, ...props.style },
+      children: /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          ref: messagesRef,
+          defaultTab: THREAD_TRACE_MESSAGES_TAB,
+          value: tab,
+          onValueChange: setTab,
+          "data-slot": "thread-trace-messages-inner",
+          className: cn("sticky top-0", innerClassName),
+          "data-testid": "trace-row-messages",
+          children
+        }
+      )
     }
-  ) });
+  );
+}
+function ThreadTraceMessagesHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(DataPanel.Header, { className: cn("border-b border-border1", className), ...props });
+}
+function ThreadTraceTabList({ variant = "pill-ghost", size = "sm", ...props }) {
+  return /* @__PURE__ */ jsx(TabList, { variant, size, ...props });
+}
+const ThreadTraceTab = Tab;
+function ThreadTraceTabContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(TabContent, { className: cn("pr-4", className), ...props });
 }
 
-export { ThreadTraceMessages };
+export { ThreadTraceMessages, ThreadTraceMessagesHeader, ThreadTraceTab, ThreadTraceTabContent, ThreadTraceTabList };
 //# sourceMappingURL=thread-trace-messages.es.js.map

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 { useThreadTraceRow } from './thread-trace-row-context';\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 messages column. It has no borders so consecutive turns read as one continuous conversation;\n * the details column carries the borders. Its measured height is the clamp budget of the timeline.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef } = useThreadTraceRow();\n  return (\n    <div data-slot=\"thread-trace-messages\" className={cn('relative min-w-0 pr-4', className)} {...props}>\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <div\n        ref={messagesRef}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0 py-4', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,iBAAA,EAAkB;AAC1C,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,uBAAA,EAAwB,SAAA,EAAW,GAAG,uBAAA,EAAyB,SAAS,CAAA,EAAI,GAAG,KAAA,EAE5F,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,WAAA,EAAU,6BAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,cAAc,CAAA;AAAA,MACjD,aAAA,EAAY,oBAAA;AAAA,MAEX;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
+{"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;;;;"}

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-lebYetuv.cjs');
-const utils_cn = require('../../../../cn-DnbTIGXa.cjs');
+const threadRail = require('../../../../thread-rail-BvhuZLav.cjs');
+const utils_cn = require('../../../../cn-BuHW7Wrt.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-o19IAzcJ.js';
-import { c as cn } from '../../../../cn-ByEbywDh.js';
+import { T as ThreadRail } from '../../../../thread-rail-CPAHjoV1.js';
+import { c as cn } from '../../../../cn-C6s2yXwM.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,9 +6,16 @@ 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-DnbTIGXa.cjs');
+const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
 
-function ThreadTraceRoot({ traceIds, anchorTraceId, className, children, ...props }) {
+function ThreadTraceRoot({
+  traceIds,
+  anchorTraceId,
+  onSelectedSpanChange,
+  className,
+  children,
+  ...props
+}) {
   const listRef = React.useRef(null);
   const { visibleTraceIds, currentTraceId } = domains_traces_hooks_useVisibleTraceRows.useVisibleTraceRows(listRef, traceIds);
   const [selected, setSelected] = React.useState(null);
@@ -26,11 +33,13 @@ function ThreadTraceRoot({ traceIds, anchorTraceId, className, children, ...prop
   }, []);
   const selectSpan = React.useCallback(
     (traceId, spanId) => {
-      setSelected(spanId ? { traceId, spanId } : null);
+      const next = spanId ? { traceId, spanId } : null;
+      setSelected(next);
+      onSelectedSpanChange?.(next);
       if (spanId) setTraceExpanded(traceId, true);
       if (!spanId) setHighlight(null);
     },
-    [setTraceExpanded]
+    [setTraceExpanded, onSelectedSpanChange]
   );
   const highlightSpans = React.useCallback(
     (traceId, spanIds) => {
@@ -86,8 +95,10 @@ function ThreadTraceRoot({ traceIds, anchorTraceId, className, children, ...prop
     {
       "data-slot": "thread-trace",
       className: utils_cn.cn(
-        "grid h-full min-h-0",
-        selected ? "grid-cols-[minmax(0,1fr)_minmax(0,40%)]" : "grid-cols-[minmax(0,1fr)]",
+        // The span cell always exists and collapses to zero so opening/closing it animates
+        // via `grid-template-columns`, like the trace panel's columns.
+        "grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out",
+        selected ? "grid-cols-[minmax(0,1fr)_40%]" : "grid-cols-[minmax(0,1fr)_0%]",
         className
       ),
       ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-root.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /**\n   * The row to start from: it mounts expanded and is scrolled into view once. Only read at mount,\n   * so a row that arrives on a later page is left alone.\n   */\n  anchorTraceId?: string | null;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({ traceIds, anchorTraceId, className, children, ...props }: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  const [anchor] = useState(() => anchorTraceId ?? null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set(anchor ? [anchor] : []));\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      setSelected(spanId ? { traceId, spanId } : null);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      anchorTraceId: anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace\"\n        className={cn(\n          'grid h-full min-h-0',\n          selected ? 'grid-cols-[minmax(0,1fr)_minmax(0,40%)]' : 'grid-cols-[minmax(0,1fr)]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","cn"],"mappings":"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"}
+{"version":3,"file":"thread-trace-root.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /**\n   * The row to start from: it mounts expanded and is scrolled into view once. Only read at mount,\n   * so a row that arrives on a later page is left alone.\n   */\n  anchorTraceId?: string | null;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  anchorTraceId,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  const [anchor] = useState(() => anchorTraceId ?? null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set(anchor ? [anchor] : []));\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      anchorTraceId: anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace\"\n        className={cn(\n          // The span cell always exists and collapses to zero so opening/closing it animates\n          // via `grid-template-columns`, like the trace panel's columns.\n          'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n          selected ? 'grid-cols-[minmax(0,1fr)_40%]' : 'grid-cols-[minmax(0,1fr)_0%]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","cn"],"mappings":";;;;;;;;;;AA0BO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,OAAA,GAAUA,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,EAAE,eAAA,EAAiB,cAAA,EAAe,GAAIC,4DAAA,CAAoB,SAAS,QAAQ,CAAA;AAEjF,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAyC,IAAI,CAAA;AAC7E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAsC,IAAI,CAAA;AAC5E,EAAA,MAAM,CAAC,MAAM,CAAA,GAAIA,cAAA,CAAS,MAAM,iBAAiB,IAAI,CAAA;AAErD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIA,eAA8B,MAAM,IAAI,GAAA,CAAI,MAAA,GAAS,CAAC,MAAM,CAAA,GAAI,EAAE,CAAC,CAAA;AAEnH,EAAA,MAAM,gBAAA,GAAmBC,iBAAA,CAAY,CAAC,OAAA,EAAiB,QAAA,KAAsB;AAC3E,IAAA,mBAAA,CAAoB,CAAA,OAAA,KAAW;AAC7B,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,OAAO,CAAA,KAAM,UAAU,OAAO,OAAA;AAC9C,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,OAAO,CAAA;AAC5B,MAAA,IAAI,QAAA,EAAU,IAAA,CAAK,GAAA,CAAI,OAAO,CAAA;AAAA,WACzB,IAAA,CAAK,OAAO,OAAO,CAAA;AACxB,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAaA,iBAAA;AAAA,IACjB,CAAC,SAAiB,MAAA,KAA+B;AAC/C,MAAA,MAAM,IAAA,GAAO,MAAA,GAAS,EAAE,OAAA,EAAS,QAAO,GAAI,IAAA;AAC5C,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,oBAAA,GAAuB,IAAI,CAAA;AAC3B,MAAA,IAAI,MAAA,EAAQ,gBAAA,CAAiB,OAAA,EAAS,IAAI,CAAA;AAE1C,MAAA,IAAI,CAAC,MAAA,EAAQ,YAAA,CAAa,IAAI,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,kBAAkB,oBAAoB;AAAA,GACzC;AAKA,EAAA,MAAM,cAAA,GAAiBA,iBAAA;AAAA,IACrB,CAAC,SAAiB,OAAA,KAAsB;AACtC,MAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA;AAAA,MACF;AACA,MAAA,YAAA,CAAa,EAAE,OAAA,EAAS,OAAA,EAAS,CAAA;AACjC,MAAA,gBAAA,CAAiB,SAAS,IAAI,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,aAAA,GAAgBA,iBAAA,CAAY,CAAC,OAAA,KAAoB;AACrD,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA,EAAS,gBAAA,CAA8B,iBAAiB,KAAK,EAAC;AACnF,IAAA,KAAA,MAAW,OAAO,IAAA,EAAM;AACtB,MAAA,IAAI,GAAA,CAAI,OAAA,CAAQ,OAAA,KAAY,OAAA,EAAS;AACnC,QAAA,GAAA,CAAI,eAAe,EAAE,QAAA,EAAU,QAAA,EAAU,KAAA,EAAO,SAAS,CAAA;AACzD,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO;AAAA,MACL,QAAA;AAAA,MACA,aAAA,EAAe,MAAA;AAAA,MACf,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,QAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACEC,cAAA,CAACC,2EAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,YAAA,EAClC,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAWE,WAAA;AAAA;AAAA;AAAA,QAGT,iFAAA;AAAA,QACA,WAAW,+BAAA,GAAkC,8BAAA;AAAA,QAC7C;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}

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

@@ -2,9 +2,16 @@ 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-ByEbywDh.js';
+import { c as cn } from '../../../../cn-C6s2yXwM.js';
 
-function ThreadTraceRoot({ traceIds, anchorTraceId, className, children, ...props }) {
+function ThreadTraceRoot({
+  traceIds,
+  anchorTraceId,
+  onSelectedSpanChange,
+  className,
+  children,
+  ...props
+}) {
   const listRef = useRef(null);
   const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);
   const [selected, setSelected] = useState(null);
@@ -22,11 +29,13 @@ function ThreadTraceRoot({ traceIds, anchorTraceId, className, children, ...prop
   }, []);
   const selectSpan = useCallback(
     (traceId, spanId) => {
-      setSelected(spanId ? { traceId, spanId } : null);
+      const next = spanId ? { traceId, spanId } : null;
+      setSelected(next);
+      onSelectedSpanChange?.(next);
       if (spanId) setTraceExpanded(traceId, true);
       if (!spanId) setHighlight(null);
     },
-    [setTraceExpanded]
+    [setTraceExpanded, onSelectedSpanChange]
   );
   const highlightSpans = useCallback(
     (traceId, spanIds) => {
@@ -82,8 +91,10 @@ function ThreadTraceRoot({ traceIds, anchorTraceId, className, children, ...prop
     {
       "data-slot": "thread-trace",
       className: cn(
-        "grid h-full min-h-0",
-        selected ? "grid-cols-[minmax(0,1fr)_minmax(0,40%)]" : "grid-cols-[minmax(0,1fr)]",
+        // The span cell always exists and collapses to zero so opening/closing it animates
+        // via `grid-template-columns`, like the trace panel's columns.
+        "grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out",
+        selected ? "grid-cols-[minmax(0,1fr)_40%]" : "grid-cols-[minmax(0,1fr)_0%]",
         className
       ),
       ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-root.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /**\n   * The row to start from: it mounts expanded and is scrolled into view once. Only read at mount,\n   * so a row that arrives on a later page is left alone.\n   */\n  anchorTraceId?: string | null;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({ traceIds, anchorTraceId, className, children, ...props }: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  const [anchor] = useState(() => anchorTraceId ?? null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set(anchor ? [anchor] : []));\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      setSelected(spanId ? { traceId, spanId } : null);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      anchorTraceId: anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace\"\n        className={cn(\n          'grid h-full min-h-0',\n          selected ? 'grid-cols-[minmax(0,1fr)_minmax(0,40%)]' : 'grid-cols-[minmax(0,1fr)]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-root.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /**\n   * The row to start from: it mounts expanded and is scrolled into view once. Only read at mount,\n   * so a row that arrives on a later page is left alone.\n   */\n  anchorTraceId?: string | null;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  anchorTraceId,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  const [anchor] = useState(() => anchorTraceId ?? null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set(anchor ? [anchor] : []));\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      anchorTraceId: anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      anchor,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      <div\n        data-slot=\"thread-trace\"\n        className={cn(\n          // The span cell always exists and collapses to zero so opening/closing it animates\n          // via `grid-template-columns`, like the trace panel's columns.\n          'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n          selected ? 'grid-cols-[minmax(0,1fr)_40%]' : 'grid-cols-[minmax(0,1fr)_0%]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA0BO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,EAAE,eAAA,EAAiB,cAAA,EAAe,GAAI,mBAAA,CAAoB,SAAS,QAAQ,CAAA;AAEjF,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAyC,IAAI,CAAA;AAC7E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAsC,IAAI,CAAA;AAC5E,EAAA,MAAM,CAAC,MAAM,CAAA,GAAI,QAAA,CAAS,MAAM,iBAAiB,IAAI,CAAA;AAErD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAA8B,MAAM,IAAI,GAAA,CAAI,MAAA,GAAS,CAAC,MAAM,CAAA,GAAI,EAAE,CAAC,CAAA;AAEnH,EAAA,MAAM,gBAAA,GAAmB,WAAA,CAAY,CAAC,OAAA,EAAiB,QAAA,KAAsB;AAC3E,IAAA,mBAAA,CAAoB,CAAA,OAAA,KAAW;AAC7B,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,OAAO,CAAA,KAAM,UAAU,OAAO,OAAA;AAC9C,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,OAAO,CAAA;AAC5B,MAAA,IAAI,QAAA,EAAU,IAAA,CAAK,GAAA,CAAI,OAAO,CAAA;AAAA,WACzB,IAAA,CAAK,OAAO,OAAO,CAAA;AACxB,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAa,WAAA;AAAA,IACjB,CAAC,SAAiB,MAAA,KAA+B;AAC/C,MAAA,MAAM,IAAA,GAAO,MAAA,GAAS,EAAE,OAAA,EAAS,QAAO,GAAI,IAAA;AAC5C,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,oBAAA,GAAuB,IAAI,CAAA;AAC3B,MAAA,IAAI,MAAA,EAAQ,gBAAA,CAAiB,OAAA,EAAS,IAAI,CAAA;AAE1C,MAAA,IAAI,CAAC,MAAA,EAAQ,YAAA,CAAa,IAAI,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,kBAAkB,oBAAoB;AAAA,GACzC;AAKA,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,SAAiB,OAAA,KAAsB;AACtC,MAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA;AAAA,MACF;AACA,MAAA,YAAA,CAAa,EAAE,OAAA,EAAS,OAAA,EAAS,CAAA;AACjC,MAAA,gBAAA,CAAiB,SAAS,IAAI,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,OAAA,KAAoB;AACrD,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA,EAAS,gBAAA,CAA8B,iBAAiB,KAAK,EAAC;AACnF,IAAA,KAAA,MAAW,OAAO,IAAA,EAAM;AACtB,MAAA,IAAI,GAAA,CAAI,OAAA,CAAQ,OAAA,KAAY,OAAA,EAAS;AACnC,QAAA,GAAA,CAAI,eAAe,EAAE,QAAA,EAAU,QAAA,EAAU,KAAA,EAAO,SAAS,CAAA;AACzD,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO;AAAA,MACL,QAAA;AAAA,MACA,aAAA,EAAe,MAAA;AAAA,MACf,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,QAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,kBAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,YAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA;AAAA;AAAA,QAGT,iFAAA;AAAA,QACA,WAAW,+BAAA,GAAkC,8BAAA;AAAA,QAC7C;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-row-context.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefCallback } from 'react';\n\nexport interface ThreadTraceRowContextValue {\n  traceId: string;\n  /** The oldest trace; its details column gets the top border of the list. */\n  isFirst: boolean;\n  /** A span of this row is open in the side panel. */\n  isActive: boolean;\n  /** The first row in view. */\n  isCurrent: boolean;\n  /** The timeline is shown in full rather than clamped to the messages column. */\n  isExpanded: boolean;\n  isAnchor: boolean;\n  selectedSpanId: string | undefined;\n  featuredSpanIds: string[] | undefined;\n  revealSpanId: string | undefined;\n  /** Highlight spans of this row and bring the spans tab back so the highlight is visible. */\n  highlightSpans: (spanIds: string[]) => void;\n  setExpanded: (expanded: boolean) => void;\n  tab: string;\n  setTab: (tab: string) => void;\n  /** Measured heights; the timeline is clamped to the messages column minus the details header. */\n  messagesRef: RefCallback<HTMLDivElement>;\n  timelineRef: RefCallback<HTMLDivElement>;\n  detailsHeaderRef: RefCallback<HTMLDivElement>;\n  messagesHeight: number | null;\n  timelineHeight: number | null;\n  detailsHeaderHeight: number | null;\n}\n\nexport const ThreadTraceRowContext = createContext<ThreadTraceRowContextValue | null>(null);\n\nexport function useThreadTraceRow(): ThreadTraceRowContextValue {\n  const context = useContext(ThreadTraceRowContext);\n  if (!context) {\n    throw new Error('ThreadTrace row parts must be rendered inside <ThreadTrace.Row>.');\n  }\n  return context;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;AA+BO,MAAM,qBAAA,GAAwBA,oBAAiD,IAAI;AAEnF,SAAS,iBAAA,GAAgD;AAC9D,EAAA,MAAM,OAAA,GAAUC,iBAAW,qBAAqB,CAAA;AAChD,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,kEAAkE,CAAA;AAAA,EACpF;AACA,EAAA,OAAO,OAAA;AACT;;;;;"}
+{"version":3,"file":"thread-trace-row-context.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefCallback } from 'react';\n\nexport interface ThreadTraceRowContextValue {\n  traceId: string;\n  /** A span of this row is open in the side panel. */\n  isActive: boolean;\n  /** The first row in view. */\n  isCurrent: boolean;\n  /** The timeline is shown in full rather than clamped to the messages column. */\n  isExpanded: boolean;\n  isAnchor: boolean;\n  selectedSpanId: string | undefined;\n  featuredSpanIds: string[] | undefined;\n  revealSpanId: string | undefined;\n  /** Highlight spans of this row in its span tree. */\n  highlightSpans: (spanIds: string[]) => void;\n  setExpanded: (expanded: boolean) => void;\n  /** The view shown by the messages column (Messages / Feedback / Scores). */\n  tab: string;\n  setTab: (tab: string) => void;\n  /** Measured heights; the timeline is clamped to the messages column minus the details header. */\n  messagesRef: RefCallback<HTMLDivElement>;\n  timelineRef: RefCallback<HTMLDivElement>;\n  detailsHeaderRef: RefCallback<HTMLDivElement>;\n  messagesHeight: number | null;\n  timelineHeight: number | null;\n  detailsHeaderHeight: number | null;\n}\n\nexport const ThreadTraceRowContext = createContext<ThreadTraceRowContextValue | null>(null);\n\nexport function useThreadTraceRow(): ThreadTraceRowContextValue {\n  const context = useContext(ThreadTraceRowContext);\n  if (!context) {\n    throw new Error('ThreadTrace row parts must be rendered inside <ThreadTrace.Row>.');\n  }\n  return context;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;AA8BO,MAAM,qBAAA,GAAwBA,oBAAiD,IAAI;AAEnF,SAAS,iBAAA,GAAgD;AAC9D,EAAA,MAAM,OAAA,GAAUC,iBAAW,qBAAqB,CAAA;AAChD,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,kEAAkE,CAAA;AAAA,EACpF;AACA,EAAA,OAAO,OAAA;AACT;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-row-context.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefCallback } from 'react';\n\nexport interface ThreadTraceRowContextValue {\n  traceId: string;\n  /** The oldest trace; its details column gets the top border of the list. */\n  isFirst: boolean;\n  /** A span of this row is open in the side panel. */\n  isActive: boolean;\n  /** The first row in view. */\n  isCurrent: boolean;\n  /** The timeline is shown in full rather than clamped to the messages column. */\n  isExpanded: boolean;\n  isAnchor: boolean;\n  selectedSpanId: string | undefined;\n  featuredSpanIds: string[] | undefined;\n  revealSpanId: string | undefined;\n  /** Highlight spans of this row and bring the spans tab back so the highlight is visible. */\n  highlightSpans: (spanIds: string[]) => void;\n  setExpanded: (expanded: boolean) => void;\n  tab: string;\n  setTab: (tab: string) => void;\n  /** Measured heights; the timeline is clamped to the messages column minus the details header. */\n  messagesRef: RefCallback<HTMLDivElement>;\n  timelineRef: RefCallback<HTMLDivElement>;\n  detailsHeaderRef: RefCallback<HTMLDivElement>;\n  messagesHeight: number | null;\n  timelineHeight: number | null;\n  detailsHeaderHeight: number | null;\n}\n\nexport const ThreadTraceRowContext = createContext<ThreadTraceRowContextValue | null>(null);\n\nexport function useThreadTraceRow(): ThreadTraceRowContextValue {\n  const context = useContext(ThreadTraceRowContext);\n  if (!context) {\n    throw new Error('ThreadTrace row parts must be rendered inside <ThreadTrace.Row>.');\n  }\n  return context;\n}\n"],"names":[],"mappings":";;AA+BO,MAAM,qBAAA,GAAwB,cAAiD,IAAI;AAEnF,SAAS,iBAAA,GAAgD;AAC9D,EAAA,MAAM,OAAA,GAAU,WAAW,qBAAqB,CAAA;AAChD,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,kEAAkE,CAAA;AAAA,EACpF;AACA,EAAA,OAAO,OAAA;AACT;;;;"}
+{"version":3,"file":"thread-trace-row-context.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefCallback } from 'react';\n\nexport interface ThreadTraceRowContextValue {\n  traceId: string;\n  /** A span of this row is open in the side panel. */\n  isActive: boolean;\n  /** The first row in view. */\n  isCurrent: boolean;\n  /** The timeline is shown in full rather than clamped to the messages column. */\n  isExpanded: boolean;\n  isAnchor: boolean;\n  selectedSpanId: string | undefined;\n  featuredSpanIds: string[] | undefined;\n  revealSpanId: string | undefined;\n  /** Highlight spans of this row in its span tree. */\n  highlightSpans: (spanIds: string[]) => void;\n  setExpanded: (expanded: boolean) => void;\n  /** The view shown by the messages column (Messages / Feedback / Scores). */\n  tab: string;\n  setTab: (tab: string) => void;\n  /** Measured heights; the timeline is clamped to the messages column minus the details header. */\n  messagesRef: RefCallback<HTMLDivElement>;\n  timelineRef: RefCallback<HTMLDivElement>;\n  detailsHeaderRef: RefCallback<HTMLDivElement>;\n  messagesHeight: number | null;\n  timelineHeight: number | null;\n  detailsHeaderHeight: number | null;\n}\n\nexport const ThreadTraceRowContext = createContext<ThreadTraceRowContextValue | null>(null);\n\nexport function useThreadTraceRow(): ThreadTraceRowContextValue {\n  const context = useContext(ThreadTraceRowContext);\n  if (!context) {\n    throw new Error('ThreadTrace row parts must be rendered inside <ThreadTrace.Row>.');\n  }\n  return context;\n}\n"],"names":[],"mappings":";;AA8BO,MAAM,qBAAA,GAAwB,cAAiD,IAAI;AAEnF,SAAS,iBAAA,GAAgD;AAC9D,EAAA,MAAM,OAAA,GAAU,WAAW,qBAAqB,CAAA;AAChD,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,kEAAkE,CAAA;AAAA,EACpF;AACA,EAAA,OAAO,OAAA;AACT;;;;"}