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

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

@@ -7,13 +7,13 @@ const React = require('react');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
 const hooks_useMeasuredAutoHeight = require('../../../../hooks/use-measured-auto-height.cjs.js');
-const utils_cn = require('../../../../cn-DnbTIGXa.cjs');
+const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
 
-const THREAD_TRACE_SPANS_TAB = "spans";
+const THREAD_TRACE_MESSAGES_TAB = "messages";
 const scrollIntoViewOnMount = (row) => {
   row?.scrollIntoView({ block: "start" });
 };
-function ThreadTraceRow({ traceId, isFirst = false, className, children, ...props }) {
+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;
   const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : void 0;
@@ -25,13 +25,14 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
   const messages = hooks_useMeasuredAutoHeight.useMeasuredAutoHeight();
   const timeline = hooks_useMeasuredAutoHeight.useMeasuredAutoHeight();
   const detailsHeader = hooks_useMeasuredAutoHeight.useMeasuredAutoHeight();
-  const [tab, setTab] = React.useState(THREAD_TRACE_SPANS_TAB);
+  const [tab, setTab] = React.useState(THREAD_TRACE_MESSAGES_TAB);
+  const [messagesViewHeight, setMessagesViewHeight] = React.useState(null);
+  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {
+    setMessagesViewHeight(messages.height);
+  }
   const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;
   const highlightSpans = React.useCallback(
-    (spanIds) => {
-      setTab(THREAD_TRACE_SPANS_TAB);
-      rootHighlightSpans(traceId, spanIds);
-    },
+    (spanIds) => rootHighlightSpans(traceId, spanIds),
     [rootHighlightSpans, traceId]
   );
   const setExpanded = React.useCallback(
@@ -41,7 +42,6 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
   const contextValue = React.useMemo(
     () => ({
       traceId,
-      isFirst,
       isActive,
       isCurrent,
       isExpanded,
@@ -56,13 +56,12 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
       messagesRef: messages.ref,
       timelineRef: timeline.ref,
       detailsHeaderRef: detailsHeader.ref,
-      messagesHeight: messages.height,
+      messagesHeight: messagesViewHeight,
       timelineHeight: timeline.height,
       detailsHeaderHeight: detailsHeader.height
     }),
     [
       traceId,
-      isFirst,
       isActive,
       isCurrent,
       isExpanded,
@@ -76,7 +75,7 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
       messages.ref,
       timeline.ref,
       detailsHeader.ref,
-      messages.height,
+      messagesViewHeight,
       timeline.height,
       detailsHeader.height
     ]
@@ -86,7 +85,8 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
     {
       "data-slot": "thread-trace-row",
       className: utils_cn.cn(
-        "group grid grid-cols-[1fr_1fr] pr-4 pl-14 transition-opacity hover:opacity-100",
+        // Same fixed messages width as the trace panel; the details column takes the rest.
+        "group grid grid-cols-[24rem_minmax(0,1fr)] border-b border-border1 pr-4 pl-14 transition-opacity hover:opacity-100",
         isActive || isCurrent ? "opacity-100" : "opacity-50",
         className
       ),
@@ -99,6 +99,6 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
   ) });
 }
 
-exports.THREAD_TRACE_SPANS_TAB = THREAD_TRACE_SPANS_TAB;
+exports.THREAD_TRACE_MESSAGES_TAB = THREAD_TRACE_MESSAGES_TAB;
 exports.ThreadTraceRow = ThreadTraceRow;
 //# sourceMappingURL=thread-trace-row.cjs.js.map

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

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

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

@@ -3,13 +3,13 @@ import { useState, useCallback, useMemo } from 'react';
 import { useThreadTrace } from './thread-trace-context.es.js';
 import { ThreadTraceRowContext } from './thread-trace-row-context.es.js';
 import { useMeasuredAutoHeight } from '../../../../hooks/use-measured-auto-height.es.js';
-import { c as cn } from '../../../../cn-ByEbywDh.js';
+import { c as cn } from '../../../../cn-C6s2yXwM.js';
 
-const THREAD_TRACE_SPANS_TAB = "spans";
+const THREAD_TRACE_MESSAGES_TAB = "messages";
 const scrollIntoViewOnMount = (row) => {
   row?.scrollIntoView({ block: "start" });
 };
-function ThreadTraceRow({ traceId, isFirst = false, className, children, ...props }) {
+function ThreadTraceRow({ traceId, className, children, ...props }) {
   const root = useThreadTrace();
   const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : void 0;
   const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : void 0;
@@ -21,13 +21,14 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
   const messages = useMeasuredAutoHeight();
   const timeline = useMeasuredAutoHeight();
   const detailsHeader = useMeasuredAutoHeight();
-  const [tab, setTab] = useState(THREAD_TRACE_SPANS_TAB);
+  const [tab, setTab] = useState(THREAD_TRACE_MESSAGES_TAB);
+  const [messagesViewHeight, setMessagesViewHeight] = useState(null);
+  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {
+    setMessagesViewHeight(messages.height);
+  }
   const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;
   const highlightSpans = useCallback(
-    (spanIds) => {
-      setTab(THREAD_TRACE_SPANS_TAB);
-      rootHighlightSpans(traceId, spanIds);
-    },
+    (spanIds) => rootHighlightSpans(traceId, spanIds),
     [rootHighlightSpans, traceId]
   );
   const setExpanded = useCallback(
@@ -37,7 +38,6 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
   const contextValue = useMemo(
     () => ({
       traceId,
-      isFirst,
       isActive,
       isCurrent,
       isExpanded,
@@ -52,13 +52,12 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
       messagesRef: messages.ref,
       timelineRef: timeline.ref,
       detailsHeaderRef: detailsHeader.ref,
-      messagesHeight: messages.height,
+      messagesHeight: messagesViewHeight,
       timelineHeight: timeline.height,
       detailsHeaderHeight: detailsHeader.height
     }),
     [
       traceId,
-      isFirst,
       isActive,
       isCurrent,
       isExpanded,
@@ -72,7 +71,7 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
       messages.ref,
       timeline.ref,
       detailsHeader.ref,
-      messages.height,
+      messagesViewHeight,
       timeline.height,
       detailsHeader.height
     ]
@@ -82,7 +81,8 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
     {
       "data-slot": "thread-trace-row",
       className: cn(
-        "group grid grid-cols-[1fr_1fr] pr-4 pl-14 transition-opacity hover:opacity-100",
+        // Same fixed messages width as the trace panel; the details column takes the rest.
+        "group grid grid-cols-[24rem_minmax(0,1fr)] border-b border-border1 pr-4 pl-14 transition-opacity hover:opacity-100",
         isActive || isCurrent ? "opacity-100" : "opacity-50",
         className
       ),
@@ -95,5 +95,5 @@ function ThreadTraceRow({ traceId, isFirst = false, className, children, ...prop
   ) });
 }
 
-export { THREAD_TRACE_SPANS_TAB, ThreadTraceRow };
+export { THREAD_TRACE_MESSAGES_TAB, ThreadTraceRow };
 //# sourceMappingURL=thread-trace-row.es.js.map

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

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

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

@@ -8,32 +8,52 @@ const domains_traces_hooks_useTraceSpanNavigation = require('../../hooks/use-tra
 const domains_traces_hooks_useTraceSpans = require('../../hooks/use-trace-spans.cjs.js');
 const domains_traces_components_spanDataPanelView = require('../span-data-panel-view.cjs.js');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
-const utils_cn = require('../../../../cn-DnbTIGXa.cjs');
+const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
 
-function ThreadTraceSpanPanel(props) {
+function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
   const { selected } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
-  if (!selected) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectedSpanPanel, { traceId: selected.traceId, spanId: selected.spanId, ...props }, selected.traceId);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "thread-trace-span-panel",
+      className: utils_cn.cn(
+        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
+        "flex min-h-0 min-w-0 flex-col overflow-hidden",
+        selected && "animate-in border-l border-border1 duration-300 fade-in-0",
+        className
+      ),
+      ...props,
+      children: selected && // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SelectedSpanPanel,
+        {
+          traceId: selected.traceId,
+          spanId: selected.spanId,
+          panelClassName
+        },
+        selected.traceId
+      )
+    }
+  );
 }
-function SelectedSpanPanel({ traceId, spanId, className, panelClassName, ...props }) {
+function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
   const { selectSpan } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
   const onSpanSelect = (nextSpanId) => selectSpan(traceId, nextSpanId);
   const { data: spanDetailData, isLoading } = domains_traces_hooks_useSpanDetail.useSpanDetail(traceId, spanId);
   const { data: traceData } = domains_traces_hooks_useTraceSpans.useTraceSpans(traceId);
   const { handlePreviousSpan, handleNextSpan } = domains_traces_hooks_useTraceSpanNavigation.useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace-span-panel", className: utils_cn.cn("min-h-0 min-w-0 pr-4 pb-4", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     domains_traces_components_spanDataPanelView.SpanDataPanelView,
     {
-      className: utils_cn.cn("h-full", panelClassName),
+      className: panelClassName,
       traceId,
       spanId,
       span: spanDetailData?.span,
       isLoading,
-      onClose: () => onSpanSelect(void 0),
       onPrevious: handlePreviousSpan,
       onNext: handleNextSpan
     }
-  ) });
+  );
 }
 
 exports.ThreadTraceSpanPanel = ThreadTraceSpanPanel;

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

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

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

@@ -4,32 +4,52 @@ import { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation.es
 import { useTraceSpans } from '../../hooks/use-trace-spans.es.js';
 import { SpanDataPanelView } from '../span-data-panel-view.es.js';
 import { useThreadTrace } from './thread-trace-context.es.js';
-import { c as cn } from '../../../../cn-ByEbywDh.js';
+import { c as cn } from '../../../../cn-C6s2yXwM.js';
 
-function ThreadTraceSpanPanel(props) {
+function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
   const { selected } = useThreadTrace();
-  if (!selected) return null;
-  return /* @__PURE__ */ jsx(SelectedSpanPanel, { traceId: selected.traceId, spanId: selected.spanId, ...props }, selected.traceId);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "thread-trace-span-panel",
+      className: cn(
+        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
+        "flex min-h-0 min-w-0 flex-col overflow-hidden",
+        selected && "animate-in border-l border-border1 duration-300 fade-in-0",
+        className
+      ),
+      ...props,
+      children: selected && // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.
+      /* @__PURE__ */ jsx(
+        SelectedSpanPanel,
+        {
+          traceId: selected.traceId,
+          spanId: selected.spanId,
+          panelClassName
+        },
+        selected.traceId
+      )
+    }
+  );
 }
-function SelectedSpanPanel({ traceId, spanId, className, panelClassName, ...props }) {
+function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
   const { selectSpan } = useThreadTrace();
   const onSpanSelect = (nextSpanId) => selectSpan(traceId, nextSpanId);
   const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);
   const { data: traceData } = useTraceSpans(traceId);
   const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);
-  return /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace-span-panel", className: cn("min-h-0 min-w-0 pr-4 pb-4", className), ...props, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     SpanDataPanelView,
     {
-      className: cn("h-full", panelClassName),
+      className: panelClassName,
       traceId,
       spanId,
       span: spanDetailData?.span,
       isLoading,
-      onClose: () => onSpanSelect(void 0),
       onPrevious: handlePreviousSpan,
       onNext: handleNextSpan
     }
-  ) });
+  );
 }
 
 export { ThreadTraceSpanPanel };

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

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

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

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const domains_traces_hooks_useExpandedSpanIds = require('../../hooks/use-expanded-span-ids.cjs.js');
+const domains_traces_hooks_useTraceSpans = require('../../hooks/use-trace-spans.cjs.js');
+const domains_traces_components_formatHierarchicalSpans = require('../format-hierarchical-spans.cjs.js');
+const domains_traces_components_traceSpanTree = require('../trace-span-tree.cjs.js');
+const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
+const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
+const Button = require('../../../../Button-C2dx_QZN.cjs');
+const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
+
+function ThreadTraceSpans({ className, timelineClassName, ...props }) {
+  const { selectSpan } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
+  const {
+    traceId,
+    isActive,
+    isExpanded,
+    selectedSpanId,
+    featuredSpanIds,
+    revealSpanId,
+    setExpanded,
+    timelineRef,
+    messagesHeight,
+    timelineHeight,
+    detailsHeaderHeight
+  } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
+  const { data, isLoading } = domains_traces_hooks_useTraceSpans.useTraceSpans(traceId, { passive: true });
+  const hierarchicalSpans = React.useMemo(() => domains_traces_components_formatHierarchicalSpans.formatHierarchicalSpans(data?.spans ?? []), [data]);
+  const { expandedSpanIds, setExpandedSpanIds } = domains_traces_hooks_useExpandedSpanIds.useExpandedSpanIds(hierarchicalSpans);
+  const timelineBudget = messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;
+  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;
+  const isClamped = overflows && !isExpanded;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "thread-trace-spans",
+        className: utils_cn.cn("relative overflow-hidden", className),
+        style: !isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : void 0,
+        "data-testid": "trace-row-timeline",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timelineRef, className: utils_cn.cn("px-4 pt-2 pb-4", timelineClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+            domains_traces_components_traceSpanTree.TraceSpanTree,
+            {
+              hierarchicalSpans,
+              selectedSpanId,
+              featuredSpanIds,
+              revealSpanId,
+              onSpanClick: (id) => selectSpan(traceId, selectedSpanId === id ? void 0 : id),
+              expandedSpanIds,
+              setExpandedSpanIds,
+              isLoading
+            }
+          ) }),
+          overflows && isClamped && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "from-surface1 via-surface1/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
+        ]
+      }
+    ),
+    overflows && !isClamped && !isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(false), children: "Show less" }) })
+  ] });
+}
+
+exports.ThreadTraceSpans = ThreadTraceSpans;
+//# sourceMappingURL=thread-trace-spans.cjs.js.map

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

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

package/dist/domains/traces/components/thread-trace/thread-trace-spans.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../../src/domains/traces/components/thread-trace/thread-trace-spans'
+export {}

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

@@ -0,0 +1,66 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useMemo } from 'react';
+import { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids.es.js';
+import { useTraceSpans } from '../../hooks/use-trace-spans.es.js';
+import { formatHierarchicalSpans } from '../format-hierarchical-spans.es.js';
+import { TraceSpanTree } from '../trace-span-tree.es.js';
+import { useThreadTrace } from './thread-trace-context.es.js';
+import { useThreadTraceRow } from './thread-trace-row-context.es.js';
+import { B as Button } from '../../../../Button-DS6O6fvU.js';
+import { c as cn } from '../../../../cn-C6s2yXwM.js';
+
+function ThreadTraceSpans({ className, timelineClassName, ...props }) {
+  const { selectSpan } = useThreadTrace();
+  const {
+    traceId,
+    isActive,
+    isExpanded,
+    selectedSpanId,
+    featuredSpanIds,
+    revealSpanId,
+    setExpanded,
+    timelineRef,
+    messagesHeight,
+    timelineHeight,
+    detailsHeaderHeight
+  } = useThreadTraceRow();
+  const { data, isLoading } = useTraceSpans(traceId, { passive: true });
+  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);
+  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);
+  const timelineBudget = messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;
+  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;
+  const isClamped = overflows && !isExpanded;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "thread-trace-spans",
+        className: cn("relative overflow-hidden", className),
+        style: !isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : void 0,
+        "data-testid": "trace-row-timeline",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: timelineRef, className: cn("px-4 pt-2 pb-4", timelineClassName), children: /* @__PURE__ */ jsx(
+            TraceSpanTree,
+            {
+              hierarchicalSpans,
+              selectedSpanId,
+              featuredSpanIds,
+              revealSpanId,
+              onSpanClick: (id) => selectSpan(traceId, selectedSpanId === id ? void 0 : id),
+              expandedSpanIds,
+              setExpandedSpanIds,
+              isLoading
+            }
+          ) }),
+          overflows && isClamped && /* @__PURE__ */ jsx("div", { className: "from-surface1 via-surface1/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
+        ]
+      }
+    ),
+    overflows && !isClamped && !isActive && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ChevronUp, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(false), children: "Show less" }) })
+  ] });
+}
+
+export { ThreadTraceSpans };
+//# sourceMappingURL=thread-trace-spans.es.js.map

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

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