npm - @mastra/playground-ui - Versions diffs - 60.2.0 → 61.0.0-alpha.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1106) hide show

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

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

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

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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
+const reactResizablePanels = require('react-resizable-panels');
 const domains_traces_hooks_getAllSpanIds = require('../hooks/get-all-span-ids.cjs.js');
 const domains_traces_hooks_useDownloadTraceJson = require('../hooks/use-download-trace-json.cjs.js');
 const domains_traces_hooks_useTraceSearch = require('../hooks/use-trace-search.cjs.js');
@@ -15,17 +16,19 @@ const domains_traces_components_traceSpanTree = require('./trace-span-tree.cjs.j
 const domains_traces_components_traceSummaryDescription = require('./trace-summary-description.cjs.js');
 const Button = require('../../../Button-CXhSUBxN.cjs');
 const buttonsGroup = require('../../../buttons-group-CoZP3lJt.cjs');
-const dataPanel = require('../../../data-panel-o-QLWuFV.cjs');
+const dataPanel = require('../../../data-panel-YCvno_Di.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
-const Notice = require('../../../Notice-C4Tgmtgb.cjs');
-const searchInput = require('../../../search-input-T0orZ7Jf.cjs');
-const tabsRoot = require('../../../tabs-root-C-ePF1y9.cjs');
-const tabsTab = require('../../../tabs-tab-BmIBFifi.cjs');
+const Notice = require('../../../Notice-D4zc_oTj.cjs');
+const searchInput = require('../../../search-input-CBhT3N4z.cjs');
+const tabsRoot = require('../../../tabs-root-Hkt7A6oq.cjs');
+const tabsList = require('../../../tabs-list-Tqj36HIL.cjs');
+const tabsTab = require('../../../tabs-tab-C-C2vX-D.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const icons_ScorersIcon = require('../../../icons/ScorersIcon.cjs.js');
 const hooks_useScrollToFirstHighlight = require('../../../hooks/use-scroll-to-first-highlight.cjs.js');
 const hooks_useTextHighlight = require('../../../hooks/use-text-highlight.cjs.js');
-const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const resize_panelGroup = require('../../../resize/panel-group.cjs.js');
+const resize_separator = require('../../../resize/separator.cjs.js');
 function TraceDataPanelView({
   traceId,
@@ -56,6 +59,7 @@ function TraceDataPanelView({
   feedbackTabBadge,
   featuredSpanIds,
   messagesPanelSlot,
+  sideHeaderActions,
   sideView: controlledSideView,
   onSideViewChange,
   spanView: controlledSpanView,
@@ -68,22 +72,26 @@ function TraceDataPanelView({
     if (messagesPanelSlot) {
       views.push({
         value: "messages",
+        name: "Messages",
         label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareTextIcon, {}) }),
-          "Messages"
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "@max-[501px]:sr-only", children: "Messages" })
         ] })
       });
     }
     if (feedbackTabSlot) {
       views.push({
         value: "feedback",
+        name: "Feedback",
         label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareReplyIcon, {}) }),
-          "Feedback",
-          feedbackTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            " (",
-            feedbackTabBadge,
-            ")"
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "@max-[501px]:sr-only", children: [
+            "Feedback",
+            feedbackTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              " (",
+              feedbackTabBadge,
+              ")"
+            ] })
           ] })
         ] })
       });
@@ -91,13 +99,16 @@ function TraceDataPanelView({
     if (scoresTabSlot) {
       views.push({
         value: "scores",
+        name: "Scores",
         label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(icons_ScorersIcon.ScorersIcon, {}) }),
-          "Scores",
-          scoresTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            " (",
-            scoresTabBadge,
-            ")"
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "@max-[501px]:sr-only", children: [
+            "Scores",
+            scoresTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              " (",
+              scoresTabBadge,
+              ")"
+            ] })
           ] })
         ] })
       });
@@ -105,6 +116,14 @@ function TraceDataPanelView({
     return views;
   }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);
   const [uncontrolledSideView, setUncontrolledSideView] = React.useState();
+  const [sideColumnElement, setSideColumnElement] = React.useState(null);
+  const [compactSide, setCompactSide] = React.useState(false);
+  React.useEffect(() => {
+    if (!sideColumnElement || !("ResizeObserver" in globalThis)) return;
+    const observer = new ResizeObserver(() => setCompactSide(sideColumnElement.clientWidth <= 500));
+    observer.observe(sideColumnElement);
+    return () => observer.disconnect();
+  }, [sideColumnElement]);
   const chosenSideView = controlledSideView ?? uncontrolledSideView;
   const sideView = (sideViews.find((view) => view.value === chosenSideView) ?? sideViews[0])?.value;
   const handleSideViewChange = (view) => {
@@ -187,12 +206,23 @@ function TraceDataPanelView({
       ] })
     ] })
   ] });
-  const sideColumn = traceId && sideView ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-trace-side-column": true, className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
-    sideView === "messages" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { className: "p-0", children: messagesPanelSlot }),
-    sideView === "feedback" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: feedbackTabSlot?.({ traceId }) }),
-    sideView === "scores" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId }) })
-  ] }) : null;
+  const sideColumn = traceId && sideView ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setSideColumnElement,
+      "data-trace-side-column": true,
+      className: "@container flex h-full min-h-0 min-w-0 flex-col overflow-hidden",
+      children: [
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "h-control-sm" }) }) : /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { className: "border-b border-border", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(tabsList.TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: view.value, tooltip: compactSide ? view.name : void 0, children: view.label }, view.value)) }),
+          sideHeaderActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center whitespace-nowrap", children: sideHeaderActions({ compact: compactSide }) })
+        ] }) }),
+        !isLoading && sideView === "messages" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { className: "p-0", children: messagesPanelSlot }),
+        !isLoading && sideView === "feedback" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: feedbackTabSlot?.({ traceId }) }),
+        !isLoading && sideView === "scores" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId }) })
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     dataPanel.DataPanel,
     {
@@ -313,33 +343,25 @@ function TracePanelColumns({
 }) {
   const { ref: highlightRef } = hooks_useTextHighlight.useTextHighlight(highlightQuery);
   const { ref: scrollToMatchRef } = hooks_useScrollToFirstHighlight.useScrollToFirstHighlight(highlightQuery, spanPanelKey);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: highlightRef,
-      "data-trace-columns": true,
-      className: utils_cn.cn(
-        "grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out",
-        sideColumnSlot ? spanPanelSlot ? "grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]" : "grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]" : spanPanelSlot ? "grid-cols-[0px_1fr_1fr]" : "grid-cols-[0px_1fr_0fr]"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex min-h-0 min-w-0 flex-col overflow-hidden", sideColumnSlot && "border-r border-border"), children: sideColumnSlot }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 min-w-0 flex-col overflow-hidden", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: scrollToMatchRef,
-            "data-highlight": true,
-            className: utils_cn.cn(
-              "flex min-h-0 min-w-0 flex-col overflow-hidden",
-              spanPanelSlot && "animate-in border-l border-border duration-300 fade-in-0"
-            ),
-            children: spanPanelSlot
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: highlightRef, "data-trace-columns": true, className: "flex min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(resize_panelGroup.PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children: [
+    sideColumnSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "trace-side", minSize: 280, defaultSize: "40%", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-0 flex-col border-r border-border", children: sideColumnSlot }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(resize_separator.PanelSeparator, { variant: "pill" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "trace-main", minSize: 320, className: "flex min-h-0 min-w-0 flex-col", children }),
+    spanPanelSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(resize_separator.PanelSeparator, { variant: "pill" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "trace-span", minSize: 320, defaultSize: "35%", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: scrollToMatchRef,
+          "data-highlight": true,
+          className: "flex h-full min-h-0 animate-in flex-col border-l border-border duration-300 fade-in-0",
+          children: spanPanelSlot
+        }
+      ) })
+    ] })
+  ] }) });
 }
 exports.TraceDataPanelView = TraceDataPanelView;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-data-panel-view.tsx"],"sourcesContent":["import {\n ChartGanttIcon,\n CircleGaugeIcon,\n DownloadIcon,\n Link2Icon,\n ListTreeIcon,\n Loader2Icon,\n MessageSquareReplyIcon,\n MessageSquareTextIcon,\n MoreHorizontalIcon,\n SaveIcon,\n WrenchIcon,\n} from 'lucide-react';\nimport { useEffect, 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 type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { Notice } from '@/ds/components/Notice';\nimport { SearchInput } from '@/ds/components/SearchInput';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\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 TraceSpanView = 'tree' \| 'timeline';\n\n/** What the side column next to the span tree shows. /\nexport type TraceSideView = 'messages' \| 'feedback' \| 'scores';\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 count rendered after the \"Feedback\" tab label, e.g. `Feedback (3)`. /\n feedbackTabBadge?: ReactNode;\n /* Span ids to feature in the timeline; every other span is faded. /\n featuredSpanIds?: string[];\n /\n The \"Messages\" view of the side column next to the span tree (typically the\n * trace as one reconstructed agent turn). Rendered without content padding.\n /\n messagesPanelSlot?: ReactNode;\n /* Controlled span view (tree or timeline); falls back to local state starting on the tree. /\n spanView?: TraceSpanView;\n onSpanViewChange?: (view: TraceSpanView) => void;\n /* Controlled side column view; falls back to the first available view. /\n sideView?: TraceSideView;\n onSideViewChange?: (view: TraceSideView) => void;\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 featuredSpanIds,\n messagesPanelSlot,\n sideView: controlledSideView,\n onSideViewChange,\n spanView: controlledSpanView,\n onSpanViewChange,\n spanPanelSlot,\n}: TraceDataPanelViewProps) {\n const isOnTracePage = placement === 'trace-page';\n\n // The side column next to the span tree hosts Messages / Feedback / Scores;\n // which one is shown is purely a local viewing choice.\n const sideViews = useMemo(() => {\n const views: Array<{ value: TraceSideView; label: ReactNode }> = [];\n if (messagesPanelSlot) {\n views.push({\n value: 'messages',\n label: (\n <>\n <Icon size=\"xs\">\n <MessageSquareTextIcon />\n </Icon>\n Messages\n </>\n ),\n });\n }\n if (feedbackTabSlot) {\n views.push({\n value: 'feedback',\n label: (\n <>\n <Icon size=\"xs\">\n <MessageSquareReplyIcon />\n </Icon>\n Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n </>\n ),\n });\n }\n if (scoresTabSlot) {\n views.push({\n value: 'scores',\n label: (\n <>\n <Icon size=\"xs\">\n <ScorersIcon />\n </Icon>\n Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}\n </>\n ),\n });\n }\n return views;\n }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n const chosenSideView = controlledSideView ?? uncontrolledSideView;\n const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n const handleSideViewChange = (view: TraceSideView) => {\n setUncontrolledSideView(view);\n onSideViewChange?.(view);\n };\n\n const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n const spanView = controlledSpanView ?? uncontrolledSpanView;\n const setSpanView = (view: TraceSpanView) => {\n setUncontrolledSpanView(view);\n onSpanViewChange?.(view);\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 { 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 traceSummary = rootSpan && (\n <TraceSummaryDescription rootSpan={rootSpan} usage={usage} entityHref={entityHref} LinkComponent={LinkComponent} />\n );\n\n const traceActionsMenu = traceId && (\n <DropdownMenu>\n <DropdownMenu.Trigger\n render={\n <Button size=\"sm\" variant=\"ghost\" tooltip=\"Open trace actions\" aria-label=\"Open 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 const sideColumn =\n traceId && sideView ? (\n <div data-trace-side-column className=\"flex h-full min-h-0 min-w-0 flex-col overflow-hidden\">\n <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n <DataPanel.Header className=\"border-b border-border\">\n <TabList variant=\"pill-ghost\" size=\"sm\">\n {sideViews.map(view => (\n <Tab key={view.value} value={view.value}>\n {view.label}\n </Tab>\n ))}\n </TabList>\n </DataPanel.Header>\n </Tabs>\n {sideView === 'messages' && <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>}\n {sideView === 'feedback' && <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>}\n {sideView === 'scores' && (\n <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n )}\n </div>\n ) : null;\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.HeaderContent>\n <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n {traceSummary}\n </DataPanel.HeaderContent>\n <DataPanel.HeaderActions>{traceActionsMenu}</DataPanel.HeaderActions>\n </>\n ) : (\n <>\n <DataPanel.CloseButton onClick={onClose} />\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n Trace\n <TraceIdButton id={traceId} />\n </DataPanel.Heading>\n {traceSummary}\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=\"Go to previous trace\"\n nextLabel=\"Go to next trace\"\n />\n )}\n </DataPanel.HeaderActions>\n </>\n )}\n </DataPanel.Header>\n\n <TracePanelColumns\n sideColumnSlot={sideColumn}\n spanPanelSlot={spanPanelSlot}\n highlightQuery={query}\n spanPanelKey={selectedSpanId}\n >\n {!isLoading && !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 isTimeline = spanView === 'timeline';\n const searchHeader = (\n <DataPanel.Header className=\"gap-2 border-b border-border\">\n <SearchInput\n label=\"Search spans\"\n placeholder=\"Search spans...\"\n size=\"sm\"\n value={query}\n onValueChange={setQuery}\n className=\"w-full\"\n />\n <ButtonsGroup size=\"sm\" className=\"shrink-0\">\n <Button\n variant={isTimeline ? 'default' : 'primary'}\n aria-pressed={!isTimeline}\n tooltip=\"Span tree\"\n onClick={() => setSpanView('tree')}\n >\n <ListTreeIcon />\n </Button>\n <Button\n variant={isTimeline ? 'primary' : 'default'}\n aria-pressed={isTimeline}\n tooltip=\"Timeline\"\n onClick={() => setSpanView('timeline')}\n >\n <ChartGanttIcon />\n </Button>\n </ButtonsGroup>\n </DataPanel.Header>\n );\n const noSearchResults = !isLoading && hierarchicalSpans.length === 0 && (\n <DataPanel.NoData>No spans match your search.</DataPanel.NoData>\n );\n const viewProps = {\n hierarchicalSpans,\n onSpanClick: handleSpanClick,\n selectedSpanId,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n isLoading,\n };\n\n return (\n <>\n {searchHeader}\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 {/ Both views share selection + expansion state, and stay mounted with no\n results because they host the search field: unmounting would strand the\n user with a query they can no longer clear. /}\n {isTimeline ? <TraceSpanTimeline {...viewProps} /> : <TraceSpanTree {...viewProps} />}\n {noSearchResults}\n </DataPanel.Content>\n </>\n );\n })()\n )}\n </TracePanelColumns>\n </>\n )}\n </DataPanel>\n );\n}\n\n/\n Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The span\n * cell always exists and collapses to zero when hidden, so opening/closing it\n * animates via `grid-template-columns` rather than mounting/unmounting a DOM\n * 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 sideColumnSlot,\n spanPanelSlot,\n highlightQuery,\n spanPanelKey,\n children,\n}: {\n /* Fixed-width column on the left; the trace and span tracks share the remaining space. /\n sideColumnSlot?: ReactNode;\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 return (\n <div\n ref={highlightRef}\n data-trace-columns\n className={cn(\n 'grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out',\n sideColumnSlot\n ? spanPanelSlot\n ? 'grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]'\n : 'grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]'\n : spanPanelSlot\n ? 'grid-cols-[0px_1fr_1fr]'\n : 'grid-cols-[0px_1fr_0fr]',\n )}\n >\n <div className={cn('flex min-h-0 min-w-0 flex-col overflow-hidden', sideColumnSlot && 'border-r border-border')}>\n {sideColumnSlot}\n </div>\n <div className=\"flex min-h-0 min-w-0 flex-col overflow-hidden\">{children}</div>\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-border duration-300 fade-in-0',\n )}\n >\n {spanPanelSlot}\n </div>\n </div>\n );\n}\n"],"names":["useMemo","jsxs","Fragment","jsx","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","useState","useDownloadTraceJson","useEffect","useTraceSearch","formatHierarchicalSpans","getAllSpanIds","TraceSummaryDescription","DropdownMenu","Button","MoreHorizontalIcon","SaveIcon","WrenchIcon","Link2Icon","Loader2Icon","DownloadIcon","Tabs","DataPanel","TabList","Tab","TraceIdButton","CircleGaugeIcon","SearchInput","ButtonsGroup","ListTreeIcon","ChartGanttIcon","Notice","TraceSpanTimeline","TraceSpanTree","useTextHighlight","useScrollToFirstHighlight","cn"],"mappings":"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"}
1	+ {"version":3,"file":"trace-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-data-panel-view.tsx"],"sourcesContent":["import {\n ChartGanttIcon,\n CircleGaugeIcon,\n DownloadIcon,\n Link2Icon,\n ListTreeIcon,\n Loader2Icon,\n MessageSquareReplyIcon,\n MessageSquareTextIcon,\n MoreHorizontalIcon,\n SaveIcon,\n WrenchIcon,\n} from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { Panel } from 'react-resizable-panels';\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 { LightSpanRecord } 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 type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { Notice } from '@/ds/components/Notice';\nimport { SearchInput } from '@/ds/components/SearchInput';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\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 { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\nimport { cn } from '@/lib/utils';\n\nexport type TraceDataPanelPlacement = 'traces-list' \| 'trace-page';\n\nexport type TraceSpanView = 'tree' \| 'timeline';\n\n/** What the side column next to the span tree shows. /\nexport type TraceSideView = 'messages' \| 'feedback' \| 'scores';\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: LightSpanRecord[] \| 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 count rendered after the \"Feedback\" tab label, e.g. `Feedback (3)`. /\n feedbackTabBadge?: ReactNode;\n /* Span ids to feature in the timeline; every other span is faded. /\n featuredSpanIds?: string[];\n /\n The \"Messages\" view of the side column next to the span tree (typically the\n * trace as one reconstructed agent turn). Rendered without content padding.\n /\n messagesPanelSlot?: ReactNode;\n /\n Actions rendered at the end of the side column's tab row (e.g. \"Open full thread\").\n * `compact` is true when the side column is narrow and controls collapse to icons.\n /\n sideHeaderActions?: (options: { compact: boolean }) => ReactNode;\n /* Controlled span view (tree or timeline); falls back to local state starting on the tree. /\n spanView?: TraceSpanView;\n onSpanViewChange?: (view: TraceSpanView) => void;\n /* Controlled side column view; falls back to the first available view. /\n sideView?: TraceSideView;\n onSideViewChange?: (view: TraceSideView) => void;\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 featuredSpanIds,\n messagesPanelSlot,\n sideHeaderActions,\n sideView: controlledSideView,\n onSideViewChange,\n spanView: controlledSpanView,\n onSpanViewChange,\n spanPanelSlot,\n}: TraceDataPanelViewProps) {\n const isOnTracePage = placement === 'trace-page';\n\n // The side column next to the span tree hosts Messages / Feedback / Scores;\n // which one is shown is purely a local viewing choice.\n const sideViews = useMemo(() => {\n const views: Array<{ value: TraceSideView; name: string; label: ReactNode }> = [];\n if (messagesPanelSlot) {\n views.push({\n value: 'messages',\n name: 'Messages',\n label: (\n <>\n <Icon size=\"xs\">\n <MessageSquareTextIcon />\n </Icon>\n <span className=\"@max-[501px]:sr-only\">Messages</span>\n </>\n ),\n });\n }\n if (feedbackTabSlot) {\n views.push({\n value: 'feedback',\n name: 'Feedback',\n label: (\n <>\n <Icon size=\"xs\">\n <MessageSquareReplyIcon />\n </Icon>\n <span className=\"@max-[501px]:sr-only\">\n Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n </span>\n </>\n ),\n });\n }\n if (scoresTabSlot) {\n views.push({\n value: 'scores',\n name: 'Scores',\n label: (\n <>\n <Icon size=\"xs\">\n <ScorersIcon />\n </Icon>\n <span className=\"@max-[501px]:sr-only\">Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}</span>\n </>\n ),\n });\n }\n return views;\n }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n // Mirrors the side column's `@max-[501px]` container query: the layout collapses in CSS, but\n // tooltips render in a portal outside the container, so they need the width in JS.\n const [sideColumnElement, setSideColumnElement] = useState<HTMLDivElement \| null>(null);\n const [compactSide, setCompactSide] = useState(false);\n useEffect(() => {\n if (!sideColumnElement \|\| !('ResizeObserver' in globalThis)) return;\n const observer = new ResizeObserver(() => setCompactSide(sideColumnElement.clientWidth <= 500));\n observer.observe(sideColumnElement);\n return () => observer.disconnect();\n }, [sideColumnElement]);\n const chosenSideView = controlledSideView ?? uncontrolledSideView;\n const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n const handleSideViewChange = (view: TraceSideView) => {\n setUncontrolledSideView(view);\n onSideViewChange?.(view);\n };\n\n const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n const spanView = controlledSpanView ?? uncontrolledSpanView;\n const setSpanView = (view: TraceSpanView) => {\n setUncontrolledSpanView(view);\n onSpanViewChange?.(view);\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 { 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 traceSummary = rootSpan && (\n <TraceSummaryDescription rootSpan={rootSpan} usage={usage} entityHref={entityHref} LinkComponent={LinkComponent} />\n );\n\n const traceActionsMenu = traceId && (\n <DropdownMenu>\n <DropdownMenu.Trigger\n render={\n <Button size=\"sm\" variant=\"ghost\" tooltip=\"Open trace actions\" aria-label=\"Open 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 const sideColumn =\n traceId && sideView ? (\n <div\n ref={setSideColumnElement}\n data-trace-side-column\n className=\"@container flex h-full min-h-0 min-w-0 flex-col overflow-hidden\"\n >\n {/ Whether the Messages tab exists depends on the spans, so the tabs wait for them;\n otherwise the column flickers Feedback → Messages as the first tab changes. /}\n {isLoading ? (\n <DataPanel.Header className=\"border-b border-border\">\n <div aria-hidden className=\"h-control-sm\" />\n </DataPanel.Header>\n ) : (\n <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n <DataPanel.Header className=\"border-b border-border\">\n <TabList variant=\"pill-ghost\" size=\"sm\">\n {sideViews.map(view => (\n <Tab key={view.value} value={view.value} tooltip={compactSide ? view.name : undefined}>\n {view.label}\n </Tab>\n ))}\n </TabList>\n {sideHeaderActions && (\n <div className=\"ml-auto flex shrink-0 items-center whitespace-nowrap\">\n {sideHeaderActions({ compact: compactSide })}\n </div>\n )}\n </DataPanel.Header>\n </Tabs>\n )}\n {!isLoading && sideView === 'messages' && (\n <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>\n )}\n {!isLoading && sideView === 'feedback' && (\n <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>\n )}\n {!isLoading && sideView === 'scores' && (\n <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n )}\n </div>\n ) : null;\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.HeaderContent>\n <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n {traceSummary}\n </DataPanel.HeaderContent>\n <DataPanel.HeaderActions>{traceActionsMenu}</DataPanel.HeaderActions>\n </>\n ) : (\n <>\n <DataPanel.CloseButton onClick={onClose} />\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n Trace\n <TraceIdButton id={traceId} />\n </DataPanel.Heading>\n {traceSummary}\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=\"Go to previous trace\"\n nextLabel=\"Go to next trace\"\n />\n )}\n </DataPanel.HeaderActions>\n </>\n )}\n </DataPanel.Header>\n\n <TracePanelColumns\n sideColumnSlot={sideColumn}\n spanPanelSlot={spanPanelSlot}\n highlightQuery={query}\n spanPanelKey={selectedSpanId}\n >\n {!isLoading && !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 isTimeline = spanView === 'timeline';\n const searchHeader = (\n <DataPanel.Header className=\"gap-2 border-b border-border\">\n <SearchInput\n label=\"Search spans\"\n placeholder=\"Search spans...\"\n size=\"sm\"\n value={query}\n onValueChange={setQuery}\n className=\"w-full\"\n />\n <ButtonsGroup size=\"sm\" className=\"shrink-0\">\n <Button\n variant={isTimeline ? 'default' : 'primary'}\n aria-pressed={!isTimeline}\n tooltip=\"Span tree\"\n onClick={() => setSpanView('tree')}\n >\n <ListTreeIcon />\n </Button>\n <Button\n variant={isTimeline ? 'primary' : 'default'}\n aria-pressed={isTimeline}\n tooltip=\"Timeline\"\n onClick={() => setSpanView('timeline')}\n >\n <ChartGanttIcon />\n </Button>\n </ButtonsGroup>\n </DataPanel.Header>\n );\n const noSearchResults = !isLoading && hierarchicalSpans.length === 0 && (\n <DataPanel.NoData>No spans match your search.</DataPanel.NoData>\n );\n const viewProps = {\n hierarchicalSpans,\n onSpanClick: handleSpanClick,\n selectedSpanId,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n isLoading,\n };\n\n return (\n <>\n {searchHeader}\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 {/ Both views share selection + expansion state, and stay mounted with no\n results because they host the search field: unmounting would strand the\n user with a query they can no longer clear. /}\n {isTimeline ? <TraceSpanTimeline {...viewProps} /> : <TraceSpanTree {...viewProps} />}\n {noSearchResults}\n </DataPanel.Content>\n </>\n );\n })()\n )}\n </TracePanelColumns>\n </>\n )}\n </DataPanel>\n );\n}\n\n/\n Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The side\n * and span columns are resizable (down to a minimum width); the trace column takes the rest.\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 sideColumnSlot,\n spanPanelSlot,\n highlightQuery,\n spanPanelKey,\n children,\n}: {\n /* Resizable column on the left (messages / feedback / scores). /\n sideColumnSlot?: ReactNode;\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 return (\n <div ref={highlightRef} data-trace-columns className=\"flex min-h-0 flex-1\">\n <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n {sideColumnSlot && (\n <>\n <Panel id=\"trace-side\" minSize={280} defaultSize=\"40%\">\n <div className=\"flex h-full min-h-0 flex-col border-r border-border\">{sideColumnSlot}</div>\n </Panel>\n <PanelSeparator variant=\"pill\" />\n </>\n )}\n <Panel id=\"trace-main\" minSize={320} className=\"flex min-h-0 min-w-0 flex-col\">\n {children}\n </Panel>\n {spanPanelSlot && (\n <>\n <PanelSeparator variant=\"pill\" />\n <Panel id=\"trace-span\" minSize={320} defaultSize=\"35%\">\n <div\n ref={scrollToMatchRef}\n data-highlight\n className=\"flex h-full min-h-0 animate-in flex-col border-l border-border duration-300 fade-in-0\"\n >\n {spanPanelSlot}\n </div>\n </Panel>\n </>\n )}\n </PanelGroup>\n </div>\n );\n}\n"],"names":["useMemo","jsxs","Fragment","jsx","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","useState","useEffect","useDownloadTraceJson","useTraceSearch","formatHierarchicalSpans","getAllSpanIds","TraceSummaryDescription","DropdownMenu","Button","MoreHorizontalIcon","SaveIcon","WrenchIcon","Link2Icon","Loader2Icon","DownloadIcon","DataPanel","Tabs","TabList","Tab","TraceIdButton","CircleGaugeIcon","SearchInput","ButtonsGroup","ListTreeIcon","ChartGanttIcon","Notice","TraceSpanTimeline","TraceSpanTree","useTextHighlight","useScrollToFirstHighlight","PanelGroup","Panel","PanelSeparator"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { MessageSquareTextIcon, MessageSquareReplyIcon, MoreHorizontalIcon, SaveIcon, WrenchIcon, Link2Icon, Loader2Icon, DownloadIcon, CircleGaugeIcon, ListTreeIcon, ChartGanttIcon } from 'lucide-react';
 import { useMemo, useState, useEffect } from 'react';
+import { Panel } from 'react-resizable-panels';
 import { getAllSpanIds } from '../hooks/get-all-span-ids.es.js';
 import { useDownloadTraceJson } from '../hooks/use-download-trace-json.es.js';
 import { useTraceSearch } from '../hooks/use-trace-search.es.js';
@@ -11,17 +12,19 @@ import { TraceSpanTree } from './trace-span-tree.es.js';
 import { TraceSummaryDescription } from './trace-summary-description.es.js';
 import { B as Button } from '../../../Button-D43ghVKt.js';
 import { B as ButtonsGroup } from '../../../buttons-group-DsZgrZBZ.js';
-import { D as DataPanel } from '../../../data-panel-CbomKGJt.js';
+import { D as DataPanel } from '../../../data-panel-CKvpHRUM.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
-import { N as Notice } from '../../../Notice-B8RIClJD.js';
-import { S as SearchInput } from '../../../search-input-BKXiYeed.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-lrZZ3KwH.js';
-import { T as Tab } from '../../../tabs-tab-DoPSW-1s.js';
+import { N as Notice } from '../../../Notice-D4gMAkVI.js';
+import { S as SearchInput } from '../../../search-input-63Y1_wgA.js';
+import { T as Tabs } from '../../../tabs-root-BbzhUZl4.js';
+import { T as TabList } from '../../../tabs-list-tLx5fgP0.js';
+import { T as Tab } from '../../../tabs-tab-ClLIOGiC.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { ScorersIcon } from '../../../icons/ScorersIcon.es.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-65Adrsfj.js';
+import { PanelGroup } from '../../../resize/panel-group.es.js';
+import { PanelSeparator } from '../../../resize/separator.es.js';
 function TraceDataPanelView({
   traceId,
@@ -52,6 +55,7 @@ function TraceDataPanelView({
   feedbackTabBadge,
   featuredSpanIds,
   messagesPanelSlot,
+  sideHeaderActions,
   sideView: controlledSideView,
   onSideViewChange,
   spanView: controlledSpanView,
@@ -64,22 +68,26 @@ function TraceDataPanelView({
     if (messagesPanelSlot) {
       views.push({
         value: "messages",
+        name: "Messages",
         label: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(MessageSquareTextIcon, {}) }),
-          "Messages"
+          /* @__PURE__ */ jsx("span", { className: "@max-[501px]:sr-only", children: "Messages" })
         ] })
       });
     }
     if (feedbackTabSlot) {
       views.push({
         value: "feedback",
+        name: "Feedback",
         label: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(MessageSquareReplyIcon, {}) }),
-          "Feedback",
-          feedbackTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-            " (",
-            feedbackTabBadge,
-            ")"
+          /* @__PURE__ */ jsxs("span", { className: "@max-[501px]:sr-only", children: [
+            "Feedback",
+            feedbackTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " (",
+              feedbackTabBadge,
+              ")"
+            ] })
           ] })
         ] })
       });
@@ -87,13 +95,16 @@ function TraceDataPanelView({
     if (scoresTabSlot) {
       views.push({
         value: "scores",
+        name: "Scores",
         label: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(ScorersIcon, {}) }),
-          "Scores",
-          scoresTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-            " (",
-            scoresTabBadge,
-            ")"
+          /* @__PURE__ */ jsxs("span", { className: "@max-[501px]:sr-only", children: [
+            "Scores",
+            scoresTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " (",
+              scoresTabBadge,
+              ")"
+            ] })
           ] })
         ] })
       });
@@ -101,6 +112,14 @@ function TraceDataPanelView({
     return views;
   }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);
   const [uncontrolledSideView, setUncontrolledSideView] = useState();
+  const [sideColumnElement, setSideColumnElement] = useState(null);
+  const [compactSide, setCompactSide] = useState(false);
+  useEffect(() => {
+    if (!sideColumnElement || !("ResizeObserver" in globalThis)) return;
+    const observer = new ResizeObserver(() => setCompactSide(sideColumnElement.clientWidth <= 500));
+    observer.observe(sideColumnElement);
+    return () => observer.disconnect();
+  }, [sideColumnElement]);
   const chosenSideView = controlledSideView ?? uncontrolledSideView;
   const sideView = (sideViews.find((view) => view.value === chosenSideView) ?? sideViews[0])?.value;
   const handleSideViewChange = (view) => {
@@ -183,12 +202,23 @@ function TraceDataPanelView({
       ] })
     ] })
   ] });
-  const sideColumn = traceId && sideView ? /* @__PURE__ */ jsxs("div", { "data-trace-side-column": true, className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx(Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-b border-border", children: /* @__PURE__ */ jsx(TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsx(Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
-    sideView === "messages" && /* @__PURE__ */ jsx(DataPanel.Content, { className: "p-0", children: messagesPanelSlot }),
-    sideView === "feedback" && /* @__PURE__ */ jsx(DataPanel.Content, { children: feedbackTabSlot?.({ traceId }) }),
-    sideView === "scores" && /* @__PURE__ */ jsx(DataPanel.Content, { children: scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId }) })
-  ] }) : null;
+  const sideColumn = traceId && sideView ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setSideColumnElement,
+      "data-trace-side-column": true,
+      className: "@container flex h-full min-h-0 min-w-0 flex-col overflow-hidden",
+      children: [
+        isLoading ? /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-b border-border", children: /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-control-sm" }) }) : /* @__PURE__ */ jsx(Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsxs(DataPanel.Header, { className: "border-b border-border", children: [
+          /* @__PURE__ */ jsx(TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsx(Tab, { value: view.value, tooltip: compactSide ? view.name : void 0, children: view.label }, view.value)) }),
+          sideHeaderActions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center whitespace-nowrap", children: sideHeaderActions({ compact: compactSide }) })
+        ] }) }),
+        !isLoading && sideView === "messages" && /* @__PURE__ */ jsx(DataPanel.Content, { className: "p-0", children: messagesPanelSlot }),
+        !isLoading && sideView === "feedback" && /* @__PURE__ */ jsx(DataPanel.Content, { children: feedbackTabSlot?.({ traceId }) }),
+        !isLoading && sideView === "scores" && /* @__PURE__ */ jsx(DataPanel.Content, { children: scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId }) })
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsx(
     DataPanel,
     {
@@ -309,33 +339,25 @@ function TracePanelColumns({
 }) {
   const { ref: highlightRef } = useTextHighlight(highlightQuery);
   const { ref: scrollToMatchRef } = useScrollToFirstHighlight(highlightQuery, spanPanelKey);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: highlightRef,
-      "data-trace-columns": true,
-      className: cn(
-        "grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out",
-        sideColumnSlot ? spanPanelSlot ? "grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]" : "grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]" : spanPanelSlot ? "grid-cols-[0px_1fr_1fr]" : "grid-cols-[0px_1fr_0fr]"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex min-h-0 min-w-0 flex-col overflow-hidden", sideColumnSlot && "border-r border-border"), children: sideColumnSlot }),
-        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 min-w-0 flex-col overflow-hidden", children }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: scrollToMatchRef,
-            "data-highlight": true,
-            className: cn(
-              "flex min-h-0 min-w-0 flex-col overflow-hidden",
-              spanPanelSlot && "animate-in border-l border-border duration-300 fade-in-0"
-            ),
-            children: spanPanelSlot
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { ref: highlightRef, "data-trace-columns": true, className: "flex min-h-0 flex-1", children: /* @__PURE__ */ jsxs(PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children: [
+    sideColumnSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Panel, { id: "trace-side", minSize: 280, defaultSize: "40%", children: /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 flex-col border-r border-border", children: sideColumnSlot }) }),
+      /* @__PURE__ */ jsx(PanelSeparator, { variant: "pill" })
+    ] }),
+    /* @__PURE__ */ jsx(Panel, { id: "trace-main", minSize: 320, className: "flex min-h-0 min-w-0 flex-col", children }),
+    spanPanelSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PanelSeparator, { variant: "pill" }),
+      /* @__PURE__ */ jsx(Panel, { id: "trace-span", minSize: 320, defaultSize: "35%", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollToMatchRef,
+          "data-highlight": true,
+          className: "flex h-full min-h-0 animate-in flex-col border-l border-border duration-300 fade-in-0",
+          children: spanPanelSlot
+        }
+      ) })
+    ] })
+  ] }) });
 }
 export { TraceDataPanelView };