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

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { MoreHorizontalIcon, ChevronsUpDownIcon, ChevronsDownUpIcon, CircleGaugeIcon, SaveIcon, WrenchIcon, Link2Icon, Loader2Icon, DownloadIcon } from 'lucide-react';
+import { MoreHorizontalIcon, SaveIcon, WrenchIcon, Link2Icon, Loader2Icon, DownloadIcon, CircleGaugeIcon } from 'lucide-react';
 import { useState, useEffect, useId, useMemo } from 'react';
 import { getAllSpanIds } from '../hooks/get-all-span-ids.es.js';
 import { useDownloadTraceJson } from '../hooks/use-download-trace-json.es.js';
@@ -9,18 +9,17 @@ import { TraceIdButton } from './trace-id-button.es.js';
 import { TraceSpanTimeline } from './trace-span-timeline.es.js';
 import { TraceSpanTree } from './trace-span-tree.es.js';
 import { TraceSummaryDescription } from './trace-summary-description.es.js';
-import { B as Button } from '../../../Button-BVGwYwHT.js';
-import { B as ButtonsGroup } from '../../../buttons-group-CHyXDQBp.js';
-import { D as DataPanel } from '../../../data-panel-5iuux0r_.js';
-import { D as DropdownMenu } from '../../../dropdown-menu-C853KwJJ.js';
-import { S as SearchFieldBlock } from '../../../search-field-block-DhgD7NhZ.js';
-import { N as Notice } from '../../../Notice-CMZ86f1g.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BAy8m6GO.js';
-import { T as Tab } from '../../../tabs-tab-K5mQhs7r.js';
-import { T as TabContent } from '../../../tabs-content-CW6RtAEV.js';
+import { B as Button } from '../../../Button-XSiL3zvL.js';
+import { D as DataPanel } from '../../../data-panel-3TqqdlmK.js';
+import { D as DropdownMenu } from '../../../dropdown-menu-BYns1-0U.js';
+import { S as SearchFieldBlock } from '../../../search-field-block-BC_iZ1gM.js';
+import { N as Notice } from '../../../Notice-BkL7EPmo.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-BQher6zA.js';
+import { T as Tab } from '../../../tabs-tab-s-H_a_rq.js';
+import { T as TabContent } from '../../../tabs-content-CmPMnkWh.js';
 import { useScrollToFirstHighlight } from '../../../hooks/use-scroll-to-first-highlight.es.js';
 import { useTextHighlight } from '../../../hooks/use-text-highlight.es.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { c as cn } from '../../../cn-Dxjsbr9n.js';
 
 function TraceDataPanelView({
   traceId,
@@ -34,8 +33,10 @@ function TraceDataPanelView({
   initialSpanId,
   onPrevious,
   onNext,
-  collapsed: controlledCollapsed,
-  onCollapsedChange,
+  size = "wide",
+  depth,
+  headerSlot,
+  title,
   placement,
   LinkComponent,
   traceHref,
@@ -51,13 +52,9 @@ function TraceDataPanelView({
   onTabChange,
   featuredSpanIds,
   messagesPanelSlot,
-  spanPanelSlot,
-  className
+  spanPanelSlot
 }) {
   const isOnTracePage = placement === "trace-page";
-  const [internalCollapsed, setInternalCollapsed] = useState(false);
-  const collapsed = controlledCollapsed ?? internalCollapsed;
-  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;
   const [uncontrolledTab, setUncontrolledTab] = useState("details");
   const currentTab = activeTab ?? uncontrolledTab;
   const handleTabChange = (tab) => {
@@ -108,22 +105,14 @@ function TraceDataPanelView({
     setSelectedSpanId(newId);
     onSpanSelect?.(newId);
   };
-  const traceActionsMenu = /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+  const traceActionsMenu = traceId && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(
       DropdownMenu.Trigger,
       {
-        render: /* @__PURE__ */ jsx(Button, { size: "md", tooltip: "Trace actions", "aria-label": "Trace actions", children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {}) })
+        render: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", tooltip: "Trace actions", "aria-label": "Trace actions", children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {}) })
       }
     ),
     /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
-      !isOnTracePage && onCollapsedChange && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => setCollapsed(!collapsed), children: [
-        collapsed ? /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsDownUpIcon, {}),
-        collapsed ? "Expand panel" : "Collapse panel"
-      ] }),
-      !isOnTracePage && onEvaluateTrace && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: onEvaluateTrace, children: [
-        /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
-        "Evaluate trace"
-      ] }),
       !isOnTracePage && onSaveAsDatasetItem && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId }), children: [
         /* @__PURE__ */ jsx(SaveIcon, {}),
         "Add full trace to dataset"
@@ -142,129 +131,144 @@ function TraceDataPanelView({
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs(DataPanel, { collapsed, className, children: [
-    /* @__PURE__ */ jsx(DataPanel.Header, { children: isOnTracePage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(DataPanel.Heading, { children: "Trace Timeline" }),
-      /* @__PURE__ */ jsx(ButtonsGroup, { className: "ml-auto shrink-0", children: traceActionsMenu })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs(DataPanel.Heading, { className: "items-center", children: [
-          "Trace",
-          /* @__PURE__ */ jsx(TraceIdButton, { id: traceId })
-        ] }),
-        !collapsed && rootSpan && /* @__PURE__ */ jsx(
-          TraceSummaryDescription,
+  return /* @__PURE__ */ jsx(
+    DataPanel,
+    {
+      open: !!traceId,
+      onClose,
+      title: title ?? (isOnTracePage ? "Trace Timeline" : `Trace ${traceId ?? ""}`),
+      size,
+      depth,
+      children: traceId && /* @__PURE__ */ jsxs(Fragment, { children: [
+        headerSlot,
+        /* @__PURE__ */ jsx(DataPanel.Header, { children: isOnTracePage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataPanel.Heading, { children: "Trace Timeline" }),
+          /* @__PURE__ */ jsx(DataPanel.HeaderActions, { children: traceActionsMenu })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(DataPanel.HeaderContent, { children: [
+            /* @__PURE__ */ jsxs(DataPanel.Heading, { children: [
+              "Trace",
+              /* @__PURE__ */ jsx(TraceIdButton, { id: traceId })
+            ] }),
+            rootSpan && /* @__PURE__ */ jsx(
+              TraceSummaryDescription,
+              {
+                rootSpan,
+                usage,
+                entityHref,
+                LinkComponent
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(DataPanel.HeaderActions, { children: [
+            onEvaluateTrace && /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "sm", onClick: onEvaluateTrace, disabled: !rootSpan, children: [
+              /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
+              "Score trace"
+            ] }),
+            traceActionsMenu,
+            (onPrevious || onNext) && /* @__PURE__ */ jsx(
+              DataPanel.NextPrevNav,
+              {
+                onPrevious,
+                onNext,
+                previousLabel: "Previous trace",
+                nextLabel: "Next trace"
+              }
+            ),
+            /* @__PURE__ */ jsx(DataPanel.CloseButton, { onClick: onClose })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          TracePanelColumns,
           {
-            rootSpan,
-            usage,
-            entityHref,
-            LinkComponent
+            messagesPanelSlot,
+            messagesCollapsed: currentTab === "timeline",
+            spanPanelSlot,
+            highlightQuery: query,
+            spanPanelKey: selectedSpanId,
+            children: isLoading ? /* @__PURE__ */ jsx(DataPanel.LoadingData, { children: "Loading trace..." }) : !spans?.length ? /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans found for this trace." }) : (() => {
+              const searchField = /* @__PURE__ */ jsx(
+                SearchFieldBlock,
+                {
+                  name: searchFieldName,
+                  label: "Search spans",
+                  labelIsHidden: true,
+                  placeholder: "Search spans...",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  onReset: () => setQuery(""),
+                  size: "sm",
+                  variant: "outline",
+                  className: "w-full"
+                }
+              );
+              const noSearchResults = hierarchicalSpans.length === 0 && /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans match your search." });
+              return /* @__PURE__ */ jsxs(
+                Tabs,
+                {
+                  defaultTab: "details",
+                  value: activeTab,
+                  onValueChange: handleTabChange,
+                  className: "grid h-full min-h-0 grid-rows-[auto_1fr]",
+                  children: [
+                    /* @__PURE__ */ jsx(DataPanel.Header, { children: /* @__PURE__ */ jsxs(TabList, { variant: "pill-ghost", children: [
+                      /* @__PURE__ */ jsx(Tab, { value: "details", children: "Spans" }),
+                      /* @__PURE__ */ jsx(Tab, { value: "timeline", children: "Timeline" }),
+                      feedbackTabSlot && /* @__PURE__ */ jsxs(Tab, { value: "feedback", children: [
+                        "Feedback",
+                        feedbackTabBadge
+                      ] }),
+                      scoresTabSlot && /* @__PURE__ */ jsxs(Tab, { value: "scores", children: [
+                        "Scores",
+                        scoresTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          " (",
+                          scoresTabBadge,
+                          ")"
+                        ] })
+                      ] })
+                    ] }) }),
+                    /* @__PURE__ */ jsx(TabContent, { value: "details", className: "min-h-0 py-0", children: /* @__PURE__ */ jsxs(DataPanel.Content, { children: [
+                      !isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && !onAddTraceMocksToItem && showUnavailableFeaturesMsg && /* @__PURE__ */ jsx(Notice, { variant: "info", className: "mb-6", children: /* @__PURE__ */ jsx(Notice.Message, { children: "Evaluating traces and saving them as dataset items is available in Mastra Studio (local or deployed)." }) }),
+                      /* @__PURE__ */ jsx(
+                        TraceSpanTree,
+                        {
+                          hierarchicalSpans,
+                          onSpanClick: handleSpanClick,
+                          selectedSpanId,
+                          expandedSpanIds,
+                          setExpandedSpanIds,
+                          featuredSpanIds,
+                          leadingSlot: searchField
+                        }
+                      ),
+                      noSearchResults
+                    ] }) }),
+                    /* @__PURE__ */ jsx(TabContent, { value: "timeline", className: "min-h-0 py-0", children: /* @__PURE__ */ jsxs(DataPanel.Content, { children: [
+                      /* @__PURE__ */ jsx(
+                        TraceSpanTimeline,
+                        {
+                          hierarchicalSpans,
+                          onSpanClick: handleSpanClick,
+                          selectedSpanId,
+                          expandedSpanIds,
+                          setExpandedSpanIds,
+                          featuredSpanIds,
+                          leadingSlot: searchField
+                        }
+                      ),
+                      noSearchResults
+                    ] }) }),
+                    feedbackTabSlot && /* @__PURE__ */ jsx(TabContent, { value: "feedback", className: "h-full min-h-0 py-0", children: /* @__PURE__ */ jsx(DataPanel.Content, { children: feedbackTabSlot({ traceId }) }) }),
+                    scoresTabSlot && /* @__PURE__ */ jsx(TabContent, { value: "scores", className: "h-full min-h-0 py-0", children: /* @__PURE__ */ jsx(DataPanel.Content, { children: scoresTabSlot({ traceId, rootSpanId: rootSpan?.spanId }) }) })
+                  ]
+                }
+              );
+            })()
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0 self-start", children: [
-        traceActionsMenu,
-        (onPrevious || onNext) && /* @__PURE__ */ jsx(
-          DataPanel.NextPrevNav,
-          {
-            onPrevious,
-            onNext,
-            previousLabel: "Previous trace",
-            nextLabel: "Next trace"
-          }
-        ),
-        /* @__PURE__ */ jsx(DataPanel.CloseButton, { onClick: onClose })
       ] })
-    ] }) }),
-    !collapsed && /* @__PURE__ */ jsx(
-      TracePanelColumns,
-      {
-        messagesPanelSlot,
-        messagesCollapsed: currentTab === "timeline",
-        spanPanelSlot,
-        highlightQuery: query,
-        spanPanelKey: selectedSpanId,
-        children: isLoading ? /* @__PURE__ */ jsx(DataPanel.LoadingData, { children: "Loading trace..." }) : !spans?.length ? /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans found for this trace." }) : (() => {
-          const searchField = /* @__PURE__ */ jsx(
-            SearchFieldBlock,
-            {
-              name: searchFieldName,
-              label: "Search spans",
-              labelIsHidden: true,
-              placeholder: "Search spans...",
-              value: query,
-              onChange: (e) => setQuery(e.target.value),
-              onReset: () => setQuery(""),
-              size: "sm",
-              variant: "outline",
-              className: "w-full"
-            }
-          );
-          const noSearchResults = hierarchicalSpans.length === 0 && /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans match your search." });
-          return /* @__PURE__ */ jsxs(
-            Tabs,
-            {
-              defaultTab: "details",
-              value: activeTab,
-              onValueChange: handleTabChange,
-              className: "grid h-full min-h-0 grid-rows-[auto_1fr]",
-              children: [
-                /* @__PURE__ */ jsx(DataPanel.Header, { className: "min-h-0 px-2 py-1", children: /* @__PURE__ */ jsxs(TabList, { variant: "pill-ghost", children: [
-                  /* @__PURE__ */ jsx(Tab, { value: "details", children: "Spans" }),
-                  /* @__PURE__ */ jsx(Tab, { value: "timeline", children: "Timeline" }),
-                  feedbackTabSlot && /* @__PURE__ */ jsxs(Tab, { value: "feedback", children: [
-                    "Feedback",
-                    feedbackTabBadge
-                  ] }),
-                  scoresTabSlot && /* @__PURE__ */ jsxs(Tab, { value: "scores", children: [
-                    "Scores",
-                    scoresTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      " (",
-                      scoresTabBadge,
-                      ")"
-                    ] })
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsx(TabContent, { value: "details", className: "min-h-0 py-0", children: /* @__PURE__ */ jsxs(DataPanel.Content, { children: [
-                  !isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && !onAddTraceMocksToItem && showUnavailableFeaturesMsg && /* @__PURE__ */ jsx(Notice, { variant: "info", className: "mb-6", children: /* @__PURE__ */ jsx(Notice.Message, { children: "Evaluating traces and saving them as dataset items is available in Mastra Studio (local or deployed)." }) }),
-                  /* @__PURE__ */ jsx(
-                    TraceSpanTree,
-                    {
-                      hierarchicalSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      expandedSpanIds,
-                      setExpandedSpanIds,
-                      featuredSpanIds,
-                      leadingSlot: searchField
-                    }
-                  ),
-                  noSearchResults
-                ] }) }),
-                /* @__PURE__ */ jsx(TabContent, { value: "timeline", className: "min-h-0 py-0", children: /* @__PURE__ */ jsxs(DataPanel.Content, { children: [
-                  /* @__PURE__ */ jsx(
-                    TraceSpanTimeline,
-                    {
-                      hierarchicalSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      expandedSpanIds,
-                      setExpandedSpanIds,
-                      featuredSpanIds,
-                      leadingSlot: searchField
-                    }
-                  ),
-                  noSearchResults
-                ] }) }),
-                feedbackTabSlot && /* @__PURE__ */ jsx(TabContent, { value: "feedback", className: "h-full min-h-0 py-0", children: /* @__PURE__ */ jsx(DataPanel.Content, { children: feedbackTabSlot({ traceId }) }) }),
-                scoresTabSlot && /* @__PURE__ */ jsx(TabContent, { value: "scores", className: "h-full min-h-0 py-0", children: /* @__PURE__ */ jsx(DataPanel.Content, { children: scoresTabSlot({ traceId, rootSpanId: rootSpan?.spanId }) }) })
-              ]
-            }
-          );
-        })()
-      }
-    )
-  ] });
+    }
+  );
 }
 function TracePanelColumns({
   messagesPanelSlot,

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

@@ -1 +1 @@
-{"version":3,"file":"trace-data-panel-view.es.js","sources":["../../../../src/domains/traces/components/trace-data-panel-view.tsx"],"sourcesContent":["import {\n  CircleGaugeIcon,\n  ChevronsDownUpIcon,\n  ChevronsUpDownIcon,\n  DownloadIcon,\n  Link2Icon,\n  Loader2Icon,\n  MoreHorizontalIcon,\n  SaveIcon,\n  WrenchIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { SearchableSpan } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { useScrollToFirstHighlight } from '@/hooks/use-scroll-to-first-highlight';\nimport { useTextHighlight } from '@/hooks/use-text-highlight';\nimport { cn } from '@/lib/utils';\n\nexport type TraceDataPanelPlacement = 'traces-list' | 'trace-page';\n\nexport type TraceDataPanelTab = 'details' | 'timeline' | 'scores' | 'feedback';\n\nexport interface TraceDataPanelViewProps {\n  traceId: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: SearchableSpan[] | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  onSpanSelect?: (spanId: string | undefined) => void;\n  onEvaluateTrace?: () => void;\n  /** When set, an \"Add full trace to dataset\" button appears; the consumer owns the dialog. */\n  onSaveAsDatasetItem?: (args: { traceId: string; rootSpanId: string | undefined }) => void;\n  /** When set, an \"Add tool mocks to item\" button appears; the consumer owns the dialog. */\n  onAddTraceMocksToItem?: (args: { traceId: string }) => void;\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  collapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  placement: TraceDataPanelPlacement;\n  /** @deprecated No longer used: the panel renders the span tree with the duration as text. */\n  timelineChartWidth?: 'wide' | 'default';\n  /** When both are provided, renders an \"Open trace page\" button. */\n  LinkComponent?: LinkComponent;\n  traceHref?: string;\n  /** When provided, the entity name in the trace summary links to the entity's page. */\n  entityHref?: string;\n  /** Token and estimated-cost totals shown in the compact trace summary. */\n  usage?: TraceUsageSummary;\n  /**\n   * Span treated as the displayed root of the timeline. Required for branch\n   * subtrees from `getBranch` where the anchor has a real parent that's outside\n   * `spans`. When omitted, the span with no parent is used (trace case).\n   */\n  anchorSpanId?: string;\n  /**\n   * Whether to render the \"Evaluating traces and saving them as dataset items is\n   * available in Mastra Studio\" info notice when neither `onEvaluateTrace` nor\n   * `onSaveAsDatasetItem` is provided. Defaults to `true`. Pass `false` when this\n   * panel is rendered inside Studio in a context that intentionally omits those\n   * handlers (e.g. inline below an experiment result).\n   */\n  showUnavailableFeaturesMsg?: boolean;\n  /**\n   * When provided, a \"Scores\" tab appears; the slot renders whatever trace-level\n   * scoring UI the consumer wants.\n   */\n  scoresTabSlot?: (args: { traceId: string; rootSpanId: string | undefined }) => ReactNode;\n  /** Optional count shown in the \"Scores\" tab label. */\n  scoresTabBadge?: ReactNode;\n  /**\n   * When provided, a \"Feedback\" tab appears; the slot renders the trace-level\n   * feedback UI. Trace feedback is not scoped to a span — the span panel owns that.\n   */\n  feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n  /** Optional indicator rendered after the \"Feedback\" tab label (e.g. a needs-review dot). */\n  feedbackTabBadge?: ReactNode;\n  activeTab?: TraceDataPanelTab;\n  onTabChange?: (tab: TraceDataPanelTab) => void;\n  /** Span ids to feature in the timeline; every other span is faded. */\n  featuredSpanIds?: string[];\n  /**\n   * Rendered as a column to the left of the span tree inside the same card\n   * (typically the trace as one reconstructed agent turn). Collapsed while the\n   * Timeline tab is active, since the timeline needs the width.\n   */\n  messagesPanelSlot?: ReactNode;\n  /**\n   * Rendered as a column to the right of the timeline inside the same card;\n   * typically the span detail.\n   */\n  spanPanelSlot?: ReactNode;\n  /** Extra classes applied to the panel root (e.g. `h-full` on the trace page). */\n  className?: string;\n}\n\nexport function TraceDataPanelView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  onEvaluateTrace,\n  onSaveAsDatasetItem,\n  onAddTraceMocksToItem,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  collapsed: controlledCollapsed,\n  onCollapsedChange,\n  placement,\n  LinkComponent,\n  traceHref,\n  entityHref,\n  usage,\n  anchorSpanId,\n  showUnavailableFeaturesMsg = true,\n  scoresTabSlot,\n  scoresTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  activeTab,\n  onTabChange,\n  featuredSpanIds,\n  messagesPanelSlot,\n  spanPanelSlot,\n  className,\n}: TraceDataPanelViewProps) {\n  const isOnTracePage = placement === 'trace-page';\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const collapsed = controlledCollapsed ?? internalCollapsed;\n  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;\n\n  // Tracked locally too (tabs may be uncontrolled) so the messages column knows\n  // when to fold away for the Timeline tab.\n  const [uncontrolledTab, setUncontrolledTab] = useState<TraceDataPanelTab>('details');\n  const currentTab = activeTab ?? uncontrolledTab;\n  const handleTabChange = (tab: TraceDataPanelTab) => {\n    setUncontrolledTab(tab);\n    onTabChange?.(tab);\n  };\n\n  const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n  const [selectedSpanId, setSelectedSpanId] = useState<string | undefined>(initialSpanId ?? undefined);\n\n  // Sync selected span when initialSpanId or trace data changes\n  useEffect(() => {\n    // No span requested: clear immediately.\n    if (!initialSpanId) {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n      return;\n    }\n    // Span requested: wait for trace data before deciding so an in-flight\n    // fetch doesn't wipe a URL-provided selection. Callers that default their\n    // spans to `[]` while loading only say so through `isLoading`.\n    if (isLoading || !spans) return;\n\n    const found = spans.find(s => s.spanId === initialSpanId);\n    if (found) {\n      setSelectedSpanId(initialSpanId);\n      onSpanSelect?.(initialSpanId);\n    } else {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpanId, spans, isLoading]);\n\n  const searchFieldName = useId();\n  const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n  const hierarchicalSpans = useMemo(\n    () =>\n      formatHierarchicalSpans(\n        // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n        // rendered several components deeper.\n        results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n        anchorSpanId,\n      ),\n    [results, payloadOnlyMatchIds, anchorSpanId],\n  );\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const rootSpan = useMemo(\n    () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n    [spans, anchorSpanId],\n  );\n  const handleSpanClick = (id: string) => {\n    const newId = selectedSpanId === id ? undefined : id;\n    setSelectedSpanId(newId);\n    onSpanSelect?.(newId);\n  };\n\n  const traceActionsMenu = (\n    <DropdownMenu>\n      <DropdownMenu.Trigger\n        render={\n          <Button size=\"md\" tooltip=\"Trace actions\" aria-label=\"Trace actions\">\n            <MoreHorizontalIcon />\n          </Button>\n        }\n      />\n      <DropdownMenu.Content align=\"end\">\n        {!isOnTracePage && onCollapsedChange && (\n          <DropdownMenu.Item onSelect={() => setCollapsed(!collapsed)}>\n            {collapsed ? <ChevronsUpDownIcon /> : <ChevronsDownUpIcon />}\n            {collapsed ? 'Expand panel' : 'Collapse panel'}\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && onEvaluateTrace && (\n          <DropdownMenu.Item onSelect={onEvaluateTrace}>\n            <CircleGaugeIcon />\n            Evaluate trace\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && onSaveAsDatasetItem && (\n          <DropdownMenu.Item onSelect={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}>\n            <SaveIcon />\n            Add full trace to dataset\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && onAddTraceMocksToItem && (\n          <DropdownMenu.Item onSelect={() => onAddTraceMocksToItem({ traceId })}>\n            <WrenchIcon />\n            Add tool mocks to item\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && LinkComponent && traceHref && (\n          <DropdownMenu.Item render={<LinkComponent href={traceHref} />}>\n            <Link2Icon />\n            Open trace page\n          </DropdownMenu.Item>\n        )}\n        <DropdownMenu.Item disabled={isDownloadingTrace} onSelect={() => downloadTraceJson(traceId)}>\n          {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n          Download trace JSON\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n\n  return (\n    <DataPanel collapsed={collapsed} className={className}>\n      <DataPanel.Header>\n        {isOnTracePage ? (\n          <>\n            <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n            <ButtonsGroup className=\"ml-auto shrink-0\">{traceActionsMenu}</ButtonsGroup>\n          </>\n        ) : (\n          <>\n            <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <DataPanel.Heading className=\"items-center\">\n                Trace\n                <TraceIdButton id={traceId} />\n              </DataPanel.Heading>\n              {!collapsed && rootSpan && (\n                <TraceSummaryDescription\n                  rootSpan={rootSpan}\n                  usage={usage}\n                  entityHref={entityHref}\n                  LinkComponent={LinkComponent}\n                />\n              )}\n            </div>\n            <ButtonsGroup className=\"ml-auto shrink-0 self-start\">\n              {traceActionsMenu}\n              {(onPrevious || onNext) && (\n                <DataPanel.NextPrevNav\n                  onPrevious={onPrevious}\n                  onNext={onNext}\n                  previousLabel=\"Previous trace\"\n                  nextLabel=\"Next trace\"\n                />\n              )}\n              <DataPanel.CloseButton onClick={onClose} />\n            </ButtonsGroup>\n          </>\n        )}\n      </DataPanel.Header>\n\n      {!collapsed && (\n        <TracePanelColumns\n          messagesPanelSlot={messagesPanelSlot}\n          messagesCollapsed={currentTab === 'timeline'}\n          spanPanelSlot={spanPanelSlot}\n          highlightQuery={query}\n          spanPanelKey={selectedSpanId}\n        >\n          {isLoading ? (\n            <DataPanel.LoadingData>Loading trace...</DataPanel.LoadingData>\n          ) : !spans?.length ? (\n            <DataPanel.NoData>No spans found for this trace.</DataPanel.NoData>\n          ) : (\n            (() => {\n              // Shared by the Spans and Timeline tabs: both views render the same\n              // filtered `hierarchicalSpans`, so one query drives both.\n              const searchField = (\n                <SearchFieldBlock\n                  name={searchFieldName}\n                  label=\"Search spans\"\n                  labelIsHidden\n                  placeholder=\"Search spans...\"\n                  value={query}\n                  onChange={e => setQuery(e.target.value)}\n                  onReset={() => setQuery('')}\n                  size=\"sm\"\n                  variant=\"outline\"\n                  className=\"w-full\"\n                />\n              );\n              const noSearchResults = hierarchicalSpans.length === 0 && (\n                <DataPanel.NoData>No spans match your search.</DataPanel.NoData>\n              );\n\n              return (\n                <Tabs<TraceDataPanelTab>\n                  defaultTab=\"details\"\n                  value={activeTab}\n                  onValueChange={handleTabChange}\n                  className=\"grid h-full min-h-0 grid-rows-[auto_1fr]\"\n                >\n                  <DataPanel.Header className=\"min-h-0 px-2 py-1\">\n                    <TabList variant=\"pill-ghost\">\n                      <Tab value=\"details\">Spans</Tab>\n                      <Tab value=\"timeline\">Timeline</Tab>\n                      {feedbackTabSlot && <Tab value=\"feedback\">Feedback{feedbackTabBadge}</Tab>}\n                      {scoresTabSlot && (\n                        <Tab value=\"scores\">Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}</Tab>\n                      )}\n                    </TabList>\n                  </DataPanel.Header>\n\n                  <TabContent value=\"details\" className=\"min-h-0 py-0\">\n                    <DataPanel.Content>\n                      {!isOnTracePage &&\n                        !onEvaluateTrace &&\n                        !onSaveAsDatasetItem &&\n                        !onAddTraceMocksToItem &&\n                        showUnavailableFeaturesMsg && (\n                          <Notice variant=\"info\" className=\"mb-6\">\n                            <Notice.Message>\n                              Evaluating traces and saving them as dataset items is available in Mastra Studio (local or\n                              deployed).\n                            </Notice.Message>\n                          </Notice>\n                        )}\n\n                      {/* The tree stays mounted even with no results, because it\n                          hosts the search field: unmounting it would strand the user\n                          with a query they can no longer clear. */}\n                      <TraceSpanTree\n                        hierarchicalSpans={hierarchicalSpans}\n                        onSpanClick={handleSpanClick}\n                        selectedSpanId={selectedSpanId}\n                        expandedSpanIds={expandedSpanIds}\n                        setExpandedSpanIds={setExpandedSpanIds}\n                        featuredSpanIds={featuredSpanIds}\n                        leadingSlot={searchField}\n                      />\n                      {noSearchResults}\n                    </DataPanel.Content>\n                  </TabContent>\n                  <TabContent value=\"timeline\" className=\"min-h-0 py-0\">\n                    <DataPanel.Content>\n                      {/* Same selection + expansion state as the Spans tab, so switching views keeps context. */}\n                      <TraceSpanTimeline\n                        hierarchicalSpans={hierarchicalSpans}\n                        onSpanClick={handleSpanClick}\n                        selectedSpanId={selectedSpanId}\n                        expandedSpanIds={expandedSpanIds}\n                        setExpandedSpanIds={setExpandedSpanIds}\n                        featuredSpanIds={featuredSpanIds}\n                        leadingSlot={searchField}\n                      />\n                      {noSearchResults}\n                    </DataPanel.Content>\n                  </TabContent>\n                  {feedbackTabSlot && (\n                    <TabContent value=\"feedback\" className=\"h-full min-h-0 py-0\">\n                      <DataPanel.Content>{feedbackTabSlot({ traceId })}</DataPanel.Content>\n                    </TabContent>\n                  )}\n                  {scoresTabSlot && (\n                    <TabContent value=\"scores\" className=\"h-full min-h-0 py-0\">\n                      <DataPanel.Content>{scoresTabSlot({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n                    </TabContent>\n                  )}\n                </Tabs>\n              );\n            })()\n          )}\n        </TracePanelColumns>\n      )}\n    </DataPanel>\n  );\n}\n\n/**\n * Lays out the card body as three columns — `[messages] [trace] [span]` — inside\n * the same card. The messages and span cells always exist and collapse to `0fr`\n * when hidden, so opening/closing them animates via `grid-template-columns`\n * rather than mounting/unmounting a DOM column (which cannot be transitioned).\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n */\nfunction TracePanelColumns({\n  messagesPanelSlot,\n  messagesCollapsed,\n  spanPanelSlot,\n  highlightQuery,\n  spanPanelKey,\n  children,\n}: {\n  messagesPanelSlot?: ReactNode;\n  /** Folds the messages column away (e.g. while the Timeline tab needs the width). */\n  messagesCollapsed: boolean;\n  spanPanelSlot?: ReactNode;\n  highlightQuery: string;\n  /** Identity of the span shown in the panel; changing it re-triggers the match scroll. */\n  spanPanelKey?: string;\n  children: ReactNode;\n}) {\n  // A single hook call on the common ancestor covers both the timeline tree and\n  // the span detail, so span names and payload values highlight together.\n  const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n  // Scoped to the span-panel column only: a match deep in a large payload sits below\n  // the fold, so the first painted match is brought into view when the panel opens.\n  // The timeline column must never be scrolled by this.\n  const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n  const showMessages = !!messagesPanelSlot && !messagesCollapsed;\n  const columns =\n    showMessages && spanPanelSlot\n      ? 'grid-cols-[1fr_1fr_1fr]'\n      : showMessages\n        ? 'grid-cols-[1fr_1fr_0fr]'\n        : spanPanelSlot\n          ? 'grid-cols-[0fr_1fr_1fr]'\n          : 'grid-cols-[0fr_1fr_0fr]';\n\n  return (\n    <div\n      ref={highlightRef}\n      data-trace-columns\n      className={cn('grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out', columns)}\n    >\n      <div\n        className={cn(\n          'flex min-h-0 min-w-0 flex-col overflow-hidden',\n          showMessages && 'animate-in border-r border-border1 duration-300 fade-in-0',\n        )}\n      >\n        {messagesPanelSlot}\n      </div>\n      <div className=\"flex min-h-0 min-w-0 flex-col overflow-hidden\">{children}</div>\n      {/* Searchable: the span detail is where a match hides inside a large payload. */}\n      <div\n        ref={scrollToMatchRef}\n        data-highlight\n        className={cn(\n          'flex min-h-0 min-w-0 flex-col overflow-hidden',\n          spanPanelSlot && 'animate-in border-l border-border1 duration-300 fade-in-0',\n        )}\n      >\n        {spanPanelSlot}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"trace-data-panel-view.es.js","sources":["../../../../src/domains/traces/components/trace-data-panel-view.tsx"],"sourcesContent":["import {\n  CircleGaugeIcon,\n  DownloadIcon,\n  Link2Icon,\n  Loader2Icon,\n  MoreHorizontalIcon,\n  SaveIcon,\n  WrenchIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { SearchableSpan } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { useScrollToFirstHighlight } from '@/hooks/use-scroll-to-first-highlight';\nimport { useTextHighlight } from '@/hooks/use-text-highlight';\nimport { cn } from '@/lib/utils';\n\nexport type TraceDataPanelPlacement = 'traces-list' | 'trace-page';\n\nexport type TraceDataPanelTab = 'details' | 'timeline' | 'scores' | 'feedback';\n\nexport interface TraceDataPanelViewProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: SearchableSpan[] | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  onSpanSelect?: (spanId: string | undefined) => void;\n  onEvaluateTrace?: () => void;\n  /** When set, an \"Add full trace to dataset\" button appears; the consumer owns the dialog. */\n  onSaveAsDatasetItem?: (args: { traceId: string; rootSpanId: string | undefined }) => void;\n  /** When set, an \"Add tool mocks to item\" button appears; the consumer owns the dialog. */\n  onAddTraceMocksToItem?: (args: { traceId: string }) => void;\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  /** Drawer width; defaults to `wide` since the panel lays out several columns. */\n  size?: DataPanelProps['size'];\n  /** Elevation when opened next to other sibling panels. */\n  depth?: DataPanelProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. inbox feedback context). */\n  headerSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  placement: TraceDataPanelPlacement;\n  /** @deprecated No longer used: the panel renders the span tree with the duration as text. */\n  timelineChartWidth?: 'wide' | 'default';\n  /** When both are provided, renders an \"Open trace page\" button. */\n  LinkComponent?: LinkComponent;\n  traceHref?: string;\n  /** When provided, the entity name in the trace summary links to the entity's page. */\n  entityHref?: string;\n  /** Token and estimated-cost totals shown in the compact trace summary. */\n  usage?: TraceUsageSummary;\n  /**\n   * Span treated as the displayed root of the timeline. Required for branch\n   * subtrees from `getBranch` where the anchor has a real parent that's outside\n   * `spans`. When omitted, the span with no parent is used (trace case).\n   */\n  anchorSpanId?: string;\n  /**\n   * Whether to render the \"Evaluating traces and saving them as dataset items is\n   * available in Mastra Studio\" info notice when neither `onEvaluateTrace` nor\n   * `onSaveAsDatasetItem` is provided. Defaults to `true`. Pass `false` when this\n   * panel is rendered inside Studio in a context that intentionally omits those\n   * handlers (e.g. inline below an experiment result).\n   */\n  showUnavailableFeaturesMsg?: boolean;\n  /**\n   * When provided, a \"Scores\" tab appears; the slot renders whatever trace-level\n   * scoring UI the consumer wants.\n   */\n  scoresTabSlot?: (args: { traceId: string; rootSpanId: string | undefined }) => ReactNode;\n  /** Optional count shown in the \"Scores\" tab label. */\n  scoresTabBadge?: ReactNode;\n  /**\n   * When provided, a \"Feedback\" tab appears; the slot renders the trace-level\n   * feedback UI. Trace feedback is not scoped to a span — the span panel owns that.\n   */\n  feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n  /** Optional indicator rendered after the \"Feedback\" tab label (e.g. a needs-review dot). */\n  feedbackTabBadge?: ReactNode;\n  activeTab?: TraceDataPanelTab;\n  onTabChange?: (tab: TraceDataPanelTab) => void;\n  /** Span ids to feature in the timeline; every other span is faded. */\n  featuredSpanIds?: string[];\n  /**\n   * Rendered as a column to the left of the span tree inside the same card\n   * (typically the trace as one reconstructed agent turn). Collapsed while the\n   * Timeline tab is active, since the timeline needs the width.\n   */\n  messagesPanelSlot?: ReactNode;\n  /**\n   * Rendered as a column to the right of the timeline inside the same card;\n   * typically the span detail.\n   */\n  spanPanelSlot?: ReactNode;\n}\n\nexport function TraceDataPanelView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  onEvaluateTrace,\n  onSaveAsDatasetItem,\n  onAddTraceMocksToItem,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  size = 'wide',\n  depth,\n  headerSlot,\n  title,\n  placement,\n  LinkComponent,\n  traceHref,\n  entityHref,\n  usage,\n  anchorSpanId,\n  showUnavailableFeaturesMsg = true,\n  scoresTabSlot,\n  scoresTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  activeTab,\n  onTabChange,\n  featuredSpanIds,\n  messagesPanelSlot,\n  spanPanelSlot,\n}: TraceDataPanelViewProps) {\n  const isOnTracePage = placement === 'trace-page';\n\n  // Tracked locally too (tabs may be uncontrolled) so the messages column knows\n  // when to fold away for the Timeline tab.\n  const [uncontrolledTab, setUncontrolledTab] = useState<TraceDataPanelTab>('details');\n  const currentTab = activeTab ?? uncontrolledTab;\n  const handleTabChange = (tab: TraceDataPanelTab) => {\n    setUncontrolledTab(tab);\n    onTabChange?.(tab);\n  };\n\n  const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n  const [selectedSpanId, setSelectedSpanId] = useState<string | undefined>(initialSpanId ?? undefined);\n\n  // Sync selected span when initialSpanId or trace data changes\n  useEffect(() => {\n    // No span requested: clear immediately.\n    if (!initialSpanId) {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n      return;\n    }\n    // Span requested: wait for trace data before deciding so an in-flight\n    // fetch doesn't wipe a URL-provided selection. Callers that default their\n    // spans to `[]` while loading only say so through `isLoading`.\n    if (isLoading || !spans) return;\n\n    const found = spans.find(s => s.spanId === initialSpanId);\n    if (found) {\n      setSelectedSpanId(initialSpanId);\n      onSpanSelect?.(initialSpanId);\n    } else {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpanId, spans, isLoading]);\n\n  const searchFieldName = useId();\n  const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n  const hierarchicalSpans = useMemo(\n    () =>\n      formatHierarchicalSpans(\n        // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n        // rendered several components deeper.\n        results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n        anchorSpanId,\n      ),\n    [results, payloadOnlyMatchIds, anchorSpanId],\n  );\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const rootSpan = useMemo(\n    () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n    [spans, anchorSpanId],\n  );\n  const handleSpanClick = (id: string) => {\n    const newId = selectedSpanId === id ? undefined : id;\n    setSelectedSpanId(newId);\n    onSpanSelect?.(newId);\n  };\n\n  const traceActionsMenu = traceId && (\n    <DropdownMenu>\n      <DropdownMenu.Trigger\n        render={\n          <Button size=\"sm\" variant=\"ghost\" tooltip=\"Trace actions\" aria-label=\"Trace actions\">\n            <MoreHorizontalIcon />\n          </Button>\n        }\n      />\n      <DropdownMenu.Content align=\"end\">\n        {!isOnTracePage && onSaveAsDatasetItem && (\n          <DropdownMenu.Item onSelect={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}>\n            <SaveIcon />\n            Add full trace to dataset\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && onAddTraceMocksToItem && (\n          <DropdownMenu.Item onSelect={() => onAddTraceMocksToItem({ traceId })}>\n            <WrenchIcon />\n            Add tool mocks to item\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && LinkComponent && traceHref && (\n          <DropdownMenu.Item render={<LinkComponent href={traceHref} />}>\n            <Link2Icon />\n            Open trace page\n          </DropdownMenu.Item>\n        )}\n        <DropdownMenu.Item disabled={isDownloadingTrace} onSelect={() => downloadTraceJson(traceId)}>\n          {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n          Download trace JSON\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n\n  return (\n    <DataPanel\n      open={!!traceId}\n      onClose={onClose}\n      title={title ?? (isOnTracePage ? 'Trace Timeline' : `Trace ${traceId ?? ''}`)}\n      size={size}\n      depth={depth}\n    >\n      {traceId && (\n        <>\n          {headerSlot}\n          <DataPanel.Header>\n            {isOnTracePage ? (\n              <>\n                <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n                <DataPanel.HeaderActions>{traceActionsMenu}</DataPanel.HeaderActions>\n              </>\n            ) : (\n              <>\n                <DataPanel.HeaderContent>\n                  <DataPanel.Heading>\n                    Trace\n                    <TraceIdButton id={traceId} />\n                  </DataPanel.Heading>\n                  {rootSpan && (\n                    <TraceSummaryDescription\n                      rootSpan={rootSpan}\n                      usage={usage}\n                      entityHref={entityHref}\n                      LinkComponent={LinkComponent}\n                    />\n                  )}\n                </DataPanel.HeaderContent>\n                <DataPanel.HeaderActions>\n                  {onEvaluateTrace && (\n                    <Button variant=\"primary\" size=\"sm\" onClick={onEvaluateTrace} disabled={!rootSpan}>\n                      <CircleGaugeIcon />\n                      Score trace\n                    </Button>\n                  )}\n                  {traceActionsMenu}\n                  {(onPrevious || onNext) && (\n                    <DataPanel.NextPrevNav\n                      onPrevious={onPrevious}\n                      onNext={onNext}\n                      previousLabel=\"Previous trace\"\n                      nextLabel=\"Next trace\"\n                    />\n                  )}\n                  <DataPanel.CloseButton onClick={onClose} />\n                </DataPanel.HeaderActions>\n              </>\n            )}\n          </DataPanel.Header>\n\n          <TracePanelColumns\n            messagesPanelSlot={messagesPanelSlot}\n            messagesCollapsed={currentTab === 'timeline'}\n            spanPanelSlot={spanPanelSlot}\n            highlightQuery={query}\n            spanPanelKey={selectedSpanId}\n          >\n            {isLoading ? (\n              <DataPanel.LoadingData>Loading trace...</DataPanel.LoadingData>\n            ) : !spans?.length ? (\n              <DataPanel.NoData>No spans found for this trace.</DataPanel.NoData>\n            ) : (\n              (() => {\n                // Shared by the Spans and Timeline tabs: both views render the same\n                // filtered `hierarchicalSpans`, so one query drives both.\n                const searchField = (\n                  <SearchFieldBlock\n                    name={searchFieldName}\n                    label=\"Search spans\"\n                    labelIsHidden\n                    placeholder=\"Search spans...\"\n                    value={query}\n                    onChange={e => setQuery(e.target.value)}\n                    onReset={() => setQuery('')}\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"w-full\"\n                  />\n                );\n                const noSearchResults = hierarchicalSpans.length === 0 && (\n                  <DataPanel.NoData>No spans match your search.</DataPanel.NoData>\n                );\n\n                return (\n                  <Tabs<TraceDataPanelTab>\n                    defaultTab=\"details\"\n                    value={activeTab}\n                    onValueChange={handleTabChange}\n                    className=\"grid h-full min-h-0 grid-rows-[auto_1fr]\"\n                  >\n                    <DataPanel.Header>\n                      <TabList variant=\"pill-ghost\">\n                        <Tab value=\"details\">Spans</Tab>\n                        <Tab value=\"timeline\">Timeline</Tab>\n                        {feedbackTabSlot && <Tab value=\"feedback\">Feedback{feedbackTabBadge}</Tab>}\n                        {scoresTabSlot && (\n                          <Tab value=\"scores\">Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}</Tab>\n                        )}\n                      </TabList>\n                    </DataPanel.Header>\n\n                    {/* Tab contents share the tab list's horizontal padding so their edges line up. */}\n                    <TabContent value=\"details\" className=\"min-h-0 py-0\">\n                      <DataPanel.Content>\n                        {!isOnTracePage &&\n                          !onEvaluateTrace &&\n                          !onSaveAsDatasetItem &&\n                          !onAddTraceMocksToItem &&\n                          showUnavailableFeaturesMsg && (\n                            <Notice variant=\"info\" className=\"mb-6\">\n                              <Notice.Message>\n                                Evaluating traces and saving them as dataset items is available in Mastra Studio (local\n                                or deployed).\n                              </Notice.Message>\n                            </Notice>\n                          )}\n\n                        {/* The tree stays mounted even with no results, because it\n                          hosts the search field: unmounting it would strand the user\n                          with a query they can no longer clear. */}\n                        <TraceSpanTree\n                          hierarchicalSpans={hierarchicalSpans}\n                          onSpanClick={handleSpanClick}\n                          selectedSpanId={selectedSpanId}\n                          expandedSpanIds={expandedSpanIds}\n                          setExpandedSpanIds={setExpandedSpanIds}\n                          featuredSpanIds={featuredSpanIds}\n                          leadingSlot={searchField}\n                        />\n                        {noSearchResults}\n                      </DataPanel.Content>\n                    </TabContent>\n                    <TabContent value=\"timeline\" className=\"min-h-0 py-0\">\n                      <DataPanel.Content>\n                        {/* Same selection + expansion state as the Spans tab, so switching views keeps context. */}\n                        <TraceSpanTimeline\n                          hierarchicalSpans={hierarchicalSpans}\n                          onSpanClick={handleSpanClick}\n                          selectedSpanId={selectedSpanId}\n                          expandedSpanIds={expandedSpanIds}\n                          setExpandedSpanIds={setExpandedSpanIds}\n                          featuredSpanIds={featuredSpanIds}\n                          leadingSlot={searchField}\n                        />\n                        {noSearchResults}\n                      </DataPanel.Content>\n                    </TabContent>\n                    {feedbackTabSlot && (\n                      <TabContent value=\"feedback\" className=\"h-full min-h-0 py-0\">\n                        <DataPanel.Content>{feedbackTabSlot({ traceId })}</DataPanel.Content>\n                      </TabContent>\n                    )}\n                    {scoresTabSlot && (\n                      <TabContent value=\"scores\" className=\"h-full min-h-0 py-0\">\n                        <DataPanel.Content>\n                          {scoresTabSlot({ traceId, rootSpanId: rootSpan?.spanId })}\n                        </DataPanel.Content>\n                      </TabContent>\n                    )}\n                  </Tabs>\n                );\n              })()\n            )}\n          </TracePanelColumns>\n        </>\n      )}\n    </DataPanel>\n  );\n}\n\n/**\n * Lays out the card body as three columns — `[messages] [trace] [span]` — inside\n * the same card. The messages and span cells always exist and collapse to `0fr`\n * when hidden, so opening/closing them animates via `grid-template-columns`\n * rather than mounting/unmounting a DOM column (which cannot be transitioned).\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n */\nfunction TracePanelColumns({\n  messagesPanelSlot,\n  messagesCollapsed,\n  spanPanelSlot,\n  highlightQuery,\n  spanPanelKey,\n  children,\n}: {\n  messagesPanelSlot?: ReactNode;\n  /** Folds the messages column away (e.g. while the Timeline tab needs the width). */\n  messagesCollapsed: boolean;\n  spanPanelSlot?: ReactNode;\n  highlightQuery: string;\n  /** Identity of the span shown in the panel; changing it re-triggers the match scroll. */\n  spanPanelKey?: string;\n  children: ReactNode;\n}) {\n  // A single hook call on the common ancestor covers both the timeline tree and\n  // the span detail, so span names and payload values highlight together.\n  const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n  // Scoped to the span-panel column only: a match deep in a large payload sits below\n  // the fold, so the first painted match is brought into view when the panel opens.\n  // The timeline column must never be scrolled by this.\n  const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n  const showMessages = !!messagesPanelSlot && !messagesCollapsed;\n  const columns =\n    showMessages && spanPanelSlot\n      ? 'grid-cols-[1fr_1fr_1fr]'\n      : showMessages\n        ? 'grid-cols-[1fr_1fr_0fr]'\n        : spanPanelSlot\n          ? 'grid-cols-[0fr_1fr_1fr]'\n          : 'grid-cols-[0fr_1fr_0fr]';\n\n  return (\n    <div\n      ref={highlightRef}\n      data-trace-columns\n      className={cn('grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out', columns)}\n    >\n      <div\n        className={cn(\n          'flex min-h-0 min-w-0 flex-col overflow-hidden',\n          showMessages && 'animate-in border-r border-border1 duration-300 fade-in-0',\n        )}\n      >\n        {messagesPanelSlot}\n      </div>\n      <div className=\"flex min-h-0 min-w-0 flex-col overflow-hidden\">{children}</div>\n      {/* Searchable: the span detail is where a match hides inside a large payload. */}\n      <div\n        ref={scrollToMatchRef}\n        data-highlight\n        className={cn(\n          'flex min-h-0 min-w-0 flex-col overflow-hidden',\n          spanPanelSlot && 'animate-in border-l border-border1 duration-300 fade-in-0',\n        )}\n      >\n        {spanPanelSlot}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"trace-details-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-details-view.tsx"],"sourcesContent":["import type { LightSpanRecord } from '@mastra/core/storage';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nexport interface TraceDetailsViewProps {\n  traceId: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: LightSpanRecord[] | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  /** Called when the user clicks a span in the timeline. Toggling a selected span off passes undefined. */\n  onSpanSelect?: (spanId: string | undefined) => void;\n  /** Fully controlled selection — the span to highlight. Pass whatever the parent's source of truth is. */\n  selectedSpanId?: string | null;\n}\n\n/**\n * Compact trace panel using `DataDetailsPanel` (popover-style). Renders the timeline only —\n * no trace header KV, no evaluate/save actions. Use this for inline trace inspection from a\n * list page (e.g. the Logs page). For the full-width trace view, use `TraceDataPanelView`.\n */\nexport function TraceDetailsView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  selectedSpanId,\n}: TraceDetailsViewProps) {\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const handleSpanClick = (id: string) => {\n    onSpanSelect?.(selectedSpanId === id ? undefined : id);\n  };\n\n  return (\n    <DataDetailsPanel>\n      <DataDetailsPanel.Header>\n        <DataDetailsPanel.Heading className=\"items-center\">\n          Trace\n          <TraceIdButton id={traceId} />\n        </DataDetailsPanel.Heading>\n        <DataDetailsPanel.CloseButton onClick={onClose} />\n      </DataDetailsPanel.Header>\n\n      {isLoading ? (\n        <DataDetailsPanel.LoadingData>Loading trace...</DataDetailsPanel.LoadingData>\n      ) : hierarchicalSpans.length === 0 ? (\n        <DataDetailsPanel.NoData>No spans found for this trace.</DataDetailsPanel.NoData>\n      ) : (\n        <DataDetailsPanel.Content>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            onSpanClick={handleSpanClick}\n            selectedSpanId={selectedSpanId ?? undefined}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n          />\n        </DataDetailsPanel.Content>\n      )}\n    </DataDetailsPanel>\n  );\n}\n"],"names":["useMemo","formatHierarchicalSpans","useState","useEffect","getAllSpanIds","DataDetailsPanel","jsxs","jsx","TraceIdButton","TraceSpanTree"],"mappings":";;;;;;;;;;;;AAyBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,iBAAA,GAAoBA,aAAA,CAAQ,MAAMC,yEAAA,CAAwB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAErF,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIC,cAAA,CAAmB,EAAE,CAAA;AAEnE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmBC,gDAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,YAAA,GAAe,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAE,CAAA;AAAA,EACvD,CAAA;AAEA,EAAA,uCACGC,4CAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,4CAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAAC,eAAA,CAACD,4CAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBAEjDE,cAAA,CAACC,qDAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACAD,cAAA,CAACF,4CAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACCE,cAAA,CAACF,4CAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,kBAAA,EAAgB,IAC5C,iBAAA,CAAkB,MAAA,KAAW,oBAC/BE,cAAA,CAACF,4CAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,gCAAA,EAA8B,oBAEvDE,cAAA,CAACF,4CAAA,CAAiB,SAAjB,EACC,QAAA,kBAAAE,cAAA;AAAA,MAACE,qDAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,WAAA,EAAa,eAAA;AAAA,QACb,gBAAgB,cAAA,IAAkB,MAAA;AAAA,QAClC,eAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-details-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-details-view.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport type { LightSpanRecord } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nexport interface TraceDetailsViewProps {\n  traceId: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: LightSpanRecord[] | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  /** Called when the user clicks a span in the timeline. Toggling a selected span off passes undefined. */\n  onSpanSelect?: (spanId: string | undefined) => void;\n  /** Fully controlled selection — the span to highlight. Pass whatever the parent's source of truth is. */\n  selectedSpanId?: string | null;\n}\n\n/**\n * Compact trace panel using `DataDetailsPanel` (popover-style). Renders the timeline only —\n * no trace header KV, no evaluate/save actions. Use this for inline trace inspection from a\n * list page (e.g. the Logs page). For the full-width trace view, use `TraceDataPanelView`.\n */\nexport function TraceDetailsView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  selectedSpanId,\n}: TraceDetailsViewProps) {\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const handleSpanClick = (id: string) => {\n    onSpanSelect?.(selectedSpanId === id ? undefined : id);\n  };\n\n  return (\n    <DataDetailsPanel>\n      <DataDetailsPanel.Header>\n        <DataDetailsPanel.Heading className=\"items-center\">\n          Trace\n          <TraceIdButton id={traceId} />\n        </DataDetailsPanel.Heading>\n        <DataDetailsPanel.CloseButton onClick={onClose} />\n      </DataDetailsPanel.Header>\n\n      {isLoading ? (\n        <DataDetailsPanel.LoadingData>Loading trace...</DataDetailsPanel.LoadingData>\n      ) : hierarchicalSpans.length === 0 ? (\n        <DataDetailsPanel.NoData>No spans found for this trace.</DataDetailsPanel.NoData>\n      ) : (\n        <DataDetailsPanel.Content>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            onSpanClick={handleSpanClick}\n            selectedSpanId={selectedSpanId ?? undefined}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n          />\n        </DataDetailsPanel.Content>\n      )}\n    </DataDetailsPanel>\n  );\n}\n"],"names":["useMemo","formatHierarchicalSpans","useState","useEffect","getAllSpanIds","DataDetailsPanel","jsxs","jsx","TraceIdButton","TraceSpanTree"],"mappings":";;;;;;;;;;;;AAyBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,iBAAA,GAAoBA,aAAA,CAAQ,MAAMC,yEAAA,CAAwB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAErF,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIC,cAAA,CAAmB,EAAE,CAAA;AAEnE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmBC,gDAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,YAAA,GAAe,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAE,CAAA;AAAA,EACvD,CAAA;AAEA,EAAA,uCACGC,4CAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,4CAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAAC,eAAA,CAACD,4CAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBAEjDE,cAAA,CAACC,qDAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACAD,cAAA,CAACF,4CAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACCE,cAAA,CAACF,4CAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,kBAAA,EAAgB,IAC5C,iBAAA,CAAkB,MAAA,KAAW,oBAC/BE,cAAA,CAACF,4CAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,gCAAA,EAA8B,oBAEvDE,cAAA,CAACF,4CAAA,CAAiB,SAAjB,EACC,QAAA,kBAAAE,cAAA;AAAA,MAACE,qDAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,WAAA,EAAa,eAAA;AAAA,QACb,gBAAgB,cAAA,IAAkB,MAAA;AAAA,QAClC,eAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"trace-details-view.es.js","sources":["../../../../src/domains/traces/components/trace-details-view.tsx"],"sourcesContent":["import type { LightSpanRecord } from '@mastra/core/storage';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nexport interface TraceDetailsViewProps {\n  traceId: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: LightSpanRecord[] | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  /** Called when the user clicks a span in the timeline. Toggling a selected span off passes undefined. */\n  onSpanSelect?: (spanId: string | undefined) => void;\n  /** Fully controlled selection — the span to highlight. Pass whatever the parent's source of truth is. */\n  selectedSpanId?: string | null;\n}\n\n/**\n * Compact trace panel using `DataDetailsPanel` (popover-style). Renders the timeline only —\n * no trace header KV, no evaluate/save actions. Use this for inline trace inspection from a\n * list page (e.g. the Logs page). For the full-width trace view, use `TraceDataPanelView`.\n */\nexport function TraceDetailsView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  selectedSpanId,\n}: TraceDetailsViewProps) {\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const handleSpanClick = (id: string) => {\n    onSpanSelect?.(selectedSpanId === id ? undefined : id);\n  };\n\n  return (\n    <DataDetailsPanel>\n      <DataDetailsPanel.Header>\n        <DataDetailsPanel.Heading className=\"items-center\">\n          Trace\n          <TraceIdButton id={traceId} />\n        </DataDetailsPanel.Heading>\n        <DataDetailsPanel.CloseButton onClick={onClose} />\n      </DataDetailsPanel.Header>\n\n      {isLoading ? (\n        <DataDetailsPanel.LoadingData>Loading trace...</DataDetailsPanel.LoadingData>\n      ) : hierarchicalSpans.length === 0 ? (\n        <DataDetailsPanel.NoData>No spans found for this trace.</DataDetailsPanel.NoData>\n      ) : (\n        <DataDetailsPanel.Content>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            onSpanClick={handleSpanClick}\n            selectedSpanId={selectedSpanId ?? undefined}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n          />\n        </DataDetailsPanel.Content>\n      )}\n    </DataDetailsPanel>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,iBAAA,GAAoB,OAAA,CAAQ,MAAM,uBAAA,CAAwB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAErF,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmB,aAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,YAAA,GAAe,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAE,CAAA;AAAA,EACvD,CAAA;AAEA,EAAA,4BACG,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,gBAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,gBAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBAEjD,GAAA,CAAC,aAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACA,GAAA,CAAC,gBAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACC,GAAA,CAAC,gBAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,kBAAA,EAAgB,IAC5C,iBAAA,CAAkB,MAAA,KAAW,oBAC/B,GAAA,CAAC,gBAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,gCAAA,EAA8B,oBAEvD,GAAA,CAAC,gBAAA,CAAiB,SAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,WAAA,EAAa,eAAA;AAAA,QACb,gBAAgB,cAAA,IAAkB,MAAA;AAAA,QAClC,eAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-details-view.es.js","sources":["../../../../src/domains/traces/components/trace-details-view.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport type { LightSpanRecord } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nexport interface TraceDetailsViewProps {\n  traceId: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: LightSpanRecord[] | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  /** Called when the user clicks a span in the timeline. Toggling a selected span off passes undefined. */\n  onSpanSelect?: (spanId: string | undefined) => void;\n  /** Fully controlled selection — the span to highlight. Pass whatever the parent's source of truth is. */\n  selectedSpanId?: string | null;\n}\n\n/**\n * Compact trace panel using `DataDetailsPanel` (popover-style). Renders the timeline only —\n * no trace header KV, no evaluate/save actions. Use this for inline trace inspection from a\n * list page (e.g. the Logs page). For the full-width trace view, use `TraceDataPanelView`.\n */\nexport function TraceDetailsView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  selectedSpanId,\n}: TraceDetailsViewProps) {\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const handleSpanClick = (id: string) => {\n    onSpanSelect?.(selectedSpanId === id ? undefined : id);\n  };\n\n  return (\n    <DataDetailsPanel>\n      <DataDetailsPanel.Header>\n        <DataDetailsPanel.Heading className=\"items-center\">\n          Trace\n          <TraceIdButton id={traceId} />\n        </DataDetailsPanel.Heading>\n        <DataDetailsPanel.CloseButton onClick={onClose} />\n      </DataDetailsPanel.Header>\n\n      {isLoading ? (\n        <DataDetailsPanel.LoadingData>Loading trace...</DataDetailsPanel.LoadingData>\n      ) : hierarchicalSpans.length === 0 ? (\n        <DataDetailsPanel.NoData>No spans found for this trace.</DataDetailsPanel.NoData>\n      ) : (\n        <DataDetailsPanel.Content>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            onSpanClick={handleSpanClick}\n            selectedSpanId={selectedSpanId ?? undefined}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n          />\n        </DataDetailsPanel.Content>\n      )}\n    </DataDetailsPanel>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,iBAAA,GAAoB,OAAA,CAAQ,MAAM,uBAAA,CAAwB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAErF,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmB,aAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,YAAA,GAAe,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAE,CAAA;AAAA,EACvD,CAAA;AAEA,EAAA,4BACG,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,gBAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,gBAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBAEjD,GAAA,CAAC,aAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACA,GAAA,CAAC,gBAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACC,GAAA,CAAC,gBAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,kBAAA,EAAgB,IAC5C,iBAAA,CAAkB,MAAA,KAAW,oBAC/B,GAAA,CAAC,gBAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,gCAAA,EAA8B,oBAEvD,GAAA,CAAC,gBAAA,CAAiB,SAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,WAAA,EAAa,eAAA;AAAA,QACb,gBAAgB,cAAA,IAAkB,MAAA;AAAA,QAClC,eAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-id-button.cjs.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const Button = require('../../../Button-BJOVwaxp.cjs');
-const tooltip = require('../../../tooltip-BsSNtmxl.cjs');
+const Button = require('../../../Button-B1TWWXCy.cjs');
+const tooltip = require('../../../tooltip-D9ylrXmx.cjs');
 const hooks_useCopyToClipboard = require('../../../hooks/use-copy-to-clipboard.cjs.js');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
 

package/dist/domains/traces/components/trace-id-button.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { B as Button } from '../../../Button-BVGwYwHT.js';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-Vj_jjcxE.js';
+import { B as Button } from '../../../Button-XSiL3zvL.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-D1PLTHDf.js';
 import { useCopyToClipboard } from '../../../hooks/use-copy-to-clipboard.es.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
 

package/dist/domains/traces/components/trace-keys-and-values.cjs.js

@@ -6,8 +6,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
 const domains_traces_components_traceStatusValue = require('./trace-status-value.cjs.js');
 const domains_metrics_components_metricsUtils = require('../../metrics/components/metrics-utils.cjs.js');
-const dataKeysAndValues = require('../../../data-keys-and-values-CUqVRfqS.cjs');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-CDhHx4Tc.cjs');
+const utils_cn = require('../../../cn-DPfV6E6L.cjs');
 
 const RESPONSIVE_GRID_COLUMNS = {
   1: "grid-cols-[auto_1fr]!",

package/dist/domains/traces/components/trace-keys-and-values.es.js

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { formatSpanDuration, formatSpanDurationExact, formatSpanTimestamp, formatSpanTimestampExact } from '../utils/span-utils.es.js';
 import { TraceStatusValue } from './trace-status-value.es.js';
 import { formatCompact, formatCost } from '../../metrics/components/metrics-utils.es.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-778xnwOK.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DNqDDNb0.js';
+import { c as cn } from '../../../cn-Dxjsbr9n.js';
 
 const RESPONSIVE_GRID_COLUMNS = {
   1: "grid-cols-[auto_1fr]!",