@mastra/playground-ui 53.0.0-alpha.2 → 53.0.0-alpha.3

package/dist/domains/traces/components/trace-timeline.es.js

@@ -50,22 +50,20 @@ function TraceTimeline({
       ]
     }
   ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    (usedSpanTypes.length > 0 || leadingSlot) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-3 px-2 py-1.5", children: [
-      leadingSlot && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: leadingSlot }),
-      usedSpanTypes.map((type) => {
-        const spanUI = getSpanTypeUi(type);
-        return /* @__PURE__ */ jsxs("div", { className: "text-ui-sm text-neutral3 flex shrink-0 items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "inline-block size-1.5 shrink-0 rounded-full",
-              style: { backgroundColor: spanUI?.color }
-            }
-          ),
-          spanUI?.label || type
-        ] }, type);
-      })
-    ] }),
+    leadingSlot && /* @__PURE__ */ jsx("div", { className: "px-2 pt-1.5", children: leadingSlot }),
+    usedSpanTypes.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-3 px-2 py-1.5", children: usedSpanTypes.map((type) => {
+      const spanUI = getSpanTypeUi(type);
+      return /* @__PURE__ */ jsxs("div", { className: "text-ui-sm text-neutral3 flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-block size-1.5 shrink-0 rounded-full",
+            style: { backgroundColor: spanUI?.color }
+          }
+        ),
+        spanUI?.label || type
+      ] }, type);
+    }) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1", children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsx(
       TraceTimelineSpan,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"trace-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  chartWidth?: 'wide' | 'default';\n  /** Rendered on the left of the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  chartWidth = 'default',\n  leadingSlot,\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(hierarchicalSpans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n            '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {(usedSpanTypes.length > 0 || leadingSlot) && (\n            <div className=\"flex flex-wrap items-center justify-end gap-3 px-2 py-1.5\">\n              {/* The slot takes the leftover width and is the only thing allowed to\n                  shrink, so the legend never compresses or wraps. `min-w-0` lets it\n                  shrink past its content width instead of pushing the legend down. */}\n              {leadingSlot && <div className=\"min-w-0 flex-1\">{leadingSlot}</div>}\n              {usedSpanTypes.map(type => {\n                const spanUI = getSpanTypeUi(type);\n                return (\n                  <div key={type} className=\"text-ui-sm text-neutral3 flex shrink-0 items-center gap-1\">\n                    <span\n                      className=\"inline-block size-1.5 shrink-0 rounded-full\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["types"],"mappings":"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"}
+{"version":3,"file":"trace-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  chartWidth?: 'wide' | 'default';\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  chartWidth = 'default',\n  leadingSlot,\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(hierarchicalSpans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n            '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap items-center justify-end gap-3 px-2 py-1.5\">\n              {usedSpanTypes.map(type => {\n                const spanUI = getSpanTypeUi(type);\n                return (\n                  <div key={type} className=\"text-ui-sm text-neutral3 flex shrink-0 items-center gap-1\">\n                    <span\n                      className=\"inline-block size-1.5 shrink-0 rounded-full\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["types"],"mappings":"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"}

package/dist/domains/traces/components/traces-layout.cjs.js

@@ -5,44 +5,58 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('../../../cn-DCPcv4xv.cjs');
 
+const SIDE_PANEL_WIDTH_CLASS = {
+  half: "w-1/2",
+  wide: "w-4/5",
+  full: "w-full"
+};
 function TracesLayout({
   listSlot,
   tracePanelSlot,
   spanPanelSlot,
   scorePanelSlot,
   traceCollapsed,
-  sidePanelWide
+  sidePanelWidth = "half"
 }) {
   const hasSidePanel = !!tracePanelSlot;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: utils_cn.cn(
-        "grid max-h-full min-h-0 items-start gap-4 transition-[grid-template-columns] duration-300 ease-in-out",
-        hasSidePanel ? sidePanelWide ? "grid-cols-[1fr_4fr]" : "grid-cols-[1fr_1fr]" : "grid-cols-[1fr]"
-      ),
-      children: [
-        listSlot,
-        hasSidePanel && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: utils_cn.cn(
-              "grid max-h-full gap-4 overflow-auto",
-              // Fill the page height so the trace panel reaches the bottom; when collapsed
-              // the column shrinks to content (items-start on the outer grid).
-              !traceCollapsed && "h-full",
-              scorePanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr_3fr]" : "grid-rows-[2fr_3fr_3fr]" : spanPanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr]" : "grid-rows-[2fr_3fr]" : traceCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
-            ),
-            children: [
-              tracePanelSlot,
-              spanPanelSlot,
-              scorePanelSlot
-            ]
-          }
-        )
-      ]
-    }
-  );
+  const isHalf = sidePanelWidth === "half";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: utils_cn.cn(
+          "grid h-full min-h-0 items-start gap-4 transition-[grid-template-columns] duration-300 ease-in-out",
+          hasSidePanel ? isHalf ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr_4fr]" : "grid-cols-[1fr]"
+        ),
+        children: [
+          listSlot,
+          hasSidePanel && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true })
+        ]
+      }
+    ),
+    hasSidePanel && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Trace details",
+        "data-trace-side-panel": true,
+        className: utils_cn.cn(
+          // z-50 matches the route Header (a z-50 grid sibling in the app frame) so the panel,
+          // rendered later in the DOM, paints above it while body-level portals stay on top.
+          "absolute inset-y-0 right-0 z-50 min-w-0 p-3",
+          "transition-[width] duration-300 ease-in-out",
+          SIDE_PANEL_WIDTH_CLASS[sidePanelWidth],
+          "grid gap-4 overflow-auto [&>*]:rounded-lg [&>*]:bg-surface3 [&>*]:shadow-lg",
+          scorePanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr_3fr]" : "grid-rows-[2fr_3fr_3fr]" : spanPanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr]" : "grid-rows-[2fr_3fr]" : traceCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
+        ),
+        children: [
+          tracePanelSlot,
+          spanPanelSlot,
+          scorePanelSlot
+        ]
+      }
+    )
+  ] });
 }
 
 exports.TracesLayout = TracesLayout;

package/dist/domains/traces/components/traces-layout.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"traces-layout.cjs.js","sources":["../../../../src/domains/traces/components/traces-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TracesLayoutProps {\n  /** The trace list (left column). */\n  listSlot: ReactNode;\n  /** The trace data panel (right column, top). When null/undefined, the whole right column collapses. */\n  tracePanelSlot?: ReactNode;\n  /** The span data panel (right column, middle). Only rendered when truthy. */\n  spanPanelSlot?: ReactNode;\n  /** The score data panel (right column, bottom). Only rendered when truthy. */\n  scorePanelSlot?: ReactNode;\n  /** When the trace panel is collapsed, the right column's grid-rows squash the trace row to `auto`. */\n  traceCollapsed?: boolean;\n  /** Widens the side panel column (e.g. when the span detail is shown inside the trace panel). */\n  sidePanelWide?: boolean;\n}\n\n/**\n * Pure 2-column layout shell for the traces page. Owns no state and fetches no data — pass slots in.\n * Right-column row template adapts based on which panels are present.\n */\nexport function TracesLayout({\n  listSlot,\n  tracePanelSlot,\n  spanPanelSlot,\n  scorePanelSlot,\n  traceCollapsed,\n  sidePanelWide,\n}: TracesLayoutProps) {\n  const hasSidePanel = !!tracePanelSlot;\n\n  return (\n    <div\n      className={cn(\n        'grid max-h-full min-h-0 items-start gap-4 transition-[grid-template-columns] duration-300 ease-in-out',\n        hasSidePanel ? (sidePanelWide ? 'grid-cols-[1fr_4fr]' : 'grid-cols-[1fr_1fr]') : 'grid-cols-[1fr]',\n      )}\n    >\n      {listSlot}\n\n      {hasSidePanel && (\n        <div\n          className={cn(\n            'grid max-h-full gap-4 overflow-auto',\n            // Fill the page height so the trace panel reaches the bottom; when collapsed\n            // the column shrinks to content (items-start on the outer grid).\n            !traceCollapsed && 'h-full',\n            scorePanelSlot\n              ? traceCollapsed\n                ? 'grid-rows-[auto_3fr_3fr]'\n                : 'grid-rows-[2fr_3fr_3fr]'\n              : spanPanelSlot\n                ? traceCollapsed\n                  ? 'grid-rows-[auto_3fr]'\n                  : 'grid-rows-[2fr_3fr]'\n                : traceCollapsed\n                  ? 'grid-rows-[auto]'\n                  : 'grid-rows-[1fr]',\n          )}\n        >\n          {tracePanelSlot}\n          {spanPanelSlot}\n          {scorePanelSlot}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["jsxs","cn"],"mappings":";;;;;;;AAsBO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,YAAA,GAAe,CAAC,CAAC,cAAA;AAEvB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,uGAAA;AAAA,QACA,YAAA,GAAgB,aAAA,GAAgB,qBAAA,GAAwB,qBAAA,GAAyB;AAAA,OACnF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QAEA,YAAA,oBACCD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,WAAA;AAAA,cACT,qCAAA;AAAA;AAAA;AAAA,cAGA,CAAC,cAAA,IAAkB,QAAA;AAAA,cACnB,cAAA,GACI,iBACE,0BAAA,GACA,yBAAA,GACF,gBACE,cAAA,GACE,sBAAA,GACA,qBAAA,GACF,cAAA,GACE,kBAAA,GACA;AAAA,aACV;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,cAAA;AAAA,cACA,aAAA;AAAA,cACA;AAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"traces-layout.cjs.js","sources":["../../../../src/domains/traces/components/traces-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TracesLayoutProps {\n  /** The trace list (left column). */\n  listSlot: ReactNode;\n  /** The trace data panel (side panel, top). When null/undefined, the side panel is not rendered. */\n  tracePanelSlot?: ReactNode;\n  /** The span data panel (side panel, middle). Only rendered when truthy. */\n  spanPanelSlot?: ReactNode;\n  /** The score data panel (side panel, bottom). Only rendered when truthy. */\n  scorePanelSlot?: ReactNode;\n  /** When the trace panel is collapsed, the side panel's grid-rows squash the trace row to `auto`. */\n  traceCollapsed?: boolean;\n  /**\n   * Side panel width, driven by how many columns the trace panel shows:\n   * `half` (trace only), `wide` (trace + one side column), `full` (messages + trace + span —\n   * covers the whole positioned ancestor, i.e. stops at the main nav).\n   */\n  sidePanelWidth?: TracesSidePanelWidth;\n}\n\nexport type TracesSidePanelWidth = 'half' | 'wide' | 'full';\n\nconst SIDE_PANEL_WIDTH_CLASS: Record<TracesSidePanelWidth, string> = {\n  half: 'w-1/2',\n  wide: 'w-4/5',\n  full: 'w-full',\n};\n\n/**\n * Layout shell for the traces page. Owns no state and fetches no data — pass slots in.\n *\n * The list lives in a 2-column grid whose right column is an empty spacer; the side panel\n * is rendered as an `absolute inset-y-0 right-0` overlay whose width mirrors the spacer\n * column, so it spans the full height of its nearest positioned ancestor while the list\n * stays interactive on the left. Consumers control the coverage by choosing which ancestor\n * is `relative` (e.g. the app frame, so the overlay also covers the route header).\n */\nexport function TracesLayout({\n  listSlot,\n  tracePanelSlot,\n  spanPanelSlot,\n  scorePanelSlot,\n  traceCollapsed,\n  sidePanelWidth = 'half',\n}: TracesLayoutProps) {\n  const hasSidePanel = !!tracePanelSlot;\n  const isHalf = sidePanelWidth === 'half';\n\n  return (\n    <>\n      <div\n        className={cn(\n          'grid h-full min-h-0 items-start gap-4 transition-[grid-template-columns] duration-300 ease-in-out',\n          hasSidePanel ? (isHalf ? 'grid-cols-[1fr_1fr]' : 'grid-cols-[1fr_4fr]') : 'grid-cols-[1fr]',\n        )}\n      >\n        {listSlot}\n        {hasSidePanel && <div aria-hidden />}\n      </div>\n\n      {hasSidePanel && (\n        <div\n          role=\"dialog\"\n          aria-label=\"Trace details\"\n          data-trace-side-panel\n          className={cn(\n            // z-50 matches the route Header (a z-50 grid sibling in the app frame) so the panel,\n            // rendered later in the DOM, paints above it while body-level portals stay on top.\n            'absolute inset-y-0 right-0 z-50 min-w-0 p-3',\n            'transition-[width] duration-300 ease-in-out',\n            SIDE_PANEL_WIDTH_CLASS[sidePanelWidth],\n            'grid gap-4 overflow-auto [&>*]:rounded-lg [&>*]:bg-surface3 [&>*]:shadow-lg',\n            scorePanelSlot\n              ? traceCollapsed\n                ? 'grid-rows-[auto_3fr_3fr]'\n                : 'grid-rows-[2fr_3fr_3fr]'\n              : spanPanelSlot\n                ? traceCollapsed\n                  ? 'grid-rows-[auto_3fr]'\n                  : 'grid-rows-[2fr_3fr]'\n                : traceCollapsed\n                  ? 'grid-rows-[auto]'\n                  : 'grid-rows-[1fr]',\n          )}\n        >\n          {tracePanelSlot}\n          {spanPanelSlot}\n          {scorePanelSlot}\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["jsxs","Fragment","cn","jsx"],"mappings":";;;;;;;AAwBA,MAAM,sBAAA,GAA+D;AAAA,EACnE,IAAA,EAAM,OAAA;AAAA,EACN,IAAA,EAAM,OAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAWO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA,GAAiB;AACnB,CAAA,EAAsB;AACpB,EAAA,MAAM,YAAA,GAAe,CAAC,CAAC,cAAA;AACvB,EAAA,MAAM,SAAS,cAAA,KAAmB,MAAA;AAElC,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWE,WAAA;AAAA,UACT,mGAAA;AAAA,UACA,YAAA,GAAgB,MAAA,GAAS,qBAAA,GAAwB,qBAAA,GAAyB;AAAA,SAC5E;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,YAAA,oBAAgBC,cAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AAAA,KACpC;AAAA,IAEC,YAAA,oBACCH,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,eAAA;AAAA,QACX,uBAAA,EAAqB,IAAA;AAAA,QACrB,SAAA,EAAWE,WAAA;AAAA;AAAA;AAAA,UAGT,6CAAA;AAAA,UACA,6CAAA;AAAA,UACA,uBAAuB,cAAc,CAAA;AAAA,UACrC,6EAAA;AAAA,UACA,cAAA,GACI,iBACE,0BAAA,GACA,yBAAA,GACF,gBACE,cAAA,GACE,sBAAA,GACA,qBAAA,GACF,cAAA,GACE,kBAAA,GACA;AAAA,SACV;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,cAAA;AAAA,UACA,aAAA;AAAA,UACA;AAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/traces-layout.es.js

@@ -1,44 +1,58 @@
-import { jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { c as cn } from '../../../cn-B4oPhFx9.js';
 
+const SIDE_PANEL_WIDTH_CLASS = {
+  half: "w-1/2",
+  wide: "w-4/5",
+  full: "w-full"
+};
 function TracesLayout({
   listSlot,
   tracePanelSlot,
   spanPanelSlot,
   scorePanelSlot,
   traceCollapsed,
-  sidePanelWide
+  sidePanelWidth = "half"
 }) {
   const hasSidePanel = !!tracePanelSlot;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "grid max-h-full min-h-0 items-start gap-4 transition-[grid-template-columns] duration-300 ease-in-out",
-        hasSidePanel ? sidePanelWide ? "grid-cols-[1fr_4fr]" : "grid-cols-[1fr_1fr]" : "grid-cols-[1fr]"
-      ),
-      children: [
-        listSlot,
-        hasSidePanel && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "grid max-h-full gap-4 overflow-auto",
-              // Fill the page height so the trace panel reaches the bottom; when collapsed
-              // the column shrinks to content (items-start on the outer grid).
-              !traceCollapsed && "h-full",
-              scorePanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr_3fr]" : "grid-rows-[2fr_3fr_3fr]" : spanPanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr]" : "grid-rows-[2fr_3fr]" : traceCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
-            ),
-            children: [
-              tracePanelSlot,
-              spanPanelSlot,
-              scorePanelSlot
-            ]
-          }
-        )
-      ]
-    }
-  );
+  const isHalf = sidePanelWidth === "half";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid h-full min-h-0 items-start gap-4 transition-[grid-template-columns] duration-300 ease-in-out",
+          hasSidePanel ? isHalf ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr_4fr]" : "grid-cols-[1fr]"
+        ),
+        children: [
+          listSlot,
+          hasSidePanel && /* @__PURE__ */ jsx("div", { "aria-hidden": true })
+        ]
+      }
+    ),
+    hasSidePanel && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Trace details",
+        "data-trace-side-panel": true,
+        className: cn(
+          // z-50 matches the route Header (a z-50 grid sibling in the app frame) so the panel,
+          // rendered later in the DOM, paints above it while body-level portals stay on top.
+          "absolute inset-y-0 right-0 z-50 min-w-0 p-3",
+          "transition-[width] duration-300 ease-in-out",
+          SIDE_PANEL_WIDTH_CLASS[sidePanelWidth],
+          "grid gap-4 overflow-auto [&>*]:rounded-lg [&>*]:bg-surface3 [&>*]:shadow-lg",
+          scorePanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr_3fr]" : "grid-rows-[2fr_3fr_3fr]" : spanPanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr]" : "grid-rows-[2fr_3fr]" : traceCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
+        ),
+        children: [
+          tracePanelSlot,
+          spanPanelSlot,
+          scorePanelSlot
+        ]
+      }
+    )
+  ] });
 }
 
 export { TracesLayout };

package/dist/domains/traces/components/traces-layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"traces-layout.es.js","sources":["../../../../src/domains/traces/components/traces-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TracesLayoutProps {\n  /** The trace list (left column). */\n  listSlot: ReactNode;\n  /** The trace data panel (right column, top). When null/undefined, the whole right column collapses. */\n  tracePanelSlot?: ReactNode;\n  /** The span data panel (right column, middle). Only rendered when truthy. */\n  spanPanelSlot?: ReactNode;\n  /** The score data panel (right column, bottom). Only rendered when truthy. */\n  scorePanelSlot?: ReactNode;\n  /** When the trace panel is collapsed, the right column's grid-rows squash the trace row to `auto`. */\n  traceCollapsed?: boolean;\n  /** Widens the side panel column (e.g. when the span detail is shown inside the trace panel). */\n  sidePanelWide?: boolean;\n}\n\n/**\n * Pure 2-column layout shell for the traces page. Owns no state and fetches no data — pass slots in.\n * Right-column row template adapts based on which panels are present.\n */\nexport function TracesLayout({\n  listSlot,\n  tracePanelSlot,\n  spanPanelSlot,\n  scorePanelSlot,\n  traceCollapsed,\n  sidePanelWide,\n}: TracesLayoutProps) {\n  const hasSidePanel = !!tracePanelSlot;\n\n  return (\n    <div\n      className={cn(\n        'grid max-h-full min-h-0 items-start gap-4 transition-[grid-template-columns] duration-300 ease-in-out',\n        hasSidePanel ? (sidePanelWide ? 'grid-cols-[1fr_4fr]' : 'grid-cols-[1fr_1fr]') : 'grid-cols-[1fr]',\n      )}\n    >\n      {listSlot}\n\n      {hasSidePanel && (\n        <div\n          className={cn(\n            'grid max-h-full gap-4 overflow-auto',\n            // Fill the page height so the trace panel reaches the bottom; when collapsed\n            // the column shrinks to content (items-start on the outer grid).\n            !traceCollapsed && 'h-full',\n            scorePanelSlot\n              ? traceCollapsed\n                ? 'grid-rows-[auto_3fr_3fr]'\n                : 'grid-rows-[2fr_3fr_3fr]'\n              : spanPanelSlot\n                ? traceCollapsed\n                  ? 'grid-rows-[auto_3fr]'\n                  : 'grid-rows-[2fr_3fr]'\n                : traceCollapsed\n                  ? 'grid-rows-[auto]'\n                  : 'grid-rows-[1fr]',\n          )}\n        >\n          {tracePanelSlot}\n          {spanPanelSlot}\n          {scorePanelSlot}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAsBO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,YAAA,GAAe,CAAC,CAAC,cAAA;AAEvB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,uGAAA;AAAA,QACA,YAAA,GAAgB,aAAA,GAAgB,qBAAA,GAAwB,qBAAA,GAAyB;AAAA,OACnF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QAEA,YAAA,oBACC,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,qCAAA;AAAA;AAAA;AAAA,cAGA,CAAC,cAAA,IAAkB,QAAA;AAAA,cACnB,cAAA,GACI,iBACE,0BAAA,GACA,yBAAA,GACF,gBACE,cAAA,GACE,sBAAA,GACA,qBAAA,GACF,cAAA,GACE,kBAAA,GACA;AAAA,aACV;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,cAAA;AAAA,cACA,aAAA;AAAA,cACA;AAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"traces-layout.es.js","sources":["../../../../src/domains/traces/components/traces-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TracesLayoutProps {\n  /** The trace list (left column). */\n  listSlot: ReactNode;\n  /** The trace data panel (side panel, top). When null/undefined, the side panel is not rendered. */\n  tracePanelSlot?: ReactNode;\n  /** The span data panel (side panel, middle). Only rendered when truthy. */\n  spanPanelSlot?: ReactNode;\n  /** The score data panel (side panel, bottom). Only rendered when truthy. */\n  scorePanelSlot?: ReactNode;\n  /** When the trace panel is collapsed, the side panel's grid-rows squash the trace row to `auto`. */\n  traceCollapsed?: boolean;\n  /**\n   * Side panel width, driven by how many columns the trace panel shows:\n   * `half` (trace only), `wide` (trace + one side column), `full` (messages + trace + span —\n   * covers the whole positioned ancestor, i.e. stops at the main nav).\n   */\n  sidePanelWidth?: TracesSidePanelWidth;\n}\n\nexport type TracesSidePanelWidth = 'half' | 'wide' | 'full';\n\nconst SIDE_PANEL_WIDTH_CLASS: Record<TracesSidePanelWidth, string> = {\n  half: 'w-1/2',\n  wide: 'w-4/5',\n  full: 'w-full',\n};\n\n/**\n * Layout shell for the traces page. Owns no state and fetches no data — pass slots in.\n *\n * The list lives in a 2-column grid whose right column is an empty spacer; the side panel\n * is rendered as an `absolute inset-y-0 right-0` overlay whose width mirrors the spacer\n * column, so it spans the full height of its nearest positioned ancestor while the list\n * stays interactive on the left. Consumers control the coverage by choosing which ancestor\n * is `relative` (e.g. the app frame, so the overlay also covers the route header).\n */\nexport function TracesLayout({\n  listSlot,\n  tracePanelSlot,\n  spanPanelSlot,\n  scorePanelSlot,\n  traceCollapsed,\n  sidePanelWidth = 'half',\n}: TracesLayoutProps) {\n  const hasSidePanel = !!tracePanelSlot;\n  const isHalf = sidePanelWidth === 'half';\n\n  return (\n    <>\n      <div\n        className={cn(\n          'grid h-full min-h-0 items-start gap-4 transition-[grid-template-columns] duration-300 ease-in-out',\n          hasSidePanel ? (isHalf ? 'grid-cols-[1fr_1fr]' : 'grid-cols-[1fr_4fr]') : 'grid-cols-[1fr]',\n        )}\n      >\n        {listSlot}\n        {hasSidePanel && <div aria-hidden />}\n      </div>\n\n      {hasSidePanel && (\n        <div\n          role=\"dialog\"\n          aria-label=\"Trace details\"\n          data-trace-side-panel\n          className={cn(\n            // z-50 matches the route Header (a z-50 grid sibling in the app frame) so the panel,\n            // rendered later in the DOM, paints above it while body-level portals stay on top.\n            'absolute inset-y-0 right-0 z-50 min-w-0 p-3',\n            'transition-[width] duration-300 ease-in-out',\n            SIDE_PANEL_WIDTH_CLASS[sidePanelWidth],\n            'grid gap-4 overflow-auto [&>*]:rounded-lg [&>*]:bg-surface3 [&>*]:shadow-lg',\n            scorePanelSlot\n              ? traceCollapsed\n                ? 'grid-rows-[auto_3fr_3fr]'\n                : 'grid-rows-[2fr_3fr_3fr]'\n              : spanPanelSlot\n                ? traceCollapsed\n                  ? 'grid-rows-[auto_3fr]'\n                  : 'grid-rows-[2fr_3fr]'\n                : traceCollapsed\n                  ? 'grid-rows-[auto]'\n                  : 'grid-rows-[1fr]',\n          )}\n        >\n          {tracePanelSlot}\n          {spanPanelSlot}\n          {scorePanelSlot}\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;AAwBA,MAAM,sBAAA,GAA+D;AAAA,EACnE,IAAA,EAAM,OAAA;AAAA,EACN,IAAA,EAAM,OAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAWO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA,GAAiB;AACnB,CAAA,EAAsB;AACpB,EAAA,MAAM,YAAA,GAAe,CAAC,CAAC,cAAA;AACvB,EAAA,MAAM,SAAS,cAAA,KAAmB,MAAA;AAElC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,mGAAA;AAAA,UACA,YAAA,GAAgB,MAAA,GAAS,qBAAA,GAAwB,qBAAA,GAAyB;AAAA,SAC5E;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,YAAA,oBAAgB,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AAAA,KACpC;AAAA,IAEC,YAAA,oBACC,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,eAAA;AAAA,QACX,uBAAA,EAAqB,IAAA;AAAA,QACrB,SAAA,EAAW,EAAA;AAAA;AAAA;AAAA,UAGT,6CAAA;AAAA,UACA,6CAAA;AAAA,UACA,uBAAuB,cAAc,CAAA;AAAA,UACrC,6EAAA;AAAA,UACA,cAAA,GACI,iBACE,0BAAA,GACA,yBAAA,GACF,gBACE,cAAA,GACE,sBAAA,GACA,qBAAA,GACF,cAAA,GACE,kBAAA,GACA;AAAA,SACV;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,cAAA;AAAA,UACA,aAAA;AAAA,UACA;AAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/hooks/use-trace-spans.cjs.js

@@ -8,27 +8,44 @@ const domains_traces_utils_toSearchableSpans = require('../utils/to-searchable-s
 require('date-fns');
 
 const IMMUTABLE_CACHE_TIME = 1e3 * 60 * 60 * 24 * 30;
+const traceSpansQueryOptions = (client, traceId) => reactQuery.queryOptions({
+  queryKey: ["trace-spans", traceId],
+  queryFn: async () => {
+    if (!traceId) {
+      throw new Error("Trace ID is required");
+    }
+    const res = await client.getTrace(traceId);
+    return res;
+  },
+  enabled: !!traceId,
+  staleTime: (query) => {
+    const data = query.state.data;
+    const isFinished = data?.spans.every((span) => Boolean(span.endedAt));
+    return isFinished ? IMMUTABLE_CACHE_TIME : 0;
+  }
+});
 function useTraceSpans(traceId) {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
-    queryKey: ["trace-spans", traceId],
-    queryFn: async () => {
-      if (!traceId) {
-        throw new Error("Trace ID is required");
-      }
-      const res = await client.getTrace(traceId);
-      return res;
-    },
+    ...traceSpansQueryOptions(client, traceId),
     // Builds each span's search haystack once per fetch, cached with the query.
-    select: domains_traces_utils_toSearchableSpans.selectSearchableSpans,
-    enabled: !!traceId,
-    staleTime: (query) => {
-      const data = query.state.data;
-      const isFinished = data?.spans.every((span) => Boolean(span.endedAt));
-      return isFinished ? IMMUTABLE_CACHE_TIME : 0;
-    }
+    select: domains_traces_utils_toSearchableSpans.selectSearchableSpans
+  });
+}
+function useTraceSpansQueries(traceIds, select, fallback) {
+  const client = react.useMastraClient();
+  return reactQuery.useQueries({
+    queries: traceIds.map((traceId) => ({
+      ...traceSpansQueryOptions(client, traceId),
+      select: (data) => select(traceId, data)
+    })),
+    combine: (results) => results.map(
+      (result, index) => result.data === void 0 ? fallback(traceIds[index] ?? "") : result.data
+    )
   });
 }
 
+exports.traceSpansQueryOptions = traceSpansQueryOptions;
 exports.useTraceSpans = useTraceSpans;
+exports.useTraceSpansQueries = useTraceSpansQueries;
 //# sourceMappingURL=use-trace-spans.cjs.js.map

package/dist/domains/traces/hooks/use-trace-spans.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-trace-spans.cjs.js","sources":["../../../../src/domains/traces/hooks/use-trace-spans.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\n/**\n * Every span of a single trace, with its full payload.\n *\n * The lightweight projection exists to keep blob columns off the read path of a\n * *list*, where the cost is paid once per trace on screen. A trace that is open\n * has already narrowed that to one, and the panel both renders and searches\n * these spans -- `input`, `output` and `attributes` included -- so the\n * projection would only hide content the reader is looking at.\n */\nexport function useTraceSpans(\n  traceId: string | null | undefined,\n): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['trace-spans', traceId],\n    queryFn: async () => {\n      if (!traceId) {\n        throw new Error('Trace ID is required');\n      }\n      const res = await client.getTrace(traceId);\n      return res;\n    },\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n    enabled: !!traceId,\n    staleTime: query => {\n      const data = query.state.data;\n      const isFinished = data?.spans.every(span => Boolean(span.endedAt));\n      return isFinished ? IMMUTABLE_CACHE_TIME : 0;\n    },\n  });\n}\n"],"names":["useMastraClient","useQuery","selectSearchableSpans"],"mappings":";;;;;;;;;AAMA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAW5C,SAAS,cACd,OAAA,EACqE;AACrE,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAE/B,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,aAAA,EAAe,OAAO,CAAA;AAAA,IACjC,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,EAAS;AACZ,QAAA,MAAM,IAAI,MAAM,sBAAsB,CAAA;AAAA,MACxC;AACA,MAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA;AACzC,MAAA,OAAO,GAAA;AAAA,IACT,CAAA;AAAA;AAAA,IAEA,MAAA,EAAQC,4DAAA;AAAA,IACR,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA,IACX,WAAW,CAAA,KAAA,KAAS;AAClB,MAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AACzB,MAAA,MAAM,UAAA,GAAa,MAAM,KAAA,CAAM,KAAA,CAAM,UAAQ,OAAA,CAAQ,IAAA,CAAK,OAAO,CAAC,CAAA;AAClE,MAAA,OAAO,aAAa,oBAAA,GAAuB,CAAA;AAAA,IAC7C;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"use-trace-spans.cjs.js","sources":["../../../../src/domains/traces/hooks/use-trace-spans.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { queryOptions, useQueries, useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\n/**\n * Key, fetcher and stale policy of the `trace-spans` query. Every observer of this key must\n * share these (rather than only the key) so one observer with a stricter `staleTime` does not\n * refetch data another one considers fresh.\n */\nexport const traceSpansQueryOptions = (client: MastraClient, traceId: string | null | undefined) =>\n  queryOptions({\n    queryKey: ['trace-spans', traceId],\n    queryFn: async () => {\n      if (!traceId) {\n        throw new Error('Trace ID is required');\n      }\n      const res = await client.getTrace(traceId);\n      return res;\n    },\n    enabled: !!traceId,\n    staleTime: query => {\n      const data = query.state.data;\n      const isFinished = data?.spans.every(span => Boolean(span.endedAt));\n      return isFinished ? IMMUTABLE_CACHE_TIME : 0;\n    },\n  });\n\n/**\n * Every span of a single trace, with its full payload.\n *\n * The lightweight projection exists to keep blob columns off the read path of a\n * *list*, where the cost is paid once per trace on screen. A trace that is open\n * has already narrowed that to one, and the panel both renders and searches\n * these spans -- `input`, `output` and `attributes` included -- so the\n * projection would only hide content the reader is looking at.\n */\nexport function useTraceSpans(\n  traceId: string | null | undefined,\n): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    ...traceSpansQueryOptions(client, traceId),\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n  });\n}\n\nexport type TraceSpansData = Awaited<ReturnType<MastraClient['getTrace']>>;\n\n/**\n * Observes the `trace-spans` query of several traces at once and projects each one with `select`.\n * Traces still loading (or failed) yield `fallback(traceId)` so the result always lines up with `traceIds`.\n */\nexport function useTraceSpansQueries<T>(\n  traceIds: string[],\n  select: (traceId: string, data: TraceSpansData) => T,\n  fallback: (traceId: string) => T,\n): T[] {\n  const client = useMastraClient();\n\n  return useQueries({\n    queries: traceIds.map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      select: (data: TraceSpansData) => select(traceId, data),\n    })),\n    combine: results =>\n      results.map((result, index) =>\n        result.data === undefined ? fallback(traceIds[index] ?? '') : (result.data as T),\n      ),\n  });\n}\n"],"names":["queryOptions","useMastraClient","useQuery","selectSearchableSpans","useQueries"],"mappings":";;;;;;;;;AAOA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAO5C,MAAM,sBAAA,GAAyB,CAAC,MAAA,EAAsB,OAAA,KAC3DA,uBAAA,CAAa;AAAA,EACX,QAAA,EAAU,CAAC,aAAA,EAAe,OAAO,CAAA;AAAA,EACjC,SAAS,YAAY;AACnB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,MAAM,IAAI,MAAM,sBAAsB,CAAA;AAAA,IACxC;AACA,IAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA;AACzC,IAAA,OAAO,GAAA;AAAA,EACT,CAAA;AAAA,EACA,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA,EACX,WAAW,CAAA,KAAA,KAAS;AAClB,IAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AACzB,IAAA,MAAM,UAAA,GAAa,MAAM,KAAA,CAAM,KAAA,CAAM,UAAQ,OAAA,CAAQ,IAAA,CAAK,OAAO,CAAC,CAAA;AAClE,IAAA,OAAO,aAAa,oBAAA,GAAuB,CAAA;AAAA,EAC7C;AACF,CAAC;AAWI,SAAS,cACd,OAAA,EACqE;AACrE,EAAA,MAAM,SAASC,qBAAA,EAAgB;AAE/B,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA;AAAA,IAEzC,MAAA,EAAQC;AAAA,GACT,CAAA;AACH;AAQO,SAAS,oBAAA,CACd,QAAA,EACA,MAAA,EACA,QAAA,EACK;AACL,EAAA,MAAM,SAASF,qBAAA,EAAgB;AAE/B,EAAA,OAAOG,qBAAA,CAAW;AAAA,IAChB,OAAA,EAAS,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,MAAY;AAAA,MAChC,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA,MACzC,MAAA,EAAQ,CAAC,IAAA,KAAyB,MAAA,CAAO,SAAS,IAAI;AAAA,KACxD,CAAE,CAAA;AAAA,IACF,OAAA,EAAS,aACP,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,MAAA,EAAQ,KAAA,KACnB,MAAA,CAAO,IAAA,KAAS,MAAA,GAAY,QAAA,CAAS,QAAA,CAAS,KAAK,CAAA,IAAK,EAAE,CAAA,GAAK,MAAA,CAAO;AAAA;AACxE,GACH,CAAA;AACH;;;;;;"}

package/dist/domains/traces/hooks/use-trace-spans.es.js

@@ -1,30 +1,45 @@
 import { useMastraClient } from '@mastra/react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, queryOptions, useQueries } from '@tanstack/react-query';
 import { selectSearchableSpans } from '../utils/to-searchable-spans.es.js';
 import 'date-fns';
 
 const IMMUTABLE_CACHE_TIME = 1e3 * 60 * 60 * 24 * 30;
+const traceSpansQueryOptions = (client, traceId) => queryOptions({
+  queryKey: ["trace-spans", traceId],
+  queryFn: async () => {
+    if (!traceId) {
+      throw new Error("Trace ID is required");
+    }
+    const res = await client.getTrace(traceId);
+    return res;
+  },
+  enabled: !!traceId,
+  staleTime: (query) => {
+    const data = query.state.data;
+    const isFinished = data?.spans.every((span) => Boolean(span.endedAt));
+    return isFinished ? IMMUTABLE_CACHE_TIME : 0;
+  }
+});
 function useTraceSpans(traceId) {
   const client = useMastraClient();
   return useQuery({
-    queryKey: ["trace-spans", traceId],
-    queryFn: async () => {
-      if (!traceId) {
-        throw new Error("Trace ID is required");
-      }
-      const res = await client.getTrace(traceId);
-      return res;
-    },
+    ...traceSpansQueryOptions(client, traceId),
     // Builds each span's search haystack once per fetch, cached with the query.
-    select: selectSearchableSpans,
-    enabled: !!traceId,
-    staleTime: (query) => {
-      const data = query.state.data;
-      const isFinished = data?.spans.every((span) => Boolean(span.endedAt));
-      return isFinished ? IMMUTABLE_CACHE_TIME : 0;
-    }
+    select: selectSearchableSpans
+  });
+}
+function useTraceSpansQueries(traceIds, select, fallback) {
+  const client = useMastraClient();
+  return useQueries({
+    queries: traceIds.map((traceId) => ({
+      ...traceSpansQueryOptions(client, traceId),
+      select: (data) => select(traceId, data)
+    })),
+    combine: (results) => results.map(
+      (result, index) => result.data === void 0 ? fallback(traceIds[index] ?? "") : result.data
+    )
   });
 }
 
-export { useTraceSpans };
+export { traceSpansQueryOptions, useTraceSpans, useTraceSpansQueries };
 //# sourceMappingURL=use-trace-spans.es.js.map

package/dist/domains/traces/hooks/use-trace-spans.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-trace-spans.es.js","sources":["../../../../src/domains/traces/hooks/use-trace-spans.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\n/**\n * Every span of a single trace, with its full payload.\n *\n * The lightweight projection exists to keep blob columns off the read path of a\n * *list*, where the cost is paid once per trace on screen. A trace that is open\n * has already narrowed that to one, and the panel both renders and searches\n * these spans -- `input`, `output` and `attributes` included -- so the\n * projection would only hide content the reader is looking at.\n */\nexport function useTraceSpans(\n  traceId: string | null | undefined,\n): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['trace-spans', traceId],\n    queryFn: async () => {\n      if (!traceId) {\n        throw new Error('Trace ID is required');\n      }\n      const res = await client.getTrace(traceId);\n      return res;\n    },\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n    enabled: !!traceId,\n    staleTime: query => {\n      const data = query.state.data;\n      const isFinished = data?.spans.every(span => Boolean(span.endedAt));\n      return isFinished ? IMMUTABLE_CACHE_TIME : 0;\n    },\n  });\n}\n"],"names":[],"mappings":";;;;;AAMA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAW5C,SAAS,cACd,OAAA,EACqE;AACrE,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,aAAA,EAAe,OAAO,CAAA;AAAA,IACjC,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,EAAS;AACZ,QAAA,MAAM,IAAI,MAAM,sBAAsB,CAAA;AAAA,MACxC;AACA,MAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA;AACzC,MAAA,OAAO,GAAA;AAAA,IACT,CAAA;AAAA;AAAA,IAEA,MAAA,EAAQ,qBAAA;AAAA,IACR,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA,IACX,WAAW,CAAA,KAAA,KAAS;AAClB,MAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AACzB,MAAA,MAAM,UAAA,GAAa,MAAM,KAAA,CAAM,KAAA,CAAM,UAAQ,OAAA,CAAQ,IAAA,CAAK,OAAO,CAAC,CAAA;AAClE,MAAA,OAAO,aAAa,oBAAA,GAAuB,CAAA;AAAA,IAC7C;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"use-trace-spans.es.js","sources":["../../../../src/domains/traces/hooks/use-trace-spans.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { queryOptions, useQueries, useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\n/**\n * Key, fetcher and stale policy of the `trace-spans` query. Every observer of this key must\n * share these (rather than only the key) so one observer with a stricter `staleTime` does not\n * refetch data another one considers fresh.\n */\nexport const traceSpansQueryOptions = (client: MastraClient, traceId: string | null | undefined) =>\n  queryOptions({\n    queryKey: ['trace-spans', traceId],\n    queryFn: async () => {\n      if (!traceId) {\n        throw new Error('Trace ID is required');\n      }\n      const res = await client.getTrace(traceId);\n      return res;\n    },\n    enabled: !!traceId,\n    staleTime: query => {\n      const data = query.state.data;\n      const isFinished = data?.spans.every(span => Boolean(span.endedAt));\n      return isFinished ? IMMUTABLE_CACHE_TIME : 0;\n    },\n  });\n\n/**\n * Every span of a single trace, with its full payload.\n *\n * The lightweight projection exists to keep blob columns off the read path of a\n * *list*, where the cost is paid once per trace on screen. A trace that is open\n * has already narrowed that to one, and the panel both renders and searches\n * these spans -- `input`, `output` and `attributes` included -- so the\n * projection would only hide content the reader is looking at.\n */\nexport function useTraceSpans(\n  traceId: string | null | undefined,\n): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    ...traceSpansQueryOptions(client, traceId),\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n  });\n}\n\nexport type TraceSpansData = Awaited<ReturnType<MastraClient['getTrace']>>;\n\n/**\n * Observes the `trace-spans` query of several traces at once and projects each one with `select`.\n * Traces still loading (or failed) yield `fallback(traceId)` so the result always lines up with `traceIds`.\n */\nexport function useTraceSpansQueries<T>(\n  traceIds: string[],\n  select: (traceId: string, data: TraceSpansData) => T,\n  fallback: (traceId: string) => T,\n): T[] {\n  const client = useMastraClient();\n\n  return useQueries({\n    queries: traceIds.map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      select: (data: TraceSpansData) => select(traceId, data),\n    })),\n    combine: results =>\n      results.map((result, index) =>\n        result.data === undefined ? fallback(traceIds[index] ?? '') : (result.data as T),\n      ),\n  });\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAO5C,MAAM,sBAAA,GAAyB,CAAC,MAAA,EAAsB,OAAA,KAC3D,YAAA,CAAa;AAAA,EACX,QAAA,EAAU,CAAC,aAAA,EAAe,OAAO,CAAA;AAAA,EACjC,SAAS,YAAY;AACnB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,MAAM,IAAI,MAAM,sBAAsB,CAAA;AAAA,IACxC;AACA,IAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA;AACzC,IAAA,OAAO,GAAA;AAAA,EACT,CAAA;AAAA,EACA,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA,EACX,WAAW,CAAA,KAAA,KAAS;AAClB,IAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AACzB,IAAA,MAAM,UAAA,GAAa,MAAM,KAAA,CAAM,KAAA,CAAM,UAAQ,OAAA,CAAQ,IAAA,CAAK,OAAO,CAAC,CAAA;AAClE,IAAA,OAAO,aAAa,oBAAA,GAAuB,CAAA;AAAA,EAC7C;AACF,CAAC;AAWI,SAAS,cACd,OAAA,EACqE;AACrE,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA;AAAA,IAEzC,MAAA,EAAQ;AAAA,GACT,CAAA;AACH;AAQO,SAAS,oBAAA,CACd,QAAA,EACA,MAAA,EACA,QAAA,EACK;AACL,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,UAAA,CAAW;AAAA,IAChB,OAAA,EAAS,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,MAAY;AAAA,MAChC,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA,MACzC,MAAA,EAAQ,CAAC,IAAA,KAAyB,MAAA,CAAO,SAAS,IAAI;AAAA,KACxD,CAAE,CAAA;AAAA,IACF,OAAA,EAAS,aACP,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,MAAA,EAAQ,KAAA,KACnB,MAAA,CAAO,IAAA,KAAS,MAAA,GAAY,QAAA,CAAS,QAAA,CAAS,KAAK,CAAA,IAAK,EAAE,CAAA,GAAK,MAAA,CAAO;AAAA;AACxE,GACH,CAAA;AACH;;;;"}

package/dist/domains/traces/hooks/use-trace-url-state.cjs.js

@@ -9,6 +9,7 @@ const TRACE_ID_PARAM = "traceId";
 const SPAN_ID_PARAM = "spanId";
 const TAB_PARAM = "tab";
 const SCORE_ID_PARAM = "scoreId";
+const HIGHLIGHT_SPAN_IDS_PARAM = "highlightSpanIds";
 const DAY_MS = 24 * 60 * 60 * 1e3;
 const PRESET_MS = {
   "last-24h": DAY_MS,
@@ -23,6 +24,7 @@ function clearSelectionParams(params) {
   params.delete(domains_traces_traceFilters.TRACE_ANCHOR_SPAN_ID_PARAM);
   params.delete(TAB_PARAM);
   params.delete(SCORE_ID_PARAM);
+  params.delete(HIGHLIGHT_SPAN_IDS_PARAM);
 }
 function useTraceUrlState(searchParams, setSearchParams, options) {
   const { onRemoveAll } = options ?? {};
@@ -54,6 +56,11 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
   const tabParam = searchParams.get(TAB_PARAM);
   const spanTabParam = tabParam === "feedback" ? "feedback" : tabParam === "details" ? "details" : void 0;
   const scoreIdParam = searchParams.get(SCORE_ID_PARAM) || void 0;
+  const highlightSpanIdsRaw = searchParams.get(HIGHLIGHT_SPAN_IDS_PARAM);
+  const highlightSpanIdsParam = React.useMemo(
+    () => highlightSpanIdsRaw ? highlightSpanIdsRaw.split(",").filter(Boolean) : [],
+    [highlightSpanIdsRaw]
+  );
   const listMode = React.useMemo(() => {
     const value = searchParams.get(domains_traces_traceFilters.TRACE_LIST_MODE_PARAM);
     return value && domains_traces_traceFilters.TRACE_LIST_MODE_VALUES.has(value) ? value : "traces";
@@ -89,6 +96,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
           }
           next.delete(TAB_PARAM);
           next.delete(SCORE_ID_PARAM);
+          next.delete(HIGHLIGHT_SPAN_IDS_PARAM);
           return next;
         },
         { replace: true }
@@ -180,6 +188,27 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     },
     [searchParams, setSearchParams]
   );
+  const handleHighlightSpans = React.useCallback(
+    (spanIds) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          const [firstSpanId] = spanIds;
+          if (!firstSpanId) {
+            next.delete(HIGHLIGHT_SPAN_IDS_PARAM);
+            return next;
+          }
+          next.set(HIGHLIGHT_SPAN_IDS_PARAM, spanIds.join(","));
+          next.set(SPAN_ID_PARAM, firstSpanId);
+          next.delete(TAB_PARAM);
+          next.delete(SCORE_ID_PARAM);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
   const applyFilterTokens = React.useCallback(
     (tokens) => {
       setSearchParams(
@@ -287,6 +316,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     anchorSpanIdParam,
     spanTabParam,
     scoreIdParam,
+    highlightSpanIdsParam,
     listMode,
     selectedEntityOption,
     selectedStatus,
@@ -298,6 +328,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     handleSpanTabChange,
     handleSpanChangeWithTab,
     handleScoreChange,
+    handleHighlightSpans,
     handleListModeChange,
     handleFilterTokensChange,
     handleDateChange,