npm - @mastra/playground-ui - Versions diffs - 55.0.0 → 56.0.0-alpha.10 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1813) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-data-panel-view.es.js","sources":["../../../../src/domains/traces/components/trace-data-panel-view.tsx"],"sourcesContent":["import {\n CircleGaugeIcon,\n ChevronsDownUpIcon,\n ChevronsUpDownIcon,\n DownloadIcon,\n Link2Icon,\n Loader2Icon,\n MoreHorizontalIcon,\n SaveIcon,\n WrenchIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { SearchableSpan } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { useScrollToFirstHighlight } from '@/hooks/use-scroll-to-first-highlight';\nimport { useTextHighlight } from '@/hooks/use-text-highlight';\nimport { cn } from '@/lib/utils';\n\nexport type TraceDataPanelPlacement = 'traces-list' \| 'trace-page';\n\nexport type TraceDataPanelTab = 'details' \| 'timeline' \| 'scores' \| 'feedback';\n\nexport interface TraceDataPanelViewProps {\n traceId: string;\n /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. /\n spans: SearchableSpan[] \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n onSpanSelect?: (spanId: string \| undefined) => void;\n onEvaluateTrace?: () => void;\n /* When set, an \"Add full trace to dataset\" button appears; the consumer owns the dialog. /\n onSaveAsDatasetItem?: (args: { traceId: string; rootSpanId: string \| undefined }) => void;\n /* When set, an \"Add tool mocks to item\" button appears; the consumer owns the dialog. /\n onAddTraceMocksToItem?: (args: { traceId: string }) => void;\n initialSpanId?: string \| null;\n onPrevious?: () => void;\n onNext?: () => void;\n collapsed?: boolean;\n onCollapsedChange?: (collapsed: boolean) => void;\n placement: TraceDataPanelPlacement;\n /* @deprecated No longer used: the panel renders the span tree with the duration as text. /\n timelineChartWidth?: 'wide' \| 'default';\n /* When both are provided, renders an \"Open trace page\" button. /\n LinkComponent?: LinkComponent;\n traceHref?: string;\n /* When provided, the entity name in the trace summary links to the entity's page. /\n entityHref?: string;\n /* Token and estimated-cost totals shown in the compact trace summary. /\n usage?: TraceUsageSummary;\n /\n Span treated as the displayed root of the timeline. Required for branch\n * subtrees from `getBranch` where the anchor has a real parent that's outside\n * `spans`. When omitted, the span with no parent is used (trace case).\n /\n anchorSpanId?: string;\n /\n Whether to render the \"Evaluating traces and saving them as dataset items is\n * available in Mastra Studio\" info notice when neither `onEvaluateTrace` nor\n * `onSaveAsDatasetItem` is provided. Defaults to `true`. Pass `false` when this\n * panel is rendered inside Studio in a context that intentionally omits those\n * handlers (e.g. inline below an experiment result).\n /\n showUnavailableFeaturesMsg?: boolean;\n /\n When provided, a \"Scores\" tab appears; the slot renders whatever trace-level\n * scoring UI the consumer wants.\n /\n scoresTabSlot?: (args: { traceId: string; rootSpanId: string \| undefined }) => ReactNode;\n /* Optional count shown in the \"Scores\" tab label. /\n scoresTabBadge?: ReactNode;\n /\n When provided, a \"Feedback\" tab appears; the slot renders the trace-level\n * feedback UI. Trace feedback is not scoped to a span — the span panel owns that.\n /\n feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n /* Optional indicator rendered after the \"Feedback\" tab label (e.g. a needs-review dot). /\n feedbackTabBadge?: ReactNode;\n activeTab?: TraceDataPanelTab;\n onTabChange?: (tab: TraceDataPanelTab) => void;\n /* Span ids to feature in the timeline; every other span is faded. /\n featuredSpanIds?: string[];\n /\n Rendered as a column to the left of the span tree inside the same card\n * (typically the trace as one reconstructed agent turn). Collapsed while the\n * Timeline tab is active, since the timeline needs the width.\n /\n messagesPanelSlot?: ReactNode;\n /\n Rendered as a column to the right of the timeline inside the same card;\n * typically the span detail.\n /\n spanPanelSlot?: ReactNode;\n /* Extra classes applied to the panel root (e.g. `h-full` on the trace page). /\n className?: string;\n}\n\nexport function TraceDataPanelView({\n traceId,\n spans,\n isLoading,\n onClose,\n onSpanSelect,\n onEvaluateTrace,\n onSaveAsDatasetItem,\n onAddTraceMocksToItem,\n initialSpanId,\n onPrevious,\n onNext,\n collapsed: controlledCollapsed,\n onCollapsedChange,\n placement,\n LinkComponent,\n traceHref,\n entityHref,\n usage,\n anchorSpanId,\n showUnavailableFeaturesMsg = true,\n scoresTabSlot,\n scoresTabBadge,\n feedbackTabSlot,\n feedbackTabBadge,\n activeTab,\n onTabChange,\n featuredSpanIds,\n messagesPanelSlot,\n spanPanelSlot,\n className,\n}: TraceDataPanelViewProps) {\n const isOnTracePage = placement === 'trace-page';\n const [internalCollapsed, setInternalCollapsed] = useState(false);\n const collapsed = controlledCollapsed ?? internalCollapsed;\n const setCollapsed = onCollapsedChange ?? setInternalCollapsed;\n\n // Tracked locally too (tabs may be uncontrolled) so the messages column knows\n // when to fold away for the Timeline tab.\n const [uncontrolledTab, setUncontrolledTab] = useState<TraceDataPanelTab>('details');\n const currentTab = activeTab ?? uncontrolledTab;\n const handleTabChange = (tab: TraceDataPanelTab) => {\n setUncontrolledTab(tab);\n onTabChange?.(tab);\n };\n\n const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n const [selectedSpanId, setSelectedSpanId] = useState<string \| undefined>(initialSpanId ?? undefined);\n\n // Sync selected span when initialSpanId or trace data changes\n useEffect(() => {\n // No span requested: clear immediately.\n if (!initialSpanId) {\n setSelectedSpanId(undefined);\n onSpanSelect?.(undefined);\n return;\n }\n // Span requested: wait for trace data before deciding so an in-flight\n // fetch doesn't wipe a URL-provided selection. Callers that default their\n // spans to `[]` while loading only say so through `isLoading`.\n if (isLoading \|\| !spans) return;\n\n const found = spans.find(s => s.spanId === initialSpanId);\n if (found) {\n setSelectedSpanId(initialSpanId);\n onSpanSelect?.(initialSpanId);\n } else {\n setSelectedSpanId(undefined);\n onSpanSelect?.(undefined);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initialSpanId, spans, isLoading]);\n\n const searchFieldName = useId();\n const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n const hierarchicalSpans = useMemo(\n () =>\n formatHierarchicalSpans(\n // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n // rendered several components deeper.\n results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n anchorSpanId,\n ),\n [results, payloadOnlyMatchIds, anchorSpanId],\n );\n\n const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n useEffect(() => {\n if (hierarchicalSpans.length > 0) {\n setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n }\n }, [hierarchicalSpans]);\n\n const rootSpan = useMemo(\n () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n [spans, anchorSpanId],\n );\n const handleSpanClick = (id: string) => {\n const newId = selectedSpanId === id ? undefined : id;\n setSelectedSpanId(newId);\n onSpanSelect?.(newId);\n };\n\n const traceActionsMenu = (\n <DropdownMenu>\n <DropdownMenu.Trigger\n render={\n <Button size=\"md\" tooltip=\"Trace actions\" aria-label=\"Trace actions\">\n <MoreHorizontalIcon />\n </Button>\n }\n />\n <DropdownMenu.Content align=\"end\">\n {!isOnTracePage && onCollapsedChange && (\n <DropdownMenu.Item onSelect={() => setCollapsed(!collapsed)}>\n {collapsed ? <ChevronsUpDownIcon /> : <ChevronsDownUpIcon />}\n {collapsed ? 'Expand panel' : 'Collapse panel'}\n </DropdownMenu.Item>\n )}\n {!isOnTracePage && onEvaluateTrace && (\n <DropdownMenu.Item onSelect={onEvaluateTrace}>\n <CircleGaugeIcon />\n Evaluate trace\n </DropdownMenu.Item>\n )}\n {!isOnTracePage && onSaveAsDatasetItem && (\n <DropdownMenu.Item onSelect={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}>\n <SaveIcon />\n Add full trace to dataset\n </DropdownMenu.Item>\n )}\n {!isOnTracePage && onAddTraceMocksToItem && (\n <DropdownMenu.Item onSelect={() => onAddTraceMocksToItem({ traceId })}>\n <WrenchIcon />\n Add tool mocks to item\n </DropdownMenu.Item>\n )}\n {!isOnTracePage && LinkComponent && traceHref && (\n <DropdownMenu.Item render={<LinkComponent href={traceHref} />}>\n <Link2Icon />\n Open trace page\n </DropdownMenu.Item>\n )}\n <DropdownMenu.Item disabled={isDownloadingTrace} onSelect={() => downloadTraceJson(traceId)}>\n {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n Download trace JSON\n </DropdownMenu.Item>\n </DropdownMenu.Content>\n </DropdownMenu>\n );\n\n return (\n <DataPanel collapsed={collapsed} className={className}>\n <DataPanel.Header>\n {isOnTracePage ? (\n <>\n <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n <ButtonsGroup className=\"ml-auto shrink-0\">{traceActionsMenu}</ButtonsGroup>\n </>\n ) : (\n <>\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <DataPanel.Heading className=\"items-center\">\n Trace\n <TraceIdButton id={traceId} />\n </DataPanel.Heading>\n {!collapsed && rootSpan && (\n <TraceSummaryDescription\n rootSpan={rootSpan}\n usage={usage}\n entityHref={entityHref}\n LinkComponent={LinkComponent}\n />\n )}\n </div>\n <ButtonsGroup className=\"ml-auto shrink-0 self-start\">\n {traceActionsMenu}\n {(onPrevious \|\| onNext) && (\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Previous trace\"\n nextLabel=\"Next trace\"\n />\n )}\n <DataPanel.CloseButton onClick={onClose} />\n </ButtonsGroup>\n </>\n )}\n </DataPanel.Header>\n\n {!collapsed && (\n <TracePanelColumns\n messagesPanelSlot={messagesPanelSlot}\n messagesCollapsed={currentTab === 'timeline'}\n spanPanelSlot={spanPanelSlot}\n highlightQuery={query}\n spanPanelKey={selectedSpanId}\n >\n {isLoading ? (\n <DataPanel.LoadingData>Loading trace...</DataPanel.LoadingData>\n ) : !spans?.length ? (\n <DataPanel.NoData>No spans found for this trace.</DataPanel.NoData>\n ) : (\n (() => {\n // Shared by the Spans and Timeline tabs: both views render the same\n // filtered `hierarchicalSpans`, so one query drives both.\n const searchField = (\n <SearchFieldBlock\n name={searchFieldName}\n label=\"Search spans\"\n labelIsHidden\n placeholder=\"Search spans...\"\n value={query}\n onChange={e => setQuery(e.target.value)}\n onReset={() => setQuery('')}\n size=\"sm\"\n variant=\"outline\"\n className=\"w-full\"\n />\n );\n const noSearchResults = hierarchicalSpans.length === 0 && (\n <DataPanel.NoData>No spans match your search.</DataPanel.NoData>\n );\n\n return (\n <Tabs<TraceDataPanelTab>\n defaultTab=\"details\"\n value={activeTab}\n onValueChange={handleTabChange}\n className=\"grid h-full min-h-0 grid-rows-[auto_1fr]\"\n >\n <DataPanel.Header className=\"min-h-0 px-2 py-1\">\n <TabList variant=\"pill-ghost\">\n <Tab value=\"details\">Spans</Tab>\n <Tab value=\"timeline\">Timeline</Tab>\n {feedbackTabSlot && <Tab value=\"feedback\">Feedback{feedbackTabBadge}</Tab>}\n {scoresTabSlot && (\n <Tab value=\"scores\">Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}</Tab>\n )}\n </TabList>\n </DataPanel.Header>\n\n <TabContent value=\"details\" className=\"min-h-0 py-0\">\n <DataPanel.Content>\n {!isOnTracePage &&\n !onEvaluateTrace &&\n !onSaveAsDatasetItem &&\n !onAddTraceMocksToItem &&\n showUnavailableFeaturesMsg && (\n <Notice variant=\"info\" className=\"mb-6\">\n <Notice.Message>\n Evaluating traces and saving them as dataset items is available in Mastra Studio (local or\n deployed).\n </Notice.Message>\n </Notice>\n )}\n\n {/ The tree stays mounted even with no results, because it\n hosts the search field: unmounting it would strand the user\n with a query they can no longer clear. /}\n <TraceSpanTree\n hierarchicalSpans={hierarchicalSpans}\n onSpanClick={handleSpanClick}\n selectedSpanId={selectedSpanId}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n featuredSpanIds={featuredSpanIds}\n leadingSlot={searchField}\n />\n {noSearchResults}\n </DataPanel.Content>\n </TabContent>\n <TabContent value=\"timeline\" className=\"min-h-0 py-0\">\n <DataPanel.Content>\n {/ Same selection + expansion state as the Spans tab, so switching views keeps context. /}\n <TraceSpanTimeline\n hierarchicalSpans={hierarchicalSpans}\n onSpanClick={handleSpanClick}\n selectedSpanId={selectedSpanId}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n featuredSpanIds={featuredSpanIds}\n leadingSlot={searchField}\n />\n {noSearchResults}\n </DataPanel.Content>\n </TabContent>\n {feedbackTabSlot && (\n <TabContent value=\"feedback\" className=\"h-full min-h-0 py-0\">\n <DataPanel.Content>{feedbackTabSlot({ traceId })}</DataPanel.Content>\n </TabContent>\n )}\n {scoresTabSlot && (\n <TabContent value=\"scores\" className=\"h-full min-h-0 py-0\">\n <DataPanel.Content>{scoresTabSlot({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n </TabContent>\n )}\n </Tabs>\n );\n })()\n )}\n </TracePanelColumns>\n )}\n </DataPanel>\n );\n}\n\n/\n Lays out the card body as three columns — `[messages] [trace] [span]` — inside\n * the same card. The messages and span cells always exist and collapse to `0fr`\n * when hidden, so opening/closing them animates via `grid-template-columns`\n * rather than mounting/unmounting a DOM column (which cannot be transitioned).\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n /\nfunction TracePanelColumns({\n messagesPanelSlot,\n messagesCollapsed,\n spanPanelSlot,\n highlightQuery,\n spanPanelKey,\n children,\n}: {\n messagesPanelSlot?: ReactNode;\n /* Folds the messages column away (e.g. while the Timeline tab needs the width). /\n messagesCollapsed: boolean;\n spanPanelSlot?: ReactNode;\n highlightQuery: string;\n /* Identity of the span shown in the panel; changing it re-triggers the match scroll. /\n spanPanelKey?: string;\n children: ReactNode;\n}) {\n // A single hook call on the common ancestor covers both the timeline tree and\n // the span detail, so span names and payload values highlight together.\n const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n // Scoped to the span-panel column only: a match deep in a large payload sits below\n // the fold, so the first painted match is brought into view when the panel opens.\n // The timeline column must never be scrolled by this.\n const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n const showMessages = !!messagesPanelSlot && !messagesCollapsed;\n const columns =\n showMessages && spanPanelSlot\n ? 'grid-cols-[1fr_1fr_1fr]'\n : showMessages\n ? 'grid-cols-[1fr_1fr_0fr]'\n : spanPanelSlot\n ? 'grid-cols-[0fr_1fr_1fr]'\n : 'grid-cols-[0fr_1fr_0fr]';\n\n return (\n <div\n ref={highlightRef}\n data-trace-columns\n className={cn('grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out', columns)}\n >\n <div\n className={cn(\n 'flex min-h-0 min-w-0 flex-col overflow-hidden',\n showMessages && 'animate-in border-r border-border1 duration-300 fade-in-0',\n )}\n >\n {messagesPanelSlot}\n </div>\n <div className=\"flex min-h-0 min-w-0 flex-col overflow-hidden\">{children}</div>\n {/ Searchable: the span detail is where a match hides inside a large payload. */}\n <div\n ref={scrollToMatchRef}\n data-highlight\n className={cn(\n 'flex min-h-0 min-w-0 flex-col overflow-hidden',\n spanPanelSlot && 'animate-in border-l border-border1 duration-300 fade-in-0',\n )}\n >\n {spanPanelSlot}\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiHO,SAAS,kBAAA,CAAmB;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,mBAAA;AAAA,EACA,qBAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,EAAW,mBAAA;AAAA,EACX,iBAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,0BAAA,GAA6B,IAAA;AAAA,EAC7B,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,gBAAgB,SAAA,KAAc,YAAA;AACpC,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAChE,EAAA,MAAM,YAAY,mBAAA,IAAuB,iBAAA;AACzC,EAAA,MAAM,eAAe,iBAAA,IAAqB,oBAAA;AAI1C,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAA4B,SAAS,CAAA;AACnF,EAAA,MAAM,aAAa,SAAA,IAAa,eAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,CAAC,GAAA,KAA2B;AAClD,IAAA,kBAAA,CAAmB,GAAG,CAAA;AACtB,IAAA,WAAA,GAAc,GAAG,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,EAAE,QAAA,EAAU,iBAAA,EAAmB,SAAA,EAAW,kBAAA,KAAuB,oBAAA,EAAqB;AAE5F,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAA,CAA6B,iBAAiB,MAAS,CAAA;AAGnG,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA,iBAAA,CAAkB,MAAS,CAAA;AAC3B,MAAA,YAAA,GAAe,MAAS,CAAA;AACxB,MAAA;AAAA,IACF;AAIA,IAAA,IAAI,SAAA,IAAa,CAAC,KAAA,EAAO;AAEzB,IAAA,MAAM,QAAQ,KAAA,CAAM,IAAA,CAAK,CAAA,CAAA,KAAK,CAAA,CAAE,WAAW,aAAa,CAAA;AACxD,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,iBAAA,CAAkB,aAAa,CAAA;AAC/B,MAAA,YAAA,GAAe,aAAa,CAAA;AAAA,IAC9B,CAAA,MAAO;AACL,MAAA,iBAAA,CAAkB,MAAS,CAAA;AAC3B,MAAA,YAAA,GAAe,MAAS,CAAA;AAAA,IAC1B;AAAA,EAEF,CAAA,EAAG,CAAC,aAAA,EAAe,KAAA,EAAO,SAAS,CAAC,CAAA;AAEpC,EAAA,MAAM,kBAAkB,KAAA,EAAM;AAC9B,EAAA,MAAM,EAAE,OAAO,QAAA,EAAU,OAAA,EAAS,qBAAoB,GAAI,cAAA,CAAe,KAAA,IAAS,EAAE,CAAA;AAEpF,EAAA,MAAM,iBAAA,GAAoB,OAAA;AAAA,IACxB,MACE,uBAAA;AAAA;AAAA;AAAA,MAGE,OAAA,CAAQ,GAAA,CAAI,CAAA,IAAA,MAAS,EAAE,GAAG,IAAA,EAAM,oBAAA,EAAsB,mBAAA,CAAoB,GAAA,CAAI,IAAA,CAAK,MAAM,CAAA,EAAE,CAAE,CAAA;AAAA,MAC7F;AAAA,KACF;AAAA,IACF,CAAC,OAAA,EAAS,mBAAA,EAAqB,YAAY;AAAA,GAC7C;AAEA,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmB,aAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,QAAA,GAAW,OAAA;AAAA,IACf,MAAO,YAAA,GAAe,KAAA,EAAO,IAAA,CAAK,OAAK,CAAA,CAAE,MAAA,KAAW,YAAY,CAAA,GAAI,KAAA,EAAO,IAAA,CAAK,CAAA,CAAA,KAAK,CAAA,CAAE,gBAAgB,IAAI,CAAA;AAAA,IAC3G,CAAC,OAAO,YAAY;AAAA,GACtB;AACA,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,MAAM,KAAA,GAAQ,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAA;AAClD,IAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,MAAM,gBAAA,wBACH,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA,CAAa,OAAA;AAAA,MAAb;AAAA,QACC,MAAA,kBACE,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,eAAA,EAAgB,YAAA,EAAW,eAAA,EACnD,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA,EACtB;AAAA;AAAA,KAEJ;AAAA,oBACA,IAAA,CAAC,YAAA,CAAa,OAAA,EAAb,EAAqB,OAAM,KAAA,EACzB,QAAA,EAAA;AAAA,MAAA,CAAC,aAAA,IAAiB,iBAAA,oBACjB,IAAA,CAAC,YAAA,CAAa,IAAA,EAAb,EAAkB,QAAA,EAAU,MAAM,YAAA,CAAa,CAAC,SAAS,CAAA,EACvD,QAAA,EAAA;AAAA,QAAA,SAAA,mBAAY,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA,mBAAK,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA;AAAA,QACzD,YAAY,cAAA,GAAiB;AAAA,OAAA,EAChC,CAAA;AAAA,MAED,CAAC,iBAAiB,eAAA,oBACjB,IAAA,CAAC,aAAa,IAAA,EAAb,EAAkB,UAAU,eAAA,EAC3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,QAAE;AAAA,OAAA,EAErB,CAAA;AAAA,MAED,CAAC,aAAA,IAAiB,mBAAA,oBACjB,IAAA,CAAC,YAAA,CAAa,MAAb,EAAkB,QAAA,EAAU,MAAM,mBAAA,CAAoB,EAAE,OAAA,EAAS,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,CAAA,EAC9F,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAAA,QAAE;AAAA,OAAA,EAEd,CAAA;AAAA,MAED,CAAC,aAAA,IAAiB,qBAAA,oBACjB,IAAA,CAAC,YAAA,CAAa,IAAA,EAAb,EAAkB,QAAA,EAAU,MAAM,qBAAA,CAAsB,EAAE,OAAA,EAAS,CAAA,EAClE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA;AAAA,QAAE;AAAA,OAAA,EAEhB,CAAA;AAAA,MAED,CAAC,aAAA,IAAiB,aAAA,IAAiB,SAAA,oBAClC,IAAA,CAAC,YAAA,CAAa,IAAA,EAAb,EAAkB,MAAA,kBAAQ,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAM,WAAW,CAAA,EACzD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAAA,QAAE;AAAA,OAAA,EAEf,CAAA;AAAA,sBAEF,IAAA,CAAC,YAAA,CAAa,IAAA,EAAb,EAAkB,QAAA,EAAU,oBAAoB,QAAA,EAAU,MAAM,iBAAA,CAAkB,OAAO,CAAA,EACvF,QAAA,EAAA;AAAA,QAAA,kBAAA,uBAAsB,WAAA,EAAA,EAAY,SAAA,EAAU,cAAA,EAAe,CAAA,uBAAM,YAAA,EAAA,EAAa,CAAA;AAAA,QAAG;AAAA,OAAA,EAEpF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAsB,SAAA,EAC/B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,CAAU,MAAA,EAAV,EACE,QAAA,EAAA,aAAA,mBACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EAAkB,QAAA,EAAA,gBAAA,EAAc,CAAA;AAAA,sBACjC,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,kBAAA,EAAoB,QAAA,EAAA,gBAAA,EAAiB;AAAA,KAAA,EAC/D,oBAEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oCAAA,EACb,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EAAkB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BAE1C,GAAA,CAAC,aAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,SAAA,EAC9B,CAAA;AAAA,QACC,CAAC,aAAa,QAAA,oBACb,GAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,KAAA;AAAA,YACA,UAAA;AAAA,YACA;AAAA;AAAA;AACF,OAAA,EAEJ,CAAA;AAAA,sBACA,IAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,6BAAA,EACrB,QAAA,EAAA;AAAA,QAAA,gBAAA;AAAA,QAAA,CACC,cAAc,MAAA,qBACd,GAAA;AAAA,UAAC,SAAA,CAAU,WAAA;AAAA,UAAV;AAAA,YACC,UAAA;AAAA,YACA,MAAA;AAAA,YACA,aAAA,EAAc,gBAAA;AAAA,YACd,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBAEF,GAAA,CAAC,SAAA,CAAU,WAAA,EAAV,EAAsB,SAAS,OAAA,EAAS;AAAA,OAAA,EAC3C;AAAA,KAAA,EACF,CAAA,EAEJ,CAAA;AAAA,IAEC,CAAC,SAAA,oBACA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,mBAAmB,UAAA,KAAe,UAAA;AAAA,QAClC,aAAA;AAAA,QACA,cAAA,EAAgB,KAAA;AAAA,QAChB,YAAA,EAAc,cAAA;AAAA,QAEb,sCACC,GAAA,CAAC,SAAA,CAAU,WAAA,EAAV,EAAsB,8BAAgB,CAAA,GACrC,CAAC,KAAA,EAAO,MAAA,uBACT,SAAA,CAAU,MAAA,EAAV,EAAiB,QAAA,EAAA,gCAAA,EAA8B,KAE/C,MAAM;AAGL,UAAA,MAAM,WAAA,mBACJ,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,eAAA;AAAA,cACN,KAAA,EAAM,cAAA;AAAA,cACN,aAAA,EAAa,IAAA;AAAA,cACb,WAAA,EAAY,iBAAA;AAAA,cACZ,KAAA,EAAO,KAAA;AAAA,cACP,QAAA,EAAU,CAAA,CAAA,KAAK,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cACtC,OAAA,EAAS,MAAM,QAAA,CAAS,EAAE,CAAA;AAAA,cAC1B,IAAA,EAAK,IAAA;AAAA,cACL,OAAA,EAAQ,SAAA;AAAA,cACR,SAAA,EAAU;AAAA;AAAA,WACZ;AAEF,UAAA,MAAM,eAAA,GAAkB,kBAAkB,MAAA,KAAW,CAAA,wBAClD,SAAA,CAAU,MAAA,EAAV,EAAiB,QAAA,EAAA,6BAAA,EAA2B,CAAA;AAG/C,UAAA,uBACE,IAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,UAAA,EAAW,SAAA;AAAA,cACX,KAAA,EAAO,SAAA;AAAA,cACP,aAAA,EAAe,eAAA;AAAA,cACf,SAAA,EAAU,0CAAA;AAAA,cAEV,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,SAAA,CAAU,QAAV,EAAiB,SAAA,EAAU,qBAC1B,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAQ,YAAA,EACf,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,SAAA,EAAU,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,kCAC1B,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,UAAA,EAAW,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,kBAC7B,eAAA,oBAAmB,IAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,UAAA,EAAW,QAAA,EAAA;AAAA,oBAAA,UAAA;AAAA,oBAAS;AAAA,mBAAA,EAAiB,CAAA;AAAA,kBACnE,aAAA,oBACC,IAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,QAAA,EAAS,QAAA,EAAA;AAAA,oBAAA,QAAA;AAAA,oBAAO,cAAA,IAAkB,wBAAQ,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,sBAAG,cAAA;AAAA,sBAAe;AAAA,qBAAA,EAAC;AAAA,mBAAA,EAAI;AAAA,iBAAA,EAElF,CAAA,EACF,CAAA;AAAA,gCAEA,GAAA,CAAC,cAAW,KAAA,EAAM,SAAA,EAAU,WAAU,cAAA,EACpC,QAAA,kBAAA,IAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EACE,QAAA,EAAA;AAAA,kBAAA,CAAC,iBACA,CAAC,eAAA,IACD,CAAC,mBAAA,IACD,CAAC,yBACD,0BAAA,oBACE,GAAA,CAAC,UAAO,OAAA,EAAQ,MAAA,EAAO,WAAU,MAAA,EAC/B,QAAA,kBAAA,GAAA,CAAC,OAAO,OAAA,EAAP,EAAe,mHAGhB,CAAA,EACF,CAAA;AAAA,kCAMJ,GAAA;AAAA,oBAAC,aAAA;AAAA,oBAAA;AAAA,sBACC,iBAAA;AAAA,sBACA,WAAA,EAAa,eAAA;AAAA,sBACb,cAAA;AAAA,sBACA,eAAA;AAAA,sBACA,kBAAA;AAAA,sBACA,eAAA;AAAA,sBACA,WAAA,EAAa;AAAA;AAAA,mBACf;AAAA,kBACC;AAAA,iBAAA,EACH,CAAA,EACF,CAAA;AAAA,gCACA,GAAA,CAAC,cAAW,KAAA,EAAM,UAAA,EAAW,WAAU,cAAA,EACrC,QAAA,kBAAA,IAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EAEC,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,iBAAA;AAAA,oBAAA;AAAA,sBACC,iBAAA;AAAA,sBACA,WAAA,EAAa,eAAA;AAAA,sBACb,cAAA;AAAA,sBACA,eAAA;AAAA,sBACA,kBAAA;AAAA,sBACA,eAAA;AAAA,sBACA,WAAA,EAAa;AAAA;AAAA,mBACf;AAAA,kBACC;AAAA,iBAAA,EACH,CAAA,EACF,CAAA;AAAA,gBACC,mCACC,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,UAAA,EAAW,WAAU,qBAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EAAmB,QAAA,EAAA,eAAA,CAAgB,EAAE,OAAA,EAAS,GAAE,CAAA,EACnD,CAAA;AAAA,gBAED,iCACC,GAAA,CAAC,UAAA,EAAA,EAAW,OAAM,QAAA,EAAS,SAAA,EAAU,uBACnC,QAAA,kBAAA,GAAA,CAAC,SAAA,CAAU,SAAV,EAAmB,QAAA,EAAA,aAAA,CAAc,EAAE,OAAA,EAAS,UAAA,EAAY,UAAU,MAAA,EAAQ,GAAE,CAAA,EAC/E;AAAA;AAAA;AAAA,WAEJ;AAAA,QAEJ,CAAA;AAAG;AAAA;AAEP,GAAA,EAEJ,CAAA;AAEJ;AAUA,SAAS,iBAAA,CAAkB;AAAA,EACzB,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EASG;AAGD,EAAA,MAAM,EAAE,GAAA,EAAK,YAAA,EAAa,GAAI,iBAAiC,cAAc,CAAA;AAK7E,EAAA,MAAM,EAAE,GAAA,EAAK,gBAAA,EAAiB,GAAI,yBAAA,CAA0C,gBAAgB,YAAY,CAAA;AAExG,EAAA,MAAM,YAAA,GAAe,CAAC,CAAC,iBAAA,IAAqB,CAAC,iBAAA;AAC7C,EAAA,MAAM,UACJ,YAAA,IAAgB,aAAA,GACZ,4BACA,YAAA,GACE,yBAAA,GACA,gBACE,yBAAA,GACA,yBAAA;AAEV,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,YAAA;AAAA,MACL,oBAAA,EAAkB,IAAA;AAAA,MAClB,SAAA,EAAW,EAAA,CAAG,iFAAA,EAAmF,OAAO,CAAA;AAAA,MAExG,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,+CAAA;AAAA,cACA,YAAA,IAAgB;AAAA,aAClB;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EAAiD,QAAA,EAAS,CAAA;AAAA,wBAEzE,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,gBAAA;AAAA,YACL,gBAAA,EAAc,IAAA;AAAA,YACd,SAAA,EAAW,EAAA;AAAA,cACT,+CAAA;AAAA,cACA,aAAA,IAAiB;AAAA,aACnB;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"trace-data-panel-view.es.js","sources":["../../../../src/domains/traces/components/trace-data-panel-view.tsx"],"sourcesContent":["import {\n ChartGanttIcon,\n CircleGaugeIcon,\n DownloadIcon,\n Link2Icon,\n ListTreeIcon,\n Loader2Icon,\n MessageSquareReplyIcon,\n MessageSquareTextIcon,\n MoreHorizontalIcon,\n SaveIcon,\n WrenchIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { SearchableSpan } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { useScrollToFirstHighlight } from '@/hooks/use-scroll-to-first-highlight';\nimport { useTextHighlight } from '@/hooks/use-text-highlight';\nimport { cn } from '@/lib/utils';\n\nexport type TraceDataPanelPlacement = 'traces-list' \| 'trace-page';\n\nexport type TraceSpanView = 'tree' \| 'timeline';\n\n/** What the side column next to the span tree shows. /\nexport type TraceSideView = 'messages' \| 'feedback' \| 'scores';\n\nexport interface TraceDataPanelViewProps {\n /* Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. /\n traceId?: string;\n /* Lightweight spans for the trace. Caller fetches via useTraceLightSpans. /\n spans: SearchableSpan[] \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n onSpanSelect?: (spanId: string \| undefined) => void;\n onEvaluateTrace?: () => void;\n /* When set, an \"Add full trace to dataset\" button appears; the consumer owns the dialog. /\n onSaveAsDatasetItem?: (args: { traceId: string; rootSpanId: string \| undefined }) => void;\n /* When set, an \"Add tool mocks to item\" button appears; the consumer owns the dialog. /\n onAddTraceMocksToItem?: (args: { traceId: string }) => void;\n initialSpanId?: string \| null;\n onPrevious?: () => void;\n onNext?: () => void;\n /* Drawer width; defaults to `wide` since the panel lays out several columns. /\n size?: DataPanelProps['size'];\n /* Elevation when opened next to other sibling panels. /\n depth?: DataPanelProps['depth'];\n /* Rendered inside the drawer above the trace header (e.g. inbox feedback context). /\n headerSlot?: ReactNode;\n /* Accessible drawer name; defaults to the trace id. /\n title?: string;\n placement: TraceDataPanelPlacement;\n /* @deprecated No longer used: the panel renders the span tree with the duration as text. /\n timelineChartWidth?: 'wide' \| 'default';\n /* When both are provided, renders an \"Open trace page\" button. /\n LinkComponent?: LinkComponent;\n traceHref?: string;\n /* When provided, the entity name in the trace summary links to the entity's page. /\n entityHref?: string;\n /* Token and estimated-cost totals shown in the compact trace summary. /\n usage?: TraceUsageSummary;\n /\n Span treated as the displayed root of the timeline. Required for branch\n * subtrees from `getBranch` where the anchor has a real parent that's outside\n * `spans`. When omitted, the span with no parent is used (trace case).\n /\n anchorSpanId?: string;\n /\n Whether to render the \"Evaluating traces and saving them as dataset items is\n * available in Mastra Studio\" info notice when neither `onEvaluateTrace` nor\n * `onSaveAsDatasetItem` is provided. Defaults to `true`. Pass `false` when this\n * panel is rendered inside Studio in a context that intentionally omits those\n * handlers (e.g. inline below an experiment result).\n /\n showUnavailableFeaturesMsg?: boolean;\n /\n When provided, a \"Scores\" tab appears; the slot renders whatever trace-level\n * scoring UI the consumer wants.\n /\n scoresTabSlot?: (args: { traceId: string; rootSpanId: string \| undefined }) => ReactNode;\n /* Optional count shown in the \"Scores\" tab label. /\n scoresTabBadge?: ReactNode;\n /\n When provided, a \"Feedback\" tab appears; the slot renders the trace-level\n * feedback UI. Trace feedback is not scoped to a span — the span panel owns that.\n /\n feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n /* Optional count rendered after the \"Feedback\" tab label, e.g. `Feedback (3)`. /\n feedbackTabBadge?: ReactNode;\n /* Span ids to feature in the timeline; every other span is faded. /\n featuredSpanIds?: string[];\n /\n The \"Messages\" view of the side column next to the span tree (typically the\n * trace as one reconstructed agent turn). Rendered without content padding.\n /\n messagesPanelSlot?: ReactNode;\n /* Controlled span view (tree or timeline); falls back to local state starting on the tree. /\n spanView?: TraceSpanView;\n onSpanViewChange?: (view: TraceSpanView) => void;\n /* Controlled side column view; falls back to the first available view. /\n sideView?: TraceSideView;\n onSideViewChange?: (view: TraceSideView) => void;\n /\n Rendered as a column to the right of the timeline inside the same card;\n * typically the span detail.\n /\n spanPanelSlot?: ReactNode;\n}\n\nexport function TraceDataPanelView({\n traceId,\n spans,\n isLoading,\n onClose,\n onSpanSelect,\n onEvaluateTrace,\n onSaveAsDatasetItem,\n onAddTraceMocksToItem,\n initialSpanId,\n onPrevious,\n onNext,\n size = 'wide',\n depth,\n headerSlot,\n title,\n placement,\n LinkComponent,\n traceHref,\n entityHref,\n usage,\n anchorSpanId,\n showUnavailableFeaturesMsg = true,\n scoresTabSlot,\n scoresTabBadge,\n feedbackTabSlot,\n feedbackTabBadge,\n featuredSpanIds,\n messagesPanelSlot,\n sideView: controlledSideView,\n onSideViewChange,\n spanView: controlledSpanView,\n onSpanViewChange,\n spanPanelSlot,\n}: TraceDataPanelViewProps) {\n const isOnTracePage = placement === 'trace-page';\n\n // The side column next to the span tree hosts Messages / Feedback / Scores;\n // which one is shown is purely a local viewing choice.\n const sideViews = useMemo(() => {\n const views: Array<{ value: TraceSideView; label: ReactNode }> = [];\n if (messagesPanelSlot) {\n views.push({\n value: 'messages',\n label: (\n <>\n <Icon size=\"sm\">\n <MessageSquareTextIcon />\n </Icon>\n Messages\n </>\n ),\n });\n }\n if (feedbackTabSlot) {\n views.push({\n value: 'feedback',\n label: (\n <>\n <Icon size=\"sm\">\n <MessageSquareReplyIcon />\n </Icon>\n Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n </>\n ),\n });\n }\n if (scoresTabSlot) {\n views.push({\n value: 'scores',\n label: (\n <>\n <Icon size=\"sm\">\n <ScorersIcon />\n </Icon>\n Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}\n </>\n ),\n });\n }\n return views;\n }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n const chosenSideView = controlledSideView ?? uncontrolledSideView;\n const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n const handleSideViewChange = (view: TraceSideView) => {\n setUncontrolledSideView(view);\n onSideViewChange?.(view);\n };\n\n const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n const spanView = controlledSpanView ?? uncontrolledSpanView;\n const setSpanView = (view: TraceSpanView) => {\n setUncontrolledSpanView(view);\n onSpanViewChange?.(view);\n };\n\n const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n const [selectedSpanId, setSelectedSpanId] = useState<string \| undefined>(initialSpanId ?? undefined);\n\n // Sync selected span when initialSpanId or trace data changes\n useEffect(() => {\n // No span requested: clear immediately.\n if (!initialSpanId) {\n setSelectedSpanId(undefined);\n onSpanSelect?.(undefined);\n return;\n }\n // Span requested: wait for trace data before deciding so an in-flight\n // fetch doesn't wipe a URL-provided selection. Callers that default their\n // spans to `[]` while loading only say so through `isLoading`.\n if (isLoading \|\| !spans) return;\n\n const found = spans.find(s => s.spanId === initialSpanId);\n if (found) {\n setSelectedSpanId(initialSpanId);\n onSpanSelect?.(initialSpanId);\n } else {\n setSelectedSpanId(undefined);\n onSpanSelect?.(undefined);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initialSpanId, spans, isLoading]);\n\n const searchFieldName = useId();\n const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n const hierarchicalSpans = useMemo(\n () =>\n formatHierarchicalSpans(\n // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n // rendered several components deeper.\n results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n anchorSpanId,\n ),\n [results, payloadOnlyMatchIds, anchorSpanId],\n );\n\n const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n useEffect(() => {\n if (hierarchicalSpans.length > 0) {\n setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n }\n }, [hierarchicalSpans]);\n\n const rootSpan = useMemo(\n () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n [spans, anchorSpanId],\n );\n const handleSpanClick = (id: string) => {\n const newId = selectedSpanId === id ? undefined : id;\n setSelectedSpanId(newId);\n onSpanSelect?.(newId);\n };\n\n const traceActionsMenu = traceId && (\n <DropdownMenu>\n <DropdownMenu.Trigger\n render={\n <Button size=\"sm\" variant=\"ghost\" tooltip=\"Open trace actions\" aria-label=\"Open trace actions\">\n <MoreHorizontalIcon />\n </Button>\n }\n />\n <DropdownMenu.Content align=\"end\">\n {!isOnTracePage && onSaveAsDatasetItem && (\n <DropdownMenu.Item onSelect={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}>\n <SaveIcon />\n Add full trace to dataset\n </DropdownMenu.Item>\n )}\n {!isOnTracePage && onAddTraceMocksToItem && (\n <DropdownMenu.Item onSelect={() => onAddTraceMocksToItem({ traceId })}>\n <WrenchIcon />\n Add tool mocks to item\n </DropdownMenu.Item>\n )}\n {!isOnTracePage && LinkComponent && traceHref && (\n <DropdownMenu.Item render={<LinkComponent href={traceHref} />}>\n <Link2Icon />\n Open trace page\n </DropdownMenu.Item>\n )}\n <DropdownMenu.Item disabled={isDownloadingTrace} onSelect={() => downloadTraceJson(traceId)}>\n {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n Download trace JSON\n </DropdownMenu.Item>\n </DropdownMenu.Content>\n </DropdownMenu>\n );\n\n const sideColumn =\n traceId && sideView ? (\n <div data-trace-side-column className=\"flex h-full min-h-0 min-w-0 flex-col overflow-hidden\">\n {/ Same chrome as the trace column's Spans/Timeline header, so the two tab rows line up. /}\n <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n <DataPanel.Header className=\"border-border1 border-b\">\n <TabList variant=\"pill-ghost\" size=\"sm\">\n {sideViews.map(view => (\n <Tab key={view.value} value={view.value}>\n {view.label}\n </Tab>\n ))}\n </TabList>\n </DataPanel.Header>\n </Tabs>\n {/ The turn view brings its own padding; feedback and scores use the panel's. /}\n {sideView === 'messages' && <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>}\n {sideView === 'feedback' && <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>}\n {sideView === 'scores' && (\n <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n )}\n </div>\n ) : null;\n\n return (\n <DataPanel\n open={!!traceId}\n onClose={onClose}\n title={title ?? (isOnTracePage ? 'Trace Timeline' : `Trace ${traceId ?? ''}`)}\n size={size}\n depth={depth}\n >\n {traceId && (\n <>\n {headerSlot}\n <DataPanel.Header>\n {isOnTracePage ? (\n <>\n <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n <DataPanel.HeaderActions>{traceActionsMenu}</DataPanel.HeaderActions>\n </>\n ) : (\n <>\n <DataPanel.CloseButton onClick={onClose} />\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n Trace\n <TraceIdButton id={traceId} />\n </DataPanel.Heading>\n {rootSpan && (\n <TraceSummaryDescription\n rootSpan={rootSpan}\n usage={usage}\n entityHref={entityHref}\n LinkComponent={LinkComponent}\n />\n )}\n </DataPanel.HeaderContent>\n <DataPanel.HeaderActions>\n {onEvaluateTrace && (\n <Button variant=\"primary\" size=\"sm\" onClick={onEvaluateTrace} disabled={!rootSpan}>\n <CircleGaugeIcon />\n Score trace\n </Button>\n )}\n {traceActionsMenu}\n {(onPrevious \|\| onNext) && (\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Go to previous trace\"\n nextLabel=\"Go to next trace\"\n />\n )}\n </DataPanel.HeaderActions>\n </>\n )}\n </DataPanel.Header>\n\n <TracePanelColumns\n sideColumnSlot={sideColumn}\n spanPanelSlot={spanPanelSlot}\n highlightQuery={query}\n spanPanelKey={selectedSpanId}\n >\n {!isLoading && !spans?.length ? (\n <DataPanel.NoData>No spans found for this trace.</DataPanel.NoData>\n ) : (\n (() => {\n // Shared by the Spans and Timeline tabs: both views render the same\n // filtered `hierarchicalSpans`, so one query drives both.\n const isTimeline = spanView === 'timeline';\n const searchHeader = (\n <DataPanel.Header className=\"border-border1 gap-2 border-b\">\n <SearchFieldBlock\n name={searchFieldName}\n label=\"Search spans\"\n labelIsHidden\n placeholder=\"Search spans...\"\n value={query}\n onChange={e => setQuery(e.target.value)}\n onReset={() => setQuery('')}\n size=\"sm\"\n variant=\"outline\"\n className=\"w-full\"\n />\n <ButtonsGroup spacing=\"close\" className=\"shrink-0\">\n <Button\n size=\"sm\"\n variant={isTimeline ? 'default' : 'primary'}\n aria-pressed={!isTimeline}\n tooltip=\"Span tree\"\n onClick={() => setSpanView('tree')}\n >\n <ListTreeIcon />\n </Button>\n <Button\n size=\"sm\"\n variant={isTimeline ? 'primary' : 'default'}\n aria-pressed={isTimeline}\n tooltip=\"Timeline\"\n onClick={() => setSpanView('timeline')}\n >\n <ChartGanttIcon />\n </Button>\n </ButtonsGroup>\n </DataPanel.Header>\n );\n const noSearchResults = !isLoading && hierarchicalSpans.length === 0 && (\n <DataPanel.NoData>No spans match your search.</DataPanel.NoData>\n );\n const viewProps = {\n hierarchicalSpans,\n onSpanClick: handleSpanClick,\n selectedSpanId,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n isLoading,\n };\n\n return (\n <>\n {searchHeader}\n <DataPanel.Content>\n {!isOnTracePage &&\n !onEvaluateTrace &&\n !onSaveAsDatasetItem &&\n !onAddTraceMocksToItem &&\n showUnavailableFeaturesMsg && (\n <Notice variant=\"info\" className=\"mb-6\">\n <Notice.Message>\n Evaluating traces and saving them as dataset items is available in Mastra Studio (local or\n deployed).\n </Notice.Message>\n </Notice>\n )}\n\n {/ Both views share selection + expansion state, and stay mounted with no\n results because they host the search field: unmounting would strand the\n user with a query they can no longer clear. /}\n {isTimeline ? <TraceSpanTimeline {...viewProps} /> : <TraceSpanTree {...viewProps} />}\n {noSearchResults}\n </DataPanel.Content>\n </>\n );\n })()\n )}\n </TracePanelColumns>\n </>\n )}\n </DataPanel>\n );\n}\n\n/\n Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The span\n * cell always exists and collapses to zero when hidden, so opening/closing it\n * animates via `grid-template-columns` rather than mounting/unmounting a DOM\n * column (which cannot be transitioned).\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n /\nfunction TracePanelColumns({\n sideColumnSlot,\n spanPanelSlot,\n highlightQuery,\n spanPanelKey,\n children,\n}: {\n /* Fixed-width column on the left; the trace and span tracks share the remaining space. /\n sideColumnSlot?: ReactNode;\n spanPanelSlot?: ReactNode;\n highlightQuery: string;\n /* Identity of the span shown in the panel; changing it re-triggers the match scroll. /\n spanPanelKey?: string;\n children: ReactNode;\n}) {\n // A single hook call on the common ancestor covers both the timeline tree and\n // the span detail, so span names and payload values highlight together.\n const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n // Scoped to the span-panel column only: a match deep in a large payload sits below\n // the fold, so the first painted match is brought into view when the panel opens.\n // The timeline column must never be scrolled by this.\n const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n return (\n <div\n ref={highlightRef}\n data-trace-columns\n className={cn(\n 'grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out',\n sideColumnSlot\n ? spanPanelSlot\n ? 'grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]'\n : 'grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]'\n : spanPanelSlot\n ? 'grid-cols-[0px_1fr_1fr]'\n : 'grid-cols-[0px_1fr_0fr]',\n )}\n >\n <div className={cn('flex min-h-0 min-w-0 flex-col overflow-hidden', sideColumnSlot && 'border-r border-border1')}>\n {sideColumnSlot}\n </div>\n <div className=\"flex min-h-0 min-w-0 flex-col overflow-hidden\">{children}</div>\n {/ Searchable: the span detail is where a match hides inside a large payload. */}\n <div\n ref={scrollToMatchRef}\n data-highlight\n className={cn(\n 'flex min-h-0 min-w-0 flex-col overflow-hidden',\n spanPanelSlot && 'animate-in border-l border-border1 duration-300 fade-in-0',\n )}\n >\n {spanPanelSlot}\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/trace-details-view.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-details-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-details-view.tsx"],"sourcesContent":["import ~~type~~ { ~~LightSpanRecord } from '@mastra/core/storage';\nimport {~~ useEffect, useMemo, useState } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nexport interface TraceDetailsViewProps {\n traceId: string;\n /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. /\n spans: LightSpanRecord[] \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n /* Called when the user clicks a span in the timeline. Toggling a selected span off passes undefined. /\n onSpanSelect?: (spanId: string \| undefined) => void;\n /* Fully controlled selection — the span to highlight. Pass whatever the parent's source of truth is. /\n selectedSpanId?: string \| null;\n}\n\n/\n Compact trace panel using `DataDetailsPanel` (popover-style). Renders the timeline only —\n * no trace header KV, no evaluate/save actions. Use this for inline trace inspection from a\n * list page (e.g. the Logs page). For the full-width trace view, use `TraceDataPanelView`.\n */\nexport function TraceDetailsView({\n traceId,\n spans,\n isLoading,\n onClose,\n onSpanSelect,\n selectedSpanId,\n}: TraceDetailsViewProps) {\n const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);\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 handleSpanClick = (id: string) => {\n onSpanSelect?.(selectedSpanId === id ? undefined : id);\n };\n\n return (\n <DataDetailsPanel>\n <DataDetailsPanel.Header>\n <DataDetailsPanel.Heading className=\"items-center\">\n Trace\n <TraceIdButton id={traceId} />\n </DataDetailsPanel.Heading>\n <DataDetailsPanel.CloseButton onClick={onClose} />\n </DataDetailsPanel.Header>\n\n {isLoading ? (\n <DataDetailsPanel.LoadingData>Loading trace...</DataDetailsPanel.LoadingData>\n ) : hierarchicalSpans.length === 0 ? (\n <DataDetailsPanel.NoData>No spans found for this trace.</DataDetailsPanel.NoData>\n ) : (\n <DataDetailsPanel.Content>\n <TraceSpanTree\n hierarchicalSpans={hierarchicalSpans}\n onSpanClick={handleSpanClick}\n selectedSpanId={selectedSpanId ?? undefined}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n />\n </DataDetailsPanel.Content>\n )}\n </DataDetailsPanel>\n );\n}\n"],"names":["useMemo","formatHierarchicalSpans","useState","useEffect","getAllSpanIds","DataDetailsPanel","jsxs","jsx","TraceIdButton","TraceSpanTree"],"mappings":";;;;;;;;;;;;AAyBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,iBAAA,GAAoBA,aAAA,CAAQ,MAAMC,yEAAA,CAAwB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAErF,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIC,cAAA,CAAmB,EAAE,CAAA;AAEnE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmBC,gDAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,YAAA,GAAe,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAE,CAAA;AAAA,EACvD,CAAA;AAEA,EAAA,uCACGC,4CAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,4CAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAAC,eAAA,CAACD,4CAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBAEjDE,cAAA,CAACC,qDAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACAD,cAAA,CAACF,4CAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACCE,cAAA,CAACF,4CAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,kBAAA,EAAgB,IAC5C,iBAAA,CAAkB,MAAA,KAAW,oBAC/BE,cAAA,CAACF,4CAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,gCAAA,EAA8B,oBAEvDE,cAAA,CAACF,4CAAA,CAAiB,SAAjB,EACC,QAAA,kBAAAE,cAAA;AAAA,MAACE,qDAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,WAAA,EAAa,eAAA;AAAA,QACb,gBAAgB,cAAA,IAAkB,MAAA;AAAA,QAClC,eAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"trace-details-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-details-view.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport type { LightSpanRecord } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nexport interface TraceDetailsViewProps {\n traceId: string;\n /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. /\n spans: LightSpanRecord[] \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n /* Called when the user clicks a span in the timeline. Toggling a selected span off passes undefined. /\n onSpanSelect?: (spanId: string \| undefined) => void;\n /* Fully controlled selection — the span to highlight. Pass whatever the parent's source of truth is. /\n selectedSpanId?: string \| null;\n}\n\n/\n Compact trace panel using `DataDetailsPanel` (popover-style). Renders the timeline only —\n * no trace header KV, no evaluate/save actions. Use this for inline trace inspection from a\n * list page (e.g. the Logs page). For the full-width trace view, use `TraceDataPanelView`.\n */\nexport function TraceDetailsView({\n traceId,\n spans,\n isLoading,\n onClose,\n onSpanSelect,\n selectedSpanId,\n}: TraceDetailsViewProps) {\n const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);\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 handleSpanClick = (id: string) => {\n onSpanSelect?.(selectedSpanId === id ? undefined : id);\n };\n\n return (\n <DataDetailsPanel>\n <DataDetailsPanel.Header>\n <DataDetailsPanel.Heading className=\"items-center\">\n Trace\n <TraceIdButton id={traceId} />\n </DataDetailsPanel.Heading>\n <DataDetailsPanel.CloseButton onClick={onClose} />\n </DataDetailsPanel.Header>\n\n {isLoading ? (\n <DataDetailsPanel.LoadingData>Loading trace...</DataDetailsPanel.LoadingData>\n ) : hierarchicalSpans.length === 0 ? (\n <DataDetailsPanel.NoData>No spans found for this trace.</DataDetailsPanel.NoData>\n ) : (\n <DataDetailsPanel.Content>\n <TraceSpanTree\n hierarchicalSpans={hierarchicalSpans}\n onSpanClick={handleSpanClick}\n selectedSpanId={selectedSpanId ?? undefined}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n />\n </DataDetailsPanel.Content>\n )}\n </DataDetailsPanel>\n );\n}\n"],"names":["useMemo","formatHierarchicalSpans","useState","useEffect","getAllSpanIds","DataDetailsPanel","jsxs","jsx","TraceIdButton","TraceSpanTree"],"mappings":";;;;;;;;;;;;AAyBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,iBAAA,GAAoBA,aAAA,CAAQ,MAAMC,yEAAA,CAAwB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAErF,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIC,cAAA,CAAmB,EAAE,CAAA;AAEnE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmBC,gDAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,YAAA,GAAe,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAE,CAAA;AAAA,EACvD,CAAA;AAEA,EAAA,uCACGC,4CAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,4CAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAAC,eAAA,CAACD,4CAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBAEjDE,cAAA,CAACC,qDAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACAD,cAAA,CAACF,4CAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACCE,cAAA,CAACF,4CAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,kBAAA,EAAgB,IAC5C,iBAAA,CAAkB,MAAA,KAAW,oBAC/BE,cAAA,CAACF,4CAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,gCAAA,EAA8B,oBAEvDE,cAAA,CAACF,4CAAA,CAAiB,SAAjB,EACC,QAAA,kBAAAE,cAAA;AAAA,MAACE,qDAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,WAAA,EAAa,eAAA;AAAA,QACb,gBAAgB,cAAA,IAAkB,MAAA;AAAA,QAClC,eAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-details-view.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-details-view.es.js","sources":["../../../../src/domains/traces/components/trace-details-view.tsx"],"sourcesContent":["import ~~type~~ { ~~LightSpanRecord } from '@mastra/core/storage';\nimport {~~ useEffect, useMemo, useState } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nexport interface TraceDetailsViewProps {\n traceId: string;\n /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. /\n spans: LightSpanRecord[] \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n /* Called when the user clicks a span in the timeline. Toggling a selected span off passes undefined. /\n onSpanSelect?: (spanId: string \| undefined) => void;\n /* Fully controlled selection — the span to highlight. Pass whatever the parent's source of truth is. /\n selectedSpanId?: string \| null;\n}\n\n/\n Compact trace panel using `DataDetailsPanel` (popover-style). Renders the timeline only —\n * no trace header KV, no evaluate/save actions. Use this for inline trace inspection from a\n * list page (e.g. the Logs page). For the full-width trace view, use `TraceDataPanelView`.\n */\nexport function TraceDetailsView({\n traceId,\n spans,\n isLoading,\n onClose,\n onSpanSelect,\n selectedSpanId,\n}: TraceDetailsViewProps) {\n const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);\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 handleSpanClick = (id: string) => {\n onSpanSelect?.(selectedSpanId === id ? undefined : id);\n };\n\n return (\n <DataDetailsPanel>\n <DataDetailsPanel.Header>\n <DataDetailsPanel.Heading className=\"items-center\">\n Trace\n <TraceIdButton id={traceId} />\n </DataDetailsPanel.Heading>\n <DataDetailsPanel.CloseButton onClick={onClose} />\n </DataDetailsPanel.Header>\n\n {isLoading ? (\n <DataDetailsPanel.LoadingData>Loading trace...</DataDetailsPanel.LoadingData>\n ) : hierarchicalSpans.length === 0 ? (\n <DataDetailsPanel.NoData>No spans found for this trace.</DataDetailsPanel.NoData>\n ) : (\n <DataDetailsPanel.Content>\n <TraceSpanTree\n hierarchicalSpans={hierarchicalSpans}\n onSpanClick={handleSpanClick}\n selectedSpanId={selectedSpanId ?? undefined}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n />\n </DataDetailsPanel.Content>\n )}\n </DataDetailsPanel>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,iBAAA,GAAoB,OAAA,CAAQ,MAAM,uBAAA,CAAwB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAErF,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmB,aAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,YAAA,GAAe,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAE,CAAA;AAAA,EACvD,CAAA;AAEA,EAAA,4BACG,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,gBAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,gBAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBAEjD,GAAA,CAAC,aAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACA,GAAA,CAAC,gBAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACC,GAAA,CAAC,gBAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,kBAAA,EAAgB,IAC5C,iBAAA,CAAkB,MAAA,KAAW,oBAC/B,GAAA,CAAC,gBAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,gCAAA,EAA8B,oBAEvD,GAAA,CAAC,gBAAA,CAAiB,SAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,WAAA,EAAa,eAAA;AAAA,QACb,gBAAgB,cAAA,IAAkB,MAAA;AAAA,QAClC,eAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"trace-details-view.es.js","sources":["../../../../src/domains/traces/components/trace-details-view.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport type { LightSpanRecord } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nexport interface TraceDetailsViewProps {\n traceId: string;\n /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. /\n spans: LightSpanRecord[] \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n /* Called when the user clicks a span in the timeline. Toggling a selected span off passes undefined. /\n onSpanSelect?: (spanId: string \| undefined) => void;\n /* Fully controlled selection — the span to highlight. Pass whatever the parent's source of truth is. /\n selectedSpanId?: string \| null;\n}\n\n/\n Compact trace panel using `DataDetailsPanel` (popover-style). Renders the timeline only —\n * no trace header KV, no evaluate/save actions. Use this for inline trace inspection from a\n * list page (e.g. the Logs page). For the full-width trace view, use `TraceDataPanelView`.\n */\nexport function TraceDetailsView({\n traceId,\n spans,\n isLoading,\n onClose,\n onSpanSelect,\n selectedSpanId,\n}: TraceDetailsViewProps) {\n const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);\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 handleSpanClick = (id: string) => {\n onSpanSelect?.(selectedSpanId === id ? undefined : id);\n };\n\n return (\n <DataDetailsPanel>\n <DataDetailsPanel.Header>\n <DataDetailsPanel.Heading className=\"items-center\">\n Trace\n <TraceIdButton id={traceId} />\n </DataDetailsPanel.Heading>\n <DataDetailsPanel.CloseButton onClick={onClose} />\n </DataDetailsPanel.Header>\n\n {isLoading ? (\n <DataDetailsPanel.LoadingData>Loading trace...</DataDetailsPanel.LoadingData>\n ) : hierarchicalSpans.length === 0 ? (\n <DataDetailsPanel.NoData>No spans found for this trace.</DataDetailsPanel.NoData>\n ) : (\n <DataDetailsPanel.Content>\n <TraceSpanTree\n hierarchicalSpans={hierarchicalSpans}\n onSpanClick={handleSpanClick}\n selectedSpanId={selectedSpanId ?? undefined}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n />\n </DataDetailsPanel.Content>\n )}\n </DataDetailsPanel>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,iBAAA,GAAoB,OAAA,CAAQ,MAAM,uBAAA,CAAwB,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAErF,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,kBAAA,CAAmB,aAAA,CAAc,iBAAiB,CAAC,CAAA;AAAA,IACrD;AAAA,EACF,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAA,GAAkB,CAAC,EAAA,KAAe;AACtC,IAAA,YAAA,GAAe,cAAA,KAAmB,EAAA,GAAK,MAAA,GAAY,EAAE,CAAA;AAAA,EACvD,CAAA;AAEA,EAAA,4BACG,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,gBAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,gBAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAU,cAAA,EAAe,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBAEjD,GAAA,CAAC,aAAA,EAAA,EAAc,EAAA,EAAI,OAAA,EAAS;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACA,GAAA,CAAC,gBAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACC,GAAA,CAAC,gBAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,kBAAA,EAAgB,IAC5C,iBAAA,CAAkB,MAAA,KAAW,oBAC/B,GAAA,CAAC,gBAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,gCAAA,EAA8B,oBAEvD,GAAA,CAAC,gBAAA,CAAiB,SAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA,WAAA,EAAa,eAAA;AAAA,QACb,gBAAgB,cAAA,IAAkB,MAAA;AAAA,QAClC,eAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-id-button.cjs.js CHANGED Viewed

@@ -3,24 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const Button = require('../../../Button-BJOVwaxp.cjs');
-const tooltip = require('../../../tooltip-BsSNtmxl.cjs');
-const hooks_useCopyToClipboard = require('../../../hooks/use-copy-to-clipboard.cjs.js');
-const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
+const dataPanel = require('../../../data-panel-BhJ8Lp_j.cjs');
 function TraceIdButton({ id }) {
-  const { isCopied, handleCopy } = hooks_useCopyToClipboard.useCopyToClipboard({ text: id, showToast: false });
-  const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { open: isCopied || open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      tooltip.TooltipTrigger,
-      {
-        render: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCopy, children: utils_truncateString.truncateString(id, 12) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: isCopied ? "Copied to clipboard" : "Copy to clipboard" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CopyId, { id });
 }
 exports.TraceIdButton = TraceIdButton;

package/dist/domains/traces/components/trace-id-button.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-id-button.cjs.js","sources":["../../../../src/domains/traces/components/trace-id-button.tsx"],"sourcesContent":["import { ~~useState~~ } from '~~react';\nimport { Button } from '~~@/ds/components/~~Button~~';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { truncateString } from '@/lib/truncate-string';\n\nexport function TraceIdButton({ id }: { id: string }) {\n ~~const { isCopied, handleCopy } = useCopyToClipboard({ text: id, showToast: false });\n const [open, setOpen] = useState(false);\n\n~~ return ~~(\n~~ <~~Tooltip~~ ~~open~~={~~isCopied \|\| open} onOpenChange={setOpen}>\n <TooltipTrigger\n render={\n <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={handleCopy}>\n {truncateString(~~id~~, 12)~~}~~\n </Button>\n }\n />\n <TooltipContent>{isCopied~~ ~~? 'Copied to clipboard' : 'Copy to clipboard'}</TooltipContent>\~~n ~~</Tooltip>\n );\n~~}\n"],"names":["~~useCopyToClipboard","useState","Tooltip","~~jsx","~~TooltipTrigger~~"~~,"Button","truncateString","TooltipContent"~~],"mappings":"~~;;;;;;;;;;;AAMO~~,SAAS,aAAA,CAAc,EAAE,EAAA,EAAG,EAAmB;AACpD,EAAA,~~MAAM~~,EAAE,QAAA,EAAU,UAAA,EAAW,GAAIA,2CAAA,CAAmB,EAAE,IAAA,EAAM,EAAA,EAAI,SAAA,EAAW,KAAA,EAAO,CAAA;AAClF,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEtC,EAAA,uCACGC,eAAA,EAAA,EAAQ,IAAA,EAAM,QAAA,IAAY,IAAA,EAAM,cAAc,OAAA,EAC7C,QAAA,EAAA;AAAA,oBAAAC,cAAA~~;AAAA~~,~~MAACC~~,~~sBAAA;AAAA~~,~~MAAA;AAAA~~,~~QACC,~~MAAA,~~kBACED~~,~~cAAA~~,~~CAACE,aAAA,~~EAAA,~~EAAO,IAAA,EAAK,UAAS,OAAA,~~EAAQ,~~OAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,OAAA,EAAS,UAAA,EACtD,QAAA,EAAAC,mCAAA,CAAe,EAAA,EAAI,EAAE,~~CAAA~~,EACxB~~;~~AAAA;AAAA,KAEJ;AAAA,oBACAH,cAAA,CAACI,sBAAA,EAAA,EAAgB,QAAA,EAAA,QAAA,GAAW,qBAAA,GAAwB,mBAAA,EAAoB;AAAA,GAAA,EAC1E,CAAA;AAEJ~~;;;;"}
1	+ {"version":3,"file":"trace-id-button.cjs.js","sources":["../../../../src/domains/traces/components/trace-id-button.tsx"],"sourcesContent":["import { DataPanel } from '@/ds/components/DataPanel';\n\nexport function TraceIdButton({ id }: { id: string }) {\n return <DataPanel.CopyId id={id} />;\n}\n"],"names":["jsx","DataPanel"],"mappings":";;;;;;;AAEO,SAAS,aAAA,CAAc,EAAE,EAAA,EAAG,EAAmB;AACpD,EAAA,uBAAOA,cAAA,CAACC,mBAAA,CAAU,MAAA,EAAV,EAAiB,EAAA,EAAQ,CAAA;AACnC;;;;"}

package/dist/domains/traces/components/trace-id-button.es.js CHANGED Viewed

@@ -1,22 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { B as Button } from '../../../Button-BVGwYwHT.js';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-Vj_jjcxE.js';
-import { useCopyToClipboard } from '../../../hooks/use-copy-to-clipboard.es.js';
-import { truncateString } from '../../../utils/truncate-string.es.js';
+import { jsx } from 'react/jsx-runtime';
+import { D as DataPanel } from '../../../data-panel-D2JtbyKg.js';
 function TraceIdButton({ id }) {
-  const { isCopied, handleCopy } = useCopyToClipboard({ text: id, showToast: false });
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Tooltip, { open: isCopied || open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(
-      TooltipTrigger,
-      {
-        render: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCopy, children: truncateString(id, 12) })
-      }
-    ),
-    /* @__PURE__ */ jsx(TooltipContent, { children: isCopied ? "Copied to clipboard" : "Copy to clipboard" })
-  ] });
+  return /* @__PURE__ */ jsx(DataPanel.CopyId, { id });
 }
 export { TraceIdButton };

package/dist/domains/traces/components/trace-id-button.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-id-button.es.js","sources":["../../../../src/domains/traces/components/trace-id-button.tsx"],"sourcesContent":["import { ~~useState~~ } from '~~react';\nimport { Button } from '~~@/ds/components/~~Button~~';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { truncateString } from '@/lib/truncate-string';\n\nexport function TraceIdButton({ id }: { id: string }) {\n ~~const { isCopied, handleCopy } = useCopyToClipboard({ text: id, showToast: false });\n const [open, setOpen] = useState(false);\n\n~~ return ~~(\n~~ <~~Tooltip~~ ~~open~~={~~isCopied \|\| open} onOpenChange={setOpen}>\n <TooltipTrigger\n render={\n <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={handleCopy}>\n {truncateString(~~id~~, 12)~~}~~\n </Button>\n }\n />\n <TooltipContent>{isCopied~~ ~~? 'Copied to clipboard' : 'Copy to clipboard'}</TooltipContent>\~~n ~~</Tooltip>\n );\n~~}\n"],"names":[],"mappings":"~~;;;;;;;AAMO~~,SAAS,aAAA,CAAc,EAAE,EAAA,EAAG,EAAmB;AACpD,EAAA,~~MAAM~~,~~EAAE~~,~~QAAA~~,~~EAAU,UAAA,EAAW,GAAI,kBAAA,CAAmB,EAAE,IAAA,EAAM,EAAA,EAAI,~~SAAA,~~EAAW~~,~~KAAA,EAAO,CAAA;AAClF,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtC,EAAA,4BACG,OAAA,EAAA,EAAQ,IAAA,EAAM,QAAA,IAAY,IAAA,EAAM,cAAc,OAAA,EAC7C,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,~~MAAA~~;AAAA~~,~~QACC~~,~~MAAA~~,~~kBACE,GAAA,CAAC,MAAA,~~EAAA,~~EAAO,IAAA,EAAK,UAAS,OAAA,~~EAAQ,~~OAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,OAAA,EAAS,UAAA,EACtD,QAAA,EAAA,cAAA,CAAe,EAAA,EAAI,EAAE,~~CAAA~~,EACxB~~;~~AAAA;AAAA,KAEJ;AAAA,oBACA,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,QAAA,GAAW,qBAAA,GAAwB,mBAAA,EAAoB;AAAA,GAAA,EAC1E,CAAA;AAEJ~~;;;;"}
1	+ {"version":3,"file":"trace-id-button.es.js","sources":["../../../../src/domains/traces/components/trace-id-button.tsx"],"sourcesContent":["import { DataPanel } from '@/ds/components/DataPanel';\n\nexport function TraceIdButton({ id }: { id: string }) {\n return <DataPanel.CopyId id={id} />;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,aAAA,CAAc,EAAE,EAAA,EAAG,EAAmB;AACpD,EAAA,uBAAO,GAAA,CAAC,SAAA,CAAU,MAAA,EAAV,EAAiB,EAAA,EAAQ,CAAA;AACnC;;;;"}

package/dist/domains/traces/components/trace-keys-and-values.cjs.js CHANGED Viewed

@@ -6,8 +6,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
 const domains_traces_components_traceStatusValue = require('./trace-status-value.cjs.js');
 const domains_metrics_components_metricsUtils = require('../../metrics/components/metrics-utils.cjs.js');
-const dataKeysAndValues = require('../../../data-keys-and-values-CUqVRfqS.cjs');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-CPUfobZS.cjs');
+const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
 const RESPONSIVE_GRID_COLUMNS = {
   1: "grid-cols-[auto_1fr]!",

package/dist/domains/traces/components/trace-keys-and-values.es.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { formatSpanDuration, formatSpanDurationExact, formatSpanTimestamp, formatSpanTimestampExact } from '../utils/span-utils.es.js';
 import { TraceStatusValue } from './trace-status-value.es.js';
 import { formatCompact, formatCost } from '../../metrics/components/metrics-utils.es.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-778xnwOK.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-BxSKCdWQ.js';
+import { c as cn } from '../../../cn-C6s2yXwM.js';
 const RESPONSIVE_GRID_COLUMNS = {
   1: "grid-cols-[auto_1fr]!",

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

@@ -4,8 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_spanRows = require('./span-rows.cjs.js');
-const domains_traces_components_spanTimelineCol = require('./span-timeline-col.cjs.js');
-const domains_traces_components_spanTreeRow = require('./span-tree-row.cjs.js');
+const domains_traces_components_spanTimelineRow = require('./span-timeline-row.cjs.js');
 const domains_traces_components_spanTypeLegend = require('./span-type-legend.cjs.js');
 const domains_traces_components_traceSpanTree = require('./trace-span-tree.cjs.js');
@@ -13,7 +12,6 @@ const TICKS = [0, 0.25, 0.5, 0.75, 1];
 function formatTick(ms) {
   return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
 }
-const defaultTrailing = (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTimelineCol.SpanTimelineCol, { ctx });
 function TraceSpanTimeline({
   hierarchicalSpans = [],
   onSpanClick,
@@ -24,23 +22,19 @@ function TraceSpanTimeline({
   setExpandedSpanIds,
   featuredSpanIds,
   revealSpanId,
-  leadingSlot,
-  renderTrailing = defaultTrailing
+  leadingSlot
 }) {
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceSpanTree.TraceSpanTreeLoading, {});
   const overallLatency = hierarchicalSpans[0]?.latency || 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    leadingSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pt-1.5", children: leadingSlot }),
+    leadingSlot,
     /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTypeLegend.SpanTypeLegend, { spans: hierarchicalSpans }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(12rem,1fr)] content-start items-start gap-y-px overflow-hidden py-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "aria-label": "Trace time axis",
-          className: "text-ui-xs text-neutral3 col-start-3 flex justify-between px-1 pr-2 pb-1",
-          children: TICKS.map((tick) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTick(overallLatency * tick) }, tick))
-        }
-      ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-label": "Trace time axis", className: "grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-xs text-neutral3 flex justify-between tabular-nums", children: TICKS.map((tick) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTick(overallLatency * tick) }, tick)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12" })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         domains_traces_components_spanRows.SpanRows,
         {
@@ -52,7 +46,7 @@ function TraceSpanTimeline({
           featuredSpanIds,
           expandedSpanIds,
           setExpandedSpanIds,
-          renderRow: (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTreeRow.SpanTreeRow, { ctx, trailing: renderTrailing })
+          renderRow: (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTimelineRow.SpanTimelineRow, { ctx })
         }
       )
     ] })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-span-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport ~~type~~ { ~~SpanRowContext } from './span-rows';\nimport {~~ SpanRows } from './span-rows';\nimport { ~~SpanTimelineCol~~ } from './span-timeline-~~col';\nimport { SpanTreeRow } from './span-tree-~~row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\n hierarchicalSpans: UISpan[];\n onSpanClick: (id: string) => void;\n selectedSpanId?: string;\n isLoading?: boolean;\n fadedTypes?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n featuredSpanIds?: string[];\n /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n /* Rendered full-width above the span type legend row. /\n leadingSlot?: ReactNode;\n ~~/* End-of-row cell. Defaults to the span bar on the shared time axis (`SpanTimelineCol`). /\n renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n~~};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\~~nconst~~ ~~defaultTrailing~~ = ~~(ctx~~: ~~SpanRowContext)~~ => ~~<SpanTimelineCol~~ ~~ctx={ctx}~~ />;\n\n/* ~~Same~~ ~~hierarchy~~ as `TraceSpanTree` ~~(name~~ + ~~expansion~~ ~~controls)~~ ~~with~~ a ~~trailing~~ ~~column~~ of ~~bars~~ on a shared time axis. /\nexport function TraceSpanTimeline({\n hierarchicalSpans = [],\n onSpanClick,\n selectedSpanId,\n isLoading,\n fadedTypes,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n revealSpanId,\n leadingSlot,\n ~~renderTrailing = defaultTrailing,\n~~}: TraceSpanTimelineProps) {\n if (isLoading) return <TraceSpanTreeLoading />;\n\n const overallLatency = hierarchicalSpans[0]?.latency \|\| 0;\n\n return (\n <>\n {leadingSlot ~~&& <div className=\"px-2 pt-1.5\">{leadingSlot~~}~~</div>}~~\n <SpanTypeLegend spans={hierarchicalSpans} />\n <div className=\"grid grid-cols-[minmax(0,~~1fr~~)~~_auto_minmax~~(12rem,~~1fr~~)] content-start ~~items-start~~ gap-y-px overflow-hidden py-1\">\n <div\n aria-label=\"Trace time axis\"\n className=\"text-ui-xs text-neutral3 ~~col-start-3~~ flex justify-between px-~~1 pr-2 pb-1~~\"\n >\n {TICKS.map(tick => (\n <span key={tick}>{formatTick(overallLatency tick)}</span>\n ))}\n </div>\n <SpanRows\n spans={hierarchicalSpans}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n renderRow={ctx => <~~SpanTreeRow~~ ctx={ctx} ~~trailing={renderTrailing}~~ />}\n />\n </div>\n </>\n );\n}\n"],"names":["jsx","~~SpanTimelineCol","~~TraceSpanTreeLoading","jsxs","Fragment","SpanTypeLegend","SpanRows","~~SpanTreeRow~~"],"mappings":"~~;;;;;;;;;;;AA0BA~~,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;~~AAEA~~,~~MAAM,eAAA,GAAkB,CAAC,GAAA,qBAAwBA,cAAA,CAACC,6DAAgB,GAAA,EAAU,CAAA;AAGrE,~~SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA~~,WAAA~~;~~AAAA~~,~~EACA,cAAA,GAAiB;AACnB,~~CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,~~uBAAOD~~,cAAA,~~CAACE~~,4DAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA~~,oBAAeJ,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,WAAA,EAAY,CAAA~~;AAAA,~~oBAC1DA~~,cAAA,~~CAACK~~,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU~~,+GAAA~~,~~EACb~~,QAAA,EAAA;AAAA,~~sBAAAH~~,cAAA~~;AAAA~~,~~QAAC~~,KAAA~~;AAAA~~,~~QAAA~~;AAAA,~~UACC~~,YAAA,EAAW,iBAAA;AAAA,~~UACX~~,SAAA,EAAU,~~0EAAA;AAAA~~,~~UAET~~,QAAA,EAAA,KAAA,CAAM,~~GAAA~~,~~CAAI,~~CAAA,IAAA,qBACTA,cAAA,CAAC,MAAA,EAAA,EAAiB,~~qBAAW~~,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD;AAAA;AAAA,~~OACH~~;AAAA,sBACAA,cAAA;AAAA,~~QAACM~~,2CAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,~~WAAW~~,CAAA,GAAA,~~qBAAON~~,cAAA,~~CAACO~~,~~iDAAA~~,EAAA,~~EAAY~~,GAAA,EAAU~~,UAAU,cAAA,EAAgB~~;AAAA;AAAA;~~AACrE~~,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"trace-span-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineRow } from './span-timeline-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\n hierarchicalSpans: UISpan[];\n onSpanClick: (id: string) => void;\n selectedSpanId?: string;\n isLoading?: boolean;\n fadedTypes?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n featuredSpanIds?: string[];\n /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n /* Rendered full-width above the span type legend row. /\n leadingSlot?: ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/\n Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,\n * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its\n * own row component (`SpanTimelineRow`), independent from the tree's rows.\n /\nexport function TraceSpanTimeline({\n hierarchicalSpans = [],\n onSpanClick,\n selectedSpanId,\n isLoading,\n fadedTypes,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n revealSpanId,\n leadingSlot,\n}: TraceSpanTimelineProps) {\n if (isLoading) return <TraceSpanTreeLoading />;\n\n const overallLatency = hierarchicalSpans[0]?.latency \|\| 0;\n\n return (\n <>\n {leadingSlot}\n <SpanTypeLegend spans={hierarchicalSpans} />\n <div className=\"grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1\">\n {/ Header row: empty name cell, then the axis aligned with the bars (same horizontal padding, minus the duration label). /}\n <div />\n <div aria-label=\"Trace time axis\" className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1\">\n <div className=\"text-ui-xs text-neutral3 flex justify-between tabular-nums\">\n {TICKS.map(tick => (\n <span key={tick}>{formatTick(overallLatency tick)}</span>\n ))}\n </div>\n <div className=\"w-12\" />\n </div>\n <SpanRows\n spans={hierarchicalSpans}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n renderRow={ctx => <SpanTimelineRow ctx={ctx} />}\n />\n </div>\n </>\n );\n}\n"],"names":["jsx","TraceSpanTreeLoading","jsxs","Fragment","SpanTypeLegend","SpanRows","SpanTimelineRow"],"mappings":";;;;;;;;;;AAsBA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAOA,cAAA,CAACC,4DAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDH,cAAA,CAACI,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EAEb,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,CAAA;AAAA,sBACLE,eAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAW,iBAAA,EAAkB,WAAU,qDAAA,EAC1C,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4DAAA,EACZ,QAAA,EAAA,KAAA,CAAM,IAAI,CAAA,IAAA,qBACTA,cAAA,CAAC,MAAA,EAAA,EAAiB,QAAA,EAAA,UAAA,CAAW,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD,CAAA,EACH,CAAA;AAAA,wBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO;AAAA,OAAA,EACxB,CAAA;AAAA,sBACAA,cAAA;AAAA,QAACK,2CAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA,EAAW,CAAA,GAAA,qBAAOL,cAAA,CAACM,yDAAA,EAAA,EAAgB,GAAA,EAAU;AAAA;AAAA;AAC/C,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SpanRows } from './span-rows.es.js';
-import { SpanTimelineCol } from './span-timeline-col.es.js';
-import { SpanTreeRow } from './span-tree-row.es.js';
+import { SpanTimelineRow } from './span-timeline-row.es.js';
 import { SpanTypeLegend } from './span-type-legend.es.js';
 import { TraceSpanTreeLoading } from './trace-span-tree.es.js';
@@ -9,7 +8,6 @@ const TICKS = [0, 0.25, 0.5, 0.75, 1];
 function formatTick(ms) {
   return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
 }
-const defaultTrailing = (ctx) => /* @__PURE__ */ jsx(SpanTimelineCol, { ctx });
 function TraceSpanTimeline({
   hierarchicalSpans = [],
   onSpanClick,
@@ -20,23 +18,19 @@ function TraceSpanTimeline({
   setExpandedSpanIds,
   featuredSpanIds,
   revealSpanId,
-  leadingSlot,
-  renderTrailing = defaultTrailing
+  leadingSlot
 }) {
   if (isLoading) return /* @__PURE__ */ jsx(TraceSpanTreeLoading, {});
   const overallLatency = hierarchicalSpans[0]?.latency || 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    leadingSlot && /* @__PURE__ */ jsx("div", { className: "px-2 pt-1.5", children: leadingSlot }),
+    leadingSlot,
     /* @__PURE__ */ jsx(SpanTypeLegend, { spans: hierarchicalSpans }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(12rem,1fr)] content-start items-start gap-y-px overflow-hidden py-1", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "Trace time axis",
-          className: "text-ui-xs text-neutral3 col-start-3 flex justify-between px-1 pr-2 pb-1",
-          children: TICKS.map((tick) => /* @__PURE__ */ jsx("span", { children: formatTick(overallLatency * tick) }, tick))
-        }
-      ),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1", children: [
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsxs("div", { "aria-label": "Trace time axis", className: "grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-ui-xs text-neutral3 flex justify-between tabular-nums", children: TICKS.map((tick) => /* @__PURE__ */ jsx("span", { children: formatTick(overallLatency * tick) }, tick)) }),
+        /* @__PURE__ */ jsx("div", { className: "w-12" })
+      ] }),
       /* @__PURE__ */ jsx(
         SpanRows,
         {
@@ -48,7 +42,7 @@ function TraceSpanTimeline({
           featuredSpanIds,
           expandedSpanIds,
           setExpandedSpanIds,
-          renderRow: (ctx) => /* @__PURE__ */ jsx(SpanTreeRow, { ctx, trailing: renderTrailing })
+          renderRow: (ctx) => /* @__PURE__ */ jsx(SpanTimelineRow, { ctx })
         }
       )
     ] })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-span-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport ~~type~~ { ~~SpanRowContext } from './span-rows';\nimport {~~ SpanRows } from './span-rows';\nimport { ~~SpanTimelineCol~~ } from './span-timeline-~~col';\nimport { SpanTreeRow } from './span-tree-~~row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\n hierarchicalSpans: UISpan[];\n onSpanClick: (id: string) => void;\n selectedSpanId?: string;\n isLoading?: boolean;\n fadedTypes?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n featuredSpanIds?: string[];\n /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n /* Rendered full-width above the span type legend row. /\n leadingSlot?: ReactNode;\n ~~/* End-of-row cell. Defaults to the span bar on the shared time axis (`SpanTimelineCol`). /\n renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n~~};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\~~nconst~~ ~~defaultTrailing~~ = ~~(ctx~~: ~~SpanRowContext)~~ => ~~<SpanTimelineCol~~ ~~ctx={ctx}~~ />;\n\n/* ~~Same~~ ~~hierarchy~~ as `TraceSpanTree` ~~(name~~ + ~~expansion~~ ~~controls)~~ ~~with~~ a ~~trailing~~ ~~column~~ of ~~bars~~ on a shared time axis. /\nexport function TraceSpanTimeline({\n hierarchicalSpans = [],\n onSpanClick,\n selectedSpanId,\n isLoading,\n fadedTypes,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n revealSpanId,\n leadingSlot,\n ~~renderTrailing = defaultTrailing,\n~~}: TraceSpanTimelineProps) {\n if (isLoading) return <TraceSpanTreeLoading />;\n\n const overallLatency = hierarchicalSpans[0]?.latency \|\| 0;\n\n return (\n <>\n {leadingSlot ~~&& <div className=\"px-2 pt-1.5\">{leadingSlot~~}~~</div>}~~\n <SpanTypeLegend spans={hierarchicalSpans} />\n <div className=\"grid grid-cols-[minmax(0,~~1fr~~)~~_auto_minmax~~(12rem,~~1fr~~)] content-start ~~items-start~~ gap-y-px overflow-hidden py-1\">\n <div\n aria-label=\"Trace time axis\"\n className=\"text-ui-xs text-neutral3 ~~col-start-3~~ flex justify-between px-~~1 pr-2 pb-1~~\"\n >\n {TICKS.map(tick => (\n <span key={tick}>{formatTick(overallLatency tick)}</span>\n ))}\n </div>\n <SpanRows\n spans={hierarchicalSpans}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n renderRow={ctx => <~~SpanTreeRow~~ ctx={ctx} ~~trailing={renderTrailing}~~ />}\n />\n </div>\n </>\n );\n}\n"],"names":[],"mappings":"~~;;;;;;;AA0BA~~,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;~~AAEA~~,~~MAAM,eAAA,GAAkB,CAAC,GAAA,qBAAwB,GAAA,CAAC,mBAAgB,GAAA,EAAU,CAAA;AAGrE,~~SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA~~,WAAA~~;~~AAAA~~,~~EACA,cAAA,GAAiB;AACnB,~~CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA~~,oBAAe,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,WAAA,EAAY,CAAA~~;AAAA,~~oBAC1D~~,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU~~,+GAAA~~,~~EACb~~,QAAA,EAAA;AAAA,sBAAA,GAAA~~;AAAA~~,~~QAAC~~,KAAA~~;AAAA~~,~~QAAA~~;AAAA,~~UACC~~,YAAA,EAAW,iBAAA;AAAA,~~UACX~~,SAAA,EAAU,~~0EAAA;AAAA~~,~~UAET~~,QAAA,EAAA,KAAA,CAAM,~~GAAA~~,~~CAAI,~~CAAA,IAAA,qBACT,GAAA,CAAC,MAAA,EAAA,EAAiB,~~qBAAW~~,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD;AAAA;AAAA,~~OACH~~;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,~~WAAW~~,CAAA,GAAA,qBAAO,GAAA,CAAC,~~WAAA~~,EAAA,~~EAAY~~,GAAA,EAAU~~,UAAU,cAAA,EAAgB~~;AAAA;AAAA;~~AACrE~~,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"trace-span-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineRow } from './span-timeline-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\n hierarchicalSpans: UISpan[];\n onSpanClick: (id: string) => void;\n selectedSpanId?: string;\n isLoading?: boolean;\n fadedTypes?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n featuredSpanIds?: string[];\n /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n /* Rendered full-width above the span type legend row. /\n leadingSlot?: ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/\n Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,\n * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its\n * own row component (`SpanTimelineRow`), independent from the tree's rows.\n /\nexport function TraceSpanTimeline({\n hierarchicalSpans = [],\n onSpanClick,\n selectedSpanId,\n isLoading,\n fadedTypes,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n revealSpanId,\n leadingSlot,\n}: TraceSpanTimelineProps) {\n if (isLoading) return <TraceSpanTreeLoading />;\n\n const overallLatency = hierarchicalSpans[0]?.latency \|\| 0;\n\n return (\n <>\n {leadingSlot}\n <SpanTypeLegend spans={hierarchicalSpans} />\n <div className=\"grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1\">\n {/ Header row: empty name cell, then the axis aligned with the bars (same horizontal padding, minus the duration label). /}\n <div />\n <div aria-label=\"Trace time axis\" className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1\">\n <div className=\"text-ui-xs text-neutral3 flex justify-between tabular-nums\">\n {TICKS.map(tick => (\n <span key={tick}>{formatTick(overallLatency tick)}</span>\n ))}\n </div>\n <div className=\"w-12\" />\n </div>\n <SpanRows\n spans={hierarchicalSpans}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n renderRow={ctx => <SpanTimelineRow ctx={ctx} />}\n />\n </div>\n </>\n );\n}\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EAEb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,CAAA;AAAA,sBACL,IAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAW,iBAAA,EAAkB,WAAU,qDAAA,EAC1C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4DAAA,EACZ,QAAA,EAAA,KAAA,CAAM,IAAI,CAAA,IAAA,qBACT,GAAA,CAAC,MAAA,EAAA,EAAiB,QAAA,EAAA,UAAA,CAAW,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO;AAAA,OAAA,EACxB,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA,EAAW,CAAA,GAAA,qBAAO,GAAA,CAAC,eAAA,EAAA,EAAgB,GAAA,EAAU;AAAA;AAAA;AAC/C,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-span-tree-skeleton.cjs.js ADDED Viewed

@@ -0,0 +1,40 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../skeleton-gdUQjWPU.cjs');
+const primitives_controlSize = require('../../../primitives/control-size.cjs.js');
+const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+const ROWS = [
+  [0, "55%"],
+  [1, "40%"],
+  [1, "60%"],
+  [2, "35%"],
+  [2, "50%"],
+  [1, "45%"],
+  [2, "30%"],
+  [1, "65%"]
+];
+function TraceSpanTreeSkeleton({ withSearch = true, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", "aria-label": "Loading spans", className: utils_cn.cn("flex flex-col", className), children: [
+    withSearch && /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: utils_cn.cn("w-full", primitives_controlSize.controlSizeClasses.sm) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-2 py-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-12" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-10" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-14" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-y-px py-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-8 items-center", style: { paddingLeft: `${depth}rem` }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-2 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3", style: { width } }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "ml-auto h-2.5 w-10 shrink-0" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 shrink-0" })
+    ] }, idx)) })
+  ] });
+}
+exports.TraceSpanTreeSkeleton = TraceSpanTreeSkeleton;
+//# sourceMappingURL=trace-span-tree-skeleton.cjs.js.map

package/dist/domains/traces/components/trace-span-tree-skeleton.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"trace-span-tree-skeleton.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n [0, '55%'],\n [1, '40%'],\n [1, '60%'],\n [2, '35%'],\n [2, '50%'],\n [1, '45%'],\n [2, '30%'],\n [1, '65%'],\n];\n\nexport interface TraceSpanTreeSkeletonProps {\n /** Mirrors `leadingSlot`: the search field rendered above the tree. */\n withSearch?: boolean;\n className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — search field, type legend, then one `min-h-8` row per span\n * indented by depth with the dot + name + duration of `TimelineNameCol` — so nothing jumps\n * when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ withSearch = true, className }: TraceSpanTreeSkeletonProps) {\n return (\n <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n {withSearch && <Skeleton className={cn('w-full', controlSizeClasses.sm)} />}\n <div className=\"flex items-center gap-3 px-2 py-1.5\">\n <Skeleton className=\"h-3 w-12\" />\n <Skeleton className=\"h-3 w-10\" />\n <Skeleton className=\"h-3 w-14\" />\n </div>\n <div className=\"grid gap-y-px py-1\">\n {ROWS.map(([depth, width], idx) => (\n <div key={idx} className=\"flex min-h-8 items-center\" style={{ paddingLeft: `${depth}rem` }}>\n <div className=\"flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1\">\n <Skeleton className=\"size-2 shrink-0 rounded-full\" />\n <Skeleton className=\"h-3\" style={{ width }} />\n <Skeleton className=\"ml-auto h-2.5 w-10 shrink-0\" />\n </div>\n <div className=\"w-8 shrink-0\" />\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"names":["jsxs","cn","Skeleton","controlSizeClasses","jsx"],"mappings":";;;;;;;;;AAKA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAaO,SAAS,qBAAA,CAAsB,EAAE,UAAA,GAAa,IAAA,EAAM,WAAU,EAA+B;AAClG,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAWC,WAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACnF,QAAA,EAAA;AAAA,IAAA,UAAA,mCAAeC,iBAAA,EAAA,EAAS,SAAA,EAAWD,YAAG,QAAA,EAAUE,yCAAA,CAAmB,EAAE,CAAA,EAAG,CAAA;AAAA,oBACzEH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EACb,QAAA,EAAA;AAAA,sBAAAI,cAAA,CAACF,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,sBAC/BE,cAAA,CAACF,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,sBAC/BE,cAAA,CAACF,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,KAAA,EACjC,CAAA;AAAA,oBACAE,cAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAG,wBACzBJ,eAAA,CAAC,KAAA,EAAA,EAAc,WAAU,2BAAA,EAA4B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EACvF,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oDAAA,EACb,QAAA,EAAA;AAAA,wBAAAI,cAAA,CAACF,iBAAA,EAAA,EAAS,WAAU,8BAAA,EAA+B,CAAA;AAAA,uCAClDA,iBAAA,EAAA,EAAS,SAAA,EAAU,OAAM,KAAA,EAAO,EAAE,OAAM,EAAG,CAAA;AAAA,wBAC5CE,cAAA,CAACF,iBAAA,EAAA,EAAS,SAAA,EAAU,6BAAA,EAA8B;AAAA,OAAA,EACpD,CAAA;AAAA,sBACAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EANtB,GAOV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-span-tree-skeleton.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from '../../../src/domains/traces/components/trace-span-tree-skeleton'
2	+ export {}

package/dist/domains/traces/components/trace-span-tree-skeleton.es.js ADDED Viewed

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { S as Skeleton } from '../../../skeleton-BpMg6F4M.js';
+import { controlSizeClasses } from '../../../primitives/control-size.es.js';
+import { c as cn } from '../../../cn-C6s2yXwM.js';
+const ROWS = [
+  [0, "55%"],
+  [1, "40%"],
+  [1, "60%"],
+  [2, "35%"],
+  [2, "50%"],
+  [1, "45%"],
+  [2, "30%"],
+  [1, "65%"]
+];
+function TraceSpanTreeSkeleton({ withSearch = true, className }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", "aria-label": "Loading spans", className: cn("flex flex-col", className), children: [
+    withSearch && /* @__PURE__ */ jsx(Skeleton, { className: cn("w-full", controlSizeClasses.sm) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-2 py-1.5", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-12" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-14" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-y-px py-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-8 items-center", style: { paddingLeft: `${depth}rem` }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "size-2 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3", style: { width } }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-2.5 w-10 shrink-0" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "w-8 shrink-0" })
+    ] }, idx)) })
+  ] });
+}
+export { TraceSpanTreeSkeleton };
+//# sourceMappingURL=trace-span-tree-skeleton.es.js.map

package/dist/domains/traces/components/trace-span-tree-skeleton.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"trace-span-tree-skeleton.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n [0, '55%'],\n [1, '40%'],\n [1, '60%'],\n [2, '35%'],\n [2, '50%'],\n [1, '45%'],\n [2, '30%'],\n [1, '65%'],\n];\n\nexport interface TraceSpanTreeSkeletonProps {\n /** Mirrors `leadingSlot`: the search field rendered above the tree. */\n withSearch?: boolean;\n className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — search field, type legend, then one `min-h-8` row per span\n * indented by depth with the dot + name + duration of `TimelineNameCol` — so nothing jumps\n * when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ withSearch = true, className }: TraceSpanTreeSkeletonProps) {\n return (\n <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n {withSearch && <Skeleton className={cn('w-full', controlSizeClasses.sm)} />}\n <div className=\"flex items-center gap-3 px-2 py-1.5\">\n <Skeleton className=\"h-3 w-12\" />\n <Skeleton className=\"h-3 w-10\" />\n <Skeleton className=\"h-3 w-14\" />\n </div>\n <div className=\"grid gap-y-px py-1\">\n {ROWS.map(([depth, width], idx) => (\n <div key={idx} className=\"flex min-h-8 items-center\" style={{ paddingLeft: `${depth}rem` }}>\n <div className=\"flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1\">\n <Skeleton className=\"size-2 shrink-0 rounded-full\" />\n <Skeleton className=\"h-3\" style={{ width }} />\n <Skeleton className=\"ml-auto h-2.5 w-10 shrink-0\" />\n </div>\n <div className=\"w-8 shrink-0\" />\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAaO,SAAS,qBAAA,CAAsB,EAAE,UAAA,GAAa,IAAA,EAAM,WAAU,EAA+B;AAClG,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACnF,QAAA,EAAA;AAAA,IAAA,UAAA,wBAAe,QAAA,EAAA,EAAS,SAAA,EAAW,GAAG,QAAA,EAAU,kBAAA,CAAmB,EAAE,CAAA,EAAG,CAAA;AAAA,oBACzE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,sBAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,sBAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,KAAA,EACjC,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAG,wBACzB,IAAA,CAAC,KAAA,EAAA,EAAc,WAAU,2BAAA,EAA4B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EACvF,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oDAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,8BAAA,EAA+B,CAAA;AAAA,4BAClD,QAAA,EAAA,EAAS,SAAA,EAAU,OAAM,KAAA,EAAO,EAAE,OAAM,EAAG,CAAA;AAAA,wBAC5C,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,6BAAA,EAA8B;AAAA,OAAA,EACpD,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EANtB,GAOV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}