@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

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 { 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   * 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  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\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 ? <TraceSpanTimeline {...viewProps} /> : <TraceSpanTree {...viewProps} />}\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  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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"}

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

@@ -21,7 +21,7 @@ function getEntityHref(paths, entityType, entityId) {
 * Encapsulates the span-detail fetch and prev/next span navigation that the traces page
 * and the agent chat traces aside used to duplicate.
 */
-function TraceSpanPanel({ traceId, spans, isLoadingSpans, selectedSpanId, onSpanSelect, onClose, anchorSpanId, entityType, initialSpanId, onPrevious, onNext, onSaveAsDatasetItem, feedbackTabBadge, feedbackTabSlot, showPartialThread, featuredSpanIds, onHighlightSpans, isFullThreadOpen, onFullThreadOpenChange, withQueryTrace, withFeedback, onOpenScore, scoresTabBadge, scoresTabSlot, usage, traceHref, size, depth, headerSlot, headerActionsSlot, title, showUnavailableFeaturesMsg, spanView, onSpanViewChange, spanActiveTab, onSpanTabChange, spanFeedbackTabBadge, spanFeedbackTabSlot }) {
+function TraceSpanPanel({ traceId, spans, isLoadingSpans, selectedSpanId, onSpanSelect, onClose, anchorSpanId, entityType, initialSpanId, onPrevious, onNext, onSaveAsDatasetItem, feedbackTabBadge, feedbackTabSlot, showPartialThread, featuredSpanIds, onHighlightSpans, isFullThreadOpen, onFullThreadOpenChange, withQueryTrace, withFeedback, onOpenScore, scoresTabBadge, scoresTabSlot, usage, rootStreamingTimings, traceHref, size, depth, headerSlot, headerActionsSlot, title, showUnavailableFeaturesMsg, spanView, onSpanViewChange, spanActiveTab, onSpanTabChange, spanFeedbackTabBadge, spanFeedbackTabSlot }) {
 	const { data: spanDetailData, isLoading: isLoadingSpanDetail } = (0, _mastra_react_hooks_traces.useSpanDetail)({
 		traceId,
 		spanId: selectedSpanId ?? "",
@@ -43,6 +43,7 @@ function TraceSpanPanel({ traceId, spans, isLoadingSpans, selectedSpanId, onSpan
 		entityType,
 		entityHref,
 		usage,
+		rootStreamingTimings,
 		isLoading: isLoadingSpans,
 		onClose,
 		onSpanSelect,

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-panel.cjs.js","names":["useSpanDetail","useLinkComponent","getTraceThreadId","useThreadHasOtherTraces","_Fragment","TraceDataPanel","TraceMessagesPanel","Button","MessagesSquareIcon","SpanDataPanelView","TraceThreadPanel"],"sources":["../../../../src/domains/traces/components/trace-span-panel.tsx"],"sourcesContent":["import { useSpanDetail, useThreadHasOtherTraces } from '@mastra/react/hooks/traces';\nimport { MessagesSquareIcon } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { SpanDataPanelView } from '@/domains/traces/components/span-data-panel-view';\nimport { TraceDataPanel } from '@/domains/traces/components/trace-data-panel';\nimport type { TraceDataPanelView } from '@/domains/traces/components/trace-data-panel-view';\nimport { TraceMessagesPanel } from '@/domains/traces/components/trace-messages-panel';\nimport { getTraceThreadId } from '@/domains/traces/components/trace-thread-context';\nimport { TraceThreadPanel } from '@/domains/traces/components/trace-thread-panel';\nimport { Button } from '@/ds/components/Button';\nimport { useLinkComponent } from '@/lib/framework';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype TraceDataPanelViewProps = ComponentProps<typeof TraceDataPanelView>;\n\nfunction getEntityHref(\n  paths: LinkComponentPaths,\n  entityType: string | null | undefined,\n  entityId: string | null | undefined,\n) {\n  if (!entityId || !entityType) return undefined;\n  const normalizedEntityType = entityType.toLowerCase();\n  if (normalizedEntityType.includes('workflow')) return paths.workflowLink(entityId) || undefined;\n  if (normalizedEntityType.includes('agent')) return paths.agentLink(entityId) || undefined;\n  return undefined;\n}\ntype SpanDataPanelViewProps = ComponentProps<typeof SpanDataPanelView>;\n\nexport interface TraceSpanPanelProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Spans returned by `useTraceOrBranchSpans` — the page owns the fetch, the panel renders it. */\n  spans: TraceDataPanelViewProps['spans'];\n  isLoadingSpans: boolean;\n  /** Controlled span selection (URL state on the traces page, local state in the chat aside). */\n  selectedSpanId: string | null;\n  onSpanSelect: (spanId: string | undefined) => void;\n  onClose: () => void;\n\n  // Trace-panel pass-through.\n  anchorSpanId?: string;\n  entityType?: TraceDataPanelViewProps['entityType'];\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  onSaveAsDatasetItem?: TraceDataPanelViewProps['onSaveAsDatasetItem'];\n  feedbackTabBadge?: ReactNode;\n  feedbackTabSlot?: TraceDataPanelViewProps['feedbackTabSlot'];\n  /** Enables the \"Messages\" column (reconstructed turn) when the displayed root is a complete agent trace with a thread id. */\n  showPartialThread?: boolean;\n  /** Span ids featured in the timeline (non-featured spans are faded). */\n  featuredSpanIds?: string[];\n  /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  /** When true, opens the trace's thread (every turn) in a stacked drawer above the trace panel. */\n  isFullThreadOpen?: boolean;\n  /** Enables the in-place \"Open full thread\" swap; without it the action falls back to a link. */\n  onFullThreadOpenChange?: (open: boolean) => void;\n  /** Full-thread view: lists through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Full-thread view: shows the per-trace Feedback tab. */\n  withFeedback: boolean;\n  /** Full-thread view: opens a score of one of the thread's traces (the app owns routing). */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  scoresTabBadge?: ReactNode;\n  scoresTabSlot?: TraceDataPanelViewProps['scoresTabSlot'];\n  usage?: TraceDataPanelViewProps['usage'];\n  traceHref?: string;\n  /** Drawer width; defaults to `wide`. */\n  size?: TraceDataPanelViewProps['size'];\n  /** Sibling-drawer elevation (see `DataPanel`). */\n  depth?: TraceDataPanelViewProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. feedback context). */\n  headerSlot?: ReactNode;\n  /** Integration actions displayed alongside the trace controls. */\n  headerActionsSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  showUnavailableFeaturesMsg?: TraceDataPanelViewProps['showUnavailableFeaturesMsg'];\n  spanView?: TraceDataPanelViewProps['spanView'];\n  onSpanViewChange?: TraceDataPanelViewProps['onSpanViewChange'];\n\n  // Span-panel pass-through.\n  spanActiveTab?: SpanDataPanelViewProps['activeTab'];\n  onSpanTabChange?: SpanDataPanelViewProps['onTabChange'];\n  spanFeedbackTabBadge?: ReactNode;\n  spanFeedbackTabSlot?: SpanDataPanelViewProps['feedbackTabSlot'];\n}\n\n/**\n * Shared trace → span drilldown drawer: `TraceDataPanel` with a nested `SpanDataPanelView`.\n * Encapsulates the span-detail fetch and prev/next span navigation that the traces page\n * and the agent chat traces aside used to duplicate.\n */\nexport function TraceSpanPanel({\n  traceId,\n  spans,\n  isLoadingSpans,\n  selectedSpanId,\n  onSpanSelect,\n  onClose,\n  anchorSpanId,\n  entityType,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  onSaveAsDatasetItem,\n  feedbackTabBadge,\n  feedbackTabSlot,\n  showPartialThread,\n  featuredSpanIds,\n  onHighlightSpans,\n  isFullThreadOpen,\n  onFullThreadOpenChange,\n  withQueryTrace,\n  withFeedback,\n  onOpenScore,\n  scoresTabBadge,\n  scoresTabSlot,\n  usage,\n  traceHref,\n  size,\n  depth,\n  headerSlot,\n  headerActionsSlot,\n  title,\n  showUnavailableFeaturesMsg,\n  spanView,\n  onSpanViewChange,\n  spanActiveTab,\n  onSpanTabChange,\n  spanFeedbackTabBadge,\n  spanFeedbackTabSlot,\n}: TraceSpanPanelProps) {\n  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail({\n    traceId: traceId,\n    spanId: selectedSpanId ?? '',\n    queryOptions: { enabled: !!traceId && !!selectedSpanId },\n  });\n  const { Link, paths } = useLinkComponent();\n\n  // The trace summary links the entity to its page; the app's link provider owns the routes.\n  const rootSpan = anchorSpanId\n    ? spans?.find(s => s.spanId === anchorSpanId)\n    : spans?.find(s => s.parentSpanId == null);\n  const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);\n  const threadId = getTraceThreadId(rootSpan, anchorSpanId);\n  const hasMessagesPanel = !!(traceId && showPartialThread && threadId);\n  // A single-trace thread would show exactly what the Messages column already shows.\n  const hasOtherTraces = useThreadHasOtherTraces({\n    threadId: hasMessagesPanel ? threadId : undefined,\n    queryOptions: { enabled: !!(hasMessagesPanel ? threadId : undefined) },\n  });\n  const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;\n\n  return (\n    <>\n      <TraceDataPanel\n        traceId={traceId}\n        spans={spans}\n        anchorSpanId={anchorSpanId}\n        entityType={entityType}\n        entityHref={entityHref}\n        usage={usage}\n        isLoading={isLoadingSpans}\n        onClose={onClose}\n        onSpanSelect={onSpanSelect}\n        onSaveAsDatasetItem={onSaveAsDatasetItem}\n        initialSpanId={initialSpanId ?? selectedSpanId}\n        onPrevious={onPrevious}\n        onNext={onNext}\n        placement=\"traces-list\"\n        LinkComponent={Link}\n        traceHref={traceHref}\n        size={size}\n        depth={depth}\n        headerSlot={headerSlot}\n        headerActionsSlot={headerActionsSlot}\n        title={title}\n        showUnavailableFeaturesMsg={showUnavailableFeaturesMsg}\n        spanView={spanView}\n        onSpanViewChange={onSpanViewChange}\n        feedbackTabBadge={feedbackTabBadge}\n        feedbackTabSlot={feedbackTabSlot}\n        featuredSpanIds={featuredSpanIds}\n        messagesPanelSlot={\n          hasMessagesPanel ? <TraceMessagesPanel traceId={traceId} onHighlightSpans={onHighlightSpans} /> : undefined\n        }\n        sideHeaderActions={\n          showFullThreadAction\n            ? ({ compact }) => (\n                <Button\n                  tooltip={compact ? 'Open full thread' : undefined}\n                  icon={<MessagesSquareIcon />}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  // At a side column of 500px or less, collapse to a round icon button; the label stays for screen readers.\n                  className=\"@max-[501px]:w-control-sm @max-[501px]:rounded-full @max-[501px]:px-0 @max-[501px]:[&>[data-slot=button-icon]]:ml-0\"\n                  onClick={() => onFullThreadOpenChange(true)}\n                >\n                  <span className=\"@max-[501px]:sr-only\">Open full thread</span>\n                </Button>\n              )\n            : undefined\n        }\n        scoresTabBadge={scoresTabBadge}\n        scoresTabSlot={scoresTabSlot}\n        spanPanelSlot={\n          traceId && selectedSpanId ? (\n            <SpanDataPanelView\n              traceId={traceId}\n              spanId={selectedSpanId}\n              span={spanDetailData?.span}\n              isLoading={isLoadingSpanDetail}\n              onClose={() => onSpanSelect(undefined)}\n              activeTab={spanActiveTab}\n              onTabChange={onSpanTabChange}\n              feedbackTabBadge={spanFeedbackTabBadge}\n              feedbackTabSlot={spanFeedbackTabSlot}\n            />\n          ) : null\n        }\n      />\n      {/* Rendered after the trace panel: DataPanel stacking follows DOM order. */}\n      <TraceThreadPanel\n        open={!!(traceId && isFullThreadOpen && threadId)}\n        depth={depth && depth > 1 ? 3 : 2}\n        threadId={threadId ?? ''}\n        onOpenScore={onOpenScore}\n        withQueryTrace={withQueryTrace}\n        withFeedback={withFeedback}\n        onClose={() => onFullThreadOpenChange?.(false)}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAS,cACP,OACA,YACA,UACA;CACA,IAAI,CAAC,YAAY,CAAC,YAAY,OAAO,KAAA;CACrC,MAAM,uBAAuB,WAAW,YAAY;CACpD,IAAI,qBAAqB,SAAS,UAAU,GAAG,OAAO,MAAM,aAAa,QAAQ,KAAK,KAAA;CACtF,IAAI,qBAAqB,SAAS,OAAO,GAAG,OAAO,MAAM,UAAU,QAAQ,KAAK,KAAA;AAElF;;;;;;AAqEA,SAAgB,eAAe,EAC7B,SACA,OACA,gBACA,gBACA,cACA,SACA,cACA,YACA,eACA,YACA,QACA,qBACA,kBACA,iBACA,mBACA,iBACA,kBACA,kBACA,wBACA,gBACA,cACA,aACA,gBACA,eACA,OACA,WACA,MACA,OACA,YACA,mBACA,OACA,4BACA,UACA,kBACA,eACA,iBACA,sBACA,uBACsB;CACtB,MAAM,EAAE,MAAM,gBAAgB,WAAW,yBAAA,GAAwBA,2BAAAA,cAAAA,CAAc;EACpE;EACT,QAAQ,kBAAkB;EAC1B,cAAc,EAAE,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe;CACzD,CAAC;CACD,MAAM,EAAE,MAAM,UAAUC,sBAAAA,iBAAiB;CAGzC,MAAM,WAAW,eACb,OAAO,MAAK,MAAK,EAAE,WAAW,YAAY,IAC1C,OAAO,MAAK,MAAK,EAAE,gBAAgB,IAAI;CAC3C,MAAM,aAAa,cAAc,OAAO,UAAU,YAAY,UAAU,QAAQ;CAChF,MAAM,WAAWC,uDAAAA,iBAAiB,UAAU,YAAY;CACxD,MAAM,mBAAmB,CAAC,EAAE,WAAW,qBAAqB;CAE5D,MAAM,kBAAA,GAAiBC,2BAAAA,wBAAAA,CAAwB;EAC7C,UAAU,mBAAmB,WAAW,KAAA;EACxC,cAAc,EAAE,SAAS,CAAC,EAAE,mBAAmB,WAAW,KAAA,GAAW;CACvE,CAAC;CAGD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mDAAAA,gBAAD;EACW;EACF;EACO;EACF;EACA;EACL;EACP,WAAW;EACF;EACK;EACO;EACrB,eAAe,iBAAiB;EACpB;EACJ;EACR,WAAU;EACV,eAAe;EACJ;EACL;EACC;EACK;EACO;EACZ;EACqB;EAClB;EACQ;EACA;EACD;EACA;EACjB,mBACE,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,oBAAD;GAA6B;GAA2B;EAAmB,CAAA,IAAI,KAAA;EAEpG,mBAnCuB,oBAAoB,kBAAkB,CAAC,CAAC,0BAqCxD,EAAE,cACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GACE,SAAS,UAAU,qBAAqB,KAAA;GACxC,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,oBAAD,CAAqB,CAAA;GAC3B,SAAQ;GACR,MAAK;GAEL,WAAU;GACV,eAAe,uBAAuB,IAAI;GAE1C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAuB,UAAA;GAAsB,CAAA;EACvD,CAAA,IAEV,KAAA;EAEU;EACD;EACf,eACE,WAAW,iBACT,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,mBAAD;GACW;GACT,QAAQ;GACR,MAAM,gBAAgB;GACtB,WAAW;GACX,eAAe,aAAa,KAAA,CAAS;GACrC,WAAW;GACX,aAAa;GACb,kBAAkB;GAClB,iBAAiB;EAClB,CAAA,IACC;CAEP,CAAA,GAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,qDAAAA,kBAAD;EACE,MAAM,CAAC,EAAE,WAAW,oBAAoB;EACxC,OAAO,SAAS,QAAQ,IAAI,IAAI;EAChC,UAAU,YAAY;EACT;EACG;EACF;EACd,eAAe,yBAAyB,KAAK;CAC9C,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"trace-span-panel.cjs.js","names":["useSpanDetail","useLinkComponent","getTraceThreadId","useThreadHasOtherTraces","_Fragment","TraceDataPanel","TraceMessagesPanel","Button","MessagesSquareIcon","SpanDataPanelView","TraceThreadPanel"],"sources":["../../../../src/domains/traces/components/trace-span-panel.tsx"],"sourcesContent":["import { useSpanDetail, useThreadHasOtherTraces } from '@mastra/react/hooks/traces';\nimport { MessagesSquareIcon } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { SpanDataPanelView } from '@/domains/traces/components/span-data-panel-view';\nimport { TraceDataPanel } from '@/domains/traces/components/trace-data-panel';\nimport type { TraceDataPanelView } from '@/domains/traces/components/trace-data-panel-view';\nimport { TraceMessagesPanel } from '@/domains/traces/components/trace-messages-panel';\nimport { getTraceThreadId } from '@/domains/traces/components/trace-thread-context';\nimport { TraceThreadPanel } from '@/domains/traces/components/trace-thread-panel';\nimport { Button } from '@/ds/components/Button';\nimport { useLinkComponent } from '@/lib/framework';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype TraceDataPanelViewProps = ComponentProps<typeof TraceDataPanelView>;\n\nfunction getEntityHref(\n  paths: LinkComponentPaths,\n  entityType: string | null | undefined,\n  entityId: string | null | undefined,\n) {\n  if (!entityId || !entityType) return undefined;\n  const normalizedEntityType = entityType.toLowerCase();\n  if (normalizedEntityType.includes('workflow')) return paths.workflowLink(entityId) || undefined;\n  if (normalizedEntityType.includes('agent')) return paths.agentLink(entityId) || undefined;\n  return undefined;\n}\ntype SpanDataPanelViewProps = ComponentProps<typeof SpanDataPanelView>;\n\nexport interface TraceSpanPanelProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Spans returned by `useTraceOrBranchSpans` — the page owns the fetch, the panel renders it. */\n  spans: TraceDataPanelViewProps['spans'];\n  isLoadingSpans: boolean;\n  /** Controlled span selection (URL state on the traces page, local state in the chat aside). */\n  selectedSpanId: string | null;\n  onSpanSelect: (spanId: string | undefined) => void;\n  onClose: () => void;\n\n  // Trace-panel pass-through.\n  anchorSpanId?: string;\n  entityType?: TraceDataPanelViewProps['entityType'];\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  onSaveAsDatasetItem?: TraceDataPanelViewProps['onSaveAsDatasetItem'];\n  feedbackTabBadge?: ReactNode;\n  feedbackTabSlot?: TraceDataPanelViewProps['feedbackTabSlot'];\n  /** Enables the \"Messages\" column (reconstructed turn) when the displayed root is a complete agent trace with a thread id. */\n  showPartialThread?: boolean;\n  /** Span ids featured in the timeline (non-featured spans are faded). */\n  featuredSpanIds?: string[];\n  /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  /** When true, opens the trace's thread (every turn) in a stacked drawer above the trace panel. */\n  isFullThreadOpen?: boolean;\n  /** Enables the in-place \"Open full thread\" swap; without it the action falls back to a link. */\n  onFullThreadOpenChange?: (open: boolean) => void;\n  /** Full-thread view: lists through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Full-thread view: shows the per-trace Feedback tab. */\n  withFeedback: boolean;\n  /** Full-thread view: opens a score of one of the thread's traces (the app owns routing). */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  scoresTabBadge?: ReactNode;\n  scoresTabSlot?: TraceDataPanelViewProps['scoresTabSlot'];\n  usage?: TraceDataPanelViewProps['usage'];\n  rootStreamingTimings?: TraceDataPanelViewProps['rootStreamingTimings'];\n  traceHref?: string;\n  /** Drawer width; defaults to `wide`. */\n  size?: TraceDataPanelViewProps['size'];\n  /** Sibling-drawer elevation (see `DataPanel`). */\n  depth?: TraceDataPanelViewProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. feedback context). */\n  headerSlot?: ReactNode;\n  /** Integration actions displayed alongside the trace controls. */\n  headerActionsSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  showUnavailableFeaturesMsg?: TraceDataPanelViewProps['showUnavailableFeaturesMsg'];\n  spanView?: TraceDataPanelViewProps['spanView'];\n  onSpanViewChange?: TraceDataPanelViewProps['onSpanViewChange'];\n\n  // Span-panel pass-through.\n  spanActiveTab?: SpanDataPanelViewProps['activeTab'];\n  onSpanTabChange?: SpanDataPanelViewProps['onTabChange'];\n  spanFeedbackTabBadge?: ReactNode;\n  spanFeedbackTabSlot?: SpanDataPanelViewProps['feedbackTabSlot'];\n}\n\n/**\n * Shared trace → span drilldown drawer: `TraceDataPanel` with a nested `SpanDataPanelView`.\n * Encapsulates the span-detail fetch and prev/next span navigation that the traces page\n * and the agent chat traces aside used to duplicate.\n */\nexport function TraceSpanPanel({\n  traceId,\n  spans,\n  isLoadingSpans,\n  selectedSpanId,\n  onSpanSelect,\n  onClose,\n  anchorSpanId,\n  entityType,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  onSaveAsDatasetItem,\n  feedbackTabBadge,\n  feedbackTabSlot,\n  showPartialThread,\n  featuredSpanIds,\n  onHighlightSpans,\n  isFullThreadOpen,\n  onFullThreadOpenChange,\n  withQueryTrace,\n  withFeedback,\n  onOpenScore,\n  scoresTabBadge,\n  scoresTabSlot,\n  usage,\n  rootStreamingTimings,\n  traceHref,\n  size,\n  depth,\n  headerSlot,\n  headerActionsSlot,\n  title,\n  showUnavailableFeaturesMsg,\n  spanView,\n  onSpanViewChange,\n  spanActiveTab,\n  onSpanTabChange,\n  spanFeedbackTabBadge,\n  spanFeedbackTabSlot,\n}: TraceSpanPanelProps) {\n  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail({\n    traceId: traceId,\n    spanId: selectedSpanId ?? '',\n    queryOptions: { enabled: !!traceId && !!selectedSpanId },\n  });\n  const { Link, paths } = useLinkComponent();\n\n  // The trace summary links the entity to its page; the app's link provider owns the routes.\n  const rootSpan = anchorSpanId\n    ? spans?.find(s => s.spanId === anchorSpanId)\n    : spans?.find(s => s.parentSpanId == null);\n  const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);\n  const threadId = getTraceThreadId(rootSpan, anchorSpanId);\n  const hasMessagesPanel = !!(traceId && showPartialThread && threadId);\n  // A single-trace thread would show exactly what the Messages column already shows.\n  const hasOtherTraces = useThreadHasOtherTraces({\n    threadId: hasMessagesPanel ? threadId : undefined,\n    queryOptions: { enabled: !!(hasMessagesPanel ? threadId : undefined) },\n  });\n  const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;\n\n  return (\n    <>\n      <TraceDataPanel\n        traceId={traceId}\n        spans={spans}\n        anchorSpanId={anchorSpanId}\n        entityType={entityType}\n        entityHref={entityHref}\n        usage={usage}\n        rootStreamingTimings={rootStreamingTimings}\n        isLoading={isLoadingSpans}\n        onClose={onClose}\n        onSpanSelect={onSpanSelect}\n        onSaveAsDatasetItem={onSaveAsDatasetItem}\n        initialSpanId={initialSpanId ?? selectedSpanId}\n        onPrevious={onPrevious}\n        onNext={onNext}\n        placement=\"traces-list\"\n        LinkComponent={Link}\n        traceHref={traceHref}\n        size={size}\n        depth={depth}\n        headerSlot={headerSlot}\n        headerActionsSlot={headerActionsSlot}\n        title={title}\n        showUnavailableFeaturesMsg={showUnavailableFeaturesMsg}\n        spanView={spanView}\n        onSpanViewChange={onSpanViewChange}\n        feedbackTabBadge={feedbackTabBadge}\n        feedbackTabSlot={feedbackTabSlot}\n        featuredSpanIds={featuredSpanIds}\n        messagesPanelSlot={\n          hasMessagesPanel ? <TraceMessagesPanel traceId={traceId} onHighlightSpans={onHighlightSpans} /> : undefined\n        }\n        sideHeaderActions={\n          showFullThreadAction\n            ? ({ compact }) => (\n                <Button\n                  tooltip={compact ? 'Open full thread' : undefined}\n                  icon={<MessagesSquareIcon />}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  // At a side column of 500px or less, collapse to a round icon button; the label stays for screen readers.\n                  className=\"@max-[501px]:w-control-sm @max-[501px]:rounded-full @max-[501px]:px-0 @max-[501px]:[&>[data-slot=button-icon]]:ml-0\"\n                  onClick={() => onFullThreadOpenChange(true)}\n                >\n                  <span className=\"@max-[501px]:sr-only\">Open full thread</span>\n                </Button>\n              )\n            : undefined\n        }\n        scoresTabBadge={scoresTabBadge}\n        scoresTabSlot={scoresTabSlot}\n        spanPanelSlot={\n          traceId && selectedSpanId ? (\n            <SpanDataPanelView\n              traceId={traceId}\n              spanId={selectedSpanId}\n              span={spanDetailData?.span}\n              isLoading={isLoadingSpanDetail}\n              onClose={() => onSpanSelect(undefined)}\n              activeTab={spanActiveTab}\n              onTabChange={onSpanTabChange}\n              feedbackTabBadge={spanFeedbackTabBadge}\n              feedbackTabSlot={spanFeedbackTabSlot}\n            />\n          ) : null\n        }\n      />\n      {/* Rendered after the trace panel: DataPanel stacking follows DOM order. */}\n      <TraceThreadPanel\n        open={!!(traceId && isFullThreadOpen && threadId)}\n        depth={depth && depth > 1 ? 3 : 2}\n        threadId={threadId ?? ''}\n        onOpenScore={onOpenScore}\n        withQueryTrace={withQueryTrace}\n        withFeedback={withFeedback}\n        onClose={() => onFullThreadOpenChange?.(false)}\n      />\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -20,7 +20,7 @@ function getEntityHref(paths, entityType, entityId) {
 * Encapsulates the span-detail fetch and prev/next span navigation that the traces page
 * and the agent chat traces aside used to duplicate.
 */
-function TraceSpanPanel({ traceId, spans, isLoadingSpans, selectedSpanId, onSpanSelect, onClose, anchorSpanId, entityType, initialSpanId, onPrevious, onNext, onSaveAsDatasetItem, feedbackTabBadge, feedbackTabSlot, showPartialThread, featuredSpanIds, onHighlightSpans, isFullThreadOpen, onFullThreadOpenChange, withQueryTrace, withFeedback, onOpenScore, scoresTabBadge, scoresTabSlot, usage, traceHref, size, depth, headerSlot, headerActionsSlot, title, showUnavailableFeaturesMsg, spanView, onSpanViewChange, spanActiveTab, onSpanTabChange, spanFeedbackTabBadge, spanFeedbackTabSlot }) {
+function TraceSpanPanel({ traceId, spans, isLoadingSpans, selectedSpanId, onSpanSelect, onClose, anchorSpanId, entityType, initialSpanId, onPrevious, onNext, onSaveAsDatasetItem, feedbackTabBadge, feedbackTabSlot, showPartialThread, featuredSpanIds, onHighlightSpans, isFullThreadOpen, onFullThreadOpenChange, withQueryTrace, withFeedback, onOpenScore, scoresTabBadge, scoresTabSlot, usage, rootStreamingTimings, traceHref, size, depth, headerSlot, headerActionsSlot, title, showUnavailableFeaturesMsg, spanView, onSpanViewChange, spanActiveTab, onSpanTabChange, spanFeedbackTabBadge, spanFeedbackTabSlot }) {
 	const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail({
 		traceId,
 		spanId: selectedSpanId ?? "",
@@ -42,6 +42,7 @@ function TraceSpanPanel({ traceId, spans, isLoadingSpans, selectedSpanId, onSpan
 		entityType,
 		entityHref,
 		usage,
+		rootStreamingTimings,
 		isLoading: isLoadingSpans,
 		onClose,
 		onSpanSelect,

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-panel.es.js","names":["_Fragment"],"sources":["../../../../src/domains/traces/components/trace-span-panel.tsx"],"sourcesContent":["import { useSpanDetail, useThreadHasOtherTraces } from '@mastra/react/hooks/traces';\nimport { MessagesSquareIcon } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { SpanDataPanelView } from '@/domains/traces/components/span-data-panel-view';\nimport { TraceDataPanel } from '@/domains/traces/components/trace-data-panel';\nimport type { TraceDataPanelView } from '@/domains/traces/components/trace-data-panel-view';\nimport { TraceMessagesPanel } from '@/domains/traces/components/trace-messages-panel';\nimport { getTraceThreadId } from '@/domains/traces/components/trace-thread-context';\nimport { TraceThreadPanel } from '@/domains/traces/components/trace-thread-panel';\nimport { Button } from '@/ds/components/Button';\nimport { useLinkComponent } from '@/lib/framework';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype TraceDataPanelViewProps = ComponentProps<typeof TraceDataPanelView>;\n\nfunction getEntityHref(\n  paths: LinkComponentPaths,\n  entityType: string | null | undefined,\n  entityId: string | null | undefined,\n) {\n  if (!entityId || !entityType) return undefined;\n  const normalizedEntityType = entityType.toLowerCase();\n  if (normalizedEntityType.includes('workflow')) return paths.workflowLink(entityId) || undefined;\n  if (normalizedEntityType.includes('agent')) return paths.agentLink(entityId) || undefined;\n  return undefined;\n}\ntype SpanDataPanelViewProps = ComponentProps<typeof SpanDataPanelView>;\n\nexport interface TraceSpanPanelProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Spans returned by `useTraceOrBranchSpans` — the page owns the fetch, the panel renders it. */\n  spans: TraceDataPanelViewProps['spans'];\n  isLoadingSpans: boolean;\n  /** Controlled span selection (URL state on the traces page, local state in the chat aside). */\n  selectedSpanId: string | null;\n  onSpanSelect: (spanId: string | undefined) => void;\n  onClose: () => void;\n\n  // Trace-panel pass-through.\n  anchorSpanId?: string;\n  entityType?: TraceDataPanelViewProps['entityType'];\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  onSaveAsDatasetItem?: TraceDataPanelViewProps['onSaveAsDatasetItem'];\n  feedbackTabBadge?: ReactNode;\n  feedbackTabSlot?: TraceDataPanelViewProps['feedbackTabSlot'];\n  /** Enables the \"Messages\" column (reconstructed turn) when the displayed root is a complete agent trace with a thread id. */\n  showPartialThread?: boolean;\n  /** Span ids featured in the timeline (non-featured spans are faded). */\n  featuredSpanIds?: string[];\n  /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  /** When true, opens the trace's thread (every turn) in a stacked drawer above the trace panel. */\n  isFullThreadOpen?: boolean;\n  /** Enables the in-place \"Open full thread\" swap; without it the action falls back to a link. */\n  onFullThreadOpenChange?: (open: boolean) => void;\n  /** Full-thread view: lists through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Full-thread view: shows the per-trace Feedback tab. */\n  withFeedback: boolean;\n  /** Full-thread view: opens a score of one of the thread's traces (the app owns routing). */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  scoresTabBadge?: ReactNode;\n  scoresTabSlot?: TraceDataPanelViewProps['scoresTabSlot'];\n  usage?: TraceDataPanelViewProps['usage'];\n  traceHref?: string;\n  /** Drawer width; defaults to `wide`. */\n  size?: TraceDataPanelViewProps['size'];\n  /** Sibling-drawer elevation (see `DataPanel`). */\n  depth?: TraceDataPanelViewProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. feedback context). */\n  headerSlot?: ReactNode;\n  /** Integration actions displayed alongside the trace controls. */\n  headerActionsSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  showUnavailableFeaturesMsg?: TraceDataPanelViewProps['showUnavailableFeaturesMsg'];\n  spanView?: TraceDataPanelViewProps['spanView'];\n  onSpanViewChange?: TraceDataPanelViewProps['onSpanViewChange'];\n\n  // Span-panel pass-through.\n  spanActiveTab?: SpanDataPanelViewProps['activeTab'];\n  onSpanTabChange?: SpanDataPanelViewProps['onTabChange'];\n  spanFeedbackTabBadge?: ReactNode;\n  spanFeedbackTabSlot?: SpanDataPanelViewProps['feedbackTabSlot'];\n}\n\n/**\n * Shared trace → span drilldown drawer: `TraceDataPanel` with a nested `SpanDataPanelView`.\n * Encapsulates the span-detail fetch and prev/next span navigation that the traces page\n * and the agent chat traces aside used to duplicate.\n */\nexport function TraceSpanPanel({\n  traceId,\n  spans,\n  isLoadingSpans,\n  selectedSpanId,\n  onSpanSelect,\n  onClose,\n  anchorSpanId,\n  entityType,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  onSaveAsDatasetItem,\n  feedbackTabBadge,\n  feedbackTabSlot,\n  showPartialThread,\n  featuredSpanIds,\n  onHighlightSpans,\n  isFullThreadOpen,\n  onFullThreadOpenChange,\n  withQueryTrace,\n  withFeedback,\n  onOpenScore,\n  scoresTabBadge,\n  scoresTabSlot,\n  usage,\n  traceHref,\n  size,\n  depth,\n  headerSlot,\n  headerActionsSlot,\n  title,\n  showUnavailableFeaturesMsg,\n  spanView,\n  onSpanViewChange,\n  spanActiveTab,\n  onSpanTabChange,\n  spanFeedbackTabBadge,\n  spanFeedbackTabSlot,\n}: TraceSpanPanelProps) {\n  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail({\n    traceId: traceId,\n    spanId: selectedSpanId ?? '',\n    queryOptions: { enabled: !!traceId && !!selectedSpanId },\n  });\n  const { Link, paths } = useLinkComponent();\n\n  // The trace summary links the entity to its page; the app's link provider owns the routes.\n  const rootSpan = anchorSpanId\n    ? spans?.find(s => s.spanId === anchorSpanId)\n    : spans?.find(s => s.parentSpanId == null);\n  const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);\n  const threadId = getTraceThreadId(rootSpan, anchorSpanId);\n  const hasMessagesPanel = !!(traceId && showPartialThread && threadId);\n  // A single-trace thread would show exactly what the Messages column already shows.\n  const hasOtherTraces = useThreadHasOtherTraces({\n    threadId: hasMessagesPanel ? threadId : undefined,\n    queryOptions: { enabled: !!(hasMessagesPanel ? threadId : undefined) },\n  });\n  const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;\n\n  return (\n    <>\n      <TraceDataPanel\n        traceId={traceId}\n        spans={spans}\n        anchorSpanId={anchorSpanId}\n        entityType={entityType}\n        entityHref={entityHref}\n        usage={usage}\n        isLoading={isLoadingSpans}\n        onClose={onClose}\n        onSpanSelect={onSpanSelect}\n        onSaveAsDatasetItem={onSaveAsDatasetItem}\n        initialSpanId={initialSpanId ?? selectedSpanId}\n        onPrevious={onPrevious}\n        onNext={onNext}\n        placement=\"traces-list\"\n        LinkComponent={Link}\n        traceHref={traceHref}\n        size={size}\n        depth={depth}\n        headerSlot={headerSlot}\n        headerActionsSlot={headerActionsSlot}\n        title={title}\n        showUnavailableFeaturesMsg={showUnavailableFeaturesMsg}\n        spanView={spanView}\n        onSpanViewChange={onSpanViewChange}\n        feedbackTabBadge={feedbackTabBadge}\n        feedbackTabSlot={feedbackTabSlot}\n        featuredSpanIds={featuredSpanIds}\n        messagesPanelSlot={\n          hasMessagesPanel ? <TraceMessagesPanel traceId={traceId} onHighlightSpans={onHighlightSpans} /> : undefined\n        }\n        sideHeaderActions={\n          showFullThreadAction\n            ? ({ compact }) => (\n                <Button\n                  tooltip={compact ? 'Open full thread' : undefined}\n                  icon={<MessagesSquareIcon />}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  // At a side column of 500px or less, collapse to a round icon button; the label stays for screen readers.\n                  className=\"@max-[501px]:w-control-sm @max-[501px]:rounded-full @max-[501px]:px-0 @max-[501px]:[&>[data-slot=button-icon]]:ml-0\"\n                  onClick={() => onFullThreadOpenChange(true)}\n                >\n                  <span className=\"@max-[501px]:sr-only\">Open full thread</span>\n                </Button>\n              )\n            : undefined\n        }\n        scoresTabBadge={scoresTabBadge}\n        scoresTabSlot={scoresTabSlot}\n        spanPanelSlot={\n          traceId && selectedSpanId ? (\n            <SpanDataPanelView\n              traceId={traceId}\n              spanId={selectedSpanId}\n              span={spanDetailData?.span}\n              isLoading={isLoadingSpanDetail}\n              onClose={() => onSpanSelect(undefined)}\n              activeTab={spanActiveTab}\n              onTabChange={onSpanTabChange}\n              feedbackTabBadge={spanFeedbackTabBadge}\n              feedbackTabSlot={spanFeedbackTabSlot}\n            />\n          ) : null\n        }\n      />\n      {/* Rendered after the trace panel: DataPanel stacking follows DOM order. */}\n      <TraceThreadPanel\n        open={!!(traceId && isFullThreadOpen && threadId)}\n        depth={depth && depth > 1 ? 3 : 2}\n        threadId={threadId ?? ''}\n        onOpenScore={onOpenScore}\n        withQueryTrace={withQueryTrace}\n        withFeedback={withFeedback}\n        onClose={() => onFullThreadOpenChange?.(false)}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAeA,SAAS,cACP,OACA,YACA,UACA;CACA,IAAI,CAAC,YAAY,CAAC,YAAY,OAAO,KAAA;CACrC,MAAM,uBAAuB,WAAW,YAAY;CACpD,IAAI,qBAAqB,SAAS,UAAU,GAAG,OAAO,MAAM,aAAa,QAAQ,KAAK,KAAA;CACtF,IAAI,qBAAqB,SAAS,OAAO,GAAG,OAAO,MAAM,UAAU,QAAQ,KAAK,KAAA;AAElF;;;;;;AAqEA,SAAgB,eAAe,EAC7B,SACA,OACA,gBACA,gBACA,cACA,SACA,cACA,YACA,eACA,YACA,QACA,qBACA,kBACA,iBACA,mBACA,iBACA,kBACA,kBACA,wBACA,gBACA,cACA,aACA,gBACA,eACA,OACA,WACA,MACA,OACA,YACA,mBACA,OACA,4BACA,UACA,kBACA,eACA,iBACA,sBACA,uBACsB;CACtB,MAAM,EAAE,MAAM,gBAAgB,WAAW,wBAAwB,cAAc;EACpE;EACT,QAAQ,kBAAkB;EAC1B,cAAc,EAAE,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe;CACzD,CAAC;CACD,MAAM,EAAE,MAAM,UAAU,iBAAiB;CAGzC,MAAM,WAAW,eACb,OAAO,MAAK,MAAK,EAAE,WAAW,YAAY,IAC1C,OAAO,MAAK,MAAK,EAAE,gBAAgB,IAAI;CAC3C,MAAM,aAAa,cAAc,OAAO,UAAU,YAAY,UAAU,QAAQ;CAChF,MAAM,WAAW,iBAAiB,UAAU,YAAY;CACxD,MAAM,mBAAmB,CAAC,EAAE,WAAW,qBAAqB;CAE5D,MAAM,iBAAiB,wBAAwB;EAC7C,UAAU,mBAAmB,WAAW,KAAA;EACxC,cAAc,EAAE,SAAS,CAAC,EAAE,mBAAmB,WAAW,KAAA,GAAW;CACvE,CAAC;CAGD,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD;EACW;EACF;EACO;EACF;EACA;EACL;EACP,WAAW;EACF;EACK;EACO;EACrB,eAAe,iBAAiB;EACpB;EACJ;EACR,WAAU;EACV,eAAe;EACJ;EACL;EACC;EACK;EACO;EACZ;EACqB;EAClB;EACQ;EACA;EACD;EACA;EACjB,mBACE,mBAAmB,oBAAC,oBAAD;GAA6B;GAA2B;EAAmB,CAAA,IAAI,KAAA;EAEpG,mBAnCuB,oBAAoB,kBAAkB,CAAC,CAAC,0BAqCxD,EAAE,cACD,oBAAC,QAAD;GACE,SAAS,UAAU,qBAAqB,KAAA;GACxC,MAAM,oBAAC,oBAAD,CAAqB,CAAA;GAC3B,SAAQ;GACR,MAAK;GAEL,WAAU;GACV,eAAe,uBAAuB,IAAI;GAE1C,UAAA,oBAAC,QAAD;IAAM,WAAU;IAAuB,UAAA;GAAsB,CAAA;EACvD,CAAA,IAEV,KAAA;EAEU;EACD;EACf,eACE,WAAW,iBACT,oBAAC,mBAAD;GACW;GACT,QAAQ;GACR,MAAM,gBAAgB;GACtB,WAAW;GACX,eAAe,aAAa,KAAA,CAAS;GACrC,WAAW;GACX,aAAa;GACb,kBAAkB;GAClB,iBAAiB;EAClB,CAAA,IACC;CAEP,CAAA,GAED,oBAAC,kBAAD;EACE,MAAM,CAAC,EAAE,WAAW,oBAAoB;EACxC,OAAO,SAAS,QAAQ,IAAI,IAAI;EAChC,UAAU,YAAY;EACT;EACG;EACF;EACd,eAAe,yBAAyB,KAAK;CAC9C,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"trace-span-panel.es.js","names":["_Fragment"],"sources":["../../../../src/domains/traces/components/trace-span-panel.tsx"],"sourcesContent":["import { useSpanDetail, useThreadHasOtherTraces } from '@mastra/react/hooks/traces';\nimport { MessagesSquareIcon } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { SpanDataPanelView } from '@/domains/traces/components/span-data-panel-view';\nimport { TraceDataPanel } from '@/domains/traces/components/trace-data-panel';\nimport type { TraceDataPanelView } from '@/domains/traces/components/trace-data-panel-view';\nimport { TraceMessagesPanel } from '@/domains/traces/components/trace-messages-panel';\nimport { getTraceThreadId } from '@/domains/traces/components/trace-thread-context';\nimport { TraceThreadPanel } from '@/domains/traces/components/trace-thread-panel';\nimport { Button } from '@/ds/components/Button';\nimport { useLinkComponent } from '@/lib/framework';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype TraceDataPanelViewProps = ComponentProps<typeof TraceDataPanelView>;\n\nfunction getEntityHref(\n  paths: LinkComponentPaths,\n  entityType: string | null | undefined,\n  entityId: string | null | undefined,\n) {\n  if (!entityId || !entityType) return undefined;\n  const normalizedEntityType = entityType.toLowerCase();\n  if (normalizedEntityType.includes('workflow')) return paths.workflowLink(entityId) || undefined;\n  if (normalizedEntityType.includes('agent')) return paths.agentLink(entityId) || undefined;\n  return undefined;\n}\ntype SpanDataPanelViewProps = ComponentProps<typeof SpanDataPanelView>;\n\nexport interface TraceSpanPanelProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Spans returned by `useTraceOrBranchSpans` — the page owns the fetch, the panel renders it. */\n  spans: TraceDataPanelViewProps['spans'];\n  isLoadingSpans: boolean;\n  /** Controlled span selection (URL state on the traces page, local state in the chat aside). */\n  selectedSpanId: string | null;\n  onSpanSelect: (spanId: string | undefined) => void;\n  onClose: () => void;\n\n  // Trace-panel pass-through.\n  anchorSpanId?: string;\n  entityType?: TraceDataPanelViewProps['entityType'];\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  onSaveAsDatasetItem?: TraceDataPanelViewProps['onSaveAsDatasetItem'];\n  feedbackTabBadge?: ReactNode;\n  feedbackTabSlot?: TraceDataPanelViewProps['feedbackTabSlot'];\n  /** Enables the \"Messages\" column (reconstructed turn) when the displayed root is a complete agent trace with a thread id. */\n  showPartialThread?: boolean;\n  /** Span ids featured in the timeline (non-featured spans are faded). */\n  featuredSpanIds?: string[];\n  /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  /** When true, opens the trace's thread (every turn) in a stacked drawer above the trace panel. */\n  isFullThreadOpen?: boolean;\n  /** Enables the in-place \"Open full thread\" swap; without it the action falls back to a link. */\n  onFullThreadOpenChange?: (open: boolean) => void;\n  /** Full-thread view: lists through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Full-thread view: shows the per-trace Feedback tab. */\n  withFeedback: boolean;\n  /** Full-thread view: opens a score of one of the thread's traces (the app owns routing). */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  scoresTabBadge?: ReactNode;\n  scoresTabSlot?: TraceDataPanelViewProps['scoresTabSlot'];\n  usage?: TraceDataPanelViewProps['usage'];\n  rootStreamingTimings?: TraceDataPanelViewProps['rootStreamingTimings'];\n  traceHref?: string;\n  /** Drawer width; defaults to `wide`. */\n  size?: TraceDataPanelViewProps['size'];\n  /** Sibling-drawer elevation (see `DataPanel`). */\n  depth?: TraceDataPanelViewProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. feedback context). */\n  headerSlot?: ReactNode;\n  /** Integration actions displayed alongside the trace controls. */\n  headerActionsSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  showUnavailableFeaturesMsg?: TraceDataPanelViewProps['showUnavailableFeaturesMsg'];\n  spanView?: TraceDataPanelViewProps['spanView'];\n  onSpanViewChange?: TraceDataPanelViewProps['onSpanViewChange'];\n\n  // Span-panel pass-through.\n  spanActiveTab?: SpanDataPanelViewProps['activeTab'];\n  onSpanTabChange?: SpanDataPanelViewProps['onTabChange'];\n  spanFeedbackTabBadge?: ReactNode;\n  spanFeedbackTabSlot?: SpanDataPanelViewProps['feedbackTabSlot'];\n}\n\n/**\n * Shared trace → span drilldown drawer: `TraceDataPanel` with a nested `SpanDataPanelView`.\n * Encapsulates the span-detail fetch and prev/next span navigation that the traces page\n * and the agent chat traces aside used to duplicate.\n */\nexport function TraceSpanPanel({\n  traceId,\n  spans,\n  isLoadingSpans,\n  selectedSpanId,\n  onSpanSelect,\n  onClose,\n  anchorSpanId,\n  entityType,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  onSaveAsDatasetItem,\n  feedbackTabBadge,\n  feedbackTabSlot,\n  showPartialThread,\n  featuredSpanIds,\n  onHighlightSpans,\n  isFullThreadOpen,\n  onFullThreadOpenChange,\n  withQueryTrace,\n  withFeedback,\n  onOpenScore,\n  scoresTabBadge,\n  scoresTabSlot,\n  usage,\n  rootStreamingTimings,\n  traceHref,\n  size,\n  depth,\n  headerSlot,\n  headerActionsSlot,\n  title,\n  showUnavailableFeaturesMsg,\n  spanView,\n  onSpanViewChange,\n  spanActiveTab,\n  onSpanTabChange,\n  spanFeedbackTabBadge,\n  spanFeedbackTabSlot,\n}: TraceSpanPanelProps) {\n  const { data: spanDetailData, isLoading: isLoadingSpanDetail } = useSpanDetail({\n    traceId: traceId,\n    spanId: selectedSpanId ?? '',\n    queryOptions: { enabled: !!traceId && !!selectedSpanId },\n  });\n  const { Link, paths } = useLinkComponent();\n\n  // The trace summary links the entity to its page; the app's link provider owns the routes.\n  const rootSpan = anchorSpanId\n    ? spans?.find(s => s.spanId === anchorSpanId)\n    : spans?.find(s => s.parentSpanId == null);\n  const entityHref = getEntityHref(paths, rootSpan?.entityType, rootSpan?.entityId);\n  const threadId = getTraceThreadId(rootSpan, anchorSpanId);\n  const hasMessagesPanel = !!(traceId && showPartialThread && threadId);\n  // A single-trace thread would show exactly what the Messages column already shows.\n  const hasOtherTraces = useThreadHasOtherTraces({\n    threadId: hasMessagesPanel ? threadId : undefined,\n    queryOptions: { enabled: !!(hasMessagesPanel ? threadId : undefined) },\n  });\n  const showFullThreadAction = hasMessagesPanel && hasOtherTraces && !!onFullThreadOpenChange;\n\n  return (\n    <>\n      <TraceDataPanel\n        traceId={traceId}\n        spans={spans}\n        anchorSpanId={anchorSpanId}\n        entityType={entityType}\n        entityHref={entityHref}\n        usage={usage}\n        rootStreamingTimings={rootStreamingTimings}\n        isLoading={isLoadingSpans}\n        onClose={onClose}\n        onSpanSelect={onSpanSelect}\n        onSaveAsDatasetItem={onSaveAsDatasetItem}\n        initialSpanId={initialSpanId ?? selectedSpanId}\n        onPrevious={onPrevious}\n        onNext={onNext}\n        placement=\"traces-list\"\n        LinkComponent={Link}\n        traceHref={traceHref}\n        size={size}\n        depth={depth}\n        headerSlot={headerSlot}\n        headerActionsSlot={headerActionsSlot}\n        title={title}\n        showUnavailableFeaturesMsg={showUnavailableFeaturesMsg}\n        spanView={spanView}\n        onSpanViewChange={onSpanViewChange}\n        feedbackTabBadge={feedbackTabBadge}\n        feedbackTabSlot={feedbackTabSlot}\n        featuredSpanIds={featuredSpanIds}\n        messagesPanelSlot={\n          hasMessagesPanel ? <TraceMessagesPanel traceId={traceId} onHighlightSpans={onHighlightSpans} /> : undefined\n        }\n        sideHeaderActions={\n          showFullThreadAction\n            ? ({ compact }) => (\n                <Button\n                  tooltip={compact ? 'Open full thread' : undefined}\n                  icon={<MessagesSquareIcon />}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  // At a side column of 500px or less, collapse to a round icon button; the label stays for screen readers.\n                  className=\"@max-[501px]:w-control-sm @max-[501px]:rounded-full @max-[501px]:px-0 @max-[501px]:[&>[data-slot=button-icon]]:ml-0\"\n                  onClick={() => onFullThreadOpenChange(true)}\n                >\n                  <span className=\"@max-[501px]:sr-only\">Open full thread</span>\n                </Button>\n              )\n            : undefined\n        }\n        scoresTabBadge={scoresTabBadge}\n        scoresTabSlot={scoresTabSlot}\n        spanPanelSlot={\n          traceId && selectedSpanId ? (\n            <SpanDataPanelView\n              traceId={traceId}\n              spanId={selectedSpanId}\n              span={spanDetailData?.span}\n              isLoading={isLoadingSpanDetail}\n              onClose={() => onSpanSelect(undefined)}\n              activeTab={spanActiveTab}\n              onTabChange={onSpanTabChange}\n              feedbackTabBadge={spanFeedbackTabBadge}\n              feedbackTabSlot={spanFeedbackTabSlot}\n            />\n          ) : null\n        }\n      />\n      {/* Rendered after the trace panel: DataPanel stacking follows DOM order. */}\n      <TraceThreadPanel\n        open={!!(traceId && isFullThreadOpen && threadId)}\n        depth={depth && depth > 1 ? 3 : 2}\n        threadId={threadId ?? ''}\n        onOpenScore={onOpenScore}\n        withQueryTrace={withQueryTrace}\n        withFeedback={withFeedback}\n        onClose={() => onFullThreadOpenChange?.(false)}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAeA,SAAS,cACP,OACA,YACA,UACA;CACA,IAAI,CAAC,YAAY,CAAC,YAAY,OAAO,KAAA;CACrC,MAAM,uBAAuB,WAAW,YAAY;CACpD,IAAI,qBAAqB,SAAS,UAAU,GAAG,OAAO,MAAM,aAAa,QAAQ,KAAK,KAAA;CACtF,IAAI,qBAAqB,SAAS,OAAO,GAAG,OAAO,MAAM,UAAU,QAAQ,KAAK,KAAA;AAElF;;;;;;AAsEA,SAAgB,eAAe,EAC7B,SACA,OACA,gBACA,gBACA,cACA,SACA,cACA,YACA,eACA,YACA,QACA,qBACA,kBACA,iBACA,mBACA,iBACA,kBACA,kBACA,wBACA,gBACA,cACA,aACA,gBACA,eACA,OACA,sBACA,WACA,MACA,OACA,YACA,mBACA,OACA,4BACA,UACA,kBACA,eACA,iBACA,sBACA,uBACsB;CACtB,MAAM,EAAE,MAAM,gBAAgB,WAAW,wBAAwB,cAAc;EACpE;EACT,QAAQ,kBAAkB;EAC1B,cAAc,EAAE,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe;CACzD,CAAC;CACD,MAAM,EAAE,MAAM,UAAU,iBAAiB;CAGzC,MAAM,WAAW,eACb,OAAO,MAAK,MAAK,EAAE,WAAW,YAAY,IAC1C,OAAO,MAAK,MAAK,EAAE,gBAAgB,IAAI;CAC3C,MAAM,aAAa,cAAc,OAAO,UAAU,YAAY,UAAU,QAAQ;CAChF,MAAM,WAAW,iBAAiB,UAAU,YAAY;CACxD,MAAM,mBAAmB,CAAC,EAAE,WAAW,qBAAqB;CAE5D,MAAM,iBAAiB,wBAAwB;EAC7C,UAAU,mBAAmB,WAAW,KAAA;EACxC,cAAc,EAAE,SAAS,CAAC,EAAE,mBAAmB,WAAW,KAAA,GAAW;CACvE,CAAC;CAGD,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD;EACW;EACF;EACO;EACF;EACA;EACL;EACe;EACtB,WAAW;EACF;EACK;EACO;EACrB,eAAe,iBAAiB;EACpB;EACJ;EACR,WAAU;EACV,eAAe;EACJ;EACL;EACC;EACK;EACO;EACZ;EACqB;EAClB;EACQ;EACA;EACD;EACA;EACjB,mBACE,mBAAmB,oBAAC,oBAAD;GAA6B;GAA2B;EAAmB,CAAA,IAAI,KAAA;EAEpG,mBApCuB,oBAAoB,kBAAkB,CAAC,CAAC,0BAsCxD,EAAE,cACD,oBAAC,QAAD;GACE,SAAS,UAAU,qBAAqB,KAAA;GACxC,MAAM,oBAAC,oBAAD,CAAqB,CAAA;GAC3B,SAAQ;GACR,MAAK;GAEL,WAAU;GACV,eAAe,uBAAuB,IAAI;GAE1C,UAAA,oBAAC,QAAD;IAAM,WAAU;IAAuB,UAAA;GAAsB,CAAA;EACvD,CAAA,IAEV,KAAA;EAEU;EACD;EACf,eACE,WAAW,iBACT,oBAAC,mBAAD;GACW;GACT,QAAQ;GACR,MAAM,gBAAgB;GACtB,WAAW;GACX,eAAe,aAAa,KAAA,CAAS;GACrC,WAAW;GACX,aAAa;GACb,kBAAkB;GAClB,iBAAiB;EAClB,CAAA,IACC;CAEP,CAAA,GAED,oBAAC,kBAAD;EACE,MAAM,CAAC,EAAE,WAAW,oBAAoB;EACxC,OAAO,SAAS,QAAQ,IAAI,IAAI;EAChC,UAAU,YAAY;EACT;EACG;EACF;EACd,eAAe,yBAAyB,KAAK;CAC9C,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/domains/traces/components/trace-span-timeline-markers.cjs.js

@@ -0,0 +1,120 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("../../../utils-uDc1ofX1.cjs");
+const require_utils_duration = require("../../../utils/duration.cjs.js");
+const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
+const require_components_Collapsible = require("../../../components/Collapsible.cjs.js");
+const require_components_DisclosureChevron = require("../../../components/DisclosureChevron.cjs.js");
+const require_domains_traces_utils_span_timeline = require("../utils/span-timeline.cjs.js");
+const require_domains_traces_components_span_tree_rail = require("./span-tree-rail.cjs.js");
+const require_domains_traces_components_span_timeline_row = require("./span-timeline-row.cjs.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+// src/domains/traces/components/trace-span-timeline-markers.tsx
+var SUBGRID_PANEL_STYLE = {
+	gridColumn: "1 / -1",
+	display: "grid",
+	gridTemplateColumns: "subgrid"
+};
+/** A "Metrics" row, closed by default, revealing one row per streaming timing laid out like the span rows. */
+function TimelineTimingRows({ layout }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Collapsible.Collapsible, {
+		className: "col-span-2 grid grid-cols-subgrid",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "col-span-2 grid grid-cols-subgrid items-stretch",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex min-w-0 items-center pl-1",
+				style: { paddingBlock: require_domains_traces_components_span_tree_rail.SPAN_TREE_PAD_Y },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Collapsible.CollapsibleTrigger, {
+					className: "flex min-w-0 items-center rounded-sm text-muted-foreground",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "flex shrink-0 items-center justify-center",
+						style: {
+							width: 24,
+							height: 20
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_DisclosureChevron.DisclosureChevron, {
+							direction: "right",
+							className: "size-3"
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "body-sm",
+						className: "min-w-0 truncate px-2",
+						children: "Metrics"
+					})]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_utils.cn("flex min-w-0", require_domains_traces_utils_span_timeline.TIMELINE_TRACK_PADDING),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "relative flex-1",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_timeline_row.TimelineGridlines, {})
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Collapsible.CollapsibleContent, {
+			style: SUBGRID_PANEL_STYLE,
+			className: "col-span-2 grid grid-cols-subgrid gap-y-px",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimingRow, {
+				name: "Time to first chunk",
+				bar: layout.firstChunk
+			}), layout.firstToken && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimingRow, {
+				name: "Time to first token",
+				bar: layout.firstToken
+			})]
+		})]
+	});
+}
+function TimingRow({ name, bar }) {
+	const { durationMs, leftPercent, widthPercent } = bar;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "group",
+		"aria-label": name,
+		className: "col-span-2 grid grid-cols-subgrid items-stretch",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 items-center pl-1",
+			style: { paddingBlock: require_domains_traces_components_span_tree_rail.SPAN_TREE_PAD_Y },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				className: "flex shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-3.5",
+				style: {
+					width: 24,
+					height: 20
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TimerIcon, {})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "body-sm",
+				tone: "muted",
+				className: "min-w-0 truncate px-2",
+				children: name
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_utils.cn("flex min-w-0", require_domains_traces_utils_span_timeline.TIMELINE_TRACK_PADDING),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative flex-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_timeline_row.TimelineGridlines, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-testid": "streaming-timing-bar",
+						className: "absolute top-1/2 h-3 -translate-y-1/2 rounded-sm border border-dashed border-muted-foreground bg-fill-subtle",
+						style: {
+							left: `${leftPercent}%`,
+							width: widthPercent ? `${widthPercent}%` : "2px"
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "body-sm",
+						tone: "muted",
+						className: "absolute top-1/2 ml-1.5 -translate-y-1/2 whitespace-nowrap tabular-nums",
+						style: { left: `${leftPercent + widthPercent}%` },
+						children: require_utils_duration.formatDuration(durationMs)
+					})
+				]
+			})
+		})]
+	});
+}
+exports.TimelineTimingRows = TimelineTimingRows;
+
+//# sourceMappingURL=trace-span-timeline-markers.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-span-timeline-markers.cjs.js","names":["Collapsible","SPAN_TREE_PAD_Y","CollapsibleTrigger","DisclosureChevron","Txt","cn","TIMELINE_TRACK_PADDING","TimelineGridlines","CollapsibleContent","TimerIcon","formatDuration"],"sources":["../../../../src/domains/traces/components/trace-span-timeline-markers.tsx"],"sourcesContent":["import { TimerIcon } from 'lucide-react';\nimport { TIMELINE_TRACK_PADDING } from '../utils/span-timeline';\nimport type { TimelineMarkersLayout, TimelineTimingBar } from '../utils/timeline-markers';\nimport { TimelineGridlines } from './span-timeline-row';\nimport { SPAN_TREE_INDENT, SPAN_TREE_LINE, SPAN_TREE_PAD_Y } from './span-tree-rail';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDuration } from '@/utils/duration';\n\n// The panel sits in the timeline grid, so it spans both columns and hands them down to the rows.\nconst SUBGRID_PANEL_STYLE = { gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: 'subgrid' } as const;\n\n/** A \"Metrics\" row, closed by default, revealing one row per streaming timing laid out like the span rows. */\nexport function TimelineTimingRows({ layout }: { layout: TimelineMarkersLayout }) {\n  return (\n    <Collapsible className=\"col-span-2 grid grid-cols-subgrid\">\n      <div className=\"col-span-2 grid grid-cols-subgrid items-stretch\">\n        <div className=\"flex min-w-0 items-center pl-1\" style={{ paddingBlock: SPAN_TREE_PAD_Y }}>\n          <CollapsibleTrigger className=\"flex min-w-0 items-center rounded-sm text-muted-foreground\">\n            <span\n              aria-hidden\n              className=\"flex shrink-0 items-center justify-center\"\n              style={{ width: SPAN_TREE_INDENT, height: SPAN_TREE_LINE }}\n            >\n              <DisclosureChevron direction=\"right\" className=\"size-3\" />\n            </span>\n            <Txt as=\"span\" variant=\"body-sm\" className=\"min-w-0 truncate px-2\">\n              Metrics\n            </Txt>\n          </CollapsibleTrigger>\n        </div>\n        <div className={cn('flex min-w-0', TIMELINE_TRACK_PADDING)}>\n          <div className=\"relative flex-1\">\n            <TimelineGridlines />\n          </div>\n        </div>\n      </div>\n      <CollapsibleContent style={SUBGRID_PANEL_STYLE} className=\"col-span-2 grid grid-cols-subgrid gap-y-px\">\n        <TimingRow name=\"Time to first chunk\" bar={layout.firstChunk} />\n        {layout.firstToken && <TimingRow name=\"Time to first token\" bar={layout.firstToken} />}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nfunction TimingRow({ name, bar }: { name: string; bar: TimelineTimingBar }) {\n  const { durationMs, leftPercent, widthPercent } = bar;\n\n  return (\n    <div role=\"group\" aria-label={name} className=\"col-span-2 grid grid-cols-subgrid items-stretch\">\n      <div className=\"flex min-w-0 items-center pl-1\" style={{ paddingBlock: SPAN_TREE_PAD_Y }}>\n        <span\n          aria-hidden\n          className=\"flex shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-3.5\"\n          style={{ width: SPAN_TREE_INDENT, height: SPAN_TREE_LINE }}\n        >\n          <TimerIcon />\n        </span>\n        <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"min-w-0 truncate px-2\">\n          {name}\n        </Txt>\n      </div>\n\n      <div className={cn('flex min-w-0', TIMELINE_TRACK_PADDING)}>\n        <div className=\"relative flex-1\">\n          <TimelineGridlines />\n          <div\n            data-testid=\"streaming-timing-bar\"\n            className=\"absolute top-1/2 h-3 -translate-y-1/2 rounded-sm border border-dashed border-muted-foreground bg-fill-subtle\"\n            style={{ left: `${leftPercent}%`, width: widthPercent ? `${widthPercent}%` : '2px' }}\n          />\n          <Txt\n            as=\"span\"\n            variant=\"body-sm\"\n            tone=\"muted\"\n            className=\"absolute top-1/2 ml-1.5 -translate-y-1/2 whitespace-nowrap tabular-nums\"\n            style={{ left: `${leftPercent + widthPercent}%` }}\n          >\n            {formatDuration(durationMs)}\n          </Txt>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/traces/components/trace-span-timeline-markers.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/domains/traces/components/trace-span-timeline-markers';