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

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

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
 const domains_traces_components_spanDataPanelView = require('./span-data-panel-view.cjs.js');
 const domains_traces_components_traceDataPanel = require('./trace-data-panel.cjs.js');
 const domains_traces_components_traceMessagesPanel = require('./trace-messages-panel.cjs.js');
 const domains_traces_components_traceThreadContext = require('./trace-thread-context.cjs.js');
 const domains_traces_components_traceThreadPanel = require('./trace-thread-panel.cjs.js');
 const domains_traces_hooks_useSpanDetail = require('../hooks/use-span-detail.cjs.js');
+const domains_traces_hooks_useThreadHasOtherTraces = require('../hooks/use-thread-has-other-traces.cjs.js');
 const domains_traces_hooks_useTraceSpanNavigation = require('../hooks/use-trace-span-navigation.cjs.js');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const lib_framework = require('../../../lib/framework.cjs.js');
 
 function getEntityHref(paths, entityType, entityId) {
@@ -64,78 +67,86 @@ function TraceSpanPanel({
   const rootSpan = anchorSpanId ? spans?.find((s) => s.spanId === anchorSpanId) : spans?.find((s) => s.parentSpanId == null);
   const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);
   const threadId = domains_traces_components_traceThreadContext.getTraceThreadId(rootSpan, anchorSpanId);
-  if (traceId && isFullThreadOpen && threadId) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      domains_traces_components_traceThreadPanel.TraceThreadPanel,
+  const hasMessagesPanel = !!(traceId && showPartialThread && threadId);
+  const hasOtherTraces = domains_traces_hooks_useThreadHasOtherTraces.useThreadHasOtherTraces(hasMessagesPanel ? threadId : void 0);
+  const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      domains_traces_components_traceDataPanel.TraceDataPanel,
       {
+        traceId,
+        spans,
+        anchorSpanId,
+        entityHref,
+        usage,
+        isLoading: isLoadingSpans,
+        onClose,
+        onSpanSelect,
+        onSaveAsDatasetItem,
+        onAddTraceMocksToItem,
+        initialSpanId: initialSpanId ?? selectedSpanId,
+        onPrevious,
+        onNext,
+        placement: "traces-list",
+        LinkComponent: Link,
+        traceHref,
+        size,
+        depth,
+        headerSlot,
         title,
-        threadId,
+        showUnavailableFeaturesMsg,
+        spanView,
+        onSpanViewChange,
+        feedbackTabBadge,
+        feedbackTabSlot,
+        featuredSpanIds,
+        messagesPanelSlot: hasMessagesPanel ? /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceMessagesPanel.TraceMessagesPanel, { traceId, onHighlightSpans }) : void 0,
+        sideHeaderActions: showFullThreadAction ? ({ compact }) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            tooltip: compact ? "Open full thread" : void 0,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessagesSquareIcon, {}),
+            variant: "ghost",
+            size: "sm",
+            className: "@max-[501px]:w-control-sm @max-[501px]:rounded-full @max-[501px]:px-0 @max-[501px]:[&>[data-slot=button-icon]]:ml-0",
+            onClick: () => onFullThreadOpenChange(true),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "@max-[501px]:sr-only", children: "Open full thread" })
+          }
+        ) : void 0,
+        scoresTabBadge,
+        scoresTabSlot,
+        spanPanelSlot: traceId && selectedSpanId ? /* @__PURE__ */ jsxRuntime.jsx(
+          domains_traces_components_spanDataPanelView.SpanDataPanelView,
+          {
+            traceId,
+            spanId: selectedSpanId,
+            span: spanDetailData?.span,
+            isAnchor: anchorSpanId ? selectedSpanId === anchorSpanId : void 0,
+            isLoading: isLoadingSpanDetail,
+            onPrevious: handlePreviousSpan,
+            onNext: handleNextSpan,
+            onClose: () => onSpanSelect(void 0),
+            activeTab: spanActiveTab,
+            onTabChange: onSpanTabChange,
+            feedbackTabBadge: spanFeedbackTabBadge,
+            feedbackTabSlot: spanFeedbackTabSlot
+          }
+        ) : null
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      domains_traces_components_traceThreadPanel.TraceThreadPanel,
+      {
+        open: !!(traceId && isFullThreadOpen && threadId),
+        depth: depth && depth > 1 ? 3 : 2,
+        threadId: threadId ?? "",
         onOpenScore,
         withQueryTrace,
         withFeedback,
-        onBack: () => onFullThreadOpenChange?.(false),
-        onClose
+        onClose: () => onFullThreadOpenChange?.(false)
       }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    domains_traces_components_traceDataPanel.TraceDataPanel,
-    {
-      traceId,
-      spans,
-      anchorSpanId,
-      entityHref,
-      usage,
-      isLoading: isLoadingSpans,
-      onClose,
-      onSpanSelect,
-      onSaveAsDatasetItem,
-      onAddTraceMocksToItem,
-      initialSpanId: initialSpanId ?? selectedSpanId,
-      onPrevious,
-      onNext,
-      placement: "traces-list",
-      LinkComponent: Link,
-      traceHref,
-      size,
-      depth,
-      headerSlot,
-      title,
-      showUnavailableFeaturesMsg,
-      spanView,
-      onSpanViewChange,
-      feedbackTabBadge,
-      feedbackTabSlot,
-      featuredSpanIds,
-      messagesPanelSlot: traceId && showPartialThread && threadId ? /* @__PURE__ */ jsxRuntime.jsx(
-        domains_traces_components_traceMessagesPanel.TraceMessagesPanel,
-        {
-          traceId,
-          threadId,
-          onViewFullThread: onFullThreadOpenChange ? () => onFullThreadOpenChange(true) : void 0,
-          onHighlightSpans
-        }
-      ) : void 0,
-      scoresTabBadge,
-      scoresTabSlot,
-      spanPanelSlot: traceId && selectedSpanId ? /* @__PURE__ */ jsxRuntime.jsx(
-        domains_traces_components_spanDataPanelView.SpanDataPanelView,
-        {
-          traceId,
-          spanId: selectedSpanId,
-          span: spanDetailData?.span,
-          isAnchor: anchorSpanId ? selectedSpanId === anchorSpanId : void 0,
-          isLoading: isLoadingSpanDetail,
-          onPrevious: handlePreviousSpan,
-          onNext: handleNextSpan,
-          activeTab: spanActiveTab,
-          onTabChange: onSpanTabChange,
-          feedbackTabBadge: spanFeedbackTabBadge,
-          feedbackTabSlot: spanFeedbackTabSlot
-        }
-      ) : null
-    }
-  );
+    )
+  ] });
 }
 
 exports.TraceSpanPanel = TraceSpanPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-panel.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { SpanDataPanelView } from '@/domains/traces/components/span-data-panel-view';\nimport { TraceDataPanel } from '@/domains/traces/components/trace-data-panel';\nimport type { TraceDataPanelView } from '@/domains/traces/components/trace-data-panel-view';\nimport { TraceMessagesPanel } from '@/domains/traces/components/trace-messages-panel';\nimport { getTraceThreadId } from '@/domains/traces/components/trace-thread-context';\nimport { TraceThreadPanel } from '@/domains/traces/components/trace-thread-panel';\nimport { useSpanDetail } from '@/domains/traces/hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '@/domains/traces/hooks/use-trace-span-navigation';\nimport { useLinkComponent } from '@/lib/framework';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype TraceDataPanelViewProps = ComponentProps<typeof TraceDataPanelView>;\n\nfunction getEntityHref(\n  paths: LinkComponentPaths,\n  entityType: string | null | undefined,\n  entityId: string | null | undefined,\n) {\n  if (!entityId || !entityType) return undefined;\n  const normalizedEntityType = entityType.toLowerCase();\n  if (normalizedEntityType.includes('workflow')) return paths.workflowLink(entityId) || undefined;\n  if (normalizedEntityType.includes('agent')) return paths.agentLink(entityId) || undefined;\n  return undefined;\n}\ntype SpanDataPanelViewProps = ComponentProps<typeof SpanDataPanelView>;\n\nexport interface TraceSpanPanelProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Spans returned by `useTraceOrBranchSpans` — the page owns the fetch, the panel renders it. */\n  spans: TraceDataPanelViewProps['spans'];\n  isLoadingSpans: boolean;\n  /** Controlled span selection (URL state on the traces page, local state in the chat aside). */\n  selectedSpanId: string | null;\n  onSpanSelect: (spanId: string | undefined) => void;\n  onClose: () => void;\n\n  // Trace-panel pass-through.\n  anchorSpanId?: string;\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  onSaveAsDatasetItem?: TraceDataPanelViewProps['onSaveAsDatasetItem'];\n  onAddTraceMocksToItem?: TraceDataPanelViewProps['onAddTraceMocksToItem'];\n  feedbackTabBadge?: ReactNode;\n  feedbackTabSlot?: TraceDataPanelViewProps['feedbackTabSlot'];\n  /** Enables the \"Messages\" column (reconstructed turn) when the displayed root is a complete agent trace with a thread id. */\n  showPartialThread?: boolean;\n  /** Span ids featured in the timeline (non-featured spans are faded). */\n  featuredSpanIds?: string[];\n  /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  /** When true, the whole panel shows the trace's thread (every turn) instead of the trace timeline. */\n  isFullThreadOpen?: boolean;\n  /** Enables the in-place \"Open full thread\" swap; without it the action falls back to a link. */\n  onFullThreadOpenChange?: (open: boolean) => void;\n  /** Full-thread view: lists through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Full-thread view: shows the per-trace Feedback tab. */\n  withFeedback: boolean;\n  /** Full-thread view: opens a score of one of the thread's traces (the app owns routing). */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  scoresTabBadge?: ReactNode;\n  scoresTabSlot?: TraceDataPanelViewProps['scoresTabSlot'];\n  usage?: TraceDataPanelViewProps['usage'];\n  traceHref?: string;\n  /** Drawer width; defaults to `wide`. */\n  size?: TraceDataPanelViewProps['size'];\n  /** Sibling-drawer elevation (see `DataPanel`). */\n  depth?: TraceDataPanelViewProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. feedback context). */\n  headerSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  showUnavailableFeaturesMsg?: TraceDataPanelViewProps['showUnavailableFeaturesMsg'];\n  spanView?: TraceDataPanelViewProps['spanView'];\n  onSpanViewChange?: TraceDataPanelViewProps['onSpanViewChange'];\n\n  // Span-panel pass-through.\n  spanActiveTab?: string;\n  onSpanTabChange?: (tab: string) => void;\n  spanFeedbackTabBadge?: ReactNode;\n  spanFeedbackTabSlot?: SpanDataPanelViewProps['feedbackTabSlot'];\n}\n\n/**\n * Shared trace → span drilldown drawer: `TraceDataPanel` with a nested `SpanDataPanelView`.\n * Encapsulates the span-detail fetch and prev/next span navigation that the traces page\n * and the agent chat traces aside used to duplicate.\n */\nexport function TraceSpanPanel({\n  traceId,\n  spans,\n  isLoadingSpans,\n  selectedSpanId,\n  onSpanSelect,\n  onClose,\n  anchorSpanId,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  onSaveAsDatasetItem,\n  onAddTraceMocksToItem,\n  feedbackTabBadge,\n  feedbackTabSlot,\n  showPartialThread,\n  featuredSpanIds,\n  onHighlightSpans,\n  isFullThreadOpen,\n  onFullThreadOpenChange,\n  withQueryTrace,\n  withFeedback,\n  onOpenScore,\n  scoresTabBadge,\n  scoresTabSlot,\n  usage,\n  traceHref,\n  size,\n  depth,\n  headerSlot,\n  title,\n  showUnavailableFeaturesMsg,\n  spanView,\n  onSpanViewChange,\n  spanActiveTab,\n  onSpanTabChange,\n  spanFeedbackTabBadge,\n  spanFeedbackTabSlot,\n}: TraceSpanPanelProps) {\n  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail(traceId, selectedSpanId ?? '');\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(spans, selectedSpanId, onSpanSelect);\n  const { Link, paths } = useLinkComponent();\n\n  // The trace summary links the entity to its page; the app's link provider owns the routes.\n  const rootSpan = anchorSpanId\n    ? spans?.find(s => s.spanId === anchorSpanId)\n    : spans?.find(s => s.parentSpanId == null);\n  const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);\n  const threadId = getTraceThreadId(rootSpan, anchorSpanId);\n\n  if (traceId && isFullThreadOpen && threadId) {\n    return (\n      <TraceThreadPanel\n        title={title}\n        threadId={threadId}\n        onOpenScore={onOpenScore}\n        withQueryTrace={withQueryTrace}\n        withFeedback={withFeedback}\n        onBack={() => onFullThreadOpenChange?.(false)}\n        onClose={onClose}\n      />\n    );\n  }\n\n  return (\n    <TraceDataPanel\n      traceId={traceId}\n      spans={spans}\n      anchorSpanId={anchorSpanId}\n      entityHref={entityHref}\n      usage={usage}\n      isLoading={isLoadingSpans}\n      onClose={onClose}\n      onSpanSelect={onSpanSelect}\n      onSaveAsDatasetItem={onSaveAsDatasetItem}\n      onAddTraceMocksToItem={onAddTraceMocksToItem}\n      initialSpanId={initialSpanId ?? selectedSpanId}\n      onPrevious={onPrevious}\n      onNext={onNext}\n      placement=\"traces-list\"\n      LinkComponent={Link}\n      traceHref={traceHref}\n      size={size}\n      depth={depth}\n      headerSlot={headerSlot}\n      title={title}\n      showUnavailableFeaturesMsg={showUnavailableFeaturesMsg}\n      spanView={spanView}\n      onSpanViewChange={onSpanViewChange}\n      feedbackTabBadge={feedbackTabBadge}\n      feedbackTabSlot={feedbackTabSlot}\n      featuredSpanIds={featuredSpanIds}\n      messagesPanelSlot={\n        traceId && showPartialThread && threadId ? (\n          <TraceMessagesPanel\n            traceId={traceId}\n            threadId={threadId}\n            onViewFullThread={onFullThreadOpenChange ? () => onFullThreadOpenChange(true) : undefined}\n            onHighlightSpans={onHighlightSpans}\n          />\n        ) : undefined\n      }\n      scoresTabBadge={scoresTabBadge}\n      scoresTabSlot={scoresTabSlot}\n      spanPanelSlot={\n        traceId && selectedSpanId ? (\n          <SpanDataPanelView\n            traceId={traceId}\n            spanId={selectedSpanId}\n            span={spanDetailData?.span}\n            isAnchor={anchorSpanId ? selectedSpanId === anchorSpanId : undefined}\n            isLoading={isLoadingSpanDetail}\n            onPrevious={handlePreviousSpan}\n            onNext={handleNextSpan}\n            activeTab={spanActiveTab}\n            onTabChange={onSpanTabChange}\n            feedbackTabBadge={spanFeedbackTabBadge}\n            feedbackTabSlot={spanFeedbackTabSlot}\n          />\n        ) : null\n      }\n    />\n  );\n}\n"],"names":["useSpanDetail","useTraceSpanNavigation","useLinkComponent","getTraceThreadId","jsx","TraceThreadPanel","TraceDataPanel","TraceMessagesPanel","SpanDataPanelView"],"mappings":"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"}
+{"version":3,"file":"trace-span-panel.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-panel.tsx"],"sourcesContent":["import { MessagesSquareIcon } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { SpanDataPanelView } from '@/domains/traces/components/span-data-panel-view';\nimport { TraceDataPanel } from '@/domains/traces/components/trace-data-panel';\nimport type { TraceDataPanelView } from '@/domains/traces/components/trace-data-panel-view';\nimport { TraceMessagesPanel } from '@/domains/traces/components/trace-messages-panel';\nimport { getTraceThreadId } from '@/domains/traces/components/trace-thread-context';\nimport { TraceThreadPanel } from '@/domains/traces/components/trace-thread-panel';\nimport { useSpanDetail } from '@/domains/traces/hooks/use-span-detail';\nimport { useThreadHasOtherTraces } from '@/domains/traces/hooks/use-thread-has-other-traces';\nimport { useTraceSpanNavigation } from '@/domains/traces/hooks/use-trace-span-navigation';\nimport { Button } from '@/ds/components/Button';\nimport { useLinkComponent } from '@/lib/framework';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype TraceDataPanelViewProps = ComponentProps<typeof TraceDataPanelView>;\n\nfunction getEntityHref(\n  paths: LinkComponentPaths,\n  entityType: string | null | undefined,\n  entityId: string | null | undefined,\n) {\n  if (!entityId || !entityType) return undefined;\n  const normalizedEntityType = entityType.toLowerCase();\n  if (normalizedEntityType.includes('workflow')) return paths.workflowLink(entityId) || undefined;\n  if (normalizedEntityType.includes('agent')) return paths.agentLink(entityId) || undefined;\n  return undefined;\n}\ntype SpanDataPanelViewProps = ComponentProps<typeof SpanDataPanelView>;\n\nexport interface TraceSpanPanelProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Spans returned by `useTraceOrBranchSpans` — the page owns the fetch, the panel renders it. */\n  spans: TraceDataPanelViewProps['spans'];\n  isLoadingSpans: boolean;\n  /** Controlled span selection (URL state on the traces page, local state in the chat aside). */\n  selectedSpanId: string | null;\n  onSpanSelect: (spanId: string | undefined) => void;\n  onClose: () => void;\n\n  // Trace-panel pass-through.\n  anchorSpanId?: string;\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  onSaveAsDatasetItem?: TraceDataPanelViewProps['onSaveAsDatasetItem'];\n  onAddTraceMocksToItem?: TraceDataPanelViewProps['onAddTraceMocksToItem'];\n  feedbackTabBadge?: ReactNode;\n  feedbackTabSlot?: TraceDataPanelViewProps['feedbackTabSlot'];\n  /** Enables the \"Messages\" column (reconstructed turn) when the displayed root is a complete agent trace with a thread id. */\n  showPartialThread?: boolean;\n  /** Span ids featured in the timeline (non-featured spans are faded). */\n  featuredSpanIds?: string[];\n  /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  /** When true, opens the trace's thread (every turn) in a stacked drawer above the trace panel. */\n  isFullThreadOpen?: boolean;\n  /** Enables the in-place \"Open full thread\" swap; without it the action falls back to a link. */\n  onFullThreadOpenChange?: (open: boolean) => void;\n  /** Full-thread view: lists through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Full-thread view: shows the per-trace Feedback tab. */\n  withFeedback: boolean;\n  /** Full-thread view: opens a score of one of the thread's traces (the app owns routing). */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  scoresTabBadge?: ReactNode;\n  scoresTabSlot?: TraceDataPanelViewProps['scoresTabSlot'];\n  usage?: TraceDataPanelViewProps['usage'];\n  traceHref?: string;\n  /** Drawer width; defaults to `wide`. */\n  size?: TraceDataPanelViewProps['size'];\n  /** Sibling-drawer elevation (see `DataPanel`). */\n  depth?: TraceDataPanelViewProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. feedback context). */\n  headerSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  showUnavailableFeaturesMsg?: TraceDataPanelViewProps['showUnavailableFeaturesMsg'];\n  spanView?: TraceDataPanelViewProps['spanView'];\n  onSpanViewChange?: TraceDataPanelViewProps['onSpanViewChange'];\n\n  // Span-panel pass-through.\n  spanActiveTab?: string;\n  onSpanTabChange?: (tab: string) => void;\n  spanFeedbackTabBadge?: ReactNode;\n  spanFeedbackTabSlot?: SpanDataPanelViewProps['feedbackTabSlot'];\n}\n\n/**\n * Shared trace → span drilldown drawer: `TraceDataPanel` with a nested `SpanDataPanelView`.\n * Encapsulates the span-detail fetch and prev/next span navigation that the traces page\n * and the agent chat traces aside used to duplicate.\n */\nexport function TraceSpanPanel({\n  traceId,\n  spans,\n  isLoadingSpans,\n  selectedSpanId,\n  onSpanSelect,\n  onClose,\n  anchorSpanId,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  onSaveAsDatasetItem,\n  onAddTraceMocksToItem,\n  feedbackTabBadge,\n  feedbackTabSlot,\n  showPartialThread,\n  featuredSpanIds,\n  onHighlightSpans,\n  isFullThreadOpen,\n  onFullThreadOpenChange,\n  withQueryTrace,\n  withFeedback,\n  onOpenScore,\n  scoresTabBadge,\n  scoresTabSlot,\n  usage,\n  traceHref,\n  size,\n  depth,\n  headerSlot,\n  title,\n  showUnavailableFeaturesMsg,\n  spanView,\n  onSpanViewChange,\n  spanActiveTab,\n  onSpanTabChange,\n  spanFeedbackTabBadge,\n  spanFeedbackTabSlot,\n}: TraceSpanPanelProps) {\n  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail(traceId, selectedSpanId ?? '');\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(spans, selectedSpanId, onSpanSelect);\n  const { Link, paths } = useLinkComponent();\n\n  // The trace summary links the entity to its page; the app's link provider owns the routes.\n  const rootSpan = anchorSpanId\n    ? spans?.find(s => s.spanId === anchorSpanId)\n    : spans?.find(s => s.parentSpanId == null);\n  const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);\n  const threadId = getTraceThreadId(rootSpan, anchorSpanId);\n  const hasMessagesPanel = !!(traceId && showPartialThread && threadId);\n  // A single-trace thread would show exactly what the Messages column already shows.\n  const hasOtherTraces = useThreadHasOtherTraces(hasMessagesPanel ? threadId : undefined);\n  const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;\n\n  return (\n    <>\n      <TraceDataPanel\n        traceId={traceId}\n        spans={spans}\n        anchorSpanId={anchorSpanId}\n        entityHref={entityHref}\n        usage={usage}\n        isLoading={isLoadingSpans}\n        onClose={onClose}\n        onSpanSelect={onSpanSelect}\n        onSaveAsDatasetItem={onSaveAsDatasetItem}\n        onAddTraceMocksToItem={onAddTraceMocksToItem}\n        initialSpanId={initialSpanId ?? selectedSpanId}\n        onPrevious={onPrevious}\n        onNext={onNext}\n        placement=\"traces-list\"\n        LinkComponent={Link}\n        traceHref={traceHref}\n        size={size}\n        depth={depth}\n        headerSlot={headerSlot}\n        title={title}\n        showUnavailableFeaturesMsg={showUnavailableFeaturesMsg}\n        spanView={spanView}\n        onSpanViewChange={onSpanViewChange}\n        feedbackTabBadge={feedbackTabBadge}\n        feedbackTabSlot={feedbackTabSlot}\n        featuredSpanIds={featuredSpanIds}\n        messagesPanelSlot={\n          hasMessagesPanel ? <TraceMessagesPanel traceId={traceId} onHighlightSpans={onHighlightSpans} /> : undefined\n        }\n        sideHeaderActions={\n          showFullThreadAction\n            ? ({ compact }) => (\n                <Button\n                  tooltip={compact ? 'Open full thread' : undefined}\n                  icon={<MessagesSquareIcon />}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  // At a side column of 500px or less, collapse to a round icon button; the label stays for screen readers.\n                  className=\"@max-[501px]:w-control-sm @max-[501px]:rounded-full @max-[501px]:px-0 @max-[501px]:[&>[data-slot=button-icon]]:ml-0\"\n                  onClick={() => onFullThreadOpenChange(true)}\n                >\n                  <span className=\"@max-[501px]:sr-only\">Open full thread</span>\n                </Button>\n              )\n            : undefined\n        }\n        scoresTabBadge={scoresTabBadge}\n        scoresTabSlot={scoresTabSlot}\n        spanPanelSlot={\n          traceId && selectedSpanId ? (\n            <SpanDataPanelView\n              traceId={traceId}\n              spanId={selectedSpanId}\n              span={spanDetailData?.span}\n              isAnchor={anchorSpanId ? selectedSpanId === anchorSpanId : undefined}\n              isLoading={isLoadingSpanDetail}\n              onPrevious={handlePreviousSpan}\n              onNext={handleNextSpan}\n              onClose={() => onSpanSelect(undefined)}\n              activeTab={spanActiveTab}\n              onTabChange={onSpanTabChange}\n              feedbackTabBadge={spanFeedbackTabBadge}\n              feedbackTabSlot={spanFeedbackTabSlot}\n            />\n          ) : null\n        }\n      />\n      {/* Rendered after the trace panel: DataPanel stacking follows DOM order. */}\n      <TraceThreadPanel\n        open={!!(traceId && isFullThreadOpen && threadId)}\n        depth={depth && depth > 1 ? 3 : 2}\n        threadId={threadId ?? ''}\n        onOpenScore={onOpenScore}\n        withQueryTrace={withQueryTrace}\n        withFeedback={withFeedback}\n        onClose={() => onFullThreadOpenChange?.(false)}\n      />\n    </>\n  );\n}\n"],"names":["useSpanDetail","useTraceSpanNavigation","useLinkComponent","getTraceThreadId","useThreadHasOtherTraces","jsxs","Fragment","jsx","TraceDataPanel","TraceMessagesPanel","Button","MessagesSquareIcon","SpanDataPanelView","TraceThreadPanel"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAS,aAAA,CACP,KAAA,EACA,UAAA,EACA,QAAA,EACA;AACA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,UAAA,EAAY,OAAO,MAAA;AACrC,EAAA,MAAM,oBAAA,GAAuB,WAAW,WAAA,EAAY;AACpD,EAAA,IAAI,oBAAA,CAAqB,SAAS,UAAU,CAAA,SAAU,KAAA,CAAM,YAAA,CAAa,QAAQ,CAAA,IAAK,MAAA;AACtF,EAAA,IAAI,oBAAA,CAAqB,SAAS,OAAO,CAAA,SAAU,KAAA,CAAM,SAAA,CAAU,QAAQ,CAAA,IAAK,MAAA;AAChF,EAAA,OAAO,MAAA;AACT;AAmEO,SAAS,cAAA,CAAe;AAAA,EAC7B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,mBAAA;AAAA,EACA,qBAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,sBAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,0BAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,MAAM,EAAE,MAAM,cAAA,EAAgB,SAAA,EAAW,qBAAoB,GAAIA,gDAAA,CAAc,OAAA,EAAS,cAAA,IAAkB,EAAE,CAAA;AAC5G,EAAA,MAAM,EAAE,kBAAA,EAAoB,cAAA,KAAmBC,kEAAA,CAAuB,KAAA,EAAO,gBAAgB,YAAY,CAAA;AACzG,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAM,GAAIC,8BAAA,EAAiB;AAGzC,EAAA,MAAM,QAAA,GAAW,YAAA,GACb,KAAA,EAAO,IAAA,CAAK,OAAK,CAAA,CAAE,MAAA,KAAW,YAAY,CAAA,GAC1C,KAAA,EAAO,IAAA,CAAK,CAAA,CAAA,KAAK,CAAA,CAAE,gBAAgB,IAAI,CAAA;AAC3C,EAAA,MAAM,aAAa,aAAA,CAAc,KAAA,EAAO,QAAA,EAAU,UAAA,EAAY,UAAU,QAAQ,CAAA;AAChF,EAAA,MAAM,QAAA,GAAWC,6DAAA,CAAiB,QAAA,EAAU,YAAY,CAAA;AACxD,EAAA,MAAM,gBAAA,GAAmB,CAAC,EAAE,OAAA,IAAW,iBAAA,IAAqB,QAAA,CAAA;AAE5D,EAAA,MAAM,cAAA,GAAiBC,oEAAA,CAAwB,gBAAA,GAAmB,QAAA,GAAW,MAAS,CAAA;AACtF,EAAA,MAAM,oBAAA,GAAuB,gBAAA,IAAoB,cAAA,IAAkB,CAAC,CAAC,sBAAA;AAErE,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,uDAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,KAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA,EAAW,cAAA;AAAA,QACX,OAAA;AAAA,QACA,YAAA;AAAA,QACA,mBAAA;AAAA,QACA,qBAAA;AAAA,QACA,eAAe,aAAA,IAAiB,cAAA;AAAA,QAChC,UAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA,EAAU,aAAA;AAAA,QACV,aAAA,EAAe,IAAA;AAAA,QACf,SAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,UAAA;AAAA,QACA,KAAA;AAAA,QACA,0BAAA;AAAA,QACA,QAAA;AAAA,QACA,gBAAA;AAAA,QACA,gBAAA;AAAA,QACA,eAAA;AAAA,QACA,eAAA;AAAA,QACA,mBACE,gBAAA,mBAAmBD,cAAA,CAACE,+DAAA,EAAA,EAAmB,OAAA,EAAkB,kBAAoC,CAAA,GAAK,MAAA;AAAA,QAEpG,iBAAA,EACE,oBAAA,GACI,CAAC,EAAE,SAAQ,qBACTF,cAAA;AAAA,UAACG,aAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,UAAU,kBAAA,GAAqB,MAAA;AAAA,YACxC,IAAA,iCAAOC,8BAAA,EAAA,EAAmB,CAAA;AAAA,YAC1B,OAAA,EAAQ,OAAA;AAAA,YACR,IAAA,EAAK,IAAA;AAAA,YAEL,SAAA,EAAU,qHAAA;AAAA,YACV,OAAA,EAAS,MAAM,sBAAA,CAAuB,IAAI,CAAA;AAAA,YAE1C,QAAA,kBAAAJ,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EAAuB,QAAA,EAAA,kBAAA,EAAgB;AAAA;AAAA,SACzD,GAEF,MAAA;AAAA,QAEN,cAAA;AAAA,QACA,aAAA;AAAA,QACA,aAAA,EACE,WAAW,cAAA,mBACTA,cAAA;AAAA,UAACK,6DAAA;AAAA,UAAA;AAAA,YACC,OAAA;AAAA,YACA,MAAA,EAAQ,cAAA;AAAA,YACR,MAAM,cAAA,EAAgB,IAAA;AAAA,YACtB,QAAA,EAAU,YAAA,GAAe,cAAA,KAAmB,YAAA,GAAe,MAAA;AAAA,YAC3D,SAAA,EAAW,mBAAA;AAAA,YACX,UAAA,EAAY,kBAAA;AAAA,YACZ,MAAA,EAAQ,cAAA;AAAA,YACR,OAAA,EAAS,MAAM,YAAA,CAAa,MAAS,CAAA;AAAA,YACrC,SAAA,EAAW,aAAA;AAAA,YACX,WAAA,EAAa,eAAA;AAAA,YACb,gBAAA,EAAkB,oBAAA;AAAA,YAClB,eAAA,EAAiB;AAAA;AAAA,SACnB,GACE;AAAA;AAAA,KAER;AAAA,oBAEAL,cAAA;AAAA,MAACM,2DAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,CAAC,EAAE,OAAA,IAAW,gBAAA,IAAoB,QAAA,CAAA;AAAA,QACxC,KAAA,EAAO,KAAA,IAAS,KAAA,GAAQ,CAAA,GAAI,CAAA,GAAI,CAAA;AAAA,QAChC,UAAU,QAAA,IAAY,EAAA;AAAA,QACtB,WAAA;AAAA,QACA,cAAA;AAAA,QACA,YAAA;AAAA,QACA,OAAA,EAAS,MAAM,sBAAA,GAAyB,KAAK;AAAA;AAAA;AAC/C,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,11 +1,14 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { MessagesSquareIcon } from 'lucide-react';
 import { SpanDataPanelView } from './span-data-panel-view.es.js';
 import { TraceDataPanel } from './trace-data-panel.es.js';
 import { TraceMessagesPanel } from './trace-messages-panel.es.js';
 import { getTraceThreadId } from './trace-thread-context.es.js';
 import { TraceThreadPanel } from './trace-thread-panel.es.js';
 import { useSpanDetail } from '../hooks/use-span-detail.es.js';
+import { useThreadHasOtherTraces } from '../hooks/use-thread-has-other-traces.es.js';
 import { useTraceSpanNavigation } from '../hooks/use-trace-span-navigation.es.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { useLinkComponent } from '../../../lib/framework.es.js';
 
 function getEntityHref(paths, entityType, entityId) {
@@ -60,78 +63,86 @@ function TraceSpanPanel({
   const rootSpan = anchorSpanId ? spans?.find((s) => s.spanId === anchorSpanId) : spans?.find((s) => s.parentSpanId == null);
   const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);
   const threadId = getTraceThreadId(rootSpan, anchorSpanId);
-  if (traceId && isFullThreadOpen && threadId) {
-    return /* @__PURE__ */ jsx(
-      TraceThreadPanel,
+  const hasMessagesPanel = !!(traceId && showPartialThread && threadId);
+  const hasOtherTraces = useThreadHasOtherTraces(hasMessagesPanel ? threadId : void 0);
+  const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TraceDataPanel,
       {
+        traceId,
+        spans,
+        anchorSpanId,
+        entityHref,
+        usage,
+        isLoading: isLoadingSpans,
+        onClose,
+        onSpanSelect,
+        onSaveAsDatasetItem,
+        onAddTraceMocksToItem,
+        initialSpanId: initialSpanId ?? selectedSpanId,
+        onPrevious,
+        onNext,
+        placement: "traces-list",
+        LinkComponent: Link,
+        traceHref,
+        size,
+        depth,
+        headerSlot,
         title,
-        threadId,
+        showUnavailableFeaturesMsg,
+        spanView,
+        onSpanViewChange,
+        feedbackTabBadge,
+        feedbackTabSlot,
+        featuredSpanIds,
+        messagesPanelSlot: hasMessagesPanel ? /* @__PURE__ */ jsx(TraceMessagesPanel, { traceId, onHighlightSpans }) : void 0,
+        sideHeaderActions: showFullThreadAction ? ({ compact }) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            tooltip: compact ? "Open full thread" : void 0,
+            icon: /* @__PURE__ */ jsx(MessagesSquareIcon, {}),
+            variant: "ghost",
+            size: "sm",
+            className: "@max-[501px]:w-control-sm @max-[501px]:rounded-full @max-[501px]:px-0 @max-[501px]:[&>[data-slot=button-icon]]:ml-0",
+            onClick: () => onFullThreadOpenChange(true),
+            children: /* @__PURE__ */ jsx("span", { className: "@max-[501px]:sr-only", children: "Open full thread" })
+          }
+        ) : void 0,
+        scoresTabBadge,
+        scoresTabSlot,
+        spanPanelSlot: traceId && selectedSpanId ? /* @__PURE__ */ jsx(
+          SpanDataPanelView,
+          {
+            traceId,
+            spanId: selectedSpanId,
+            span: spanDetailData?.span,
+            isAnchor: anchorSpanId ? selectedSpanId === anchorSpanId : void 0,
+            isLoading: isLoadingSpanDetail,
+            onPrevious: handlePreviousSpan,
+            onNext: handleNextSpan,
+            onClose: () => onSpanSelect(void 0),
+            activeTab: spanActiveTab,
+            onTabChange: onSpanTabChange,
+            feedbackTabBadge: spanFeedbackTabBadge,
+            feedbackTabSlot: spanFeedbackTabSlot
+          }
+        ) : null
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TraceThreadPanel,
+      {
+        open: !!(traceId && isFullThreadOpen && threadId),
+        depth: depth && depth > 1 ? 3 : 2,
+        threadId: threadId ?? "",
         onOpenScore,
         withQueryTrace,
         withFeedback,
-        onBack: () => onFullThreadOpenChange?.(false),
-        onClose
+        onClose: () => onFullThreadOpenChange?.(false)
       }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    TraceDataPanel,
-    {
-      traceId,
-      spans,
-      anchorSpanId,
-      entityHref,
-      usage,
-      isLoading: isLoadingSpans,
-      onClose,
-      onSpanSelect,
-      onSaveAsDatasetItem,
-      onAddTraceMocksToItem,
-      initialSpanId: initialSpanId ?? selectedSpanId,
-      onPrevious,
-      onNext,
-      placement: "traces-list",
-      LinkComponent: Link,
-      traceHref,
-      size,
-      depth,
-      headerSlot,
-      title,
-      showUnavailableFeaturesMsg,
-      spanView,
-      onSpanViewChange,
-      feedbackTabBadge,
-      feedbackTabSlot,
-      featuredSpanIds,
-      messagesPanelSlot: traceId && showPartialThread && threadId ? /* @__PURE__ */ jsx(
-        TraceMessagesPanel,
-        {
-          traceId,
-          threadId,
-          onViewFullThread: onFullThreadOpenChange ? () => onFullThreadOpenChange(true) : void 0,
-          onHighlightSpans
-        }
-      ) : void 0,
-      scoresTabBadge,
-      scoresTabSlot,
-      spanPanelSlot: traceId && selectedSpanId ? /* @__PURE__ */ jsx(
-        SpanDataPanelView,
-        {
-          traceId,
-          spanId: selectedSpanId,
-          span: spanDetailData?.span,
-          isAnchor: anchorSpanId ? selectedSpanId === anchorSpanId : void 0,
-          isLoading: isLoadingSpanDetail,
-          onPrevious: handlePreviousSpan,
-          onNext: handleNextSpan,
-          activeTab: spanActiveTab,
-          onTabChange: onSpanTabChange,
-          feedbackTabBadge: spanFeedbackTabBadge,
-          feedbackTabSlot: spanFeedbackTabSlot
-        }
-      ) : null
-    }
-  );
+    )
+  ] });
 }
 
 export { TraceSpanPanel };

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-panel.es.js","sources":["../../../../src/domains/traces/components/trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { SpanDataPanelView } from '@/domains/traces/components/span-data-panel-view';\nimport { TraceDataPanel } from '@/domains/traces/components/trace-data-panel';\nimport type { TraceDataPanelView } from '@/domains/traces/components/trace-data-panel-view';\nimport { TraceMessagesPanel } from '@/domains/traces/components/trace-messages-panel';\nimport { getTraceThreadId } from '@/domains/traces/components/trace-thread-context';\nimport { TraceThreadPanel } from '@/domains/traces/components/trace-thread-panel';\nimport { useSpanDetail } from '@/domains/traces/hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '@/domains/traces/hooks/use-trace-span-navigation';\nimport { useLinkComponent } from '@/lib/framework';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype TraceDataPanelViewProps = ComponentProps<typeof TraceDataPanelView>;\n\nfunction getEntityHref(\n  paths: LinkComponentPaths,\n  entityType: string | null | undefined,\n  entityId: string | null | undefined,\n) {\n  if (!entityId || !entityType) return undefined;\n  const normalizedEntityType = entityType.toLowerCase();\n  if (normalizedEntityType.includes('workflow')) return paths.workflowLink(entityId) || undefined;\n  if (normalizedEntityType.includes('agent')) return paths.agentLink(entityId) || undefined;\n  return undefined;\n}\ntype SpanDataPanelViewProps = ComponentProps<typeof SpanDataPanelView>;\n\nexport interface TraceSpanPanelProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Spans returned by `useTraceOrBranchSpans` — the page owns the fetch, the panel renders it. */\n  spans: TraceDataPanelViewProps['spans'];\n  isLoadingSpans: boolean;\n  /** Controlled span selection (URL state on the traces page, local state in the chat aside). */\n  selectedSpanId: string | null;\n  onSpanSelect: (spanId: string | undefined) => void;\n  onClose: () => void;\n\n  // Trace-panel pass-through.\n  anchorSpanId?: string;\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  onSaveAsDatasetItem?: TraceDataPanelViewProps['onSaveAsDatasetItem'];\n  onAddTraceMocksToItem?: TraceDataPanelViewProps['onAddTraceMocksToItem'];\n  feedbackTabBadge?: ReactNode;\n  feedbackTabSlot?: TraceDataPanelViewProps['feedbackTabSlot'];\n  /** Enables the \"Messages\" column (reconstructed turn) when the displayed root is a complete agent trace with a thread id. */\n  showPartialThread?: boolean;\n  /** Span ids featured in the timeline (non-featured spans are faded). */\n  featuredSpanIds?: string[];\n  /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  /** When true, the whole panel shows the trace's thread (every turn) instead of the trace timeline. */\n  isFullThreadOpen?: boolean;\n  /** Enables the in-place \"Open full thread\" swap; without it the action falls back to a link. */\n  onFullThreadOpenChange?: (open: boolean) => void;\n  /** Full-thread view: lists through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Full-thread view: shows the per-trace Feedback tab. */\n  withFeedback: boolean;\n  /** Full-thread view: opens a score of one of the thread's traces (the app owns routing). */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  scoresTabBadge?: ReactNode;\n  scoresTabSlot?: TraceDataPanelViewProps['scoresTabSlot'];\n  usage?: TraceDataPanelViewProps['usage'];\n  traceHref?: string;\n  /** Drawer width; defaults to `wide`. */\n  size?: TraceDataPanelViewProps['size'];\n  /** Sibling-drawer elevation (see `DataPanel`). */\n  depth?: TraceDataPanelViewProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. feedback context). */\n  headerSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  showUnavailableFeaturesMsg?: TraceDataPanelViewProps['showUnavailableFeaturesMsg'];\n  spanView?: TraceDataPanelViewProps['spanView'];\n  onSpanViewChange?: TraceDataPanelViewProps['onSpanViewChange'];\n\n  // Span-panel pass-through.\n  spanActiveTab?: string;\n  onSpanTabChange?: (tab: string) => void;\n  spanFeedbackTabBadge?: ReactNode;\n  spanFeedbackTabSlot?: SpanDataPanelViewProps['feedbackTabSlot'];\n}\n\n/**\n * Shared trace → span drilldown drawer: `TraceDataPanel` with a nested `SpanDataPanelView`.\n * Encapsulates the span-detail fetch and prev/next span navigation that the traces page\n * and the agent chat traces aside used to duplicate.\n */\nexport function TraceSpanPanel({\n  traceId,\n  spans,\n  isLoadingSpans,\n  selectedSpanId,\n  onSpanSelect,\n  onClose,\n  anchorSpanId,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  onSaveAsDatasetItem,\n  onAddTraceMocksToItem,\n  feedbackTabBadge,\n  feedbackTabSlot,\n  showPartialThread,\n  featuredSpanIds,\n  onHighlightSpans,\n  isFullThreadOpen,\n  onFullThreadOpenChange,\n  withQueryTrace,\n  withFeedback,\n  onOpenScore,\n  scoresTabBadge,\n  scoresTabSlot,\n  usage,\n  traceHref,\n  size,\n  depth,\n  headerSlot,\n  title,\n  showUnavailableFeaturesMsg,\n  spanView,\n  onSpanViewChange,\n  spanActiveTab,\n  onSpanTabChange,\n  spanFeedbackTabBadge,\n  spanFeedbackTabSlot,\n}: TraceSpanPanelProps) {\n  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail(traceId, selectedSpanId ?? '');\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(spans, selectedSpanId, onSpanSelect);\n  const { Link, paths } = useLinkComponent();\n\n  // The trace summary links the entity to its page; the app's link provider owns the routes.\n  const rootSpan = anchorSpanId\n    ? spans?.find(s => s.spanId === anchorSpanId)\n    : spans?.find(s => s.parentSpanId == null);\n  const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);\n  const threadId = getTraceThreadId(rootSpan, anchorSpanId);\n\n  if (traceId && isFullThreadOpen && threadId) {\n    return (\n      <TraceThreadPanel\n        title={title}\n        threadId={threadId}\n        onOpenScore={onOpenScore}\n        withQueryTrace={withQueryTrace}\n        withFeedback={withFeedback}\n        onBack={() => onFullThreadOpenChange?.(false)}\n        onClose={onClose}\n      />\n    );\n  }\n\n  return (\n    <TraceDataPanel\n      traceId={traceId}\n      spans={spans}\n      anchorSpanId={anchorSpanId}\n      entityHref={entityHref}\n      usage={usage}\n      isLoading={isLoadingSpans}\n      onClose={onClose}\n      onSpanSelect={onSpanSelect}\n      onSaveAsDatasetItem={onSaveAsDatasetItem}\n      onAddTraceMocksToItem={onAddTraceMocksToItem}\n      initialSpanId={initialSpanId ?? selectedSpanId}\n      onPrevious={onPrevious}\n      onNext={onNext}\n      placement=\"traces-list\"\n      LinkComponent={Link}\n      traceHref={traceHref}\n      size={size}\n      depth={depth}\n      headerSlot={headerSlot}\n      title={title}\n      showUnavailableFeaturesMsg={showUnavailableFeaturesMsg}\n      spanView={spanView}\n      onSpanViewChange={onSpanViewChange}\n      feedbackTabBadge={feedbackTabBadge}\n      feedbackTabSlot={feedbackTabSlot}\n      featuredSpanIds={featuredSpanIds}\n      messagesPanelSlot={\n        traceId && showPartialThread && threadId ? (\n          <TraceMessagesPanel\n            traceId={traceId}\n            threadId={threadId}\n            onViewFullThread={onFullThreadOpenChange ? () => onFullThreadOpenChange(true) : undefined}\n            onHighlightSpans={onHighlightSpans}\n          />\n        ) : undefined\n      }\n      scoresTabBadge={scoresTabBadge}\n      scoresTabSlot={scoresTabSlot}\n      spanPanelSlot={\n        traceId && selectedSpanId ? (\n          <SpanDataPanelView\n            traceId={traceId}\n            spanId={selectedSpanId}\n            span={spanDetailData?.span}\n            isAnchor={anchorSpanId ? selectedSpanId === anchorSpanId : undefined}\n            isLoading={isLoadingSpanDetail}\n            onPrevious={handlePreviousSpan}\n            onNext={handleNextSpan}\n            activeTab={spanActiveTab}\n            onTabChange={onSpanTabChange}\n            feedbackTabBadge={spanFeedbackTabBadge}\n            feedbackTabSlot={spanFeedbackTabSlot}\n          />\n        ) : null\n      }\n    />\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"trace-span-panel.es.js","sources":["../../../../src/domains/traces/components/trace-span-panel.tsx"],"sourcesContent":["import { MessagesSquareIcon } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { SpanDataPanelView } from '@/domains/traces/components/span-data-panel-view';\nimport { TraceDataPanel } from '@/domains/traces/components/trace-data-panel';\nimport type { TraceDataPanelView } from '@/domains/traces/components/trace-data-panel-view';\nimport { TraceMessagesPanel } from '@/domains/traces/components/trace-messages-panel';\nimport { getTraceThreadId } from '@/domains/traces/components/trace-thread-context';\nimport { TraceThreadPanel } from '@/domains/traces/components/trace-thread-panel';\nimport { useSpanDetail } from '@/domains/traces/hooks/use-span-detail';\nimport { useThreadHasOtherTraces } from '@/domains/traces/hooks/use-thread-has-other-traces';\nimport { useTraceSpanNavigation } from '@/domains/traces/hooks/use-trace-span-navigation';\nimport { Button } from '@/ds/components/Button';\nimport { useLinkComponent } from '@/lib/framework';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype TraceDataPanelViewProps = ComponentProps<typeof TraceDataPanelView>;\n\nfunction getEntityHref(\n  paths: LinkComponentPaths,\n  entityType: string | null | undefined,\n  entityId: string | null | undefined,\n) {\n  if (!entityId || !entityType) return undefined;\n  const normalizedEntityType = entityType.toLowerCase();\n  if (normalizedEntityType.includes('workflow')) return paths.workflowLink(entityId) || undefined;\n  if (normalizedEntityType.includes('agent')) return paths.agentLink(entityId) || undefined;\n  return undefined;\n}\ntype SpanDataPanelViewProps = ComponentProps<typeof SpanDataPanelView>;\n\nexport interface TraceSpanPanelProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Spans returned by `useTraceOrBranchSpans` — the page owns the fetch, the panel renders it. */\n  spans: TraceDataPanelViewProps['spans'];\n  isLoadingSpans: boolean;\n  /** Controlled span selection (URL state on the traces page, local state in the chat aside). */\n  selectedSpanId: string | null;\n  onSpanSelect: (spanId: string | undefined) => void;\n  onClose: () => void;\n\n  // Trace-panel pass-through.\n  anchorSpanId?: string;\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  onSaveAsDatasetItem?: TraceDataPanelViewProps['onSaveAsDatasetItem'];\n  onAddTraceMocksToItem?: TraceDataPanelViewProps['onAddTraceMocksToItem'];\n  feedbackTabBadge?: ReactNode;\n  feedbackTabSlot?: TraceDataPanelViewProps['feedbackTabSlot'];\n  /** Enables the \"Messages\" column (reconstructed turn) when the displayed root is a complete agent trace with a thread id. */\n  showPartialThread?: boolean;\n  /** Span ids featured in the timeline (non-featured spans are faded). */\n  featuredSpanIds?: string[];\n  /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  /** When true, opens the trace's thread (every turn) in a stacked drawer above the trace panel. */\n  isFullThreadOpen?: boolean;\n  /** Enables the in-place \"Open full thread\" swap; without it the action falls back to a link. */\n  onFullThreadOpenChange?: (open: boolean) => void;\n  /** Full-thread view: lists through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Full-thread view: shows the per-trace Feedback tab. */\n  withFeedback: boolean;\n  /** Full-thread view: opens a score of one of the thread's traces (the app owns routing). */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  scoresTabBadge?: ReactNode;\n  scoresTabSlot?: TraceDataPanelViewProps['scoresTabSlot'];\n  usage?: TraceDataPanelViewProps['usage'];\n  traceHref?: string;\n  /** Drawer width; defaults to `wide`. */\n  size?: TraceDataPanelViewProps['size'];\n  /** Sibling-drawer elevation (see `DataPanel`). */\n  depth?: TraceDataPanelViewProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. feedback context). */\n  headerSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  showUnavailableFeaturesMsg?: TraceDataPanelViewProps['showUnavailableFeaturesMsg'];\n  spanView?: TraceDataPanelViewProps['spanView'];\n  onSpanViewChange?: TraceDataPanelViewProps['onSpanViewChange'];\n\n  // Span-panel pass-through.\n  spanActiveTab?: string;\n  onSpanTabChange?: (tab: string) => void;\n  spanFeedbackTabBadge?: ReactNode;\n  spanFeedbackTabSlot?: SpanDataPanelViewProps['feedbackTabSlot'];\n}\n\n/**\n * Shared trace → span drilldown drawer: `TraceDataPanel` with a nested `SpanDataPanelView`.\n * Encapsulates the span-detail fetch and prev/next span navigation that the traces page\n * and the agent chat traces aside used to duplicate.\n */\nexport function TraceSpanPanel({\n  traceId,\n  spans,\n  isLoadingSpans,\n  selectedSpanId,\n  onSpanSelect,\n  onClose,\n  anchorSpanId,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  onSaveAsDatasetItem,\n  onAddTraceMocksToItem,\n  feedbackTabBadge,\n  feedbackTabSlot,\n  showPartialThread,\n  featuredSpanIds,\n  onHighlightSpans,\n  isFullThreadOpen,\n  onFullThreadOpenChange,\n  withQueryTrace,\n  withFeedback,\n  onOpenScore,\n  scoresTabBadge,\n  scoresTabSlot,\n  usage,\n  traceHref,\n  size,\n  depth,\n  headerSlot,\n  title,\n  showUnavailableFeaturesMsg,\n  spanView,\n  onSpanViewChange,\n  spanActiveTab,\n  onSpanTabChange,\n  spanFeedbackTabBadge,\n  spanFeedbackTabSlot,\n}: TraceSpanPanelProps) {\n  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail(traceId, selectedSpanId ?? '');\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(spans, selectedSpanId, onSpanSelect);\n  const { Link, paths } = useLinkComponent();\n\n  // The trace summary links the entity to its page; the app's link provider owns the routes.\n  const rootSpan = anchorSpanId\n    ? spans?.find(s => s.spanId === anchorSpanId)\n    : spans?.find(s => s.parentSpanId == null);\n  const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);\n  const threadId = getTraceThreadId(rootSpan, anchorSpanId);\n  const hasMessagesPanel = !!(traceId && showPartialThread && threadId);\n  // A single-trace thread would show exactly what the Messages column already shows.\n  const hasOtherTraces = useThreadHasOtherTraces(hasMessagesPanel ? threadId : undefined);\n  const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;\n\n  return (\n    <>\n      <TraceDataPanel\n        traceId={traceId}\n        spans={spans}\n        anchorSpanId={anchorSpanId}\n        entityHref={entityHref}\n        usage={usage}\n        isLoading={isLoadingSpans}\n        onClose={onClose}\n        onSpanSelect={onSpanSelect}\n        onSaveAsDatasetItem={onSaveAsDatasetItem}\n        onAddTraceMocksToItem={onAddTraceMocksToItem}\n        initialSpanId={initialSpanId ?? selectedSpanId}\n        onPrevious={onPrevious}\n        onNext={onNext}\n        placement=\"traces-list\"\n        LinkComponent={Link}\n        traceHref={traceHref}\n        size={size}\n        depth={depth}\n        headerSlot={headerSlot}\n        title={title}\n        showUnavailableFeaturesMsg={showUnavailableFeaturesMsg}\n        spanView={spanView}\n        onSpanViewChange={onSpanViewChange}\n        feedbackTabBadge={feedbackTabBadge}\n        feedbackTabSlot={feedbackTabSlot}\n        featuredSpanIds={featuredSpanIds}\n        messagesPanelSlot={\n          hasMessagesPanel ? <TraceMessagesPanel traceId={traceId} onHighlightSpans={onHighlightSpans} /> : undefined\n        }\n        sideHeaderActions={\n          showFullThreadAction\n            ? ({ compact }) => (\n                <Button\n                  tooltip={compact ? 'Open full thread' : undefined}\n                  icon={<MessagesSquareIcon />}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  // At a side column of 500px or less, collapse to a round icon button; the label stays for screen readers.\n                  className=\"@max-[501px]:w-control-sm @max-[501px]:rounded-full @max-[501px]:px-0 @max-[501px]:[&>[data-slot=button-icon]]:ml-0\"\n                  onClick={() => onFullThreadOpenChange(true)}\n                >\n                  <span className=\"@max-[501px]:sr-only\">Open full thread</span>\n                </Button>\n              )\n            : undefined\n        }\n        scoresTabBadge={scoresTabBadge}\n        scoresTabSlot={scoresTabSlot}\n        spanPanelSlot={\n          traceId && selectedSpanId ? (\n            <SpanDataPanelView\n              traceId={traceId}\n              spanId={selectedSpanId}\n              span={spanDetailData?.span}\n              isAnchor={anchorSpanId ? selectedSpanId === anchorSpanId : undefined}\n              isLoading={isLoadingSpanDetail}\n              onPrevious={handlePreviousSpan}\n              onNext={handleNextSpan}\n              onClose={() => onSpanSelect(undefined)}\n              activeTab={spanActiveTab}\n              onTabChange={onSpanTabChange}\n              feedbackTabBadge={spanFeedbackTabBadge}\n              feedbackTabSlot={spanFeedbackTabSlot}\n            />\n          ) : null\n        }\n      />\n      {/* Rendered after the trace panel: DataPanel stacking follows DOM order. */}\n      <TraceThreadPanel\n        open={!!(traceId && isFullThreadOpen && threadId)}\n        depth={depth && depth > 1 ? 3 : 2}\n        threadId={threadId ?? ''}\n        onOpenScore={onOpenScore}\n        withQueryTrace={withQueryTrace}\n        withFeedback={withFeedback}\n        onClose={() => onFullThreadOpenChange?.(false)}\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/trace-span-tree-skeleton.cjs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const skeleton = require('../../../skeleton-cXUjPrq9.cjs');
-const primitives_controlSize = require('../../../primitives/control-size.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 const ROWS = [
@@ -17,19 +16,18 @@ const ROWS = [
   [2, "30%"],
   [1, "65%"]
 ];
-function TraceSpanTreeSkeleton({ withSearch = true, className }) {
+const LEGEND_WIDTHS = ["w-14", "w-12", "w-16"];
+function TraceSpanTreeSkeleton({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", "aria-label": "Loading spans", className: utils_cn.cn("flex flex-col", className), children: [
-    withSearch && /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: utils_cn.cn("w-full", primitives_controlSize.controlSizeClasses.sm) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-2 py-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-12" }),
-      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-10" }),
-      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-14" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-y-px py-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-8 items-center", style: { paddingLeft: `${depth}rem` }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-2 shrink-0 rounded-full" }),
-        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3", style: { width } }),
-        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "ml-auto h-2.5 w-10 shrink-0" })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "span-type-legend-skeleton", className: "flex flex-wrap items-center gap-1.5 py-3", children: LEGEND_WIDTHS.map((width) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: utils_cn.cn("h-5 rounded-full", width) }, width)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-y-px pb-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-8 items-stretch", style: { paddingLeft: `${depth}rem` }, children: [
+      depth > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5 px-2 py-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "mt-[5px] size-2 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[18px] items-center", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3", style: { width } }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-4 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-2.5 w-10" }) })
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 shrink-0" })
     ] }, idx)) })

package/dist/domains/traces/components/trace-span-tree-skeleton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree-skeleton.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n  [0, '55%'],\n  [1, '40%'],\n  [1, '60%'],\n  [2, '35%'],\n  [2, '50%'],\n  [1, '45%'],\n  [2, '30%'],\n  [1, '65%'],\n];\n\nexport interface TraceSpanTreeSkeletonProps {\n  /** Mirrors `leadingSlot`: the search field rendered above the tree. */\n  withSearch?: boolean;\n  className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — search field, type legend, then one `min-h-8` row per span\n * indented by depth with the dot + name + duration of `TimelineNameCol` — so nothing jumps\n * when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ withSearch = true, className }: TraceSpanTreeSkeletonProps) {\n  return (\n    <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n      {withSearch && <Skeleton className={cn('w-full', controlSizeClasses.sm)} />}\n      <div className=\"flex items-center gap-3 px-2 py-1.5\">\n        <Skeleton className=\"h-3 w-12\" />\n        <Skeleton className=\"h-3 w-10\" />\n        <Skeleton className=\"h-3 w-14\" />\n      </div>\n      <div className=\"grid gap-y-px py-1\">\n        {ROWS.map(([depth, width], idx) => (\n          <div key={idx} className=\"flex min-h-8 items-center\" style={{ paddingLeft: `${depth}rem` }}>\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1\">\n              <Skeleton className=\"size-2 shrink-0 rounded-full\" />\n              <Skeleton className=\"h-3\" style={{ width }} />\n              <Skeleton className=\"ml-auto h-2.5 w-10 shrink-0\" />\n            </div>\n            <div className=\"w-8 shrink-0\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","cn","Skeleton","controlSizeClasses","jsx"],"mappings":";;;;;;;;;AAKA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAaO,SAAS,qBAAA,CAAsB,EAAE,UAAA,GAAa,IAAA,EAAM,WAAU,EAA+B;AAClG,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAWC,WAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACnF,QAAA,EAAA;AAAA,IAAA,UAAA,mCAAeC,iBAAA,EAAA,EAAS,SAAA,EAAWD,YAAG,QAAA,EAAUE,yCAAA,CAAmB,EAAE,CAAA,EAAG,CAAA;AAAA,oBACzEH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EACb,QAAA,EAAA;AAAA,sBAAAI,cAAA,CAACF,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,sBAC/BE,cAAA,CAACF,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,sBAC/BE,cAAA,CAACF,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,KAAA,EACjC,CAAA;AAAA,oBACAE,cAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAG,wBACzBJ,eAAA,CAAC,KAAA,EAAA,EAAc,WAAU,2BAAA,EAA4B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EACvF,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oDAAA,EACb,QAAA,EAAA;AAAA,wBAAAI,cAAA,CAACF,iBAAA,EAAA,EAAS,WAAU,8BAAA,EAA+B,CAAA;AAAA,uCAClDA,iBAAA,EAAA,EAAS,SAAA,EAAU,OAAM,KAAA,EAAO,EAAE,OAAM,EAAG,CAAA;AAAA,wBAC5CE,cAAA,CAACF,iBAAA,EAAA,EAAS,SAAA,EAAU,6BAAA,EAA8B;AAAA,OAAA,EACpD,CAAA;AAAA,sBACAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EANtB,GAOV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-tree-skeleton.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n  [0, '55%'],\n  [1, '40%'],\n  [1, '60%'],\n  [2, '35%'],\n  [2, '50%'],\n  [1, '45%'],\n  [2, '30%'],\n  [1, '65%'],\n];\n\nconst LEGEND_WIDTHS = ['w-14', 'w-12', 'w-16'];\n\nexport interface TraceSpanTreeSkeletonProps {\n  className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — the `SpanTypeLegend` pills, then one `TimelineNameCol` row per span\n * (structure sign for children, top-aligned dot, caption name stacked over the meta duration, `w-8` toggle slot) —\n * so nothing jumps when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ className }: TraceSpanTreeSkeletonProps) {\n  return (\n    <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n      <div data-slot=\"span-type-legend-skeleton\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n        {LEGEND_WIDTHS.map(width => (\n          <Skeleton key={width} className={cn('h-5 rounded-full', width)} />\n        ))}\n      </div>\n      <div className=\"grid gap-y-px pb-1\">\n        {ROWS.map(([depth, width], idx) => (\n          <div key={idx} className=\"flex min-h-8 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n            {depth > 0 && <div className=\"w-2 shrink-0\" />}\n            <div className=\"flex min-w-0 flex-1 items-start gap-1.5 px-2 py-1\">\n              <Skeleton className=\"mt-[5px] size-2 shrink-0 rounded-full\" />\n              <div className=\"flex min-w-0 flex-1 flex-col\">\n                {/* Line boxes of the caption name (18px) and meta duration (16px). */}\n                <div className=\"flex h-[18px] items-center\">\n                  <Skeleton className=\"h-3\" style={{ width }} />\n                </div>\n                <div className=\"flex h-4 items-center\">\n                  <Skeleton className=\"h-2.5 w-10\" />\n                </div>\n              </div>\n            </div>\n            <div className=\"w-8 shrink-0\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","Skeleton"],"mappings":";;;;;;;;AAIA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAEA,MAAM,aAAA,GAAgB,CAAC,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAA;AAWtC,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAU,EAA+B;AAC/E,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAWC,WAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACpF,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAI,WAAA,EAAU,2BAAA,EAA4B,SAAA,EAAU,0CAAA,EAClD,wBAAc,GAAA,CAAI,CAAA,KAAA,qBACjBA,cAAA,CAACC,iBAAA,EAAA,EAAqB,WAAWF,WAAA,CAAG,kBAAA,EAAoB,KAAK,CAAA,EAAA,EAA9C,KAAiD,CACjE,CAAA,EACH,CAAA;AAAA,oBACAC,cAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAG,wBACzBF,eAAA,CAAC,KAAA,EAAA,EAAc,WAAU,4BAAA,EAA6B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EACvF,QAAA,EAAA;AAAA,MAAA,KAAA,GAAQ,CAAA,oBAAKE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe,CAAA;AAAA,sBAC5CF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,uCAAA,EAAwC,CAAA;AAAA,wBAC5DH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAEb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,KAAA,EAAM,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG,CAAA,EAC9C,CAAA;AAAA,0BACAD,cAAA,CAAC,SAAI,SAAA,EAAU,uBAAA,EACb,yCAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,cAAa,CAAA,EACnC;AAAA,SAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,sBACAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EAdtB,GAeV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-span-tree-skeleton.es.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { S as Skeleton } from '../../../skeleton-BsRAXyh5.js';
-import { controlSizeClasses } from '../../../primitives/control-size.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 const ROWS = [
@@ -13,19 +12,18 @@ const ROWS = [
   [2, "30%"],
   [1, "65%"]
 ];
-function TraceSpanTreeSkeleton({ withSearch = true, className }) {
+const LEGEND_WIDTHS = ["w-14", "w-12", "w-16"];
+function TraceSpanTreeSkeleton({ className }) {
   return /* @__PURE__ */ jsxs("div", { role: "status", "aria-label": "Loading spans", className: cn("flex flex-col", className), children: [
-    withSearch && /* @__PURE__ */ jsx(Skeleton, { className: cn("w-full", controlSizeClasses.sm) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-2 py-1.5", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-12" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-14" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid gap-y-px py-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-8 items-center", style: { paddingLeft: `${depth}rem` }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "size-2 shrink-0 rounded-full" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-3", style: { width } }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-2.5 w-10 shrink-0" })
+    /* @__PURE__ */ jsx("div", { "data-slot": "span-type-legend-skeleton", className: "flex flex-wrap items-center gap-1.5 py-3", children: LEGEND_WIDTHS.map((width) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-5 rounded-full", width) }, width)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-y-px pb-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-8 items-stretch", style: { paddingLeft: `${depth}rem` }, children: [
+      depth > 0 && /* @__PURE__ */ jsx("div", { className: "w-2 shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5 px-2 py-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-[5px] size-2 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-[18px] items-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3", style: { width } }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-4 items-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-10" }) })
+        ] })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "w-8 shrink-0" })
     ] }, idx)) })

package/dist/domains/traces/components/trace-span-tree-skeleton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree-skeleton.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n  [0, '55%'],\n  [1, '40%'],\n  [1, '60%'],\n  [2, '35%'],\n  [2, '50%'],\n  [1, '45%'],\n  [2, '30%'],\n  [1, '65%'],\n];\n\nexport interface TraceSpanTreeSkeletonProps {\n  /** Mirrors `leadingSlot`: the search field rendered above the tree. */\n  withSearch?: boolean;\n  className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — search field, type legend, then one `min-h-8` row per span\n * indented by depth with the dot + name + duration of `TimelineNameCol` — so nothing jumps\n * when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ withSearch = true, className }: TraceSpanTreeSkeletonProps) {\n  return (\n    <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n      {withSearch && <Skeleton className={cn('w-full', controlSizeClasses.sm)} />}\n      <div className=\"flex items-center gap-3 px-2 py-1.5\">\n        <Skeleton className=\"h-3 w-12\" />\n        <Skeleton className=\"h-3 w-10\" />\n        <Skeleton className=\"h-3 w-14\" />\n      </div>\n      <div className=\"grid gap-y-px py-1\">\n        {ROWS.map(([depth, width], idx) => (\n          <div key={idx} className=\"flex min-h-8 items-center\" style={{ paddingLeft: `${depth}rem` }}>\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1\">\n              <Skeleton className=\"size-2 shrink-0 rounded-full\" />\n              <Skeleton className=\"h-3\" style={{ width }} />\n              <Skeleton className=\"ml-auto h-2.5 w-10 shrink-0\" />\n            </div>\n            <div className=\"w-8 shrink-0\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAaO,SAAS,qBAAA,CAAsB,EAAE,UAAA,GAAa,IAAA,EAAM,WAAU,EAA+B;AAClG,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACnF,QAAA,EAAA;AAAA,IAAA,UAAA,wBAAe,QAAA,EAAA,EAAS,SAAA,EAAW,GAAG,QAAA,EAAU,kBAAA,CAAmB,EAAE,CAAA,EAAG,CAAA;AAAA,oBACzE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,sBAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,sBAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,KAAA,EACjC,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAG,wBACzB,IAAA,CAAC,KAAA,EAAA,EAAc,WAAU,2BAAA,EAA4B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EACvF,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oDAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,8BAAA,EAA+B,CAAA;AAAA,4BAClD,QAAA,EAAA,EAAS,SAAA,EAAU,OAAM,KAAA,EAAO,EAAE,OAAM,EAAG,CAAA;AAAA,wBAC5C,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,6BAAA,EAA8B;AAAA,OAAA,EACpD,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EANtB,GAOV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-tree-skeleton.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n  [0, '55%'],\n  [1, '40%'],\n  [1, '60%'],\n  [2, '35%'],\n  [2, '50%'],\n  [1, '45%'],\n  [2, '30%'],\n  [1, '65%'],\n];\n\nconst LEGEND_WIDTHS = ['w-14', 'w-12', 'w-16'];\n\nexport interface TraceSpanTreeSkeletonProps {\n  className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — the `SpanTypeLegend` pills, then one `TimelineNameCol` row per span\n * (structure sign for children, top-aligned dot, caption name stacked over the meta duration, `w-8` toggle slot) —\n * so nothing jumps when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ className }: TraceSpanTreeSkeletonProps) {\n  return (\n    <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n      <div data-slot=\"span-type-legend-skeleton\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n        {LEGEND_WIDTHS.map(width => (\n          <Skeleton key={width} className={cn('h-5 rounded-full', width)} />\n        ))}\n      </div>\n      <div className=\"grid gap-y-px pb-1\">\n        {ROWS.map(([depth, width], idx) => (\n          <div key={idx} className=\"flex min-h-8 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n            {depth > 0 && <div className=\"w-2 shrink-0\" />}\n            <div className=\"flex min-w-0 flex-1 items-start gap-1.5 px-2 py-1\">\n              <Skeleton className=\"mt-[5px] size-2 shrink-0 rounded-full\" />\n              <div className=\"flex min-w-0 flex-1 flex-col\">\n                {/* Line boxes of the caption name (18px) and meta duration (16px). */}\n                <div className=\"flex h-[18px] items-center\">\n                  <Skeleton className=\"h-3\" style={{ width }} />\n                </div>\n                <div className=\"flex h-4 items-center\">\n                  <Skeleton className=\"h-2.5 w-10\" />\n                </div>\n              </div>\n            </div>\n            <div className=\"w-8 shrink-0\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAEA,MAAM,aAAA,GAAgB,CAAC,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAA;AAWtC,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAU,EAA+B;AAC/E,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACpF,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,WAAA,EAAU,2BAAA,EAA4B,SAAA,EAAU,0CAAA,EAClD,wBAAc,GAAA,CAAI,CAAA,KAAA,qBACjB,GAAA,CAAC,QAAA,EAAA,EAAqB,WAAW,EAAA,CAAG,kBAAA,EAAoB,KAAK,CAAA,EAAA,EAA9C,KAAiD,CACjE,CAAA,EACH,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAG,wBACzB,IAAA,CAAC,KAAA,EAAA,EAAc,WAAU,4BAAA,EAA6B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EACvF,QAAA,EAAA;AAAA,MAAA,KAAA,GAAQ,CAAA,oBAAK,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe,CAAA;AAAA,sBAC5C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,uCAAA,EAAwC,CAAA;AAAA,wBAC5D,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAEb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,KAAA,EAAM,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG,CAAA,EAC9C,CAAA;AAAA,0BACA,GAAA,CAAC,SAAI,SAAA,EAAU,uBAAA,EACb,8BAAC,QAAA,EAAA,EAAS,SAAA,EAAU,cAAa,CAAA,EACnC;AAAA,SAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EAdtB,GAeV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -7,7 +7,7 @@ const domains_traces_components_spanRows = require('./span-rows.cjs.js');
 const domains_traces_components_spanTreeRow = require('./span-tree-row.cjs.js');
 const domains_traces_components_spanTypeLegend = require('./span-type-legend.cjs.js');
 const domains_traces_components_traceSpanTreeSkeleton = require('./trace-span-tree-skeleton.cjs.js');
-const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const utils_duration = require('../../../utils/duration.cjs.js');
 

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

@@ -3,7 +3,7 @@ import { SpanRows } from './span-rows.es.js';
 import { SpanTreeRow } from './span-tree-row.es.js';
 import { SpanTypeLegend } from './span-type-legend.es.js';
 import { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton.es.js';
-import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';