@mastra/playground-ui 68.0.0-alpha.2 → 68.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"trace-data-panel-view.cjs.js","names":["useMemo","_Fragment","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","useState","useDownloadTraceJson","useTraceSearch","formatHierarchicalSpans","getAllSpanIds","TraceSummaryDescription","Button","Link2Icon","Loader2Icon","DownloadIcon","CircleGaugeIcon","DataPanel","Skeleton","Tabs","TabList","Tab","TraceIcon","SaveIcon","TraceEntityMeta","TraceStatusMeta","SearchIcon","XIcon","ListTreeIcon","ChartGanttIcon","Notice","TraceSpanTimeline","TraceSpanTree","useTextHighlight","useScrollToFirstHighlight","useGroupRef","useRef","Group","Panel","PanelSeparator"],"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  SaveIcon,\n  SearchIcon,\n  XIcon,\n} from 'lucide-react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { Group, Panel, useGroupRef } from 'react-resizable-panels';\nimport type { Layout } from 'react-resizable-panels';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { LightSpanRecord } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport type { TraceStreamingTimings } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceEntityMeta, TraceStatusMeta, TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { TraceIcon } from '@/ds/icons/TraceIcon';\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 { PanelSeparator } from '@/lib/resize/separator';\n\nexport type TraceDataPanelPlacement = 'traces-list' | 'trace-page';\n\nexport type TraceSpanView = 'tree' | 'timeline';\n\nexport type TraceSideView = 'messages' | 'feedback' | 'scores';\n\nexport interface TraceDataPanelViewProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: (LightSpanRecord & { signalLabel?: string })[] | 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  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  /** Integration-specific actions shown alongside the standard trace controls. */\n  headerActionsSlot?: 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   * Time to first chunk and first token of the trace root, marked on the timeline. Left off when\n   * `anchorSpanId` shows a branch, whose spans don't count from the root.\n   */\n  rootStreamingTimings?: Omit<TraceStreamingTimings, 'startedAt'>;\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   * Root entity type when the caller knows it before the spans load (e.g. from the listed row).\n   * Sizes the columns from the start, so they don't shift once the trace arrives. `null` is a\n   * trace known to have no entity type.\n   */\n  entityType?: string | null;\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 in the side column and a \"Scores\" readout in the\n   * summary row opens the same slot in a popover.\n   */\n  scoresTabSlot?: (args: { traceId: string; rootSpanId: string | undefined }) => ReactNode;\n  /** Optional count rendered after the \"Scores\" labels, e.g. `Scores (3)`. */\n  scoresTabBadge?: ReactNode;\n  /**\n   * When provided, a \"Feedback\" tab appears in the side column and a \"Feedback\" readout in\n   * the summary row opens the same slot in a popover. Trace feedback is not scoped to a\n   * span — the span panel owns that.\n   */\n  feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n  /** Optional count rendered after the \"Feedback\" labels, e.g. `Feedback (3)`. */\n  feedbackTabBadge?: ReactNode;\n  /** Span ids to feature in the timeline; every other span is faded. */\n  featuredSpanIds?: string[];\n  /**\n   * The \"Messages\" view of the side column next to the span tree (typically the\n   * trace as one reconstructed agent turn). Rendered without content padding.\n   */\n  messagesPanelSlot?: ReactNode;\n  /**\n   * Actions rendered at the end of the side column's tab row (e.g. \"Open full thread\").\n   * `compact` is true when the side column is narrow and controls collapse to icons.\n   */\n  sideHeaderActions?: (options: { compact: boolean }) => ReactNode;\n  /** Controlled span view (tree or timeline); falls back to local state starting on the tree. */\n  spanView?: TraceSpanView;\n  onSpanViewChange?: (view: TraceSpanView) => void;\n  /** Controlled side column view; falls back to the first available view. */\n  sideView?: TraceSideView;\n  onSideViewChange?: (view: TraceSideView) => void;\n  /**\n   * Rendered as a column to the right of the timeline inside the same card;\n   * typically the span detail.\n   */\n  spanPanelSlot?: ReactNode;\n}\n\nexport function TraceDataPanelView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  onEvaluateTrace,\n  onSaveAsDatasetItem,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  size = 'wide',\n  depth,\n  headerSlot,\n  headerActionsSlot,\n  title,\n  placement,\n  LinkComponent,\n  traceHref,\n  entityHref,\n  usage,\n  rootStreamingTimings,\n  anchorSpanId,\n  entityType,\n  showUnavailableFeaturesMsg = true,\n  scoresTabSlot,\n  scoresTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  featuredSpanIds,\n  messagesPanelSlot,\n  sideHeaderActions,\n  sideView: controlledSideView,\n  onSideViewChange,\n  spanView: controlledSpanView,\n  onSpanViewChange,\n  spanPanelSlot,\n}: TraceDataPanelViewProps) {\n  const isOnTracePage = placement === 'trace-page';\n\n  // The side column next to the span tree hosts Messages / Feedback / Scores;\n  // which one is shown is purely a local viewing choice.\n  const sideViews = useMemo(() => {\n    const views: Array<{ value: TraceSideView; name: string; label: ReactNode }> = [];\n    if (messagesPanelSlot) {\n      views.push({\n        value: 'messages',\n        name: 'Messages',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareTextIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">Messages</span>\n          </>\n        ),\n      });\n    }\n    if (feedbackTabSlot) {\n      views.push({\n        value: 'feedback',\n        name: 'Feedback',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareReplyIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">\n              Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n            </span>\n          </>\n        ),\n      });\n    }\n    if (scoresTabSlot) {\n      views.push({\n        value: 'scores',\n        name: 'Scores',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <ScorersIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}</span>\n          </>\n        ),\n      });\n    }\n    return views;\n  }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n  const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n  // Mirrors the side column's `@max-[501px]` container query: the layout collapses in CSS, but\n  // tooltips render in a portal outside the container, so they need the width in JS.\n  const [sideColumnElement, setSideColumnElement] = useState<HTMLDivElement | null>(null);\n  const [compactSide, setCompactSide] = useState(false);\n  useEffect(() => {\n    if (!sideColumnElement || !('ResizeObserver' in globalThis)) return;\n    const observer = new ResizeObserver(() => setCompactSide(sideColumnElement.clientWidth <= 500));\n    observer.observe(sideColumnElement);\n    return () => observer.disconnect();\n  }, [sideColumnElement]);\n  const chosenSideView = controlledSideView ?? uncontrolledSideView;\n  const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n  const handleSideViewChange = (view: TraceSideView) => {\n    setUncontrolledSideView(view);\n    onSideViewChange?.(view);\n  };\n\n  const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n  const spanView = controlledSpanView ?? uncontrolledSpanView;\n  const setSpanView = (view: TraceSpanView) => {\n    setUncontrolledSpanView(view);\n    onSpanViewChange?.(view);\n  };\n\n  const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n  const [selectedSpanId, setSelectedSpanId] = useState<string | undefined>(initialSpanId ?? undefined);\n\n  // Sync selected span when initialSpanId or trace data changes\n  useEffect(() => {\n    // No span requested: clear immediately.\n    if (!initialSpanId) {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n      return;\n    }\n    // Span requested: wait for trace data before deciding so an in-flight\n    // fetch doesn't wipe a URL-provided selection. Callers that default their\n    // spans to `[]` while loading only say so through `isLoading`.\n    if (isLoading || !spans) return;\n\n    const found = spans.find(s => s.spanId === initialSpanId);\n    if (found) {\n      setSelectedSpanId(initialSpanId);\n      onSpanSelect?.(initialSpanId);\n    } else {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpanId, spans, isLoading]);\n\n  const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n  const hierarchicalSpans = useMemo(\n    () =>\n      formatHierarchicalSpans(\n        // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n        // rendered several components deeper.\n        results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n        anchorSpanId,\n      ),\n    [results, payloadOnlyMatchIds, anchorSpanId],\n  );\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const rootSpan = useMemo(\n    () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n    [spans, anchorSpanId],\n  );\n  const rootError = getSpanError(rootSpan?.error);\n  const handleSpanClick = (id: string) => {\n    const newId = selectedSpanId === id ? undefined : id;\n    setSelectedSpanId(newId);\n    onSpanSelect?.(newId);\n  };\n\n  const traceSummary = rootSpan && (\n    <TraceSummaryDescription rootSpan={rootSpan} usage={usage} entityHref={entityHref} LinkComponent={LinkComponent} />\n  );\n\n  const traceActions = traceId && (\n    <>\n      {!isOnTracePage && LinkComponent && traceHref && (\n        <Button size=\"icon-sm\" variant=\"ghost\" tooltip=\"Open trace page\" render={<LinkComponent href={traceHref} />}>\n          <Link2Icon />\n        </Button>\n      )}\n      <Button\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        tooltip=\"Download trace JSON\"\n        disabled={isDownloadingTrace}\n        onClick={() => downloadTraceJson(traceId)}\n      >\n        {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n      </Button>\n    </>\n  );\n\n  const scoreAction = onEvaluateTrace && (\n    <Button variant=\"primary\" size=\"sm\" onClick={onEvaluateTrace} disabled={!rootSpan}>\n      <CircleGaugeIcon />\n      Score trace\n    </Button>\n  );\n\n  const sideColumn =\n    traceId && sideView ? (\n      <div\n        ref={setSideColumnElement}\n        data-trace-side-column\n        className=\"@container flex h-full min-h-0 min-w-0 flex-col overflow-hidden\"\n      >\n        {/* Whether the Messages tab exists depends on the spans, so the tabs wait for them;\n            otherwise the column flickers Feedback → Messages as the first tab changes. */}\n        {isLoading ? (\n          <DataPanel.Header className=\"border-b border-surface-rim\">\n            <div aria-hidden className=\"flex h-control-sm items-center gap-2\">\n              <Skeleton className=\"h-5 w-24 rounded-full\" />\n              <Skeleton className=\"h-5 w-20 rounded-full\" />\n            </div>\n          </DataPanel.Header>\n        ) : (\n          <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n            {/* `flex-nowrap` + a shrinkable tab column: the tab list's scroll wrapper is full-width,\n                so in a wrapping row it would push the actions onto a second line. */}\n            <DataPanel.Header className=\"flex-nowrap border-b border-surface-rim\">\n              <div className=\"min-w-0 flex-1\">\n                <TabList variant=\"pill-ghost\" size=\"sm\">\n                  {sideViews.map(view => (\n                    <Tab key={view.value} value={view.value} tooltip={compactSide ? view.name : undefined}>\n                      {view.label}\n                    </Tab>\n                  ))}\n                </TabList>\n              </div>\n              {sideHeaderActions && (\n                <div className=\"flex shrink-0 items-center whitespace-nowrap\">\n                  {sideHeaderActions({ compact: compactSide })}\n                </div>\n              )}\n            </DataPanel.Header>\n          </Tabs>\n        )}\n        {!isLoading && sideView === 'messages' && (\n          <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>\n        )}\n        {!isLoading && sideView === 'feedback' && (\n          <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>\n        )}\n        {!isLoading && sideView === 'scores' && (\n          <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n        )}\n      </div>\n    ) : null;\n\n  return (\n    <DataPanel\n      open={!!traceId}\n      onClose={onClose}\n      title={title ?? (isOnTracePage ? 'Trace Timeline' : `Trace ${traceId ?? ''}`)}\n      size={size}\n      depth={depth}\n    >\n      {traceId && (\n        <>\n          {headerSlot}\n          {isOnTracePage ? (\n            <DataPanel.Header>\n              <DataPanel.HeaderContent>\n                <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n                {traceSummary}\n              </DataPanel.HeaderContent>\n              <DataPanel.HeaderActions>\n                {headerActionsSlot}\n                {scoreAction}\n                {traceActions}\n              </DataPanel.HeaderActions>\n            </DataPanel.Header>\n          ) : (\n            <>\n              {/* Navigation row: trace stepping and the trace id on the left; trace actions, then close, on the right. */}\n              <DataPanel.Header>\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.HeaderContent>\n                  <DataPanel.Heading>\n                    <span className=\"sr-only\">Trace</span>\n                    <DataPanel.CopyId id={traceId} maxLength={6} ellipsis={false} icon={<TraceIcon />} />\n                  </DataPanel.Heading>\n                </DataPanel.HeaderContent>\n                <DataPanel.HeaderActions>\n                  {headerActionsSlot}\n                  {scoreAction}\n                  {onSaveAsDatasetItem && (\n                    <Button\n                      size=\"sm\"\n                      tooltip=\"Add the full trace to a dataset\"\n                      onClick={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}\n                    >\n                      <SaveIcon />\n                      Add to dataset\n                    </Button>\n                  )}\n                  {traceActions}\n                  <div aria-hidden=\"true\" className=\"mx-1 h-4 w-px shrink-0 bg-border-strong\" />\n                  <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close trace\" tooltip=\"Close trace\" />\n                </DataPanel.HeaderActions>\n              </DataPanel.Header>\n              {/* Summary row: what ran and how it ended on the left; timing, tokens and cost on the right. */}\n              {!rootSpan && isLoading && (\n                <DataPanel.Header>\n                  <div role=\"status\" aria-label=\"Loading trace summary\" className=\"flex w-full items-center gap-2\">\n                    <Skeleton className=\"h-3 w-32\" />\n                    <Skeleton className=\"h-5 w-16 rounded-full\" />\n                    <Skeleton className=\"ml-auto h-3 w-48\" />\n                  </div>\n                </DataPanel.Header>\n              )}\n              {rootSpan && (\n                <DataPanel.Header>\n                  <DataPanel.Metadata>\n                    <TraceEntityMeta rootSpan={rootSpan} entityHref={entityHref} LinkComponent={LinkComponent} />\n                    <TraceStatusMeta rootSpan={rootSpan} />\n                  </DataPanel.Metadata>\n                  <div className=\"ml-auto flex min-w-0\">\n                    <TraceSummaryDescription\n                      rootSpan={rootSpan}\n                      usage={usage}\n                      entityHref={entityHref}\n                      LinkComponent={LinkComponent}\n                      showEntity={false}\n                      showStatus={false}\n                    />\n                  </div>\n                </DataPanel.Header>\n              )}\n            </>\n          )}\n\n          <TracePanelColumns\n            layoutKey={rootSpan ? (rootSpan.entityType ?? 'unknown') : entityType === null ? 'unknown' : entityType}\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                  // The bar itself is the search field: no pill inside the square panel, the\n                  // bottom rule is its only edge, and keyboard focus lights that rule like a\n                  // field's rim. The view switch stays as flat square icons.\n                  <DataPanel.Header className=\"gap-1 border-b border-surface-rim has-[input:focus-visible]:[--surface-rim:var(--field-rim-focus)]\">\n                    <SearchIcon aria-hidden className=\"ml-1 size-4 shrink-0 text-muted-foreground\" />\n                    <input\n                      type=\"search\"\n                      aria-label=\"Search spans\"\n                      placeholder=\"Search spans\"\n                      value={query}\n                      onChange={event => setQuery(event.target.value)}\n                      className=\"h-full min-w-0 flex-1 bg-transparent px-1.5 text-label text-foreground outline-hidden placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none\"\n                    />\n                    {query && (\n                      <Button\n                        size=\"icon-sm\"\n                        variant=\"ghost\"\n                        aria-label=\"Clear search\"\n                        className=\"rounded-md\"\n                        onClick={() => setQuery('')}\n                      >\n                        <XIcon />\n                      </Button>\n                    )}\n                    <div role=\"group\" aria-label=\"Span view\" className=\"flex shrink-0 items-center gap-0.5\">\n                      {(\n                        [\n                          ['tree', 'Span tree', <ListTreeIcon key=\"tree\" />],\n                          ['timeline', 'Timeline', <ChartGanttIcon key=\"timeline\" />],\n                        ] as const\n                      ).map(([view, label, icon]) => (\n                        <Button\n                          key={view}\n                          size=\"icon-sm\"\n                          variant={spanView === view ? 'subtle' : 'ghost'}\n                          aria-label={label}\n                          aria-pressed={spanView === view}\n                          tooltip={label}\n                          className=\"rounded-md\"\n                          onClick={() => setSpanView(view)}\n                        >\n                          {icon}\n                        </Button>\n                      ))}\n                    </div>\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                  revealSpanId: featuredSpanIds?.at(-1),\n                  isLoading,\n                };\n                const streamingTimings =\n                  rootStreamingTimings && rootSpan && !anchorSpanId\n                    ? { ...rootStreamingTimings, startedAt: rootSpan.startedAt }\n                    : undefined;\n\n                return (\n                  <>\n                    {searchHeader}\n                    <DataPanel.Content>\n                      {!isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && 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                      {rootSpan && rootError && (\n                        <Notice\n                          variant=\"destructive\"\n                          title={rootError.name ?? 'Error'}\n                          action={\n                            <Notice.Button\n                              onClick={() => {\n                                setSelectedSpanId(rootSpan.spanId);\n                                onSpanSelect?.(rootSpan.spanId);\n                              }}\n                            >\n                              View details\n                            </Notice.Button>\n                          }\n                          className=\"mb-4\"\n                        >\n                          <Notice.Message className=\"line-clamp-3\">{rootError.message}</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 ? (\n                        <TraceSpanTimeline {...viewProps} streamingTimings={streamingTimings} />\n                      ) : (\n                        <TraceSpanTree {...viewProps} />\n                      )}\n                      {noSearchResults}\n                    </DataPanel.Content>\n                  </>\n                );\n              })()\n            )}\n          </TracePanelColumns>\n        </>\n      )}\n    </DataPanel>\n  );\n}\n\n/** The error a span recorded, when it has the `{ name?, message }` shape spans store. */\nfunction getSpanError(error: unknown): { name?: string; message: string } | undefined {\n  if (typeof error !== 'object' || error === null || !('message' in error) || typeof error.message !== 'string') {\n    return undefined;\n  }\n  const name = 'name' in error && typeof error.name === 'string' ? error.name : undefined;\n  return { name, message: error.message };\n}\n\n/**\n * Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The side\n * and span columns are resizable (down to a minimum width); the trace column takes the rest.\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n */\n/** Column widths in pixels, persisted per trace entity type. */\ntype TraceColumnWidths = { side?: number; span?: number };\n\nconst pixelWidth = (value: unknown) => (typeof value === 'number' && value > 0 ? value : undefined);\n\n// localStorage access throws when storage is blocked (privacy modes, sandboxed iframes) and stored\n// values may be corrupted; fall back to the default widths instead of crashing the panel.\nfunction readColumnWidths(key: string): TraceColumnWidths {\n  try {\n    const stored: unknown = JSON.parse(localStorage.getItem(key) ?? 'null');\n    if (!stored || typeof stored !== 'object') return {};\n    return {\n      side: pixelWidth((stored as TraceColumnWidths).side),\n      span: pixelWidth((stored as TraceColumnWidths).span),\n    };\n  } catch {\n    return {};\n  }\n}\n\nfunction writeColumnWidths(key: string, widths: TraceColumnWidths) {\n  try {\n    localStorage.setItem(key, JSON.stringify(widths));\n  } catch {\n    // Persisting is best-effort.\n  }\n}\n\nfunction TracePanelColumns({\n  layoutKey,\n  sideColumnSlot,\n  spanPanelSlot,\n  highlightQuery,\n  spanPanelKey,\n  children,\n}: {\n  /**\n   * Root entity type of the trace; column sizes are persisted per value in localStorage.\n   * Undefined while the root span is unknown, in which case nothing is persisted.\n   */\n  layoutKey?: string;\n  /** Resizable column on the left (messages / feedback / scores). */\n  sideColumnSlot?: ReactNode;\n  spanPanelSlot?: ReactNode;\n  highlightQuery: string;\n  /** Identity of the span shown in the panel; changing it re-triggers the match scroll. */\n  spanPanelKey?: string;\n  children: ReactNode;\n}) {\n  // A single hook call on the common ancestor covers both the timeline tree and\n  // the span detail, so span names and payload values highlight together.\n  const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n  // Scoped to the span-panel column only: a match deep in a large payload sits below\n  // the fold, so the first painted match is brought into view when the panel opens.\n  // The timeline column must never be scrolled by this.\n  const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n  // The side and span columns are sized in pixels: they keep their width when the drawer resizes\n  // (it widens when a span opens) and when the span column comes and goes; only the trace column in\n  // the middle absorbs the change. The library lays panels out in percentages, so the pixel widths\n  // are owned here.\n  const groupRef = useGroupRef();\n  const columnsRef = useRef<HTMLDivElement>(null);\n  const storageKey = layoutKey ? `mastra:trace-panel-widths:${layoutKey}` : undefined;\n  const widths = useRef<{ key?: string; value: TraceColumnWidths }>({ value: {} });\n  if (widths.current.key !== storageKey) {\n    widths.current = { key: storageKey, value: storageKey ? readColumnWidths(storageKey) : {} };\n  }\n  // Only agent traces have messages worth reading side by side with the spans; for every other\n  // entity the side column starts narrow so the span tree gets the room.\n  const sideWidth = () => widths.current.value.side ?? (layoutKey === 'agent' ? 480 : 320);\n  const spanWidth = () => widths.current.value.span ?? 480;\n\n  const panelElements = () =>\n    Array.from(columnsRef.current?.querySelectorAll<HTMLElement>(':scope > [data-panel]') ?? []);\n\n  // Only a resize the user makes is remembered: layout changes from the drawer resizing or a\n  // column mounting are derived from the stored widths and must not drift them.\n  const userResizing = useRef(false);\n  const markUserResize = (event: { target: EventTarget }) => {\n    if (event.target instanceof Element && event.target.closest('[data-separator]')) userResizing.current = true;\n  };\n  const persistWidths = (layout: Layout) => {\n    if (!userResizing.current) return;\n    userResizing.current = false;\n    const width = (id: string) =>\n      id in layout\n        ? pixelWidth(Math.round(panelElements().find(panel => panel.id === id)?.offsetWidth ?? 0))\n        : undefined;\n    widths.current.value = {\n      side: width('trace-side') ?? widths.current.value.side,\n      span: width('trace-span') ?? widths.current.value.span,\n    };\n    if (storageKey) writeColumnWidths(storageKey, widths.current.value);\n  };\n\n  // The library re-lays panels out on its own — when the drawer resizes, when a column mounts or\n  // unmounts — so every layout it reports is brought back to the pixel widths, unless the user is\n  // dragging a separator. The layout it settles on after clamping to min sizes is left alone.\n  const settledLayout = useRef<Layout | undefined>(undefined);\n  const holdPixelWidths = (layout: Layout) => {\n    if (userResizing.current) return;\n    const group = groupRef.current;\n    const ids = Object.keys(layout);\n    // The library sizes panels against their summed width, separators excluded.\n    const total = panelElements()\n      .filter(panel => ids.includes(panel.id))\n      .reduce((sum, panel) => sum + panel.offsetWidth, 0);\n    if (!group || total === 0 || !ids.includes('trace-main')) return;\n    const side = ids.includes('trace-side') ? (sideWidth() / total) * 100 : 0;\n    const span = ids.includes('trace-span') ? (spanWidth() / total) * 100 : 0;\n    const target: Layout = { 'trace-main': 100 - side - span };\n    if (side) target['trace-side'] = side;\n    if (span) target['trace-span'] = span;\n    const tolerance = (0.5 / total) * 100;\n    const matches = (a: Layout, b?: Layout) =>\n      !!b && ids.every(id => Math.abs((a[id] ?? 0) - (b[id] ?? Infinity)) < tolerance);\n    if (matches(layout, target) || matches(layout, settledLayout.current)) return;\n    queueMicrotask(() => {\n      settledLayout.current = group.setLayout(target);\n    });\n  };\n\n  return (\n    <div\n      ref={highlightRef}\n      data-trace-columns\n      className=\"flex min-h-0 flex-1\"\n      onPointerDownCapture={markUserResize}\n      onKeyDownCapture={markUserResize}\n    >\n      {/* Plain Group, not PanelGroup: its flex-grow transition would lag behind the drawer\n          resizing and make the pixel-sized columns visibly stretch. */}\n      <Group\n        // Default sizes are only read on mount: remount once the entity type is known.\n        key={layoutKey ?? 'unknown'}\n        groupRef={groupRef}\n        elementRef={columnsRef}\n        orientation=\"horizontal\"\n        className=\"min-h-0 flex-1\"\n        onLayoutChange={holdPixelWidths}\n        onLayoutChanged={persistWidths}\n      >\n        {sideColumnSlot && (\n          <>\n            <Panel id=\"trace-side\" minSize={280} defaultSize={sideWidth()} groupResizeBehavior=\"preserve-pixel-size\">\n              <div className=\"flex h-full min-h-0 flex-col border-r border-surface-rim\">{sideColumnSlot}</div>\n            </Panel>\n            <PanelSeparator variant=\"pill\" />\n          </>\n        )}\n        {/* 384px: the timeline grid's own minimum (two 12rem columns), so its end never clips. */}\n        <Panel id=\"trace-main\" minSize={384} className=\"flex min-h-0 min-w-0 flex-col\">\n          {children}\n        </Panel>\n        {spanPanelSlot && (\n          <>\n            <PanelSeparator variant=\"pill\" />\n            <Panel\n              id=\"trace-span\"\n              minSize={384}\n              maxSize=\"50%\"\n              defaultSize={spanWidth()}\n              groupResizeBehavior=\"preserve-pixel-size\"\n            >\n              <div\n                ref={scrollToMatchRef}\n                data-highlight\n                className=\"flex h-full min-h-0 animate-in flex-col border-l border-surface-rim duration-300 fade-in-0\"\n              >\n                {spanPanelSlot}\n              </div>\n            </Panel>\n          </>\n        )}\n      </Group>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"trace-data-panel-view.cjs.js","names":["useMemo","_Fragment","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","useState","useDownloadTraceJson","useTraceSearch","formatHierarchicalSpans","getAllSpanIds","TraceSummaryDescription","Button","Link2Icon","Loader2Icon","DownloadIcon","CircleGaugeIcon","DataPanel","Skeleton","Tabs","TabList","Tab","TraceIcon","SaveIcon","TraceEntityMeta","TraceStatusMeta","SearchIcon","XIcon","ListTreeIcon","ChartGanttIcon","Notice","TraceSpanTimeline","TraceSpanTree","useTextHighlight","useScrollToFirstHighlight","useGroupRef","useRef","Group","Panel","PanelSeparator"],"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  SaveIcon,\n  SearchIcon,\n  XIcon,\n} from 'lucide-react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { Group, Panel, useGroupRef } from 'react-resizable-panels';\nimport type { Layout } from 'react-resizable-panels';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { LightSpanRecord } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport type { TraceStreamingTimings } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceEntityMeta, TraceStatusMeta, TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { TraceIcon } from '@/ds/icons/TraceIcon';\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 { PanelSeparator } from '@/lib/resize/separator';\n\nexport type TraceDataPanelPlacement = 'traces-list' | 'trace-page';\n\nexport type TraceSpanView = 'tree' | 'timeline';\n\nexport type TraceSideView = 'messages' | 'feedback' | 'scores';\n\nexport interface TraceDataPanelViewProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: (LightSpanRecord & { signalLabel?: string })[] | 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  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  /** Integration-specific actions shown alongside the standard trace controls. */\n  headerActionsSlot?: 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   * Time to first chunk and first token of the trace root, marked on the timeline. Left off when\n   * `anchorSpanId` shows a branch, whose spans don't count from the root.\n   */\n  rootStreamingTimings?: Omit<TraceStreamingTimings, 'startedAt'>;\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   * Root entity type when the caller knows it before the spans load (e.g. from the listed row).\n   * Sizes the columns from the start, so they don't shift once the trace arrives. `null` is a\n   * trace known to have no entity type.\n   */\n  entityType?: string | null;\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 in the side column and a \"Scores\" readout in the\n   * summary row opens the same slot in a popover.\n   */\n  scoresTabSlot?: (args: { traceId: string; rootSpanId: string | undefined }) => ReactNode;\n  /** Optional count rendered after the \"Scores\" labels, e.g. `Scores (3)`. */\n  scoresTabBadge?: ReactNode;\n  /**\n   * When provided, a \"Feedback\" tab appears in the side column and a \"Feedback\" readout in\n   * the summary row opens the same slot in a popover. Trace feedback is not scoped to a\n   * span — the span panel owns that.\n   */\n  feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n  /** Optional count rendered after the \"Feedback\" labels, e.g. `Feedback (3)`. */\n  feedbackTabBadge?: ReactNode;\n  /** Span ids to feature in the timeline; every other span is faded. */\n  featuredSpanIds?: string[];\n  /**\n   * The \"Messages\" view of the side column next to the span tree (typically the\n   * trace as one reconstructed agent turn). Rendered without content padding.\n   */\n  messagesPanelSlot?: ReactNode;\n  /**\n   * Actions rendered at the end of the side column's tab row (e.g. \"Open full thread\").\n   * `compact` is true when the side column is narrow and controls collapse to icons.\n   */\n  sideHeaderActions?: (options: { compact: boolean }) => ReactNode;\n  /** Controlled span view (tree or timeline); falls back to local state starting on the tree. */\n  spanView?: TraceSpanView;\n  onSpanViewChange?: (view: TraceSpanView) => void;\n  /** Controlled side column view; falls back to the first available view. */\n  sideView?: TraceSideView;\n  onSideViewChange?: (view: TraceSideView) => void;\n  /**\n   * Rendered as a column to the right of the timeline inside the same card;\n   * typically the span detail.\n   */\n  spanPanelSlot?: ReactNode;\n}\n\nexport function TraceDataPanelView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  onEvaluateTrace,\n  onSaveAsDatasetItem,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  size = 'wide',\n  depth,\n  headerSlot,\n  headerActionsSlot,\n  title,\n  placement,\n  LinkComponent,\n  traceHref,\n  entityHref,\n  usage,\n  rootStreamingTimings,\n  anchorSpanId,\n  entityType,\n  showUnavailableFeaturesMsg = true,\n  scoresTabSlot,\n  scoresTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  featuredSpanIds,\n  messagesPanelSlot,\n  sideHeaderActions,\n  sideView: controlledSideView,\n  onSideViewChange,\n  spanView: controlledSpanView,\n  onSpanViewChange,\n  spanPanelSlot,\n}: TraceDataPanelViewProps) {\n  const isOnTracePage = placement === 'trace-page';\n\n  // The side column next to the span tree hosts Messages / Feedback / Scores;\n  // which one is shown is purely a local viewing choice.\n  const sideViews = useMemo(() => {\n    const views: Array<{ value: TraceSideView; name: string; label: ReactNode }> = [];\n    if (messagesPanelSlot) {\n      views.push({\n        value: 'messages',\n        name: 'Messages',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareTextIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">Messages</span>\n          </>\n        ),\n      });\n    }\n    if (feedbackTabSlot) {\n      views.push({\n        value: 'feedback',\n        name: 'Feedback',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareReplyIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">\n              Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n            </span>\n          </>\n        ),\n      });\n    }\n    if (scoresTabSlot) {\n      views.push({\n        value: 'scores',\n        name: 'Scores',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <ScorersIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}</span>\n          </>\n        ),\n      });\n    }\n    return views;\n  }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n  const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n  // Mirrors the side column's `@max-[501px]` container query: the layout collapses in CSS, but\n  // tooltips render in a portal outside the container, so they need the width in JS.\n  const [sideColumnElement, setSideColumnElement] = useState<HTMLDivElement | null>(null);\n  const [compactSide, setCompactSide] = useState(false);\n  useEffect(() => {\n    if (!sideColumnElement || !('ResizeObserver' in globalThis)) return;\n    const observer = new ResizeObserver(() => setCompactSide(sideColumnElement.clientWidth <= 500));\n    observer.observe(sideColumnElement);\n    return () => observer.disconnect();\n  }, [sideColumnElement]);\n  const chosenSideView = controlledSideView ?? uncontrolledSideView;\n  const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n  const handleSideViewChange = (view: TraceSideView) => {\n    setUncontrolledSideView(view);\n    onSideViewChange?.(view);\n  };\n\n  const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n  const spanView = controlledSpanView ?? uncontrolledSpanView;\n  const setSpanView = (view: TraceSpanView) => {\n    setUncontrolledSpanView(view);\n    onSpanViewChange?.(view);\n  };\n\n  const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n  const [selectedSpanId, setSelectedSpanId] = useState<string | undefined>(initialSpanId ?? undefined);\n\n  // Sync selected span when initialSpanId or trace data changes\n  useEffect(() => {\n    // No span requested: clear immediately.\n    if (!initialSpanId) {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n      return;\n    }\n    // Span requested: wait for trace data before deciding so an in-flight\n    // fetch doesn't wipe a URL-provided selection. Callers that default their\n    // spans to `[]` while loading only say so through `isLoading`.\n    if (isLoading || !spans) return;\n\n    const found = spans.find(s => s.spanId === initialSpanId);\n    if (found) {\n      setSelectedSpanId(initialSpanId);\n      onSpanSelect?.(initialSpanId);\n    } else {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpanId, spans, isLoading]);\n\n  const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n  const hierarchicalSpans = useMemo(\n    () =>\n      formatHierarchicalSpans(\n        // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n        // rendered several components deeper.\n        results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n        anchorSpanId,\n      ),\n    [results, payloadOnlyMatchIds, anchorSpanId],\n  );\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const rootSpan = useMemo(\n    () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n    [spans, anchorSpanId],\n  );\n  const rootError = getSpanError(rootSpan?.error);\n  const handleSpanClick = (id: string) => {\n    const newId = selectedSpanId === id ? undefined : id;\n    setSelectedSpanId(newId);\n    onSpanSelect?.(newId);\n  };\n\n  const traceSummary = rootSpan && (\n    <TraceSummaryDescription rootSpan={rootSpan} usage={usage} entityHref={entityHref} LinkComponent={LinkComponent} />\n  );\n\n  const traceActions = traceId && (\n    <>\n      {!isOnTracePage && LinkComponent && traceHref && (\n        <Button size=\"icon-sm\" variant=\"ghost\" tooltip=\"Open trace page\" render={<LinkComponent href={traceHref} />}>\n          <Link2Icon />\n        </Button>\n      )}\n      <Button\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        tooltip=\"Download trace JSON\"\n        disabled={isDownloadingTrace}\n        onClick={() => downloadTraceJson(traceId)}\n      >\n        {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n      </Button>\n    </>\n  );\n\n  const scoreAction = onEvaluateTrace && (\n    <Button variant=\"primary\" size=\"sm\" onClick={onEvaluateTrace} disabled={!rootSpan}>\n      <CircleGaugeIcon />\n      Score trace\n    </Button>\n  );\n\n  const sideColumn =\n    traceId && sideView ? (\n      <div\n        ref={setSideColumnElement}\n        data-trace-side-column\n        className=\"@container flex h-full min-h-0 min-w-0 flex-col overflow-hidden\"\n      >\n        {/* Whether the Messages tab exists depends on the spans, so the tabs wait for them;\n            otherwise the column flickers Feedback → Messages as the first tab changes. */}\n        {isLoading ? (\n          <DataPanel.Header className=\"border-b border-surface-rim\">\n            <div aria-hidden className=\"flex h-control-sm items-center gap-2\">\n              <Skeleton className=\"h-5 w-24 rounded-full\" />\n              <Skeleton className=\"h-5 w-20 rounded-full\" />\n            </div>\n          </DataPanel.Header>\n        ) : (\n          <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n            {/* `flex-nowrap` + a shrinkable tab column: the tab list's scroll wrapper is full-width,\n                so in a wrapping row it would push the actions onto a second line. */}\n            <DataPanel.Header className=\"flex-nowrap border-b border-surface-rim\">\n              <div className=\"min-w-0 flex-1\">\n                <TabList variant=\"pill-ghost\" size=\"sm\">\n                  {sideViews.map(view => (\n                    <Tab key={view.value} value={view.value} tooltip={compactSide ? view.name : undefined}>\n                      {view.label}\n                    </Tab>\n                  ))}\n                </TabList>\n              </div>\n              {sideHeaderActions && (\n                <div className=\"flex shrink-0 items-center whitespace-nowrap\">\n                  {sideHeaderActions({ compact: compactSide })}\n                </div>\n              )}\n            </DataPanel.Header>\n          </Tabs>\n        )}\n        {!isLoading && sideView === 'messages' && (\n          <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>\n        )}\n        {!isLoading && sideView === 'feedback' && (\n          <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>\n        )}\n        {!isLoading && sideView === 'scores' && (\n          <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n        )}\n      </div>\n    ) : null;\n\n  return (\n    <DataPanel\n      open={!!traceId}\n      onClose={onClose}\n      title={title ?? (isOnTracePage ? 'Trace Timeline' : `Trace ${traceId ?? ''}`)}\n      size={size}\n      depth={depth}\n    >\n      {traceId && (\n        <>\n          {headerSlot}\n          {isOnTracePage ? (\n            <DataPanel.Header>\n              <DataPanel.HeaderContent>\n                <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n                {traceSummary}\n              </DataPanel.HeaderContent>\n              <DataPanel.HeaderActions>\n                {headerActionsSlot}\n                {scoreAction}\n                {traceActions}\n              </DataPanel.HeaderActions>\n            </DataPanel.Header>\n          ) : (\n            <>\n              {/* Navigation row: trace stepping and the trace id on the left; trace actions, then close, on the right. */}\n              <DataPanel.Header>\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.HeaderContent>\n                  <DataPanel.Heading>\n                    <span className=\"sr-only\">Trace</span>\n                    <DataPanel.CopyId id={traceId} maxLength={6} ellipsis={false} icon={<TraceIcon />} />\n                  </DataPanel.Heading>\n                </DataPanel.HeaderContent>\n                <DataPanel.HeaderActions>\n                  {headerActionsSlot}\n                  {scoreAction}\n                  {onSaveAsDatasetItem && (\n                    <Button\n                      size=\"sm\"\n                      tooltip=\"Add the full trace to a dataset\"\n                      onClick={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}\n                    >\n                      <SaveIcon />\n                      Add to dataset\n                    </Button>\n                  )}\n                  {traceActions}\n                  <div aria-hidden=\"true\" className=\"mx-1 h-4 w-px shrink-0 bg-border-strong\" />\n                  <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close trace\" tooltip=\"Close trace\" />\n                </DataPanel.HeaderActions>\n              </DataPanel.Header>\n              {/* Summary row: what ran and how it ended on the left; timing, tokens and cost on the right. */}\n              {!rootSpan && isLoading && (\n                <DataPanel.Header>\n                  <div role=\"status\" aria-label=\"Loading trace summary\" className=\"flex w-full items-center gap-2\">\n                    <Skeleton className=\"h-3 w-32\" />\n                    <Skeleton className=\"h-5 w-16 rounded-full\" />\n                    <Skeleton className=\"ml-auto h-3 w-48\" />\n                  </div>\n                </DataPanel.Header>\n              )}\n              {rootSpan && (\n                <DataPanel.Header>\n                  <DataPanel.Metadata>\n                    <TraceEntityMeta rootSpan={rootSpan} entityHref={entityHref} LinkComponent={LinkComponent} />\n                    <TraceStatusMeta rootSpan={rootSpan} />\n                  </DataPanel.Metadata>\n                  <div className=\"ml-auto flex min-w-0\">\n                    <TraceSummaryDescription\n                      rootSpan={rootSpan}\n                      usage={usage}\n                      entityHref={entityHref}\n                      LinkComponent={LinkComponent}\n                      showEntity={false}\n                      showStatus={false}\n                    />\n                  </div>\n                </DataPanel.Header>\n              )}\n            </>\n          )}\n\n          <TracePanelColumns\n            layoutKey={rootSpan ? (rootSpan.entityType ?? 'unknown') : entityType === null ? 'unknown' : entityType}\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                  // The bar itself is the search field: no pill inside the square panel, the\n                  // bottom rule is its only edge, and keyboard focus lights that rule like a\n                  // field's rim. The view switch stays as flat square icons.\n                  <DataPanel.Header className=\"gap-1 border-b border-surface-rim has-[input:focus-visible]:[--surface-rim:var(--field-rim-focus)]\">\n                    <SearchIcon aria-hidden className=\"ml-1 size-4 shrink-0 text-muted-foreground\" />\n                    <input\n                      type=\"search\"\n                      aria-label=\"Search spans\"\n                      placeholder=\"Search spans\"\n                      value={query}\n                      onChange={event => setQuery(event.target.value)}\n                      className=\"h-full min-w-0 flex-1 bg-transparent px-1.5 text-label text-foreground outline-hidden placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none\"\n                    />\n                    {query && (\n                      <Button\n                        size=\"icon-sm\"\n                        variant=\"ghost\"\n                        aria-label=\"Clear search\"\n                        className=\"rounded-md\"\n                        onClick={() => setQuery('')}\n                      >\n                        <XIcon />\n                      </Button>\n                    )}\n                    <div role=\"group\" aria-label=\"Span view\" className=\"flex shrink-0 items-center gap-0.5\">\n                      {(\n                        [\n                          ['tree', 'Span tree', <ListTreeIcon key=\"tree\" />],\n                          ['timeline', 'Timeline', <ChartGanttIcon key=\"timeline\" />],\n                        ] as const\n                      ).map(([view, label, icon]) => (\n                        <Button\n                          key={view}\n                          size=\"icon-sm\"\n                          variant={spanView === view ? 'subtle' : 'ghost'}\n                          aria-label={label}\n                          aria-pressed={spanView === view}\n                          tooltip={label}\n                          className=\"rounded-md\"\n                          onClick={() => setSpanView(view)}\n                        >\n                          {icon}\n                        </Button>\n                      ))}\n                    </div>\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                  revealSpanId: featuredSpanIds?.at(-1),\n                  isLoading,\n                };\n                const streamingTimings =\n                  rootStreamingTimings && rootSpan && !anchorSpanId\n                    ? { ...rootStreamingTimings, startedAt: rootSpan.startedAt }\n                    : undefined;\n\n                return (\n                  <>\n                    {searchHeader}\n                    <DataPanel.Content>\n                      {!isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && 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                      {rootSpan && rootError && (\n                        <Notice\n                          variant=\"destructive\"\n                          title={rootError.name ?? 'Error'}\n                          action={\n                            <Notice.Button\n                              onClick={() => {\n                                setSelectedSpanId(rootSpan.spanId);\n                                onSpanSelect?.(rootSpan.spanId);\n                              }}\n                            >\n                              View details\n                            </Notice.Button>\n                          }\n                          className=\"mb-4\"\n                        >\n                          <Notice.Message className=\"line-clamp-3\">{rootError.message}</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 ? (\n                        <TraceSpanTimeline {...viewProps} streamingTimings={streamingTimings} />\n                      ) : (\n                        <TraceSpanTree {...viewProps} />\n                      )}\n                      {noSearchResults}\n                    </DataPanel.Content>\n                  </>\n                );\n              })()\n            )}\n          </TracePanelColumns>\n        </>\n      )}\n    </DataPanel>\n  );\n}\n\n/** The error a span recorded, when it has the `{ name?, message }` shape spans store. */\nfunction getSpanError(error: unknown): { name?: string; message: string } | undefined {\n  if (typeof error !== 'object' || error === null || !('message' in error) || typeof error.message !== 'string') {\n    return undefined;\n  }\n  const name = 'name' in error && typeof error.name === 'string' ? error.name : undefined;\n  return { name, message: error.message };\n}\n\n/**\n * Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The side\n * and span columns are resizable (down to a minimum width); the trace column takes the rest.\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n */\n/** Column widths in pixels, persisted per trace entity type. */\ntype TraceColumnWidths = { side?: number; span?: number };\n\nconst pixelWidth = (value: unknown) => (typeof value === 'number' && value > 0 ? value : undefined);\n\n// localStorage access throws when storage is blocked (privacy modes, sandboxed iframes) and stored\n// values may be corrupted; fall back to the default widths instead of crashing the panel.\nfunction readColumnWidths(key: string): TraceColumnWidths {\n  try {\n    const stored: unknown = JSON.parse(localStorage.getItem(key) ?? 'null');\n    if (!stored || typeof stored !== 'object') return {};\n    return {\n      side: pixelWidth((stored as TraceColumnWidths).side),\n      span: pixelWidth((stored as TraceColumnWidths).span),\n    };\n  } catch {\n    return {};\n  }\n}\n\nfunction writeColumnWidths(key: string, widths: TraceColumnWidths) {\n  try {\n    localStorage.setItem(key, JSON.stringify(widths));\n  } catch {\n    // Persisting is best-effort.\n  }\n}\n\nfunction TracePanelColumns({\n  layoutKey,\n  sideColumnSlot,\n  spanPanelSlot,\n  highlightQuery,\n  spanPanelKey,\n  children,\n}: {\n  /**\n   * Root entity type of the trace; column sizes are persisted per value in localStorage.\n   * Undefined while the root span is unknown, in which case nothing is persisted.\n   */\n  layoutKey?: string;\n  /** Resizable column on the left (messages / feedback / scores). */\n  sideColumnSlot?: ReactNode;\n  spanPanelSlot?: ReactNode;\n  highlightQuery: string;\n  /** Identity of the span shown in the panel; changing it re-triggers the match scroll. */\n  spanPanelKey?: string;\n  children: ReactNode;\n}) {\n  // A single hook call on the common ancestor covers both the timeline tree and\n  // the span detail, so span names and payload values highlight together.\n  const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n  // Scoped to the span-panel column only: a match deep in a large payload sits below\n  // the fold, so the first painted match is brought into view when the panel opens.\n  // The timeline column must never be scrolled by this.\n  const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n  // The side and span columns are sized in pixels: they keep their width when the drawer resizes\n  // (it widens when a span opens) and when the span column comes and goes; only the trace column in\n  // the middle absorbs the change. The library lays panels out in percentages, so the pixel widths\n  // are owned here.\n  const groupRef = useGroupRef();\n  const columnsRef = useRef<HTMLDivElement>(null);\n  const storageKey = layoutKey ? `mastra:trace-panel-widths:${layoutKey}` : undefined;\n  const widths = useRef<{ key?: string; value: TraceColumnWidths }>({ value: {} });\n  if (widths.current.key !== storageKey) {\n    widths.current = { key: storageKey, value: storageKey ? readColumnWidths(storageKey) : {} };\n  }\n  // Only agent traces have messages worth reading side by side with the spans; for every other\n  // entity the side column starts narrow so the span tree gets the room.\n  const sideWidth = () => widths.current.value.side ?? (layoutKey === 'agent' ? 480 : 320);\n  const spanWidth = () => widths.current.value.span ?? 480;\n\n  const panelElements = () =>\n    Array.from(columnsRef.current?.querySelectorAll<HTMLElement>(':scope > [data-panel]') ?? []);\n\n  // Only a resize the user makes is remembered: layout changes from the drawer resizing or a\n  // column mounting are derived from the stored widths and must not drift them.\n  const userResizing = useRef(false);\n  const markUserResize = (event: { target: EventTarget }) => {\n    if (event.target instanceof Element && event.target.closest('[data-separator]')) userResizing.current = true;\n  };\n  const persistWidths = (layout: Layout) => {\n    if (!userResizing.current) return;\n    userResizing.current = false;\n    const width = (id: string) =>\n      id in layout\n        ? pixelWidth(Math.round(panelElements().find(panel => panel.id === id)?.offsetWidth ?? 0))\n        : undefined;\n    widths.current.value = {\n      side: width('trace-side') ?? widths.current.value.side,\n      span: width('trace-span') ?? widths.current.value.span,\n    };\n    if (storageKey) writeColumnWidths(storageKey, widths.current.value);\n  };\n\n  // The library re-lays panels out on its own — when the drawer resizes, when a column mounts or\n  // unmounts — so every layout it reports is brought back to the pixel widths, unless the user is\n  // dragging a separator. The layout it settles on after clamping to min sizes is left alone,\n  // including the one it reports from inside our own setLayout: when the columns can't fit, rounding\n  // makes each clamped layout differ from the last, and answering it would re-lay out forever.\n  const settledLayout = useRef<Layout | undefined>(undefined);\n  const applyingLayout = useRef(false);\n  const holdPixelWidths = (layout: Layout) => {\n    if (userResizing.current || applyingLayout.current) return;\n    const group = groupRef.current;\n    const ids = Object.keys(layout);\n    // The library sizes panels against their summed width, separators excluded.\n    const total = panelElements()\n      .filter(panel => ids.includes(panel.id))\n      .reduce((sum, panel) => sum + panel.offsetWidth, 0);\n    if (!group || total === 0 || !ids.includes('trace-main')) return;\n    const side = ids.includes('trace-side') ? (sideWidth() / total) * 100 : 0;\n    const span = ids.includes('trace-span') ? (spanWidth() / total) * 100 : 0;\n    const target: Layout = { 'trace-main': 100 - side - span };\n    if (side) target['trace-side'] = side;\n    if (span) target['trace-span'] = span;\n    const tolerance = (0.5 / total) * 100;\n    const matches = (a: Layout, b?: Layout) =>\n      !!b && ids.every(id => Math.abs((a[id] ?? 0) - (b[id] ?? Infinity)) < tolerance);\n    if (matches(layout, target) || matches(layout, settledLayout.current)) return;\n    queueMicrotask(() => {\n      applyingLayout.current = true;\n      try {\n        settledLayout.current = group.setLayout(target);\n      } finally {\n        applyingLayout.current = false;\n      }\n    });\n  };\n\n  return (\n    <div\n      ref={highlightRef}\n      data-trace-columns\n      className=\"flex min-h-0 flex-1\"\n      onPointerDownCapture={markUserResize}\n      onKeyDownCapture={markUserResize}\n    >\n      {/* Plain Group, not PanelGroup: its flex-grow transition would lag behind the drawer\n          resizing and make the pixel-sized columns visibly stretch. */}\n      <Group\n        // Default sizes are only read on mount: remount once the entity type is known.\n        key={layoutKey ?? 'unknown'}\n        groupRef={groupRef}\n        elementRef={columnsRef}\n        orientation=\"horizontal\"\n        className=\"min-h-0 flex-1\"\n        onLayoutChange={holdPixelWidths}\n        onLayoutChanged={persistWidths}\n      >\n        {sideColumnSlot && (\n          <>\n            <Panel id=\"trace-side\" minSize={280} defaultSize={sideWidth()} groupResizeBehavior=\"preserve-pixel-size\">\n              <div className=\"flex h-full min-h-0 flex-col border-r border-surface-rim\">{sideColumnSlot}</div>\n            </Panel>\n            <PanelSeparator variant=\"pill\" />\n          </>\n        )}\n        {/* 384px: the timeline grid's own minimum (two 12rem columns), so its end never clips. */}\n        <Panel id=\"trace-main\" minSize={384} className=\"flex min-h-0 min-w-0 flex-col\">\n          {children}\n        </Panel>\n        {spanPanelSlot && (\n          <>\n            <PanelSeparator variant=\"pill\" />\n            <Panel\n              id=\"trace-span\"\n              minSize={384}\n              maxSize=\"50%\"\n              defaultSize={spanWidth()}\n              groupResizeBehavior=\"preserve-pixel-size\"\n            >\n              <div\n                ref={scrollToMatchRef}\n                data-highlight\n                className=\"flex h-full min-h-0 animate-in flex-col border-l border-surface-rim duration-300 fade-in-0\"\n              >\n                {spanPanelSlot}\n              </div>\n            </Panel>\n          </>\n        )}\n      </Group>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -448,8 +448,9 @@ function TracePanelColumns({ layoutKey, sideColumnSlot, spanPanelSlot, highlight
 		if (storageKey) writeColumnWidths(storageKey, widths.current.value);
 	};
 	const settledLayout = useRef(void 0);
+	const applyingLayout = useRef(false);
 	const holdPixelWidths = (layout) => {
-		if (userResizing.current) return;
+		if (userResizing.current || applyingLayout.current) return;
 		const group = groupRef.current;
 		const ids = Object.keys(layout);
 		const total = panelElements().filter((panel) => ids.includes(panel.id)).reduce((sum, panel) => sum + panel.offsetWidth, 0);
@@ -463,7 +464,12 @@ function TracePanelColumns({ layoutKey, sideColumnSlot, spanPanelSlot, highlight
 		const matches = (a, b) => !!b && ids.every((id) => Math.abs((a[id] ?? 0) - (b[id] ?? Infinity)) < tolerance);
 		if (matches(layout, target) || matches(layout, settledLayout.current)) return;
 		queueMicrotask(() => {
-			settledLayout.current = group.setLayout(target);
+			applyingLayout.current = true;
+			try {
+				settledLayout.current = group.setLayout(target);
+			} finally {
+				applyingLayout.current = false;
+			}
 		});
 	};
 	return /* @__PURE__ */ jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"trace-data-panel-view.es.js","names":["_Fragment"],"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  SaveIcon,\n  SearchIcon,\n  XIcon,\n} from 'lucide-react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { Group, Panel, useGroupRef } from 'react-resizable-panels';\nimport type { Layout } from 'react-resizable-panels';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { LightSpanRecord } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport type { TraceStreamingTimings } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceEntityMeta, TraceStatusMeta, TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { TraceIcon } from '@/ds/icons/TraceIcon';\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 { PanelSeparator } from '@/lib/resize/separator';\n\nexport type TraceDataPanelPlacement = 'traces-list' | 'trace-page';\n\nexport type TraceSpanView = 'tree' | 'timeline';\n\nexport type TraceSideView = 'messages' | 'feedback' | 'scores';\n\nexport interface TraceDataPanelViewProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: (LightSpanRecord & { signalLabel?: string })[] | 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  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  /** Integration-specific actions shown alongside the standard trace controls. */\n  headerActionsSlot?: 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   * Time to first chunk and first token of the trace root, marked on the timeline. Left off when\n   * `anchorSpanId` shows a branch, whose spans don't count from the root.\n   */\n  rootStreamingTimings?: Omit<TraceStreamingTimings, 'startedAt'>;\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   * Root entity type when the caller knows it before the spans load (e.g. from the listed row).\n   * Sizes the columns from the start, so they don't shift once the trace arrives. `null` is a\n   * trace known to have no entity type.\n   */\n  entityType?: string | null;\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 in the side column and a \"Scores\" readout in the\n   * summary row opens the same slot in a popover.\n   */\n  scoresTabSlot?: (args: { traceId: string; rootSpanId: string | undefined }) => ReactNode;\n  /** Optional count rendered after the \"Scores\" labels, e.g. `Scores (3)`. */\n  scoresTabBadge?: ReactNode;\n  /**\n   * When provided, a \"Feedback\" tab appears in the side column and a \"Feedback\" readout in\n   * the summary row opens the same slot in a popover. Trace feedback is not scoped to a\n   * span — the span panel owns that.\n   */\n  feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n  /** Optional count rendered after the \"Feedback\" labels, e.g. `Feedback (3)`. */\n  feedbackTabBadge?: ReactNode;\n  /** Span ids to feature in the timeline; every other span is faded. */\n  featuredSpanIds?: string[];\n  /**\n   * The \"Messages\" view of the side column next to the span tree (typically the\n   * trace as one reconstructed agent turn). Rendered without content padding.\n   */\n  messagesPanelSlot?: ReactNode;\n  /**\n   * Actions rendered at the end of the side column's tab row (e.g. \"Open full thread\").\n   * `compact` is true when the side column is narrow and controls collapse to icons.\n   */\n  sideHeaderActions?: (options: { compact: boolean }) => ReactNode;\n  /** Controlled span view (tree or timeline); falls back to local state starting on the tree. */\n  spanView?: TraceSpanView;\n  onSpanViewChange?: (view: TraceSpanView) => void;\n  /** Controlled side column view; falls back to the first available view. */\n  sideView?: TraceSideView;\n  onSideViewChange?: (view: TraceSideView) => void;\n  /**\n   * Rendered as a column to the right of the timeline inside the same card;\n   * typically the span detail.\n   */\n  spanPanelSlot?: ReactNode;\n}\n\nexport function TraceDataPanelView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  onEvaluateTrace,\n  onSaveAsDatasetItem,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  size = 'wide',\n  depth,\n  headerSlot,\n  headerActionsSlot,\n  title,\n  placement,\n  LinkComponent,\n  traceHref,\n  entityHref,\n  usage,\n  rootStreamingTimings,\n  anchorSpanId,\n  entityType,\n  showUnavailableFeaturesMsg = true,\n  scoresTabSlot,\n  scoresTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  featuredSpanIds,\n  messagesPanelSlot,\n  sideHeaderActions,\n  sideView: controlledSideView,\n  onSideViewChange,\n  spanView: controlledSpanView,\n  onSpanViewChange,\n  spanPanelSlot,\n}: TraceDataPanelViewProps) {\n  const isOnTracePage = placement === 'trace-page';\n\n  // The side column next to the span tree hosts Messages / Feedback / Scores;\n  // which one is shown is purely a local viewing choice.\n  const sideViews = useMemo(() => {\n    const views: Array<{ value: TraceSideView; name: string; label: ReactNode }> = [];\n    if (messagesPanelSlot) {\n      views.push({\n        value: 'messages',\n        name: 'Messages',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareTextIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">Messages</span>\n          </>\n        ),\n      });\n    }\n    if (feedbackTabSlot) {\n      views.push({\n        value: 'feedback',\n        name: 'Feedback',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareReplyIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">\n              Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n            </span>\n          </>\n        ),\n      });\n    }\n    if (scoresTabSlot) {\n      views.push({\n        value: 'scores',\n        name: 'Scores',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <ScorersIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}</span>\n          </>\n        ),\n      });\n    }\n    return views;\n  }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n  const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n  // Mirrors the side column's `@max-[501px]` container query: the layout collapses in CSS, but\n  // tooltips render in a portal outside the container, so they need the width in JS.\n  const [sideColumnElement, setSideColumnElement] = useState<HTMLDivElement | null>(null);\n  const [compactSide, setCompactSide] = useState(false);\n  useEffect(() => {\n    if (!sideColumnElement || !('ResizeObserver' in globalThis)) return;\n    const observer = new ResizeObserver(() => setCompactSide(sideColumnElement.clientWidth <= 500));\n    observer.observe(sideColumnElement);\n    return () => observer.disconnect();\n  }, [sideColumnElement]);\n  const chosenSideView = controlledSideView ?? uncontrolledSideView;\n  const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n  const handleSideViewChange = (view: TraceSideView) => {\n    setUncontrolledSideView(view);\n    onSideViewChange?.(view);\n  };\n\n  const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n  const spanView = controlledSpanView ?? uncontrolledSpanView;\n  const setSpanView = (view: TraceSpanView) => {\n    setUncontrolledSpanView(view);\n    onSpanViewChange?.(view);\n  };\n\n  const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n  const [selectedSpanId, setSelectedSpanId] = useState<string | undefined>(initialSpanId ?? undefined);\n\n  // Sync selected span when initialSpanId or trace data changes\n  useEffect(() => {\n    // No span requested: clear immediately.\n    if (!initialSpanId) {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n      return;\n    }\n    // Span requested: wait for trace data before deciding so an in-flight\n    // fetch doesn't wipe a URL-provided selection. Callers that default their\n    // spans to `[]` while loading only say so through `isLoading`.\n    if (isLoading || !spans) return;\n\n    const found = spans.find(s => s.spanId === initialSpanId);\n    if (found) {\n      setSelectedSpanId(initialSpanId);\n      onSpanSelect?.(initialSpanId);\n    } else {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpanId, spans, isLoading]);\n\n  const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n  const hierarchicalSpans = useMemo(\n    () =>\n      formatHierarchicalSpans(\n        // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n        // rendered several components deeper.\n        results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n        anchorSpanId,\n      ),\n    [results, payloadOnlyMatchIds, anchorSpanId],\n  );\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const rootSpan = useMemo(\n    () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n    [spans, anchorSpanId],\n  );\n  const rootError = getSpanError(rootSpan?.error);\n  const handleSpanClick = (id: string) => {\n    const newId = selectedSpanId === id ? undefined : id;\n    setSelectedSpanId(newId);\n    onSpanSelect?.(newId);\n  };\n\n  const traceSummary = rootSpan && (\n    <TraceSummaryDescription rootSpan={rootSpan} usage={usage} entityHref={entityHref} LinkComponent={LinkComponent} />\n  );\n\n  const traceActions = traceId && (\n    <>\n      {!isOnTracePage && LinkComponent && traceHref && (\n        <Button size=\"icon-sm\" variant=\"ghost\" tooltip=\"Open trace page\" render={<LinkComponent href={traceHref} />}>\n          <Link2Icon />\n        </Button>\n      )}\n      <Button\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        tooltip=\"Download trace JSON\"\n        disabled={isDownloadingTrace}\n        onClick={() => downloadTraceJson(traceId)}\n      >\n        {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n      </Button>\n    </>\n  );\n\n  const scoreAction = onEvaluateTrace && (\n    <Button variant=\"primary\" size=\"sm\" onClick={onEvaluateTrace} disabled={!rootSpan}>\n      <CircleGaugeIcon />\n      Score trace\n    </Button>\n  );\n\n  const sideColumn =\n    traceId && sideView ? (\n      <div\n        ref={setSideColumnElement}\n        data-trace-side-column\n        className=\"@container flex h-full min-h-0 min-w-0 flex-col overflow-hidden\"\n      >\n        {/* Whether the Messages tab exists depends on the spans, so the tabs wait for them;\n            otherwise the column flickers Feedback → Messages as the first tab changes. */}\n        {isLoading ? (\n          <DataPanel.Header className=\"border-b border-surface-rim\">\n            <div aria-hidden className=\"flex h-control-sm items-center gap-2\">\n              <Skeleton className=\"h-5 w-24 rounded-full\" />\n              <Skeleton className=\"h-5 w-20 rounded-full\" />\n            </div>\n          </DataPanel.Header>\n        ) : (\n          <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n            {/* `flex-nowrap` + a shrinkable tab column: the tab list's scroll wrapper is full-width,\n                so in a wrapping row it would push the actions onto a second line. */}\n            <DataPanel.Header className=\"flex-nowrap border-b border-surface-rim\">\n              <div className=\"min-w-0 flex-1\">\n                <TabList variant=\"pill-ghost\" size=\"sm\">\n                  {sideViews.map(view => (\n                    <Tab key={view.value} value={view.value} tooltip={compactSide ? view.name : undefined}>\n                      {view.label}\n                    </Tab>\n                  ))}\n                </TabList>\n              </div>\n              {sideHeaderActions && (\n                <div className=\"flex shrink-0 items-center whitespace-nowrap\">\n                  {sideHeaderActions({ compact: compactSide })}\n                </div>\n              )}\n            </DataPanel.Header>\n          </Tabs>\n        )}\n        {!isLoading && sideView === 'messages' && (\n          <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>\n        )}\n        {!isLoading && sideView === 'feedback' && (\n          <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>\n        )}\n        {!isLoading && sideView === 'scores' && (\n          <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n        )}\n      </div>\n    ) : null;\n\n  return (\n    <DataPanel\n      open={!!traceId}\n      onClose={onClose}\n      title={title ?? (isOnTracePage ? 'Trace Timeline' : `Trace ${traceId ?? ''}`)}\n      size={size}\n      depth={depth}\n    >\n      {traceId && (\n        <>\n          {headerSlot}\n          {isOnTracePage ? (\n            <DataPanel.Header>\n              <DataPanel.HeaderContent>\n                <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n                {traceSummary}\n              </DataPanel.HeaderContent>\n              <DataPanel.HeaderActions>\n                {headerActionsSlot}\n                {scoreAction}\n                {traceActions}\n              </DataPanel.HeaderActions>\n            </DataPanel.Header>\n          ) : (\n            <>\n              {/* Navigation row: trace stepping and the trace id on the left; trace actions, then close, on the right. */}\n              <DataPanel.Header>\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.HeaderContent>\n                  <DataPanel.Heading>\n                    <span className=\"sr-only\">Trace</span>\n                    <DataPanel.CopyId id={traceId} maxLength={6} ellipsis={false} icon={<TraceIcon />} />\n                  </DataPanel.Heading>\n                </DataPanel.HeaderContent>\n                <DataPanel.HeaderActions>\n                  {headerActionsSlot}\n                  {scoreAction}\n                  {onSaveAsDatasetItem && (\n                    <Button\n                      size=\"sm\"\n                      tooltip=\"Add the full trace to a dataset\"\n                      onClick={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}\n                    >\n                      <SaveIcon />\n                      Add to dataset\n                    </Button>\n                  )}\n                  {traceActions}\n                  <div aria-hidden=\"true\" className=\"mx-1 h-4 w-px shrink-0 bg-border-strong\" />\n                  <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close trace\" tooltip=\"Close trace\" />\n                </DataPanel.HeaderActions>\n              </DataPanel.Header>\n              {/* Summary row: what ran and how it ended on the left; timing, tokens and cost on the right. */}\n              {!rootSpan && isLoading && (\n                <DataPanel.Header>\n                  <div role=\"status\" aria-label=\"Loading trace summary\" className=\"flex w-full items-center gap-2\">\n                    <Skeleton className=\"h-3 w-32\" />\n                    <Skeleton className=\"h-5 w-16 rounded-full\" />\n                    <Skeleton className=\"ml-auto h-3 w-48\" />\n                  </div>\n                </DataPanel.Header>\n              )}\n              {rootSpan && (\n                <DataPanel.Header>\n                  <DataPanel.Metadata>\n                    <TraceEntityMeta rootSpan={rootSpan} entityHref={entityHref} LinkComponent={LinkComponent} />\n                    <TraceStatusMeta rootSpan={rootSpan} />\n                  </DataPanel.Metadata>\n                  <div className=\"ml-auto flex min-w-0\">\n                    <TraceSummaryDescription\n                      rootSpan={rootSpan}\n                      usage={usage}\n                      entityHref={entityHref}\n                      LinkComponent={LinkComponent}\n                      showEntity={false}\n                      showStatus={false}\n                    />\n                  </div>\n                </DataPanel.Header>\n              )}\n            </>\n          )}\n\n          <TracePanelColumns\n            layoutKey={rootSpan ? (rootSpan.entityType ?? 'unknown') : entityType === null ? 'unknown' : entityType}\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                  // The bar itself is the search field: no pill inside the square panel, the\n                  // bottom rule is its only edge, and keyboard focus lights that rule like a\n                  // field's rim. The view switch stays as flat square icons.\n                  <DataPanel.Header className=\"gap-1 border-b border-surface-rim has-[input:focus-visible]:[--surface-rim:var(--field-rim-focus)]\">\n                    <SearchIcon aria-hidden className=\"ml-1 size-4 shrink-0 text-muted-foreground\" />\n                    <input\n                      type=\"search\"\n                      aria-label=\"Search spans\"\n                      placeholder=\"Search spans\"\n                      value={query}\n                      onChange={event => setQuery(event.target.value)}\n                      className=\"h-full min-w-0 flex-1 bg-transparent px-1.5 text-label text-foreground outline-hidden placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none\"\n                    />\n                    {query && (\n                      <Button\n                        size=\"icon-sm\"\n                        variant=\"ghost\"\n                        aria-label=\"Clear search\"\n                        className=\"rounded-md\"\n                        onClick={() => setQuery('')}\n                      >\n                        <XIcon />\n                      </Button>\n                    )}\n                    <div role=\"group\" aria-label=\"Span view\" className=\"flex shrink-0 items-center gap-0.5\">\n                      {(\n                        [\n                          ['tree', 'Span tree', <ListTreeIcon key=\"tree\" />],\n                          ['timeline', 'Timeline', <ChartGanttIcon key=\"timeline\" />],\n                        ] as const\n                      ).map(([view, label, icon]) => (\n                        <Button\n                          key={view}\n                          size=\"icon-sm\"\n                          variant={spanView === view ? 'subtle' : 'ghost'}\n                          aria-label={label}\n                          aria-pressed={spanView === view}\n                          tooltip={label}\n                          className=\"rounded-md\"\n                          onClick={() => setSpanView(view)}\n                        >\n                          {icon}\n                        </Button>\n                      ))}\n                    </div>\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                  revealSpanId: featuredSpanIds?.at(-1),\n                  isLoading,\n                };\n                const streamingTimings =\n                  rootStreamingTimings && rootSpan && !anchorSpanId\n                    ? { ...rootStreamingTimings, startedAt: rootSpan.startedAt }\n                    : undefined;\n\n                return (\n                  <>\n                    {searchHeader}\n                    <DataPanel.Content>\n                      {!isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && 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                      {rootSpan && rootError && (\n                        <Notice\n                          variant=\"destructive\"\n                          title={rootError.name ?? 'Error'}\n                          action={\n                            <Notice.Button\n                              onClick={() => {\n                                setSelectedSpanId(rootSpan.spanId);\n                                onSpanSelect?.(rootSpan.spanId);\n                              }}\n                            >\n                              View details\n                            </Notice.Button>\n                          }\n                          className=\"mb-4\"\n                        >\n                          <Notice.Message className=\"line-clamp-3\">{rootError.message}</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 ? (\n                        <TraceSpanTimeline {...viewProps} streamingTimings={streamingTimings} />\n                      ) : (\n                        <TraceSpanTree {...viewProps} />\n                      )}\n                      {noSearchResults}\n                    </DataPanel.Content>\n                  </>\n                );\n              })()\n            )}\n          </TracePanelColumns>\n        </>\n      )}\n    </DataPanel>\n  );\n}\n\n/** The error a span recorded, when it has the `{ name?, message }` shape spans store. */\nfunction getSpanError(error: unknown): { name?: string; message: string } | undefined {\n  if (typeof error !== 'object' || error === null || !('message' in error) || typeof error.message !== 'string') {\n    return undefined;\n  }\n  const name = 'name' in error && typeof error.name === 'string' ? error.name : undefined;\n  return { name, message: error.message };\n}\n\n/**\n * Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The side\n * and span columns are resizable (down to a minimum width); the trace column takes the rest.\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n */\n/** Column widths in pixels, persisted per trace entity type. */\ntype TraceColumnWidths = { side?: number; span?: number };\n\nconst pixelWidth = (value: unknown) => (typeof value === 'number' && value > 0 ? value : undefined);\n\n// localStorage access throws when storage is blocked (privacy modes, sandboxed iframes) and stored\n// values may be corrupted; fall back to the default widths instead of crashing the panel.\nfunction readColumnWidths(key: string): TraceColumnWidths {\n  try {\n    const stored: unknown = JSON.parse(localStorage.getItem(key) ?? 'null');\n    if (!stored || typeof stored !== 'object') return {};\n    return {\n      side: pixelWidth((stored as TraceColumnWidths).side),\n      span: pixelWidth((stored as TraceColumnWidths).span),\n    };\n  } catch {\n    return {};\n  }\n}\n\nfunction writeColumnWidths(key: string, widths: TraceColumnWidths) {\n  try {\n    localStorage.setItem(key, JSON.stringify(widths));\n  } catch {\n    // Persisting is best-effort.\n  }\n}\n\nfunction TracePanelColumns({\n  layoutKey,\n  sideColumnSlot,\n  spanPanelSlot,\n  highlightQuery,\n  spanPanelKey,\n  children,\n}: {\n  /**\n   * Root entity type of the trace; column sizes are persisted per value in localStorage.\n   * Undefined while the root span is unknown, in which case nothing is persisted.\n   */\n  layoutKey?: string;\n  /** Resizable column on the left (messages / feedback / scores). */\n  sideColumnSlot?: ReactNode;\n  spanPanelSlot?: ReactNode;\n  highlightQuery: string;\n  /** Identity of the span shown in the panel; changing it re-triggers the match scroll. */\n  spanPanelKey?: string;\n  children: ReactNode;\n}) {\n  // A single hook call on the common ancestor covers both the timeline tree and\n  // the span detail, so span names and payload values highlight together.\n  const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n  // Scoped to the span-panel column only: a match deep in a large payload sits below\n  // the fold, so the first painted match is brought into view when the panel opens.\n  // The timeline column must never be scrolled by this.\n  const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n  // The side and span columns are sized in pixels: they keep their width when the drawer resizes\n  // (it widens when a span opens) and when the span column comes and goes; only the trace column in\n  // the middle absorbs the change. The library lays panels out in percentages, so the pixel widths\n  // are owned here.\n  const groupRef = useGroupRef();\n  const columnsRef = useRef<HTMLDivElement>(null);\n  const storageKey = layoutKey ? `mastra:trace-panel-widths:${layoutKey}` : undefined;\n  const widths = useRef<{ key?: string; value: TraceColumnWidths }>({ value: {} });\n  if (widths.current.key !== storageKey) {\n    widths.current = { key: storageKey, value: storageKey ? readColumnWidths(storageKey) : {} };\n  }\n  // Only agent traces have messages worth reading side by side with the spans; for every other\n  // entity the side column starts narrow so the span tree gets the room.\n  const sideWidth = () => widths.current.value.side ?? (layoutKey === 'agent' ? 480 : 320);\n  const spanWidth = () => widths.current.value.span ?? 480;\n\n  const panelElements = () =>\n    Array.from(columnsRef.current?.querySelectorAll<HTMLElement>(':scope > [data-panel]') ?? []);\n\n  // Only a resize the user makes is remembered: layout changes from the drawer resizing or a\n  // column mounting are derived from the stored widths and must not drift them.\n  const userResizing = useRef(false);\n  const markUserResize = (event: { target: EventTarget }) => {\n    if (event.target instanceof Element && event.target.closest('[data-separator]')) userResizing.current = true;\n  };\n  const persistWidths = (layout: Layout) => {\n    if (!userResizing.current) return;\n    userResizing.current = false;\n    const width = (id: string) =>\n      id in layout\n        ? pixelWidth(Math.round(panelElements().find(panel => panel.id === id)?.offsetWidth ?? 0))\n        : undefined;\n    widths.current.value = {\n      side: width('trace-side') ?? widths.current.value.side,\n      span: width('trace-span') ?? widths.current.value.span,\n    };\n    if (storageKey) writeColumnWidths(storageKey, widths.current.value);\n  };\n\n  // The library re-lays panels out on its own — when the drawer resizes, when a column mounts or\n  // unmounts — so every layout it reports is brought back to the pixel widths, unless the user is\n  // dragging a separator. The layout it settles on after clamping to min sizes is left alone.\n  const settledLayout = useRef<Layout | undefined>(undefined);\n  const holdPixelWidths = (layout: Layout) => {\n    if (userResizing.current) return;\n    const group = groupRef.current;\n    const ids = Object.keys(layout);\n    // The library sizes panels against their summed width, separators excluded.\n    const total = panelElements()\n      .filter(panel => ids.includes(panel.id))\n      .reduce((sum, panel) => sum + panel.offsetWidth, 0);\n    if (!group || total === 0 || !ids.includes('trace-main')) return;\n    const side = ids.includes('trace-side') ? (sideWidth() / total) * 100 : 0;\n    const span = ids.includes('trace-span') ? (spanWidth() / total) * 100 : 0;\n    const target: Layout = { 'trace-main': 100 - side - span };\n    if (side) target['trace-side'] = side;\n    if (span) target['trace-span'] = span;\n    const tolerance = (0.5 / total) * 100;\n    const matches = (a: Layout, b?: Layout) =>\n      !!b && ids.every(id => Math.abs((a[id] ?? 0) - (b[id] ?? Infinity)) < tolerance);\n    if (matches(layout, target) || matches(layout, settledLayout.current)) return;\n    queueMicrotask(() => {\n      settledLayout.current = group.setLayout(target);\n    });\n  };\n\n  return (\n    <div\n      ref={highlightRef}\n      data-trace-columns\n      className=\"flex min-h-0 flex-1\"\n      onPointerDownCapture={markUserResize}\n      onKeyDownCapture={markUserResize}\n    >\n      {/* Plain Group, not PanelGroup: its flex-grow transition would lag behind the drawer\n          resizing and make the pixel-sized columns visibly stretch. */}\n      <Group\n        // Default sizes are only read on mount: remount once the entity type is known.\n        key={layoutKey ?? 'unknown'}\n        groupRef={groupRef}\n        elementRef={columnsRef}\n        orientation=\"horizontal\"\n        className=\"min-h-0 flex-1\"\n        onLayoutChange={holdPixelWidths}\n        onLayoutChanged={persistWidths}\n      >\n        {sideColumnSlot && (\n          <>\n            <Panel id=\"trace-side\" minSize={280} defaultSize={sideWidth()} groupResizeBehavior=\"preserve-pixel-size\">\n              <div className=\"flex h-full min-h-0 flex-col border-r border-surface-rim\">{sideColumnSlot}</div>\n            </Panel>\n            <PanelSeparator variant=\"pill\" />\n          </>\n        )}\n        {/* 384px: the timeline grid's own minimum (two 12rem columns), so its end never clips. */}\n        <Panel id=\"trace-main\" minSize={384} className=\"flex min-h-0 min-w-0 flex-col\">\n          {children}\n        </Panel>\n        {spanPanelSlot && (\n          <>\n            <PanelSeparator variant=\"pill\" />\n            <Panel\n              id=\"trace-span\"\n              minSize={384}\n              maxSize=\"50%\"\n              defaultSize={spanWidth()}\n              groupResizeBehavior=\"preserve-pixel-size\"\n            >\n              <div\n                ref={scrollToMatchRef}\n                data-highlight\n                className=\"flex h-full min-h-0 animate-in flex-col border-l border-surface-rim duration-300 fade-in-0\"\n              >\n                {spanPanelSlot}\n              </div>\n            </Panel>\n          </>\n        )}\n      </Group>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"trace-data-panel-view.es.js","names":["_Fragment"],"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  SaveIcon,\n  SearchIcon,\n  XIcon,\n} from 'lucide-react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { Group, Panel, useGroupRef } from 'react-resizable-panels';\nimport type { Layout } from 'react-resizable-panels';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { LightSpanRecord } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport type { TraceStreamingTimings } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceEntityMeta, TraceStatusMeta, TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { TraceIcon } from '@/ds/icons/TraceIcon';\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 { PanelSeparator } from '@/lib/resize/separator';\n\nexport type TraceDataPanelPlacement = 'traces-list' | 'trace-page';\n\nexport type TraceSpanView = 'tree' | 'timeline';\n\nexport type TraceSideView = 'messages' | 'feedback' | 'scores';\n\nexport interface TraceDataPanelViewProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: (LightSpanRecord & { signalLabel?: string })[] | 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  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  /** Integration-specific actions shown alongside the standard trace controls. */\n  headerActionsSlot?: 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   * Time to first chunk and first token of the trace root, marked on the timeline. Left off when\n   * `anchorSpanId` shows a branch, whose spans don't count from the root.\n   */\n  rootStreamingTimings?: Omit<TraceStreamingTimings, 'startedAt'>;\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   * Root entity type when the caller knows it before the spans load (e.g. from the listed row).\n   * Sizes the columns from the start, so they don't shift once the trace arrives. `null` is a\n   * trace known to have no entity type.\n   */\n  entityType?: string | null;\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 in the side column and a \"Scores\" readout in the\n   * summary row opens the same slot in a popover.\n   */\n  scoresTabSlot?: (args: { traceId: string; rootSpanId: string | undefined }) => ReactNode;\n  /** Optional count rendered after the \"Scores\" labels, e.g. `Scores (3)`. */\n  scoresTabBadge?: ReactNode;\n  /**\n   * When provided, a \"Feedback\" tab appears in the side column and a \"Feedback\" readout in\n   * the summary row opens the same slot in a popover. Trace feedback is not scoped to a\n   * span — the span panel owns that.\n   */\n  feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n  /** Optional count rendered after the \"Feedback\" labels, e.g. `Feedback (3)`. */\n  feedbackTabBadge?: ReactNode;\n  /** Span ids to feature in the timeline; every other span is faded. */\n  featuredSpanIds?: string[];\n  /**\n   * The \"Messages\" view of the side column next to the span tree (typically the\n   * trace as one reconstructed agent turn). Rendered without content padding.\n   */\n  messagesPanelSlot?: ReactNode;\n  /**\n   * Actions rendered at the end of the side column's tab row (e.g. \"Open full thread\").\n   * `compact` is true when the side column is narrow and controls collapse to icons.\n   */\n  sideHeaderActions?: (options: { compact: boolean }) => ReactNode;\n  /** Controlled span view (tree or timeline); falls back to local state starting on the tree. */\n  spanView?: TraceSpanView;\n  onSpanViewChange?: (view: TraceSpanView) => void;\n  /** Controlled side column view; falls back to the first available view. */\n  sideView?: TraceSideView;\n  onSideViewChange?: (view: TraceSideView) => void;\n  /**\n   * Rendered as a column to the right of the timeline inside the same card;\n   * typically the span detail.\n   */\n  spanPanelSlot?: ReactNode;\n}\n\nexport function TraceDataPanelView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  onEvaluateTrace,\n  onSaveAsDatasetItem,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  size = 'wide',\n  depth,\n  headerSlot,\n  headerActionsSlot,\n  title,\n  placement,\n  LinkComponent,\n  traceHref,\n  entityHref,\n  usage,\n  rootStreamingTimings,\n  anchorSpanId,\n  entityType,\n  showUnavailableFeaturesMsg = true,\n  scoresTabSlot,\n  scoresTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  featuredSpanIds,\n  messagesPanelSlot,\n  sideHeaderActions,\n  sideView: controlledSideView,\n  onSideViewChange,\n  spanView: controlledSpanView,\n  onSpanViewChange,\n  spanPanelSlot,\n}: TraceDataPanelViewProps) {\n  const isOnTracePage = placement === 'trace-page';\n\n  // The side column next to the span tree hosts Messages / Feedback / Scores;\n  // which one is shown is purely a local viewing choice.\n  const sideViews = useMemo(() => {\n    const views: Array<{ value: TraceSideView; name: string; label: ReactNode }> = [];\n    if (messagesPanelSlot) {\n      views.push({\n        value: 'messages',\n        name: 'Messages',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareTextIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">Messages</span>\n          </>\n        ),\n      });\n    }\n    if (feedbackTabSlot) {\n      views.push({\n        value: 'feedback',\n        name: 'Feedback',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareReplyIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">\n              Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n            </span>\n          </>\n        ),\n      });\n    }\n    if (scoresTabSlot) {\n      views.push({\n        value: 'scores',\n        name: 'Scores',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <ScorersIcon />\n            </Icon>\n            <span className=\"@max-[501px]:sr-only\">Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}</span>\n          </>\n        ),\n      });\n    }\n    return views;\n  }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n  const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n  // Mirrors the side column's `@max-[501px]` container query: the layout collapses in CSS, but\n  // tooltips render in a portal outside the container, so they need the width in JS.\n  const [sideColumnElement, setSideColumnElement] = useState<HTMLDivElement | null>(null);\n  const [compactSide, setCompactSide] = useState(false);\n  useEffect(() => {\n    if (!sideColumnElement || !('ResizeObserver' in globalThis)) return;\n    const observer = new ResizeObserver(() => setCompactSide(sideColumnElement.clientWidth <= 500));\n    observer.observe(sideColumnElement);\n    return () => observer.disconnect();\n  }, [sideColumnElement]);\n  const chosenSideView = controlledSideView ?? uncontrolledSideView;\n  const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n  const handleSideViewChange = (view: TraceSideView) => {\n    setUncontrolledSideView(view);\n    onSideViewChange?.(view);\n  };\n\n  const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n  const spanView = controlledSpanView ?? uncontrolledSpanView;\n  const setSpanView = (view: TraceSpanView) => {\n    setUncontrolledSpanView(view);\n    onSpanViewChange?.(view);\n  };\n\n  const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n  const [selectedSpanId, setSelectedSpanId] = useState<string | undefined>(initialSpanId ?? undefined);\n\n  // Sync selected span when initialSpanId or trace data changes\n  useEffect(() => {\n    // No span requested: clear immediately.\n    if (!initialSpanId) {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n      return;\n    }\n    // Span requested: wait for trace data before deciding so an in-flight\n    // fetch doesn't wipe a URL-provided selection. Callers that default their\n    // spans to `[]` while loading only say so through `isLoading`.\n    if (isLoading || !spans) return;\n\n    const found = spans.find(s => s.spanId === initialSpanId);\n    if (found) {\n      setSelectedSpanId(initialSpanId);\n      onSpanSelect?.(initialSpanId);\n    } else {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpanId, spans, isLoading]);\n\n  const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n  const hierarchicalSpans = useMemo(\n    () =>\n      formatHierarchicalSpans(\n        // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n        // rendered several components deeper.\n        results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n        anchorSpanId,\n      ),\n    [results, payloadOnlyMatchIds, anchorSpanId],\n  );\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const rootSpan = useMemo(\n    () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n    [spans, anchorSpanId],\n  );\n  const rootError = getSpanError(rootSpan?.error);\n  const handleSpanClick = (id: string) => {\n    const newId = selectedSpanId === id ? undefined : id;\n    setSelectedSpanId(newId);\n    onSpanSelect?.(newId);\n  };\n\n  const traceSummary = rootSpan && (\n    <TraceSummaryDescription rootSpan={rootSpan} usage={usage} entityHref={entityHref} LinkComponent={LinkComponent} />\n  );\n\n  const traceActions = traceId && (\n    <>\n      {!isOnTracePage && LinkComponent && traceHref && (\n        <Button size=\"icon-sm\" variant=\"ghost\" tooltip=\"Open trace page\" render={<LinkComponent href={traceHref} />}>\n          <Link2Icon />\n        </Button>\n      )}\n      <Button\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        tooltip=\"Download trace JSON\"\n        disabled={isDownloadingTrace}\n        onClick={() => downloadTraceJson(traceId)}\n      >\n        {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n      </Button>\n    </>\n  );\n\n  const scoreAction = onEvaluateTrace && (\n    <Button variant=\"primary\" size=\"sm\" onClick={onEvaluateTrace} disabled={!rootSpan}>\n      <CircleGaugeIcon />\n      Score trace\n    </Button>\n  );\n\n  const sideColumn =\n    traceId && sideView ? (\n      <div\n        ref={setSideColumnElement}\n        data-trace-side-column\n        className=\"@container flex h-full min-h-0 min-w-0 flex-col overflow-hidden\"\n      >\n        {/* Whether the Messages tab exists depends on the spans, so the tabs wait for them;\n            otherwise the column flickers Feedback → Messages as the first tab changes. */}\n        {isLoading ? (\n          <DataPanel.Header className=\"border-b border-surface-rim\">\n            <div aria-hidden className=\"flex h-control-sm items-center gap-2\">\n              <Skeleton className=\"h-5 w-24 rounded-full\" />\n              <Skeleton className=\"h-5 w-20 rounded-full\" />\n            </div>\n          </DataPanel.Header>\n        ) : (\n          <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n            {/* `flex-nowrap` + a shrinkable tab column: the tab list's scroll wrapper is full-width,\n                so in a wrapping row it would push the actions onto a second line. */}\n            <DataPanel.Header className=\"flex-nowrap border-b border-surface-rim\">\n              <div className=\"min-w-0 flex-1\">\n                <TabList variant=\"pill-ghost\" size=\"sm\">\n                  {sideViews.map(view => (\n                    <Tab key={view.value} value={view.value} tooltip={compactSide ? view.name : undefined}>\n                      {view.label}\n                    </Tab>\n                  ))}\n                </TabList>\n              </div>\n              {sideHeaderActions && (\n                <div className=\"flex shrink-0 items-center whitespace-nowrap\">\n                  {sideHeaderActions({ compact: compactSide })}\n                </div>\n              )}\n            </DataPanel.Header>\n          </Tabs>\n        )}\n        {!isLoading && sideView === 'messages' && (\n          <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>\n        )}\n        {!isLoading && sideView === 'feedback' && (\n          <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>\n        )}\n        {!isLoading && sideView === 'scores' && (\n          <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n        )}\n      </div>\n    ) : null;\n\n  return (\n    <DataPanel\n      open={!!traceId}\n      onClose={onClose}\n      title={title ?? (isOnTracePage ? 'Trace Timeline' : `Trace ${traceId ?? ''}`)}\n      size={size}\n      depth={depth}\n    >\n      {traceId && (\n        <>\n          {headerSlot}\n          {isOnTracePage ? (\n            <DataPanel.Header>\n              <DataPanel.HeaderContent>\n                <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n                {traceSummary}\n              </DataPanel.HeaderContent>\n              <DataPanel.HeaderActions>\n                {headerActionsSlot}\n                {scoreAction}\n                {traceActions}\n              </DataPanel.HeaderActions>\n            </DataPanel.Header>\n          ) : (\n            <>\n              {/* Navigation row: trace stepping and the trace id on the left; trace actions, then close, on the right. */}\n              <DataPanel.Header>\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.HeaderContent>\n                  <DataPanel.Heading>\n                    <span className=\"sr-only\">Trace</span>\n                    <DataPanel.CopyId id={traceId} maxLength={6} ellipsis={false} icon={<TraceIcon />} />\n                  </DataPanel.Heading>\n                </DataPanel.HeaderContent>\n                <DataPanel.HeaderActions>\n                  {headerActionsSlot}\n                  {scoreAction}\n                  {onSaveAsDatasetItem && (\n                    <Button\n                      size=\"sm\"\n                      tooltip=\"Add the full trace to a dataset\"\n                      onClick={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}\n                    >\n                      <SaveIcon />\n                      Add to dataset\n                    </Button>\n                  )}\n                  {traceActions}\n                  <div aria-hidden=\"true\" className=\"mx-1 h-4 w-px shrink-0 bg-border-strong\" />\n                  <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close trace\" tooltip=\"Close trace\" />\n                </DataPanel.HeaderActions>\n              </DataPanel.Header>\n              {/* Summary row: what ran and how it ended on the left; timing, tokens and cost on the right. */}\n              {!rootSpan && isLoading && (\n                <DataPanel.Header>\n                  <div role=\"status\" aria-label=\"Loading trace summary\" className=\"flex w-full items-center gap-2\">\n                    <Skeleton className=\"h-3 w-32\" />\n                    <Skeleton className=\"h-5 w-16 rounded-full\" />\n                    <Skeleton className=\"ml-auto h-3 w-48\" />\n                  </div>\n                </DataPanel.Header>\n              )}\n              {rootSpan && (\n                <DataPanel.Header>\n                  <DataPanel.Metadata>\n                    <TraceEntityMeta rootSpan={rootSpan} entityHref={entityHref} LinkComponent={LinkComponent} />\n                    <TraceStatusMeta rootSpan={rootSpan} />\n                  </DataPanel.Metadata>\n                  <div className=\"ml-auto flex min-w-0\">\n                    <TraceSummaryDescription\n                      rootSpan={rootSpan}\n                      usage={usage}\n                      entityHref={entityHref}\n                      LinkComponent={LinkComponent}\n                      showEntity={false}\n                      showStatus={false}\n                    />\n                  </div>\n                </DataPanel.Header>\n              )}\n            </>\n          )}\n\n          <TracePanelColumns\n            layoutKey={rootSpan ? (rootSpan.entityType ?? 'unknown') : entityType === null ? 'unknown' : entityType}\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                  // The bar itself is the search field: no pill inside the square panel, the\n                  // bottom rule is its only edge, and keyboard focus lights that rule like a\n                  // field's rim. The view switch stays as flat square icons.\n                  <DataPanel.Header className=\"gap-1 border-b border-surface-rim has-[input:focus-visible]:[--surface-rim:var(--field-rim-focus)]\">\n                    <SearchIcon aria-hidden className=\"ml-1 size-4 shrink-0 text-muted-foreground\" />\n                    <input\n                      type=\"search\"\n                      aria-label=\"Search spans\"\n                      placeholder=\"Search spans\"\n                      value={query}\n                      onChange={event => setQuery(event.target.value)}\n                      className=\"h-full min-w-0 flex-1 bg-transparent px-1.5 text-label text-foreground outline-hidden placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none\"\n                    />\n                    {query && (\n                      <Button\n                        size=\"icon-sm\"\n                        variant=\"ghost\"\n                        aria-label=\"Clear search\"\n                        className=\"rounded-md\"\n                        onClick={() => setQuery('')}\n                      >\n                        <XIcon />\n                      </Button>\n                    )}\n                    <div role=\"group\" aria-label=\"Span view\" className=\"flex shrink-0 items-center gap-0.5\">\n                      {(\n                        [\n                          ['tree', 'Span tree', <ListTreeIcon key=\"tree\" />],\n                          ['timeline', 'Timeline', <ChartGanttIcon key=\"timeline\" />],\n                        ] as const\n                      ).map(([view, label, icon]) => (\n                        <Button\n                          key={view}\n                          size=\"icon-sm\"\n                          variant={spanView === view ? 'subtle' : 'ghost'}\n                          aria-label={label}\n                          aria-pressed={spanView === view}\n                          tooltip={label}\n                          className=\"rounded-md\"\n                          onClick={() => setSpanView(view)}\n                        >\n                          {icon}\n                        </Button>\n                      ))}\n                    </div>\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                  revealSpanId: featuredSpanIds?.at(-1),\n                  isLoading,\n                };\n                const streamingTimings =\n                  rootStreamingTimings && rootSpan && !anchorSpanId\n                    ? { ...rootStreamingTimings, startedAt: rootSpan.startedAt }\n                    : undefined;\n\n                return (\n                  <>\n                    {searchHeader}\n                    <DataPanel.Content>\n                      {!isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && 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                      {rootSpan && rootError && (\n                        <Notice\n                          variant=\"destructive\"\n                          title={rootError.name ?? 'Error'}\n                          action={\n                            <Notice.Button\n                              onClick={() => {\n                                setSelectedSpanId(rootSpan.spanId);\n                                onSpanSelect?.(rootSpan.spanId);\n                              }}\n                            >\n                              View details\n                            </Notice.Button>\n                          }\n                          className=\"mb-4\"\n                        >\n                          <Notice.Message className=\"line-clamp-3\">{rootError.message}</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 ? (\n                        <TraceSpanTimeline {...viewProps} streamingTimings={streamingTimings} />\n                      ) : (\n                        <TraceSpanTree {...viewProps} />\n                      )}\n                      {noSearchResults}\n                    </DataPanel.Content>\n                  </>\n                );\n              })()\n            )}\n          </TracePanelColumns>\n        </>\n      )}\n    </DataPanel>\n  );\n}\n\n/** The error a span recorded, when it has the `{ name?, message }` shape spans store. */\nfunction getSpanError(error: unknown): { name?: string; message: string } | undefined {\n  if (typeof error !== 'object' || error === null || !('message' in error) || typeof error.message !== 'string') {\n    return undefined;\n  }\n  const name = 'name' in error && typeof error.name === 'string' ? error.name : undefined;\n  return { name, message: error.message };\n}\n\n/**\n * Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The side\n * and span columns are resizable (down to a minimum width); the trace column takes the rest.\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n */\n/** Column widths in pixels, persisted per trace entity type. */\ntype TraceColumnWidths = { side?: number; span?: number };\n\nconst pixelWidth = (value: unknown) => (typeof value === 'number' && value > 0 ? value : undefined);\n\n// localStorage access throws when storage is blocked (privacy modes, sandboxed iframes) and stored\n// values may be corrupted; fall back to the default widths instead of crashing the panel.\nfunction readColumnWidths(key: string): TraceColumnWidths {\n  try {\n    const stored: unknown = JSON.parse(localStorage.getItem(key) ?? 'null');\n    if (!stored || typeof stored !== 'object') return {};\n    return {\n      side: pixelWidth((stored as TraceColumnWidths).side),\n      span: pixelWidth((stored as TraceColumnWidths).span),\n    };\n  } catch {\n    return {};\n  }\n}\n\nfunction writeColumnWidths(key: string, widths: TraceColumnWidths) {\n  try {\n    localStorage.setItem(key, JSON.stringify(widths));\n  } catch {\n    // Persisting is best-effort.\n  }\n}\n\nfunction TracePanelColumns({\n  layoutKey,\n  sideColumnSlot,\n  spanPanelSlot,\n  highlightQuery,\n  spanPanelKey,\n  children,\n}: {\n  /**\n   * Root entity type of the trace; column sizes are persisted per value in localStorage.\n   * Undefined while the root span is unknown, in which case nothing is persisted.\n   */\n  layoutKey?: string;\n  /** Resizable column on the left (messages / feedback / scores). */\n  sideColumnSlot?: ReactNode;\n  spanPanelSlot?: ReactNode;\n  highlightQuery: string;\n  /** Identity of the span shown in the panel; changing it re-triggers the match scroll. */\n  spanPanelKey?: string;\n  children: ReactNode;\n}) {\n  // A single hook call on the common ancestor covers both the timeline tree and\n  // the span detail, so span names and payload values highlight together.\n  const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n  // Scoped to the span-panel column only: a match deep in a large payload sits below\n  // the fold, so the first painted match is brought into view when the panel opens.\n  // The timeline column must never be scrolled by this.\n  const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n  // The side and span columns are sized in pixels: they keep their width when the drawer resizes\n  // (it widens when a span opens) and when the span column comes and goes; only the trace column in\n  // the middle absorbs the change. The library lays panels out in percentages, so the pixel widths\n  // are owned here.\n  const groupRef = useGroupRef();\n  const columnsRef = useRef<HTMLDivElement>(null);\n  const storageKey = layoutKey ? `mastra:trace-panel-widths:${layoutKey}` : undefined;\n  const widths = useRef<{ key?: string; value: TraceColumnWidths }>({ value: {} });\n  if (widths.current.key !== storageKey) {\n    widths.current = { key: storageKey, value: storageKey ? readColumnWidths(storageKey) : {} };\n  }\n  // Only agent traces have messages worth reading side by side with the spans; for every other\n  // entity the side column starts narrow so the span tree gets the room.\n  const sideWidth = () => widths.current.value.side ?? (layoutKey === 'agent' ? 480 : 320);\n  const spanWidth = () => widths.current.value.span ?? 480;\n\n  const panelElements = () =>\n    Array.from(columnsRef.current?.querySelectorAll<HTMLElement>(':scope > [data-panel]') ?? []);\n\n  // Only a resize the user makes is remembered: layout changes from the drawer resizing or a\n  // column mounting are derived from the stored widths and must not drift them.\n  const userResizing = useRef(false);\n  const markUserResize = (event: { target: EventTarget }) => {\n    if (event.target instanceof Element && event.target.closest('[data-separator]')) userResizing.current = true;\n  };\n  const persistWidths = (layout: Layout) => {\n    if (!userResizing.current) return;\n    userResizing.current = false;\n    const width = (id: string) =>\n      id in layout\n        ? pixelWidth(Math.round(panelElements().find(panel => panel.id === id)?.offsetWidth ?? 0))\n        : undefined;\n    widths.current.value = {\n      side: width('trace-side') ?? widths.current.value.side,\n      span: width('trace-span') ?? widths.current.value.span,\n    };\n    if (storageKey) writeColumnWidths(storageKey, widths.current.value);\n  };\n\n  // The library re-lays panels out on its own — when the drawer resizes, when a column mounts or\n  // unmounts — so every layout it reports is brought back to the pixel widths, unless the user is\n  // dragging a separator. The layout it settles on after clamping to min sizes is left alone,\n  // including the one it reports from inside our own setLayout: when the columns can't fit, rounding\n  // makes each clamped layout differ from the last, and answering it would re-lay out forever.\n  const settledLayout = useRef<Layout | undefined>(undefined);\n  const applyingLayout = useRef(false);\n  const holdPixelWidths = (layout: Layout) => {\n    if (userResizing.current || applyingLayout.current) return;\n    const group = groupRef.current;\n    const ids = Object.keys(layout);\n    // The library sizes panels against their summed width, separators excluded.\n    const total = panelElements()\n      .filter(panel => ids.includes(panel.id))\n      .reduce((sum, panel) => sum + panel.offsetWidth, 0);\n    if (!group || total === 0 || !ids.includes('trace-main')) return;\n    const side = ids.includes('trace-side') ? (sideWidth() / total) * 100 : 0;\n    const span = ids.includes('trace-span') ? (spanWidth() / total) * 100 : 0;\n    const target: Layout = { 'trace-main': 100 - side - span };\n    if (side) target['trace-side'] = side;\n    if (span) target['trace-span'] = span;\n    const tolerance = (0.5 / total) * 100;\n    const matches = (a: Layout, b?: Layout) =>\n      !!b && ids.every(id => Math.abs((a[id] ?? 0) - (b[id] ?? Infinity)) < tolerance);\n    if (matches(layout, target) || matches(layout, settledLayout.current)) return;\n    queueMicrotask(() => {\n      applyingLayout.current = true;\n      try {\n        settledLayout.current = group.setLayout(target);\n      } finally {\n        applyingLayout.current = false;\n      }\n    });\n  };\n\n  return (\n    <div\n      ref={highlightRef}\n      data-trace-columns\n      className=\"flex min-h-0 flex-1\"\n      onPointerDownCapture={markUserResize}\n      onKeyDownCapture={markUserResize}\n    >\n      {/* Plain Group, not PanelGroup: its flex-grow transition would lag behind the drawer\n          resizing and make the pixel-sized columns visibly stretch. */}\n      <Group\n        // Default sizes are only read on mount: remount once the entity type is known.\n        key={layoutKey ?? 'unknown'}\n        groupRef={groupRef}\n        elementRef={columnsRef}\n        orientation=\"horizontal\"\n        className=\"min-h-0 flex-1\"\n        onLayoutChange={holdPixelWidths}\n        onLayoutChanged={persistWidths}\n      >\n        {sideColumnSlot && (\n          <>\n            <Panel id=\"trace-side\" minSize={280} defaultSize={sideWidth()} groupResizeBehavior=\"preserve-pixel-size\">\n              <div className=\"flex h-full min-h-0 flex-col border-r border-surface-rim\">{sideColumnSlot}</div>\n            </Panel>\n            <PanelSeparator variant=\"pill\" />\n          </>\n        )}\n        {/* 384px: the timeline grid's own minimum (two 12rem columns), so its end never clips. */}\n        <Panel id=\"trace-main\" minSize={384} className=\"flex min-h-0 min-w-0 flex-col\">\n          {children}\n        </Panel>\n        {spanPanelSlot && (\n          <>\n            <PanelSeparator variant=\"pill\" />\n            <Panel\n              id=\"trace-span\"\n              minSize={384}\n              maxSize=\"50%\"\n              defaultSize={spanWidth()}\n              groupResizeBehavior=\"preserve-pixel-size\"\n            >\n              <div\n                ref={scrollToMatchRef}\n                data-highlight\n                className=\"flex h-full min-h-0 animate-in flex-col border-l border-surface-rim duration-300 fade-in-0\"\n              >\n                {spanPanelSlot}\n              </div>\n            </Panel>\n          </>\n        )}\n      </Group>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/traces/components/trace-error-cell.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_data_list = require("../../../data-list-C4Vmq5HA.cjs");
 const require_components_HoverCard = require("../../../components/HoverCard.cjs.js");
+const require_data_list = require("../../../data-list-C4Vmq5HA.cjs");
 const require_domains_traces_components_trace_error_details = require("./trace-error-details.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/traces/components/trace-error-cell.tsx

package/dist/domains/traces/components/trace-error-cell.es.js

@@ -1,5 +1,5 @@
-import { t as DataList } from "../../../data-list-DHCOoLmj.js";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../../components/HoverCard.es.js";
+import { t as DataList } from "../../../data-list-DHCOoLmj.js";
 import { TraceErrorDetails } from "./trace-error-details.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/traces/components/trace-error-cell.tsx

package/dist/domains/traces/components/traces-explorer/traces-explorer-filter-bar.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_trace_filters = require("../../../../trace-filters-a0N9bf52.cjs");
 const require_domains_traces_components_traces_explorer_traces_explorer_actions = require("./traces-explorer-actions.cjs.js");
-require("../../../../filter-bar-time-range-BA-pXMlo.cjs");
-const require_FilterBar = require("../../../../FilterBar-CQl04O6t.cjs");
+require("../../../../filter-bar-time-range-zdM024JD.cjs");
+const require_FilterBar = require("../../../../FilterBar-BSP2UTjc.cjs");
 const require_domains_traces_components_traces_explorer_traces_explorer_context = require("./traces-explorer-context.cjs.js");
 const require_domains_traces_components_traces_explorer_use_traces_filter_bar = require("./use-traces-filter-bar.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/domains/traces/components/traces-explorer/traces-explorer-filter-bar.es.js

@@ -1,7 +1,7 @@
 import { u as TRACE_FILTER_BAR_OPERATORS } from "../../../../trace-filters-CaWkw779.js";
 import { DEFAULT_TRACES_FILTERS } from "./traces-explorer-actions.es.js";
-import "../../../../filter-bar-time-range-mg9JeYue.js";
-import { n as FilterBar } from "../../../../FilterBar-BgW2dqRQ.js";
+import "../../../../filter-bar-time-range-qlV8p7hp.js";
+import { n as FilterBar } from "../../../../FilterBar-PSQ1OwqH.js";
 import { useTracesConfig, useTracesFilters, useTracesList } from "./traces-explorer-context.es.js";
 import { useTracesFilterBar, useTracesFilterBarFields } from "./use-traces-filter-bar.es.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/domains/traces/components/traces-explorer/use-traces-filter-bar.cjs.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_trace_filters = require("../../../../trace-filters-a0N9bf52.cjs");
 const require_types = require("../../../../types-CP7wbYua.cjs");
 const require_domains_traces_components_traces_explorer_traces_explorer_actions = require("./traces-explorer-actions.cjs.js");
-const require_filter_bar_time_range = require("../../../../filter-bar-time-range-BA-pXMlo.cjs");
+const require_filter_bar_time_range = require("../../../../filter-bar-time-range-zdM024JD.cjs");
 const require_domains_traces_components_traces_explorer_traces_explorer_context = require("./traces-explorer-context.cjs.js");
 const require_domains_traces_components_traces_explorer_use_traces_discovery = require("./use-traces-discovery.cjs.js");
 let react = require("react");

package/dist/domains/traces/components/traces-explorer/use-traces-filter-bar.es.js

@@ -1,7 +1,7 @@
 import { I as createTraceFilterBarFields, L as filterBarExpressionToTraceFilters, rt as traceTokensToFilterBarItems, tt as traceFiltersToFilterBarExpression } from "../../../../trace-filters-CaWkw779.js";
 import { t as isFilterBarGroup } from "../../../../types-DiiL5mTO.js";
 import { getSelectedEntityOption } from "./traces-explorer-actions.es.js";
-import { r as FILTER_BAR_TIME_RANGE_ITEM, t as FILTER_BAR_TIME_RANGE_FIELD } from "../../../../filter-bar-time-range-mg9JeYue.js";
+import { r as FILTER_BAR_TIME_RANGE_ITEM, t as FILTER_BAR_TIME_RANGE_FIELD } from "../../../../filter-bar-time-range-qlV8p7hp.js";
 import { useTracesConfig, useTracesFilters } from "./traces-explorer-context.es.js";
 import { useTracesDiscovery } from "./use-traces-discovery.es.js";
 import { useMemo } from "react";