@mastra/playground-ui 61.0.0-alpha.2 → 61.0.0-alpha.4

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

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

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

@@ -1,12 +1,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useSpanDetail, useThreadHasOtherTraces } from '@mastra/react/hooks/traces';
 import { MessagesSquareIcon } from 'lucide-react';
 import { SpanDataPanelView } from './span-data-panel-view.es.js';
 import { TraceDataPanel } from './trace-data-panel.es.js';
 import { TraceMessagesPanel } from './trace-messages-panel.es.js';
 import { getTraceThreadId } from './trace-thread-context.es.js';
 import { TraceThreadPanel } from './trace-thread-panel.es.js';
-import { useSpanDetail } from '../hooks/use-span-detail.es.js';
-import { useThreadHasOtherTraces } from '../hooks/use-thread-has-other-traces.es.js';
 import { useTraceSpanNavigation } from '../hooks/use-trace-span-navigation.es.js';
 import { B as Button } from '../../../Button-D43ghVKt.js';
 import { useLinkComponent } from '../../../lib/framework.es.js';
@@ -57,14 +56,21 @@ function TraceSpanPanel({
   spanFeedbackTabBadge,
   spanFeedbackTabSlot
 }) {
-  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail(traceId, selectedSpanId ?? "");
+  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail({
+    traceId,
+    spanId: selectedSpanId ?? "",
+    queryOptions: { enabled: !!traceId && !!selectedSpanId }
+  });
   const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(spans, selectedSpanId, onSpanSelect);
   const { Link, paths } = useLinkComponent();
   const rootSpan = anchorSpanId ? spans?.find((s) => s.spanId === anchorSpanId) : spans?.find((s) => s.parentSpanId == null);
   const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);
   const threadId = getTraceThreadId(rootSpan, anchorSpanId);
   const hasMessagesPanel = !!(traceId && showPartialThread && threadId);
-  const hasOtherTraces = useThreadHasOtherTraces(hasMessagesPanel ? threadId : void 0);
+  const hasOtherTraces = useThreadHasOtherTraces({
+    threadId: hasMessagesPanel ? threadId : void 0,
+    queryOptions: { enabled: !!(hasMessagesPanel ? threadId : void 0) }
+  });
   const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

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

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

package/dist/domains/traces/components/trace-summary-description.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
 const domains_traces_components_traceStatusValue = require('./trace-status-value.cjs.js');
-const dataPanel = require('../../../data-panel-mzQKwVkT.cjs');
+const dataPanel = require('../../../data-panel-HSJNrZhx.cjs');
 const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const icons_AgentIcon = require('../../../icons/AgentIcon.cjs.js');
 const icons_WorkflowIcon = require('../../../icons/WorkflowIcon.cjs.js');

package/dist/domains/traces/components/trace-summary-description.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { CalendarClockIcon, TimerIcon, ArrowDownToLineIcon, ArrowUpFromLineIcon, CircleDollarSignIcon } from 'lucide-react';
 import { getSpanDurationMs } from '../utils/span-utils.es.js';
 import { TraceStatusValue } from './trace-status-value.es.js';
-import { D as DataPanel } from '../../../data-panel-GT4fMXR0.js';
+import { D as DataPanel } from '../../../data-panel-C638OC-m.js';
 import { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { AgentIcon } from '../../../icons/AgentIcon.es.js';
 import { WorkflowIcon } from '../../../icons/WorkflowIcon.es.js';

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const traces = require('@mastra/react/hooks/traces');
 const lucideReact = require('lucide-react');
 const domains_traces_components_formatTraceThreadMessages = require('./format-trace-thread-messages.cjs.js');
 const domains_traces_components_traceMessagesSkeleton = require('./trace-messages-skeleton.cjs.js');
 const domains_chat_context_toolCallContext = require('../../chat/context/tool-call-context.cjs.js');
 const domains_chat_messages_messageRow = require('../../chat/messages/message-row.cjs.js');
 const domains_traces_components_tracesErrorContent = require('./traces-error-content.cjs.js');
-const domains_traces_hooks_useTraceSpans = require('../hooks/use-trace-spans.cjs.js');
 const Button = require('../../../Button-CXhSUBxN.cjs');
 const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
@@ -17,7 +17,11 @@ const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const noop = () => {
 };
 function TraceThreadItemView({ traceId, onHighlightSpans, className }) {
-  const { data, isLoading, error } = domains_traces_hooks_useTraceSpans.useTraceSpans(traceId, { passive: true });
+  const { data, isLoading, error } = traces.useTraceSpans({
+    traceId,
+    passive: true,
+    queryOptions: { enabled: !!traceId }
+  });
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceMessagesSkeleton.TraceMessagesSkeleton, { className });
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_tracesErrorContent.TracesErrorContent, { error, resource: "trace", errorTitle: "Failed to load partial thread" }) });

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

@@ -1 +1 @@
-{"version":3,"file":"trace-thread-item-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-thread-item-view.tsx"],"sourcesContent":["import { ListTreeIcon } from 'lucide-react';\nimport { formatTraceThreadMessages } from './format-trace-thread-messages';\nimport { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { ToolCallProvider } from '@/domains/chat/context/tool-call-context';\nimport { MessageRow } from '@/domains/chat/messages/message-row';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\n\nexport interface TraceThreadItemViewProps {\n  traceId: string;\n  /** Called with the ids of the spans behind a message (text or tool call) when its \"Highlight spans\" action is clicked. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  className?: string;\n}\n\nconst noop = () => {};\n\nexport function TraceThreadItemView({ traceId, onHighlightSpans, className }: TraceThreadItemViewProps) {\n  const { data, isLoading, error } = useTraceSpans(traceId, { passive: true });\n\n  if (isLoading) return <TraceMessagesSkeleton className={className} />;\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"trace\" errorTitle=\"Failed to load partial thread\" />\n      </div>\n    );\n  }\n\n  const messages = data ? formatTraceThreadMessages(data.spans) : [];\n\n  if (messages.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No agent turn found for this trace.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('min-w-0 p-4', className)}>\n      {/* Messages carry their own vertical margins; strip them at the edges so `p-4` is the only outer spacing. */}\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0\">\n        <ToolCallProvider\n          approveToolcall={noop}\n          declineToolcall={noop}\n          approveToolcallGenerate={noop}\n          declineToolcallGenerate={noop}\n          approveNetworkToolcall={noop}\n          declineNetworkToolcall={noop}\n          isRunning={false}\n          toolCallApprovals={{}}\n          networkToolCallApprovals={{}}\n        >\n          {messages.map(message => {\n            const action =\n              onHighlightSpans && message.traceSpanIds.length > 0 ? (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  tooltip=\"Highlight spans\"\n                  aria-label=\"Highlight spans\"\n                  onClick={() => onHighlightSpans(message.traceSpanIds)}\n                >\n                  <ListTreeIcon />\n                </Button>\n              ) : undefined;\n\n            const isToolCall = message.content.parts.every(part => part.type === 'tool-invocation');\n            if (isToolCall && action) {\n              // Tool calls sit on one line, so the action goes beside the tool card instead of below it.\n              return (\n                <div key={message.id} className=\"group/tool mb-3 flex items-start gap-1 last:mb-0\">\n                  <MessageRow message={message} readOnly className=\"flex-1\" />\n                  <div className=\"shrink-0 group-focus-within/tool:opacity-100 group-hover/tool:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n                    {action}\n                  </div>\n                </div>\n              );\n            }\n\n            return <MessageRow key={message.id} message={message} readOnly footer={action} />;\n          })}\n        </ToolCallProvider>\n      </div>\n    </div>\n  );\n}\n"],"names":["useTraceSpans","jsx","TraceMessagesSkeleton","TracesErrorContent","formatTraceThreadMessages","Txt","cn","ToolCallProvider","Button","ListTreeIcon","jsxs","MessageRow"],"mappings":"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"}
+{"version":3,"file":"trace-thread-item-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-thread-item-view.tsx"],"sourcesContent":["import { useTraceSpans } from '@mastra/react/hooks/traces';\nimport { ListTreeIcon } from 'lucide-react';\nimport { formatTraceThreadMessages } from './format-trace-thread-messages';\nimport { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { ToolCallProvider } from '@/domains/chat/context/tool-call-context';\nimport { MessageRow } from '@/domains/chat/messages/message-row';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\n\nexport interface TraceThreadItemViewProps {\n  traceId: string;\n  /** Called with the ids of the spans behind a message (text or tool call) when its \"Highlight spans\" action is clicked. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  className?: string;\n}\n\nconst noop = () => {};\n\nexport function TraceThreadItemView({ traceId, onHighlightSpans, className }: TraceThreadItemViewProps) {\n  const { data, isLoading, error } = useTraceSpans({\n    traceId: traceId,\n    passive: true,\n    queryOptions: { enabled: !!traceId },\n  });\n\n  if (isLoading) return <TraceMessagesSkeleton className={className} />;\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"trace\" errorTitle=\"Failed to load partial thread\" />\n      </div>\n    );\n  }\n\n  const messages = data ? formatTraceThreadMessages(data.spans) : [];\n\n  if (messages.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No agent turn found for this trace.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('min-w-0 p-4', className)}>\n      {/* Messages carry their own vertical margins; strip them at the edges so `p-4` is the only outer spacing. */}\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0\">\n        <ToolCallProvider\n          approveToolcall={noop}\n          declineToolcall={noop}\n          approveToolcallGenerate={noop}\n          declineToolcallGenerate={noop}\n          approveNetworkToolcall={noop}\n          declineNetworkToolcall={noop}\n          isRunning={false}\n          toolCallApprovals={{}}\n          networkToolCallApprovals={{}}\n        >\n          {messages.map(message => {\n            const action =\n              onHighlightSpans && message.traceSpanIds.length > 0 ? (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  tooltip=\"Highlight spans\"\n                  aria-label=\"Highlight spans\"\n                  onClick={() => onHighlightSpans(message.traceSpanIds)}\n                >\n                  <ListTreeIcon />\n                </Button>\n              ) : undefined;\n\n            const isToolCall = message.content.parts.every(part => part.type === 'tool-invocation');\n            if (isToolCall && action) {\n              // Tool calls sit on one line, so the action goes beside the tool card instead of below it.\n              return (\n                <div key={message.id} className=\"group/tool mb-3 flex items-start gap-1 last:mb-0\">\n                  <MessageRow message={message} readOnly className=\"flex-1\" />\n                  <div className=\"shrink-0 group-focus-within/tool:opacity-100 group-hover/tool:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n                    {action}\n                  </div>\n                </div>\n              );\n            }\n\n            return <MessageRow key={message.id} message={message} readOnly footer={action} />;\n          })}\n        </ToolCallProvider>\n      </div>\n    </div>\n  );\n}\n"],"names":["useTraceSpans","jsx","TraceMessagesSkeleton","TracesErrorContent","formatTraceThreadMessages","Txt","cn","ToolCallProvider","Button","ListTreeIcon","jsxs","MessageRow"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTraceSpans } from '@mastra/react/hooks/traces';
 import { ListTreeIcon } from 'lucide-react';
 import { formatTraceThreadMessages } from './format-trace-thread-messages.es.js';
 import { TraceMessagesSkeleton } from './trace-messages-skeleton.es.js';
 import { ToolCallProvider } from '../../chat/context/tool-call-context.es.js';
 import { MessageRow } from '../../chat/messages/message-row.es.js';
 import { TracesErrorContent } from './traces-error-content.es.js';
-import { useTraceSpans } from '../hooks/use-trace-spans.es.js';
 import { B as Button } from '../../../Button-D43ghVKt.js';
 import { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
@@ -13,7 +13,11 @@ import { c as cn } from '../../../cn-65Adrsfj.js';
 const noop = () => {
 };
 function TraceThreadItemView({ traceId, onHighlightSpans, className }) {
-  const { data, isLoading, error } = useTraceSpans(traceId, { passive: true });
+  const { data, isLoading, error } = useTraceSpans({
+    traceId,
+    passive: true,
+    queryOptions: { enabled: !!traceId }
+  });
   if (isLoading) return /* @__PURE__ */ jsx(TraceMessagesSkeleton, { className });
   if (error) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx(TracesErrorContent, { error, resource: "trace", errorTitle: "Failed to load partial thread" }) });

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

@@ -1 +1 @@
-{"version":3,"file":"trace-thread-item-view.es.js","sources":["../../../../src/domains/traces/components/trace-thread-item-view.tsx"],"sourcesContent":["import { ListTreeIcon } from 'lucide-react';\nimport { formatTraceThreadMessages } from './format-trace-thread-messages';\nimport { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { ToolCallProvider } from '@/domains/chat/context/tool-call-context';\nimport { MessageRow } from '@/domains/chat/messages/message-row';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\n\nexport interface TraceThreadItemViewProps {\n  traceId: string;\n  /** Called with the ids of the spans behind a message (text or tool call) when its \"Highlight spans\" action is clicked. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  className?: string;\n}\n\nconst noop = () => {};\n\nexport function TraceThreadItemView({ traceId, onHighlightSpans, className }: TraceThreadItemViewProps) {\n  const { data, isLoading, error } = useTraceSpans(traceId, { passive: true });\n\n  if (isLoading) return <TraceMessagesSkeleton className={className} />;\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"trace\" errorTitle=\"Failed to load partial thread\" />\n      </div>\n    );\n  }\n\n  const messages = data ? formatTraceThreadMessages(data.spans) : [];\n\n  if (messages.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No agent turn found for this trace.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('min-w-0 p-4', className)}>\n      {/* Messages carry their own vertical margins; strip them at the edges so `p-4` is the only outer spacing. */}\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0\">\n        <ToolCallProvider\n          approveToolcall={noop}\n          declineToolcall={noop}\n          approveToolcallGenerate={noop}\n          declineToolcallGenerate={noop}\n          approveNetworkToolcall={noop}\n          declineNetworkToolcall={noop}\n          isRunning={false}\n          toolCallApprovals={{}}\n          networkToolCallApprovals={{}}\n        >\n          {messages.map(message => {\n            const action =\n              onHighlightSpans && message.traceSpanIds.length > 0 ? (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  tooltip=\"Highlight spans\"\n                  aria-label=\"Highlight spans\"\n                  onClick={() => onHighlightSpans(message.traceSpanIds)}\n                >\n                  <ListTreeIcon />\n                </Button>\n              ) : undefined;\n\n            const isToolCall = message.content.parts.every(part => part.type === 'tool-invocation');\n            if (isToolCall && action) {\n              // Tool calls sit on one line, so the action goes beside the tool card instead of below it.\n              return (\n                <div key={message.id} className=\"group/tool mb-3 flex items-start gap-1 last:mb-0\">\n                  <MessageRow message={message} readOnly className=\"flex-1\" />\n                  <div className=\"shrink-0 group-focus-within/tool:opacity-100 group-hover/tool:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n                    {action}\n                  </div>\n                </div>\n              );\n            }\n\n            return <MessageRow key={message.id} message={message} readOnly footer={action} />;\n          })}\n        </ToolCallProvider>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBA,MAAM,OAAO,MAAM;AAAC,CAAA;AAEb,SAAS,mBAAA,CAAoB,EAAE,OAAA,EAAS,gBAAA,EAAkB,WAAU,EAA6B;AACtG,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,KAAA,EAAM,GAAI,cAAc,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAE3E,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,qBAAA,EAAA,EAAsB,SAAA,EAAsB,CAAA;AAEnE,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,KAAA,EAAc,QAAA,EAAS,OAAA,EAAQ,UAAA,EAAW,+BAAA,EAAgC,CAAA,EAChG,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,WAAW,IAAA,GAAO,yBAAA,CAA0B,IAAA,CAAK,KAAK,IAAI,EAAC;AAEjE,EAAA,IAAI,QAAA,CAAS,WAAW,CAAA,EAAG;AACzB,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,QAAA,EAAA,qCAAA,EAEjC,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA,EAEzC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yHAAA,EACb,QAAA,kBAAA,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,IAAA;AAAA,MACjB,eAAA,EAAiB,IAAA;AAAA,MACjB,uBAAA,EAAyB,IAAA;AAAA,MACzB,uBAAA,EAAyB,IAAA;AAAA,MACzB,sBAAA,EAAwB,IAAA;AAAA,MACxB,sBAAA,EAAwB,IAAA;AAAA,MACxB,SAAA,EAAW,KAAA;AAAA,MACX,mBAAmB,EAAC;AAAA,MACpB,0BAA0B,EAAC;AAAA,MAE1B,QAAA,EAAA,QAAA,CAAS,IAAI,CAAA,OAAA,KAAW;AACvB,QAAA,MAAM,MAAA,GACJ,gBAAA,IAAoB,OAAA,CAAQ,YAAA,CAAa,SAAS,CAAA,mBAChD,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,IAAA,EAAK,SAAA;AAAA,YACL,OAAA,EAAQ,iBAAA;AAAA,YACR,YAAA,EAAW,iBAAA;AAAA,YACX,OAAA,EAAS,MAAM,gBAAA,CAAiB,OAAA,CAAQ,YAAY,CAAA;AAAA,YAEpD,8BAAC,YAAA,EAAA,EAAa;AAAA;AAAA,SAChB,GACE,MAAA;AAEN,QAAA,MAAM,UAAA,GAAa,QAAQ,OAAA,CAAQ,KAAA,CAAM,MAAM,CAAA,IAAA,KAAQ,IAAA,CAAK,SAAS,iBAAiB,CAAA;AACtF,QAAA,IAAI,cAAc,MAAA,EAAQ;AAExB,UAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAqB,SAAA,EAAU,kDAAA,EAC9B,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAkB,QAAA,EAAQ,IAAA,EAAC,WAAU,QAAA,EAAS,CAAA;AAAA,4BAC1D,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iIAAA,EACZ,QAAA,EAAA,MAAA,EACH;AAAA,WAAA,EAAA,EAJQ,QAAQ,EAKlB,CAAA;AAAA,QAEJ;AAEA,QAAA,uBAAO,GAAA,CAAC,cAA4B,OAAA,EAAkB,QAAA,EAAQ,MAAC,MAAA,EAAQ,MAAA,EAAA,EAA/C,QAAQ,EAA+C,CAAA;AAAA,MACjF,CAAC;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-thread-item-view.es.js","sources":["../../../../src/domains/traces/components/trace-thread-item-view.tsx"],"sourcesContent":["import { useTraceSpans } from '@mastra/react/hooks/traces';\nimport { ListTreeIcon } from 'lucide-react';\nimport { formatTraceThreadMessages } from './format-trace-thread-messages';\nimport { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { ToolCallProvider } from '@/domains/chat/context/tool-call-context';\nimport { MessageRow } from '@/domains/chat/messages/message-row';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\n\nexport interface TraceThreadItemViewProps {\n  traceId: string;\n  /** Called with the ids of the spans behind a message (text or tool call) when its \"Highlight spans\" action is clicked. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  className?: string;\n}\n\nconst noop = () => {};\n\nexport function TraceThreadItemView({ traceId, onHighlightSpans, className }: TraceThreadItemViewProps) {\n  const { data, isLoading, error } = useTraceSpans({\n    traceId: traceId,\n    passive: true,\n    queryOptions: { enabled: !!traceId },\n  });\n\n  if (isLoading) return <TraceMessagesSkeleton className={className} />;\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"trace\" errorTitle=\"Failed to load partial thread\" />\n      </div>\n    );\n  }\n\n  const messages = data ? formatTraceThreadMessages(data.spans) : [];\n\n  if (messages.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No agent turn found for this trace.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('min-w-0 p-4', className)}>\n      {/* Messages carry their own vertical margins; strip them at the edges so `p-4` is the only outer spacing. */}\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0\">\n        <ToolCallProvider\n          approveToolcall={noop}\n          declineToolcall={noop}\n          approveToolcallGenerate={noop}\n          declineToolcallGenerate={noop}\n          approveNetworkToolcall={noop}\n          declineNetworkToolcall={noop}\n          isRunning={false}\n          toolCallApprovals={{}}\n          networkToolCallApprovals={{}}\n        >\n          {messages.map(message => {\n            const action =\n              onHighlightSpans && message.traceSpanIds.length > 0 ? (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  tooltip=\"Highlight spans\"\n                  aria-label=\"Highlight spans\"\n                  onClick={() => onHighlightSpans(message.traceSpanIds)}\n                >\n                  <ListTreeIcon />\n                </Button>\n              ) : undefined;\n\n            const isToolCall = message.content.parts.every(part => part.type === 'tool-invocation');\n            if (isToolCall && action) {\n              // Tool calls sit on one line, so the action goes beside the tool card instead of below it.\n              return (\n                <div key={message.id} className=\"group/tool mb-3 flex items-start gap-1 last:mb-0\">\n                  <MessageRow message={message} readOnly className=\"flex-1\" />\n                  <div className=\"shrink-0 group-focus-within/tool:opacity-100 group-hover/tool:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n                    {action}\n                  </div>\n                </div>\n              );\n            }\n\n            return <MessageRow key={message.id} message={message} readOnly footer={action} />;\n          })}\n        </ToolCallProvider>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_threadViewByTrace = require('./thread-view-by-trace.cjs.js');
-const dataPanel = require('../../../data-panel-mzQKwVkT.cjs');
+const dataPanel = require('../../../data-panel-HSJNrZhx.cjs');
 
 function TraceThreadPanel({
   open,

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { ThreadViewByTrace } from './thread-view-by-trace.es.js';
-import { D as DataPanel } from '../../../data-panel-GT4fMXR0.js';
+import { D as DataPanel } from '../../../data-panel-C638OC-m.js';
 
 function TraceThreadPanel({
   open,

package/dist/domains/traces/components/trace-time-range-chip.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_traceFilters = require('../trace-filters.cjs.js');
 const dateTimeRangePicker = require('../../../date-time-range-picker-BbX8F_LY.cjs');
-const filterBarChip = require('../../../filter-bar-chip-Cr7kUN9G.cjs');
+const filterBarChip = require('../../../filter-bar-chip-CbX_iAzm.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 const TRACE_TIME_RANGE_FIELD_ID = "timeRange";

package/dist/domains/traces/components/trace-time-range-chip.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { traceFilterFieldColor, traceFilterFieldIcon } from '../trace-filters.es.js';
 import { D as DateTimeRangePicker } from '../../../date-time-range-picker-DzPLKJol.js';
-import { u as useFilterBarContext, F as FilterBarChip, a as FilterBarFieldLabel, f as fieldSegmentAccentStyle, s as segmentClass, e as editableSegmentClass } from '../../../filter-bar-chip-CRejLco-.js';
+import { u as useFilterBarContext, F as FilterBarChip, a as FilterBarFieldLabel, f as fieldSegmentAccentStyle, s as segmentClass, e as editableSegmentClass } from '../../../filter-bar-chip-0OLqovME.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 const TRACE_TIME_RANGE_FIELD_ID = "timeRange";

package/dist/domains/traces/components/traces-error-content.cjs.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const query = require('@mastra/react/hooks/query');
 const domains_auth_components_permissionDenied = require('../../auth/components/permission-denied.cjs.js');
 const domains_auth_components_sessionExpired = require('../../auth/components/session-expired.cjs.js');
-const EmptyState = require('../../../EmptyState-DvSib3QC.cjs');
-const utils_errors = require('../../../utils/errors.cjs.js');
-const utils_queryUtils = require('../../../utils/query-utils.cjs.js');
+const EmptyState = require('../../../EmptyState-O089K_US.cjs');
+const errors = require('../../../errors-BiY55qIh.cjs');
 
 function TracesErrorContent({ error, resource, errorTitle }) {
-  if (utils_queryUtils.is401UnauthorizedError(error)) return /* @__PURE__ */ jsxRuntime.jsx(domains_auth_components_sessionExpired.SessionExpired, {});
-  if (utils_queryUtils.is403ForbiddenError(error)) return /* @__PURE__ */ jsxRuntime.jsx(domains_auth_components_permissionDenied.PermissionDenied, { resource });
-  const parsed = error instanceof Error ? utils_errors.parseError(error) : void 0;
+  if (query.is401UnauthorizedError(error)) return /* @__PURE__ */ jsxRuntime.jsx(domains_auth_components_sessionExpired.SessionExpired, {});
+  if (query.is403ForbiddenError(error)) return /* @__PURE__ */ jsxRuntime.jsx(domains_auth_components_permissionDenied.PermissionDenied, { resource });
+  const parsed = error instanceof Error ? errors.parseError(error) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(EmptyState.EmptyState, { tone: "error", titleSlot: errorTitle, descriptionSlot: parsed?.error ?? "Unknown error" });
 }
 

package/dist/domains/traces/components/traces-error-content.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"traces-error-content.cjs.js","sources":["../../../../src/domains/traces/components/traces-error-content.tsx"],"sourcesContent":["import { PermissionDenied } from '@/domains/auth/components/permission-denied';\nimport { SessionExpired } from '@/domains/auth/components/session-expired';\nimport { EmptyState } from '@/ds/components/EmptyState';\nimport { parseError } from '@/lib/errors';\nimport { is401UnauthorizedError, is403ForbiddenError } from '@/lib/query-utils';\n\nexport interface TracesErrorContentProps {\n  /** The error from a useTraces / useTraceLightSpans / etc. query. */\n  error: unknown;\n  /** Passed to PermissionDenied (e.g. 'traces' / 'trace'). */\n  resource: string;\n  /** Title shown on the generic error fallback. */\n  errorTitle: string;\n}\n\n/**\n * Renders the appropriate fallback content for a traces-related query error:\n * `<SessionExpired />` for 401, `<PermissionDenied />` for 403, otherwise `<EmptyState tone=\"error\" />`.\n *\n * The consumer wraps it in whatever layout they want (PageLayout for the list page,\n * a centered div for the detail page, etc.) — this component only owns the 3-branch decision.\n */\nexport function TracesErrorContent({ error, resource, errorTitle }: TracesErrorContentProps) {\n  if (is401UnauthorizedError(error)) return <SessionExpired />;\n  if (is403ForbiddenError(error)) return <PermissionDenied resource={resource} />;\n  const parsed = error instanceof Error ? parseError(error) : undefined;\n  return <EmptyState tone=\"error\" titleSlot={errorTitle} descriptionSlot={parsed?.error ?? 'Unknown error'} />;\n}\n"],"names":["is401UnauthorizedError","SessionExpired","is403ForbiddenError","jsx","PermissionDenied","parseError","EmptyState"],"mappings":";;;;;;;;;;;AAsBO,SAAS,kBAAA,CAAmB,EAAE,KAAA,EAAO,QAAA,EAAU,YAAW,EAA4B;AAC3F,EAAA,IAAIA,uCAAA,CAAuB,KAAK,CAAA,EAAG,sCAAQC,qDAAA,EAAA,EAAe,CAAA;AAC1D,EAAA,IAAIC,qCAAoB,KAAK,CAAA,EAAG,uBAAOC,cAAA,CAACC,6DAAiB,QAAA,EAAoB,CAAA;AAC7E,EAAA,MAAM,MAAA,GAAS,KAAA,YAAiB,KAAA,GAAQC,uBAAA,CAAW,KAAK,CAAA,GAAI,MAAA;AAC5D,EAAA,uBAAOF,cAAA,CAACG,yBAAW,IAAA,EAAK,OAAA,EAAQ,WAAW,UAAA,EAAY,eAAA,EAAiB,MAAA,EAAQ,KAAA,IAAS,eAAA,EAAiB,CAAA;AAC5G;;;;"}
+{"version":3,"file":"traces-error-content.cjs.js","sources":["../../../../src/domains/traces/components/traces-error-content.tsx"],"sourcesContent":["import { is401UnauthorizedError, is403ForbiddenError } from '@mastra/react/hooks/query';\nimport { PermissionDenied } from '@/domains/auth/components/permission-denied';\nimport { SessionExpired } from '@/domains/auth/components/session-expired';\nimport { EmptyState } from '@/ds/components/EmptyState';\nimport { parseError } from '@/lib/errors';\n\nexport interface TracesErrorContentProps {\n  /** The error from a useTraces / useTraceLightSpans / etc. query. */\n  error: unknown;\n  /** Passed to PermissionDenied (e.g. 'traces' / 'trace'). */\n  resource: string;\n  /** Title shown on the generic error fallback. */\n  errorTitle: string;\n}\n\n/**\n * Renders the appropriate fallback content for a traces-related query error:\n * `<SessionExpired />` for 401, `<PermissionDenied />` for 403, otherwise `<EmptyState tone=\"error\" />`.\n *\n * The consumer wraps it in whatever layout they want (PageLayout for the list page,\n * a centered div for the detail page, etc.) — this component only owns the 3-branch decision.\n */\nexport function TracesErrorContent({ error, resource, errorTitle }: TracesErrorContentProps) {\n  if (is401UnauthorizedError(error)) return <SessionExpired />;\n  if (is403ForbiddenError(error)) return <PermissionDenied resource={resource} />;\n  const parsed = error instanceof Error ? parseError(error) : undefined;\n  return <EmptyState tone=\"error\" titleSlot={errorTitle} descriptionSlot={parsed?.error ?? 'Unknown error'} />;\n}\n"],"names":["is401UnauthorizedError","SessionExpired","is403ForbiddenError","jsx","PermissionDenied","parseError","EmptyState"],"mappings":";;;;;;;;;;;AAsBO,SAAS,kBAAA,CAAmB,EAAE,KAAA,EAAO,QAAA,EAAU,YAAW,EAA4B;AAC3F,EAAA,IAAIA,4BAAA,CAAuB,KAAK,CAAA,EAAG,sCAAQC,qDAAA,EAAA,EAAe,CAAA;AAC1D,EAAA,IAAIC,0BAAoB,KAAK,CAAA,EAAG,uBAAOC,cAAA,CAACC,6DAAiB,QAAA,EAAoB,CAAA;AAC7E,EAAA,MAAM,MAAA,GAAS,KAAA,YAAiB,KAAA,GAAQC,iBAAA,CAAW,KAAK,CAAA,GAAI,MAAA;AAC5D,EAAA,uBAAOF,cAAA,CAACG,yBAAW,IAAA,EAAK,OAAA,EAAQ,WAAW,UAAA,EAAY,eAAA,EAAiB,MAAA,EAAQ,KAAA,IAAS,eAAA,EAAiB,CAAA;AAC5G;;;;"}

package/dist/domains/traces/components/traces-error-content.es.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
+import { is401UnauthorizedError, is403ForbiddenError } from '@mastra/react/hooks/query';
 import { PermissionDenied } from '../../auth/components/permission-denied.es.js';
 import { SessionExpired } from '../../auth/components/session-expired.es.js';
-import { E as EmptyState } from '../../../EmptyState-DGzBN0Ix.js';
-import { parseError } from '../../../utils/errors.es.js';
-import { is401UnauthorizedError, is403ForbiddenError } from '../../../utils/query-utils.es.js';
+import { E as EmptyState } from '../../../EmptyState-BI6cIolY.js';
+import { p as parseError } from '../../../errors-CDTokuME.js';
 
 function TracesErrorContent({ error, resource, errorTitle }) {
   if (is401UnauthorizedError(error)) return /* @__PURE__ */ jsx(SessionExpired, {});

package/dist/domains/traces/components/traces-error-content.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"traces-error-content.es.js","sources":["../../../../src/domains/traces/components/traces-error-content.tsx"],"sourcesContent":["import { PermissionDenied } from '@/domains/auth/components/permission-denied';\nimport { SessionExpired } from '@/domains/auth/components/session-expired';\nimport { EmptyState } from '@/ds/components/EmptyState';\nimport { parseError } from '@/lib/errors';\nimport { is401UnauthorizedError, is403ForbiddenError } from '@/lib/query-utils';\n\nexport interface TracesErrorContentProps {\n  /** The error from a useTraces / useTraceLightSpans / etc. query. */\n  error: unknown;\n  /** Passed to PermissionDenied (e.g. 'traces' / 'trace'). */\n  resource: string;\n  /** Title shown on the generic error fallback. */\n  errorTitle: string;\n}\n\n/**\n * Renders the appropriate fallback content for a traces-related query error:\n * `<SessionExpired />` for 401, `<PermissionDenied />` for 403, otherwise `<EmptyState tone=\"error\" />`.\n *\n * The consumer wraps it in whatever layout they want (PageLayout for the list page,\n * a centered div for the detail page, etc.) — this component only owns the 3-branch decision.\n */\nexport function TracesErrorContent({ error, resource, errorTitle }: TracesErrorContentProps) {\n  if (is401UnauthorizedError(error)) return <SessionExpired />;\n  if (is403ForbiddenError(error)) return <PermissionDenied resource={resource} />;\n  const parsed = error instanceof Error ? parseError(error) : undefined;\n  return <EmptyState tone=\"error\" titleSlot={errorTitle} descriptionSlot={parsed?.error ?? 'Unknown error'} />;\n}\n"],"names":[],"mappings":";;;;;;;AAsBO,SAAS,kBAAA,CAAmB,EAAE,KAAA,EAAO,QAAA,EAAU,YAAW,EAA4B;AAC3F,EAAA,IAAI,sBAAA,CAAuB,KAAK,CAAA,EAAG,2BAAQ,cAAA,EAAA,EAAe,CAAA;AAC1D,EAAA,IAAI,oBAAoB,KAAK,CAAA,EAAG,uBAAO,GAAA,CAAC,oBAAiB,QAAA,EAAoB,CAAA;AAC7E,EAAA,MAAM,MAAA,GAAS,KAAA,YAAiB,KAAA,GAAQ,UAAA,CAAW,KAAK,CAAA,GAAI,MAAA;AAC5D,EAAA,uBAAO,GAAA,CAAC,cAAW,IAAA,EAAK,OAAA,EAAQ,WAAW,UAAA,EAAY,eAAA,EAAiB,MAAA,EAAQ,KAAA,IAAS,eAAA,EAAiB,CAAA;AAC5G;;;;"}
+{"version":3,"file":"traces-error-content.es.js","sources":["../../../../src/domains/traces/components/traces-error-content.tsx"],"sourcesContent":["import { is401UnauthorizedError, is403ForbiddenError } from '@mastra/react/hooks/query';\nimport { PermissionDenied } from '@/domains/auth/components/permission-denied';\nimport { SessionExpired } from '@/domains/auth/components/session-expired';\nimport { EmptyState } from '@/ds/components/EmptyState';\nimport { parseError } from '@/lib/errors';\n\nexport interface TracesErrorContentProps {\n  /** The error from a useTraces / useTraceLightSpans / etc. query. */\n  error: unknown;\n  /** Passed to PermissionDenied (e.g. 'traces' / 'trace'). */\n  resource: string;\n  /** Title shown on the generic error fallback. */\n  errorTitle: string;\n}\n\n/**\n * Renders the appropriate fallback content for a traces-related query error:\n * `<SessionExpired />` for 401, `<PermissionDenied />` for 403, otherwise `<EmptyState tone=\"error\" />`.\n *\n * The consumer wraps it in whatever layout they want (PageLayout for the list page,\n * a centered div for the detail page, etc.) — this component only owns the 3-branch decision.\n */\nexport function TracesErrorContent({ error, resource, errorTitle }: TracesErrorContentProps) {\n  if (is401UnauthorizedError(error)) return <SessionExpired />;\n  if (is403ForbiddenError(error)) return <PermissionDenied resource={resource} />;\n  const parsed = error instanceof Error ? parseError(error) : undefined;\n  return <EmptyState tone=\"error\" titleSlot={errorTitle} descriptionSlot={parsed?.error ?? 'Unknown error'} />;\n}\n"],"names":[],"mappings":";;;;;;;AAsBO,SAAS,kBAAA,CAAmB,EAAE,KAAA,EAAO,QAAA,EAAU,YAAW,EAA4B;AAC3F,EAAA,IAAI,sBAAA,CAAuB,KAAK,CAAA,EAAG,2BAAQ,cAAA,EAAA,EAAe,CAAA;AAC1D,EAAA,IAAI,oBAAoB,KAAK,CAAA,EAAG,uBAAO,GAAA,CAAC,oBAAiB,QAAA,EAAoB,CAAA;AAC7E,EAAA,MAAM,MAAA,GAAS,KAAA,YAAiB,KAAA,GAAQ,UAAA,CAAW,KAAK,CAAA,GAAI,MAAA;AAC5D,EAAA,uBAAO,GAAA,CAAC,cAAW,IAAA,EAAK,OAAA,EAAQ,WAAW,UAAA,EAAY,eAAA,EAAiB,MAAA,EAAQ,KAAA,IAAS,eAAA,EAAiB,CAAA;AAC5G;;;;"}

package/dist/domains/traces/components/traces-list-view.cjs.js

@@ -8,9 +8,9 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
-const dataList = require('../../../data-list-DoKc-wSe.cjs');
-const dataListSkeleton = require('../../../data-list-skeleton-DuqQkzwC.cjs');
-const tracesDataList = require('../../../traces-data-list-D-wz-Je3.cjs');
+const dataList = require('../../../data-list-acjJVSpL.cjs');
+const dataListSkeleton = require('../../../data-list-skeleton-BxcJ34hQ.cjs');
+const tracesDataList = require('../../../traces-data-list-CA7ZJ42U.cjs');
 const useDataListKeyboard = require('../../../use-data-list-keyboard-DF3tLe10.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
 const Txt = require('../../../Txt-DNnvlrBo.cjs');

package/dist/domains/traces/components/traces-list-view.es.js

@@ -4,9 +4,9 @@ import { ListFilterIcon } from 'lucide-react';
 import { useRef, useEffect } from 'react';
 import { buildTraceListColumns, hasTraceColumn, DEFAULT_TRACE_COLUMN_PREFERENCES, TRACE_CUSTOM_COLUMN_LABELS, formatTraceMetadataValue } from '../trace-list-columns.es.js';
 import { getInputPreview, getSpanDurationMs } from '../utils/span-utils.es.js';
-import { D as DataList } from '../../../data-list-DdsyfT8B.js';
-import { D as DataListSkeleton } from '../../../data-list-skeleton-CeyLefM5.js';
-import { T as TracesDataList } from '../../../traces-data-list-DmCgejAx.js';
+import { D as DataList } from '../../../data-list-DYW9FuYo.js';
+import { D as DataListSkeleton } from '../../../data-list-skeleton-CXvrEdMG.js';
+import { T as TracesDataList } from '../../../traces-data-list-CMhd7o-G.js';
 import { u as useDataListKeyboard } from '../../../use-data-list-keyboard-DFQr4t38.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
 import { T as Txt } from '../../../Txt-C3cYJgKU.js';

package/dist/domains/traces/components/traces-page-skeleton.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
-const dataListSkeleton = require('../../../data-list-skeleton-DuqQkzwC.cjs');
+const dataListSkeleton = require('../../../data-list-skeleton-BxcJ34hQ.cjs');
 require('react');
 require('../../../keyboard/keyboard-shortcuts-context.cjs.js');
 const skeleton = require('../../../skeleton-cXUjPrq9.cjs');

package/dist/domains/traces/components/traces-page-skeleton.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { buildTraceListColumns, DEFAULT_TRACE_COLUMN_PREFERENCES } from '../trace-list-columns.es.js';
-import { D as DataListSkeleton } from '../../../data-list-skeleton-CeyLefM5.js';
+import { D as DataListSkeleton } from '../../../data-list-skeleton-CXvrEdMG.js';
 import 'react';
 import '../../../keyboard/keyboard-shortcuts-context.es.js';
 import { S as Skeleton } from '../../../skeleton-BsRAXyh5.js';

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

@@ -2,21 +2,18 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const react = require('@mastra/react');
-const reactQuery = require('@tanstack/react-query');
+const traces = require('@mastra/react/hooks/traces');
 const React = require('react');
-const domains_traces_hooks_useTraceSpans = require('./use-trace-spans.cjs.js');
 const toast = require('../../../toast-nm-fM7BR.cjs');
 const downloadJson = require('../../../downloadJson-PWUDbzkB.cjs');
 
 function useDownloadTraceJson() {
-  const client = react.useMastraClient();
-  const queryClient = reactQuery.useQueryClient();
+  const fetchTraceSpans = traces.useFetchTraceSpans();
   const [isPending, setIsPending] = React.useState(false);
   const download = (traceId) => {
     if (isPending) return;
     setIsPending(true);
-    const task = queryClient.fetchQuery(domains_traces_hooks_useTraceSpans.traceSpansQueryOptions(client, traceId)).then((trace) => downloadJson.downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
+    const task = fetchTraceSpans(traceId).then((trace) => downloadJson.downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
     toast.toast.promise({
       myPromise: task,
       loadingMessage: "Preparing trace download…",

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

@@ -1 +1 @@
-{"version":3,"file":"use-download-trace-json.cjs.js","sources":["../../../../src/domains/traces/hooks/use-download-trace-json.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { traceSpansQueryOptions } from './use-trace-spans';\nimport { downloadJson } from '@/lib/file';\nimport { toast } from '@/lib/toast';\n\nexport function useDownloadTraceJson() {\n  const client = useMastraClient();\n  const queryClient = useQueryClient();\n  const [isPending, setIsPending] = useState(false);\n\n  const download = (traceId: string) => {\n    if (isPending) return;\n    setIsPending(true);\n\n    // Fetch the full payload into the shared cache so the panel matches the downloaded trace.\n    const task = queryClient\n      .fetchQuery(traceSpansQueryOptions(client, traceId))\n      .then(trace => downloadJson(`trace-${traceId}.json`, trace))\n      .finally(() => setIsPending(false));\n\n    toast.promise({\n      myPromise: task,\n      loadingMessage: 'Preparing trace download…',\n      successMessage: 'Trace downloaded',\n      errorMessage: 'Failed to download trace',\n    });\n  };\n\n  return { download, isPending };\n}\n"],"names":["useMastraClient","useQueryClient","useState","traceSpansQueryOptions","downloadJson","toast"],"mappings":";;;;;;;;;;;AAOO,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAC/B,EAAA,MAAM,cAAcC,yBAAA,EAAe;AACnC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAGjB,IAAA,MAAM,IAAA,GAAO,YACV,UAAA,CAAWC,yDAAA,CAAuB,QAAQ,OAAO,CAAC,EAClD,IAAA,CAAK,CAAA,KAAA,KAASC,0BAAa,CAAA,MAAA,EAAS,OAAO,SAAS,KAAK,CAAC,EAC1D,OAAA,CAAQ,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAEpC,IAAAC,WAAA,CAAM,OAAA,CAAQ;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAgB,2BAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO,EAAE,UAAU,SAAA,EAAU;AAC/B;;;;"}
+{"version":3,"file":"use-download-trace-json.cjs.js","sources":["../../../../src/domains/traces/hooks/use-download-trace-json.ts"],"sourcesContent":["import { useFetchTraceSpans } from '@mastra/react/hooks/traces';\nimport { useState } from 'react';\nimport { downloadJson } from '@/lib/file';\nimport { toast } from '@/lib/toast';\n\nexport function useDownloadTraceJson() {\n  const fetchTraceSpans = useFetchTraceSpans();\n  const [isPending, setIsPending] = useState(false);\n\n  const download = (traceId: string) => {\n    if (isPending) return;\n    setIsPending(true);\n\n    const task = fetchTraceSpans(traceId)\n      .then(trace => downloadJson(`trace-${traceId}.json`, trace))\n      .finally(() => setIsPending(false));\n\n    toast.promise({\n      myPromise: task,\n      loadingMessage: 'Preparing trace download…',\n      successMessage: 'Trace downloaded',\n      errorMessage: 'Failed to download trace',\n    });\n  };\n\n  return { download, isPending };\n}\n"],"names":["useFetchTraceSpans","useState","downloadJson","toast"],"mappings":";;;;;;;;;AAKO,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,kBAAkBA,yBAAA,EAAmB;AAC3C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,IAAA,MAAM,OAAO,eAAA,CAAgB,OAAO,CAAA,CACjC,IAAA,CAAK,WAASC,yBAAA,CAAa,CAAA,MAAA,EAAS,OAAO,CAAA,KAAA,CAAA,EAAS,KAAK,CAAC,CAAA,CAC1D,QAAQ,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAEpC,IAAAC,WAAA,CAAM,OAAA,CAAQ;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAgB,2BAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO,EAAE,UAAU,SAAA,EAAU;AAC/B;;;;"}

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

@@ -1,18 +1,15 @@
-import { useMastraClient } from '@mastra/react';
-import { useQueryClient } from '@tanstack/react-query';
+import { useFetchTraceSpans } from '@mastra/react/hooks/traces';
 import { useState } from 'react';
-import { traceSpansQueryOptions } from './use-trace-spans.es.js';
 import { t as toast } from '../../../toast-c5kCpyWt.js';
 import { d as downloadJson } from '../../../downloadJson-DuPoMa_6.js';
 
 function useDownloadTraceJson() {
-  const client = useMastraClient();
-  const queryClient = useQueryClient();
+  const fetchTraceSpans = useFetchTraceSpans();
   const [isPending, setIsPending] = useState(false);
   const download = (traceId) => {
     if (isPending) return;
     setIsPending(true);
-    const task = queryClient.fetchQuery(traceSpansQueryOptions(client, traceId)).then((trace) => downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
+    const task = fetchTraceSpans(traceId).then((trace) => downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
     toast.promise({
       myPromise: task,
       loadingMessage: "Preparing trace download…",

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

@@ -1 +1 @@
-{"version":3,"file":"use-download-trace-json.es.js","sources":["../../../../src/domains/traces/hooks/use-download-trace-json.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { traceSpansQueryOptions } from './use-trace-spans';\nimport { downloadJson } from '@/lib/file';\nimport { toast } from '@/lib/toast';\n\nexport function useDownloadTraceJson() {\n  const client = useMastraClient();\n  const queryClient = useQueryClient();\n  const [isPending, setIsPending] = useState(false);\n\n  const download = (traceId: string) => {\n    if (isPending) return;\n    setIsPending(true);\n\n    // Fetch the full payload into the shared cache so the panel matches the downloaded trace.\n    const task = queryClient\n      .fetchQuery(traceSpansQueryOptions(client, traceId))\n      .then(trace => downloadJson(`trace-${traceId}.json`, trace))\n      .finally(() => setIsPending(false));\n\n    toast.promise({\n      myPromise: task,\n      loadingMessage: 'Preparing trace download…',\n      successMessage: 'Trace downloaded',\n      errorMessage: 'Failed to download trace',\n    });\n  };\n\n  return { download, isPending };\n}\n"],"names":[],"mappings":";;;;;;;AAOO,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,cAAc,cAAA,EAAe;AACnC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAGjB,IAAA,MAAM,IAAA,GAAO,YACV,UAAA,CAAW,sBAAA,CAAuB,QAAQ,OAAO,CAAC,EAClD,IAAA,CAAK,CAAA,KAAA,KAAS,aAAa,CAAA,MAAA,EAAS,OAAO,SAAS,KAAK,CAAC,EAC1D,OAAA,CAAQ,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAEpC,IAAA,KAAA,CAAM,OAAA,CAAQ;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAgB,2BAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO,EAAE,UAAU,SAAA,EAAU;AAC/B;;;;"}
+{"version":3,"file":"use-download-trace-json.es.js","sources":["../../../../src/domains/traces/hooks/use-download-trace-json.ts"],"sourcesContent":["import { useFetchTraceSpans } from '@mastra/react/hooks/traces';\nimport { useState } from 'react';\nimport { downloadJson } from '@/lib/file';\nimport { toast } from '@/lib/toast';\n\nexport function useDownloadTraceJson() {\n  const fetchTraceSpans = useFetchTraceSpans();\n  const [isPending, setIsPending] = useState(false);\n\n  const download = (traceId: string) => {\n    if (isPending) return;\n    setIsPending(true);\n\n    const task = fetchTraceSpans(traceId)\n      .then(trace => downloadJson(`trace-${traceId}.json`, trace))\n      .finally(() => setIsPending(false));\n\n    toast.promise({\n      myPromise: task,\n      loadingMessage: 'Preparing trace download…',\n      successMessage: 'Trace downloaded',\n      errorMessage: 'Failed to download trace',\n    });\n  };\n\n  return { download, isPending };\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAC3C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,IAAA,MAAM,OAAO,eAAA,CAAgB,OAAO,CAAA,CACjC,IAAA,CAAK,WAAS,YAAA,CAAa,CAAA,MAAA,EAAS,OAAO,CAAA,KAAA,CAAA,EAAS,KAAK,CAAC,CAAA,CAC1D,QAAQ,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAEpC,IAAA,KAAA,CAAM,OAAA,CAAQ;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAgB,2BAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO,EAAE,UAAU,SAAA,EAAU;AAC/B;;;;"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const react = require('@mastra/react');
+const traces = require('@mastra/react/hooks/traces');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 
@@ -22,10 +22,7 @@ function writePreferences(storageKey, preferences) {
   }
 }
 function useTraceColumnPreferences() {
-  const client = react.useMastraClient();
-  const projectUrl = client.options.baseUrl || (typeof window === "undefined" ? "local" : window.location.origin || "local");
-  const apiPrefix = client.options.apiPrefix ?? "/api";
-  const storageKey = `mastra:traces:columns:${projectUrl}:${apiPrefix}`;
+  const storageKey = traces.useTraceColumnPreferencesStorageKey();
   const [state, setState] = React.useState(() => ({
     storageKey,
     preferences: readPreferences(storageKey),