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

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

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

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

@@ -1,6 +1,6 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { MoreHorizontalIcon, ChevronsUpDownIcon, ChevronsDownUpIcon, CircleGaugeIcon, SaveIcon, WrenchIcon, Link2Icon, Loader2Icon, DownloadIcon } from 'lucide-react';
-import { useState, useEffect, useId, useMemo } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { MessageSquareTextIcon, MessageSquareReplyIcon, MoreHorizontalIcon, SaveIcon, WrenchIcon, Link2Icon, Loader2Icon, DownloadIcon, CircleGaugeIcon, ListTreeIcon, ChartGanttIcon } from 'lucide-react';
+import { useMemo, useState, useEffect, useId } from 'react';
 import { getAllSpanIds } from '../hooks/get-all-span-ids.es.js';
 import { useDownloadTraceJson } from '../hooks/use-download-trace-json.es.js';
 import { useTraceSearch } from '../hooks/use-trace-search.es.js';
@@ -9,18 +9,19 @@ import { TraceIdButton } from './trace-id-button.es.js';
 import { TraceSpanTimeline } from './trace-span-timeline.es.js';
 import { TraceSpanTree } from './trace-span-tree.es.js';
 import { TraceSummaryDescription } from './trace-summary-description.es.js';
-import { B as Button } from '../../../Button-BVGwYwHT.js';
-import { B as ButtonsGroup } from '../../../buttons-group-CHyXDQBp.js';
-import { D as DataPanel } from '../../../data-panel-5iuux0r_.js';
-import { D as DropdownMenu } from '../../../dropdown-menu-C853KwJJ.js';
-import { S as SearchFieldBlock } from '../../../search-field-block-DhgD7NhZ.js';
-import { N as Notice } from '../../../Notice-CMZ86f1g.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BAy8m6GO.js';
-import { T as Tab } from '../../../tabs-tab-K5mQhs7r.js';
-import { T as TabContent } from '../../../tabs-content-CW6RtAEV.js';
+import { B as Button } from '../../../Button-DS6O6fvU.js';
+import { B as ButtonsGroup } from '../../../buttons-group-t7AODlO9.js';
+import { D as DataPanel } from '../../../data-panel-D2JtbyKg.js';
+import { D as DropdownMenu } from '../../../dropdown-menu-B3nTlFnz.js';
+import { S as SearchFieldBlock } from '../../../search-field-block-zF_99MJ5.js';
+import { N as Notice } from '../../../Notice-DEqr19sI.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-yY2eNDS2.js';
+import { T as Tab } from '../../../tabs-tab-CgMaandp.js';
+import { Icon } from '../../../icons/Icon.es.js';
+import { ScorersIcon } from '../../../icons/ScorersIcon.es.js';
 import { useScrollToFirstHighlight } from '../../../hooks/use-scroll-to-first-highlight.es.js';
 import { useTextHighlight } from '../../../hooks/use-text-highlight.es.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { c as cn } from '../../../cn-C6s2yXwM.js';
 
 function TraceDataPanelView({
   traceId,
@@ -34,8 +35,10 @@ function TraceDataPanelView({
   initialSpanId,
   onPrevious,
   onNext,
-  collapsed: controlledCollapsed,
-  onCollapsedChange,
+  size = "wide",
+  depth,
+  headerSlot,
+  title,
   placement,
   LinkComponent,
   traceHref,
@@ -47,22 +50,68 @@ function TraceDataPanelView({
   scoresTabBadge,
   feedbackTabSlot,
   feedbackTabBadge,
-  activeTab,
-  onTabChange,
   featuredSpanIds,
   messagesPanelSlot,
-  spanPanelSlot,
-  className
+  sideView: controlledSideView,
+  onSideViewChange,
+  spanView: controlledSpanView,
+  onSpanViewChange,
+  spanPanelSlot
 }) {
   const isOnTracePage = placement === "trace-page";
-  const [internalCollapsed, setInternalCollapsed] = useState(false);
-  const collapsed = controlledCollapsed ?? internalCollapsed;
-  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;
-  const [uncontrolledTab, setUncontrolledTab] = useState("details");
-  const currentTab = activeTab ?? uncontrolledTab;
-  const handleTabChange = (tab) => {
-    setUncontrolledTab(tab);
-    onTabChange?.(tab);
+  const sideViews = useMemo(() => {
+    const views = [];
+    if (messagesPanelSlot) {
+      views.push({
+        value: "messages",
+        label: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(MessageSquareTextIcon, {}) }),
+          "Messages"
+        ] })
+      });
+    }
+    if (feedbackTabSlot) {
+      views.push({
+        value: "feedback",
+        label: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(MessageSquareReplyIcon, {}) }),
+          "Feedback",
+          feedbackTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " (",
+            feedbackTabBadge,
+            ")"
+          ] })
+        ] })
+      });
+    }
+    if (scoresTabSlot) {
+      views.push({
+        value: "scores",
+        label: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(ScorersIcon, {}) }),
+          "Scores",
+          scoresTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " (",
+            scoresTabBadge,
+            ")"
+          ] })
+        ] })
+      });
+    }
+    return views;
+  }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);
+  const [uncontrolledSideView, setUncontrolledSideView] = useState();
+  const chosenSideView = controlledSideView ?? uncontrolledSideView;
+  const sideView = (sideViews.find((view) => view.value === chosenSideView) ?? sideViews[0])?.value;
+  const handleSideViewChange = (view) => {
+    setUncontrolledSideView(view);
+    onSideViewChange?.(view);
+  };
+  const [uncontrolledSpanView, setUncontrolledSpanView] = useState("tree");
+  const spanView = controlledSpanView ?? uncontrolledSpanView;
+  const setSpanView = (view) => {
+    setUncontrolledSpanView(view);
+    onSpanViewChange?.(view);
   };
   const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();
   const [selectedSpanId, setSelectedSpanId] = useState(initialSpanId ?? void 0);
@@ -108,22 +157,14 @@ function TraceDataPanelView({
     setSelectedSpanId(newId);
     onSpanSelect?.(newId);
   };
-  const traceActionsMenu = /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+  const traceActionsMenu = traceId && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(
       DropdownMenu.Trigger,
       {
-        render: /* @__PURE__ */ jsx(Button, { size: "md", tooltip: "Trace actions", "aria-label": "Trace actions", children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {}) })
+        render: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", tooltip: "Open trace actions", "aria-label": "Open trace actions", children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {}) })
       }
     ),
     /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
-      !isOnTracePage && onCollapsedChange && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => setCollapsed(!collapsed), children: [
-        collapsed ? /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsDownUpIcon, {}),
-        collapsed ? "Expand panel" : "Collapse panel"
-      ] }),
-      !isOnTracePage && onEvaluateTrace && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: onEvaluateTrace, children: [
-        /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
-        "Evaluate trace"
-      ] }),
       !isOnTracePage && onSaveAsDatasetItem && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId }), children: [
         /* @__PURE__ */ jsx(SaveIcon, {}),
         "Add full trace to dataset"
@@ -142,133 +183,136 @@ function TraceDataPanelView({
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs(DataPanel, { collapsed, className, children: [
-    /* @__PURE__ */ jsx(DataPanel.Header, { children: isOnTracePage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(DataPanel.Heading, { children: "Trace Timeline" }),
-      /* @__PURE__ */ jsx(ButtonsGroup, { className: "ml-auto shrink-0", children: traceActionsMenu })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs(DataPanel.Heading, { className: "items-center", children: [
-          "Trace",
-          /* @__PURE__ */ jsx(TraceIdButton, { id: traceId })
-        ] }),
-        !collapsed && rootSpan && /* @__PURE__ */ jsx(
-          TraceSummaryDescription,
-          {
-            rootSpan,
-            usage,
-            entityHref,
-            LinkComponent
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0 self-start", children: [
-        traceActionsMenu,
-        (onPrevious || onNext) && /* @__PURE__ */ jsx(
-          DataPanel.NextPrevNav,
+  const sideColumn = traceId && sideView ? /* @__PURE__ */ jsxs("div", { "data-trace-side-column": true, className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-border1 border-b", children: /* @__PURE__ */ jsx(TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsx(Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
+    sideView === "messages" && /* @__PURE__ */ jsx(DataPanel.Content, { className: "p-0", children: messagesPanelSlot }),
+    sideView === "feedback" && /* @__PURE__ */ jsx(DataPanel.Content, { children: feedbackTabSlot?.({ traceId }) }),
+    sideView === "scores" && /* @__PURE__ */ jsx(DataPanel.Content, { children: scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId }) })
+  ] }) : null;
+  return /* @__PURE__ */ jsx(
+    DataPanel,
+    {
+      open: !!traceId,
+      onClose,
+      title: title ?? (isOnTracePage ? "Trace Timeline" : `Trace ${traceId ?? ""}`),
+      size,
+      depth,
+      children: traceId && /* @__PURE__ */ jsxs(Fragment, { children: [
+        headerSlot,
+        /* @__PURE__ */ jsx(DataPanel.Header, { children: isOnTracePage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataPanel.Heading, { children: "Trace Timeline" }),
+          /* @__PURE__ */ jsx(DataPanel.HeaderActions, { children: traceActionsMenu })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataPanel.CloseButton, { onClick: onClose }),
+          /* @__PURE__ */ jsxs(DataPanel.HeaderContent, { children: [
+            /* @__PURE__ */ jsxs(DataPanel.Heading, { children: [
+              "Trace",
+              /* @__PURE__ */ jsx(TraceIdButton, { id: traceId })
+            ] }),
+            rootSpan && /* @__PURE__ */ jsx(
+              TraceSummaryDescription,
+              {
+                rootSpan,
+                usage,
+                entityHref,
+                LinkComponent
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(DataPanel.HeaderActions, { children: [
+            onEvaluateTrace && /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "sm", onClick: onEvaluateTrace, disabled: !rootSpan, children: [
+              /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
+              "Score trace"
+            ] }),
+            traceActionsMenu,
+            (onPrevious || onNext) && /* @__PURE__ */ jsx(
+              DataPanel.NextPrevNav,
+              {
+                onPrevious,
+                onNext,
+                previousLabel: "Go to previous trace",
+                nextLabel: "Go to next trace"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          TracePanelColumns,
           {
-            onPrevious,
-            onNext,
-            previousLabel: "Previous trace",
-            nextLabel: "Next trace"
-          }
-        ),
-        /* @__PURE__ */ jsx(DataPanel.CloseButton, { onClick: onClose })
-      ] })
-    ] }) }),
-    !collapsed && /* @__PURE__ */ jsx(
-      TracePanelColumns,
-      {
-        messagesPanelSlot,
-        messagesCollapsed: currentTab === "timeline",
-        spanPanelSlot,
-        highlightQuery: query,
-        spanPanelKey: selectedSpanId,
-        children: isLoading ? /* @__PURE__ */ jsx(DataPanel.LoadingData, { children: "Loading trace..." }) : !spans?.length ? /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans found for this trace." }) : (() => {
-          const searchField = /* @__PURE__ */ jsx(
-            SearchFieldBlock,
-            {
-              name: searchFieldName,
-              label: "Search spans",
-              labelIsHidden: true,
-              placeholder: "Search spans...",
-              value: query,
-              onChange: (e) => setQuery(e.target.value),
-              onReset: () => setQuery(""),
-              size: "sm",
-              variant: "outline",
-              className: "w-full"
-            }
-          );
-          const noSearchResults = hierarchicalSpans.length === 0 && /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans match your search." });
-          return /* @__PURE__ */ jsxs(
-            Tabs,
-            {
-              defaultTab: "details",
-              value: activeTab,
-              onValueChange: handleTabChange,
-              className: "grid h-full min-h-0 grid-rows-[auto_1fr]",
-              children: [
-                /* @__PURE__ */ jsx(DataPanel.Header, { className: "min-h-0 px-2 py-1", children: /* @__PURE__ */ jsxs(TabList, { variant: "pill-ghost", children: [
-                  /* @__PURE__ */ jsx(Tab, { value: "details", children: "Spans" }),
-                  /* @__PURE__ */ jsx(Tab, { value: "timeline", children: "Timeline" }),
-                  feedbackTabSlot && /* @__PURE__ */ jsxs(Tab, { value: "feedback", children: [
-                    "Feedback",
-                    feedbackTabBadge
-                  ] }),
-                  scoresTabSlot && /* @__PURE__ */ jsxs(Tab, { value: "scores", children: [
-                    "Scores",
-                    scoresTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      " (",
-                      scoresTabBadge,
-                      ")"
-                    ] })
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsx(TabContent, { value: "details", className: "min-h-0 py-0", children: /* @__PURE__ */ jsxs(DataPanel.Content, { children: [
-                  !isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && !onAddTraceMocksToItem && showUnavailableFeaturesMsg && /* @__PURE__ */ jsx(Notice, { variant: "info", className: "mb-6", children: /* @__PURE__ */ jsx(Notice.Message, { children: "Evaluating traces and saving them as dataset items is available in Mastra Studio (local or deployed)." }) }),
+            sideColumnSlot: sideColumn,
+            spanPanelSlot,
+            highlightQuery: query,
+            spanPanelKey: selectedSpanId,
+            children: !isLoading && !spans?.length ? /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans found for this trace." }) : (() => {
+              const isTimeline = spanView === "timeline";
+              const searchHeader = /* @__PURE__ */ jsxs(DataPanel.Header, { className: "border-border1 gap-2 border-b", children: [
+                /* @__PURE__ */ jsx(
+                  SearchFieldBlock,
+                  {
+                    name: searchFieldName,
+                    label: "Search spans",
+                    labelIsHidden: true,
+                    placeholder: "Search spans...",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    onReset: () => setQuery(""),
+                    size: "sm",
+                    variant: "outline",
+                    className: "w-full"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", className: "shrink-0", children: [
                   /* @__PURE__ */ jsx(
-                    TraceSpanTree,
+                    Button,
                     {
-                      hierarchicalSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      expandedSpanIds,
-                      setExpandedSpanIds,
-                      featuredSpanIds,
-                      leadingSlot: searchField
+                      size: "sm",
+                      variant: isTimeline ? "default" : "primary",
+                      "aria-pressed": !isTimeline,
+                      tooltip: "Span tree",
+                      onClick: () => setSpanView("tree"),
+                      children: /* @__PURE__ */ jsx(ListTreeIcon, {})
                     }
                   ),
-                  noSearchResults
-                ] }) }),
-                /* @__PURE__ */ jsx(TabContent, { value: "timeline", className: "min-h-0 py-0", children: /* @__PURE__ */ jsxs(DataPanel.Content, { children: [
                   /* @__PURE__ */ jsx(
-                    TraceSpanTimeline,
+                    Button,
                     {
-                      hierarchicalSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      expandedSpanIds,
-                      setExpandedSpanIds,
-                      featuredSpanIds,
-                      leadingSlot: searchField
+                      size: "sm",
+                      variant: isTimeline ? "primary" : "default",
+                      "aria-pressed": isTimeline,
+                      tooltip: "Timeline",
+                      onClick: () => setSpanView("timeline"),
+                      children: /* @__PURE__ */ jsx(ChartGanttIcon, {})
                     }
-                  ),
+                  )
+                ] })
+              ] });
+              const noSearchResults = !isLoading && hierarchicalSpans.length === 0 && /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans match your search." });
+              const viewProps = {
+                hierarchicalSpans,
+                onSpanClick: handleSpanClick,
+                selectedSpanId,
+                expandedSpanIds,
+                setExpandedSpanIds,
+                featuredSpanIds,
+                isLoading
+              };
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                searchHeader,
+                /* @__PURE__ */ jsxs(DataPanel.Content, { children: [
+                  !isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && !onAddTraceMocksToItem && showUnavailableFeaturesMsg && /* @__PURE__ */ jsx(Notice, { variant: "info", className: "mb-6", children: /* @__PURE__ */ jsx(Notice.Message, { children: "Evaluating traces and saving them as dataset items is available in Mastra Studio (local or deployed)." }) }),
+                  isTimeline ? /* @__PURE__ */ jsx(TraceSpanTimeline, { ...viewProps }) : /* @__PURE__ */ jsx(TraceSpanTree, { ...viewProps }),
                   noSearchResults
-                ] }) }),
-                feedbackTabSlot && /* @__PURE__ */ jsx(TabContent, { value: "feedback", className: "h-full min-h-0 py-0", children: /* @__PURE__ */ jsx(DataPanel.Content, { children: feedbackTabSlot({ traceId }) }) }),
-                scoresTabSlot && /* @__PURE__ */ jsx(TabContent, { value: "scores", className: "h-full min-h-0 py-0", children: /* @__PURE__ */ jsx(DataPanel.Content, { children: scoresTabSlot({ traceId, rootSpanId: rootSpan?.spanId }) }) })
-              ]
-            }
-          );
-        })()
-      }
-    )
-  ] });
+                ] })
+              ] });
+            })()
+          }
+        )
+      ] })
+    }
+  );
 }
 function TracePanelColumns({
-  messagesPanelSlot,
-  messagesCollapsed,
+  sideColumnSlot,
   spanPanelSlot,
   highlightQuery,
   spanPanelKey,
@@ -276,25 +320,17 @@ function TracePanelColumns({
 }) {
   const { ref: highlightRef } = useTextHighlight(highlightQuery);
   const { ref: scrollToMatchRef } = useScrollToFirstHighlight(highlightQuery, spanPanelKey);
-  const showMessages = !!messagesPanelSlot && !messagesCollapsed;
-  const columns = showMessages && spanPanelSlot ? "grid-cols-[1fr_1fr_1fr]" : showMessages ? "grid-cols-[1fr_1fr_0fr]" : spanPanelSlot ? "grid-cols-[0fr_1fr_1fr]" : "grid-cols-[0fr_1fr_0fr]";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: highlightRef,
       "data-trace-columns": true,
-      className: cn("grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out", columns),
+      className: cn(
+        "grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out",
+        sideColumnSlot ? spanPanelSlot ? "grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]" : "grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]" : spanPanelSlot ? "grid-cols-[0px_1fr_1fr]" : "grid-cols-[0px_1fr_0fr]"
+      ),
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex min-h-0 min-w-0 flex-col overflow-hidden",
-              showMessages && "animate-in border-r border-border1 duration-300 fade-in-0"
-            ),
-            children: messagesPanelSlot
-          }
-        ),
+        /* @__PURE__ */ jsx("div", { className: cn("flex min-h-0 min-w-0 flex-col overflow-hidden", sideColumnSlot && "border-r border-border1"), children: sideColumnSlot }),
         /* @__PURE__ */ jsx("div", { className: "flex min-h-0 min-w-0 flex-col overflow-hidden", children }),
         /* @__PURE__ */ jsx(
           "div",