npm - @mastra/playground-ui - Versions diffs - 66.0.0 → 66.0.1-alpha.0 - Mend

@mastra/playground-ui 66.0.0 → 66.0.1-alpha.0

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

Files changed (109) hide show

package/dist/domains/traces/components/span-data-panel-view.cjs.js CHANGED Viewed

@@ -7,21 +7,35 @@ const require_DataPanel = require("../../../DataPanel-Ded_OhrA.cjs");
 const require_tabs_content = require("../../../tabs-content-DJ-d-ICe.cjs");
 const require_DataKeysAndValues = require("../../../DataKeysAndValues-CHQcnHzv.cjs");
 const require_domains_traces_utils_span_utils = require("../utils/span-utils.cjs.js");
+const require_domains_traces_components_span_outcome = require("./span-outcome.cjs.js");
 const require_domains_traces_components_span_payload_span_payload_registry = require("./span-payload/span-payload-registry.cjs.js");
+const require_domains_traces_components_span_outcome_utils = require("./span-outcome.utils.cjs.js");
 const require_domains_traces_components_span_payload_span_input_renderers = require("./span-payload/span-input-renderers.cjs.js");
 const require_domains_traces_components_span_payload_span_output_renderers = require("./span-payload/span-output-renderers.cjs.js");
 const require_domains_traces_components_span_payload_span_error_renderer = require("./span-payload/span-error-renderer.cjs.js");
 const require_domains_traces_components_span_payload_span_payload_section = require("./span-payload/span-payload-section.cjs.js");
 const require_domains_traces_components_span_payload_span_processor_attributes = require("./span-payload/span-processor-attributes.cjs.js");
+const require_domains_traces_components_span_payload_span_processor_mutations = require("./span-payload/span-processor-mutations.cjs.js");
 const require_domains_traces_components_span_payload_span_tools_section = require("./span-payload/span-tools-section.cjs.js");
 const require_domains_traces_components_span_summary_description = require("./span-summary-description.cjs.js");
 const require_domains_traces_components_span_token_usage = require("./span-token-usage.cjs.js");
 const require_domains_traces_components_trace_id_button = require("./trace-id-button.cjs.js");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
-let _mastra_core_observability = require("@mastra/core/observability");
 // src/domains/traces/components/span-data-panel-view.tsx
 var BODY_CLASS = "min-h-0 flex-1 overflow-y-auto p-2";
+var LEAD = [
+	"error",
+	"changes",
+	"input",
+	"output"
+];
+var REST = [
+	"tools",
+	"metadata",
+	"attributes"
+];
 function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNext, onClose, onShowTrace, activeTab, onTabChange, feedbackTabSlot, feedbackTabBadge, isAnchor, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: require_utils.cn("flex min-h-0 flex-1 flex-col overflow-hidden", className),
@@ -71,8 +85,80 @@ function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNex
 	});
 }
 function SpanDataPanelContent({ span, traceId, spanId, activeTab, onTabChange, feedbackTabSlot, feedbackTabBadge, isAnchor }) {
-	const hasContext = (isAnchor ?? span.parentSpanId == null) && Boolean(span.tags?.length || span.sessionId || span.requestId || span.userId || span.organizationId || span.experimentId);
+	const isRoot = isAnchor ?? span.parentSpanId == null;
+	const hasContext = isRoot && Boolean(span.tags?.length || span.sessionId || span.requestId || span.userId || span.organizationId || span.experimentId);
+	const outcome = require_domains_traces_components_span_outcome_utils.getSpanOutcome(span);
+	const showOutcome = outcome != null && (!isRoot || outcome.tone === "error" || outcome.tone === "warning");
+	const outputPayload = require_domains_traces_components_span_payload_span_payload_registry.getSpanOutputPayload(span);
+	const evidence = outcome?.evidence === "output" && outputPayload == null ? void 0 : outcome?.evidence;
+	const toolCallsInOutcome = showOutcome && evidence === "toolCalls";
+	const changesInOutcome = showOutcome && evidence === "changes";
+	const errorInOutcome = showOutcome && evidence === "error";
+	const changes = require_domains_traces_components_span_outcome_utils.getSpanChanges(span);
+	const sections = {
+		error: span.error != null && !errorInOutcome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
+			title: "Error",
+			raw: span.error,
+			framed: false,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_error_renderer.SpanErrorRenderer, { span })
+		}),
+		changes: changes.length > 0 && !changesInOutcome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
+			title: "Changes",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeftRightIcon, {}),
+			raw: changes,
+			hasPreview: true,
+			emphasis: evidence === "changes",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_processor_mutations.SpanProcessorMutations, { span })
+		}),
+		output: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
+			title: "Output",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileOutputIcon, {}),
+			raw: outputPayload,
+			hasPreview: require_domains_traces_components_span_payload_span_payload_registry.hasSpanOutputPreview(span),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_output_renderers.SpanOutputRenderer, { span })
+		}),
+		input: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
+			title: "Input",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileInputIcon, {}),
+			raw: span.input,
+			hasPreview: require_domains_traces_components_span_payload_span_payload_registry.hasSpanInputPreview(span),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_input_renderers.SpanInputRenderer, { span })
+		}),
+		tools: toolCallsInOutcome ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_tools_section.SpanAvailableToolsSection, { span }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_tools_section.SpanToolsSection, { span }),
+		metadata: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadJsonSection, {
+			title: "Metadata",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BracesIcon, {}),
+			raw: span.metadata
+		}),
+		attributes: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadJsonSection, {
+			title: "Attributes",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BracesIcon, {}),
+			raw: span.attributes
+		})
+	};
 	const detailsBody = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		showOutcome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_outcome.SpanOutcomeSummary, {
+			outcome,
+			showDetail: !evidence,
+			className: "mb-3",
+			renderProof: errorInOutcome ? (headline) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
+				title: "Error",
+				heading: headline,
+				raw: span.error,
+				framed: false,
+				clip: false,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_error_renderer.SpanErrorDetails, { span })
+			}) : changesInOutcome ? (headline) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
+				title: "Changes",
+				heading: headline,
+				raw: changes,
+				hasPreview: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_processor_mutations.SpanProcessorMutations, { span })
+			}) : toolCallsInOutcome ? (headline) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_tools_section.SpanToolCallsSection, {
+				span,
+				heading: headline
+			}) : void 0
+		}),
 		require_domains_traces_utils_span_utils.isTokenLimitExceeded(span) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "mb-3",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Notice.Notice, {
@@ -81,77 +167,47 @@ function SpanDataPanelContent({ span, traceId, spanId, activeTab, onTabChange, f
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Notice.Notice.Message, { children: require_domains_traces_utils_span_utils.getTokenLimitMessage(span) })
 			})
 		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
-			title: "Error",
-			raw: span.error,
-			framed: false,
-			className: "mb-3",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_error_renderer.SpanErrorRenderer, { span })
-		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_token_usage.SpanModelSummary, {
 			span,
 			className: "mb-4"
 		}),
-		hasContext && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues, { children: (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			span.tags && span.tags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Tags" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Value, { children: span.tags.join(", ") })] }),
-			span.sessionId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Session Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy Session Id to clipboard",
-				copyValue: span.sessionId,
-				children: span.sessionId
-			})] }),
-			span.requestId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Request Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy Request Id to clipboard",
-				copyValue: span.requestId,
-				children: span.requestId
-			})] }),
-			span.userId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "User Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy User Id to clipboard",
-				copyValue: span.userId,
-				children: span.userId
-			})] }),
-			span.organizationId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Organization Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy Organization Id to clipboard",
-				copyValue: span.organizationId,
-				children: span.organizationId
-			})] }),
-			span.experimentId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Experiment Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy Experiment Id to clipboard",
-				copyValue: span.experimentId,
-				children: span.experimentId
-			})] })
-		] }) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_processor_attributes.SpanProcessorAttributes, {
+			span,
+			className: "mb-4"
+		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_utils.cn("grid gap-4", hasContext && "mt-4"),
+			className: "grid gap-4",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
-					title: "Input",
-					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileInputIcon, {}),
-					raw: span.input,
-					hasPreview: require_domains_traces_components_span_payload_span_payload_registry.hasSpanInputPreview(span),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_input_renderers.SpanInputRenderer, { span })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
-					title: "Output",
-					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileOutputIcon, {}),
-					raw: require_domains_traces_components_span_payload_span_payload_registry.getSpanOutputPayload(span),
-					hasPreview: (0, _mastra_core_observability.describeSpanOutput)(require_domains_traces_components_span_payload_span_payload_registry.asCoreSpan(span))?.type !== "json",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_output_renderers.SpanOutputRenderer, { span })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_tools_section.SpanToolsSection, { span }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
-					title: "Metadata",
-					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BracesIcon, {}),
-					raw: span.metadata,
-					hasPreview: false,
-					children: null
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_section.SpanPayloadSection, {
-					title: "Attributes",
-					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BracesIcon, {}),
-					raw: span.attributes,
-					hasPreview: (0, _mastra_core_observability.describeProcessorPipeline)(require_domains_traces_components_span_payload_span_payload_registry.asCoreSpan(span)) !== void 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_processor_attributes.SpanProcessorAttributes, { span })
-				})
+				LEAD.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: sections[section] }, section)),
+				hasContext && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues, { children: isRoot && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					span.tags && span.tags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Tags" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Value, { children: span.tags.join(", ") })] }),
+					span.sessionId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Session Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy Session Id to clipboard",
+						copyValue: span.sessionId,
+						children: span.sessionId
+					})] }),
+					span.requestId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Request Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy Request Id to clipboard",
+						copyValue: span.requestId,
+						children: span.requestId
+					})] }),
+					span.userId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "User Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy User Id to clipboard",
+						copyValue: span.userId,
+						children: span.userId
+					})] }),
+					span.organizationId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Organization Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy Organization Id to clipboard",
+						copyValue: span.organizationId,
+						children: span.organizationId
+					})] }),
+					span.experimentId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.Key, { children: "Experiment Id" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy Experiment Id to clipboard",
+						copyValue: span.experimentId,
+						children: span.experimentId
+					})] })
+				] }) }),
+				REST.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: sections[section] }, section))
 			]
 		})
 	] });

package/dist/domains/traces/components/span-data-panel-view.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-data-panel-view.cjs.js","names":["cn","DataPanel","TraceIdButton","SpanRunId","SpanSummaryDescription","Button","ExternalLinkIcon","_Fragment","isTokenLimitExceeded","Notice","getTokenLimitMessage","SpanPayloadSection","SpanErrorRenderer","SpanModelSummary","DataKeysAndValues","FileInputIcon","hasSpanInputPreview","SpanInputRenderer","FileOutputIcon","getSpanOutputPayload","describeSpanOutput","asCoreSpan","SpanOutputRenderer","SpanToolsSection","BracesIcon","describeProcessorPipeline","SpanProcessorAttributes","Tabs","TabList","Tab","TabContent"],"sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import { describeProcessorPipeline, describeSpanOutput } from '@mastra/core/observability';\nimport { BracesIcon, ExternalLinkIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord } from '../types';\nimport { getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport {\n SpanErrorRenderer,\n SpanInputRenderer,\n getSpanOutputPayload,\n hasSpanInputPreview,\n SpanOutputRenderer,\n SpanPayloadSection,\n SpanProcessorAttributes,\n} from './span-payload';\nimport { asCoreSpan } from './span-payload/span-payload-registry';\nimport { SpanToolsSection } from './span-payload/span-tools-section';\nimport { SpanRunId, SpanSummaryDescription } from './span-summary-description';\nimport { SpanModelSummary } from './span-token-usage';\nimport { TraceIdButton } from './trace-id-button';\nimport { Button } from '@/ds/components/Button';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\n// Mirrors `DataPanel.Content` padding without requiring the Drawer root (this view also renders standalone).\nconst BODY_CLASS = 'min-h-0 flex-1 overflow-y-auto p-2';\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 activeTab?: string;\n onTabChange?: (tab: string) => 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 /\n Whether this span is the displayed root of the current view (trace root or\n * branch anchor). Controls visibility of trace-level metadata fields. Defaults\n * to `span.parentSpanId == null` (trace case) when omitted.\n /\n isAnchor?: boolean;\n /* Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). /\n className?: string;\n}\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 isAnchor,\n className,\n}: SpanDataPanelViewProps) {\n // Not a DataPanel: this is the span column rendered inside `TraceDataPanelView`,\n // which already provides the panel chrome.\n return (\n <section className={cn('flex min-h-0 flex-1 flex-col overflow-hidden', className)}>\n <DataPanel.Header>\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n Span\n <TraceIdButton id={spanId} maxLength={6} ellipsis={false} />\n </DataPanel.Heading>\n {span?.runId && <SpanRunId runId={span.runId} />}\n {span && <SpanSummaryDescription span={span} />}\n </DataPanel.HeaderContent>\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 <SpanDataPanelContent\n span={span}\n traceId={traceId}\n spanId={spanId}\n activeTab={activeTab}\n onTabChange={onTabChange}\n feedbackTabSlot={feedbackTabSlot}\n feedbackTabBadge={feedbackTabBadge}\n isAnchor={isAnchor}\n />\n )}\n </section>\n );\n}\n\nfunction SpanDataPanelContent({\n span,\n traceId,\n spanId,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n}: {\n span: SpanRecord;\n traceId: string;\n spanId: string;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n feedbackTabBadge?: ReactNode;\n isAnchor?: boolean;\n}) {\n const hasContext =\n (isAnchor ?? span.parentSpanId == null) &&\n Boolean(\n span.tags?.length \|\| span.sessionId \|\| span.requestId \|\| span.userId \|\| span.organizationId \|\| span.experimentId,\n );\n\n const detailsBody = (\n <>\n {isTokenLimitExceeded(span) && (\n <div className=\"mb-3\">\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n </div>\n )}\n\n <SpanPayloadSection title=\"Error\" raw={span.error} framed={false} className=\"mb-3\">\n <SpanErrorRenderer span={span} />\n </SpanPayloadSection>\n\n <SpanModelSummary span={span} className=\"mb-4\" />\n\n {hasContext && (\n <DataKeysAndValues>\n {/ Anchor-only: rich trace-context fields. Live on the full SpanRecord, not on the\n * lightweight payload, so they only have values once the full span is loaded. */}\n {(isAnchor ?? span.parentSpanId == null) && (\n <>\n {span.tags && span.tags.length > 0 && (\n <>\n <DataKeysAndValues.Key>Tags</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.tags.join(', ')}</DataKeysAndValues.Value>\n </>\n )}\n {span.sessionId && (\n <>\n <DataKeysAndValues.Key>Session Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Session Id to clipboard\"\n copyValue={span.sessionId}\n >\n {span.sessionId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.requestId && (\n <>\n <DataKeysAndValues.Key>Request Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Request Id to clipboard\"\n copyValue={span.requestId}\n >\n {span.requestId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.userId && (\n <>\n <DataKeysAndValues.Key>User Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy User Id to clipboard\" copyValue={span.userId}>\n {span.userId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.organizationId && (\n <>\n <DataKeysAndValues.Key>Organization Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Organization Id to clipboard\"\n copyValue={span.organizationId}\n >\n {span.organizationId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.experimentId && (\n <>\n <DataKeysAndValues.Key>Experiment Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Experiment Id to clipboard\"\n copyValue={span.experimentId}\n >\n {span.experimentId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n </>\n )}\n </DataKeysAndValues>\n )}\n\n <div className={cn('grid gap-4', hasContext && 'mt-4')}>\n <SpanPayloadSection\n title=\"Input\"\n icon={<FileInputIcon />}\n raw={span.input}\n hasPreview={hasSpanInputPreview(span)}\n >\n <SpanInputRenderer span={span} />\n </SpanPayloadSection>\n <SpanPayloadSection\n title=\"Output\"\n icon={<FileOutputIcon />}\n raw={getSpanOutputPayload(span)}\n hasPreview={describeSpanOutput(asCoreSpan(span))?.type !== 'json'}\n >\n <SpanOutputRenderer span={span} />\n </SpanPayloadSection>\n <SpanToolsSection span={span} />\n <SpanPayloadSection title=\"Metadata\" icon={<BracesIcon />} raw={span.metadata} hasPreview={false}>\n {null}\n </SpanPayloadSection>\n <SpanPayloadSection\n title=\"Attributes\"\n icon={<BracesIcon />}\n raw={span.attributes}\n hasPreview={describeProcessorPipeline(asCoreSpan(span)) !== undefined}\n >\n <SpanProcessorAttributes span={span} />\n </SpanPayloadSection>\n </div>\n </>\n );\n\n // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n if (!feedbackTabSlot) {\n return <div className={BODY_CLASS}>{detailsBody}</div>;\n }\n\n // Same chrome as the trace column: tab list in a header row, content scrolling beneath it.\n return (\n <Tabs\n defaultTab=\"details\"\n value={activeTab}\n onValueChange={onTabChange}\n className=\"grid min-h-0 flex-1 grid-rows-[auto_1fr]\"\n >\n <DataPanel.Header>\n <TabList variant=\"pill-ghost\" size=\"sm\">\n <Tab value=\"details\">Details</Tab>\n <Tab value=\"feedback\">Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}</Tab>\n </TabList>\n </DataPanel.Header>\n\n <TabContent value=\"details\" flush>\n <div className={BODY_CLASS}>{detailsBody}</div>\n </TabContent>\n <TabContent value=\"feedback\" flush>\n <div className={BODY_CLASS}>{feedbackTabSlot({ span, traceId, spanId })}</div>\n </TabContent>\n </Tabs>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"span-data-panel-view.cjs.js","names":["cn","DataPanel","TraceIdButton","SpanRunId","SpanSummaryDescription","Button","ExternalLinkIcon","getSpanOutcome","getSpanOutputPayload","getSpanChanges","SpanPayloadSection","SpanErrorRenderer","ArrowLeftRightIcon","SpanProcessorMutations","FileOutputIcon","hasSpanOutputPreview","SpanOutputRenderer","FileInputIcon","hasSpanInputPreview","SpanInputRenderer","SpanAvailableToolsSection","SpanToolsSection","SpanPayloadJsonSection","BracesIcon","_Fragment","SpanOutcomeSummary","SpanErrorDetails","SpanToolCallsSection","isTokenLimitExceeded","Notice","getTokenLimitMessage","SpanModelSummary","SpanProcessorAttributes","Fragment","DataKeysAndValues","Tabs","TabList","Tab","TabContent"],"sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import { ArrowLeftRightIcon, BracesIcon, ExternalLinkIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport { Fragment } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord } from '../types';\nimport { getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { SpanOutcomeSummary } from './span-outcome';\nimport { getSpanChanges, getSpanOutcome } from './span-outcome.utils';\nimport {\n SpanErrorDetails,\n SpanErrorRenderer,\n SpanInputRenderer,\n getSpanOutputPayload,\n hasSpanInputPreview,\n hasSpanOutputPreview,\n SpanOutputRenderer,\n SpanPayloadSection,\n SpanPayloadJsonSection,\n SpanProcessorAttributes,\n SpanProcessorMutations,\n} from './span-payload';\nimport { SpanAvailableToolsSection, SpanToolCallsSection, SpanToolsSection } from './span-payload/span-tools-section';\nimport { SpanRunId, SpanSummaryDescription } from './span-summary-description';\nimport { SpanModelSummary } from './span-token-usage';\nimport { TraceIdButton } from './trace-id-button';\nimport { Button } from '@/ds/components/Button';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\n// Mirrors `DataPanel.Content` padding without requiring the Drawer root (this view also renders standalone).\nconst BODY_CLASS = 'min-h-0 flex-1 overflow-y-auto p-2';\n\ntype SpanSection = 'error' \| 'changes' \| 'output' \| 'input' \| 'tools' \| 'metadata' \| 'attributes';\n// Every span reads the same way: how it failed, what it changed, what it received, what it returned,\n// then the rest, with the raw metadata and attributes last.\nconst LEAD: SpanSection[] = ['error', 'changes', 'input', 'output'];\nconst REST: SpanSection[] = ['tools', 'metadata', 'attributes'];\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 activeTab?: string;\n onTabChange?: (tab: string) => 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 /\n Whether this span is the displayed root of the current view (trace root or\n * branch anchor). Controls visibility of trace-level metadata fields. Defaults\n * to `span.parentSpanId == null` (trace case) when omitted.\n /\n isAnchor?: boolean;\n /* Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). /\n className?: string;\n}\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 isAnchor,\n className,\n}: SpanDataPanelViewProps) {\n // Not a DataPanel: this is the span column rendered inside `TraceDataPanelView`,\n // which already provides the panel chrome.\n return (\n <section className={cn('flex min-h-0 flex-1 flex-col overflow-hidden', className)}>\n <DataPanel.Header>\n <DataPanel.HeaderContent>\n <DataPanel.Heading>\n Span\n <TraceIdButton id={spanId} maxLength={6} ellipsis={false} />\n </DataPanel.Heading>\n {span?.runId && <SpanRunId runId={span.runId} />}\n {span && <SpanSummaryDescription span={span} />}\n </DataPanel.HeaderContent>\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 <SpanDataPanelContent\n span={span}\n traceId={traceId}\n spanId={spanId}\n activeTab={activeTab}\n onTabChange={onTabChange}\n feedbackTabSlot={feedbackTabSlot}\n feedbackTabBadge={feedbackTabBadge}\n isAnchor={isAnchor}\n />\n )}\n </section>\n );\n}\n\nfunction SpanDataPanelContent({\n span,\n traceId,\n spanId,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n}: {\n span: SpanRecord;\n traceId: string;\n spanId: string;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n feedbackTabBadge?: ReactNode;\n isAnchor?: boolean;\n}) {\n const isRoot = isAnchor ?? span.parentSpanId == null;\n const hasContext =\n isRoot &&\n Boolean(\n span.tags?.length \|\| span.sessionId \|\| span.requestId \|\| span.userId \|\| span.organizationId \|\| span.experimentId,\n );\n const outcome = getSpanOutcome(span);\n // The root span's input and output already tell its story; only a failed or stopped run needs a summary on top.\n const showOutcome = outcome != null && (!isRoot \|\| outcome.tone === 'error' \|\| outcome.tone === 'warning');\n const outputPayload = getSpanOutputPayload(span);\n const evidence = outcome?.evidence === 'output' && outputPayload == null ? undefined : outcome?.evidence;\n const toolCallsInOutcome = showOutcome && evidence === 'toolCalls';\n const changesInOutcome = showOutcome && evidence === 'changes';\n const errorInOutcome = showOutcome && evidence === 'error';\n const changes = getSpanChanges(span);\n\n const sections: Record<SpanSection, ReactNode> = {\n // A failed span says so in the summary on top, with its error; only spans with no summary need the section.\n error: span.error != null && !errorInOutcome && (\n <SpanPayloadSection title=\"Error\" raw={span.error} framed={false}>\n <SpanErrorRenderer span={span} />\n </SpanPayloadSection>\n ),\n // A failed or stopped processor still shows what it changed before it stopped.\n changes: changes.length > 0 && !changesInOutcome && (\n <SpanPayloadSection\n title=\"Changes\"\n icon={<ArrowLeftRightIcon />}\n raw={changes}\n hasPreview\n emphasis={evidence === 'changes'}\n >\n <SpanProcessorMutations span={span} />\n </SpanPayloadSection>\n ),\n output: (\n <SpanPayloadSection\n title=\"Output\"\n icon={<FileOutputIcon />}\n raw={outputPayload}\n hasPreview={hasSpanOutputPreview(span)}\n >\n <SpanOutputRenderer span={span} />\n </SpanPayloadSection>\n ),\n input: (\n <SpanPayloadSection\n title=\"Input\"\n icon={<FileInputIcon />}\n raw={span.input}\n hasPreview={hasSpanInputPreview(span)}\n >\n <SpanInputRenderer span={span} />\n </SpanPayloadSection>\n ),\n // The tool calls already sit in the summary; the tools the model could pick from still read here.\n tools: toolCallsInOutcome ? <SpanAvailableToolsSection span={span} /> : <SpanToolsSection span={span} />,\n metadata: <SpanPayloadJsonSection title=\"Metadata\" icon={<BracesIcon />} raw={span.metadata} />,\n attributes: <SpanPayloadJsonSection title=\"Attributes\" icon={<BracesIcon />} raw={span.attributes} />,\n };\n\n const detailsBody = (\n <>\n {showOutcome && (\n <SpanOutcomeSummary\n outcome={outcome}\n showDetail={!evidence}\n className=\"mb-3\"\n // The error, changes or tool calls prove the headline, so they sit in the notice under it rather than in a section of their own.\n renderProof={\n errorInOutcome\n ? headline => (\n <SpanPayloadSection title=\"Error\" heading={headline} raw={span.error} framed={false} clip={false}>\n <SpanErrorDetails span={span} />\n </SpanPayloadSection>\n )\n : changesInOutcome\n ? headline => (\n <SpanPayloadSection title=\"Changes\" heading={headline} raw={changes} hasPreview>\n <SpanProcessorMutations span={span} />\n </SpanPayloadSection>\n )\n : toolCallsInOutcome\n ? headline => <SpanToolCallsSection span={span} heading={headline} />\n : undefined\n }\n />\n )}\n\n {isTokenLimitExceeded(span) && (\n <div className=\"mb-3\">\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n </div>\n )}\n\n <SpanModelSummary span={span} className=\"mb-4\" />\n <SpanProcessorAttributes span={span} className=\"mb-4\" />\n\n <div className=\"grid gap-4\">\n {LEAD.map(section => (\n <Fragment key={section}>{sections[section]}</Fragment>\n ))}\n {hasContext && (\n <DataKeysAndValues>\n {/ Anchor-only: rich trace-context fields. Live on the full SpanRecord, not on the\n * lightweight payload, so they only have values once the full span is loaded. */}\n {isRoot && (\n <>\n {span.tags && span.tags.length > 0 && (\n <>\n <DataKeysAndValues.Key>Tags</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.tags.join(', ')}</DataKeysAndValues.Value>\n </>\n )}\n {span.sessionId && (\n <>\n <DataKeysAndValues.Key>Session Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Session Id to clipboard\"\n copyValue={span.sessionId}\n >\n {span.sessionId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.requestId && (\n <>\n <DataKeysAndValues.Key>Request Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Request Id to clipboard\"\n copyValue={span.requestId}\n >\n {span.requestId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.userId && (\n <>\n <DataKeysAndValues.Key>User Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy User Id to clipboard\" copyValue={span.userId}>\n {span.userId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.organizationId && (\n <>\n <DataKeysAndValues.Key>Organization Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Organization Id to clipboard\"\n copyValue={span.organizationId}\n >\n {span.organizationId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.experimentId && (\n <>\n <DataKeysAndValues.Key>Experiment Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Experiment Id to clipboard\"\n copyValue={span.experimentId}\n >\n {span.experimentId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n </>\n )}\n </DataKeysAndValues>\n )}\n {REST.map(section => (\n <Fragment key={section}>{sections[section]}</Fragment>\n ))}\n </div>\n </>\n );\n\n // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n if (!feedbackTabSlot) {\n return <div className={BODY_CLASS}>{detailsBody}</div>;\n }\n\n // Same chrome as the trace column: tab list in a header row, content scrolling beneath it.\n return (\n <Tabs\n defaultTab=\"details\"\n value={activeTab}\n onValueChange={onTabChange}\n className=\"grid min-h-0 flex-1 grid-rows-[auto_1fr]\"\n >\n <DataPanel.Header>\n <TabList variant=\"pill-ghost\" size=\"sm\">\n <Tab value=\"details\">Details</Tab>\n <Tab value=\"feedback\">Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}</Tab>\n </TabList>\n </DataPanel.Header>\n\n <TabContent value=\"details\" flush>\n <div className={BODY_CLASS}>{detailsBody}</div>\n </TabContent>\n <TabContent value=\"feedback\" flush>\n <div className={BODY_CLASS}>{feedbackTabSlot({ span, traceId, spanId })}</div>\n </TabContent>\n </Tabs>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAM,aAAa;AAKnB,IAAM,OAAsB;CAAC;CAAS;CAAW;CAAS;AAAQ;AAClE,IAAM,OAAsB;CAAC;CAAS;CAAY;AAAY;AAqC9D,SAAgB,kBAAkB,EAChC,SACA,QACA,MACA,WACA,YACA,QACA,SACA,aACA,WACA,aACA,iBACA,kBACA,UACA,aACyB;CAGzB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,WAAWA,cAAAA,GAAG,gDAAgD,SAAS;EAAhF,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,kBAAAA,UAAU,QAAX,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,kBAAAA,UAAU,eAAX,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,kBAAAA,UAAU,SAAX,EAAA,UAAA,CAAmB,QAEjB,iBAAA,GAAA,kBAAA,IAAA,CAACC,kDAAAA,eAAD;IAAe,IAAI;IAAQ,WAAW;IAAG,UAAU;GAAQ,CAAA,CAC1C,EAAA,CAAA;GAClB,MAAM,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,2DAAAA,WAAD,EAAW,OAAO,KAAK,MAAQ,CAAA;GAC9C,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACC,2DAAAA,wBAAD,EAA8B,KAAO,CAAA;EACvB,EAAA,CAAA,GACzB,iBAAA,GAAA,kBAAA,KAAA,CAACH,kBAAAA,UAAU,eAAX,EAAA,UAAA;GACG,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACI,eAAAA,QAAD;IACE,MAAK;IACL,SAAQ;IACR,cAAW;IACX,SAAQ;IACR,WAAU;IACV,eAAe,YAAY;KAAE;KAAS;IAAO,CAAC;IAE9C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,kBAAD,CAAmB,CAAA;GACb,CAAA;IAER,cAAc,WACd,iBAAA,GAAA,kBAAA,IAAA,CAACL,kBAAAA,UAAU,aAAX;IACc;IACJ;IACR,eAAc;IACd,WAAU;GACX,CAAA;GAEF,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,UAAU,aAAX;IAAuB,MAAK;IAAI,SAAS;IAAS,OAAM;IAAa,SAAQ;GAAc,CAAA;EAChF,EAAA,CAAA,CACT,EAAA,CAAA,GAEjB,YACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,UAAU,aAAX,EAAA,UAAuB,0BAA8C,CAAA,IACnE,CAAC,OACH,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,UAAU,QAAX,EAAA,UAAkB,kBAAiC,CAAA,IAEnD,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;GACQ;GACG;GACD;GACG;GACE;GACI;GACC;GACR;EACX,CAAA,CAEI;;AAEb;AAEA,SAAS,qBAAqB,EAC5B,MACA,SACA,QACA,WACA,aACA,iBACA,kBACA,YAUC;CACD,MAAM,SAAS,YAAY,KAAK,gBAAgB;CAChD,MAAM,aACJ,UACA,QACE,KAAK,MAAM,UAAU,KAAK,aAAa,KAAK,aAAa,KAAK,UAAU,KAAK,kBAAkB,KAAK,YACtG;CACF,MAAM,UAAUM,qDAAAA,eAAe,IAAI;CAEnC,MAAM,cAAc,WAAW,SAAS,CAAC,UAAU,QAAQ,SAAS,WAAW,QAAQ,SAAS;CAChG,MAAM,gBAAgBC,qEAAAA,qBAAqB,IAAI;CAC/C,MAAM,WAAW,SAAS,aAAa,YAAY,iBAAiB,OAAO,KAAA,IAAY,SAAS;CAChG,MAAM,qBAAqB,eAAe,aAAa;CACvD,MAAM,mBAAmB,eAAe,aAAa;CACrD,MAAM,iBAAiB,eAAe,aAAa;CACnD,MAAM,UAAUC,qDAAAA,eAAe,IAAI;CAEnC,MAAM,WAA2C;EAE/C,OAAO,KAAK,SAAS,QAAQ,CAAC,kBAC5B,iBAAA,GAAA,kBAAA,IAAA,CAACC,oEAAAA,oBAAD;GAAoB,OAAM;GAAQ,KAAK,KAAK;GAAO,QAAQ;GACzD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mEAAAA,mBAAD,EAAyB,KAAO,CAAA;EACd,CAAA;EAGtB,SAAS,QAAQ,SAAS,KAAK,CAAC,oBAC9B,iBAAA,GAAA,kBAAA,IAAA,CAACD,oEAAAA,oBAAD;GACE,OAAM;GACN,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,oBAAD,CAAqB,CAAA;GAC3B,KAAK;GACL,YAAA;GACA,UAAU,aAAa;GAEvB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,wEAAAA,wBAAD,EAA8B,KAAO,CAAA;EACnB,CAAA;EAEtB,QACE,iBAAA,GAAA,kBAAA,IAAA,CAACH,oEAAAA,oBAAD;GACE,OAAM;GACN,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACI,aAAAA,gBAAD,CAAiB,CAAA;GACvB,KAAK;GACL,YAAYC,qEAAAA,qBAAqB,IAAI;GAErC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,qEAAAA,oBAAD,EAA0B,KAAO,CAAA;EACf,CAAA;EAEtB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACN,oEAAAA,oBAAD;GACE,OAAM;GACN,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACO,aAAAA,eAAD,CAAgB,CAAA;GACtB,KAAK,KAAK;GACV,YAAYC,qEAAAA,oBAAoB,IAAI;GAEpC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oEAAAA,mBAAD,EAAyB,KAAO,CAAA;EACd,CAAA;EAGtB,OAAO,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAACC,kEAAAA,2BAAD,EAAiC,KAAO,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,kEAAAA,kBAAD,EAAwB,KAAO,CAAA;EACvG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,oEAAAA,wBAAD;GAAwB,OAAM;GAAW,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,YAAD,CAAa,CAAA;GAAG,KAAK,KAAK;EAAW,CAAA;EAC9F,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACD,oEAAAA,wBAAD;GAAwB,OAAM;GAAa,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,YAAD,CAAa,CAAA;GAAG,KAAK,KAAK;EAAa,CAAA;CACtG;CAEA,MAAM,cACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA;EACG,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,+CAAAA,oBAAD;GACW;GACT,YAAY,CAAC;GACb,WAAU;GAEV,aACE,kBACI,aACE,iBAAA,GAAA,kBAAA,IAAA,CAACf,oEAAAA,oBAAD;IAAoB,OAAM;IAAQ,SAAS;IAAU,KAAK,KAAK;IAAO,QAAQ;IAAO,MAAM;IACzF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACgB,mEAAAA,kBAAD,EAAwB,KAAO,CAAA;GACb,CAAA,IAEtB,oBACE,aACE,iBAAA,GAAA,kBAAA,IAAA,CAAChB,oEAAAA,oBAAD;IAAoB,OAAM;IAAU,SAAS;IAAU,KAAK;IAAS,YAAA;IACnE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACG,wEAAAA,wBAAD,EAA8B,KAAO,CAAA;GACnB,CAAA,IAEtB,sBACE,aAAY,iBAAA,GAAA,kBAAA,IAAA,CAACc,kEAAAA,sBAAD;IAA4B;IAAM,SAAS;GAAW,CAAA,IAClE,KAAA;EAEX,CAAA;EAGFC,wCAAAA,qBAAqB,IAAI,KACxB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;IAAQ,SAAQ;IAAU,OAAM;IAC9B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,OAAO,SAAR,EAAA,UAAiBC,wCAAAA,qBAAqB,IAAI,EAAkB,CAAA;GACtD,CAAA;EACL,CAAA;EAGP,iBAAA,GAAA,kBAAA,IAAA,CAACC,mDAAAA,kBAAD;GAAwB;GAAM,WAAU;EAAQ,CAAA;EAChD,iBAAA,GAAA,kBAAA,IAAA,CAACC,yEAAAA,yBAAD;GAA+B;GAAM,WAAU;EAAQ,CAAA;EAEvD,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,KAAK,KAAI,YACR,iBAAA,GAAA,kBAAA,IAAA,CAACC,MAAAA,UAAD,EAAA,UAAyB,SAAS,SAAmB,GAAtC,OAAsC,CACtD;IACA,cACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD,EAAA,UAGG,UACC,iBAAA,GAAA,kBAAA,KAAA,CAAAV,kBAAAA,UAAA,EAAA,UAAA;KACG,KAAK,QAAQ,KAAK,KAAK,SAAS,KAC/B,iBAAA,GAAA,kBAAA,KAAA,CAAAA,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACU,0BAAAA,kBAAkB,KAAnB,EAAA,UAAuB,OAA2B,CAAA,GAClD,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,OAAnB,EAAA,UAA0B,KAAK,KAAK,KAAK,IAAI,EAA2B,CAAA,CACxE,EAAA,CAAA;KAEH,KAAK,aACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAV,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACU,0BAAAA,kBAAkB,KAAnB,EAAA,UAAuB,aAAiC,CAAA,GACxD,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,kBAAnB;MACE,aAAY;MACZ,WAAW,KAAK;MAEf,UAAA,KAAK;KAC4B,CAAA,CACpC,EAAA,CAAA;KAEH,KAAK,aACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAV,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACU,0BAAAA,kBAAkB,KAAnB,EAAA,UAAuB,aAAiC,CAAA,GACxD,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,kBAAnB;MACE,aAAY;MACZ,WAAW,KAAK;MAEf,UAAA,KAAK;KAC4B,CAAA,CACpC,EAAA,CAAA;KAEH,KAAK,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAV,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACU,0BAAAA,kBAAkB,KAAnB,EAAA,UAAuB,UAA8B,CAAA,GACrD,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,kBAAnB;MAAoC,aAAY;MAA4B,WAAW,KAAK;MACzF,UAAA,KAAK;KAC4B,CAAA,CACpC,EAAA,CAAA;KAEH,KAAK,kBACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAV,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACU,0BAAAA,kBAAkB,KAAnB,EAAA,UAAuB,kBAAsC,CAAA,GAC7D,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,kBAAnB;MACE,aAAY;MACZ,WAAW,KAAK;MAEf,UAAA,KAAK;KAC4B,CAAA,CACpC,EAAA,CAAA;KAEH,KAAK,gBACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAV,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACU,0BAAAA,kBAAkB,KAAnB,EAAA,UAAuB,gBAAoC,CAAA,GAC3D,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,kBAAnB;MACE,aAAY;MACZ,WAAW,KAAK;MAEf,UAAA,KAAK;KAC4B,CAAA,CACpC,EAAA,CAAA;IAEJ,EAAA,CAAA,EAEa,CAAA;IAEpB,KAAK,KAAI,YACR,iBAAA,GAAA,kBAAA,IAAA,CAACD,MAAAA,UAAD,EAAA,UAAyB,SAAS,SAAmB,GAAtC,OAAsC,CACtD;GACE;;CACL,EAAA,CAAA;CAIJ,IAAI,CAAC,iBACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW;EAAa,UAAA;CAAiB,CAAA;CAIvD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACE,iBAAAA,MAAD;EACE,YAAW;EACX,OAAO;EACP,eAAe;EACf,WAAU;EAJZ,UAAA;GAME,iBAAA,GAAA,kBAAA,IAAA,CAAClC,kBAAAA,UAAU,QAAX,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAACmC,iBAAAA,SAAD;IAAS,SAAQ;IAAa,MAAK;IAAnC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,KAAD;KAAK,OAAM;KAAU,UAAA;IAAY,CAAA,GACjC,iBAAA,GAAA,kBAAA,KAAA,CAACA,iBAAAA,KAAD;KAAK,OAAM;KAAX,UAAA,CAAsB,YAAS,oBAAoB,QAAQ,iBAAA,GAAA,kBAAA,KAAA,CAAAb,kBAAAA,UAAA,EAAA,UAAA;MAAE;MAAG;MAAiB;KAAG,EAAA,CAAA,CAAO;IACpF,CAAA,CAAA;GACO,CAAA,EAAA,CAAA;GAElB,iBAAA,GAAA,kBAAA,IAAA,CAACc,qBAAAA,YAAD;IAAY,OAAM;IAAU,OAAA;IAC1B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAW;KAAa,UAAA;IAAiB,CAAA;GACpC,CAAA;GACZ,iBAAA,GAAA,kBAAA,IAAA,CAACA,qBAAAA,YAAD;IAAY,OAAM;IAAW,OAAA;IAC3B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAW;KAAa,UAAA,gBAAgB;MAAE;MAAM;MAAS;KAAO,CAAC;IAAO,CAAA;GACnE,CAAA;EACR;;AAEV"}

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

@@ -6,21 +6,35 @@ import { t as DataPanel } from "../../../DataPanel-CfLkwH2X.js";
 import { t as TabContent } from "../../../tabs-content-CDCk47md.js";
 import { t as DataKeysAndValues } from "../../../DataKeysAndValues-B2jquIjh.js";
 import { getTokenLimitMessage, isTokenLimitExceeded } from "../utils/span-utils.es.js";
-import { asCoreSpan, getSpanOutputPayload, hasSpanInputPreview } from "./span-payload/span-payload-registry.es.js";
+import { SpanOutcomeSummary } from "./span-outcome.es.js";
+import { getSpanOutputPayload, hasSpanInputPreview, hasSpanOutputPreview } from "./span-payload/span-payload-registry.es.js";
+import { getSpanChanges, getSpanOutcome } from "./span-outcome.utils.es.js";
 import { SpanInputRenderer } from "./span-payload/span-input-renderers.es.js";
 import { SpanOutputRenderer } from "./span-payload/span-output-renderers.es.js";
-import { SpanErrorRenderer } from "./span-payload/span-error-renderer.es.js";
-import { SpanPayloadSection } from "./span-payload/span-payload-section.es.js";
+import { SpanErrorDetails, SpanErrorRenderer } from "./span-payload/span-error-renderer.es.js";
+import { SpanPayloadJsonSection, SpanPayloadSection } from "./span-payload/span-payload-section.es.js";
 import { SpanProcessorAttributes } from "./span-payload/span-processor-attributes.es.js";
-import { SpanToolsSection } from "./span-payload/span-tools-section.es.js";
+import { SpanProcessorMutations } from "./span-payload/span-processor-mutations.es.js";
+import { SpanAvailableToolsSection, SpanToolCallsSection, SpanToolsSection } from "./span-payload/span-tools-section.es.js";
 import { SpanRunId, SpanSummaryDescription } from "./span-summary-description.es.js";
 import { SpanModelSummary } from "./span-token-usage.es.js";
 import { TraceIdButton } from "./trace-id-button.es.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { BracesIcon, ExternalLinkIcon, FileInputIcon, FileOutputIcon } from "lucide-react";
-import { describeProcessorPipeline, describeSpanOutput } from "@mastra/core/observability";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeftRightIcon, BracesIcon, ExternalLinkIcon, FileInputIcon, FileOutputIcon } from "lucide-react";
 // src/domains/traces/components/span-data-panel-view.tsx
 var BODY_CLASS = "min-h-0 flex-1 overflow-y-auto p-2";
+var LEAD = [
+	"error",
+	"changes",
+	"input",
+	"output"
+];
+var REST = [
+	"tools",
+	"metadata",
+	"attributes"
+];
 function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNext, onClose, onShowTrace, activeTab, onTabChange, feedbackTabSlot, feedbackTabBadge, isAnchor, className }) {
 	return /* @__PURE__ */ jsxs("section", {
 		className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", className),
@@ -70,8 +84,80 @@ function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNex
 	});
 }
 function SpanDataPanelContent({ span, traceId, spanId, activeTab, onTabChange, feedbackTabSlot, feedbackTabBadge, isAnchor }) {
-	const hasContext = (isAnchor ?? span.parentSpanId == null) && Boolean(span.tags?.length || span.sessionId || span.requestId || span.userId || span.organizationId || span.experimentId);
-	const detailsBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const isRoot = isAnchor ?? span.parentSpanId == null;
+	const hasContext = isRoot && Boolean(span.tags?.length || span.sessionId || span.requestId || span.userId || span.organizationId || span.experimentId);
+	const outcome = getSpanOutcome(span);
+	const showOutcome = outcome != null && (!isRoot || outcome.tone === "error" || outcome.tone === "warning");
+	const outputPayload = getSpanOutputPayload(span);
+	const evidence = outcome?.evidence === "output" && outputPayload == null ? void 0 : outcome?.evidence;
+	const toolCallsInOutcome = showOutcome && evidence === "toolCalls";
+	const changesInOutcome = showOutcome && evidence === "changes";
+	const errorInOutcome = showOutcome && evidence === "error";
+	const changes = getSpanChanges(span);
+	const sections = {
+		error: span.error != null && !errorInOutcome && /* @__PURE__ */ jsx(SpanPayloadSection, {
+			title: "Error",
+			raw: span.error,
+			framed: false,
+			children: /* @__PURE__ */ jsx(SpanErrorRenderer, { span })
+		}),
+		changes: changes.length > 0 && !changesInOutcome && /* @__PURE__ */ jsx(SpanPayloadSection, {
+			title: "Changes",
+			icon: /* @__PURE__ */ jsx(ArrowLeftRightIcon, {}),
+			raw: changes,
+			hasPreview: true,
+			emphasis: evidence === "changes",
+			children: /* @__PURE__ */ jsx(SpanProcessorMutations, { span })
+		}),
+		output: /* @__PURE__ */ jsx(SpanPayloadSection, {
+			title: "Output",
+			icon: /* @__PURE__ */ jsx(FileOutputIcon, {}),
+			raw: outputPayload,
+			hasPreview: hasSpanOutputPreview(span),
+			children: /* @__PURE__ */ jsx(SpanOutputRenderer, { span })
+		}),
+		input: /* @__PURE__ */ jsx(SpanPayloadSection, {
+			title: "Input",
+			icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
+			raw: span.input,
+			hasPreview: hasSpanInputPreview(span),
+			children: /* @__PURE__ */ jsx(SpanInputRenderer, { span })
+		}),
+		tools: toolCallsInOutcome ? /* @__PURE__ */ jsx(SpanAvailableToolsSection, { span }) : /* @__PURE__ */ jsx(SpanToolsSection, { span }),
+		metadata: /* @__PURE__ */ jsx(SpanPayloadJsonSection, {
+			title: "Metadata",
+			icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+			raw: span.metadata
+		}),
+		attributes: /* @__PURE__ */ jsx(SpanPayloadJsonSection, {
+			title: "Attributes",
+			icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+			raw: span.attributes
+		})
+	};
+	const detailsBody = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		showOutcome && /* @__PURE__ */ jsx(SpanOutcomeSummary, {
+			outcome,
+			showDetail: !evidence,
+			className: "mb-3",
+			renderProof: errorInOutcome ? (headline) => /* @__PURE__ */ jsx(SpanPayloadSection, {
+				title: "Error",
+				heading: headline,
+				raw: span.error,
+				framed: false,
+				clip: false,
+				children: /* @__PURE__ */ jsx(SpanErrorDetails, { span })
+			}) : changesInOutcome ? (headline) => /* @__PURE__ */ jsx(SpanPayloadSection, {
+				title: "Changes",
+				heading: headline,
+				raw: changes,
+				hasPreview: true,
+				children: /* @__PURE__ */ jsx(SpanProcessorMutations, { span })
+			}) : toolCallsInOutcome ? (headline) => /* @__PURE__ */ jsx(SpanToolCallsSection, {
+				span,
+				heading: headline
+			}) : void 0
+		}),
 		isTokenLimitExceeded(span) && /* @__PURE__ */ jsx("div", {
 			className: "mb-3",
 			children: /* @__PURE__ */ jsx(Notice, {
@@ -80,77 +166,47 @@ function SpanDataPanelContent({ span, traceId, spanId, activeTab, onTabChange, f
 				children: /* @__PURE__ */ jsx(Notice.Message, { children: getTokenLimitMessage(span) })
 			})
 		}),
-		/* @__PURE__ */ jsx(SpanPayloadSection, {
-			title: "Error",
-			raw: span.error,
-			framed: false,
-			className: "mb-3",
-			children: /* @__PURE__ */ jsx(SpanErrorRenderer, { span })
-		}),
 		/* @__PURE__ */ jsx(SpanModelSummary, {
 			span,
 			className: "mb-4"
 		}),
-		hasContext && /* @__PURE__ */ jsx(DataKeysAndValues, { children: (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxs(Fragment, { children: [
-			span.tags && span.tags.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Tags" }), /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.tags.join(", ") })] }),
-			span.sessionId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Session Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy Session Id to clipboard",
-				copyValue: span.sessionId,
-				children: span.sessionId
-			})] }),
-			span.requestId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Request Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy Request Id to clipboard",
-				copyValue: span.requestId,
-				children: span.requestId
-			})] }),
-			span.userId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "User Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy User Id to clipboard",
-				copyValue: span.userId,
-				children: span.userId
-			})] }),
-			span.organizationId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Organization Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy Organization Id to clipboard",
-				copyValue: span.organizationId,
-				children: span.organizationId
-			})] }),
-			span.experimentId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Experiment Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
-				copyTooltip: "Copy Experiment Id to clipboard",
-				copyValue: span.experimentId,
-				children: span.experimentId
-			})] })
-		] }) }),
+		/* @__PURE__ */ jsx(SpanProcessorAttributes, {
+			span,
+			className: "mb-4"
+		}),
 		/* @__PURE__ */ jsxs("div", {
-			className: cn("grid gap-4", hasContext && "mt-4"),
+			className: "grid gap-4",
 			children: [
-				/* @__PURE__ */ jsx(SpanPayloadSection, {
-					title: "Input",
-					icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
-					raw: span.input,
-					hasPreview: hasSpanInputPreview(span),
-					children: /* @__PURE__ */ jsx(SpanInputRenderer, { span })
-				}),
-				/* @__PURE__ */ jsx(SpanPayloadSection, {
-					title: "Output",
-					icon: /* @__PURE__ */ jsx(FileOutputIcon, {}),
-					raw: getSpanOutputPayload(span),
-					hasPreview: describeSpanOutput(asCoreSpan(span))?.type !== "json",
-					children: /* @__PURE__ */ jsx(SpanOutputRenderer, { span })
-				}),
-				/* @__PURE__ */ jsx(SpanToolsSection, { span }),
-				/* @__PURE__ */ jsx(SpanPayloadSection, {
-					title: "Metadata",
-					icon: /* @__PURE__ */ jsx(BracesIcon, {}),
-					raw: span.metadata,
-					hasPreview: false,
-					children: null
-				}),
-				/* @__PURE__ */ jsx(SpanPayloadSection, {
-					title: "Attributes",
-					icon: /* @__PURE__ */ jsx(BracesIcon, {}),
-					raw: span.attributes,
-					hasPreview: describeProcessorPipeline(asCoreSpan(span)) !== void 0,
-					children: /* @__PURE__ */ jsx(SpanProcessorAttributes, { span })
-				})
+				LEAD.map((section) => /* @__PURE__ */ jsx(Fragment, { children: sections[section] }, section)),
+				hasContext && /* @__PURE__ */ jsx(DataKeysAndValues, { children: isRoot && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					span.tags && span.tags.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Tags" }), /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.tags.join(", ") })] }),
+					span.sessionId && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Session Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy Session Id to clipboard",
+						copyValue: span.sessionId,
+						children: span.sessionId
+					})] }),
+					span.requestId && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Request Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy Request Id to clipboard",
+						copyValue: span.requestId,
+						children: span.requestId
+					})] }),
+					span.userId && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "User Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy User Id to clipboard",
+						copyValue: span.userId,
+						children: span.userId
+					})] }),
+					span.organizationId && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Organization Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy Organization Id to clipboard",
+						copyValue: span.organizationId,
+						children: span.organizationId
+					})] }),
+					span.experimentId && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Experiment Id" }), /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, {
+						copyTooltip: "Copy Experiment Id to clipboard",
+						copyValue: span.experimentId,
+						children: span.experimentId
+					})] })
+				] }) }),
+				REST.map((section) => /* @__PURE__ */ jsx(Fragment, { children: sections[section] }, section))
 			]
 		})
 	] });
@@ -172,7 +228,7 @@ function SpanDataPanelContent({ span, traceId, spanId, activeTab, onTabChange, f
 					children: "Details"
 				}), /* @__PURE__ */ jsxs(Tab, {
 					value: "feedback",
-					children: ["Feedback", feedbackTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+					children: ["Feedback", feedbackTabBadge != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						" (",
 						feedbackTabBadge,
 						")"