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

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

@@ -5,29 +5,25 @@ 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-o-QLWuFV.cjs');
-const tabsRoot = require('../../../../tabs-root-C-ePF1y9.cjs');
-const tabsTab = require('../../../../tabs-tab-BmIBFifi.cjs');
-const tabsContent = require('../../../../tabs-content-DnscxcLI.cjs');
+const tabsList = require('../../../../tabs-list-Tqj36HIL.cjs');
+const tabsTab = require('../../../../tabs-tab-C-C2vX-D.cjs');
+const tabsContent = require('../../../../tabs-content-DfH1hhpU.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();
+  const { messagesRef, messagesHeight, tab } = 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",
     {
       "data-slot": "thread-trace-messages",
-      className: utils_cn.cn("relative min-w-0 overflow-x-clip border-r border-border", className),
+      className: utils_cn.cn("relative min-w-0 overflow-x-clip px-4", className),
       ...props,
       style: { minHeight, ...props.style },
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        tabsRoot.Tabs,
+        "div",
         {
           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",
@@ -37,19 +33,15 @@ function ThreadTraceMessages({ className, innerClassName, children, ...props })
     }
   );
 }
-function ThreadTraceMessagesHeader({ 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 });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsList.TabList, { variant, size, ...props });
 }
 const ThreadTraceTab = tabsTab.Tab;
 function ThreadTraceTabContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { className: utils_cn.cn("overflow-x-hidden px-4", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { className: utils_cn.cn("overflow-x-hidden", className), ...props });
 }
 
 exports.ThreadTraceMessages = ThreadTraceMessages;
-exports.ThreadTraceMessagesHeader = ThreadTraceMessagesHeader;
 exports.ThreadTraceTab = ThreadTraceTab;
 exports.ThreadTraceTabContent = ThreadTraceTabContent;
 exports.ThreadTraceTabList = ThreadTraceTabList;

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 overflow-x-clip border-r border-border', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <Tabs<string>\n        ref={messagesRef}\n        defaultTab={THREAD_TRACE_MESSAGES_TAB}\n        value={tab}\n        onValueChange={setTab}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </Tabs>\n    </div>\n  );\n}\n\nexport type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;\n\n/**\n * The bordered tab row at the top of the messages column, same chrome as the trace panel's side\n * column; its border spans the column and continues into the details header's border as one line.\n */\nexport function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps) {\n  return <DataPanel.Header className={cn('border-b border-border', className)} {...props} />;\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column; keeps a gutter before the column's right border. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('overflow-x-hidden px-4', className)} {...props} />;\n}\n"],"names":["useThreadTraceRow","THREAD_TRACE_MESSAGES_TAB","jsx","cn","Tabs","DataPanel","TabList","Tab","TabContent"],"mappings":";;;;;;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,EAAK,MAAA,KAAWA,6EAAA,EAAkB;AAGvE,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQC,8EAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,yDAAA,EAA2D,SAAS,CAAA;AAAA,MACjF,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,0BAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACpF;;;;;;;;"}
+{"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 { Tab, TabContent, TabList } 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: one `ThreadTrace.TabContent` per view (Messages / Feedback / Scores),\n * switched by the `ThreadTrace.TabList` in the row's divider. Its measured height is the clamp\n * budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab } = 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 overflow-x-clip px-4', 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      <div\n        ref={messagesRef}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </div>\n    </div>\n  );\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. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('overflow-x-hidden', className)} {...props} />;\n}\n"],"names":["useThreadTraceRow","THREAD_TRACE_MESSAGES_TAB","jsx","cn","TabList","Tab","TabContent"],"mappings":";;;;;;;;;;;;AAkBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,KAAQA,6EAAA,EAAkB;AAG/D,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,uCAAA,EAAyC,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAAD,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAWC,WAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAOD,cAAA,CAACE,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,uBAAOH,cAAA,CAACI,0BAAW,SAAA,EAAWH,WAAA,CAAG,qBAAqB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC/E;;;;;;;"}

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

@@ -1,29 +1,25 @@
 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-CbomKGJt.js';
-import { T as TabList, a as Tabs } from '../../../../tabs-root-lrZZ3KwH.js';
-import { T as Tab } from '../../../../tabs-tab-DoPSW-1s.js';
-import { T as TabContent } from '../../../../tabs-content-CwbkTutf.js';
+import { T as TabList } from '../../../../tabs-list-tLx5fgP0.js';
+import { T as Tab } from '../../../../tabs-tab-ClLIOGiC.js';
+import { T as TabContent } from '../../../../tabs-content-OWF8un_n.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
-  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();
+  const { messagesRef, messagesHeight, tab } = useThreadTraceRow();
   const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? void 0 : messagesHeight ?? void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "thread-trace-messages",
-      className: cn("relative min-w-0 overflow-x-clip border-r border-border", className),
+      className: cn("relative min-w-0 overflow-x-clip px-4", className),
       ...props,
       style: { minHeight, ...props.style },
       children: /* @__PURE__ */ jsx(
-        Tabs,
+        "div",
         {
           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",
@@ -33,16 +29,13 @@ function ThreadTraceMessages({ className, innerClassName, children, ...props })
     }
   );
 }
-function ThreadTraceMessagesHeader({ 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 });
 }
 const ThreadTraceTab = Tab;
 function ThreadTraceTabContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabContent, { className: cn("overflow-x-hidden px-4", className), ...props });
+  return /* @__PURE__ */ jsx(TabContent, { className: cn("overflow-x-hidden", className), ...props });
 }
 
-export { ThreadTraceMessages, ThreadTraceMessagesHeader, ThreadTraceTab, ThreadTraceTabContent, ThreadTraceTabList };
+export { ThreadTraceMessages, 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 { 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 overflow-x-clip border-r border-border', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <Tabs<string>\n        ref={messagesRef}\n        defaultTab={THREAD_TRACE_MESSAGES_TAB}\n        value={tab}\n        onValueChange={setTab}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </Tabs>\n    </div>\n  );\n}\n\nexport type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;\n\n/**\n * The bordered tab row at the top of the messages column, same chrome as the trace panel's side\n * column; its border spans the column and continues into the details header's border as one line.\n */\nexport function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps) {\n  return <DataPanel.Header className={cn('border-b border-border', className)} {...props} />;\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column; keeps a gutter before the column's right border. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('overflow-x-hidden px-4', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,EAAK,MAAA,KAAW,iBAAA,EAAkB;AAGvE,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQ,yBAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yDAAA,EAA2D,SAAS,CAAA;AAAA,MACjF,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,0BAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACpF;;;;"}
+{"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 { Tab, TabContent, TabList } 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: one `ThreadTrace.TabContent` per view (Messages / Feedback / Scores),\n * switched by the `ThreadTrace.TabList` in the row's divider. Its measured height is the clamp\n * budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab } = 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 overflow-x-clip px-4', 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      <div\n        ref={messagesRef}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </div>\n    </div>\n  );\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. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('overflow-x-hidden', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;AAkBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,KAAQ,iBAAA,EAAkB;AAG/D,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,uCAAA,EAAyC,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,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;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,qBAAqB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC/E;;;;"}

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

@@ -6,7 +6,8 @@ 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 messageScroller = require('../../../../message-scroller-E05PLPmT.cjs');
+const messageScroller = require('../../../../message-scroller-D-_KN9Fv.cjs');
+const resize_panelGroup = require('../../../../resize/panel-group.cjs.js');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceRoot({
@@ -95,21 +96,7 @@ function ThreadTraceRoot({
       autoScroll: true,
       preserveScrollOnPrepend: true,
       onReachStart: onLoadOlder,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "data-slot": "thread-trace",
-          className: utils_cn.cn(
-            // 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,2fr)_minmax(0,1fr)]" : "grid-cols-[minmax(0,2fr)_minmax(0,0fr)]",
-            className
-          ),
-          ...props,
-          children
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace", className: utils_cn.cn("flex h-full min-h-0", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(resize_panelGroup.PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children }) })
     }
   ) });
 }

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 { MessageScrollerProvider } from '@/ds/components/MessageScroller';\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  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\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  onLoadOlder,\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  // 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());\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      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\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      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div\n          data-slot=\"thread-trace\"\n          className={cn(\n            // The span cell always exists and collapses to zero so opening/closing it animates\n            // via `grid-template-columns`, like the trace panel's columns.\n            'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n            selected ? 'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]' : 'grid-cols-[minmax(0,2fr)_minmax(0,0fr)]',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","MessageScrollerProvider","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 { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { PanelGroup } from '@/lib/resize/panel-group';\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  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\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 resizable panel group that\n * gains a span column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\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  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Collapse\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\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      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\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      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div data-slot=\"thread-trace\" className={cn('flex h-full min-h-0', className)} {...props}>\n          <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n            {children}\n          </PanelGroup>\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","MessageScrollerProvider","cn","PanelGroup"],"mappings":"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"}

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

@@ -2,7 +2,8 @@ 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 { d as MessageScrollerProvider } from '../../../../message-scroller-CiFr8MwT.js';
+import { d as MessageScrollerProvider } from '../../../../message-scroller-WWaQ-XU_.js';
+import { PanelGroup } from '../../../../resize/panel-group.es.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceRoot({
@@ -91,21 +92,7 @@ function ThreadTraceRoot({
       autoScroll: true,
       preserveScrollOnPrepend: true,
       onReachStart: onLoadOlder,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-slot": "thread-trace",
-          className: cn(
-            // 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,2fr)_minmax(0,1fr)]" : "grid-cols-[minmax(0,2fr)_minmax(0,0fr)]",
-            className
-          ),
-          ...props,
-          children
-        }
-      )
+      children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace", className: cn("flex h-full min-h-0", className), ...props, children: /* @__PURE__ */ jsx(PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children }) })
     }
   ) });
 }

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 { MessageScrollerProvider } from '@/ds/components/MessageScroller';\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  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\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  onLoadOlder,\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  // 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());\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      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\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      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div\n          data-slot=\"thread-trace\"\n          className={cn(\n            // The span cell always exists and collapses to zero so opening/closing it animates\n            // via `grid-template-columns`, like the trace panel's columns.\n            'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n            selected ? 'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]' : 'grid-cols-[minmax(0,2fr)_minmax(0,0fr)]',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </MessageScrollerProvider>\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 { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { PanelGroup } from '@/lib/resize/panel-group';\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  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\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 resizable panel group that\n * gains a span column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\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  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Collapse\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\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      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\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      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div data-slot=\"thread-trace\" className={cn('flex h-full min-h-0', className)} {...props}>\n          <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n            {children}\n          </PanelGroup>\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -6,7 +6,9 @@ const jsxRuntime = require('react/jsx-runtime');
 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 messageScroller = require('../../../../message-scroller-E05PLPmT.cjs');
+const transcriptDivider = require('../../../../transcript-divider-273Bsdjs.cjs');
+const messageScroller = require('../../../../message-scroller-D-_KN9Fv.cjs');
+const tabsRoot = require('../../../../tabs-root-Hkt7A6oq.cjs');
 const hooks_useMeasuredAutoHeight = require('../../../../hooks/use-measured-auto-height.cjs.js');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
@@ -76,13 +78,15 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace_threadTraceRowContext.ThreadTraceRowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScrollerItem, { messageId: traceId, className: "[content-visibility:visible]", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    tabsRoot.Tabs,
     {
+      defaultTab: THREAD_TRACE_MESSAGES_TAB,
+      value: tab,
+      onValueChange: setTab,
       "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-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100",
-        isActive || isCurrent ? "opacity-100" : "opacity-50",
+        // `overflow-visible` overrides the tabs root scroll box so the messages column stays sticky.
+        "group flex flex-col overflow-visible pb-4",
         className
       ),
       "data-trace-id": traceId,
@@ -92,7 +96,25 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
     }
   ) }) });
 }
+function ThreadTraceRowBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "thread-trace-row-body",
+      className: utils_cn.cn("grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", className),
+      ...props
+    }
+  );
+}
+function ThreadTraceDivider({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "thread-trace-divider", className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(transcriptDivider.TranscriptDivider, { label, hideLabel: true, children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "flex items-center pr-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" }) })
+  ] });
+}
 
 exports.THREAD_TRACE_MESSAGES_TAB = THREAD_TRACE_MESSAGES_TAB;
+exports.ThreadTraceDivider = ThreadTraceDivider;
 exports.ThreadTraceRow = ThreadTraceRow;
+exports.ThreadTraceRowBody = ThreadTraceRowBody;
 //# sourceMappingURL=thread-trace-row.cjs.js.map

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 { MessageScrollerItem } from '@/ds/components/MessageScroller';\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/**\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\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      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      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      {/* Registers the row with the scroller so prepends of older turns keep the reading position.\n          Rows measure their own columns, so they stay rendered off screen. */}\n      <MessageScrollerItem messageId={traceId} className=\"[content-visibility:visible]\">\n        <div\n          data-slot=\"thread-trace-row\"\n          className={cn(\n            // Same fixed messages width as the trace panel; the details column takes the rest.\n            'group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100',\n            isActive || isCurrent ? 'opacity-100' : 'opacity-50',\n            className,\n          )}\n          data-trace-id={traceId}\n          data-active={isActive || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </MessageScrollerItem>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n"],"names":["useThreadTrace","useMeasuredAutoHeight","useState","useCallback","useMemo","jsx","ThreadTraceRowContext","MessageScrollerItem","cn"],"mappings":"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"}
+{"version":3,"file":"thread-trace-row.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } 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 { TranscriptDivider } from '@/ds/components/ai/transcript-divider';\nimport { MessageScrollerItem } from '@/ds/components/MessageScroller';\nimport { Tabs } from '@/ds/components/Tabs';\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/**\n * One agent turn: a `ThreadTrace.Divider` (turn label + tabs) above a `ThreadTrace.RowBody` holding\n * the messages column on the left and the details card 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\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      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      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      {/* Registers the row with the scroller so prepends of older turns keep the reading position.\n          Rows measure their own columns, so they stay rendered off screen. */}\n      <MessageScrollerItem messageId={traceId} className=\"[content-visibility:visible]\">\n        {/* The row is the tabs root, so the tab list in the divider drives the messages column. */}\n        <Tabs<string>\n          defaultTab={THREAD_TRACE_MESSAGES_TAB}\n          value={tab}\n          onValueChange={setTab}\n          data-slot=\"thread-trace-row\"\n          className={cn(\n            // `overflow-visible` overrides the tabs root scroll box so the messages column stays sticky.\n            'group flex flex-col overflow-visible pb-4',\n            className,\n          )}\n          data-trace-id={traceId}\n          data-active={isActive || undefined}\n          {...props}\n        >\n          {children}\n        </Tabs>\n      </MessageScrollerItem>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n\nexport type ThreadTraceRowBodyProps = ComponentProps<'div'>;\n\n/** The two columns of a row: the messages on the left and the details card on the right, each padded on x. */\nexport function ThreadTraceRowBody({ className, ...props }: ThreadTraceRowBodyProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-row-body\"\n      className={cn('grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]', className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ThreadTraceDividerProps {\n  /** Names the turn, e.g. `Turn 1`. Used as the accessible name; not shown. */\n  label: string;\n  /** Typically the row's `ThreadTrace.TabList`. */\n  children?: ReactNode;\n}\n\n/**\n * The rule above a row: a full-width line, with its content (e.g. a trace link and tabs) centered over the messages\n * column only, so the line runs on uninterrupted above the details card.\n */\nexport function ThreadTraceDivider({ label, children }: ThreadTraceDividerProps) {\n  return (\n    <div data-slot=\"thread-trace-divider\" className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n      <div className=\"min-w-0 pl-4\">\n        <TranscriptDivider label={label} hideLabel>\n          {children}\n        </TranscriptDivider>\n      </div>\n      <div aria-hidden className=\"flex items-center pr-4\">\n        <span className=\"h-px flex-1 bg-border\" />\n      </div>\n    </div>\n  );\n}\n"],"names":["useThreadTrace","useMeasuredAutoHeight","useState","useCallback","useMemo","jsx","ThreadTraceRowContext","MessageScrollerItem","Tabs","cn","jsxs","TranscriptDivider"],"mappings":"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"}

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

@@ -1,8 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useMemo } from 'react';
 import { useThreadTrace } from './thread-trace-context.es.js';
 import { ThreadTraceRowContext } from './thread-trace-row-context.es.js';
-import { c as MessageScrollerItem } from '../../../../message-scroller-CiFr8MwT.js';
+import { T as TranscriptDivider } from '../../../../transcript-divider-CPIo8NUj.js';
+import { c as MessageScrollerItem } from '../../../../message-scroller-WWaQ-XU_.js';
+import { T as Tabs } from '../../../../tabs-root-BbzhUZl4.js';
 import { useMeasuredAutoHeight } from '../../../../hooks/use-measured-auto-height.es.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
@@ -72,13 +74,15 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
     ]
   );
   return /* @__PURE__ */ jsx(ThreadTraceRowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MessageScrollerItem, { messageId: traceId, className: "[content-visibility:visible]", children: /* @__PURE__ */ jsx(
-    "div",
+    Tabs,
     {
+      defaultTab: THREAD_TRACE_MESSAGES_TAB,
+      value: tab,
+      onValueChange: setTab,
       "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-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100",
-        isActive || isCurrent ? "opacity-100" : "opacity-50",
+        // `overflow-visible` overrides the tabs root scroll box so the messages column stays sticky.
+        "group flex flex-col overflow-visible pb-4",
         className
       ),
       "data-trace-id": traceId,
@@ -88,6 +92,22 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
     }
   ) }) });
 }
+function ThreadTraceRowBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "thread-trace-row-body",
+      className: cn("grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", className),
+      ...props
+    }
+  );
+}
+function ThreadTraceDivider({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "thread-trace-divider", className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 pl-4", children: /* @__PURE__ */ jsx(TranscriptDivider, { label, hideLabel: true, children }) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex items-center pr-4", children: /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }) })
+  ] });
+}
 
-export { THREAD_TRACE_MESSAGES_TAB, ThreadTraceRow };
+export { THREAD_TRACE_MESSAGES_TAB, ThreadTraceDivider, ThreadTraceRow, ThreadTraceRowBody };
 //# sourceMappingURL=thread-trace-row.es.js.map

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 { MessageScrollerItem } from '@/ds/components/MessageScroller';\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/**\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\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      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      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      {/* Registers the row with the scroller so prepends of older turns keep the reading position.\n          Rows measure their own columns, so they stay rendered off screen. */}\n      <MessageScrollerItem messageId={traceId} className=\"[content-visibility:visible]\">\n        <div\n          data-slot=\"thread-trace-row\"\n          className={cn(\n            // Same fixed messages width as the trace panel; the details column takes the rest.\n            'group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100',\n            isActive || isCurrent ? 'opacity-100' : 'opacity-50',\n            className,\n          )}\n          data-trace-id={traceId}\n          data-active={isActive || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </MessageScrollerItem>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-row.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } 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 { TranscriptDivider } from '@/ds/components/ai/transcript-divider';\nimport { MessageScrollerItem } from '@/ds/components/MessageScroller';\nimport { Tabs } from '@/ds/components/Tabs';\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/**\n * One agent turn: a `ThreadTrace.Divider` (turn label + tabs) above a `ThreadTrace.RowBody` holding\n * the messages column on the left and the details card 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\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      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      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      {/* Registers the row with the scroller so prepends of older turns keep the reading position.\n          Rows measure their own columns, so they stay rendered off screen. */}\n      <MessageScrollerItem messageId={traceId} className=\"[content-visibility:visible]\">\n        {/* The row is the tabs root, so the tab list in the divider drives the messages column. */}\n        <Tabs<string>\n          defaultTab={THREAD_TRACE_MESSAGES_TAB}\n          value={tab}\n          onValueChange={setTab}\n          data-slot=\"thread-trace-row\"\n          className={cn(\n            // `overflow-visible` overrides the tabs root scroll box so the messages column stays sticky.\n            'group flex flex-col overflow-visible pb-4',\n            className,\n          )}\n          data-trace-id={traceId}\n          data-active={isActive || undefined}\n          {...props}\n        >\n          {children}\n        </Tabs>\n      </MessageScrollerItem>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n\nexport type ThreadTraceRowBodyProps = ComponentProps<'div'>;\n\n/** The two columns of a row: the messages on the left and the details card on the right, each padded on x. */\nexport function ThreadTraceRowBody({ className, ...props }: ThreadTraceRowBodyProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-row-body\"\n      className={cn('grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]', className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ThreadTraceDividerProps {\n  /** Names the turn, e.g. `Turn 1`. Used as the accessible name; not shown. */\n  label: string;\n  /** Typically the row's `ThreadTrace.TabList`. */\n  children?: ReactNode;\n}\n\n/**\n * The rule above a row: a full-width line, with its content (e.g. a trace link and tabs) centered over the messages\n * column only, so the line runs on uninterrupted above the details card.\n */\nexport function ThreadTraceDivider({ label, children }: ThreadTraceDividerProps) {\n  return (\n    <div data-slot=\"thread-trace-divider\" className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n      <div className=\"min-w-0 pl-4\">\n        <TranscriptDivider label={label} hideLabel>\n          {children}\n        </TranscriptDivider>\n      </div>\n      <div aria-hidden className=\"flex items-center pr-4\">\n        <span className=\"h-px flex-1 bg-border\" />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}