@mastra/playground-ui 61.0.0-alpha.6 → 61.0.0

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

@@ -89,16 +89,7 @@ function ThreadTraceRoot({
       scrollToTrace
     ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace_threadTraceContext.ThreadTraceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    messageScroller.MessageScrollerProvider,
-    {
-      defaultScrollPosition: "end",
-      autoScroll: true,
-      preserveScrollOnPrepend: true,
-      onReachStart: onLoadOlder,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace", className: utils_cn.cn("flex h-full min-h-0", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(resize_panelGroup.PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children }) })
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace_threadTraceContext.ThreadTraceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScrollerProvider, { defaultScrollPosition: "end", preserveScrollOnPrepend: true, onReachStart: onLoadOlder, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace", className: utils_cn.cn("flex h-full min-h-0", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(resize_panelGroup.PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children }) }) }) });
 }
 
 exports.ThreadTraceRoot = ThreadTraceRoot;

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-root.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the resizable panel group that\n * gains a span column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Collapse\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div data-slot=\"thread-trace\" className={cn('flex h-full min-h-0', className)} {...props}>\n          <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n            {children}\n          </PanelGroup>\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","MessageScrollerProvider","cn","PanelGroup"],"mappings":"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"}
+{"version":3,"file":"thread-trace-root.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the resizable panel group that\n * gains a span column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Collapse\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      {/* Opens on the latest turn and keeps the reading position when older turns are prepended.\n          No auto-follow: turns are settled before mount, so the only growth at the end comes from\n          the reader expanding a row, which must not move the view. */}\n      <MessageScrollerProvider defaultScrollPosition=\"end\" preserveScrollOnPrepend onReachStart={onLoadOlder}>\n        <div data-slot=\"thread-trace\" className={cn('flex h-full min-h-0', className)} {...props}>\n          <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n            {children}\n          </PanelGroup>\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","MessageScrollerProvider","cn","PanelGroup"],"mappings":"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"}

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

@@ -85,16 +85,7 @@ function ThreadTraceRoot({
       scrollToTrace
     ]
   );
-  return /* @__PURE__ */ jsx(ThreadTraceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    MessageScrollerProvider,
-    {
-      defaultScrollPosition: "end",
-      autoScroll: true,
-      preserveScrollOnPrepend: true,
-      onReachStart: onLoadOlder,
-      children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace", className: cn("flex h-full min-h-0", className), ...props, children: /* @__PURE__ */ jsx(PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children }) })
-    }
-  ) });
+  return /* @__PURE__ */ jsx(ThreadTraceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MessageScrollerProvider, { defaultScrollPosition: "end", preserveScrollOnPrepend: true, onReachStart: onLoadOlder, children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace", className: cn("flex h-full min-h-0", className), ...props, children: /* @__PURE__ */ jsx(PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children }) }) }) });
 }
 
 export { ThreadTraceRoot };

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-root.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the resizable panel group that\n * gains a span column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Collapse\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div data-slot=\"thread-trace\" className={cn('flex h-full min-h-0', className)} {...props}>\n          <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n            {children}\n          </PanelGroup>\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-root.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the resizable panel group that\n * gains a span column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Collapse\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      {/* Opens on the latest turn and keeps the reading position when older turns are prepended.\n          No auto-follow: turns are settled before mount, so the only growth at the end comes from\n          the reader expanding a row, which must not move the view. */}\n      <MessageScrollerProvider defaultScrollPosition=\"end\" preserveScrollOnPrepend onReachStart={onLoadOlder}>\n        <div data-slot=\"thread-trace\" className={cn('flex h-full min-h-0', className)} {...props}>\n          <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n            {children}\n          </PanelGroup>\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,WAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,EAAE,eAAA,EAAiB,cAAA,EAAe,GAAI,mBAAA,CAAoB,SAAS,QAAQ,CAAA;AAEjF,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAyC,IAAI,CAAA;AAC7E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAsC,IAAI,CAAA;AAE5E,EAAA,MAAM,CAAC,kBAAkB,mBAAmB,CAAA,GAAI,SAA8B,sBAAM,IAAI,KAAK,CAAA;AAE7F,EAAA,MAAM,gBAAA,GAAmB,WAAA,CAAY,CAAC,OAAA,EAAiB,QAAA,KAAsB;AAC3E,IAAA,mBAAA,CAAoB,CAAA,OAAA,KAAW;AAC7B,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,OAAO,CAAA,KAAM,UAAU,OAAO,OAAA;AAC9C,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,OAAO,CAAA;AAC5B,MAAA,IAAI,QAAA,EAAU,IAAA,CAAK,GAAA,CAAI,OAAO,CAAA;AAAA,WACzB,IAAA,CAAK,OAAO,OAAO,CAAA;AACxB,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAa,WAAA;AAAA,IACjB,CAAC,SAAiB,MAAA,KAA+B;AAC/C,MAAA,MAAM,IAAA,GAAO,MAAA,GAAS,EAAE,OAAA,EAAS,QAAO,GAAI,IAAA;AAC5C,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,oBAAA,GAAuB,IAAI,CAAA;AAC3B,MAAA,IAAI,MAAA,EAAQ,gBAAA,CAAiB,OAAA,EAAS,IAAI,CAAA;AAE1C,MAAA,IAAI,CAAC,MAAA,EAAQ,YAAA,CAAa,IAAI,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,kBAAkB,oBAAoB;AAAA,GACzC;AAKA,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,SAAiB,OAAA,KAAsB;AACtC,MAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA;AAAA,MACF;AACA,MAAA,YAAA,CAAa,EAAE,OAAA,EAAS,OAAA,EAAS,CAAA;AACjC,MAAA,gBAAA,CAAiB,SAAS,IAAI,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,OAAA,KAAoB;AACrD,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA,EAAS,gBAAA,CAA8B,iBAAiB,KAAK,EAAC;AACnF,IAAA,KAAA,MAAW,OAAO,IAAA,EAAM;AACtB,MAAA,IAAI,GAAA,CAAI,OAAA,CAAQ,OAAA,KAAY,OAAA,EAAS;AACnC,QAAA,GAAA,CAAI,eAAe,EAAE,QAAA,EAAU,QAAA,EAAU,KAAA,EAAO,SAAS,CAAA;AACzD,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO;AAAA,MACL,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,kBAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,YAAA,EAIlC,QAAA,kBAAA,GAAA,CAAC,uBAAA,EAAA,EAAwB,qBAAA,EAAsB,OAAM,uBAAA,EAAuB,IAAA,EAAC,YAAA,EAAc,WAAA,EACzF,8BAAC,KAAA,EAAA,EAAI,WAAA,EAAU,cAAA,EAAe,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA,EAAI,GAAG,KAAA,EACjF,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,WAAA,EAAY,cAAa,SAAA,EAAU,gBAAA,EAC5C,QAAA,EACH,CAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const transcriptDivider = require('../../../../transcript-divider-273Bsdjs.cjs');
+const transcriptDivider = require('../../../../transcript-divider-fc_PrxES.cjs');
 const messageScroller = require('../../../../message-scroller-DcZBA9Sl.cjs');
 const tabsRoot = require('../../../../tabs-root-Hkt7A6oq.cjs');
 const hooks_useMeasuredAutoHeight = require('../../../../hooks/use-measured-auto-height.cjs.js');

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useMemo } from 'react';
 import { useThreadTrace } from './thread-trace-context.es.js';
 import { ThreadTraceRowContext } from './thread-trace-row-context.es.js';
-import { T as TranscriptDivider } from '../../../../transcript-divider-CPIo8NUj.js';
+import { T as TranscriptDivider } from '../../../../transcript-divider-DQbebYHb.js';
 import { c as MessageScrollerItem } from '../../../../message-scroller-d8meQ5AR.js';
 import { T as Tabs } from '../../../../tabs-root-BbzhUZl4.js';
 import { useMeasuredAutoHeight } from '../../../../hooks/use-measured-auto-height.es.js';

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

@@ -15,6 +15,7 @@ require('@mastra/core/utils/safe-stringify');
 require('@mastra/react/hooks/datasets');
 const Button = require('../../../Button-CXhSUBxN.cjs');
 require('../../../field-control-aria-WzMGs0A4.cjs');
+const Txt = require('../../../Txt-DFPibRb3.cjs');
 const lib_framework = require('../../../lib/framework.cjs.js');
 const domains_traces_components_threadTrace = require('./thread-trace.cjs.js');
 const domains_traces_components_threadViewSkeleton = require('./thread-view-skeleton.cjs.js');
@@ -22,7 +23,6 @@ const domains_traces_components_traceFeedbackTab = require('./trace-feedback-tab
 const domains_traces_components_traceThreadItemView = require('./trace-thread-item-view.cjs.js');
 const domains_traces_components_tracesErrorContent = require('./traces-error-content.cjs.js');
 const domains_traces_hooks_useTracesListSource = require('../hooks/use-traces-list-source.cjs.js');
-const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const icons_ScorersIcon = require('../../../icons/ScorersIcon.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace/thread-trace-row-context.cjs.js');

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

@@ -11,6 +11,7 @@ import '@mastra/core/utils/safe-stringify';
 import '@mastra/react/hooks/datasets';
 import { B as Button } from '../../../Button-D43ghVKt.js';
 import '../../../field-control-aria-DB6y41tQ.js';
+import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
 import { useLinkComponent } from '../../../lib/framework.es.js';
 import { ThreadTrace } from './thread-trace.es.js';
 import { ThreadViewSkeleton } from './thread-view-skeleton.es.js';
@@ -18,7 +19,6 @@ import { TraceFeedbackTab } from './trace-feedback-tab.es.js';
 import { TraceThreadItemView } from './trace-thread-item-view.es.js';
 import { TracesErrorContent } from './traces-error-content.es.js';
 import { useTracesListSource } from '../hooks/use-traces-list-source.es.js';
-import { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { ScorersIcon } from '../../../icons/ScorersIcon.es.js';
 import { useThreadTraceRow } from './thread-trace/thread-trace-row-context.es.js';

package/dist/domains/traces/components/timeline-name-col.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
-const Txt = require('../../../Txt-DNnvlrBo.cjs');
+const Txt = require('../../../Txt-DFPibRb3.cjs');
 const primitives_transitions = require('../../../primitives/transitions.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
@@ -31,8 +31,9 @@ function TimelineNameCol({
   const isRevealed = revealSpanId === span.id;
   const shouldScrollIntoView = isSelected || isRevealed;
   React.useEffect(() => {
-    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [shouldScrollIntoView]);
+    if (shouldScrollIntoView)
+      rowRef.current?.scrollIntoView({ block: isRevealed ? "center" : "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView, isRevealed]);
   const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -53,7 +54,8 @@ function TimelineNameCol({
           {
             type: "button",
             className: utils_cn.cn(
-              "flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground",
+              "text-foreground",
+              "flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left",
               primitives_transitions.focusRingInset
             ),
             children: [
@@ -62,14 +64,16 @@ function TimelineNameCol({
                 {
                   "aria-hidden": true,
                   title: spanUI.label,
-                  className: "mt-[5px] inline-block size-2 shrink-0 rounded-full",
-                  style: { backgroundColor: spanUI.color }
+                  style: { backgroundColor: spanUI.color },
+                  className: "mt-[5px] inline-block size-2 shrink-0 rounded-full"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
+                  Txt.Txt,
                   {
+                    as: "span",
+                    variant: "caption",
                     "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
                     "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
                     title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,

package/dist/domains/traces/components/timeline-name-col.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground',\n          focusRingInset,\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"mt-[5px] inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        {/* Duration always stacks under the name. */}\n        <span className=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n          {meta && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n              {meta}\n            </Txt>\n          )}\n        </span>\n      </button>\n\n      {/* Expand toggle sits at the end of the row; the slot is always present so names stay aligned. */}\n      <div className=\"flex w-8 shrink-0 items-center justify-center self-stretch pr-1\">\n        {hasChildren && (\n          <button\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation();\n              toggleChildren?.();\n            }}\n            aria-label={toggleLabel}\n            aria-expanded={isExpanded}\n            className={cn(\n              'flex size-5 cursor-pointer items-center justify-center rounded-md',\n              'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n              focusRing,\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign","focusRingInset","Txt","focusRing","ChevronDownIcon","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView)\n      rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView, isRevealed]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'text-foreground',\n          'flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left',\n          focusRingInset,\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            style={{ backgroundColor: spanUI.color }}\n            className=\"mt-[5px] inline-block size-2 shrink-0 rounded-full\"\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        {/* Duration always stacks under the name. */}\n        <span className=\"flex min-w-0 flex-1 flex-col\">\n          <Txt\n            as=\"span\"\n            variant=\"caption\"\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </Txt>\n          {meta && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n              {meta}\n            </Txt>\n          )}\n        </span>\n      </button>\n\n      {/* Expand toggle sits at the end of the row; the slot is always present so names stay aligned. */}\n      <div className=\"flex w-8 shrink-0 items-center justify-center self-stretch pr-1\">\n        {hasChildren && (\n          <button\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation();\n              toggleChildren?.();\n            }}\n            aria-label={toggleLabel}\n            aria-expanded={isExpanded}\n            className={cn(\n              'flex size-5 cursor-pointer items-center justify-center rounded-md',\n              'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n              focusRing,\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign","focusRingInset","Txt","focusRing","ChevronDownIcon","ChevronRightIcon"],"mappings":"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"}

package/dist/domains/traces/components/timeline-name-col.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
 import { useRef, useEffect } from 'react';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
-import { T as Txt } from '../../../Txt-C3cYJgKU.js';
+import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
 import { focusRingInset, focusRing } from '../../../primitives/transitions.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
@@ -27,8 +27,9 @@ function TimelineNameCol({
   const isRevealed = revealSpanId === span.id;
   const shouldScrollIntoView = isSelected || isRevealed;
   useEffect(() => {
-    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [shouldScrollIntoView]);
+    if (shouldScrollIntoView)
+      rowRef.current?.scrollIntoView({ block: isRevealed ? "center" : "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView, isRevealed]);
   const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -49,7 +50,8 @@ function TimelineNameCol({
           {
             type: "button",
             className: cn(
-              "flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground",
+              "text-foreground",
+              "flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left",
               focusRingInset
             ),
             children: [
@@ -58,14 +60,16 @@ function TimelineNameCol({
                 {
                   "aria-hidden": true,
                   title: spanUI.label,
-                  className: "mt-[5px] inline-block size-2 shrink-0 rounded-full",
-                  style: { backgroundColor: spanUI.color }
+                  style: { backgroundColor: spanUI.color },
+                  className: "mt-[5px] inline-block size-2 shrink-0 rounded-full"
                 }
               ),
               /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
                 /* @__PURE__ */ jsx(
-                  "span",
+                  Txt,
                   {
+                    as: "span",
+                    variant: "caption",
                     "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
                     "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
                     title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,

package/dist/domains/traces/components/timeline-name-col.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground',\n          focusRingInset,\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"mt-[5px] inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        {/* Duration always stacks under the name. */}\n        <span className=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n          {meta && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n              {meta}\n            </Txt>\n          )}\n        </span>\n      </button>\n\n      {/* Expand toggle sits at the end of the row; the slot is always present so names stay aligned. */}\n      <div className=\"flex w-8 shrink-0 items-center justify-center self-stretch pr-1\">\n        {hasChildren && (\n          <button\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation();\n              toggleChildren?.();\n            }}\n            aria-label={toggleLabel}\n            aria-expanded={isExpanded}\n            className={cn(\n              'flex size-5 cursor-pointer items-center justify-center rounded-md',\n              'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n              focusRing,\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA2BO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA,GAAgB,CAAA;AAAA,EAChB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,MAAM,cAAc,UAAA,GAAa,CAAA,mBAAA,EAAsB,aAAa,CAAA,CAAA,CAAA,GAAM,oBAAoB,aAAa,CAAA,CAAA,CAAA;AAE3G,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,eAAA,EAAe,UAAA;AAAA,MAEf,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,MACpC,SAAA,EAAW,GAAG,sFAAA,EAAwF;AAAA,QACpG,2EAAA,EAA6E,OAAA;AAAA,QAC7E,eAAA,EAAiB;AAAA,OAClB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,SAAA,EAAW,EAAA;AAAA,cACT,iIAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,oDAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAMF,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8BAAA,EACd,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,oBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,oBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,oBAClF,SAAA,EAAU,kBAAA;AAAA,oBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,iBACR;AAAA,gBACC,IAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,uBAAA,EAClD,QAAA,EAAA,IAAA,EACH;AAAA,eAAA,EAEJ;AAAA;AAAA;AAAA,SACF;AAAA,wBAGA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iEAAA,EACZ,QAAA,EAAA,WAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,SAAS,CAAA,CAAA,KAAK;AACZ,cAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,cAAA,cAAA,IAAiB;AAAA,YACnB,CAAA;AAAA,YACA,YAAA,EAAY,WAAA;AAAA,YACZ,eAAA,EAAe,UAAA;AAAA,YACf,SAAA,EAAW,EAAA;AAAA,cACT,mEAAA;AAAA,cACA,2EAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,uBAAM,gBAAA,EAAA,EAAiB;AAAA;AAAA,SACxD,EAEJ;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView)\n      rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView, isRevealed]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'text-foreground',\n          'flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left',\n          focusRingInset,\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            style={{ backgroundColor: spanUI.color }}\n            className=\"mt-[5px] inline-block size-2 shrink-0 rounded-full\"\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        {/* Duration always stacks under the name. */}\n        <span className=\"flex min-w-0 flex-1 flex-col\">\n          <Txt\n            as=\"span\"\n            variant=\"caption\"\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </Txt>\n          {meta && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n              {meta}\n            </Txt>\n          )}\n        </span>\n      </button>\n\n      {/* Expand toggle sits at the end of the row; the slot is always present so names stay aligned. */}\n      <div className=\"flex w-8 shrink-0 items-center justify-center self-stretch pr-1\">\n        {hasChildren && (\n          <button\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation();\n              toggleChildren?.();\n            }}\n            aria-label={toggleLabel}\n            aria-expanded={isExpanded}\n            className={cn(\n              'flex size-5 cursor-pointer items-center justify-center rounded-md',\n              'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n              focusRing,\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA2BO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA,GAAgB,CAAA;AAAA,EAChB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA;AACF,MAAA,MAAA,CAAO,OAAA,EAAS,eAAe,EAAE,KAAA,EAAO,aAAa,QAAA,GAAW,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAA,EAAsB,UAAU,CAAC,CAAA;AAErC,EAAA,MAAM,cAAc,UAAA,GAAa,CAAA,mBAAA,EAAsB,aAAa,CAAA,CAAA,CAAA,GAAM,oBAAoB,aAAa,CAAA,CAAA,CAAA;AAE3G,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,eAAA,EAAe,UAAA;AAAA,MAEf,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,MACpC,SAAA,EAAW,GAAG,sFAAA,EAAwF;AAAA,QACpG,2EAAA,EAA6E,OAAA;AAAA,QAC7E,eAAA,EAAiB;AAAA,OAClB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,SAAA,EAAW,EAAA;AAAA,cACT,iBAAA;AAAA,cACA,oGAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA,EAAM;AAAA,kBACvC,SAAA,EAAU;AAAA;AAAA,eACZ;AAAA,8BAMF,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8BAAA,EACd,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,GAAA;AAAA,kBAAA;AAAA,oBACC,EAAA,EAAG,MAAA;AAAA,oBACH,OAAA,EAAQ,SAAA;AAAA,oBACR,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,oBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,oBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,oBAClF,SAAA,EAAU,kBAAA;AAAA,oBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,iBACR;AAAA,gBACC,IAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,uBAAA,EAClD,QAAA,EAAA,IAAA,EACH;AAAA,eAAA,EAEJ;AAAA;AAAA;AAAA,SACF;AAAA,wBAGA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iEAAA,EACZ,QAAA,EAAA,WAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,SAAS,CAAA,CAAA,KAAK;AACZ,cAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,cAAA,cAAA,IAAiB;AAAA,YACnB,CAAA;AAAA,YACA,YAAA,EAAY,WAAA;AAAA,YACZ,eAAA,EAAe,UAAA;AAAA,YACf,SAAA,EAAW,EAAA;AAAA,cACT,mEAAA;AAAA,cACA,2EAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,uBAAM,gBAAA,EAAA,EAAiB;AAAA;AAAA,SACxD,EAEJ;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/traces/components/timeline-timing-col.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_utils_spanTiming = require('../utils/span-timing.cjs.js');
 const domains_traces_components_spanTimingHoverCard = require('./span-timing-hover-card.cjs.js');
 const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
-const Txt = require('../../../Txt-DNnvlrBo.cjs');
+const Txt = require('../../../Txt-DFPibRb3.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const utils_duration = require('../../../utils/duration.cjs.js');
 
@@ -34,10 +34,10 @@ function TimelineTimingCol({
           }
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("w-full rounded-md bg-muted p-1.5"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-md bg-muted p-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: utils_cn.cn("absolute top-0 h-1.5 rounded-sm bg-placeholder"),
+              className: "absolute top-0 h-1.5 rounded-sm bg-placeholder",
               style: {
                 width: widthPercent ? `${widthPercent}%` : "2px",
                 left: `${leftPercent}%`,
@@ -45,7 +45,7 @@ function TimelineTimingCol({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex justify-end text-meta text-muted-foreground"), children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", font: "mono", children: utils_duration.formatDurationPrecise(span.latency) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", font: "mono", className: "block text-right", children: utils_duration.formatDurationPrecise(span.latency) })
         ]
       }
     ),

package/dist/domains/traces/components/timeline-timing-col.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-timing-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-timing-col.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype TimelineTimingColProps = {\n  span: UISpan;\n  selectedSpanId?: string;\n  isFaded?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  color?: string;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TimelineTimingCol({\n  span,\n  selectedSpanId,\n  isFaded,\n  overallLatency,\n  overallStartTime,\n  color,\n  chartWidth = 'default',\n}: TimelineTimingColProps) {\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        className={cn(\n          'grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2',\n          chartWidth === 'wide' ? 'min-w-72' : 'min-w-32',\n          '[&:hover>div]:bg-fill',\n          {\n            'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n            'bg-fill-hover': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className={cn('w-full rounded-md bg-muted p-1.5')}>\n          <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n            <div\n              className={cn('absolute top-0 h-1.5 rounded-sm bg-placeholder')}\n              style={{\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                left: `${leftPercent}%`,\n                backgroundColor: color,\n              }}\n            ></div>\n          </div>\n        </div>\n\n        <div className={cn('flex justify-end text-meta text-muted-foreground')}>\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n            {formatDurationPrecise(span.latency)}\n          </Txt>\n        </div>\n      </HoverCardTrigger>\n      <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n    </HoverCard>\n  );\n}\n"],"names":["getSpanTimingLayout","HoverCard","jsxs","HoverCardTrigger","cn","jsx","Txt","SpanTimingHoverCard"],"mappings":";;;;;;;;;;;;AAkBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiBA,mDAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAE9G,EAAA,uCACGC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA;AAAA,MAACC,0BAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,oFAAA;AAAA,UACA,UAAA,KAAe,SAAS,UAAA,GAAa,UAAA;AAAA,UACrC,uBAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,eAAA,EAAiB,mBAAmB,IAAA,CAAK;AAAA;AAC3C,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAWD,WAAA,CAAG,kCAAkC,GACnD,QAAA,kBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,YAAG,gDAAgD,CAAA;AAAA,cAC9D,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,gBAC3C,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,gBACpB,eAAA,EAAiB;AAAA;AACnB;AAAA,aAEJ,CAAA,EACF,CAAA;AAAA,yCAEC,KAAA,EAAA,EAAI,SAAA,EAAWA,YAAG,kDAAkD,CAAA,EACnE,yCAACE,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,QAAO,IAAA,EAAK,MAAA,EAChC,+CAAsB,IAAA,CAAK,OAAO,GACrC,CAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,oBACAD,cAAA,CAACE,iEAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,GAAA,EAC/D,CAAA;AAEJ;;;;"}
+{"version":3,"file":"timeline-timing-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-timing-col.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype TimelineTimingColProps = {\n  span: UISpan;\n  selectedSpanId?: string;\n  isFaded?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  color?: string;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TimelineTimingCol({\n  span,\n  selectedSpanId,\n  isFaded,\n  overallLatency,\n  overallStartTime,\n  color,\n  chartWidth = 'default',\n}: TimelineTimingColProps) {\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        className={cn(\n          'grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2',\n          chartWidth === 'wide' ? 'min-w-72' : 'min-w-32',\n          '[&:hover>div]:bg-fill',\n          {\n            'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n            'bg-fill-hover': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className=\"w-full rounded-md bg-muted p-1.5\">\n          <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n            <div\n              className=\"absolute top-0 h-1.5 rounded-sm bg-placeholder\"\n              style={{\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                left: `${leftPercent}%`,\n                backgroundColor: color,\n              }}\n            ></div>\n          </div>\n        </div>\n\n        <Txt as=\"span\" variant=\"meta\" tone=\"muted\" font=\"mono\" className=\"block text-right\">\n          {formatDurationPrecise(span.latency)}\n        </Txt>\n      </HoverCardTrigger>\n      <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n    </HoverCard>\n  );\n}\n"],"names":["getSpanTimingLayout","HoverCard","jsxs","HoverCardTrigger","cn","jsx","Txt","formatDurationPrecise","SpanTimingHoverCard"],"mappings":";;;;;;;;;;;;AAkBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiBA,mDAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAE9G,EAAA,uCACGC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA;AAAA,MAACC,0BAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,oFAAA;AAAA,UACA,UAAA,KAAe,SAAS,UAAA,GAAa,UAAA;AAAA,UACrC,uBAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,eAAA,EAAiB,mBAAmB,IAAA,CAAK;AAAA;AAC3C,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,SAAI,SAAA,EAAU,kCAAA,EACb,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,gDAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,gBAC3C,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,gBACpB,eAAA,EAAiB;AAAA;AACnB;AAAA,aAEJ,CAAA,EACF,CAAA;AAAA,0BAEAA,cAAA,CAACC,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,SAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,IAAA,EAAK,QAAO,SAAA,EAAU,kBAAA,EAC9D,QAAA,EAAAC,oCAAA,CAAsB,IAAA,CAAK,OAAO,CAAA,EACrC;AAAA;AAAA;AAAA,KACF;AAAA,oBACAF,cAAA,CAACG,iEAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,GAAA,EAC/D,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/timeline-timing-col.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { getSpanTimingLayout } from '../utils/span-timing.es.js';
 import { SpanTimingHoverCard } from './span-timing-hover-card.es.js';
 import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-B1-n3amu.js';
-import { T as Txt } from '../../../Txt-C3cYJgKU.js';
+import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';
 
@@ -30,10 +30,10 @@ function TimelineTimingCol({
           }
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-md bg-muted p-1.5"), children: /* @__PURE__ */ jsx("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "w-full rounded-md bg-muted p-1.5", children: /* @__PURE__ */ jsx("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("absolute top-0 h-1.5 rounded-sm bg-placeholder"),
+              className: "absolute top-0 h-1.5 rounded-sm bg-placeholder",
               style: {
                 width: widthPercent ? `${widthPercent}%` : "2px",
                 left: `${leftPercent}%`,
@@ -41,7 +41,7 @@ function TimelineTimingCol({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsx("div", { className: cn("flex justify-end text-meta text-muted-foreground"), children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", font: "mono", children: formatDurationPrecise(span.latency) }) })
+          /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", font: "mono", className: "block text-right", children: formatDurationPrecise(span.latency) })
         ]
       }
     ),

package/dist/domains/traces/components/timeline-timing-col.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-timing-col.es.js","sources":["../../../../src/domains/traces/components/timeline-timing-col.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype TimelineTimingColProps = {\n  span: UISpan;\n  selectedSpanId?: string;\n  isFaded?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  color?: string;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TimelineTimingCol({\n  span,\n  selectedSpanId,\n  isFaded,\n  overallLatency,\n  overallStartTime,\n  color,\n  chartWidth = 'default',\n}: TimelineTimingColProps) {\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        className={cn(\n          'grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2',\n          chartWidth === 'wide' ? 'min-w-72' : 'min-w-32',\n          '[&:hover>div]:bg-fill',\n          {\n            'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n            'bg-fill-hover': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className={cn('w-full rounded-md bg-muted p-1.5')}>\n          <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n            <div\n              className={cn('absolute top-0 h-1.5 rounded-sm bg-placeholder')}\n              style={{\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                left: `${leftPercent}%`,\n                backgroundColor: color,\n              }}\n            ></div>\n          </div>\n        </div>\n\n        <div className={cn('flex justify-end text-meta text-muted-foreground')}>\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n            {formatDurationPrecise(span.latency)}\n          </Txt>\n        </div>\n      </HoverCardTrigger>\n      <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAkBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiB,mBAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAE9G,EAAA,4BACG,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,oFAAA;AAAA,UACA,UAAA,KAAe,SAAS,UAAA,GAAa,UAAA;AAAA,UACrC,uBAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,eAAA,EAAiB,mBAAmB,IAAA,CAAK;AAAA;AAC3C,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,kCAAkC,GACnD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,gDAAgD,CAAA;AAAA,cAC9D,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,gBAC3C,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,gBACpB,eAAA,EAAiB;AAAA;AACnB;AAAA,aAEJ,CAAA,EACF,CAAA;AAAA,8BAEC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,kDAAkD,CAAA,EACnE,8BAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,QAAO,IAAA,EAAK,MAAA,EAChC,gCAAsB,IAAA,CAAK,OAAO,GACrC,CAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,mBAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,GAAA,EAC/D,CAAA;AAEJ;;;;"}
+{"version":3,"file":"timeline-timing-col.es.js","sources":["../../../../src/domains/traces/components/timeline-timing-col.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype TimelineTimingColProps = {\n  span: UISpan;\n  selectedSpanId?: string;\n  isFaded?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  color?: string;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TimelineTimingCol({\n  span,\n  selectedSpanId,\n  isFaded,\n  overallLatency,\n  overallStartTime,\n  color,\n  chartWidth = 'default',\n}: TimelineTimingColProps) {\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        className={cn(\n          'grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2',\n          chartWidth === 'wide' ? 'min-w-72' : 'min-w-32',\n          '[&:hover>div]:bg-fill',\n          {\n            'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n            'bg-fill-hover': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className=\"w-full rounded-md bg-muted p-1.5\">\n          <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n            <div\n              className=\"absolute top-0 h-1.5 rounded-sm bg-placeholder\"\n              style={{\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                left: `${leftPercent}%`,\n                backgroundColor: color,\n              }}\n            ></div>\n          </div>\n        </div>\n\n        <Txt as=\"span\" variant=\"meta\" tone=\"muted\" font=\"mono\" className=\"block text-right\">\n          {formatDurationPrecise(span.latency)}\n        </Txt>\n      </HoverCardTrigger>\n      <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAkBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiB,mBAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAE9G,EAAA,4BACG,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,oFAAA;AAAA,UACA,UAAA,KAAe,SAAS,UAAA,GAAa,UAAA;AAAA,UACrC,uBAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,eAAA,EAAiB,mBAAmB,IAAA,CAAK;AAAA;AAC3C,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAI,SAAA,EAAU,kCAAA,EACb,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,gDAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,gBAC3C,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,gBACpB,eAAA,EAAiB;AAAA;AACnB;AAAA,aAEJ,CAAA,EACF,CAAA;AAAA,0BAEA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,SAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,IAAA,EAAK,QAAO,SAAA,EAAU,kBAAA,EAC9D,QAAA,EAAA,qBAAA,CAAsB,IAAA,CAAK,OAAO,CAAA,EACrC;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,mBAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,GAAA,EAC/D,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-columns-menu.cjs.js

@@ -7,14 +7,14 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 const Button = require('../../../Button-CXhSUBxN.cjs');
-const combobox = require('../../../combobox-BaVFPQ6X.cjs');
+const combobox = require('../../../combobox-anmnqGB0.cjs');
 require('@base-ui/react/combobox');
 const dialog = require('../../../dialog-c2AhB8HM.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
 const field = require('../../../field-BkeKcz_6.cjs');
 require('../../../field-control-aria-WzMGs0A4.cjs');
 const form = require('../../../form-ChOlos7g.cjs');
-const Txt = require('../../../Txt-DNnvlrBo.cjs');
+const Txt = require('../../../Txt-DFPibRb3.cjs');
 const dialogAction = require('../../../dialog-action-7HmywY8w.cjs');
 
 const EMPTY_KEYS = [];

package/dist/domains/traces/components/trace-columns-menu.es.js

@@ -3,14 +3,14 @@ import { Columns3Icon, PlusIcon } from 'lucide-react';
 import { useState, useMemo } from 'react';
 import { TRACE_USAGE_COLUMNS, TRACE_CUSTOM_COLUMN_FIELDS, TRACE_CUSTOM_COLUMN_LABELS } from '../trace-list-columns.es.js';
 import { B as Button } from '../../../Button-D43ghVKt.js';
-import { C as Combobox } from '../../../combobox-NPw0vrSa.js';
+import { C as Combobox } from '../../../combobox-Dwf4U1CZ.js';
 import '@base-ui/react/combobox';
 import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle, e as DialogDescription, a as DialogBody, f as DialogFooter, b as DialogCancel } from '../../../dialog-DhtPcWY-.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
 import { F as Field, e as FieldLabel, c as FieldError } from '../../../field-BiMIiq2Y.js';
 import '../../../field-control-aria-DB6y41tQ.js';
 import { F as Form } from '../../../form-uj2xap-j.js';
-import { T as Txt } from '../../../Txt-C3cYJgKU.js';
+import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
 import { D as DialogAction } from '../../../dialog-action-BtbY5o2b.js';
 
 const EMPTY_KEYS = [];

package/dist/domains/traces/components/trace-data-panel-view.cjs.js

@@ -16,13 +16,13 @@ const domains_traces_components_traceSpanTree = require('./trace-span-tree.cjs.j
 const domains_traces_components_traceSummaryDescription = require('./trace-summary-description.cjs.js');
 const Button = require('../../../Button-CXhSUBxN.cjs');
 const buttonsGroup = require('../../../buttons-group-CoZP3lJt.cjs');
-const dataPanel = require('../../../data-panel-Ckjs7Kwo.cjs');
+const dataPanel = require('../../../data-panel-b48tWgzs.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
-const Notice = require('../../../Notice-D4zc_oTj.cjs');
+const Notice = require('../../../Notice-CjQQjfK7.cjs');
 const searchInput = require('../../../search-input-DeeH0VrX.cjs');
 const tabsRoot = require('../../../tabs-root-Hkt7A6oq.cjs');
-const tabsList = require('../../../tabs-list-Tqj36HIL.cjs');
-const tabsTab = require('../../../tabs-tab-C-C2vX-D.cjs');
+const tabsList = require('../../../tabs-list-BeWntzEw.cjs');
+const tabsTab = require('../../../tabs-tab-DhLs9bO0.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const icons_ScorersIcon = require('../../../icons/ScorersIcon.cjs.js');
 const hooks_useScrollToFirstHighlight = require('../../../hooks/use-scroll-to-first-highlight.cjs.js');
@@ -45,6 +45,7 @@ function TraceDataPanelView({
   size = "wide",
   depth,
   headerSlot,
+  headerActionsSlot,
   title,
   placement,
   LinkComponent,
@@ -238,7 +239,10 @@ function TraceDataPanelView({
             /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Heading, { children: "Trace Timeline" }),
             traceSummary
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.HeaderActions, { children: traceActionsMenu })
+          /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.HeaderActions, { children: [
+            headerActionsSlot,
+            traceActionsMenu
+          ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CloseButton, { onClick: onClose }),
           /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.HeaderContent, { children: [
@@ -249,6 +253,7 @@ function TraceDataPanelView({
             traceSummary
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.HeaderActions, { children: [
+            headerActionsSlot,
             onEvaluateTrace && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "primary", size: "sm", onClick: onEvaluateTrace, disabled: !rootSpan, children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
               "Score trace"
@@ -317,6 +322,7 @@ function TraceDataPanelView({
                 expandedSpanIds,
                 setExpandedSpanIds,
                 featuredSpanIds,
+                revealSpanId: featuredSpanIds?.at(-1),
                 isLoading
               };
               return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [