@mastra/playground-ui 66.1.0-alpha.1 → 66.1.0-alpha.2
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.
- package/dist/domains/traces/components/span-data-panel-view.cjs.js +2 -22
- package/dist/domains/traces/components/span-data-panel-view.cjs.js.map +1 -1
- package/dist/domains/traces/components/span-data-panel-view.es.js +3 -23
- package/dist/domains/traces/components/span-data-panel-view.es.js.map +1 -1
- package/dist/domains/traces/components/span-timeline-row.cjs.js +93 -49
- package/dist/domains/traces/components/span-timeline-row.cjs.js.map +1 -1
- package/dist/domains/traces/components/span-timeline-row.es.js +94 -51
- package/dist/domains/traces/components/span-timeline-row.es.js.map +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-span-panel.cjs.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-span-panel.cjs.js.map +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-span-panel.es.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-span-panel.es.js.map +1 -1
- package/dist/domains/traces/components/timeline-name-col.cjs.js +2 -7
- package/dist/domains/traces/components/timeline-name-col.cjs.js.map +1 -1
- package/dist/domains/traces/components/timeline-name-col.es.js +1 -6
- package/dist/domains/traces/components/timeline-name-col.es.js.map +1 -1
- package/dist/domains/traces/components/trace-data-panel-view.cjs.js +49 -33
- package/dist/domains/traces/components/trace-data-panel-view.cjs.js.map +1 -1
- package/dist/domains/traces/components/trace-data-panel-view.es.js +50 -34
- package/dist/domains/traces/components/trace-data-panel-view.es.js.map +1 -1
- package/dist/domains/traces/components/trace-span-timeline.cjs.js +16 -18
- package/dist/domains/traces/components/trace-span-timeline.cjs.js.map +1 -1
- package/dist/domains/traces/components/trace-span-timeline.es.js +17 -19
- package/dist/domains/traces/components/trace-span-timeline.es.js.map +1 -1
- package/dist/domains/traces/utils/span-timeline.cjs.js +26 -0
- package/dist/domains/traces/utils/span-timeline.cjs.js.map +1 -0
- package/dist/domains/traces/utils/span-timeline.d.ts +1 -0
- package/dist/domains/traces/utils/span-timeline.es.js +23 -0
- package/dist/domains/traces/utils/span-timeline.es.js.map +1 -0
- package/dist/src/domains/traces/components/span-timeline-row.d.ts +5 -3
- package/dist/src/domains/traces/utils/span-timeline.d.ts +9 -0
- package/dist/style.css +22 -20
- package/package.json +7 -7
|
@@ -37,8 +37,6 @@ let lucide_react = require("lucide-react");
|
|
|
37
37
|
let _mastra_core_observability = require("@mastra/core/observability");
|
|
38
38
|
// src/domains/traces/components/span-data-panel-view.tsx
|
|
39
39
|
var BODY_CLASS = "min-h-0 flex-1 overflow-y-auto p-3";
|
|
40
|
-
/** Below this width the tab labels collapse to icons: the four labelled tabs need ~370px. */
|
|
41
|
-
var COMPACT_WIDTH = 380;
|
|
42
40
|
/**
|
|
43
41
|
* The same rows for every span type: what ran and how long it took, then the tabs. The body is flat:
|
|
44
42
|
* the tab says what it holds, so the payload isn't wrapped in a titled card again. The open tab and the
|
|
@@ -47,8 +45,6 @@ var COMPACT_WIDTH = 380;
|
|
|
47
45
|
function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNext, onClose, onShowTrace, activeTab, onTabChange, feedbackTabSlot, feedbackTabBadge, className }) {
|
|
48
46
|
const [ownTab, setOwnTab] = (0, react.useState)("details");
|
|
49
47
|
const [view, setView] = (0, react.useState)("rich");
|
|
50
|
-
const [panel, setPanel] = (0, react.useState)(null);
|
|
51
|
-
const compact = useIsNarrow(panel, COMPACT_WIDTH);
|
|
52
48
|
const requested = activeTab ?? ownTab;
|
|
53
49
|
const tab = requested === "feedback" && !feedbackTabSlot ? "details" : requested;
|
|
54
50
|
const changeTab = (next) => {
|
|
@@ -81,10 +77,9 @@ function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNex
|
|
|
81
77
|
];
|
|
82
78
|
const headingId = (0, react.useId)();
|
|
83
79
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
|
|
84
|
-
ref: setPanel,
|
|
85
80
|
"aria-labelledby": headingId,
|
|
86
81
|
"data-slot": "span-data-panel",
|
|
87
|
-
className: require_utils.cn("
|
|
82
|
+
className: require_utils.cn("flex min-h-0 flex-1 flex-col overflow-hidden", className),
|
|
88
83
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DataPanel.DataPanel.Header, {
|
|
89
84
|
className: "flex-nowrap",
|
|
90
85
|
children: [span ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpanIdentity, {
|
|
@@ -133,16 +128,12 @@ function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNex
|
|
|
133
128
|
children: tabs.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tabs_tab.Tab, {
|
|
134
129
|
value: item.value,
|
|
135
130
|
attention: item.attention,
|
|
136
|
-
tooltip: compact ? item.name : void 0,
|
|
137
131
|
children: [
|
|
138
132
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_Icon.Icon, {
|
|
139
133
|
size: "xs",
|
|
140
134
|
children: item.icon
|
|
141
135
|
}),
|
|
142
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
143
|
-
className: "@max-[380px]:sr-only",
|
|
144
|
-
children: item.name
|
|
145
|
-
}),
|
|
136
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.name }),
|
|
146
137
|
item.badge != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
147
138
|
" (",
|
|
148
139
|
item.badge,
|
|
@@ -181,17 +172,6 @@ function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNex
|
|
|
181
172
|
})] })]
|
|
182
173
|
});
|
|
183
174
|
}
|
|
184
|
-
/** Mirrors the `@max-[380px]` container query in JS: tooltips render in a portal, outside the container. */
|
|
185
|
-
function useIsNarrow(element, width) {
|
|
186
|
-
const [narrow, setNarrow] = (0, react.useState)(false);
|
|
187
|
-
(0, react.useEffect)(() => {
|
|
188
|
-
if (!element || !("ResizeObserver" in globalThis)) return;
|
|
189
|
-
const observer = new ResizeObserver(() => setNarrow(element.clientWidth <= width));
|
|
190
|
-
observer.observe(element);
|
|
191
|
-
return () => observer.disconnect();
|
|
192
|
-
}, [element, width]);
|
|
193
|
-
return narrow;
|
|
194
|
-
}
|
|
195
175
|
function getProcessorInput(span) {
|
|
196
176
|
if (require_domains_traces_utils_span_signal.getSpanSignal(span)) return void 0;
|
|
197
177
|
const input = (0, _mastra_core_observability.describeSpanInput)(require_domains_traces_components_span_payload_span_payload_registry.asCoreSpan(span));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"span-data-panel-view.cjs.js","names":["useState","InfoIcon","FileInputIcon","FileOutputIcon","MessageSquareReplyIcon","useId","cn","DataPanel","Button","ExternalLinkIcon","_Fragment","Tabs","TabList","Tab","Icon","getSpanSignal","describeSpanInput","asCoreSpan","getSpanDurationMs","SpanTypeBadge","getSpanTypeUi","Tooltip","TooltipTrigger","Txt","getModelFacts","TooltipContent","formatDuration","formatDurationPrecise","Badge","getSpanTools","hasSpanInputPreview","SpanPayloadProcessor","SpanInputRenderer","SpanToolList","getSpanOutputPayload","isTokenLimitExceeded","Notice","getTokenLimitMessage","hasSpanOutputPreview","SpanOutputRenderer","DataKeysAndValues","ProviderLogo","getTokenUsageRows","SpanTokenUsage","formatTimestampPrecise","getPromptChanges","runsAfterModel","SpanPromptChanges","getSpanOutcome","CircleXIcon","SpanErrorDetails","describeProcessorPipeline","SpanOutcomeSummary","useSpanToolCalls","SpanToolCallList","CopyButton","SpanPayloadJson","EyeIcon","BracesIcon"],"sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import { describeProcessorPipeline, describeSpanInput } from '@mastra/core/observability';\nimport type { UsageStats } from '@mastra/core/observability';\nimport {\n BracesIcon,\n CircleXIcon,\n ExternalLinkIcon,\n EyeIcon,\n FileInputIcon,\n FileOutputIcon,\n InfoIcon,\n MessageSquareReplyIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord, SpanTab } from '../types';\nimport { getSpanSignal } from '../utils/span-signal';\nimport { getSpanDurationMs, getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { getSpanTypeUi } from './shared';\nimport { SpanOutcomeSummary } from './span-outcome';\nimport { getSpanOutcome } from './span-outcome.utils';\nimport {\n SpanErrorDetails,\n SpanInputRenderer,\n SpanOutputRenderer,\n SpanPayloadJson,\n SpanPayloadProcessor,\n getSpanOutputPayload,\n hasSpanInputPreview,\n hasSpanOutputPreview,\n} from './span-payload';\nimport { asCoreSpan, getSpanTools } from './span-payload/span-payload-registry';\nimport { SpanToolCallList, SpanToolList } from './span-payload/span-tools-section';\nimport { useSpanToolCalls } from './span-payload/use-span-tool-calls';\nimport { SpanPromptChanges } from './span-prompt-changes';\nimport { getPromptChanges, runsAfterModel } from './span-prompt-impact';\nimport { SpanTokenUsage } from './span-token-usage';\nimport { getModelFacts, getTokenUsageRows } from './span-token-usage.utils';\nimport { SpanTypeBadge } from './span-type-badge';\nimport { ProviderLogo } from '@/domains/llm';\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDuration, formatDurationPrecise } from '@/utils/duration';\n\n// Mirrors `DataPanel.Content` without requiring the Drawer root (this view also renders standalone).\n// Sections bleed their hairlines through this padding, so the two must match.\nconst BODY_CLASS = 'min-h-0 flex-1 overflow-y-auto p-3';\n\n/** Below this width the tab labels collapse to icons: the four labelled tabs need ~370px. */\nconst COMPACT_WIDTH = 380;\n\ntype PayloadView = 'rich' | 'raw';\n\nexport interface SpanDataPanelViewProps {\n traceId: string;\n spanId: string;\n /** Full span record. Caller fetches via useSpanDetail. */\n span: SpanRecord | undefined;\n isLoading?: boolean;\n /** Previous/next buttons show only when one is provided; omit both where a span tree already navigates. */\n onPrevious?: () => void;\n onNext?: () => void;\n /** When provided, an × button in the header closes the span column. */\n onClose?: () => void;\n /**\n * When provided, a \"Go to trace\" button in the header calls it with the span's ids.\n * The caller decides where the trace opens (e.g. its own traces route).\n */\n onShowTrace?: (span: { traceId: string; spanId: string }) => void;\n /** Controls the open tab; the panel keeps its own when omitted. Defaults to Details. */\n activeTab?: SpanTab;\n onTabChange?: (tab: SpanTab) => void;\n /**\n * When provided, a \"Feedback\" tab appears; the slot receives the loaded span and renders\n * whatever feedback UI the consumer wants.\n */\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n /** Optional indicator rendered after the \"Feedback\" tab label (e.g. a needs-review dot). */\n feedbackTabBadge?: ReactNode;\n /** Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). */\n className?: string;\n}\n\n/**\n * The same rows for every span type: what ran and how long it took, then the tabs. The body is flat:\n * the tab says what it holds, so the payload isn't wrapped in a titled card again. The open tab and the\n * Preview/JSON choice are kept when another span is selected, so stepping through spans compares like for like.\n */\nexport function SpanDataPanelView({\n traceId,\n spanId,\n span,\n isLoading,\n onPrevious,\n onNext,\n onClose,\n onShowTrace,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n className,\n}: SpanDataPanelViewProps) {\n const [ownTab, setOwnTab] = useState<SpanTab>('details');\n const [view, setView] = useState<PayloadView>('rich');\n const [panel, setPanel] = useState<HTMLElement | null>(null);\n const compact = useIsNarrow(panel, COMPACT_WIDTH);\n\n const requested = activeTab ?? ownTab;\n // A feedback tab asked for by the URL means nothing where the consumer offers no feedback.\n const tab = requested === 'feedback' && !feedbackTabSlot ? 'details' : requested;\n const changeTab = (next: SpanTab) => {\n setOwnTab(next);\n onTabChange?.(next);\n };\n\n const tabs: Array<{ value: SpanTab; name: string; icon: ReactNode; attention?: boolean; badge?: ReactNode }> = [\n { value: 'details', name: 'Details', icon: <InfoIcon /> },\n { value: 'input', name: 'Input', icon: <FileInputIcon /> },\n { value: 'output', name: 'Output', icon: <FileOutputIcon />, attention: span?.error != null },\n ...(feedbackTabSlot\n ? [{ value: 'feedback' as const, name: 'Feedback', icon: <MessageSquareReplyIcon />, badge: feedbackTabBadge }]\n : []),\n ];\n\n const headingId = useId();\n\n // Not a DataPanel: this is the span column rendered inside `TraceDataPanelView`,\n // which already provides the panel chrome.\n return (\n <section\n ref={setPanel}\n aria-labelledby={headingId}\n data-slot=\"span-data-panel\"\n className={cn('@container flex min-h-0 flex-1 flex-col overflow-hidden', className)}\n >\n <DataPanel.Header className=\"flex-nowrap\">\n {span ? (\n <SpanIdentity span={span} headingId={headingId} />\n ) : (\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n <span id={headingId}>Span</span>\n </DataPanel.Heading>\n </DataPanel.HeaderContent>\n )}\n <DataPanel.HeaderActions>\n {onShowTrace && (\n <Button\n size=\"icon-sm\"\n variant=\"ghost\"\n aria-label=\"Go to trace\"\n tooltip=\"Go to trace\"\n className=\"shrink-0\"\n onClick={() => onShowTrace({ traceId, spanId })}\n >\n <ExternalLinkIcon />\n </Button>\n )}\n {(onPrevious || onNext) && (\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Go to previous span\"\n nextLabel=\"Go to next span\"\n />\n )}\n {onClose && <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close span\" tooltip=\"Close span\" />}\n </DataPanel.HeaderActions>\n </DataPanel.Header>\n\n {isLoading ? (\n <DataPanel.LoadingData>Loading span details...</DataPanel.LoadingData>\n ) : !span ? (\n <DataPanel.NoData>Span not found.</DataPanel.NoData>\n ) : (\n <>\n <Tabs<SpanTab> defaultTab=\"details\" value={tab} onValueChange={changeTab}>\n <DataPanel.Header className=\"flex-nowrap border-b border-surface-rim\">\n <div className=\"min-w-0 flex-1\">\n <TabList variant=\"pill-ghost\" size=\"sm\">\n {tabs.map(item => (\n <Tab\n key={item.value}\n value={item.value}\n attention={item.attention}\n tooltip={compact ? item.name : undefined}\n >\n <Icon size=\"xs\">{item.icon}</Icon>\n <span className=\"@max-[380px]:sr-only\">{item.name}</span>\n {item.badge != null && <> ({item.badge})</>}\n </Tab>\n ))}\n </TabList>\n </div>\n </DataPanel.Header>\n </Tabs>\n\n <div role=\"tabpanel\" aria-label={tabs.find(item => item.value === tab)?.name} className={BODY_CLASS}>\n {tab === 'details' && <DetailsTab traceId={traceId} span={span} />}\n {tab === 'input' && <InputTab span={span} view={view} onViewChange={setView} />}\n {tab === 'output' && <OutputTab span={span} view={view} onViewChange={setView} />}\n {tab === 'feedback' && feedbackTabSlot?.({ span, traceId, spanId })}\n </div>\n </>\n )}\n </section>\n );\n}\n\n/** Mirrors the `@max-[380px]` container query in JS: tooltips render in a portal, outside the container. */\nfunction useIsNarrow(element: HTMLElement | null, width: number) {\n const [narrow, setNarrow] = useState(false);\n useEffect(() => {\n if (!element || !('ResizeObserver' in globalThis)) return;\n const observer = new ResizeObserver(() => setNarrow(element.clientWidth <= width));\n observer.observe(element);\n return () => observer.disconnect();\n }, [element, width]);\n return narrow;\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Header\n * ---------------------------------------------------------------------------------------------- */\n\nfunction getProcessorInput(span: SpanRecord) {\n if (getSpanSignal(span)) return undefined;\n const input = describeSpanInput(asCoreSpan(span));\n return input?.type === 'processor' ? input.value : undefined;\n}\n\n/** How many times a processor re-ran this step. Zero, the normal case, is not worth showing. */\nfunction getRetryCount(span: SpanRecord) {\n const data: Record<string, unknown> = getProcessorInput(span)?.data ?? {};\n const retryCount = data.retryCount;\n return typeof retryCount === 'number' && retryCount > 0 ? retryCount : 0;\n}\n\n/**\n * What ran and how long it took, on one row. Only the unusual is called out: a failure, a span still\n * running, or a processor that had to retry. A normal success says nothing extra.\n */\nfunction SpanIdentity({ span, headingId }: { span: SpanRecord; headingId: string }) {\n const durationMs = getSpanDurationMs(span.startedAt, span.endedAt);\n const retries = getRetryCount(span);\n\n return (\n <div className=\"flex min-w-0 flex-1 items-center gap-2 pl-1\">\n {/* Same type mark as the span's row in the trace tree, processors included. */}\n <SpanTypeBadge type={span.spanType ?? ''} spanUI={getSpanTypeUi(span.spanType ?? '')} />\n <Tooltip>\n <TooltipTrigger\n render={\n <Txt id={headingId} as=\"h2\" variant=\"card-title-strong\" className=\"min-w-0 truncate\">\n {getModelFacts(span).model ?? span.entityName ?? span.name}\n </Txt>\n }\n />\n <TooltipContent>{span.name}</TooltipContent>\n </Tooltip>\n <Tooltip>\n <TooltipTrigger\n render={\n <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 cursor-help tabular-nums\" tabIndex={0}>\n {durationMs == null ? 'Running' : formatDuration(durationMs)}\n </Txt>\n }\n />\n <TooltipContent>\n {durationMs == null ? 'Still running' : `Duration ${formatDurationPrecise(durationMs)}`}\n </TooltipContent>\n </Tooltip>\n {span.error != null && (\n <Badge size=\"xs\" variant=\"destructive\" className=\"shrink-0\">\n Failed\n </Badge>\n )}\n {retries > 0 && (\n <Badge size=\"xs\" variant=\"warning\" className=\"shrink-0 tabular-nums\">\n {retries === 1 ? 'Retried once' : `Retried ${retries}×`}\n </Badge>\n )}\n </div>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Tab bodies\n * ---------------------------------------------------------------------------------------------- */\n\ntype PayloadTabProps = { span: SpanRecord; view: PayloadView; onViewChange: (view: PayloadView) => void };\n\n/**\n * Processor input keys the preview leaves out: tools have their own section, retries are a header badge,\n * and the step number repeats the `step › N` parent the span sits under in the tree.\n */\nconst PROCESSOR_INPUT_HIDDEN = ['tools', 'toolChoice', 'retryCount', 'stepNumber'];\n\nfunction InputTab({ span, view, onViewChange }: PayloadTabProps) {\n const tools = getSpanTools(span);\n const processorInput = getProcessorInput(span);\n return (\n <Stack>\n <Payload\n label=\"Input\"\n raw={span.input}\n hasPreview={hasSpanInputPreview(span, PROCESSOR_INPUT_HIDDEN)}\n view={view}\n onViewChange={onViewChange}\n empty=\"No input recorded.\"\n >\n {processorInput ? (\n <SpanPayloadProcessor value={processorInput} hidden={PROCESSOR_INPUT_HIDDEN} />\n ) : (\n <SpanInputRenderer span={span} />\n )}\n </Payload>\n {tools && (\n <Section title=\"Available tools\" count={tools.tools.length}>\n <SpanToolList tools={tools.tools} />\n </Section>\n )}\n </Stack>\n );\n}\n\nfunction OutputTab({ span, view, onViewChange }: PayloadTabProps) {\n const output = getSpanOutputPayload(span);\n return (\n <Stack>\n <SpanProblem span={span} />\n {isTokenLimitExceeded(span) && (\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n )}\n {(output != null || span.error == null) && (\n <Payload\n label=\"Output\"\n raw={output}\n hasPreview={hasSpanOutputPreview(span)}\n view={view}\n onViewChange={onViewChange}\n empty=\"No output recorded.\"\n >\n <SpanOutputRenderer span={span} />\n </Payload>\n )}\n <ToolCalls span={span} />\n </Stack>\n );\n}\n\n/** Everything looked up rather than read, grouped the same way for every span type. */\nfunction DetailsTab({ traceId, span }: { traceId: string; span: SpanRecord }) {\n const { model, provider, finishReason, firstToken, speed } = getModelFacts(span);\n // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- Built SDK declarations type attributes.usage as unknown.\n const usage = span.attributes?.usage as UsageStats | undefined;\n const hasModel = Boolean(model || finishReason || firstToken || speed);\n const durationMs = getSpanDurationMs(span.startedAt, span.endedAt);\n const ids: Array<[string, string | null | undefined]> = [\n ['Span', span.spanId],\n ['Trace', traceId],\n ['Parent span', span.parentSpanId],\n ['Run', span.runId],\n ['Session', span.sessionId],\n ['Thread', span.threadId],\n ['Request', span.requestId],\n ['User', span.userId],\n ['Organization', span.organizationId],\n ['Experiment', span.experimentId],\n ];\n\n return (\n <Stack>\n <PromptSection span={span} />\n\n {hasModel && (\n <Section title=\"Model\">\n <DataKeysAndValues>\n {model && (\n <Row label=\"Model\">\n <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n {provider && <ProviderLogo providerId={provider} size=\"xs\" />}\n <span className=\"truncate\">{model}</span>\n </span>\n </Row>\n )}\n {provider && <Row label=\"Provider\">{provider}</Row>}\n {finishReason && <Row label=\"Finish reason\">{finishReason}</Row>}\n {firstToken && <Row label=\"First token\">{firstToken}</Row>}\n {speed && <Row label=\"Speed\">{speed}</Row>}\n </DataKeysAndValues>\n </Section>\n )}\n\n {usage && getTokenUsageRows(usage) && (\n <Section title=\"Token usage\">\n <SpanTokenUsage usage={usage} />\n </Section>\n )}\n\n <Section title=\"Timing\">\n <DataKeysAndValues>\n <Row label=\"Started\">{formatTimestampPrecise(span.startedAt)}</Row>\n {span.endedAt && <Row label=\"Ended\">{formatTimestampPrecise(span.endedAt)}</Row>}\n {durationMs != null && <Row label=\"Duration\">{formatDurationPrecise(durationMs)}</Row>}\n </DataKeysAndValues>\n </Section>\n\n <Section title=\"Identifiers\">\n <DataKeysAndValues>\n {ids.map(([label, value]) => (value ? <IdRow key={label} label={label} value={value} /> : null))}\n {span.tags && span.tags.length > 0 && (\n <Row label=\"Tags\">\n <span className=\"flex flex-wrap gap-1\">\n {span.tags.map(tag => (\n <Badge key={tag} size=\"xs\" variant=\"neutral\" emphasis=\"subtle\">\n {tag}\n </Badge>\n ))}\n </span>\n </Row>\n )}\n </DataKeysAndValues>\n </Section>\n\n <JsonSection title=\"Metadata\" value={span.metadata} />\n <JsonSection title=\"Attributes\" value={span.attributes} />\n </Stack>\n );\n}\n\n/**\n * What this span changed in the request, from its own recorded changes, as diff cards. Changes made\n * after the model answered get a short note: they can't have shaped this request. Nothing is shown\n * when the span changed nothing.\n */\nfunction PromptSection({ span }: { span: SpanRecord }) {\n if (getPromptChanges(span).length === 0) return null;\n\n return (\n <Section title=\"Prompt\">\n {runsAfterModel(span) && (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\">\n Ran after the model answered: its changes are kept for later turns and could not shape this request.\n </Txt>\n )}\n <SpanPromptChanges span={span} />\n </Section>\n );\n}\n\n/** Why the span failed or stopped, above whatever output it still produced. */\nfunction SpanProblem({ span }: { span: SpanRecord }) {\n const outcome = getSpanOutcome(span);\n if (outcome?.tone !== 'error' && outcome?.tone !== 'warning') return null;\n if (span.error != null) {\n return (\n <Notice variant=\"destructive\" icon={<CircleXIcon />} title={<h3>{outcome.headline}</h3>}>\n <SpanErrorDetails span={span} />\n </Notice>\n );\n }\n // A tripwire leaves no error: its reason is the only account of why the run stopped.\n const tripwire = describeProcessorPipeline(asCoreSpan(span))?.tripwireAbort;\n if (!tripwire) return <SpanOutcomeSummary outcome={outcome} showDetail />;\n return (\n <Notice variant=\"destructive\" icon={<CircleXIcon />} title={<h3>{outcome.headline}</h3>}>\n {tripwire.reason && <p className=\"break-words whitespace-pre-wrap\">{tripwire.reason}</p>}\n {tripwire.retry !== undefined && (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\">\n {tripwire.retry ? 'The model was asked to retry.' : 'Not retried.'}\n </Txt>\n )}\n </Notice>\n );\n}\n\nfunction ToolCalls({ span }: { span: SpanRecord }) {\n const toolCalls = useSpanToolCalls(span);\n if (toolCalls.length === 0) return null;\n return (\n <Section title=\"Tool calls\" count={toolCalls.length}>\n <SpanToolCallList toolCalls={toolCalls} />\n </Section>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Building blocks\n * ---------------------------------------------------------------------------------------------- */\n\nfunction Stack({ children }: { children: ReactNode }) {\n return <div className=\"grid min-w-0 content-start gap-4\">{children}</div>;\n}\n\n/**\n * A hairline and a small heading between groups, instead of a titled card around each one.\n * The hairline runs edge to edge: it bleeds through the body padding.\n */\nfunction Section({\n title,\n label = title,\n count,\n children,\n}: {\n title?: string;\n /** Names the region for assistive tech when the heading is rendered by the children. */\n label?: string;\n count?: number;\n children: ReactNode;\n}) {\n return (\n <section\n aria-label={label}\n className=\"-mx-3 grid min-w-0 gap-3 border-t border-surface-rim px-3 pt-4 first:border-t-0 first:pt-0\"\n >\n {title && (\n <DataPanel.SectionHeading>\n {title}\n {count != null && <span className=\"tabular-nums\"> · {count}</span>}\n </DataPanel.SectionHeading>\n )}\n {children}\n </section>\n );\n}\n\n/**\n * Stored JSON that is rarely why someone opened the span. The heading always shows; the block opens\n * folded on its root, and unfolding it shows the top-level keys with their values still folded, so it\n * collapses through the code block's own fold markers instead of a second disclosure around it.\n */\nfunction JsonSection({ title, value }: { title: string; value: unknown }) {\n if (value == null || (typeof value === 'object' && Object.keys(value).length === 0)) return null;\n return (\n <Section label={title}>\n <div className=\"flex min-w-0 items-center justify-between gap-2\">\n <DataPanel.SectionHeading>{title}</DataPanel.SectionHeading>\n <CopyButton\n content={JSON.stringify(value, null, 2)}\n copyMessage={`${title} copied`}\n tooltip={`Copy ${title.toLowerCase()} as JSON`}\n variant=\"ghost\"\n />\n </div>\n <SpanPayloadJson value={value} foldRoot foldNested />\n </Section>\n );\n}\n\n/**\n * The payload, unframed. Its Preview/JSON switch and copy sit on a small toolbar inside the tab,\n * right above what they act on, so the tab bar stays the same for every tab.\n */\nfunction Payload({\n label,\n raw,\n hasPreview,\n view,\n onViewChange,\n empty,\n children,\n}: {\n label: string;\n raw: unknown;\n hasPreview: boolean;\n view: PayloadView;\n onViewChange: (view: PayloadView) => void;\n empty: string;\n children: ReactNode;\n}) {\n if (raw == null) {\n return (\n <Txt variant=\"body-sm\" tone=\"muted\">\n {empty}\n </Txt>\n );\n }\n const shown = hasPreview ? view : 'raw';\n return (\n <div role=\"group\" aria-label={label} data-view={shown} className=\"grid min-w-0 gap-3\">\n <div className=\"flex items-center justify-end gap-1\">\n {hasPreview && (\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-pressed={view === 'raw'}\n tooltip={view === 'raw' ? `Show ${label.toLowerCase()} preview` : `Show ${label.toLowerCase()} as JSON`}\n onClick={() => onViewChange(view === 'raw' ? 'rich' : 'raw')}\n >\n {view === 'raw' ? <EyeIcon /> : <BracesIcon />}\n </Button>\n )}\n <CopyButton\n content={JSON.stringify(raw, null, 2)}\n copyMessage={`${label} copied`}\n tooltip={`Copy ${label.toLowerCase()} as JSON`}\n variant=\"ghost\"\n />\n </div>\n <div className=\"min-w-0 [&_[data-slot=message]]:my-0\">\n {shown === 'rich' ? children : <SpanPayloadJson value={raw} foldNested />}\n </div>\n </div>\n );\n}\n\nfunction Row({ label, children }: { label: string; children: ReactNode }) {\n return (\n <>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{children}</DataKeysAndValues.Value>\n </>\n );\n}\n\nfunction IdRow({ label, value }: { label: string; value: string }) {\n return (\n <>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip={`Copy ${label} id`} copyValue={value}>\n {value}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"span-data-panel-view.cjs.js","names":["useState","InfoIcon","FileInputIcon","FileOutputIcon","MessageSquareReplyIcon","useId","cn","DataPanel","Button","ExternalLinkIcon","_Fragment","Tabs","TabList","Tab","Icon","getSpanSignal","describeSpanInput","asCoreSpan","getSpanDurationMs","SpanTypeBadge","getSpanTypeUi","Tooltip","TooltipTrigger","Txt","getModelFacts","TooltipContent","formatDuration","formatDurationPrecise","Badge","getSpanTools","hasSpanInputPreview","SpanPayloadProcessor","SpanInputRenderer","SpanToolList","getSpanOutputPayload","isTokenLimitExceeded","Notice","getTokenLimitMessage","hasSpanOutputPreview","SpanOutputRenderer","DataKeysAndValues","ProviderLogo","getTokenUsageRows","SpanTokenUsage","formatTimestampPrecise","getPromptChanges","runsAfterModel","SpanPromptChanges","getSpanOutcome","CircleXIcon","SpanErrorDetails","describeProcessorPipeline","SpanOutcomeSummary","useSpanToolCalls","SpanToolCallList","CopyButton","SpanPayloadJson","EyeIcon","BracesIcon"],"sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import { describeProcessorPipeline, describeSpanInput } from '@mastra/core/observability';\nimport type { UsageStats } from '@mastra/core/observability';\nimport {\n BracesIcon,\n CircleXIcon,\n ExternalLinkIcon,\n EyeIcon,\n FileInputIcon,\n FileOutputIcon,\n InfoIcon,\n MessageSquareReplyIcon,\n} from 'lucide-react';\nimport { useId, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord, SpanTab } from '../types';\nimport { getSpanSignal } from '../utils/span-signal';\nimport { getSpanDurationMs, getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { getSpanTypeUi } from './shared';\nimport { SpanOutcomeSummary } from './span-outcome';\nimport { getSpanOutcome } from './span-outcome.utils';\nimport {\n SpanErrorDetails,\n SpanInputRenderer,\n SpanOutputRenderer,\n SpanPayloadJson,\n SpanPayloadProcessor,\n getSpanOutputPayload,\n hasSpanInputPreview,\n hasSpanOutputPreview,\n} from './span-payload';\nimport { asCoreSpan, getSpanTools } from './span-payload/span-payload-registry';\nimport { SpanToolCallList, SpanToolList } from './span-payload/span-tools-section';\nimport { useSpanToolCalls } from './span-payload/use-span-tool-calls';\nimport { SpanPromptChanges } from './span-prompt-changes';\nimport { getPromptChanges, runsAfterModel } from './span-prompt-impact';\nimport { SpanTokenUsage } from './span-token-usage';\nimport { getModelFacts, getTokenUsageRows } from './span-token-usage.utils';\nimport { SpanTypeBadge } from './span-type-badge';\nimport { ProviderLogo } from '@/domains/llm';\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDuration, formatDurationPrecise } from '@/utils/duration';\n\n// Mirrors `DataPanel.Content` without requiring the Drawer root (this view also renders standalone).\n// Sections bleed their hairlines through this padding, so the two must match.\nconst BODY_CLASS = 'min-h-0 flex-1 overflow-y-auto p-3';\n\ntype PayloadView = 'rich' | 'raw';\n\nexport interface SpanDataPanelViewProps {\n traceId: string;\n spanId: string;\n /** Full span record. Caller fetches via useSpanDetail. */\n span: SpanRecord | undefined;\n isLoading?: boolean;\n /** Previous/next buttons show only when one is provided; omit both where a span tree already navigates. */\n onPrevious?: () => void;\n onNext?: () => void;\n /** When provided, an × button in the header closes the span column. */\n onClose?: () => void;\n /**\n * When provided, a \"Go to trace\" button in the header calls it with the span's ids.\n * The caller decides where the trace opens (e.g. its own traces route).\n */\n onShowTrace?: (span: { traceId: string; spanId: string }) => void;\n /** Controls the open tab; the panel keeps its own when omitted. Defaults to Details. */\n activeTab?: SpanTab;\n onTabChange?: (tab: SpanTab) => void;\n /**\n * When provided, a \"Feedback\" tab appears; the slot receives the loaded span and renders\n * whatever feedback UI the consumer wants.\n */\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n /** Optional indicator rendered after the \"Feedback\" tab label (e.g. a needs-review dot). */\n feedbackTabBadge?: ReactNode;\n /** Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). */\n className?: string;\n}\n\n/**\n * The same rows for every span type: what ran and how long it took, then the tabs. The body is flat:\n * the tab says what it holds, so the payload isn't wrapped in a titled card again. The open tab and the\n * Preview/JSON choice are kept when another span is selected, so stepping through spans compares like for like.\n */\nexport function SpanDataPanelView({\n traceId,\n spanId,\n span,\n isLoading,\n onPrevious,\n onNext,\n onClose,\n onShowTrace,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n className,\n}: SpanDataPanelViewProps) {\n const [ownTab, setOwnTab] = useState<SpanTab>('details');\n const [view, setView] = useState<PayloadView>('rich');\n\n const requested = activeTab ?? ownTab;\n // A feedback tab asked for by the URL means nothing where the consumer offers no feedback.\n const tab = requested === 'feedback' && !feedbackTabSlot ? 'details' : requested;\n const changeTab = (next: SpanTab) => {\n setOwnTab(next);\n onTabChange?.(next);\n };\n\n const tabs: Array<{ value: SpanTab; name: string; icon: ReactNode; attention?: boolean; badge?: ReactNode }> = [\n { value: 'details', name: 'Details', icon: <InfoIcon /> },\n { value: 'input', name: 'Input', icon: <FileInputIcon /> },\n { value: 'output', name: 'Output', icon: <FileOutputIcon />, attention: span?.error != null },\n ...(feedbackTabSlot\n ? [{ value: 'feedback' as const, name: 'Feedback', icon: <MessageSquareReplyIcon />, badge: feedbackTabBadge }]\n : []),\n ];\n\n const headingId = useId();\n\n // Not a DataPanel: this is the span column rendered inside `TraceDataPanelView`,\n // which already provides the panel chrome.\n return (\n <section\n aria-labelledby={headingId}\n data-slot=\"span-data-panel\"\n className={cn('flex min-h-0 flex-1 flex-col overflow-hidden', className)}\n >\n <DataPanel.Header className=\"flex-nowrap\">\n {span ? (\n <SpanIdentity span={span} headingId={headingId} />\n ) : (\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n <span id={headingId}>Span</span>\n </DataPanel.Heading>\n </DataPanel.HeaderContent>\n )}\n <DataPanel.HeaderActions>\n {onShowTrace && (\n <Button\n size=\"icon-sm\"\n variant=\"ghost\"\n aria-label=\"Go to trace\"\n tooltip=\"Go to trace\"\n className=\"shrink-0\"\n onClick={() => onShowTrace({ traceId, spanId })}\n >\n <ExternalLinkIcon />\n </Button>\n )}\n {(onPrevious || onNext) && (\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Go to previous span\"\n nextLabel=\"Go to next span\"\n />\n )}\n {onClose && <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close span\" tooltip=\"Close span\" />}\n </DataPanel.HeaderActions>\n </DataPanel.Header>\n\n {isLoading ? (\n <DataPanel.LoadingData>Loading span details...</DataPanel.LoadingData>\n ) : !span ? (\n <DataPanel.NoData>Span not found.</DataPanel.NoData>\n ) : (\n <>\n <Tabs<SpanTab> defaultTab=\"details\" value={tab} onValueChange={changeTab}>\n <DataPanel.Header className=\"flex-nowrap border-b border-surface-rim\">\n <div className=\"min-w-0 flex-1\">\n <TabList variant=\"pill-ghost\" size=\"sm\">\n {tabs.map(item => (\n <Tab key={item.value} value={item.value} attention={item.attention}>\n <Icon size=\"xs\">{item.icon}</Icon>\n <span>{item.name}</span>\n {item.badge != null && <> ({item.badge})</>}\n </Tab>\n ))}\n </TabList>\n </div>\n </DataPanel.Header>\n </Tabs>\n\n <div role=\"tabpanel\" aria-label={tabs.find(item => item.value === tab)?.name} className={BODY_CLASS}>\n {tab === 'details' && <DetailsTab traceId={traceId} span={span} />}\n {tab === 'input' && <InputTab span={span} view={view} onViewChange={setView} />}\n {tab === 'output' && <OutputTab span={span} view={view} onViewChange={setView} />}\n {tab === 'feedback' && feedbackTabSlot?.({ span, traceId, spanId })}\n </div>\n </>\n )}\n </section>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Header\n * ---------------------------------------------------------------------------------------------- */\n\nfunction getProcessorInput(span: SpanRecord) {\n if (getSpanSignal(span)) return undefined;\n const input = describeSpanInput(asCoreSpan(span));\n return input?.type === 'processor' ? input.value : undefined;\n}\n\n/** How many times a processor re-ran this step. Zero, the normal case, is not worth showing. */\nfunction getRetryCount(span: SpanRecord) {\n const data: Record<string, unknown> = getProcessorInput(span)?.data ?? {};\n const retryCount = data.retryCount;\n return typeof retryCount === 'number' && retryCount > 0 ? retryCount : 0;\n}\n\n/**\n * What ran and how long it took, on one row. Only the unusual is called out: a failure, a span still\n * running, or a processor that had to retry. A normal success says nothing extra.\n */\nfunction SpanIdentity({ span, headingId }: { span: SpanRecord; headingId: string }) {\n const durationMs = getSpanDurationMs(span.startedAt, span.endedAt);\n const retries = getRetryCount(span);\n\n return (\n <div className=\"flex min-w-0 flex-1 items-center gap-2 pl-1\">\n {/* Same type mark as the span's row in the trace tree, processors included. */}\n <SpanTypeBadge type={span.spanType ?? ''} spanUI={getSpanTypeUi(span.spanType ?? '')} />\n <Tooltip>\n <TooltipTrigger\n render={\n <Txt id={headingId} as=\"h2\" variant=\"card-title-strong\" className=\"min-w-0 truncate\">\n {getModelFacts(span).model ?? span.entityName ?? span.name}\n </Txt>\n }\n />\n <TooltipContent>{span.name}</TooltipContent>\n </Tooltip>\n <Tooltip>\n <TooltipTrigger\n render={\n <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 cursor-help tabular-nums\" tabIndex={0}>\n {durationMs == null ? 'Running' : formatDuration(durationMs)}\n </Txt>\n }\n />\n <TooltipContent>\n {durationMs == null ? 'Still running' : `Duration ${formatDurationPrecise(durationMs)}`}\n </TooltipContent>\n </Tooltip>\n {span.error != null && (\n <Badge size=\"xs\" variant=\"destructive\" className=\"shrink-0\">\n Failed\n </Badge>\n )}\n {retries > 0 && (\n <Badge size=\"xs\" variant=\"warning\" className=\"shrink-0 tabular-nums\">\n {retries === 1 ? 'Retried once' : `Retried ${retries}×`}\n </Badge>\n )}\n </div>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Tab bodies\n * ---------------------------------------------------------------------------------------------- */\n\ntype PayloadTabProps = { span: SpanRecord; view: PayloadView; onViewChange: (view: PayloadView) => void };\n\n/**\n * Processor input keys the preview leaves out: tools have their own section, retries are a header badge,\n * and the step number repeats the `step › N` parent the span sits under in the tree.\n */\nconst PROCESSOR_INPUT_HIDDEN = ['tools', 'toolChoice', 'retryCount', 'stepNumber'];\n\nfunction InputTab({ span, view, onViewChange }: PayloadTabProps) {\n const tools = getSpanTools(span);\n const processorInput = getProcessorInput(span);\n return (\n <Stack>\n <Payload\n label=\"Input\"\n raw={span.input}\n hasPreview={hasSpanInputPreview(span, PROCESSOR_INPUT_HIDDEN)}\n view={view}\n onViewChange={onViewChange}\n empty=\"No input recorded.\"\n >\n {processorInput ? (\n <SpanPayloadProcessor value={processorInput} hidden={PROCESSOR_INPUT_HIDDEN} />\n ) : (\n <SpanInputRenderer span={span} />\n )}\n </Payload>\n {tools && (\n <Section title=\"Available tools\" count={tools.tools.length}>\n <SpanToolList tools={tools.tools} />\n </Section>\n )}\n </Stack>\n );\n}\n\nfunction OutputTab({ span, view, onViewChange }: PayloadTabProps) {\n const output = getSpanOutputPayload(span);\n return (\n <Stack>\n <SpanProblem span={span} />\n {isTokenLimitExceeded(span) && (\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n )}\n {(output != null || span.error == null) && (\n <Payload\n label=\"Output\"\n raw={output}\n hasPreview={hasSpanOutputPreview(span)}\n view={view}\n onViewChange={onViewChange}\n empty=\"No output recorded.\"\n >\n <SpanOutputRenderer span={span} />\n </Payload>\n )}\n <ToolCalls span={span} />\n </Stack>\n );\n}\n\n/** Everything looked up rather than read, grouped the same way for every span type. */\nfunction DetailsTab({ traceId, span }: { traceId: string; span: SpanRecord }) {\n const { model, provider, finishReason, firstToken, speed } = getModelFacts(span);\n // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- Built SDK declarations type attributes.usage as unknown.\n const usage = span.attributes?.usage as UsageStats | undefined;\n const hasModel = Boolean(model || finishReason || firstToken || speed);\n const durationMs = getSpanDurationMs(span.startedAt, span.endedAt);\n const ids: Array<[string, string | null | undefined]> = [\n ['Span', span.spanId],\n ['Trace', traceId],\n ['Parent span', span.parentSpanId],\n ['Run', span.runId],\n ['Session', span.sessionId],\n ['Thread', span.threadId],\n ['Request', span.requestId],\n ['User', span.userId],\n ['Organization', span.organizationId],\n ['Experiment', span.experimentId],\n ];\n\n return (\n <Stack>\n <PromptSection span={span} />\n\n {hasModel && (\n <Section title=\"Model\">\n <DataKeysAndValues>\n {model && (\n <Row label=\"Model\">\n <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n {provider && <ProviderLogo providerId={provider} size=\"xs\" />}\n <span className=\"truncate\">{model}</span>\n </span>\n </Row>\n )}\n {provider && <Row label=\"Provider\">{provider}</Row>}\n {finishReason && <Row label=\"Finish reason\">{finishReason}</Row>}\n {firstToken && <Row label=\"First token\">{firstToken}</Row>}\n {speed && <Row label=\"Speed\">{speed}</Row>}\n </DataKeysAndValues>\n </Section>\n )}\n\n {usage && getTokenUsageRows(usage) && (\n <Section title=\"Token usage\">\n <SpanTokenUsage usage={usage} />\n </Section>\n )}\n\n <Section title=\"Timing\">\n <DataKeysAndValues>\n <Row label=\"Started\">{formatTimestampPrecise(span.startedAt)}</Row>\n {span.endedAt && <Row label=\"Ended\">{formatTimestampPrecise(span.endedAt)}</Row>}\n {durationMs != null && <Row label=\"Duration\">{formatDurationPrecise(durationMs)}</Row>}\n </DataKeysAndValues>\n </Section>\n\n <Section title=\"Identifiers\">\n <DataKeysAndValues>\n {ids.map(([label, value]) => (value ? <IdRow key={label} label={label} value={value} /> : null))}\n {span.tags && span.tags.length > 0 && (\n <Row label=\"Tags\">\n <span className=\"flex flex-wrap gap-1\">\n {span.tags.map(tag => (\n <Badge key={tag} size=\"xs\" variant=\"neutral\" emphasis=\"subtle\">\n {tag}\n </Badge>\n ))}\n </span>\n </Row>\n )}\n </DataKeysAndValues>\n </Section>\n\n <JsonSection title=\"Metadata\" value={span.metadata} />\n <JsonSection title=\"Attributes\" value={span.attributes} />\n </Stack>\n );\n}\n\n/**\n * What this span changed in the request, from its own recorded changes, as diff cards. Changes made\n * after the model answered get a short note: they can't have shaped this request. Nothing is shown\n * when the span changed nothing.\n */\nfunction PromptSection({ span }: { span: SpanRecord }) {\n if (getPromptChanges(span).length === 0) return null;\n\n return (\n <Section title=\"Prompt\">\n {runsAfterModel(span) && (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\">\n Ran after the model answered: its changes are kept for later turns and could not shape this request.\n </Txt>\n )}\n <SpanPromptChanges span={span} />\n </Section>\n );\n}\n\n/** Why the span failed or stopped, above whatever output it still produced. */\nfunction SpanProblem({ span }: { span: SpanRecord }) {\n const outcome = getSpanOutcome(span);\n if (outcome?.tone !== 'error' && outcome?.tone !== 'warning') return null;\n if (span.error != null) {\n return (\n <Notice variant=\"destructive\" icon={<CircleXIcon />} title={<h3>{outcome.headline}</h3>}>\n <SpanErrorDetails span={span} />\n </Notice>\n );\n }\n // A tripwire leaves no error: its reason is the only account of why the run stopped.\n const tripwire = describeProcessorPipeline(asCoreSpan(span))?.tripwireAbort;\n if (!tripwire) return <SpanOutcomeSummary outcome={outcome} showDetail />;\n return (\n <Notice variant=\"destructive\" icon={<CircleXIcon />} title={<h3>{outcome.headline}</h3>}>\n {tripwire.reason && <p className=\"break-words whitespace-pre-wrap\">{tripwire.reason}</p>}\n {tripwire.retry !== undefined && (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\">\n {tripwire.retry ? 'The model was asked to retry.' : 'Not retried.'}\n </Txt>\n )}\n </Notice>\n );\n}\n\nfunction ToolCalls({ span }: { span: SpanRecord }) {\n const toolCalls = useSpanToolCalls(span);\n if (toolCalls.length === 0) return null;\n return (\n <Section title=\"Tool calls\" count={toolCalls.length}>\n <SpanToolCallList toolCalls={toolCalls} />\n </Section>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Building blocks\n * ---------------------------------------------------------------------------------------------- */\n\nfunction Stack({ children }: { children: ReactNode }) {\n return <div className=\"grid min-w-0 content-start gap-4\">{children}</div>;\n}\n\n/**\n * A hairline and a small heading between groups, instead of a titled card around each one.\n * The hairline runs edge to edge: it bleeds through the body padding.\n */\nfunction Section({\n title,\n label = title,\n count,\n children,\n}: {\n title?: string;\n /** Names the region for assistive tech when the heading is rendered by the children. */\n label?: string;\n count?: number;\n children: ReactNode;\n}) {\n return (\n <section\n aria-label={label}\n className=\"-mx-3 grid min-w-0 gap-3 border-t border-surface-rim px-3 pt-4 first:border-t-0 first:pt-0\"\n >\n {title && (\n <DataPanel.SectionHeading>\n {title}\n {count != null && <span className=\"tabular-nums\"> · {count}</span>}\n </DataPanel.SectionHeading>\n )}\n {children}\n </section>\n );\n}\n\n/**\n * Stored JSON that is rarely why someone opened the span. The heading always shows; the block opens\n * folded on its root, and unfolding it shows the top-level keys with their values still folded, so it\n * collapses through the code block's own fold markers instead of a second disclosure around it.\n */\nfunction JsonSection({ title, value }: { title: string; value: unknown }) {\n if (value == null || (typeof value === 'object' && Object.keys(value).length === 0)) return null;\n return (\n <Section label={title}>\n <div className=\"flex min-w-0 items-center justify-between gap-2\">\n <DataPanel.SectionHeading>{title}</DataPanel.SectionHeading>\n <CopyButton\n content={JSON.stringify(value, null, 2)}\n copyMessage={`${title} copied`}\n tooltip={`Copy ${title.toLowerCase()} as JSON`}\n variant=\"ghost\"\n />\n </div>\n <SpanPayloadJson value={value} foldRoot foldNested />\n </Section>\n );\n}\n\n/**\n * The payload, unframed. Its Preview/JSON switch and copy sit on a small toolbar inside the tab,\n * right above what they act on, so the tab bar stays the same for every tab.\n */\nfunction Payload({\n label,\n raw,\n hasPreview,\n view,\n onViewChange,\n empty,\n children,\n}: {\n label: string;\n raw: unknown;\n hasPreview: boolean;\n view: PayloadView;\n onViewChange: (view: PayloadView) => void;\n empty: string;\n children: ReactNode;\n}) {\n if (raw == null) {\n return (\n <Txt variant=\"body-sm\" tone=\"muted\">\n {empty}\n </Txt>\n );\n }\n const shown = hasPreview ? view : 'raw';\n return (\n <div role=\"group\" aria-label={label} data-view={shown} className=\"grid min-w-0 gap-3\">\n <div className=\"flex items-center justify-end gap-1\">\n {hasPreview && (\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-pressed={view === 'raw'}\n tooltip={view === 'raw' ? `Show ${label.toLowerCase()} preview` : `Show ${label.toLowerCase()} as JSON`}\n onClick={() => onViewChange(view === 'raw' ? 'rich' : 'raw')}\n >\n {view === 'raw' ? <EyeIcon /> : <BracesIcon />}\n </Button>\n )}\n <CopyButton\n content={JSON.stringify(raw, null, 2)}\n copyMessage={`${label} copied`}\n tooltip={`Copy ${label.toLowerCase()} as JSON`}\n variant=\"ghost\"\n />\n </div>\n <div className=\"min-w-0 [&_[data-slot=message]]:my-0\">\n {shown === 'rich' ? children : <SpanPayloadJson value={raw} foldNested />}\n </div>\n </div>\n );\n}\n\nfunction Row({ label, children }: { label: string; children: ReactNode }) {\n return (\n <>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{children}</DataKeysAndValues.Value>\n </>\n );\n}\n\nfunction IdRow({ label, value }: { label: string; value: string }) {\n return (\n <>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip={`Copy ${label} id`} copyValue={value}>\n {value}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n );\n}\n"],"mappings":"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"}
|
|
@@ -30,14 +30,12 @@ import { SpanPromptChanges } from "./span-prompt-changes.es.js";
|
|
|
30
30
|
import { getModelFacts, getTokenUsageRows } from "./span-token-usage.utils.es.js";
|
|
31
31
|
import { SpanTokenUsage } from "./span-token-usage.es.js";
|
|
32
32
|
import { SpanTypeBadge } from "./span-type-badge.es.js";
|
|
33
|
-
import {
|
|
33
|
+
import { useId, useState } from "react";
|
|
34
34
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
35
35
|
import { BracesIcon, CircleXIcon, ExternalLinkIcon, EyeIcon, FileInputIcon, FileOutputIcon, InfoIcon, MessageSquareReplyIcon } from "lucide-react";
|
|
36
36
|
import { describeProcessorPipeline, describeSpanInput } from "@mastra/core/observability";
|
|
37
37
|
// src/domains/traces/components/span-data-panel-view.tsx
|
|
38
38
|
var BODY_CLASS = "min-h-0 flex-1 overflow-y-auto p-3";
|
|
39
|
-
/** Below this width the tab labels collapse to icons: the four labelled tabs need ~370px. */
|
|
40
|
-
var COMPACT_WIDTH = 380;
|
|
41
39
|
/**
|
|
42
40
|
* The same rows for every span type: what ran and how long it took, then the tabs. The body is flat:
|
|
43
41
|
* the tab says what it holds, so the payload isn't wrapped in a titled card again. The open tab and the
|
|
@@ -46,8 +44,6 @@ var COMPACT_WIDTH = 380;
|
|
|
46
44
|
function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNext, onClose, onShowTrace, activeTab, onTabChange, feedbackTabSlot, feedbackTabBadge, className }) {
|
|
47
45
|
const [ownTab, setOwnTab] = useState("details");
|
|
48
46
|
const [view, setView] = useState("rich");
|
|
49
|
-
const [panel, setPanel] = useState(null);
|
|
50
|
-
const compact = useIsNarrow(panel, COMPACT_WIDTH);
|
|
51
47
|
const requested = activeTab ?? ownTab;
|
|
52
48
|
const tab = requested === "feedback" && !feedbackTabSlot ? "details" : requested;
|
|
53
49
|
const changeTab = (next) => {
|
|
@@ -80,10 +76,9 @@ function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNex
|
|
|
80
76
|
];
|
|
81
77
|
const headingId = useId();
|
|
82
78
|
return /* @__PURE__ */ jsxs("section", {
|
|
83
|
-
ref: setPanel,
|
|
84
79
|
"aria-labelledby": headingId,
|
|
85
80
|
"data-slot": "span-data-panel",
|
|
86
|
-
className: cn("
|
|
81
|
+
className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", className),
|
|
87
82
|
children: [/* @__PURE__ */ jsxs(DataPanel.Header, {
|
|
88
83
|
className: "flex-nowrap",
|
|
89
84
|
children: [span ? /* @__PURE__ */ jsx(SpanIdentity, {
|
|
@@ -132,16 +127,12 @@ function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNex
|
|
|
132
127
|
children: tabs.map((item) => /* @__PURE__ */ jsxs(Tab, {
|
|
133
128
|
value: item.value,
|
|
134
129
|
attention: item.attention,
|
|
135
|
-
tooltip: compact ? item.name : void 0,
|
|
136
130
|
children: [
|
|
137
131
|
/* @__PURE__ */ jsx(Icon, {
|
|
138
132
|
size: "xs",
|
|
139
133
|
children: item.icon
|
|
140
134
|
}),
|
|
141
|
-
/* @__PURE__ */ jsx("span", {
|
|
142
|
-
className: "@max-[380px]:sr-only",
|
|
143
|
-
children: item.name
|
|
144
|
-
}),
|
|
135
|
+
/* @__PURE__ */ jsx("span", { children: item.name }),
|
|
145
136
|
item.badge != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
146
137
|
" (",
|
|
147
138
|
item.badge,
|
|
@@ -180,17 +171,6 @@ function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNex
|
|
|
180
171
|
})] })]
|
|
181
172
|
});
|
|
182
173
|
}
|
|
183
|
-
/** Mirrors the `@max-[380px]` container query in JS: tooltips render in a portal, outside the container. */
|
|
184
|
-
function useIsNarrow(element, width) {
|
|
185
|
-
const [narrow, setNarrow] = useState(false);
|
|
186
|
-
useEffect(() => {
|
|
187
|
-
if (!element || !("ResizeObserver" in globalThis)) return;
|
|
188
|
-
const observer = new ResizeObserver(() => setNarrow(element.clientWidth <= width));
|
|
189
|
-
observer.observe(element);
|
|
190
|
-
return () => observer.disconnect();
|
|
191
|
-
}, [element, width]);
|
|
192
|
-
return narrow;
|
|
193
|
-
}
|
|
194
174
|
function getProcessorInput(span) {
|
|
195
175
|
if (getSpanSignal(span)) return void 0;
|
|
196
176
|
const input = describeSpanInput(asCoreSpan(span));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"span-data-panel-view.es.js","names":["_Fragment"],"sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import { describeProcessorPipeline, describeSpanInput } from '@mastra/core/observability';\nimport type { UsageStats } from '@mastra/core/observability';\nimport {\n BracesIcon,\n CircleXIcon,\n ExternalLinkIcon,\n EyeIcon,\n FileInputIcon,\n FileOutputIcon,\n InfoIcon,\n MessageSquareReplyIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord, SpanTab } from '../types';\nimport { getSpanSignal } from '../utils/span-signal';\nimport { getSpanDurationMs, getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { getSpanTypeUi } from './shared';\nimport { SpanOutcomeSummary } from './span-outcome';\nimport { getSpanOutcome } from './span-outcome.utils';\nimport {\n SpanErrorDetails,\n SpanInputRenderer,\n SpanOutputRenderer,\n SpanPayloadJson,\n SpanPayloadProcessor,\n getSpanOutputPayload,\n hasSpanInputPreview,\n hasSpanOutputPreview,\n} from './span-payload';\nimport { asCoreSpan, getSpanTools } from './span-payload/span-payload-registry';\nimport { SpanToolCallList, SpanToolList } from './span-payload/span-tools-section';\nimport { useSpanToolCalls } from './span-payload/use-span-tool-calls';\nimport { SpanPromptChanges } from './span-prompt-changes';\nimport { getPromptChanges, runsAfterModel } from './span-prompt-impact';\nimport { SpanTokenUsage } from './span-token-usage';\nimport { getModelFacts, getTokenUsageRows } from './span-token-usage.utils';\nimport { SpanTypeBadge } from './span-type-badge';\nimport { ProviderLogo } from '@/domains/llm';\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDuration, formatDurationPrecise } from '@/utils/duration';\n\n// Mirrors `DataPanel.Content` without requiring the Drawer root (this view also renders standalone).\n// Sections bleed their hairlines through this padding, so the two must match.\nconst BODY_CLASS = 'min-h-0 flex-1 overflow-y-auto p-3';\n\n/** Below this width the tab labels collapse to icons: the four labelled tabs need ~370px. */\nconst COMPACT_WIDTH = 380;\n\ntype PayloadView = 'rich' | 'raw';\n\nexport interface SpanDataPanelViewProps {\n traceId: string;\n spanId: string;\n /** Full span record. Caller fetches via useSpanDetail. */\n span: SpanRecord | undefined;\n isLoading?: boolean;\n /** Previous/next buttons show only when one is provided; omit both where a span tree already navigates. */\n onPrevious?: () => void;\n onNext?: () => void;\n /** When provided, an × button in the header closes the span column. */\n onClose?: () => void;\n /**\n * When provided, a \"Go to trace\" button in the header calls it with the span's ids.\n * The caller decides where the trace opens (e.g. its own traces route).\n */\n onShowTrace?: (span: { traceId: string; spanId: string }) => void;\n /** Controls the open tab; the panel keeps its own when omitted. Defaults to Details. */\n activeTab?: SpanTab;\n onTabChange?: (tab: SpanTab) => void;\n /**\n * When provided, a \"Feedback\" tab appears; the slot receives the loaded span and renders\n * whatever feedback UI the consumer wants.\n */\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n /** Optional indicator rendered after the \"Feedback\" tab label (e.g. a needs-review dot). */\n feedbackTabBadge?: ReactNode;\n /** Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). */\n className?: string;\n}\n\n/**\n * The same rows for every span type: what ran and how long it took, then the tabs. The body is flat:\n * the tab says what it holds, so the payload isn't wrapped in a titled card again. The open tab and the\n * Preview/JSON choice are kept when another span is selected, so stepping through spans compares like for like.\n */\nexport function SpanDataPanelView({\n traceId,\n spanId,\n span,\n isLoading,\n onPrevious,\n onNext,\n onClose,\n onShowTrace,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n className,\n}: SpanDataPanelViewProps) {\n const [ownTab, setOwnTab] = useState<SpanTab>('details');\n const [view, setView] = useState<PayloadView>('rich');\n const [panel, setPanel] = useState<HTMLElement | null>(null);\n const compact = useIsNarrow(panel, COMPACT_WIDTH);\n\n const requested = activeTab ?? ownTab;\n // A feedback tab asked for by the URL means nothing where the consumer offers no feedback.\n const tab = requested === 'feedback' && !feedbackTabSlot ? 'details' : requested;\n const changeTab = (next: SpanTab) => {\n setOwnTab(next);\n onTabChange?.(next);\n };\n\n const tabs: Array<{ value: SpanTab; name: string; icon: ReactNode; attention?: boolean; badge?: ReactNode }> = [\n { value: 'details', name: 'Details', icon: <InfoIcon /> },\n { value: 'input', name: 'Input', icon: <FileInputIcon /> },\n { value: 'output', name: 'Output', icon: <FileOutputIcon />, attention: span?.error != null },\n ...(feedbackTabSlot\n ? [{ value: 'feedback' as const, name: 'Feedback', icon: <MessageSquareReplyIcon />, badge: feedbackTabBadge }]\n : []),\n ];\n\n const headingId = useId();\n\n // Not a DataPanel: this is the span column rendered inside `TraceDataPanelView`,\n // which already provides the panel chrome.\n return (\n <section\n ref={setPanel}\n aria-labelledby={headingId}\n data-slot=\"span-data-panel\"\n className={cn('@container flex min-h-0 flex-1 flex-col overflow-hidden', className)}\n >\n <DataPanel.Header className=\"flex-nowrap\">\n {span ? (\n <SpanIdentity span={span} headingId={headingId} />\n ) : (\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n <span id={headingId}>Span</span>\n </DataPanel.Heading>\n </DataPanel.HeaderContent>\n )}\n <DataPanel.HeaderActions>\n {onShowTrace && (\n <Button\n size=\"icon-sm\"\n variant=\"ghost\"\n aria-label=\"Go to trace\"\n tooltip=\"Go to trace\"\n className=\"shrink-0\"\n onClick={() => onShowTrace({ traceId, spanId })}\n >\n <ExternalLinkIcon />\n </Button>\n )}\n {(onPrevious || onNext) && (\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Go to previous span\"\n nextLabel=\"Go to next span\"\n />\n )}\n {onClose && <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close span\" tooltip=\"Close span\" />}\n </DataPanel.HeaderActions>\n </DataPanel.Header>\n\n {isLoading ? (\n <DataPanel.LoadingData>Loading span details...</DataPanel.LoadingData>\n ) : !span ? (\n <DataPanel.NoData>Span not found.</DataPanel.NoData>\n ) : (\n <>\n <Tabs<SpanTab> defaultTab=\"details\" value={tab} onValueChange={changeTab}>\n <DataPanel.Header className=\"flex-nowrap border-b border-surface-rim\">\n <div className=\"min-w-0 flex-1\">\n <TabList variant=\"pill-ghost\" size=\"sm\">\n {tabs.map(item => (\n <Tab\n key={item.value}\n value={item.value}\n attention={item.attention}\n tooltip={compact ? item.name : undefined}\n >\n <Icon size=\"xs\">{item.icon}</Icon>\n <span className=\"@max-[380px]:sr-only\">{item.name}</span>\n {item.badge != null && <> ({item.badge})</>}\n </Tab>\n ))}\n </TabList>\n </div>\n </DataPanel.Header>\n </Tabs>\n\n <div role=\"tabpanel\" aria-label={tabs.find(item => item.value === tab)?.name} className={BODY_CLASS}>\n {tab === 'details' && <DetailsTab traceId={traceId} span={span} />}\n {tab === 'input' && <InputTab span={span} view={view} onViewChange={setView} />}\n {tab === 'output' && <OutputTab span={span} view={view} onViewChange={setView} />}\n {tab === 'feedback' && feedbackTabSlot?.({ span, traceId, spanId })}\n </div>\n </>\n )}\n </section>\n );\n}\n\n/** Mirrors the `@max-[380px]` container query in JS: tooltips render in a portal, outside the container. */\nfunction useIsNarrow(element: HTMLElement | null, width: number) {\n const [narrow, setNarrow] = useState(false);\n useEffect(() => {\n if (!element || !('ResizeObserver' in globalThis)) return;\n const observer = new ResizeObserver(() => setNarrow(element.clientWidth <= width));\n observer.observe(element);\n return () => observer.disconnect();\n }, [element, width]);\n return narrow;\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Header\n * ---------------------------------------------------------------------------------------------- */\n\nfunction getProcessorInput(span: SpanRecord) {\n if (getSpanSignal(span)) return undefined;\n const input = describeSpanInput(asCoreSpan(span));\n return input?.type === 'processor' ? input.value : undefined;\n}\n\n/** How many times a processor re-ran this step. Zero, the normal case, is not worth showing. */\nfunction getRetryCount(span: SpanRecord) {\n const data: Record<string, unknown> = getProcessorInput(span)?.data ?? {};\n const retryCount = data.retryCount;\n return typeof retryCount === 'number' && retryCount > 0 ? retryCount : 0;\n}\n\n/**\n * What ran and how long it took, on one row. Only the unusual is called out: a failure, a span still\n * running, or a processor that had to retry. A normal success says nothing extra.\n */\nfunction SpanIdentity({ span, headingId }: { span: SpanRecord; headingId: string }) {\n const durationMs = getSpanDurationMs(span.startedAt, span.endedAt);\n const retries = getRetryCount(span);\n\n return (\n <div className=\"flex min-w-0 flex-1 items-center gap-2 pl-1\">\n {/* Same type mark as the span's row in the trace tree, processors included. */}\n <SpanTypeBadge type={span.spanType ?? ''} spanUI={getSpanTypeUi(span.spanType ?? '')} />\n <Tooltip>\n <TooltipTrigger\n render={\n <Txt id={headingId} as=\"h2\" variant=\"card-title-strong\" className=\"min-w-0 truncate\">\n {getModelFacts(span).model ?? span.entityName ?? span.name}\n </Txt>\n }\n />\n <TooltipContent>{span.name}</TooltipContent>\n </Tooltip>\n <Tooltip>\n <TooltipTrigger\n render={\n <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 cursor-help tabular-nums\" tabIndex={0}>\n {durationMs == null ? 'Running' : formatDuration(durationMs)}\n </Txt>\n }\n />\n <TooltipContent>\n {durationMs == null ? 'Still running' : `Duration ${formatDurationPrecise(durationMs)}`}\n </TooltipContent>\n </Tooltip>\n {span.error != null && (\n <Badge size=\"xs\" variant=\"destructive\" className=\"shrink-0\">\n Failed\n </Badge>\n )}\n {retries > 0 && (\n <Badge size=\"xs\" variant=\"warning\" className=\"shrink-0 tabular-nums\">\n {retries === 1 ? 'Retried once' : `Retried ${retries}×`}\n </Badge>\n )}\n </div>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Tab bodies\n * ---------------------------------------------------------------------------------------------- */\n\ntype PayloadTabProps = { span: SpanRecord; view: PayloadView; onViewChange: (view: PayloadView) => void };\n\n/**\n * Processor input keys the preview leaves out: tools have their own section, retries are a header badge,\n * and the step number repeats the `step › N` parent the span sits under in the tree.\n */\nconst PROCESSOR_INPUT_HIDDEN = ['tools', 'toolChoice', 'retryCount', 'stepNumber'];\n\nfunction InputTab({ span, view, onViewChange }: PayloadTabProps) {\n const tools = getSpanTools(span);\n const processorInput = getProcessorInput(span);\n return (\n <Stack>\n <Payload\n label=\"Input\"\n raw={span.input}\n hasPreview={hasSpanInputPreview(span, PROCESSOR_INPUT_HIDDEN)}\n view={view}\n onViewChange={onViewChange}\n empty=\"No input recorded.\"\n >\n {processorInput ? (\n <SpanPayloadProcessor value={processorInput} hidden={PROCESSOR_INPUT_HIDDEN} />\n ) : (\n <SpanInputRenderer span={span} />\n )}\n </Payload>\n {tools && (\n <Section title=\"Available tools\" count={tools.tools.length}>\n <SpanToolList tools={tools.tools} />\n </Section>\n )}\n </Stack>\n );\n}\n\nfunction OutputTab({ span, view, onViewChange }: PayloadTabProps) {\n const output = getSpanOutputPayload(span);\n return (\n <Stack>\n <SpanProblem span={span} />\n {isTokenLimitExceeded(span) && (\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n )}\n {(output != null || span.error == null) && (\n <Payload\n label=\"Output\"\n raw={output}\n hasPreview={hasSpanOutputPreview(span)}\n view={view}\n onViewChange={onViewChange}\n empty=\"No output recorded.\"\n >\n <SpanOutputRenderer span={span} />\n </Payload>\n )}\n <ToolCalls span={span} />\n </Stack>\n );\n}\n\n/** Everything looked up rather than read, grouped the same way for every span type. */\nfunction DetailsTab({ traceId, span }: { traceId: string; span: SpanRecord }) {\n const { model, provider, finishReason, firstToken, speed } = getModelFacts(span);\n // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- Built SDK declarations type attributes.usage as unknown.\n const usage = span.attributes?.usage as UsageStats | undefined;\n const hasModel = Boolean(model || finishReason || firstToken || speed);\n const durationMs = getSpanDurationMs(span.startedAt, span.endedAt);\n const ids: Array<[string, string | null | undefined]> = [\n ['Span', span.spanId],\n ['Trace', traceId],\n ['Parent span', span.parentSpanId],\n ['Run', span.runId],\n ['Session', span.sessionId],\n ['Thread', span.threadId],\n ['Request', span.requestId],\n ['User', span.userId],\n ['Organization', span.organizationId],\n ['Experiment', span.experimentId],\n ];\n\n return (\n <Stack>\n <PromptSection span={span} />\n\n {hasModel && (\n <Section title=\"Model\">\n <DataKeysAndValues>\n {model && (\n <Row label=\"Model\">\n <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n {provider && <ProviderLogo providerId={provider} size=\"xs\" />}\n <span className=\"truncate\">{model}</span>\n </span>\n </Row>\n )}\n {provider && <Row label=\"Provider\">{provider}</Row>}\n {finishReason && <Row label=\"Finish reason\">{finishReason}</Row>}\n {firstToken && <Row label=\"First token\">{firstToken}</Row>}\n {speed && <Row label=\"Speed\">{speed}</Row>}\n </DataKeysAndValues>\n </Section>\n )}\n\n {usage && getTokenUsageRows(usage) && (\n <Section title=\"Token usage\">\n <SpanTokenUsage usage={usage} />\n </Section>\n )}\n\n <Section title=\"Timing\">\n <DataKeysAndValues>\n <Row label=\"Started\">{formatTimestampPrecise(span.startedAt)}</Row>\n {span.endedAt && <Row label=\"Ended\">{formatTimestampPrecise(span.endedAt)}</Row>}\n {durationMs != null && <Row label=\"Duration\">{formatDurationPrecise(durationMs)}</Row>}\n </DataKeysAndValues>\n </Section>\n\n <Section title=\"Identifiers\">\n <DataKeysAndValues>\n {ids.map(([label, value]) => (value ? <IdRow key={label} label={label} value={value} /> : null))}\n {span.tags && span.tags.length > 0 && (\n <Row label=\"Tags\">\n <span className=\"flex flex-wrap gap-1\">\n {span.tags.map(tag => (\n <Badge key={tag} size=\"xs\" variant=\"neutral\" emphasis=\"subtle\">\n {tag}\n </Badge>\n ))}\n </span>\n </Row>\n )}\n </DataKeysAndValues>\n </Section>\n\n <JsonSection title=\"Metadata\" value={span.metadata} />\n <JsonSection title=\"Attributes\" value={span.attributes} />\n </Stack>\n );\n}\n\n/**\n * What this span changed in the request, from its own recorded changes, as diff cards. Changes made\n * after the model answered get a short note: they can't have shaped this request. Nothing is shown\n * when the span changed nothing.\n */\nfunction PromptSection({ span }: { span: SpanRecord }) {\n if (getPromptChanges(span).length === 0) return null;\n\n return (\n <Section title=\"Prompt\">\n {runsAfterModel(span) && (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\">\n Ran after the model answered: its changes are kept for later turns and could not shape this request.\n </Txt>\n )}\n <SpanPromptChanges span={span} />\n </Section>\n );\n}\n\n/** Why the span failed or stopped, above whatever output it still produced. */\nfunction SpanProblem({ span }: { span: SpanRecord }) {\n const outcome = getSpanOutcome(span);\n if (outcome?.tone !== 'error' && outcome?.tone !== 'warning') return null;\n if (span.error != null) {\n return (\n <Notice variant=\"destructive\" icon={<CircleXIcon />} title={<h3>{outcome.headline}</h3>}>\n <SpanErrorDetails span={span} />\n </Notice>\n );\n }\n // A tripwire leaves no error: its reason is the only account of why the run stopped.\n const tripwire = describeProcessorPipeline(asCoreSpan(span))?.tripwireAbort;\n if (!tripwire) return <SpanOutcomeSummary outcome={outcome} showDetail />;\n return (\n <Notice variant=\"destructive\" icon={<CircleXIcon />} title={<h3>{outcome.headline}</h3>}>\n {tripwire.reason && <p className=\"break-words whitespace-pre-wrap\">{tripwire.reason}</p>}\n {tripwire.retry !== undefined && (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\">\n {tripwire.retry ? 'The model was asked to retry.' : 'Not retried.'}\n </Txt>\n )}\n </Notice>\n );\n}\n\nfunction ToolCalls({ span }: { span: SpanRecord }) {\n const toolCalls = useSpanToolCalls(span);\n if (toolCalls.length === 0) return null;\n return (\n <Section title=\"Tool calls\" count={toolCalls.length}>\n <SpanToolCallList toolCalls={toolCalls} />\n </Section>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Building blocks\n * ---------------------------------------------------------------------------------------------- */\n\nfunction Stack({ children }: { children: ReactNode }) {\n return <div className=\"grid min-w-0 content-start gap-4\">{children}</div>;\n}\n\n/**\n * A hairline and a small heading between groups, instead of a titled card around each one.\n * The hairline runs edge to edge: it bleeds through the body padding.\n */\nfunction Section({\n title,\n label = title,\n count,\n children,\n}: {\n title?: string;\n /** Names the region for assistive tech when the heading is rendered by the children. */\n label?: string;\n count?: number;\n children: ReactNode;\n}) {\n return (\n <section\n aria-label={label}\n className=\"-mx-3 grid min-w-0 gap-3 border-t border-surface-rim px-3 pt-4 first:border-t-0 first:pt-0\"\n >\n {title && (\n <DataPanel.SectionHeading>\n {title}\n {count != null && <span className=\"tabular-nums\"> · {count}</span>}\n </DataPanel.SectionHeading>\n )}\n {children}\n </section>\n );\n}\n\n/**\n * Stored JSON that is rarely why someone opened the span. The heading always shows; the block opens\n * folded on its root, and unfolding it shows the top-level keys with their values still folded, so it\n * collapses through the code block's own fold markers instead of a second disclosure around it.\n */\nfunction JsonSection({ title, value }: { title: string; value: unknown }) {\n if (value == null || (typeof value === 'object' && Object.keys(value).length === 0)) return null;\n return (\n <Section label={title}>\n <div className=\"flex min-w-0 items-center justify-between gap-2\">\n <DataPanel.SectionHeading>{title}</DataPanel.SectionHeading>\n <CopyButton\n content={JSON.stringify(value, null, 2)}\n copyMessage={`${title} copied`}\n tooltip={`Copy ${title.toLowerCase()} as JSON`}\n variant=\"ghost\"\n />\n </div>\n <SpanPayloadJson value={value} foldRoot foldNested />\n </Section>\n );\n}\n\n/**\n * The payload, unframed. Its Preview/JSON switch and copy sit on a small toolbar inside the tab,\n * right above what they act on, so the tab bar stays the same for every tab.\n */\nfunction Payload({\n label,\n raw,\n hasPreview,\n view,\n onViewChange,\n empty,\n children,\n}: {\n label: string;\n raw: unknown;\n hasPreview: boolean;\n view: PayloadView;\n onViewChange: (view: PayloadView) => void;\n empty: string;\n children: ReactNode;\n}) {\n if (raw == null) {\n return (\n <Txt variant=\"body-sm\" tone=\"muted\">\n {empty}\n </Txt>\n );\n }\n const shown = hasPreview ? view : 'raw';\n return (\n <div role=\"group\" aria-label={label} data-view={shown} className=\"grid min-w-0 gap-3\">\n <div className=\"flex items-center justify-end gap-1\">\n {hasPreview && (\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-pressed={view === 'raw'}\n tooltip={view === 'raw' ? `Show ${label.toLowerCase()} preview` : `Show ${label.toLowerCase()} as JSON`}\n onClick={() => onViewChange(view === 'raw' ? 'rich' : 'raw')}\n >\n {view === 'raw' ? <EyeIcon /> : <BracesIcon />}\n </Button>\n )}\n <CopyButton\n content={JSON.stringify(raw, null, 2)}\n copyMessage={`${label} copied`}\n tooltip={`Copy ${label.toLowerCase()} as JSON`}\n variant=\"ghost\"\n />\n </div>\n <div className=\"min-w-0 [&_[data-slot=message]]:my-0\">\n {shown === 'rich' ? children : <SpanPayloadJson value={raw} foldNested />}\n </div>\n </div>\n );\n}\n\nfunction Row({ label, children }: { label: string; children: ReactNode }) {\n return (\n <>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{children}</DataKeysAndValues.Value>\n </>\n );\n}\n\nfunction IdRow({ label, value }: { label: string; value: string }) {\n return (\n <>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip={`Copy ${label} id`} copyValue={value}>\n {value}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAM,aAAa;;AAGnB,IAAM,gBAAgB;;;;;;AAuCtB,SAAgB,kBAAkB,EAChC,SACA,QACA,MACA,WACA,YACA,QACA,SACA,aACA,WACA,aACA,iBACA,kBACA,aACyB;CACzB,MAAM,CAAC,QAAQ,aAAa,SAAkB,SAAS;CACvD,MAAM,CAAC,MAAM,WAAW,SAAsB,MAAM;CACpD,MAAM,CAAC,OAAO,YAAY,SAA6B,IAAI;CAC3D,MAAM,UAAU,YAAY,OAAO,aAAa;CAEhD,MAAM,YAAY,aAAa;CAE/B,MAAM,MAAM,cAAc,cAAc,CAAC,kBAAkB,YAAY;CACvE,MAAM,aAAa,SAAkB;EACnC,UAAU,IAAI;EACd,cAAc,IAAI;CACpB;CAEA,MAAM,OAAyG;EAC7G;GAAE,OAAO;GAAW,MAAM;GAAW,MAAM,oBAAC,UAAD,CAAW,CAAA;EAAE;EACxD;GAAE,OAAO;GAAS,MAAM;GAAS,MAAM,oBAAC,eAAD,CAAgB,CAAA;EAAE;EACzD;GAAE,OAAO;GAAU,MAAM;GAAU,MAAM,oBAAC,gBAAD,CAAiB,CAAA;GAAG,WAAW,MAAM,SAAS;EAAK;EAC5F,GAAI,kBACA,CAAC;GAAE,OAAO;GAAqB,MAAM;GAAY,MAAM,oBAAC,wBAAD,CAAyB,CAAA;GAAG,OAAO;EAAiB,CAAC,IAC5G,CAAC;CACP;CAEA,MAAM,YAAY,MAAM;CAIxB,OACE,qBAAC,WAAD;EACE,KAAK;EACL,mBAAiB;EACjB,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAJpF,UAAA,CAME,qBAAC,UAAU,QAAX;GAAkB,WAAU;GAA5B,UAAA,CACG,OACC,oBAAC,cAAD;IAAoB;IAAiB;GAAY,CAAA,IAEjD,oBAAC,UAAU,eAAX,EAAA,UACE,oBAAC,UAAU,SAAX,EAAA,UACE,oBAAC,QAAD;IAAM,IAAI;IAAW,UAAA;GAAU,CAAA,EACd,CAAA,EACI,CAAA,GAE3B,qBAAC,UAAU,eAAX,EAAA,UAAA;IACG,eACC,oBAAC,QAAD;KACE,MAAK;KACL,SAAQ;KACR,cAAW;KACX,SAAQ;KACR,WAAU;KACV,eAAe,YAAY;MAAE;MAAS;KAAO,CAAC;KAE9C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;IACb,CAAA;KAER,cAAc,WACd,oBAAC,UAAU,aAAX;KACc;KACJ;KACR,eAAc;KACd,WAAU;IACX,CAAA;IAEF,WAAW,oBAAC,UAAU,aAAX;KAAuB,MAAK;KAAI,SAAS;KAAS,OAAM;KAAa,SAAQ;IAAc,CAAA;GAChF,EAAA,CAAA,CACT;EAEjB,CAAA,GAAA,YACC,oBAAC,UAAU,aAAX,EAAA,UAAuB,0BAA8C,CAAA,IACnE,CAAC,OACH,oBAAC,UAAU,QAAX,EAAA,UAAkB,kBAAiC,CAAA,IAEnD,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GAAe,YAAW;GAAU,OAAO;GAAK,eAAe;GAC7D,UAAA,oBAAC,UAAU,QAAX;IAAkB,WAAU;IAC1B,UAAA,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,SAAD;MAAS,SAAQ;MAAa,MAAK;MAChC,UAAA,KAAK,KAAI,SACR,qBAAC,KAAD;OAEE,OAAO,KAAK;OACZ,WAAW,KAAK;OAChB,SAAS,UAAU,KAAK,OAAO,KAAA;OAJjC,UAAA;QAME,oBAAC,MAAD;SAAM,MAAK;SAAM,UAAA,KAAK;QAAW,CAAA;QACjC,oBAAC,QAAD;SAAM,WAAU;SAAwB,UAAA,KAAK;QAAW,CAAA;QACvD,KAAK,SAAS,QAAQ,qBAAAA,YAAA,EAAA,UAAA;SAAE;SAAG,KAAK;SAAM;QAAG,EAAA,CAAA;OACvC;MARE,GAAA,KAAK,KAQP,CACN;KACM,CAAA;IACN,CAAA;GACW,CAAA;EACd,CAAA,GAEN,qBAAC,OAAD;GAAK,MAAK;GAAW,cAAY,KAAK,MAAK,SAAQ,KAAK,UAAU,GAAG,CAAC,EAAE;GAAM,WAAW;GAAzF,UAAA;IACG,QAAQ,aAAa,oBAAC,YAAD;KAAqB;KAAe;IAAO,CAAA;IAChE,QAAQ,WAAW,oBAAC,UAAD;KAAgB;KAAY;KAAM,cAAc;IAAU,CAAA;IAC7E,QAAQ,YAAY,oBAAC,WAAD;KAAiB;KAAY;KAAM,cAAc;IAAU,CAAA;IAC/E,QAAQ,cAAc,kBAAkB;KAAE;KAAM;KAAS;IAAO,CAAC;GAC/D;EACL,CAAA,CAAA,EAAA,CAAA,CAEG;;AAEb;;AAGA,SAAS,YAAY,SAA6B,OAAe;CAC/D,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,gBAAgB;EACd,IAAI,CAAC,WAAW,EAAE,oBAAoB,aAAa;EACnD,MAAM,WAAW,IAAI,qBAAqB,UAAU,QAAQ,eAAe,KAAK,CAAC;EACjF,SAAS,QAAQ,OAAO;EACxB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,SAAS,KAAK,CAAC;CACnB,OAAO;AACT;AAMA,SAAS,kBAAkB,MAAkB;CAC3C,IAAI,cAAc,IAAI,GAAG,OAAO,KAAA;CAChC,MAAM,QAAQ,kBAAkB,WAAW,IAAI,CAAC;CAChD,OAAO,OAAO,SAAS,cAAc,MAAM,QAAQ,KAAA;AACrD;;AAGA,SAAS,cAAc,MAAkB;CAEvC,MAAM,cADgC,kBAAkB,IAAI,CAAC,EAAE,QAAQ,CAAC,EAAA,CAChD;CACxB,OAAO,OAAO,eAAe,YAAY,aAAa,IAAI,aAAa;AACzE;;;;;AAMA,SAAS,aAAa,EAAE,MAAM,aAAsD;CAClF,MAAM,aAAa,kBAAkB,KAAK,WAAW,KAAK,OAAO;CACjE,MAAM,UAAU,cAAc,IAAI;CAElC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GAEE,oBAAC,eAAD;IAAe,MAAM,KAAK,YAAY;IAAI,QAAQ,cAAc,KAAK,YAAY,EAAE;GAAI,CAAA;GACvF,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,QACE,oBAAC,KAAD;IAAK,IAAI;IAAW,IAAG;IAAK,SAAQ;IAAoB,WAAU;IAC/D,UAAA,cAAc,IAAI,CAAC,CAAC,SAAS,KAAK,cAAc,KAAK;GACnD,CAAA,EAER,CAAA,GACD,oBAAC,gBAAD,EAAA,UAAiB,KAAK,KAAqB,CAAA,CACpC,EAAA,CAAA;GACT,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,QACE,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,MAAK;IAAQ,WAAU;IAAoC,UAAU;IACnG,UAAA,cAAc,OAAO,YAAY,eAAe,UAAU;GACxD,CAAA,EAER,CAAA,GACD,oBAAC,gBAAD,EAAA,UACG,cAAc,OAAO,kBAAkB,YAAY,sBAAsB,UAAU,IACtE,CAAA,CACT,EAAA,CAAA;GACR,KAAK,SAAS,QACb,oBAAC,OAAD;IAAO,MAAK;IAAK,SAAQ;IAAc,WAAU;IAAW,UAAA;GAErD,CAAA;GAER,UAAU,KACT,oBAAC,OAAD;IAAO,MAAK;IAAK,SAAQ;IAAU,WAAU;IAC1C,UAAA,YAAY,IAAI,iBAAiB,WAAW,QAAQ;GAChD,CAAA;EAEN;;AAET;;;;;AAYA,IAAM,yBAAyB;CAAC;CAAS;CAAc;CAAc;AAAY;AAEjF,SAAS,SAAS,EAAE,MAAM,MAAM,gBAAiC;CAC/D,MAAM,QAAQ,aAAa,IAAI;CAC/B,MAAM,iBAAiB,kBAAkB,IAAI;CAC7C,OACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,SAAD;EACE,OAAM;EACN,KAAK,KAAK;EACV,YAAY,oBAAoB,MAAM,sBAAsB;EACtD;EACQ;EACd,OAAM;EAEL,UAAA,iBACC,oBAAC,sBAAD;GAAsB,OAAO;GAAgB,QAAQ;EAAyB,CAAA,IAE9E,oBAAC,mBAAD,EAAyB,KAAO,CAAA;CAE3B,CAAA,GACR,SACC,oBAAC,SAAD;EAAS,OAAM;EAAkB,OAAO,MAAM,MAAM;EAClD,UAAA,oBAAC,cAAD,EAAc,OAAO,MAAM,MAAQ,CAAA;CAC5B,CAAA,CAEN,EAAA,CAAA;AAEX;AAEA,SAAS,UAAU,EAAE,MAAM,MAAM,gBAAiC;CAChE,MAAM,SAAS,qBAAqB,IAAI;CACxC,OACE,qBAAC,OAAD,EAAA,UAAA;EACE,oBAAC,aAAD,EAAmB,KAAO,CAAA;EACzB,qBAAqB,IAAI,KACxB,oBAAC,QAAD;GAAQ,SAAQ;GAAU,OAAM;GAC9B,UAAA,oBAAC,OAAO,SAAR,EAAA,UAAiB,qBAAqB,IAAI,EAAkB,CAAA;EACtD,CAAA;GAER,UAAU,QAAQ,KAAK,SAAS,SAChC,oBAAC,SAAD;GACE,OAAM;GACN,KAAK;GACL,YAAY,qBAAqB,IAAI;GAC/B;GACQ;GACd,OAAM;GAEN,UAAA,oBAAC,oBAAD,EAA0B,KAAO,CAAA;EAC1B,CAAA;EAEX,oBAAC,WAAD,EAAiB,KAAO,CAAA;CACnB,EAAA,CAAA;AAEX;;AAGA,SAAS,WAAW,EAAE,SAAS,QAA+C;CAC5E,MAAM,EAAE,OAAO,UAAU,cAAc,YAAY,UAAU,cAAc,IAAI;CAE/E,MAAM,QAAQ,KAAK,YAAY;CAC/B,MAAM,WAAW,QAAQ,SAAS,gBAAgB,cAAc,KAAK;CACrE,MAAM,aAAa,kBAAkB,KAAK,WAAW,KAAK,OAAO;CACjE,MAAM,MAAkD;EACtD,CAAC,QAAQ,KAAK,MAAM;EACpB,CAAC,SAAS,OAAO;EACjB,CAAC,eAAe,KAAK,YAAY;EACjC,CAAC,OAAO,KAAK,KAAK;EAClB,CAAC,WAAW,KAAK,SAAS;EAC1B,CAAC,UAAU,KAAK,QAAQ;EACxB,CAAC,WAAW,KAAK,SAAS;EAC1B,CAAC,QAAQ,KAAK,MAAM;EACpB,CAAC,gBAAgB,KAAK,cAAc;EACpC,CAAC,cAAc,KAAK,YAAY;CAClC;CAEA,OACE,qBAAC,OAAD,EAAA,UAAA;EACE,oBAAC,eAAD,EAAqB,KAAO,CAAA;EAE3B,YACC,oBAAC,SAAD;GAAS,OAAM;GACb,UAAA,qBAAC,mBAAD,EAAA,UAAA;IACG,SACC,oBAAC,KAAD;KAAK,OAAM;KACT,UAAA,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACG,YAAY,oBAAC,cAAD;OAAc,YAAY;OAAU,MAAK;MAAM,CAAA,GAC5D,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA;MAAY,CAAA,CACpC;;IACH,CAAA;IAEN,YAAY,oBAAC,KAAD;KAAK,OAAM;KAAY,UAAA;IAAc,CAAA;IACjD,gBAAgB,oBAAC,KAAD;KAAK,OAAM;KAAiB,UAAA;IAAkB,CAAA;IAC9D,cAAc,oBAAC,KAAD;KAAK,OAAM;KAAe,UAAA;IAAgB,CAAA;IACxD,SAAS,oBAAC,KAAD;KAAK,OAAM;KAAS,UAAA;IAAW,CAAA;GACxB,EAAA,CAAA;EACZ,CAAA;EAGV,SAAS,kBAAkB,KAAK,KAC/B,oBAAC,SAAD;GAAS,OAAM;GACb,UAAA,oBAAC,gBAAD,EAAuB,MAAQ,CAAA;EACxB,CAAA;EAGX,oBAAC,SAAD;GAAS,OAAM;GACb,UAAA,qBAAC,mBAAD,EAAA,UAAA;IACE,oBAAC,KAAD;KAAK,OAAM;KAAW,UAAA,uBAAuB,KAAK,SAAS;IAAO,CAAA;IACjE,KAAK,WAAW,oBAAC,KAAD;KAAK,OAAM;KAAS,UAAA,uBAAuB,KAAK,OAAO;IAAO,CAAA;IAC9E,cAAc,QAAQ,oBAAC,KAAD;KAAK,OAAM;KAAY,UAAA,sBAAsB,UAAU;IAAO,CAAA;GACpE,EAAA,CAAA;EACZ,CAAA;EAET,oBAAC,SAAD;GAAS,OAAM;GACb,UAAA,qBAAC,mBAAD,EAAA,UAAA,CACG,IAAI,KAAK,CAAC,OAAO,WAAY,QAAQ,oBAAC,OAAD;IAA0B;IAAc;GAAQ,GAApC,KAAoC,IAAI,IAAK,GAC9F,KAAK,QAAQ,KAAK,KAAK,SAAS,KAC/B,oBAAC,KAAD;IAAK,OAAM;IACT,UAAA,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA,KAAK,KAAK,KAAI,QACb,oBAAC,OAAD;MAAiB,MAAK;MAAK,SAAQ;MAAU,UAAS;MACnD,UAAA;KACI,GAFK,GAEL,CACR;IACG,CAAA;GACH,CAAA,CAEU,EAAA,CAAA;EACZ,CAAA;EAET,oBAAC,aAAD;GAAa,OAAM;GAAW,OAAO,KAAK;EAAW,CAAA;EACrD,oBAAC,aAAD;GAAa,OAAM;GAAa,OAAO,KAAK;EAAa,CAAA;CACpD,EAAA,CAAA;AAEX;;;;;;AAOA,SAAS,cAAc,EAAE,QAA8B;CACrD,IAAI,iBAAiB,IAAI,CAAC,CAAC,WAAW,GAAG,OAAO;CAEhD,OACE,qBAAC,SAAD;EAAS,OAAM;EAAf,UAAA,CACG,eAAe,IAAI,KAClB,oBAAC,KAAD;GAAK,IAAG;GAAI,SAAQ;GAAU,MAAK;GAAQ,UAAA;EAEtC,CAAA,GAEP,oBAAC,mBAAD,EAAyB,KAAO,CAAA,CACzB;;AAEb;;AAGA,SAAS,YAAY,EAAE,QAA8B;CACnD,MAAM,UAAU,eAAe,IAAI;CACnC,IAAI,SAAS,SAAS,WAAW,SAAS,SAAS,WAAW,OAAO;CACrE,IAAI,KAAK,SAAS,MAChB,OACE,oBAAC,QAAD;EAAQ,SAAQ;EAAc,MAAM,oBAAC,aAAD,CAAc,CAAA;EAAG,OAAO,oBAAC,MAAD,EAAA,UAAK,QAAQ,SAAa,CAAA;EACpF,UAAA,oBAAC,kBAAD,EAAwB,KAAO,CAAA;CACzB,CAAA;CAIZ,MAAM,WAAW,0BAA0B,WAAW,IAAI,CAAC,CAAC,EAAE;CAC9D,IAAI,CAAC,UAAU,OAAO,oBAAC,oBAAD;EAA6B;EAAS,YAAA;CAAY,CAAA;CACxE,OACE,qBAAC,QAAD;EAAQ,SAAQ;EAAc,MAAM,oBAAC,aAAD,CAAc,CAAA;EAAG,OAAO,oBAAC,MAAD,EAAA,UAAK,QAAQ,SAAa,CAAA;EAAtF,UAAA,CACG,SAAS,UAAU,oBAAC,KAAD;GAAG,WAAU;GAAmC,UAAA,SAAS;EAAU,CAAA,GACtF,SAAS,UAAU,KAAA,KAClB,oBAAC,KAAD;GAAK,IAAG;GAAI,SAAQ;GAAU,MAAK;GAChC,UAAA,SAAS,QAAQ,kCAAkC;EACjD,CAAA,CAED;;AAEZ;AAEA,SAAS,UAAU,EAAE,QAA8B;CACjD,MAAM,YAAY,iBAAiB,IAAI;CACvC,IAAI,UAAU,WAAW,GAAG,OAAO;CACnC,OACE,oBAAC,SAAD;EAAS,OAAM;EAAa,OAAO,UAAU;EAC3C,UAAA,oBAAC,kBAAD,EAA6B,UAAY,CAAA;CAClC,CAAA;AAEb;AAMA,SAAS,MAAM,EAAE,YAAqC;CACpD,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAoC;CAAc,CAAA;AAC1E;;;;;AAMA,SAAS,QAAQ,EACf,OACA,QAAQ,OACR,OACA,YAOC;CACD,OACE,qBAAC,WAAD;EACE,cAAY;EACZ,WAAU;EAFZ,UAAA,CAIG,SACC,qBAAC,UAAU,gBAAX,EAAA,UAAA,CACG,OACA,SAAS,QAAQ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAA+B,OAAI,KAAY;EACzC,CAAA,CAAA,EAAA,CAAA,GAE3B,QACM;;AAEb;;;;;;AAOA,SAAS,YAAY,EAAE,OAAO,SAA4C;CACxE,IAAI,SAAS,QAAS,OAAO,UAAU,YAAY,OAAO,KAAK,KAAK,CAAC,CAAC,WAAW,GAAI,OAAO;CAC5F,OACE,qBAAC,SAAD;EAAS,OAAO;EAAhB,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,UAAU,gBAAX,EAAA,UAA2B,MAAgC,CAAA,GAC3D,oBAAC,YAAD;IACE,SAAS,KAAK,UAAU,OAAO,MAAM,CAAC;IACtC,aAAa,GAAG,MAAM;IACtB,SAAS,QAAQ,MAAM,YAAY,EAAE;IACrC,SAAQ;GACT,CAAA,CACE;EACL,CAAA,GAAA,oBAAC,iBAAD;GAAwB;GAAO,UAAA;GAAS,YAAA;EAAY,CAAA,CAC7C;;AAEb;;;;;AAMA,SAAS,QAAQ,EACf,OACA,KACA,YACA,MACA,cACA,OACA,YASC;CACD,IAAI,OAAO,MACT,OACE,oBAAC,KAAD;EAAK,SAAQ;EAAU,MAAK;EACzB,UAAA;CACE,CAAA;CAGT,MAAM,QAAQ,aAAa,OAAO;CAClC,OACE,qBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,aAAW;EAAO,WAAU;EAAjE,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,cACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,gBAAc,SAAS;IACvB,SAAS,SAAS,QAAQ,QAAQ,MAAM,YAAY,EAAE,YAAY,QAAQ,MAAM,YAAY,EAAE;IAC9F,eAAe,aAAa,SAAS,QAAQ,SAAS,KAAK;IAE1D,UAAA,SAAS,QAAQ,oBAAC,SAAD,CAAU,CAAA,IAAI,oBAAC,YAAD,CAAa,CAAA;GACvC,CAAA,GAEV,oBAAC,YAAD;IACE,SAAS,KAAK,UAAU,KAAK,MAAM,CAAC;IACpC,aAAa,GAAG,MAAM;IACtB,SAAS,QAAQ,MAAM,YAAY,EAAE;IACrC,SAAQ;GACT,CAAA,CACE;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,UAAU,SAAS,WAAW,oBAAC,iBAAD;IAAiB,OAAO;IAAK,YAAA;GAAY,CAAA;EACrE,CAAA,CACF;;AAET;AAEA,SAAS,IAAI,EAAE,OAAO,YAAoD;CACxE,OACE,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,kBAAkB,KAAnB,EAAA,UAAwB,MAA6B,CAAA,GACrD,oBAAC,kBAAkB,OAAnB,EAA0B,SAAkC,CAAA,CAC5D,EAAA,CAAA;AAEN;AAEA,SAAS,MAAM,EAAE,OAAO,SAA2C;CACjE,OACE,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,kBAAkB,KAAnB,EAAA,UAAwB,MAA6B,CAAA,GACrD,oBAAC,kBAAkB,kBAAnB;EAAoC,aAAa,QAAQ,MAAM;EAAM,WAAW;EAC7E,UAAA;CACiC,CAAA,CACpC,EAAA,CAAA;AAEN"}
|
|
1
|
+
{"version":3,"file":"span-data-panel-view.es.js","names":["_Fragment"],"sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import { describeProcessorPipeline, describeSpanInput } from '@mastra/core/observability';\nimport type { UsageStats } from '@mastra/core/observability';\nimport {\n BracesIcon,\n CircleXIcon,\n ExternalLinkIcon,\n EyeIcon,\n FileInputIcon,\n FileOutputIcon,\n InfoIcon,\n MessageSquareReplyIcon,\n} from 'lucide-react';\nimport { useId, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord, SpanTab } from '../types';\nimport { getSpanSignal } from '../utils/span-signal';\nimport { getSpanDurationMs, getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { getSpanTypeUi } from './shared';\nimport { SpanOutcomeSummary } from './span-outcome';\nimport { getSpanOutcome } from './span-outcome.utils';\nimport {\n SpanErrorDetails,\n SpanInputRenderer,\n SpanOutputRenderer,\n SpanPayloadJson,\n SpanPayloadProcessor,\n getSpanOutputPayload,\n hasSpanInputPreview,\n hasSpanOutputPreview,\n} from './span-payload';\nimport { asCoreSpan, getSpanTools } from './span-payload/span-payload-registry';\nimport { SpanToolCallList, SpanToolList } from './span-payload/span-tools-section';\nimport { useSpanToolCalls } from './span-payload/use-span-tool-calls';\nimport { SpanPromptChanges } from './span-prompt-changes';\nimport { getPromptChanges, runsAfterModel } from './span-prompt-impact';\nimport { SpanTokenUsage } from './span-token-usage';\nimport { getModelFacts, getTokenUsageRows } from './span-token-usage.utils';\nimport { SpanTypeBadge } from './span-type-badge';\nimport { ProviderLogo } from '@/domains/llm';\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDuration, formatDurationPrecise } from '@/utils/duration';\n\n// Mirrors `DataPanel.Content` without requiring the Drawer root (this view also renders standalone).\n// Sections bleed their hairlines through this padding, so the two must match.\nconst BODY_CLASS = 'min-h-0 flex-1 overflow-y-auto p-3';\n\ntype PayloadView = 'rich' | 'raw';\n\nexport interface SpanDataPanelViewProps {\n traceId: string;\n spanId: string;\n /** Full span record. Caller fetches via useSpanDetail. */\n span: SpanRecord | undefined;\n isLoading?: boolean;\n /** Previous/next buttons show only when one is provided; omit both where a span tree already navigates. */\n onPrevious?: () => void;\n onNext?: () => void;\n /** When provided, an × button in the header closes the span column. */\n onClose?: () => void;\n /**\n * When provided, a \"Go to trace\" button in the header calls it with the span's ids.\n * The caller decides where the trace opens (e.g. its own traces route).\n */\n onShowTrace?: (span: { traceId: string; spanId: string }) => void;\n /** Controls the open tab; the panel keeps its own when omitted. Defaults to Details. */\n activeTab?: SpanTab;\n onTabChange?: (tab: SpanTab) => void;\n /**\n * When provided, a \"Feedback\" tab appears; the slot receives the loaded span and renders\n * whatever feedback UI the consumer wants.\n */\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n /** Optional indicator rendered after the \"Feedback\" tab label (e.g. a needs-review dot). */\n feedbackTabBadge?: ReactNode;\n /** Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). */\n className?: string;\n}\n\n/**\n * The same rows for every span type: what ran and how long it took, then the tabs. The body is flat:\n * the tab says what it holds, so the payload isn't wrapped in a titled card again. The open tab and the\n * Preview/JSON choice are kept when another span is selected, so stepping through spans compares like for like.\n */\nexport function SpanDataPanelView({\n traceId,\n spanId,\n span,\n isLoading,\n onPrevious,\n onNext,\n onClose,\n onShowTrace,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n className,\n}: SpanDataPanelViewProps) {\n const [ownTab, setOwnTab] = useState<SpanTab>('details');\n const [view, setView] = useState<PayloadView>('rich');\n\n const requested = activeTab ?? ownTab;\n // A feedback tab asked for by the URL means nothing where the consumer offers no feedback.\n const tab = requested === 'feedback' && !feedbackTabSlot ? 'details' : requested;\n const changeTab = (next: SpanTab) => {\n setOwnTab(next);\n onTabChange?.(next);\n };\n\n const tabs: Array<{ value: SpanTab; name: string; icon: ReactNode; attention?: boolean; badge?: ReactNode }> = [\n { value: 'details', name: 'Details', icon: <InfoIcon /> },\n { value: 'input', name: 'Input', icon: <FileInputIcon /> },\n { value: 'output', name: 'Output', icon: <FileOutputIcon />, attention: span?.error != null },\n ...(feedbackTabSlot\n ? [{ value: 'feedback' as const, name: 'Feedback', icon: <MessageSquareReplyIcon />, badge: feedbackTabBadge }]\n : []),\n ];\n\n const headingId = useId();\n\n // Not a DataPanel: this is the span column rendered inside `TraceDataPanelView`,\n // which already provides the panel chrome.\n return (\n <section\n aria-labelledby={headingId}\n data-slot=\"span-data-panel\"\n className={cn('flex min-h-0 flex-1 flex-col overflow-hidden', className)}\n >\n <DataPanel.Header className=\"flex-nowrap\">\n {span ? (\n <SpanIdentity span={span} headingId={headingId} />\n ) : (\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n <span id={headingId}>Span</span>\n </DataPanel.Heading>\n </DataPanel.HeaderContent>\n )}\n <DataPanel.HeaderActions>\n {onShowTrace && (\n <Button\n size=\"icon-sm\"\n variant=\"ghost\"\n aria-label=\"Go to trace\"\n tooltip=\"Go to trace\"\n className=\"shrink-0\"\n onClick={() => onShowTrace({ traceId, spanId })}\n >\n <ExternalLinkIcon />\n </Button>\n )}\n {(onPrevious || onNext) && (\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Go to previous span\"\n nextLabel=\"Go to next span\"\n />\n )}\n {onClose && <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close span\" tooltip=\"Close span\" />}\n </DataPanel.HeaderActions>\n </DataPanel.Header>\n\n {isLoading ? (\n <DataPanel.LoadingData>Loading span details...</DataPanel.LoadingData>\n ) : !span ? (\n <DataPanel.NoData>Span not found.</DataPanel.NoData>\n ) : (\n <>\n <Tabs<SpanTab> defaultTab=\"details\" value={tab} onValueChange={changeTab}>\n <DataPanel.Header className=\"flex-nowrap border-b border-surface-rim\">\n <div className=\"min-w-0 flex-1\">\n <TabList variant=\"pill-ghost\" size=\"sm\">\n {tabs.map(item => (\n <Tab key={item.value} value={item.value} attention={item.attention}>\n <Icon size=\"xs\">{item.icon}</Icon>\n <span>{item.name}</span>\n {item.badge != null && <> ({item.badge})</>}\n </Tab>\n ))}\n </TabList>\n </div>\n </DataPanel.Header>\n </Tabs>\n\n <div role=\"tabpanel\" aria-label={tabs.find(item => item.value === tab)?.name} className={BODY_CLASS}>\n {tab === 'details' && <DetailsTab traceId={traceId} span={span} />}\n {tab === 'input' && <InputTab span={span} view={view} onViewChange={setView} />}\n {tab === 'output' && <OutputTab span={span} view={view} onViewChange={setView} />}\n {tab === 'feedback' && feedbackTabSlot?.({ span, traceId, spanId })}\n </div>\n </>\n )}\n </section>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Header\n * ---------------------------------------------------------------------------------------------- */\n\nfunction getProcessorInput(span: SpanRecord) {\n if (getSpanSignal(span)) return undefined;\n const input = describeSpanInput(asCoreSpan(span));\n return input?.type === 'processor' ? input.value : undefined;\n}\n\n/** How many times a processor re-ran this step. Zero, the normal case, is not worth showing. */\nfunction getRetryCount(span: SpanRecord) {\n const data: Record<string, unknown> = getProcessorInput(span)?.data ?? {};\n const retryCount = data.retryCount;\n return typeof retryCount === 'number' && retryCount > 0 ? retryCount : 0;\n}\n\n/**\n * What ran and how long it took, on one row. Only the unusual is called out: a failure, a span still\n * running, or a processor that had to retry. A normal success says nothing extra.\n */\nfunction SpanIdentity({ span, headingId }: { span: SpanRecord; headingId: string }) {\n const durationMs = getSpanDurationMs(span.startedAt, span.endedAt);\n const retries = getRetryCount(span);\n\n return (\n <div className=\"flex min-w-0 flex-1 items-center gap-2 pl-1\">\n {/* Same type mark as the span's row in the trace tree, processors included. */}\n <SpanTypeBadge type={span.spanType ?? ''} spanUI={getSpanTypeUi(span.spanType ?? '')} />\n <Tooltip>\n <TooltipTrigger\n render={\n <Txt id={headingId} as=\"h2\" variant=\"card-title-strong\" className=\"min-w-0 truncate\">\n {getModelFacts(span).model ?? span.entityName ?? span.name}\n </Txt>\n }\n />\n <TooltipContent>{span.name}</TooltipContent>\n </Tooltip>\n <Tooltip>\n <TooltipTrigger\n render={\n <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 cursor-help tabular-nums\" tabIndex={0}>\n {durationMs == null ? 'Running' : formatDuration(durationMs)}\n </Txt>\n }\n />\n <TooltipContent>\n {durationMs == null ? 'Still running' : `Duration ${formatDurationPrecise(durationMs)}`}\n </TooltipContent>\n </Tooltip>\n {span.error != null && (\n <Badge size=\"xs\" variant=\"destructive\" className=\"shrink-0\">\n Failed\n </Badge>\n )}\n {retries > 0 && (\n <Badge size=\"xs\" variant=\"warning\" className=\"shrink-0 tabular-nums\">\n {retries === 1 ? 'Retried once' : `Retried ${retries}×`}\n </Badge>\n )}\n </div>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Tab bodies\n * ---------------------------------------------------------------------------------------------- */\n\ntype PayloadTabProps = { span: SpanRecord; view: PayloadView; onViewChange: (view: PayloadView) => void };\n\n/**\n * Processor input keys the preview leaves out: tools have their own section, retries are a header badge,\n * and the step number repeats the `step › N` parent the span sits under in the tree.\n */\nconst PROCESSOR_INPUT_HIDDEN = ['tools', 'toolChoice', 'retryCount', 'stepNumber'];\n\nfunction InputTab({ span, view, onViewChange }: PayloadTabProps) {\n const tools = getSpanTools(span);\n const processorInput = getProcessorInput(span);\n return (\n <Stack>\n <Payload\n label=\"Input\"\n raw={span.input}\n hasPreview={hasSpanInputPreview(span, PROCESSOR_INPUT_HIDDEN)}\n view={view}\n onViewChange={onViewChange}\n empty=\"No input recorded.\"\n >\n {processorInput ? (\n <SpanPayloadProcessor value={processorInput} hidden={PROCESSOR_INPUT_HIDDEN} />\n ) : (\n <SpanInputRenderer span={span} />\n )}\n </Payload>\n {tools && (\n <Section title=\"Available tools\" count={tools.tools.length}>\n <SpanToolList tools={tools.tools} />\n </Section>\n )}\n </Stack>\n );\n}\n\nfunction OutputTab({ span, view, onViewChange }: PayloadTabProps) {\n const output = getSpanOutputPayload(span);\n return (\n <Stack>\n <SpanProblem span={span} />\n {isTokenLimitExceeded(span) && (\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n )}\n {(output != null || span.error == null) && (\n <Payload\n label=\"Output\"\n raw={output}\n hasPreview={hasSpanOutputPreview(span)}\n view={view}\n onViewChange={onViewChange}\n empty=\"No output recorded.\"\n >\n <SpanOutputRenderer span={span} />\n </Payload>\n )}\n <ToolCalls span={span} />\n </Stack>\n );\n}\n\n/** Everything looked up rather than read, grouped the same way for every span type. */\nfunction DetailsTab({ traceId, span }: { traceId: string; span: SpanRecord }) {\n const { model, provider, finishReason, firstToken, speed } = getModelFacts(span);\n // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- Built SDK declarations type attributes.usage as unknown.\n const usage = span.attributes?.usage as UsageStats | undefined;\n const hasModel = Boolean(model || finishReason || firstToken || speed);\n const durationMs = getSpanDurationMs(span.startedAt, span.endedAt);\n const ids: Array<[string, string | null | undefined]> = [\n ['Span', span.spanId],\n ['Trace', traceId],\n ['Parent span', span.parentSpanId],\n ['Run', span.runId],\n ['Session', span.sessionId],\n ['Thread', span.threadId],\n ['Request', span.requestId],\n ['User', span.userId],\n ['Organization', span.organizationId],\n ['Experiment', span.experimentId],\n ];\n\n return (\n <Stack>\n <PromptSection span={span} />\n\n {hasModel && (\n <Section title=\"Model\">\n <DataKeysAndValues>\n {model && (\n <Row label=\"Model\">\n <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n {provider && <ProviderLogo providerId={provider} size=\"xs\" />}\n <span className=\"truncate\">{model}</span>\n </span>\n </Row>\n )}\n {provider && <Row label=\"Provider\">{provider}</Row>}\n {finishReason && <Row label=\"Finish reason\">{finishReason}</Row>}\n {firstToken && <Row label=\"First token\">{firstToken}</Row>}\n {speed && <Row label=\"Speed\">{speed}</Row>}\n </DataKeysAndValues>\n </Section>\n )}\n\n {usage && getTokenUsageRows(usage) && (\n <Section title=\"Token usage\">\n <SpanTokenUsage usage={usage} />\n </Section>\n )}\n\n <Section title=\"Timing\">\n <DataKeysAndValues>\n <Row label=\"Started\">{formatTimestampPrecise(span.startedAt)}</Row>\n {span.endedAt && <Row label=\"Ended\">{formatTimestampPrecise(span.endedAt)}</Row>}\n {durationMs != null && <Row label=\"Duration\">{formatDurationPrecise(durationMs)}</Row>}\n </DataKeysAndValues>\n </Section>\n\n <Section title=\"Identifiers\">\n <DataKeysAndValues>\n {ids.map(([label, value]) => (value ? <IdRow key={label} label={label} value={value} /> : null))}\n {span.tags && span.tags.length > 0 && (\n <Row label=\"Tags\">\n <span className=\"flex flex-wrap gap-1\">\n {span.tags.map(tag => (\n <Badge key={tag} size=\"xs\" variant=\"neutral\" emphasis=\"subtle\">\n {tag}\n </Badge>\n ))}\n </span>\n </Row>\n )}\n </DataKeysAndValues>\n </Section>\n\n <JsonSection title=\"Metadata\" value={span.metadata} />\n <JsonSection title=\"Attributes\" value={span.attributes} />\n </Stack>\n );\n}\n\n/**\n * What this span changed in the request, from its own recorded changes, as diff cards. Changes made\n * after the model answered get a short note: they can't have shaped this request. Nothing is shown\n * when the span changed nothing.\n */\nfunction PromptSection({ span }: { span: SpanRecord }) {\n if (getPromptChanges(span).length === 0) return null;\n\n return (\n <Section title=\"Prompt\">\n {runsAfterModel(span) && (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\">\n Ran after the model answered: its changes are kept for later turns and could not shape this request.\n </Txt>\n )}\n <SpanPromptChanges span={span} />\n </Section>\n );\n}\n\n/** Why the span failed or stopped, above whatever output it still produced. */\nfunction SpanProblem({ span }: { span: SpanRecord }) {\n const outcome = getSpanOutcome(span);\n if (outcome?.tone !== 'error' && outcome?.tone !== 'warning') return null;\n if (span.error != null) {\n return (\n <Notice variant=\"destructive\" icon={<CircleXIcon />} title={<h3>{outcome.headline}</h3>}>\n <SpanErrorDetails span={span} />\n </Notice>\n );\n }\n // A tripwire leaves no error: its reason is the only account of why the run stopped.\n const tripwire = describeProcessorPipeline(asCoreSpan(span))?.tripwireAbort;\n if (!tripwire) return <SpanOutcomeSummary outcome={outcome} showDetail />;\n return (\n <Notice variant=\"destructive\" icon={<CircleXIcon />} title={<h3>{outcome.headline}</h3>}>\n {tripwire.reason && <p className=\"break-words whitespace-pre-wrap\">{tripwire.reason}</p>}\n {tripwire.retry !== undefined && (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\">\n {tripwire.retry ? 'The model was asked to retry.' : 'Not retried.'}\n </Txt>\n )}\n </Notice>\n );\n}\n\nfunction ToolCalls({ span }: { span: SpanRecord }) {\n const toolCalls = useSpanToolCalls(span);\n if (toolCalls.length === 0) return null;\n return (\n <Section title=\"Tool calls\" count={toolCalls.length}>\n <SpanToolCallList toolCalls={toolCalls} />\n </Section>\n );\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Building blocks\n * ---------------------------------------------------------------------------------------------- */\n\nfunction Stack({ children }: { children: ReactNode }) {\n return <div className=\"grid min-w-0 content-start gap-4\">{children}</div>;\n}\n\n/**\n * A hairline and a small heading between groups, instead of a titled card around each one.\n * The hairline runs edge to edge: it bleeds through the body padding.\n */\nfunction Section({\n title,\n label = title,\n count,\n children,\n}: {\n title?: string;\n /** Names the region for assistive tech when the heading is rendered by the children. */\n label?: string;\n count?: number;\n children: ReactNode;\n}) {\n return (\n <section\n aria-label={label}\n className=\"-mx-3 grid min-w-0 gap-3 border-t border-surface-rim px-3 pt-4 first:border-t-0 first:pt-0\"\n >\n {title && (\n <DataPanel.SectionHeading>\n {title}\n {count != null && <span className=\"tabular-nums\"> · {count}</span>}\n </DataPanel.SectionHeading>\n )}\n {children}\n </section>\n );\n}\n\n/**\n * Stored JSON that is rarely why someone opened the span. The heading always shows; the block opens\n * folded on its root, and unfolding it shows the top-level keys with their values still folded, so it\n * collapses through the code block's own fold markers instead of a second disclosure around it.\n */\nfunction JsonSection({ title, value }: { title: string; value: unknown }) {\n if (value == null || (typeof value === 'object' && Object.keys(value).length === 0)) return null;\n return (\n <Section label={title}>\n <div className=\"flex min-w-0 items-center justify-between gap-2\">\n <DataPanel.SectionHeading>{title}</DataPanel.SectionHeading>\n <CopyButton\n content={JSON.stringify(value, null, 2)}\n copyMessage={`${title} copied`}\n tooltip={`Copy ${title.toLowerCase()} as JSON`}\n variant=\"ghost\"\n />\n </div>\n <SpanPayloadJson value={value} foldRoot foldNested />\n </Section>\n );\n}\n\n/**\n * The payload, unframed. Its Preview/JSON switch and copy sit on a small toolbar inside the tab,\n * right above what they act on, so the tab bar stays the same for every tab.\n */\nfunction Payload({\n label,\n raw,\n hasPreview,\n view,\n onViewChange,\n empty,\n children,\n}: {\n label: string;\n raw: unknown;\n hasPreview: boolean;\n view: PayloadView;\n onViewChange: (view: PayloadView) => void;\n empty: string;\n children: ReactNode;\n}) {\n if (raw == null) {\n return (\n <Txt variant=\"body-sm\" tone=\"muted\">\n {empty}\n </Txt>\n );\n }\n const shown = hasPreview ? view : 'raw';\n return (\n <div role=\"group\" aria-label={label} data-view={shown} className=\"grid min-w-0 gap-3\">\n <div className=\"flex items-center justify-end gap-1\">\n {hasPreview && (\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-pressed={view === 'raw'}\n tooltip={view === 'raw' ? `Show ${label.toLowerCase()} preview` : `Show ${label.toLowerCase()} as JSON`}\n onClick={() => onViewChange(view === 'raw' ? 'rich' : 'raw')}\n >\n {view === 'raw' ? <EyeIcon /> : <BracesIcon />}\n </Button>\n )}\n <CopyButton\n content={JSON.stringify(raw, null, 2)}\n copyMessage={`${label} copied`}\n tooltip={`Copy ${label.toLowerCase()} as JSON`}\n variant=\"ghost\"\n />\n </div>\n <div className=\"min-w-0 [&_[data-slot=message]]:my-0\">\n {shown === 'rich' ? children : <SpanPayloadJson value={raw} foldNested />}\n </div>\n </div>\n );\n}\n\nfunction Row({ label, children }: { label: string; children: ReactNode }) {\n return (\n <>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{children}</DataKeysAndValues.Value>\n </>\n );\n}\n\nfunction IdRow({ label, value }: { label: string; value: string }) {\n return (\n <>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip={`Copy ${label} id`} copyValue={value}>\n {value}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n );\n}\n"],"mappings":"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"}
|