@mastra/playground-ui 37.0.1-alpha.2 → 37.1.0-alpha.4

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

@@ -0,0 +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 { format } from 'date-fns';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { SpanTokenUsage } from './span-token-usage';\nimport type { TokenUsage } from './span-token-usage';\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=\"flex items-center gap-1.5 text-neutral2 uppercase tracking-widest [&>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 \"Scoring\" tab appears; the slot receives the loaded span and renders\n   * whatever scoring UI the consumer wants. When undefined, only the \"Details\" tab renders.\n   */\n  scoringTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n  /** Optional count shown in the \"Scoring\" tab label (e.g. number of scores). */\n  scoringTabBadge?: ReactNode;\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 count shown in the \"Feedback\" tab label. */\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}\n\nexport function SpanDataPanelView({\n  traceId,\n  spanId,\n  span,\n  isLoading,\n  onClose,\n  onPrevious,\n  onNext,\n  activeTab,\n  onTabChange,\n  scoringTabSlot,\n  scoringTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  isAnchor,\n}: SpanDataPanelViewProps) {\n  return (\n    <DataPanel>\n      <DataPanel.Header>\n        <DataPanel.Heading>\n          Span <b># {spanId}</b>\n        </DataPanel.Heading>\n        <ButtonsGroup className=\"ml-auto shrink-0\">\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          scoringTabSlot={scoringTabSlot}\n          scoringTabBadge={scoringTabBadge}\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  scoringTabSlot,\n  scoringTabBadge,\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  scoringTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n  scoringTabBadge?: ReactNode;\n  feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n  feedbackTabBadge?: ReactNode;\n  isAnchor?: boolean;\n}) {\n  const durationMs =\n    span.startedAt && span.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;\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.traceId && (\n              <>\n                <DataKeysAndValues.Key>Trace Id</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Trace Id to clipboard\" copyValue={span.traceId}>\n                  {span.traceId}\n                </DataKeysAndValues.ValueWithCopyBtn>\n              </>\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.runId && (\n              <>\n                <DataKeysAndValues.Key>Run Id</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Run Id to clipboard\" copyValue={span.runId}>\n                  {span.runId}\n                </DataKeysAndValues.ValueWithCopyBtn>\n              </>\n            )}\n            {span.threadId && (\n              <>\n                <DataKeysAndValues.Key>Thread Id</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Thread Id to clipboard\" copyValue={span.threadId}>\n                  {span.threadId}\n                </DataKeysAndValues.ValueWithCopyBtn>\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.resourceId && (\n              <>\n                <DataKeysAndValues.Key>Resource Id</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueWithCopyBtn\n                  copyTooltip=\"Copy Resource Id to clipboard\"\n                  copyValue={span.resourceId}\n                >\n                  {span.resourceId}\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        {span.name && (\n          <>\n            <DataKeysAndValues.Key>Name</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>{span.name}</DataKeysAndValues.Value>\n          </>\n        )}\n        {span.spanType && (\n          <>\n            <DataKeysAndValues.Key>Type</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>{span.spanType}</DataKeysAndValues.Value>\n          </>\n        )}\n        {span.startedAt && (\n          <>\n            <DataKeysAndValues.Key>Started</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>\n              {format(new Date(span.startedAt), 'MMM dd, HH:mm:ss.SSS')}\n            </DataKeysAndValues.Value>\n          </>\n        )}\n        {span.endedAt && (\n          <>\n            <DataKeysAndValues.Key>Ended</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>{format(new Date(span.endedAt), 'MMM dd, HH:mm:ss.SSS')}</DataKeysAndValues.Value>\n          </>\n        )}\n        {durationMs != null && (\n          <>\n            <DataKeysAndValues.Key>Duration</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>\n              {durationMs < 1000 ? `${durationMs}ms` : `${(durationMs / 1000).toFixed(2)}s`}\n            </DataKeysAndValues.Value>\n          </>\n        )}\n      </DataKeysAndValues>\n\n      <div className=\"grid gap-3 mt-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 (!scoringTabSlot && !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>\n          <Tab value=\"details\">Details</Tab>\n          {scoringTabSlot && <Tab value=\"scoring\">Scoring {scoringTabBadge != null && <>({scoringTabBadge})</>}</Tab>}\n          {feedbackTabSlot && (\n            <Tab value=\"feedback\">Feedback {feedbackTabBadge != null && <>({feedbackTabBadge})</>}</Tab>\n          )}\n        </TabList>\n\n        <TabContent value=\"details\">{detailsBody}</TabContent>\n        {scoringTabSlot && <TabContent value=\"scoring\">{scoringTabSlot({ span, traceId, spanId })}</TabContent>}\n        {feedbackTabSlot && <TabContent value=\"feedback\">{feedbackTabSlot({ span, traceId, spanId })}</TabContent>}\n      </Tabs>\n    </DataPanel.Content>\n  );\n}\n"],"names":["jsxs","Fragment","DataPanel","ButtonsGroup","jsx","isTokenLimitExceeded","Notice","SpanTokenUsage","DataKeysAndValues","format","FileInputIcon","FileOutputIcon","BracesIcon","Tabs","TabList","Tab","TabContent"],"mappings":"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"}

package/dist/domains/traces/components/span-data-panel-view.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/span-data-panel-view'
+export {}

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

@@ -0,0 +1,275 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { format } from 'date-fns';
+import { FileInputIcon, FileOutputIcon, BracesIcon } from 'lucide-react';
+import { isTokenLimitExceeded, getTokenLimitMessage } from '../utils/span-utils.es.js';
+import { SpanTokenUsage } from './span-token-usage.es.js';
+import { B as ButtonsGroup } from '../../../buttons-group-b6an6uao.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-Dly5DG8l.js';
+import { D as DataPanel } from '../../../data-panel-BxX4ohtd.js';
+import { N as Notice } from '../../../Notice-CiS1Dv3i.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-XnMoa1fn.js';
+import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
+
+function buildDialogTitle(sectionTitle, icon, span) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-neutral2 uppercase tracking-widest [&>svg]:size-3.5", children: [
+      icon,
+      sectionTitle
+    ] }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "› Span ",
+      /* @__PURE__ */ jsxs("b", { className: "text-neutral3", children: [
+        "#",
+        span.spanId
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "› Trace ",
+      /* @__PURE__ */ jsxs("b", { className: "text-neutral3", children: [
+        "#",
+        span.traceId
+      ] })
+    ] })
+  ] });
+}
+function SpanDataPanelView({
+  traceId,
+  spanId,
+  span,
+  isLoading,
+  onClose,
+  onPrevious,
+  onNext,
+  activeTab,
+  onTabChange,
+  scoringTabSlot,
+  scoringTabBadge,
+  feedbackTabSlot,
+  feedbackTabBadge,
+  isAnchor
+}) {
+  return /* @__PURE__ */ jsxs(DataPanel, { children: [
+    /* @__PURE__ */ jsxs(DataPanel.Header, { children: [
+      /* @__PURE__ */ jsxs(DataPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxs("b", { children: [
+          "# ",
+          spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          DataPanel.NextPrevNav,
+          {
+            onPrevious,
+            onNext,
+            previousLabel: "Previous span",
+            nextLabel: "Next span"
+          }
+        ),
+        /* @__PURE__ */ jsx(DataPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(DataPanel.LoadingData, { children: "Loading span details..." }) : !span ? /* @__PURE__ */ jsx(DataPanel.NoData, { children: "Span not found." }) : /* @__PURE__ */ jsx(
+      SpanDataPanelContent,
+      {
+        span,
+        traceId,
+        spanId,
+        activeTab,
+        onTabChange,
+        scoringTabSlot,
+        scoringTabBadge,
+        feedbackTabSlot,
+        feedbackTabBadge,
+        isAnchor
+      }
+    )
+  ] });
+}
+function SpanDataPanelContent({
+  span,
+  traceId,
+  spanId,
+  activeTab,
+  onTabChange,
+  scoringTabSlot,
+  scoringTabBadge,
+  feedbackTabSlot,
+  feedbackTabBadge,
+  isAnchor
+}) {
+  const durationMs = span.startedAt && span.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;
+  const usage = span.attributes?.usage;
+  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) }) }) }),
+    usage && /* @__PURE__ */ jsx(SpanTokenUsage, { usage, className: "mb-3" }),
+    /* @__PURE__ */ jsxs(DataKeysAndValues, { children: [
+      (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        span.traceId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Trace Id" }),
+          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Trace Id to clipboard", copyValue: span.traceId, children: span.traceId })
+        ] }),
+        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.runId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Run Id" }),
+          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Run Id to clipboard", copyValue: span.runId, children: span.runId })
+        ] }),
+        span.threadId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Thread Id" }),
+          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Thread Id to clipboard", copyValue: span.threadId, children: span.threadId })
+        ] }),
+        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.resourceId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Resource Id" }),
+          /* @__PURE__ */ jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Resource Id to clipboard",
+              copyValue: span.resourceId,
+              children: span.resourceId
+            }
+          )
+        ] }),
+        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
+            }
+          )
+        ] })
+      ] }),
+      span.name && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Name" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.name })
+      ] }),
+      span.spanType && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Type" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.spanType })
+      ] }),
+      span.startedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Started" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      span.endedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Ended" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      durationMs != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Duration" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-3 mt-3", children: [
+      /* @__PURE__ */ jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Input",
+          dialogTitle: buildDialogTitle("Input", /* @__PURE__ */ jsx(FileInputIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
+          codeStr: JSON.stringify(span.input ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataPanel.CodeSection,
+        {
+          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)
+        }
+      ),
+      /* @__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)
+        }
+      )
+    ] })
+  ] });
+  if (!scoringTabSlot && !feedbackTabSlot) {
+    return /* @__PURE__ */ jsx(DataPanel.Content, { children: detailsBody });
+  }
+  return /* @__PURE__ */ jsx(DataPanel.Content, { children: /* @__PURE__ */ jsxs(Tabs, { defaultTab: "details", value: activeTab, onValueChange: onTabChange, children: [
+    /* @__PURE__ */ jsxs(TabList, { children: [
+      /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
+      scoringTabSlot && /* @__PURE__ */ jsxs(Tab, { value: "scoring", children: [
+        "Scoring ",
+        scoringTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          "(",
+          scoringTabBadge,
+          ")"
+        ] })
+      ] }),
+      feedbackTabSlot && /* @__PURE__ */ jsxs(Tab, { value: "feedback", children: [
+        "Feedback ",
+        feedbackTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          "(",
+          feedbackTabBadge,
+          ")"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TabContent, { value: "details", children: detailsBody }),
+    scoringTabSlot && /* @__PURE__ */ jsx(TabContent, { value: "scoring", children: scoringTabSlot({ span, traceId, spanId }) }),
+    feedbackTabSlot && /* @__PURE__ */ jsx(TabContent, { value: "feedback", children: feedbackTabSlot({ span, traceId, spanId }) })
+  ] }) });
+}
+
+export { SpanDataPanelView };
+//# sourceMappingURL=span-data-panel-view.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"span-data-panel-view.es.js","sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { format } from 'date-fns';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { SpanTokenUsage } from './span-token-usage';\nimport type { TokenUsage } from './span-token-usage';\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=\"flex items-center gap-1.5 text-neutral2 uppercase tracking-widest [&>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 \"Scoring\" tab appears; the slot receives the loaded span and renders\n   * whatever scoring UI the consumer wants. When undefined, only the \"Details\" tab renders.\n   */\n  scoringTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n  /** Optional count shown in the \"Scoring\" tab label (e.g. number of scores). */\n  scoringTabBadge?: ReactNode;\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 count shown in the \"Feedback\" tab label. */\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}\n\nexport function SpanDataPanelView({\n  traceId,\n  spanId,\n  span,\n  isLoading,\n  onClose,\n  onPrevious,\n  onNext,\n  activeTab,\n  onTabChange,\n  scoringTabSlot,\n  scoringTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  isAnchor,\n}: SpanDataPanelViewProps) {\n  return (\n    <DataPanel>\n      <DataPanel.Header>\n        <DataPanel.Heading>\n          Span <b># {spanId}</b>\n        </DataPanel.Heading>\n        <ButtonsGroup className=\"ml-auto shrink-0\">\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          scoringTabSlot={scoringTabSlot}\n          scoringTabBadge={scoringTabBadge}\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  scoringTabSlot,\n  scoringTabBadge,\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  scoringTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n  scoringTabBadge?: ReactNode;\n  feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n  feedbackTabBadge?: ReactNode;\n  isAnchor?: boolean;\n}) {\n  const durationMs =\n    span.startedAt && span.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;\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.traceId && (\n              <>\n                <DataKeysAndValues.Key>Trace Id</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Trace Id to clipboard\" copyValue={span.traceId}>\n                  {span.traceId}\n                </DataKeysAndValues.ValueWithCopyBtn>\n              </>\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.runId && (\n              <>\n                <DataKeysAndValues.Key>Run Id</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Run Id to clipboard\" copyValue={span.runId}>\n                  {span.runId}\n                </DataKeysAndValues.ValueWithCopyBtn>\n              </>\n            )}\n            {span.threadId && (\n              <>\n                <DataKeysAndValues.Key>Thread Id</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Thread Id to clipboard\" copyValue={span.threadId}>\n                  {span.threadId}\n                </DataKeysAndValues.ValueWithCopyBtn>\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.resourceId && (\n              <>\n                <DataKeysAndValues.Key>Resource Id</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueWithCopyBtn\n                  copyTooltip=\"Copy Resource Id to clipboard\"\n                  copyValue={span.resourceId}\n                >\n                  {span.resourceId}\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        {span.name && (\n          <>\n            <DataKeysAndValues.Key>Name</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>{span.name}</DataKeysAndValues.Value>\n          </>\n        )}\n        {span.spanType && (\n          <>\n            <DataKeysAndValues.Key>Type</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>{span.spanType}</DataKeysAndValues.Value>\n          </>\n        )}\n        {span.startedAt && (\n          <>\n            <DataKeysAndValues.Key>Started</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>\n              {format(new Date(span.startedAt), 'MMM dd, HH:mm:ss.SSS')}\n            </DataKeysAndValues.Value>\n          </>\n        )}\n        {span.endedAt && (\n          <>\n            <DataKeysAndValues.Key>Ended</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>{format(new Date(span.endedAt), 'MMM dd, HH:mm:ss.SSS')}</DataKeysAndValues.Value>\n          </>\n        )}\n        {durationMs != null && (\n          <>\n            <DataKeysAndValues.Key>Duration</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value>\n              {durationMs < 1000 ? `${durationMs}ms` : `${(durationMs / 1000).toFixed(2)}s`}\n            </DataKeysAndValues.Value>\n          </>\n        )}\n      </DataKeysAndValues>\n\n      <div className=\"grid gap-3 mt-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 (!scoringTabSlot && !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>\n          <Tab value=\"details\">Details</Tab>\n          {scoringTabSlot && <Tab value=\"scoring\">Scoring {scoringTabBadge != null && <>({scoringTabBadge})</>}</Tab>}\n          {feedbackTabSlot && (\n            <Tab value=\"feedback\">Feedback {feedbackTabBadge != null && <>({feedbackTabBadge})</>}</Tab>\n          )}\n        </TabList>\n\n        <TabContent value=\"details\">{detailsBody}</TabContent>\n        {scoringTabSlot && <TabContent value=\"scoring\">{scoringTabSlot({ span, traceId, spanId })}</TabContent>}\n        {feedbackTabSlot && <TabContent value=\"feedback\">{feedbackTabSlot({ span, traceId, spanId })}</TabContent>}\n      </Tabs>\n    </DataPanel.Content>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const dateFns = require('date-fns');
+const lucideReact = require('lucide-react');
+const components_DataDetailsPanel = require('../../../components/DataDetailsPanel.cjs.js');
+
+const KV = components_DataDetailsPanel.DataDetailsPanel.KeyValueList;
+function SpanDetailsView({ spanId, span, isLoading, onClose }) {
+  const durationMs = span?.startedAt && span?.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(components_DataDetailsPanel.DataDetailsPanel, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(components_DataDetailsPanel.DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(components_DataDetailsPanel.DataDetailsPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+          "# ",
+          spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_DataDetailsPanel.DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(components_DataDetailsPanel.DataDetailsPanel.LoadingData, { children: "Loading span..." }) : !span ? /* @__PURE__ */ jsxRuntime.jsx(components_DataDetailsPanel.DataDetailsPanel.NoData, { children: "Span not found." }) : /* @__PURE__ */ jsxRuntime.jsxs(components_DataDetailsPanel.DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(KV, { children: [
+        span.spanType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: span.spanType })
+        ] }),
+        span.startedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Started" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: dateFns.format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        span.endedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Ended" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: dateFns.format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        durationMs != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Duration" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_DataDetailsPanel.DataDetailsPanel.CodeSection,
+        {
+          title: "Input",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
+          codeStr: JSON.stringify(span.input ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_DataDetailsPanel.DataDetailsPanel.CodeSection,
+        {
+          title: "Output",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
+          codeStr: JSON.stringify(span.output ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_DataDetailsPanel.DataDetailsPanel.CodeSection,
+        {
+          title: "Metadata",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_DataDetailsPanel.DataDetailsPanel.CodeSection,
+        {
+          title: "Attributes",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
+        }
+      )
+    ] })
+  ] });
+}
+
+exports.SpanDetailsView = SpanDetailsView;
+//# sourceMappingURL=span-details-view.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"span-details-view.cjs.js","sources":["../../../../src/domains/traces/components/span-details-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { format } from 'date-fns';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nconst KV = DataDetailsPanel.KeyValueList;\n\nexport interface SpanDetailsViewProps {\n  spanId: string;\n  /** Full span record. Caller fetches via useSpanDetail. */\n  span: SpanRecord | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n}\n\n/**\n * Compact span panel using `DataDetailsPanel` (popover-style). Shows basic span metadata +\n * input/output/metadata/attributes code sections. Use this for inline span inspection; for the\n * full-width span view with scoring tab + prev/next nav, use `SpanDataPanelView`.\n */\nexport function SpanDetailsView({ spanId, span, isLoading, onClose }: SpanDetailsViewProps) {\n  const durationMs =\n    span?.startedAt && span?.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;\n\n  return (\n    <DataDetailsPanel>\n      <DataDetailsPanel.Header>\n        <DataDetailsPanel.Heading>\n          Span <b># {spanId}</b>\n        </DataDetailsPanel.Heading>\n        <DataDetailsPanel.CloseButton onClick={onClose} />\n      </DataDetailsPanel.Header>\n\n      {isLoading ? (\n        <DataDetailsPanel.LoadingData>Loading span...</DataDetailsPanel.LoadingData>\n      ) : !span ? (\n        <DataDetailsPanel.NoData>Span not found.</DataDetailsPanel.NoData>\n      ) : (\n        <DataDetailsPanel.Content>\n          <KV>\n            {span.spanType && (\n              <>\n                <KV.Key>Type</KV.Key>\n                <KV.Value>{span.spanType}</KV.Value>\n              </>\n            )}\n            {span.startedAt && (\n              <>\n                <KV.Key>Started</KV.Key>\n                <KV.Value>{format(new Date(span.startedAt), 'MMM dd, HH:mm:ss.SSS')}</KV.Value>\n              </>\n            )}\n            {span.endedAt && (\n              <>\n                <KV.Key>Ended</KV.Key>\n                <KV.Value>{format(new Date(span.endedAt), 'MMM dd, HH:mm:ss.SSS')}</KV.Value>\n              </>\n            )}\n            {durationMs != null && (\n              <>\n                <KV.Key>Duration</KV.Key>\n                <KV.Value>{durationMs < 1000 ? `${durationMs}ms` : `${(durationMs / 1000).toFixed(2)}s`}</KV.Value>\n              </>\n            )}\n          </KV>\n\n          <br />\n\n          <DataDetailsPanel.CodeSection\n            title=\"Input\"\n            icon={<FileInputIcon />}\n            codeStr={JSON.stringify(span.input ?? null, null, 2)}\n          />\n          <DataDetailsPanel.CodeSection\n            title=\"Output\"\n            icon={<FileOutputIcon />}\n            codeStr={JSON.stringify(span.output ?? null, null, 2)}\n          />\n          <DataDetailsPanel.CodeSection\n            title=\"Metadata\"\n            icon={<BracesIcon />}\n            codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n          />\n          <DataDetailsPanel.CodeSection\n            title=\"Attributes\"\n            icon={<BracesIcon />}\n            codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n          />\n        </DataDetailsPanel.Content>\n      )}\n    </DataDetailsPanel>\n  );\n}\n"],"names":["DataDetailsPanel","jsxs","jsx","Fragment","format","FileInputIcon","FileOutputIcon","BracesIcon"],"mappings":";;;;;;;;;AAKA,MAAM,KAAKA,4CAAA,CAAiB,YAAA;AAerB,SAAS,gBAAgB,EAAE,MAAA,EAAQ,IAAA,EAAM,SAAA,EAAW,SAAQ,EAAyB;AAC1F,EAAA,MAAM,aACJ,IAAA,EAAM,SAAA,IAAa,MAAM,OAAA,GAAU,IAAI,KAAK,IAAA,CAAK,OAAO,CAAA,CAAE,OAAA,KAAY,IAAI,IAAA,CAAK,KAAK,SAAS,CAAA,CAAE,SAAQ,GAAI,IAAA;AAE7G,EAAA,uCACGA,4CAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,4CAAA,CAAiB,QAAjB,EACC,QAAA,EAAA;AAAA,sBAAAC,eAAA,CAACD,4CAAA,CAAiB,SAAjB,EAAyB,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wCAClB,GAAA,EAAA,EAAE,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,UAAG;AAAA,SAAA,EAAO;AAAA,OAAA,EACpB,CAAA;AAAA,sBACAE,cAAA,CAACF,4CAAA,CAAiB,WAAA,EAAjB,EAA6B,SAAS,OAAA,EAAS;AAAA,KAAA,EAClD,CAAA;AAAA,IAEC,4BACCE,cAAA,CAACF,4CAAA,CAAiB,aAAjB,EAA6B,QAAA,EAAA,iBAAA,EAAe,IAC3C,CAAC,IAAA,mBACHE,cAAA,CAACF,4CAAA,CAAiB,QAAjB,EAAwB,QAAA,EAAA,iBAAA,EAAe,oBAExCC,eAAA,CAACD,4CAAA,CAAiB,SAAjB,EACC,QAAA,EAAA;AAAA,sBAAAC,eAAA,CAAC,EAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,4BACJA,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,EAAA,CAAG,GAAA,EAAH,EAAO,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,0BACZA,cAAA,CAAC,EAAA,CAAG,KAAA,EAAH,EAAU,eAAK,QAAA,EAAS;AAAA,SAAA,EAC3B,CAAA;AAAA,QAED,IAAA,CAAK,6BACJD,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,EAAA,CAAG,GAAA,EAAH,EAAO,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,0BACfA,cAAA,CAAC,EAAA,CAAG,KAAA,EAAH,EAAU,QAAA,EAAAE,cAAA,CAAO,IAAI,IAAA,CAAK,IAAA,CAAK,SAAS,CAAA,EAAG,sBAAsB,CAAA,EAAE;AAAA,SAAA,EACtE,CAAA;AAAA,QAED,IAAA,CAAK,2BACJH,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,EAAA,CAAG,GAAA,EAAH,EAAO,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,0BACbA,cAAA,CAAC,EAAA,CAAG,KAAA,EAAH,EAAU,QAAA,EAAAE,cAAA,CAAO,IAAI,IAAA,CAAK,IAAA,CAAK,OAAO,CAAA,EAAG,sBAAsB,CAAA,EAAE;AAAA,SAAA,EACpE,CAAA;AAAA,QAED,UAAA,IAAc,wBACbH,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,EAAA,CAAG,GAAA,EAAH,EAAO,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,0BAChBA,cAAA,CAAC,EAAA,CAAG,KAAA,EAAH,EAAU,uBAAa,GAAA,GAAO,CAAA,EAAG,UAAU,CAAA,EAAA,CAAA,GAAO,IAAI,UAAA,GAAa,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,SAAA,EAC1F;AAAA,OAAA,EAEJ,CAAA;AAAA,qCAEC,IAAA,EAAA,EAAG,CAAA;AAAA,sBAEJA,cAAA;AAAA,QAACF,4CAAA,CAAiB,WAAA;AAAA,QAAjB;AAAA,UACC,KAAA,EAAM,OAAA;AAAA,UACN,IAAA,iCAAOK,yBAAA,EAAA,EAAc,CAAA;AAAA,UACrB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,KAAA,IAAS,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACrD;AAAA,sBACAH,cAAA;AAAA,QAACF,4CAAA,CAAiB,WAAA;AAAA,QAAjB;AAAA,UACC,KAAA,EAAM,QAAA;AAAA,UACN,IAAA,iCAAOM,0BAAA,EAAA,EAAe,CAAA;AAAA,UACtB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,MAAA,IAAU,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACtD;AAAA,sBACAJ,cAAA;AAAA,QAACF,4CAAA,CAAiB,WAAA;AAAA,QAAjB;AAAA,UACC,KAAA,EAAM,UAAA;AAAA,UACN,IAAA,iCAAOO,sBAAA,EAAA,EAAW,CAAA;AAAA,UAClB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,QAAA,IAAY,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACxD;AAAA,sBACAL,cAAA;AAAA,QAACF,4CAAA,CAAiB,WAAA;AAAA,QAAjB;AAAA,UACC,KAAA,EAAM,YAAA;AAAA,UACN,IAAA,iCAAOO,sBAAA,EAAA,EAAW,CAAA;AAAA,UAClB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,UAAA,IAAc,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA;AAC1D,KAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/span-details-view.d.ts

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

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

@@ -0,0 +1,77 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { format } from 'date-fns';
+import { FileInputIcon, FileOutputIcon, BracesIcon } from 'lucide-react';
+import { DataDetailsPanel } from '../../../components/DataDetailsPanel.es.js';
+
+const KV = DataDetailsPanel.KeyValueList;
+function SpanDetailsView({ spanId, span, isLoading, onClose }) {
+  const durationMs = span?.startedAt && span?.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;
+  return /* @__PURE__ */ jsxs(DataDetailsPanel, { children: [
+    /* @__PURE__ */ jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxs(DataDetailsPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxs("b", { children: [
+          "# ",
+          spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(DataDetailsPanel.LoadingData, { children: "Loading span..." }) : !span ? /* @__PURE__ */ jsx(DataDetailsPanel.NoData, { children: "Span not found." }) : /* @__PURE__ */ jsxs(DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsxs(KV, { children: [
+        span.spanType && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Type" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: span.spanType })
+        ] }),
+        span.startedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Started" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        span.endedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Ended" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        durationMs != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Duration" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Input",
+          icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
+          codeStr: JSON.stringify(span.input ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Output",
+          icon: /* @__PURE__ */ jsx(FileOutputIcon, {}),
+          codeStr: JSON.stringify(span.output ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Metadata",
+          icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Attributes",
+          icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
+        }
+      )
+    ] })
+  ] });
+}
+
+export { SpanDetailsView };
+//# sourceMappingURL=span-details-view.es.js.map

package/dist/domains/traces/components/span-details-view.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"span-details-view.es.js","sources":["../../../../src/domains/traces/components/span-details-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { format } from 'date-fns';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport { DataDetailsPanel } from '@/ds/components/DataDetailsPanel';\n\nconst KV = DataDetailsPanel.KeyValueList;\n\nexport interface SpanDetailsViewProps {\n  spanId: string;\n  /** Full span record. Caller fetches via useSpanDetail. */\n  span: SpanRecord | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n}\n\n/**\n * Compact span panel using `DataDetailsPanel` (popover-style). Shows basic span metadata +\n * input/output/metadata/attributes code sections. Use this for inline span inspection; for the\n * full-width span view with scoring tab + prev/next nav, use `SpanDataPanelView`.\n */\nexport function SpanDetailsView({ spanId, span, isLoading, onClose }: SpanDetailsViewProps) {\n  const durationMs =\n    span?.startedAt && span?.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;\n\n  return (\n    <DataDetailsPanel>\n      <DataDetailsPanel.Header>\n        <DataDetailsPanel.Heading>\n          Span <b># {spanId}</b>\n        </DataDetailsPanel.Heading>\n        <DataDetailsPanel.CloseButton onClick={onClose} />\n      </DataDetailsPanel.Header>\n\n      {isLoading ? (\n        <DataDetailsPanel.LoadingData>Loading span...</DataDetailsPanel.LoadingData>\n      ) : !span ? (\n        <DataDetailsPanel.NoData>Span not found.</DataDetailsPanel.NoData>\n      ) : (\n        <DataDetailsPanel.Content>\n          <KV>\n            {span.spanType && (\n              <>\n                <KV.Key>Type</KV.Key>\n                <KV.Value>{span.spanType}</KV.Value>\n              </>\n            )}\n            {span.startedAt && (\n              <>\n                <KV.Key>Started</KV.Key>\n                <KV.Value>{format(new Date(span.startedAt), 'MMM dd, HH:mm:ss.SSS')}</KV.Value>\n              </>\n            )}\n            {span.endedAt && (\n              <>\n                <KV.Key>Ended</KV.Key>\n                <KV.Value>{format(new Date(span.endedAt), 'MMM dd, HH:mm:ss.SSS')}</KV.Value>\n              </>\n            )}\n            {durationMs != null && (\n              <>\n                <KV.Key>Duration</KV.Key>\n                <KV.Value>{durationMs < 1000 ? `${durationMs}ms` : `${(durationMs / 1000).toFixed(2)}s`}</KV.Value>\n              </>\n            )}\n          </KV>\n\n          <br />\n\n          <DataDetailsPanel.CodeSection\n            title=\"Input\"\n            icon={<FileInputIcon />}\n            codeStr={JSON.stringify(span.input ?? null, null, 2)}\n          />\n          <DataDetailsPanel.CodeSection\n            title=\"Output\"\n            icon={<FileOutputIcon />}\n            codeStr={JSON.stringify(span.output ?? null, null, 2)}\n          />\n          <DataDetailsPanel.CodeSection\n            title=\"Metadata\"\n            icon={<BracesIcon />}\n            codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n          />\n          <DataDetailsPanel.CodeSection\n            title=\"Attributes\"\n            icon={<BracesIcon />}\n            codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n          />\n        </DataDetailsPanel.Content>\n      )}\n    </DataDetailsPanel>\n  );\n}\n"],"names":[],"mappings":"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"}