@mastra/playground-ui 60.1.0 → 60.2.0-alpha.0

package/dist/domains/traces/components/span-payload/span-processor-attributes.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const observability = require('@mastra/core/observability');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./span-payload-json.cjs.js');
 const domains_traces_components_spanPayload_spanPayloadMessages = require('./span-payload-messages.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-D0mhsndj.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-SkL3U9hR.cjs');
 const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload-registry.cjs.js');
 const Card = require('../../../../Card-BQsKHkyB.cjs');
 const dataKeysAndValues = require('../../../../data-keys-and-values-DnpdW8zx.cjs');

package/dist/domains/traces/components/span-payload/span-processor-attributes.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeProcessorPipeline } from '@mastra/core/observability';
 import { SpanPayloadJson } from './span-payload-json.es.js';
 import { SpanPayloadMessages } from './span-payload-messages.es.js';
-import { c as SpanPayloadCollapsible, S as SpanPayloadField } from '../../../../span-payload-primitives-DL1Kr0cu.js';
+import { c as SpanPayloadCollapsible, S as SpanPayloadField } from '../../../../span-payload-primitives-CGamdu2t.js';
 import { asCoreSpan } from './span-payload-registry.es.js';
 import { C as Card, a as CardContent } from '../../../../Card-DVy0QS4m.js';
 import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DiRlIt-N.js';

package/dist/domains/traces/components/span-summary-description.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
-const dataPanel = require('../../../data-panel-D7Qk4iwZ.cjs');
+const dataPanel = require('../../../data-panel-o-QLWuFV.cjs');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
 const utils_dateFormat = require('../../../utils/date-format.cjs.js');
 const utils_duration = require('../../../utils/duration.cjs.js');

package/dist/domains/traces/components/span-summary-description.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CalendarClockIcon, TimerIcon, HashIcon } from 'lucide-react';
 import { getSpanDurationMs } from '../utils/span-utils.es.js';
-import { D as DataPanel } from '../../../data-panel-DuLf5j8S.js';
+import { D as DataPanel } from '../../../data-panel-CbomKGJt.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
 import { formatDate, formatTimestampPrecise } from '../../../utils/date-format.es.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-context.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface ThreadTraceSelectedSpan {\n  traceId: string;\n  spanId: string;\n}\n\nexport interface ThreadTraceHighlight {\n  traceId: string;\n  spanIds: string[];\n}\n\nexport interface ThreadTraceContextValue {\n  traceIds: string[];\n  /** The row the reader came from (e.g. \"Open full thread\"); starts expanded and scrolls into view on mount. */\n  anchorTraceId: string | null;\n  selected: ThreadTraceSelectedSpan | null;\n  /** Select a span (opens the side panel) or pass `undefined` to close it. */\n  selectSpan: (traceId: string, spanId: string | undefined) => void;\n  /** Spans behind the message the user asked to highlight; scoped to one trace since each row has its own tree. */\n  highlight: ThreadTraceHighlight | null;\n  highlightSpans: (traceId: string, spanIds: string[]) => void;\n  /** Rows whose timeline is shown in full rather than clamped to the messages column. */\n  expandedTraceIds: ReadonlySet<string>;\n  setTraceExpanded: (traceId: string, expanded: boolean) => void;\n  /** Rows currently on screen inside the list, oldest first. */\n  visibleTraceIds: string[];\n  /** The topmost visible row. */\n  currentTraceId: string | undefined;\n  scrollToTrace: (traceId: string) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const ThreadTraceContext = createContext<ThreadTraceContextValue | null>(null);\n\nexport function useThreadTrace(): ThreadTraceContextValue {\n  const context = useContext(ThreadTraceContext);\n  if (!context) {\n    throw new Error('ThreadTrace compound components must be rendered inside <ThreadTrace>.');\n  }\n  return context;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAkCO,MAAM,kBAAA,GAAqBA,oBAA8C,IAAI;AAE7E,SAAS,cAAA,GAA0C;AACxD,EAAA,MAAM,OAAA,GAAUC,iBAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wEAAwE,CAAA;AAAA,EAC1F;AACA,EAAA,OAAO,OAAA;AACT;;;;;"}
+{"version":3,"file":"thread-trace-context.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface ThreadTraceSelectedSpan {\n  traceId: string;\n  spanId: string;\n}\n\nexport interface ThreadTraceHighlight {\n  traceId: string;\n  spanIds: string[];\n}\n\nexport interface ThreadTraceContextValue {\n  traceIds: string[];\n  selected: ThreadTraceSelectedSpan | null;\n  /** Select a span (opens the side panel) or pass `undefined` to close it. */\n  selectSpan: (traceId: string, spanId: string | undefined) => void;\n  /** Spans behind the message the user asked to highlight; scoped to one trace since each row has its own tree. */\n  highlight: ThreadTraceHighlight | null;\n  highlightSpans: (traceId: string, spanIds: string[]) => void;\n  /** Rows whose timeline is shown in full rather than clamped to the messages column. */\n  expandedTraceIds: ReadonlySet<string>;\n  setTraceExpanded: (traceId: string, expanded: boolean) => void;\n  /** Rows currently on screen inside the list, oldest first. */\n  visibleTraceIds: string[];\n  /** The topmost visible row. */\n  currentTraceId: string | undefined;\n  scrollToTrace: (traceId: string) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const ThreadTraceContext = createContext<ThreadTraceContextValue | null>(null);\n\nexport function useThreadTrace(): ThreadTraceContextValue {\n  const context = useContext(ThreadTraceContext);\n  if (!context) {\n    throw new Error('ThreadTrace compound components must be rendered inside <ThreadTrace>.');\n  }\n  return context;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAgCO,MAAM,kBAAA,GAAqBA,oBAA8C,IAAI;AAE7E,SAAS,cAAA,GAA0C;AACxD,EAAA,MAAM,OAAA,GAAUC,iBAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wEAAwE,CAAA;AAAA,EAC1F;AACA,EAAA,OAAO,OAAA;AACT;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-context.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface ThreadTraceSelectedSpan {\n  traceId: string;\n  spanId: string;\n}\n\nexport interface ThreadTraceHighlight {\n  traceId: string;\n  spanIds: string[];\n}\n\nexport interface ThreadTraceContextValue {\n  traceIds: string[];\n  /** The row the reader came from (e.g. \"Open full thread\"); starts expanded and scrolls into view on mount. */\n  anchorTraceId: string | null;\n  selected: ThreadTraceSelectedSpan | null;\n  /** Select a span (opens the side panel) or pass `undefined` to close it. */\n  selectSpan: (traceId: string, spanId: string | undefined) => void;\n  /** Spans behind the message the user asked to highlight; scoped to one trace since each row has its own tree. */\n  highlight: ThreadTraceHighlight | null;\n  highlightSpans: (traceId: string, spanIds: string[]) => void;\n  /** Rows whose timeline is shown in full rather than clamped to the messages column. */\n  expandedTraceIds: ReadonlySet<string>;\n  setTraceExpanded: (traceId: string, expanded: boolean) => void;\n  /** Rows currently on screen inside the list, oldest first. */\n  visibleTraceIds: string[];\n  /** The topmost visible row. */\n  currentTraceId: string | undefined;\n  scrollToTrace: (traceId: string) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const ThreadTraceContext = createContext<ThreadTraceContextValue | null>(null);\n\nexport function useThreadTrace(): ThreadTraceContextValue {\n  const context = useContext(ThreadTraceContext);\n  if (!context) {\n    throw new Error('ThreadTrace compound components must be rendered inside <ThreadTrace>.');\n  }\n  return context;\n}\n"],"names":[],"mappings":";;AAkCO,MAAM,kBAAA,GAAqB,cAA8C,IAAI;AAE7E,SAAS,cAAA,GAA0C;AACxD,EAAA,MAAM,OAAA,GAAU,WAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wEAAwE,CAAA;AAAA,EAC1F;AACA,EAAA,OAAO,OAAA;AACT;;;;"}
+{"version":3,"file":"thread-trace-context.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface ThreadTraceSelectedSpan {\n  traceId: string;\n  spanId: string;\n}\n\nexport interface ThreadTraceHighlight {\n  traceId: string;\n  spanIds: string[];\n}\n\nexport interface ThreadTraceContextValue {\n  traceIds: string[];\n  selected: ThreadTraceSelectedSpan | null;\n  /** Select a span (opens the side panel) or pass `undefined` to close it. */\n  selectSpan: (traceId: string, spanId: string | undefined) => void;\n  /** Spans behind the message the user asked to highlight; scoped to one trace since each row has its own tree. */\n  highlight: ThreadTraceHighlight | null;\n  highlightSpans: (traceId: string, spanIds: string[]) => void;\n  /** Rows whose timeline is shown in full rather than clamped to the messages column. */\n  expandedTraceIds: ReadonlySet<string>;\n  setTraceExpanded: (traceId: string, expanded: boolean) => void;\n  /** Rows currently on screen inside the list, oldest first. */\n  visibleTraceIds: string[];\n  /** The topmost visible row. */\n  currentTraceId: string | undefined;\n  scrollToTrace: (traceId: string) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const ThreadTraceContext = createContext<ThreadTraceContextValue | null>(null);\n\nexport function useThreadTrace(): ThreadTraceContextValue {\n  const context = useContext(ThreadTraceContext);\n  if (!context) {\n    throw new Error('ThreadTrace compound components must be rendered inside <ThreadTrace>.');\n  }\n  return context;\n}\n"],"names":[],"mappings":";;AAgCO,MAAM,kBAAA,GAAqB,cAA8C,IAAI;AAE7E,SAAS,cAAA,GAA0C;AACxD,EAAA,MAAM,OAAA,GAAU,WAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wEAAwE,CAAA;AAAA,EAC1F;AACA,EAAA,OAAO,OAAA;AACT;;;;"}

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

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

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

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

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

@@ -4,20 +4,19 @@ 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 messageScroller = require('../../../../message-scroller-E05PLPmT.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScroller, { "data-slot": "thread-trace-list", className: utils_cn.cn("min-h-0", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScrollerViewport, { ref: listRef, className: "overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+    messageScroller.MessageScrollerContent,
     {
-      ref: listRef,
-      "data-slot": "thread-trace-list",
-      className: utils_cn.cn("min-h-0 overflow-x-hidden overflow-y-auto", className),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace-list-inner", className: utils_cn.cn("relative min-h-full", innerClassName), children })
+      "data-slot": "thread-trace-list-inner",
+      className: utils_cn.cn("relative min-h-full gap-0", 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\n      ref={listRef}\n      data-slot=\"thread-trace-list\"\n      className={cn('min-h-0 overflow-x-hidden overflow-y-auto', className)}\n      {...props}\n    >\n      <div data-slot=\"thread-trace-list-inner\" className={cn('relative min-h-full', innerClassName)}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["useThreadTrace","jsx","cn"],"mappings":";;;;;;;;AAWO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIA,uEAAA,EAAe;AACnC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA;AAAA,MACnE,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,WAAWC,WAAA,CAAG,qBAAA,EAAuB,cAAc,CAAA,EACzF,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"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 { MessageScroller, MessageScrollerContent, MessageScrollerViewport } from '@/ds/components/MessageScroller';\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    <MessageScroller data-slot=\"thread-trace-list\" className={cn('min-h-0', className)} {...props}>\n      <MessageScrollerViewport ref={listRef} className=\"overflow-x-hidden\">\n        <MessageScrollerContent\n          data-slot=\"thread-trace-list-inner\"\n          className={cn('relative min-h-full gap-0', innerClassName)}\n        >\n          {children}\n        </MessageScrollerContent>\n      </MessageScrollerViewport>\n    </MessageScroller>\n  );\n}\n"],"names":["useThreadTrace","MessageScroller","cn","jsx","MessageScrollerViewport","MessageScrollerContent"],"mappings":";;;;;;;;;AAYO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIA,uEAAA,EAAe;AACnC,EAAA,sCACGC,+BAAA,EAAA,EAAgB,WAAA,EAAU,mBAAA,EAAoB,SAAA,EAAWC,YAAG,SAAA,EAAW,SAAS,CAAA,EAAI,GAAG,OACtF,QAAA,kBAAAC,cAAA,CAACC,uCAAA,EAAA,EAAwB,GAAA,EAAK,OAAA,EAAS,WAAU,mBAAA,EAC/C,QAAA,kBAAAD,cAAA;AAAA,IAACE,sCAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAWH,WAAA,CAAG,2BAAA,EAA6B,cAAc,CAAA;AAAA,MAExD;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,19 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { useThreadTrace } from './thread-trace-context.es.js';
+import { M as MessageScroller, e as MessageScrollerViewport, b as MessageScrollerContent } from '../../../../message-scroller-CiFr8MwT.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = useThreadTrace();
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx(MessageScroller, { "data-slot": "thread-trace-list", className: cn("min-h-0", className), ...props, children: /* @__PURE__ */ jsx(MessageScrollerViewport, { ref: listRef, className: "overflow-x-hidden", children: /* @__PURE__ */ jsx(
+    MessageScrollerContent,
     {
-      ref: listRef,
-      "data-slot": "thread-trace-list",
-      className: cn("min-h-0 overflow-x-hidden overflow-y-auto", className),
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace-list-inner", className: cn("relative min-h-full", innerClassName), children })
+      "data-slot": "thread-trace-list-inner",
+      className: cn("relative min-h-full gap-0", 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\n      ref={listRef}\n      data-slot=\"thread-trace-list\"\n      className={cn('min-h-0 overflow-x-hidden overflow-y-auto', className)}\n      {...props}\n    >\n      <div data-slot=\"thread-trace-list-inner\" className={cn('relative min-h-full', innerClassName)}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAWO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,cAAA,EAAe;AACnC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA;AAAA,MACnE,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,WAAW,EAAA,CAAG,qBAAA,EAAuB,cAAc,CAAA,EACzF,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"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 { MessageScroller, MessageScrollerContent, MessageScrollerViewport } from '@/ds/components/MessageScroller';\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    <MessageScroller data-slot=\"thread-trace-list\" className={cn('min-h-0', className)} {...props}>\n      <MessageScrollerViewport ref={listRef} className=\"overflow-x-hidden\">\n        <MessageScrollerContent\n          data-slot=\"thread-trace-list-inner\"\n          className={cn('relative min-h-full gap-0', innerClassName)}\n        >\n          {children}\n        </MessageScrollerContent>\n      </MessageScrollerViewport>\n    </MessageScroller>\n  );\n}\n"],"names":[],"mappings":";;;;;AAYO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,cAAA,EAAe;AACnC,EAAA,2BACG,eAAA,EAAA,EAAgB,WAAA,EAAU,mBAAA,EAAoB,SAAA,EAAW,GAAG,SAAA,EAAW,SAAS,CAAA,EAAI,GAAG,OACtF,QAAA,kBAAA,GAAA,CAAC,uBAAA,EAAA,EAAwB,GAAA,EAAK,OAAA,EAAS,WAAU,mBAAA,EAC/C,QAAA,kBAAA,GAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,cAAc,CAAA;AAAA,MAExD;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -5,7 +5,7 @@ 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-D7Qk4iwZ.cjs');
+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');

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

@@ -1,7 +1,7 @@
 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-DuLf5j8S.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';

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

@@ -6,11 +6,12 @@ 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 utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceRoot({
   traceIds,
-  anchorTraceId,
+  onLoadOlder,
   onSelectedSpanChange,
   className,
   children,
@@ -20,8 +21,7 @@ function ThreadTraceRoot({
   const { visibleTraceIds, currentTraceId } = domains_traces_hooks_useVisibleTraceRows.useVisibleTraceRows(listRef, traceIds);
   const [selected, setSelected] = React.useState(null);
   const [highlight, setHighlight] = React.useState(null);
-  const [anchor] = React.useState(() => anchorTraceId ?? null);
-  const [expandedTraceIds, setExpandedTraceIds] = React.useState(() => new Set(anchor ? [anchor] : []));
+  const [expandedTraceIds, setExpandedTraceIds] = React.useState(() => /* @__PURE__ */ new Set());
   const setTraceExpanded = React.useCallback((traceId, expanded) => {
     setExpandedTraceIds((current) => {
       if (current.has(traceId) === expanded) return current;
@@ -64,7 +64,6 @@ function ThreadTraceRoot({
   const contextValue = React.useMemo(
     () => ({
       traceIds,
-      anchorTraceId: anchor,
       selected,
       selectSpan,
       highlight,
@@ -78,7 +77,6 @@ function ThreadTraceRoot({
     }),
     [
       traceIds,
-      anchor,
       selected,
       selectSpan,
       highlight,
@@ -91,18 +89,27 @@ function ThreadTraceRoot({
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace_threadTraceContext.ThreadTraceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    messageScroller.MessageScrollerProvider,
     {
-      "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
+      defaultScrollPosition: "end",
+      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
+        }
+      )
     }
   ) });
 }

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

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

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

@@ -2,11 +2,12 @@ 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 { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceRoot({
   traceIds,
-  anchorTraceId,
+  onLoadOlder,
   onSelectedSpanChange,
   className,
   children,
@@ -16,8 +17,7 @@ function ThreadTraceRoot({
   const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);
   const [selected, setSelected] = useState(null);
   const [highlight, setHighlight] = useState(null);
-  const [anchor] = useState(() => anchorTraceId ?? null);
-  const [expandedTraceIds, setExpandedTraceIds] = useState(() => new Set(anchor ? [anchor] : []));
+  const [expandedTraceIds, setExpandedTraceIds] = useState(() => /* @__PURE__ */ new Set());
   const setTraceExpanded = useCallback((traceId, expanded) => {
     setExpandedTraceIds((current) => {
       if (current.has(traceId) === expanded) return current;
@@ -60,7 +60,6 @@ function ThreadTraceRoot({
   const contextValue = useMemo(
     () => ({
       traceIds,
-      anchorTraceId: anchor,
       selected,
       selectSpan,
       highlight,
@@ -74,7 +73,6 @@ function ThreadTraceRoot({
     }),
     [
       traceIds,
-      anchor,
       selected,
       selectSpan,
       highlight,
@@ -87,18 +85,27 @@ function ThreadTraceRoot({
     ]
   );
   return /* @__PURE__ */ jsx(ThreadTraceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
+    MessageScrollerProvider,
     {
-      "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
+      defaultScrollPosition: "end",
+      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
+        }
+      )
     }
   ) });
 }

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

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

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  /** 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;;;;;"}
+{"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  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":";;;;;;AA6BO,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  /** 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;;;;"}
+{"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  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":";;AA6BO,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;;;;"}

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

@@ -6,13 +6,11 @@ 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 hooks_useMeasuredAutoHeight = require('../../../../hooks/use-measured-auto-height.cjs.js');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 const THREAD_TRACE_MESSAGES_TAB = "messages";
-const scrollIntoViewOnMount = (row) => {
-  row?.scrollIntoView({ block: "start" });
-};
 function ThreadTraceRow({ traceId, className, children, ...props }) {
   const root = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
   const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : void 0;
@@ -21,7 +19,6 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
   const isActive = selectedSpanId !== void 0;
   const isCurrent = root.currentTraceId === traceId;
   const isExpanded = root.expandedTraceIds.has(traceId);
-  const isAnchor = root.anchorTraceId === traceId;
   const messages = hooks_useMeasuredAutoHeight.useMeasuredAutoHeight();
   const timeline = hooks_useMeasuredAutoHeight.useMeasuredAutoHeight();
   const detailsHeader = hooks_useMeasuredAutoHeight.useMeasuredAutoHeight();
@@ -45,7 +42,6 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
       isActive,
       isCurrent,
       isExpanded,
-      isAnchor,
       selectedSpanId,
       featuredSpanIds,
       revealSpanId,
@@ -65,7 +61,6 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
       isActive,
       isCurrent,
       isExpanded,
-      isAnchor,
       selectedSpanId,
       featuredSpanIds,
       revealSpanId,
@@ -80,7 +75,7 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
       detailsHeader.height
     ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace_threadTraceRowContext.ThreadTraceRowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+  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",
     {
       "data-slot": "thread-trace-row",
@@ -92,11 +87,10 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
       ),
       "data-trace-id": traceId,
       "data-active": isActive || void 0,
-      ref: isAnchor ? scrollIntoViewOnMount : void 0,
       ...props,
       children
     }
-  ) });
+  ) }) });
 }
 
 exports.THREAD_TRACE_MESSAGES_TAB = THREAD_TRACE_MESSAGES_TAB;

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

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