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

package/dist/domains/metrics/components/scores-card-view.es.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { D as DataList } from '../../../data-list-Bm70XKg_.js';
-import { M as MetricsCard } from '../../../metrics-card-kreeaS1o.js';
+import { D as DataList } from '../../../data-list-CIUOCtR5.js';
+import { M as MetricsCard } from '../../../metrics-card-DBUsAdmf.js';
 import { M as MetricsLineChart } from '../../../metrics-line-chart-M3JTf2J8.js';
-import { T as TabContent } from '../../../tabs-content-CW6RtAEV.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BAy8m6GO.js';
-import { T as Tab } from '../../../tabs-tab-K5mQhs7r.js';
+import { T as TabContent } from '../../../tabs-content-CmPMnkWh.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-BQher6zA.js';
+import { T as Tab } from '../../../tabs-tab-s-H_a_rq.js';
 import { CHART_COLORS, METRICS_DATA_LIST_PROPS } from './metrics-utils.es.js';
 
 const SERIES_COLORS = [

package/dist/domains/metrics/components/token-usage-by-agent-card-view.cjs.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const horizontalBars = require('../../../horizontal-bars--Czy2stS.cjs');
-const metricsCard = require('../../../metrics-card-DJC-d549.cjs');
-const tabsContent = require('../../../tabs-content-CV7YrtD1.cjs');
-const tabsRoot = require('../../../tabs-root-Dw7gHsnZ.cjs');
-const tabsTab = require('../../../tabs-tab-CP-kzlvB.cjs');
+const horizontalBars = require('../../../horizontal-bars-OAOC9rdk.cjs');
+const metricsCard = require('../../../metrics-card-DpofvZg6.cjs');
+const tabsContent = require('../../../tabs-content-BlFddYrd.cjs');
+const tabsRoot = require('../../../tabs-root-C9QBXz5M.cjs');
+const tabsTab = require('../../../tabs-tab-Bm3yxYaU.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function isTokenUsageTab(value) {

package/dist/domains/metrics/components/token-usage-by-agent-card-view.es.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { H as HorizontalBars } from '../../../horizontal-bars-_vgi09Md.js';
-import { M as MetricsCard } from '../../../metrics-card-kreeaS1o.js';
-import { T as TabContent } from '../../../tabs-content-CW6RtAEV.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BAy8m6GO.js';
-import { T as Tab } from '../../../tabs-tab-K5mQhs7r.js';
+import { H as HorizontalBars } from '../../../horizontal-bars-DIPivfLF.js';
+import { M as MetricsCard } from '../../../metrics-card-DBUsAdmf.js';
+import { T as TabContent } from '../../../tabs-content-CmPMnkWh.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-BQher6zA.js';
+import { T as Tab } from '../../../tabs-tab-s-H_a_rq.js';
 import { formatCost, formatCompact, CHART_COLORS } from './metrics-utils.es.js';
 
 function isTokenUsageTab(value) {

package/dist/domains/metrics/components/token-usage-timeline-card-view.cjs.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const metricsCard = require('../../../metrics-card-DJC-d549.cjs');
+const metricsCard = require('../../../metrics-card-DpofvZg6.cjs');
 const metricsLineChart = require('../../../metrics-line-chart-DPcqXCDT.cjs');
-const tabsRoot = require('../../../tabs-root-Dw7gHsnZ.cjs');
-const tabsTab = require('../../../tabs-tab-CP-kzlvB.cjs');
-const tabsContent = require('../../../tabs-content-CV7YrtD1.cjs');
+const tabsRoot = require('../../../tabs-root-C9QBXz5M.cjs');
+const tabsTab = require('../../../tabs-tab-Bm3yxYaU.cjs');
+const tabsContent = require('../../../tabs-content-BlFddYrd.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function sumMetric(dataKey, formatter = domains_metrics_components_metricsUtils.formatCompact) {

package/dist/domains/metrics/components/token-usage-timeline-card-view.es.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { M as MetricsCard } from '../../../metrics-card-kreeaS1o.js';
+import { M as MetricsCard } from '../../../metrics-card-DBUsAdmf.js';
 import { M as MetricsLineChart } from '../../../metrics-line-chart-M3JTf2J8.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BAy8m6GO.js';
-import { T as Tab } from '../../../tabs-tab-K5mQhs7r.js';
-import { T as TabContent } from '../../../tabs-content-CW6RtAEV.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-BQher6zA.js';
+import { T as Tab } from '../../../tabs-tab-s-H_a_rq.js';
+import { T as TabContent } from '../../../tabs-content-CmPMnkWh.js';
 import { CHART_COLORS, formatCompact, formatCost } from './metrics-utils.es.js';
 
 function sumMetric(dataKey, formatter = formatCompact) {

package/dist/domains/metrics/components/traces-volume-card-view.cjs.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const horizontalBars = require('../../../horizontal-bars--Czy2stS.cjs');
-const metricsCard = require('../../../metrics-card-DJC-d549.cjs');
-const tabsContent = require('../../../tabs-content-CV7YrtD1.cjs');
-const tabsRoot = require('../../../tabs-root-Dw7gHsnZ.cjs');
-const tabsTab = require('../../../tabs-tab-CP-kzlvB.cjs');
+const horizontalBars = require('../../../horizontal-bars-OAOC9rdk.cjs');
+const metricsCard = require('../../../metrics-card-DpofvZg6.cjs');
+const tabsContent = require('../../../tabs-content-BlFddYrd.cjs');
+const tabsRoot = require('../../../tabs-root-C9QBXz5M.cjs');
+const tabsTab = require('../../../tabs-tab-Bm3yxYaU.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function VolumeBars({

package/dist/domains/metrics/components/traces-volume-card-view.es.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { H as HorizontalBars } from '../../../horizontal-bars-_vgi09Md.js';
-import { M as MetricsCard } from '../../../metrics-card-kreeaS1o.js';
-import { T as TabContent } from '../../../tabs-content-CW6RtAEV.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BAy8m6GO.js';
-import { T as Tab } from '../../../tabs-tab-K5mQhs7r.js';
+import { H as HorizontalBars } from '../../../horizontal-bars-DIPivfLF.js';
+import { M as MetricsCard } from '../../../metrics-card-DBUsAdmf.js';
+import { T as TabContent } from '../../../tabs-content-CmPMnkWh.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-BQher6zA.js';
+import { T as Tab } from '../../../tabs-tab-s-H_a_rq.js';
 import { formatCompact, CHART_COLORS } from './metrics-utils.es.js';
 
 function VolumeBars({

package/dist/domains/traces/components/no-traces-info.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const dateFns = require('date-fns');
 const lucideReact = require('lucide-react');
-const EmptyState = require('../../../EmptyState--bOUm8JU.cjs');
+const EmptyState = require('../../../EmptyState-CbHg7j-K.cjs');
 
 const PRESET_LABELS = {
   "last-24h": "the last 24 hours",

package/dist/domains/traces/components/no-traces-info.es.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns';
 import { CircleSlashIcon } from 'lucide-react';
-import { E as EmptyState } from '../../../EmptyState-CLoSRKxC.js';
+import { E as EmptyState } from '../../../EmptyState-BpwEnZ55.js';
 
 const PRESET_LABELS = {
   "last-24h": "the last 24 hours",

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

@@ -3,35 +3,30 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const observability = require('@mastra/core/observability');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
+const domains_traces_components_spanPayload_spanInputRenderers = require('./span-payload/span-input-renderers.cjs.js');
+const domains_traces_components_spanPayload_spanOutputRenderers = require('./span-payload/span-output-renderers.cjs.js');
+const domains_traces_components_spanPayload_spanErrorRenderer = require('./span-payload/span-error-renderer.cjs.js');
+const domains_traces_components_spanPayload_spanPayloadSection = require('./span-payload/span-payload-section.cjs.js');
+require('../../../code-DhrdtZce.cjs');
+const utils_cn = require('../../../cn-DPfV6E6L.cjs');
+require('react');
+require('../../../Button-B1TWWXCy.cjs');
+require('../../chat/context/chat-context.cjs.js');
+const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload/span-payload-registry.cjs.js');
 const domains_traces_components_spanSummaryDescription = require('./span-summary-description.cjs.js');
 const domains_traces_components_spanTokenUsage = require('./span-token-usage.cjs.js');
 const domains_traces_components_traceIdButton = require('./trace-id-button.cjs.js');
-const buttonsGroup = require('../../../buttons-group-jq7kUVlX.cjs');
-const dataKeysAndValues = require('../../../data-keys-and-values-CUqVRfqS.cjs');
-const dataPanel = require('../../../data-panel-tSErqolu.cjs');
-const Notice = require('../../../Notice-D0Mvqvr0.cjs');
-const tabsRoot = require('../../../tabs-root-Dw7gHsnZ.cjs');
-const tabsTab = require('../../../tabs-tab-CP-kzlvB.cjs');
-const tabsContent = require('../../../tabs-content-CV7YrtD1.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-CDhHx4Tc.cjs');
+const dataPanel = require('../../../data-panel-BmQlOkMA.cjs');
+const Notice = require('../../../Notice-CoaE5a2D.cjs');
+const tabsRoot = require('../../../tabs-root-C9QBXz5M.cjs');
+const tabsTab = require('../../../tabs-tab-Bm3yxYaU.cjs');
+const tabsContent = require('../../../tabs-content-BlFddYrd.cjs');
 
-function buildDialogTitle(sectionTitle, icon, span) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5", children: [
-      icon,
-      sectionTitle
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      "› Span ",
-      /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-neutral3", children: span.spanId })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      "› Trace ",
-      /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-neutral3", children: span.traceId })
-    ] })
-  ] });
-}
+const BODY_CLASS = "min-h-0 flex-1 overflow-y-auto px-3 pt-1 pb-3";
 function SpanDataPanelView({
   traceId,
   spanId,
@@ -47,16 +42,16 @@ function SpanDataPanelView({
   isAnchor,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel, { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { className: "min-h-16 py-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Heading, { className: "items-center whitespace-nowrap", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: utils_cn.cn("flex min-h-0 flex-1 flex-col overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.HeaderContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Heading, { children: [
           "Span",
           /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceIdButton.TraceIdButton, { id: spanId })
         ] }),
         span && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanSummaryDescription.SpanSummaryDescription, { span })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { className: "ml-auto shrink-0 self-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.HeaderActions, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           dataPanel.DataPanel.NextPrevNav,
           {
@@ -95,10 +90,14 @@ function SpanDataPanelContent({
   isAnchor
 }) {
   const usage = span.attributes?.usage;
+  const hasContext = (isAnchor ?? span.parentSpanId == null) && Boolean(
+    span.tags?.length || span.sessionId || span.requestId || span.userId || span.organizationId || span.experimentId
+  );
   const detailsBody = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     domains_traces_utils_spanUtils.isTokenLimitExceeded(span) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice, { variant: "warning", title: "Token Limit Exceeded", children: /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice.Message, { children: domains_traces_utils_spanUtils.getTokenLimitMessage(span) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanPayload_spanPayloadSection.SpanPayloadSection, { title: "Error", raw: span.error, className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanPayload_spanErrorRenderer.SpanErrorRenderer, { span }) }),
     usage && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTokenUsage.SpanTokenUsage, { usage, className: "mb-3" }),
-    /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues, { children: (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hasContext && /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues, { children: (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       span.tags && span.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Tags" }),
         /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: span.tags.join(", ") })
@@ -152,49 +151,35 @@ function SpanDataPanelContent({
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("grid gap-4", hasContext && "mt-4"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        dataPanel.DataPanel.CodeSection,
+        domains_traces_components_spanPayload_spanPayloadSection.SpanPayloadSection,
         {
           title: "Input",
-          dialogTitle: buildDialogTitle("Input", /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}), { spanId, traceId }),
           icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
-          codeStr: JSON.stringify(span.input ?? null, null, 2)
+          raw: span.input,
+          hasPreview: observability.describeSpanInput(domains_traces_components_spanPayload_spanPayloadRegistry.asCoreSpan(span))?.type !== "json",
+          children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanPayload_spanInputRenderers.SpanInputRenderer, { span })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        dataPanel.DataPanel.CodeSection,
+        domains_traces_components_spanPayload_spanPayloadSection.SpanPayloadSection,
         {
           title: "Output",
-          dialogTitle: buildDialogTitle("Output", /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}), { spanId, traceId }),
           icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
-          codeStr: JSON.stringify(span.output ?? null, null, 2)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        dataPanel.DataPanel.CodeSection,
-        {
-          title: "Metadata",
-          dialogTitle: buildDialogTitle("Metadata", /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}), { spanId, traceId }),
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
-          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+          raw: span.output,
+          hasPreview: observability.describeSpanOutput(domains_traces_components_spanPayload_spanPayloadRegistry.asCoreSpan(span))?.type !== "json",
+          children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanPayload_spanOutputRenderers.SpanOutputRenderer, { span })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        dataPanel.DataPanel.CodeSection,
-        {
-          title: "Attributes",
-          dialogTitle: buildDialogTitle("Attributes", /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}), { spanId, traceId }),
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
-          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanPayload_spanPayloadSection.SpanPayloadSection, { title: "Metadata", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}), raw: span.metadata, hasPreview: false, children: null }),
+      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanPayload_spanPayloadSection.SpanPayloadSection, { title: "Attributes", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}), raw: span.attributes, hasPreview: false, children: null })
     ] })
   ] });
   if (!feedbackTabSlot) {
-    return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: detailsBody });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: BODY_CLASS, children: detailsBody });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(tabsRoot.Tabs, { defaultTab: "details", value: activeTab, onValueChange: onTabChange, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: BODY_CLASS, children: /* @__PURE__ */ jsxRuntime.jsxs(tabsRoot.Tabs, { defaultTab: "details", value: activeTab, onValueChange: onTabChange, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(tabsRoot.TabList, { variant: "pill-ghost", children: [
       /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "details", children: "Details" }),
       /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.Tab, { value: "feedback", children: [
@@ -202,7 +187,7 @@ function SpanDataPanelContent({
         feedbackTabBadge
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "details", children: detailsBody }),
+    /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "details", className: "pt-1", children: detailsBody }),
     /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "feedback", children: feedbackTabSlot({ span, traceId, spanId }) })
   ] }) });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"span-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { SpanSummaryDescription } from './span-summary-description';\nimport { SpanTokenUsage } from './span-token-usage';\nimport type { TokenUsage } from './span-token-usage';\nimport { TraceIdButton } from './trace-id-button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\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';\n\nfunction buildDialogTitle(sectionTitle: string, icon: ReactNode, span: { spanId: string; traceId: string }) {\n  return (\n    <>\n      <span className=\"text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5\">\n        {icon}\n        {sectionTitle}\n      </span>\n      <span>\n        › Span <b className=\"text-neutral3\">{span.spanId}</b>\n      </span>\n      <span>\n        › Trace <b className=\"text-neutral3\">{span.traceId}</b>\n      </span>\n    </>\n  );\n}\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  onClose: () => void;\n  onPrevious?: () => void;\n  onNext?: () => 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  onClose,\n  onPrevious,\n  onNext,\n  activeTab,\n  onTabChange,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  isAnchor,\n  className,\n}: SpanDataPanelViewProps) {\n  return (\n    <DataPanel className={className}>\n      {/* Two-line header (heading + summary); neighbouring panel headers use min-h-16 to stay level. */}\n      <DataPanel.Header className=\"min-h-16 py-2\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <DataPanel.Heading className=\"items-center whitespace-nowrap\">\n            Span\n            <TraceIdButton id={spanId} />\n          </DataPanel.Heading>\n          {span && <SpanSummaryDescription span={span} />}\n        </div>\n        <ButtonsGroup className=\"ml-auto shrink-0 self-start\">\n          <DataPanel.NextPrevNav\n            onPrevious={onPrevious}\n            onNext={onNext}\n            previousLabel=\"Previous span\"\n            nextLabel=\"Next span\"\n          />\n          <DataPanel.CloseButton onClick={onClose} />\n        </ButtonsGroup>\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    </DataPanel>\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 usage = span.attributes?.usage as TokenUsage | undefined;\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      {usage && <SpanTokenUsage usage={usage} className=\"mb-3\" />}\n\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      <div className=\"mt-3 grid gap-3\">\n        <DataPanel.CodeSection\n          title=\"Input\"\n          dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n          icon={<FileInputIcon />}\n          codeStr={JSON.stringify(span.input ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Output\"\n          dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n          icon={<FileOutputIcon />}\n          codeStr={JSON.stringify(span.output ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Metadata\"\n          dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Attributes\"\n          dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n        />\n      </div>\n    </>\n  );\n\n  // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n  if (!feedbackTabSlot) {\n    return <DataPanel.Content>{detailsBody}</DataPanel.Content>;\n  }\n\n  return (\n    <DataPanel.Content>\n      <Tabs defaultTab=\"details\" value={activeTab} onValueChange={onTabChange}>\n        <TabList variant=\"pill-ghost\">\n          <Tab value=\"details\">Details</Tab>\n          <Tab value=\"feedback\">Feedback{feedbackTabBadge}</Tab>\n        </TabList>\n\n        <TabContent value=\"details\">{detailsBody}</TabContent>\n        <TabContent value=\"feedback\">{feedbackTabSlot({ span, traceId, spanId })}</TabContent>\n      </Tabs>\n    </DataPanel.Content>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","DataPanel","TraceIdButton","SpanSummaryDescription","ButtonsGroup","isTokenLimitExceeded","Notice","SpanTokenUsage","DataKeysAndValues","FileInputIcon","FileOutputIcon","BracesIcon","Tabs","TabList","Tab","TabContent"],"mappings":"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"}
+{"version":3,"file":"span-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import { describeSpanInput, describeSpanOutput } from '@mastra/core/observability';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord } from '../types';\nimport { getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { SpanErrorRenderer, SpanInputRenderer, SpanOutputRenderer, SpanPayloadSection } from './span-payload';\nimport { asCoreSpan } from './span-payload/span-payload-registry';\nimport { SpanSummaryDescription } from './span-summary-description';\nimport { SpanTokenUsage } from './span-token-usage';\nimport type { TokenUsage } from './span-token-usage';\nimport { TraceIdButton } from './trace-id-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\nconst BODY_CLASS = 'min-h-0 flex-1 overflow-y-auto px-3 pt-1 pb-3';\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  onClose: () => void;\n  onPrevious?: () => void;\n  onNext?: () => 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  onClose,\n  onPrevious,\n  onNext,\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} />\n          </DataPanel.Heading>\n          {span && <SpanSummaryDescription span={span} />}\n        </DataPanel.HeaderContent>\n        <DataPanel.HeaderActions>\n          <DataPanel.NextPrevNav\n            onPrevious={onPrevious}\n            onNext={onNext}\n            previousLabel=\"Previous span\"\n            nextLabel=\"Next span\"\n          />\n          <DataPanel.CloseButton onClick={onClose} />\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 usage = span.attributes?.usage as TokenUsage | undefined;\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} className=\"mb-3\">\n        <SpanErrorRenderer span={span} />\n      </SpanPayloadSection>\n\n      {usage && <SpanTokenUsage usage={usage} className=\"mb-3\" />}\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={describeSpanInput(asCoreSpan(span))?.type !== 'json'}\n        >\n          <SpanInputRenderer span={span} />\n        </SpanPayloadSection>\n        <SpanPayloadSection\n          title=\"Output\"\n          icon={<FileOutputIcon />}\n          raw={span.output}\n          hasPreview={describeSpanOutput(asCoreSpan(span))?.type !== 'json'}\n        >\n          <SpanOutputRenderer span={span} />\n        </SpanPayloadSection>\n        <SpanPayloadSection title=\"Metadata\" icon={<BracesIcon />} raw={span.metadata} hasPreview={false}>\n          {null}\n        </SpanPayloadSection>\n        <SpanPayloadSection title=\"Attributes\" icon={<BracesIcon />} raw={span.attributes} hasPreview={false}>\n          {null}\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  return (\n    <div className={BODY_CLASS}>\n      <Tabs defaultTab=\"details\" value={activeTab} onValueChange={onTabChange}>\n        <TabList variant=\"pill-ghost\">\n          <Tab value=\"details\">Details</Tab>\n          <Tab value=\"feedback\">Feedback{feedbackTabBadge}</Tab>\n        </TabList>\n\n        <TabContent value=\"details\" className=\"pt-1\">\n          {detailsBody}\n        </TabContent>\n        <TabContent value=\"feedback\">{feedbackTabSlot({ span, traceId, spanId })}</TabContent>\n      </Tabs>\n    </div>\n  );\n}\n"],"names":["cn","jsxs","DataPanel","jsx","TraceIdButton","SpanSummaryDescription","Fragment","isTokenLimitExceeded","Notice","SpanPayloadSection","SpanErrorRenderer","SpanTokenUsage","DataKeysAndValues","FileInputIcon","describeSpanInput","asCoreSpan","SpanInputRenderer","FileOutputIcon","describeSpanOutput","SpanOutputRenderer","BracesIcon","Tabs","TabList","Tab","TabContent"],"mappings":"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"}

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

@@ -1,33 +1,28 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { describeSpanInput, describeSpanOutput } from '@mastra/core/observability';
 import { FileInputIcon, FileOutputIcon, BracesIcon } from 'lucide-react';
 import { isTokenLimitExceeded, getTokenLimitMessage } from '../utils/span-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 '../../../code-D4Vw_fYq.js';
+import { c as cn } from '../../../cn-Dxjsbr9n.js';
+import 'react';
+import '../../../Button-XSiL3zvL.js';
+import '../../chat/context/chat-context.es.js';
+import { asCoreSpan } from './span-payload/span-payload-registry.es.js';
 import { SpanSummaryDescription } from './span-summary-description.es.js';
 import { SpanTokenUsage } from './span-token-usage.es.js';
 import { TraceIdButton } from './trace-id-button.es.js';
-import { B as ButtonsGroup } from '../../../buttons-group-CHyXDQBp.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-778xnwOK.js';
-import { D as DataPanel } from '../../../data-panel-5iuux0r_.js';
-import { N as Notice } from '../../../Notice-CMZ86f1g.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BAy8m6GO.js';
-import { T as Tab } from '../../../tabs-tab-K5mQhs7r.js';
-import { T as TabContent } from '../../../tabs-content-CW6RtAEV.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DNqDDNb0.js';
+import { D as DataPanel } from '../../../data-panel-3TqqdlmK.js';
+import { N as Notice } from '../../../Notice-BkL7EPmo.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-BQher6zA.js';
+import { T as Tab } from '../../../tabs-tab-s-H_a_rq.js';
+import { T as TabContent } from '../../../tabs-content-CmPMnkWh.js';
 
-function buildDialogTitle(sectionTitle, icon, span) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("span", { className: "text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5", children: [
-      icon,
-      sectionTitle
-    ] }),
-    /* @__PURE__ */ jsxs("span", { children: [
-      "› Span ",
-      /* @__PURE__ */ jsx("b", { className: "text-neutral3", children: span.spanId })
-    ] }),
-    /* @__PURE__ */ jsxs("span", { children: [
-      "› Trace ",
-      /* @__PURE__ */ jsx("b", { className: "text-neutral3", children: span.traceId })
-    ] })
-  ] });
-}
+const BODY_CLASS = "min-h-0 flex-1 overflow-y-auto px-3 pt-1 pb-3";
 function SpanDataPanelView({
   traceId,
   spanId,
@@ -43,16 +38,16 @@ function SpanDataPanelView({
   isAnchor,
   className
 }) {
-  return /* @__PURE__ */ jsxs(DataPanel, { className, children: [
-    /* @__PURE__ */ jsxs(DataPanel.Header, { className: "min-h-16 py-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs(DataPanel.Heading, { className: "items-center whitespace-nowrap", children: [
+  return /* @__PURE__ */ jsxs("section", { className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs(DataPanel.Header, { children: [
+      /* @__PURE__ */ jsxs(DataPanel.HeaderContent, { children: [
+        /* @__PURE__ */ jsxs(DataPanel.Heading, { children: [
           "Span",
           /* @__PURE__ */ jsx(TraceIdButton, { id: spanId })
         ] }),
         span && /* @__PURE__ */ jsx(SpanSummaryDescription, { span })
       ] }),
-      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0 self-start", children: [
+      /* @__PURE__ */ jsxs(DataPanel.HeaderActions, { children: [
         /* @__PURE__ */ jsx(
           DataPanel.NextPrevNav,
           {
@@ -91,10 +86,14 @@ function SpanDataPanelContent({
   isAnchor
 }) {
   const usage = span.attributes?.usage;
+  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: [
     isTokenLimitExceeded(span) && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(Notice, { variant: "warning", title: "Token Limit Exceeded", children: /* @__PURE__ */ jsx(Notice.Message, { children: getTokenLimitMessage(span) }) }) }),
+    /* @__PURE__ */ jsx(SpanPayloadSection, { title: "Error", raw: span.error, className: "mb-3", children: /* @__PURE__ */ jsx(SpanErrorRenderer, { span }) }),
     usage && /* @__PURE__ */ jsx(SpanTokenUsage, { usage, className: "mb-3" }),
-    /* @__PURE__ */ jsx(DataKeysAndValues, { children: (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxs(Fragment, { children: [
+    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(", ") })
@@ -148,49 +147,35 @@ function SpanDataPanelContent({
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4", hasContext && "mt-4"), children: [
       /* @__PURE__ */ jsx(
-        DataPanel.CodeSection,
+        SpanPayloadSection,
         {
           title: "Input",
-          dialogTitle: buildDialogTitle("Input", /* @__PURE__ */ jsx(FileInputIcon, {}), { spanId, traceId }),
           icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
-          codeStr: JSON.stringify(span.input ?? null, null, 2)
+          raw: span.input,
+          hasPreview: describeSpanInput(asCoreSpan(span))?.type !== "json",
+          children: /* @__PURE__ */ jsx(SpanInputRenderer, { span })
         }
       ),
       /* @__PURE__ */ jsx(
-        DataPanel.CodeSection,
+        SpanPayloadSection,
         {
           title: "Output",
-          dialogTitle: buildDialogTitle("Output", /* @__PURE__ */ jsx(FileOutputIcon, {}), { spanId, traceId }),
           icon: /* @__PURE__ */ jsx(FileOutputIcon, {}),
-          codeStr: JSON.stringify(span.output ?? null, null, 2)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        DataPanel.CodeSection,
-        {
-          title: "Metadata",
-          dialogTitle: buildDialogTitle("Metadata", /* @__PURE__ */ jsx(BracesIcon, {}), { spanId, traceId }),
-          icon: /* @__PURE__ */ jsx(BracesIcon, {}),
-          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+          raw: span.output,
+          hasPreview: describeSpanOutput(asCoreSpan(span))?.type !== "json",
+          children: /* @__PURE__ */ jsx(SpanOutputRenderer, { span })
         }
       ),
-      /* @__PURE__ */ jsx(
-        DataPanel.CodeSection,
-        {
-          title: "Attributes",
-          dialogTitle: buildDialogTitle("Attributes", /* @__PURE__ */ jsx(BracesIcon, {}), { spanId, traceId }),
-          icon: /* @__PURE__ */ jsx(BracesIcon, {}),
-          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
-        }
-      )
+      /* @__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: false, children: null })
     ] })
   ] });
   if (!feedbackTabSlot) {
-    return /* @__PURE__ */ jsx(DataPanel.Content, { children: detailsBody });
+    return /* @__PURE__ */ jsx("div", { className: BODY_CLASS, children: detailsBody });
   }
-  return /* @__PURE__ */ jsx(DataPanel.Content, { children: /* @__PURE__ */ jsxs(Tabs, { defaultTab: "details", value: activeTab, onValueChange: onTabChange, children: [
+  return /* @__PURE__ */ jsx("div", { className: BODY_CLASS, children: /* @__PURE__ */ jsxs(Tabs, { defaultTab: "details", value: activeTab, onValueChange: onTabChange, children: [
     /* @__PURE__ */ jsxs(TabList, { variant: "pill-ghost", children: [
       /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
       /* @__PURE__ */ jsxs(Tab, { value: "feedback", children: [
@@ -198,7 +183,7 @@ function SpanDataPanelContent({
         feedbackTabBadge
       ] })
     ] }),
-    /* @__PURE__ */ jsx(TabContent, { value: "details", children: detailsBody }),
+    /* @__PURE__ */ jsx(TabContent, { value: "details", className: "pt-1", children: detailsBody }),
     /* @__PURE__ */ jsx(TabContent, { value: "feedback", children: feedbackTabSlot({ span, traceId, spanId }) })
   ] }) });
 }