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

package/dist/domains/traces/components/span-payload/span-output-renderers.es.js

@@ -2,10 +2,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeSpanOutput } from '@mastra/core/observability';
 import { SpanPayloadAttachment } from './span-payload-attachment.es.js';
 import { SpanPayloadJson } from './span-payload-json.es.js';
-import { a as SpanPayloadMarkdown, S as SpanPayloadField, b as SpanPayloadToolCalls, c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-DL1Kr0cu.js';
+import { a as SpanPayloadMarkdown, S as SpanPayloadField, b as SpanPayloadToolCalls, c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-CGamdu2t.js';
 import { SpanPayloadProcessor } from './span-payload-processor.es.js';
 import { asCoreSpan, pickRenderer, hasItems } from './span-payload-registry.es.js';
-import { R as ReasoningActivity } from '../../../../reasoning-activity-OM1-hbCV.js';
+import { R as ReasoningActivity } from '../../../../reasoning-activity-6VkIbDT4.js';
 import { C as Card, a as CardContent } from '../../../../Card-DVy0QS4m.js';
 import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DiRlIt-N.js';
 import { I as InlineCode } from '../../../../inline-code-BW6W121s.js';

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_spanPayload_spanPayloadAttachment = require('./span-payload-attachment.cjs.js');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./span-payload-json.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-D0mhsndj.cjs');
-const reasoningActivity = require('../../../../reasoning-activity-BVviIdMe.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-SkL3U9hR.cjs');
+const reasoningActivity = require('../../../../reasoning-activity-DaXMgyr3.cjs');
 const message = require('../../../../message-C1c5oZE7.cjs');
 
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { SpanPayloadAttachment } from './span-payload-attachment.es.js';
 import { SpanPayloadJson } from './span-payload-json.es.js';
-import { d as SpanPayloadLabel, a as SpanPayloadMarkdown, e as SpanPayloadTool } from '../../../../span-payload-primitives-DL1Kr0cu.js';
-import { R as ReasoningActivity } from '../../../../reasoning-activity-OM1-hbCV.js';
+import { d as SpanPayloadLabel, a as SpanPayloadMarkdown, e as SpanPayloadTool } from '../../../../span-payload-primitives-CGamdu2t.js';
+import { R as ReasoningActivity } from '../../../../reasoning-activity-6VkIbDT4.js';
 import { a as Message } from '../../../../message-C7hocqft.js';
 
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('react/jsx-runtime');
 require('lucide-react');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-D0mhsndj.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-SkL3U9hR.cjs');
 require('../../../../collapsible-jfzzU7Gp.cjs');
-require('../../../../markdown-renderer-CZV6neya.cjs');
+require('../../../../markdown-renderer-DPwN7Vtm.cjs');
 
 
 

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

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'lucide-react';
-export { c as SpanPayloadCollapsible, S as SpanPayloadField, d as SpanPayloadLabel, a as SpanPayloadMarkdown, b as SpanPayloadToolCalls } from '../../../../span-payload-primitives-DL1Kr0cu.js';
+export { c as SpanPayloadCollapsible, S as SpanPayloadField, d as SpanPayloadLabel, a as SpanPayloadMarkdown, b as SpanPayloadToolCalls } from '../../../../span-payload-primitives-CGamdu2t.js';
 import '../../../../collapsible-BNUn4644.js';
-import '../../../../markdown-renderer-Cy7Iwy1c.js';
+import '../../../../markdown-renderer-zvB6a8uj.js';
 //# sourceMappingURL=span-payload-primitives.es.js.map

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

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 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 dataKeysAndValues = require('../../../../data-keys-and-values-DnpdW8zx.cjs');
 

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { SpanPayloadJson } from './span-payload-json.es.js';
 import { SpanPayloadMessages } from './span-payload-messages.es.js';
-import { S as SpanPayloadField, b as SpanPayloadToolCalls, a as SpanPayloadMarkdown, c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-DL1Kr0cu.js';
+import { S as SpanPayloadField, b as SpanPayloadToolCalls, a as SpanPayloadMarkdown, c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-CGamdu2t.js';
 import { hasItems } from './span-payload-registry.es.js';
 import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DiRlIt-N.js';
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('react/jsx-runtime');
 require('./span-payload-json.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');
 require('../../../chat/components/badge-wrapper.cjs.js');
 require('../../../../activity-CbQG59Oc.cjs');
 require('../../../../tool-presentation-WLS6d1ws.cjs');

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

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import './span-payload-json.es.js';
-export { e as SpanPayloadTool } from '../../../../span-payload-primitives-DL1Kr0cu.js';
+export { e as SpanPayloadTool } from '../../../../span-payload-primitives-CGamdu2t.js';
 import '../../../chat/components/badge-wrapper.es.js';
 import '../../../../activity-BoXbE4Kz.js';
 import '../../../../tool-presentation-BXAo24Ir.js';

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;;;;"}