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

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

@@ -0,0 +1,71 @@
+'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 Button = require('../../../Button-66ghjQV8.cjs');
+const EmptyState = require('../../../EmptyState-Ba3F-bq5.cjs');
+
+const PRESET_LABELS = {
+  "last-24h": "the last 24 hours",
+  "last-3d": "the last 3 days",
+  "last-7d": "the last 7 days",
+  "last-14d": "the last 14 days",
+  "last-30d": "the last 30 days"
+};
+const DATE_FORMAT = "MMM d, yyyy HH:mm";
+const RANGE_TIP = "Pick a wider time range — older traces may fall outside the current window.";
+function describeRange({ datePreset, dateFrom, dateTo }) {
+  if (datePreset && datePreset !== "all" && datePreset !== "custom") {
+    return {
+      title: `No traces for ${PRESET_LABELS[datePreset]}`,
+      description: RANGE_TIP
+    };
+  }
+  if (dateFrom && dateTo) {
+    return {
+      title: `No traces between ${dateFns.format(dateFrom, DATE_FORMAT)} and ${dateFns.format(dateTo, DATE_FORMAT)}`,
+      description: RANGE_TIP
+    };
+  }
+  if (dateFrom) {
+    return {
+      title: `No traces since ${dateFns.format(dateFrom, DATE_FORMAT)}`,
+      description: RANGE_TIP
+    };
+  }
+  return {
+    title: "No traces yet",
+    description: "Traces will appear here once agents, workflows, or tools are executed."
+  };
+}
+const NoTracesInfo = ({ datePreset, dateFrom, dateTo } = {}) => {
+  const { title, description } = describeRange({ datePreset, dateFrom, dateTo });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    EmptyState.EmptyState,
+    {
+      iconSlot: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlashIcon, {}),
+      titleSlot: title,
+      descriptionSlot: description,
+      actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
+        {
+          variant: "ghost",
+          as: "a",
+          href: "https://mastra.ai/en/docs/observability/tracing/overview",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: [
+            "Tracing Documentation ",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {})
+          ]
+        }
+      )
+    }
+  ) });
+};
+
+exports.NoTracesInfo = NoTracesInfo;
+//# sourceMappingURL=no-traces-info.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"no-traces-info.cjs.js","sources":["../../../../src/domains/traces/components/no-traces-info.tsx"],"sourcesContent":["import { format } from 'date-fns';\nimport { CircleSlashIcon, ExternalLinkIcon } from 'lucide-react';\nimport type { TraceDatePreset } from '../types';\nimport { Button } from '@/ds/components/Button';\nimport { EmptyState } from '@/ds/components/EmptyState';\n\nconst PRESET_LABELS: Record<Exclude<TraceDatePreset, 'all' | 'custom'>, string> = {\n  'last-24h': 'the last 24 hours',\n  'last-3d': 'the last 3 days',\n  'last-7d': 'the last 7 days',\n  'last-14d': 'the last 14 days',\n  'last-30d': 'the last 30 days',\n};\n\nexport interface NoTracesInfoProps {\n  datePreset?: TraceDatePreset;\n  dateFrom?: Date;\n  dateTo?: Date;\n}\n\nconst DATE_FORMAT = 'MMM d, yyyy HH:mm';\n\nconst RANGE_TIP = 'Pick a wider time range — older traces may fall outside the current window.';\n\nfunction describeRange({ datePreset, dateFrom, dateTo }: NoTracesInfoProps): { title: string; description: string } {\n  if (datePreset && datePreset !== 'all' && datePreset !== 'custom') {\n    return {\n      title: `No traces for ${PRESET_LABELS[datePreset]}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom && dateTo) {\n    return {\n      title: `No traces between ${format(dateFrom, DATE_FORMAT)} and ${format(dateTo, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom) {\n    return {\n      title: `No traces since ${format(dateFrom, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  return {\n    title: 'No traces yet',\n    description: 'Traces will appear here once agents, workflows, or tools are executed.',\n  };\n}\n\nexport const NoTracesInfo = ({ datePreset, dateFrom, dateTo }: NoTracesInfoProps = {}) => {\n  const { title, description } = describeRange({ datePreset, dateFrom, dateTo });\n  return (\n    <div className=\"flex h-full items-center justify-center\">\n      <EmptyState\n        iconSlot={<CircleSlashIcon />}\n        titleSlot={title}\n        descriptionSlot={description}\n        actionSlot={\n          <Button\n            variant=\"ghost\"\n            as=\"a\"\n            href=\"https://mastra.ai/en/docs/observability/tracing/overview\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Tracing Documentation <ExternalLinkIcon />\n          </Button>\n        }\n      />\n    </div>\n  );\n};\n"],"names":["format","jsx","EmptyState","CircleSlashIcon","jsxs","Button","ExternalLinkIcon"],"mappings":";;;;;;;;;;AAMA,MAAM,aAAA,GAA4E;AAAA,EAChF,UAAA,EAAY,mBAAA;AAAA,EACZ,SAAA,EAAW,iBAAA;AAAA,EACX,SAAA,EAAW,iBAAA;AAAA,EACX,UAAA,EAAY,kBAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAA;AAQA,MAAM,WAAA,GAAc,mBAAA;AAEpB,MAAM,SAAA,GAAY,6EAAA;AAElB,SAAS,aAAA,CAAc,EAAE,UAAA,EAAY,QAAA,EAAU,QAAO,EAA8D;AAClH,EAAA,IAAI,UAAA,IAAc,UAAA,KAAe,KAAA,IAAS,UAAA,KAAe,QAAA,EAAU;AACjE,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,aAAA,CAAc,UAAU,CAAC,CAAA,CAAA;AAAA,MACjD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,kBAAA,EAAqBA,cAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,KAAA,EAAQA,cAAA,CAAO,MAAA,EAAQ,WAAW,CAAC,CAAA,CAAA;AAAA,MAC5F,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,gBAAA,EAAmBA,cAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,CAAA;AAAA,MACvD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,eAAA;AAAA,IACP,WAAA,EAAa;AAAA,GACf;AACF;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,UAAA,EAAY,UAAU,MAAA,EAAO,GAAuB,EAAC,KAAM;AACxF,EAAA,MAAM,EAAE,OAAO,WAAA,EAAY,GAAI,cAAc,EAAE,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,CAAA;AAC7E,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,QAAA,iCAAWC,2BAAA,EAAA,EAAgB,CAAA;AAAA,MAC3B,SAAA,EAAW,KAAA;AAAA,MACX,eAAA,EAAiB,WAAA;AAAA,MACjB,UAAA,kBACEC,eAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,EAAA,EAAG,GAAA;AAAA,UACH,IAAA,EAAK,0DAAA;AAAA,UACL,MAAA,EAAO,QAAA;AAAA,UACP,GAAA,EAAI,qBAAA;AAAA,UACL,QAAA,EAAA;AAAA,YAAA,wBAAA;AAAA,2CACwBC,4BAAA,EAAA,EAAiB;AAAA;AAAA;AAAA;AAC1C;AAAA,GAEJ,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/no-traces-info.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/no-traces-info'
+export {}

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

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { format } from 'date-fns';
+import { ExternalLinkIcon, CircleSlashIcon } from 'lucide-react';
+import { B as Button } from '../../../Button-Bq0VuEbC.js';
+import { E as EmptyState } from '../../../EmptyState-Cy8hG1-a.js';
+
+const PRESET_LABELS = {
+  "last-24h": "the last 24 hours",
+  "last-3d": "the last 3 days",
+  "last-7d": "the last 7 days",
+  "last-14d": "the last 14 days",
+  "last-30d": "the last 30 days"
+};
+const DATE_FORMAT = "MMM d, yyyy HH:mm";
+const RANGE_TIP = "Pick a wider time range — older traces may fall outside the current window.";
+function describeRange({ datePreset, dateFrom, dateTo }) {
+  if (datePreset && datePreset !== "all" && datePreset !== "custom") {
+    return {
+      title: `No traces for ${PRESET_LABELS[datePreset]}`,
+      description: RANGE_TIP
+    };
+  }
+  if (dateFrom && dateTo) {
+    return {
+      title: `No traces between ${format(dateFrom, DATE_FORMAT)} and ${format(dateTo, DATE_FORMAT)}`,
+      description: RANGE_TIP
+    };
+  }
+  if (dateFrom) {
+    return {
+      title: `No traces since ${format(dateFrom, DATE_FORMAT)}`,
+      description: RANGE_TIP
+    };
+  }
+  return {
+    title: "No traces yet",
+    description: "Traces will appear here once agents, workflows, or tools are executed."
+  };
+}
+const NoTracesInfo = ({ datePreset, dateFrom, dateTo } = {}) => {
+  const { title, description } = describeRange({ datePreset, dateFrom, dateTo });
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      iconSlot: /* @__PURE__ */ jsx(CircleSlashIcon, {}),
+      titleSlot: title,
+      descriptionSlot: description,
+      actionSlot: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          as: "a",
+          href: "https://mastra.ai/en/docs/observability/tracing/overview",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: [
+            "Tracing Documentation ",
+            /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+          ]
+        }
+      )
+    }
+  ) });
+};
+
+export { NoTracesInfo };
+//# sourceMappingURL=no-traces-info.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"no-traces-info.es.js","sources":["../../../../src/domains/traces/components/no-traces-info.tsx"],"sourcesContent":["import { format } from 'date-fns';\nimport { CircleSlashIcon, ExternalLinkIcon } from 'lucide-react';\nimport type { TraceDatePreset } from '../types';\nimport { Button } from '@/ds/components/Button';\nimport { EmptyState } from '@/ds/components/EmptyState';\n\nconst PRESET_LABELS: Record<Exclude<TraceDatePreset, 'all' | 'custom'>, string> = {\n  'last-24h': 'the last 24 hours',\n  'last-3d': 'the last 3 days',\n  'last-7d': 'the last 7 days',\n  'last-14d': 'the last 14 days',\n  'last-30d': 'the last 30 days',\n};\n\nexport interface NoTracesInfoProps {\n  datePreset?: TraceDatePreset;\n  dateFrom?: Date;\n  dateTo?: Date;\n}\n\nconst DATE_FORMAT = 'MMM d, yyyy HH:mm';\n\nconst RANGE_TIP = 'Pick a wider time range — older traces may fall outside the current window.';\n\nfunction describeRange({ datePreset, dateFrom, dateTo }: NoTracesInfoProps): { title: string; description: string } {\n  if (datePreset && datePreset !== 'all' && datePreset !== 'custom') {\n    return {\n      title: `No traces for ${PRESET_LABELS[datePreset]}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom && dateTo) {\n    return {\n      title: `No traces between ${format(dateFrom, DATE_FORMAT)} and ${format(dateTo, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom) {\n    return {\n      title: `No traces since ${format(dateFrom, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  return {\n    title: 'No traces yet',\n    description: 'Traces will appear here once agents, workflows, or tools are executed.',\n  };\n}\n\nexport const NoTracesInfo = ({ datePreset, dateFrom, dateTo }: NoTracesInfoProps = {}) => {\n  const { title, description } = describeRange({ datePreset, dateFrom, dateTo });\n  return (\n    <div className=\"flex h-full items-center justify-center\">\n      <EmptyState\n        iconSlot={<CircleSlashIcon />}\n        titleSlot={title}\n        descriptionSlot={description}\n        actionSlot={\n          <Button\n            variant=\"ghost\"\n            as=\"a\"\n            href=\"https://mastra.ai/en/docs/observability/tracing/overview\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Tracing Documentation <ExternalLinkIcon />\n          </Button>\n        }\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,aAAA,GAA4E;AAAA,EAChF,UAAA,EAAY,mBAAA;AAAA,EACZ,SAAA,EAAW,iBAAA;AAAA,EACX,SAAA,EAAW,iBAAA;AAAA,EACX,UAAA,EAAY,kBAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAA;AAQA,MAAM,WAAA,GAAc,mBAAA;AAEpB,MAAM,SAAA,GAAY,6EAAA;AAElB,SAAS,aAAA,CAAc,EAAE,UAAA,EAAY,QAAA,EAAU,QAAO,EAA8D;AAClH,EAAA,IAAI,UAAA,IAAc,UAAA,KAAe,KAAA,IAAS,UAAA,KAAe,QAAA,EAAU;AACjE,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,aAAA,CAAc,UAAU,CAAC,CAAA,CAAA;AAAA,MACjD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,kBAAA,EAAqB,MAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,KAAA,EAAQ,MAAA,CAAO,MAAA,EAAQ,WAAW,CAAC,CAAA,CAAA;AAAA,MAC5F,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,gBAAA,EAAmB,MAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,CAAA;AAAA,MACvD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,eAAA;AAAA,IACP,WAAA,EAAa;AAAA,GACf;AACF;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,UAAA,EAAY,UAAU,MAAA,EAAO,GAAuB,EAAC,KAAM;AACxF,EAAA,MAAM,EAAE,OAAO,WAAA,EAAY,GAAI,cAAc,EAAE,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,CAAA;AAC7E,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EACb,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAA,sBAAW,eAAA,EAAA,EAAgB,CAAA;AAAA,MAC3B,SAAA,EAAW,KAAA;AAAA,MACX,eAAA,EAAiB,WAAA;AAAA,MACjB,UAAA,kBACE,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,EAAA,EAAG,GAAA;AAAA,UACH,IAAA,EAAK,0DAAA;AAAA,UACL,MAAA,EAAO,QAAA;AAAA,UACP,GAAA,EAAI,qBAAA;AAAA,UACL,QAAA,EAAA;AAAA,YAAA,wBAAA;AAAA,gCACwB,gBAAA,EAAA,EAAiB;AAAA;AAAA;AAAA;AAC1C;AAAA,GAEJ,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/shared.cjs.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const icons_AgentIcon = require('../../../icons/AgentIcon.cjs.js');
+const icons_FolderIcon = require('../../../icons/FolderIcon.cjs.js');
+const icons_McpServerIcon = require('../../../icons/McpServerIcon.cjs.js');
+const icons_MemoryIcon = require('../../../icons/MemoryIcon.cjs.js');
+const icons_ToolsIcon = require('../../../icons/ToolsIcon.cjs.js');
+const icons_WorkflowIcon = require('../../../icons/WorkflowIcon.cjs.js');
+
+const spanTypePrefixes = ["agent", "workflow", "model", "mcp", "tool", "memory", "workspace", "scorer", "other"];
+const spanTypeToUiElements = {
+  agent: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(icons_AgentIcon.AgentIcon, {}),
+    color: "oklch(0.75 0.15 250)",
+    label: "Agent",
+    typePrefix: "agent"
+  },
+  workflow: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(icons_WorkflowIcon.WorkflowIcon, {}),
+    color: "oklch(0.75 0.15 200)",
+    label: "Workflow",
+    typePrefix: "workflow"
+  },
+  model: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrainIcon, {}),
+    color: "oklch(0.75 0.15 320)",
+    label: "Model",
+    typePrefix: "model"
+  },
+  mcp: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(icons_McpServerIcon.McpServerIcon, {}),
+    color: "oklch(0.75 0.15 160)",
+    label: "MCP",
+    typePrefix: "mcp"
+  },
+  tool: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(icons_ToolsIcon.ToolsIcon, {}),
+    color: "oklch(0.75 0.15 100)",
+    label: "Tool",
+    typePrefix: "tool"
+  },
+  memory: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(icons_MemoryIcon.MemoryIcon, {}),
+    color: "oklch(0.75 0.15 60)",
+    label: "Memory",
+    typePrefix: "memory"
+  },
+  workspace: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(icons_FolderIcon.FolderIcon, {}),
+    color: "oklch(0.75 0.15 40)",
+    label: "Workspace",
+    typePrefix: "workspace"
+  },
+  scorer: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
+    color: "oklch(0.75 0.15 280)",
+    label: "Scorer",
+    typePrefix: "scorer"
+  }
+};
+const otherSpanType = {
+  color: "oklch(0.65 0 0)",
+  label: "Other",
+  typePrefix: "other"
+};
+function getSpanTypeUi(type) {
+  const typePrefix = type?.toLowerCase().split("_")[0];
+  return spanTypeToUiElements[typePrefix] ?? otherSpanType;
+}
+
+exports.getSpanTypeUi = getSpanTypeUi;
+exports.spanTypePrefixes = spanTypePrefixes;
+//# sourceMappingURL=shared.cjs.js.map

package/dist/domains/traces/components/shared.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.cjs.js","sources":["../../../../src/domains/traces/components/shared.tsx"],"sourcesContent":["import { BrainIcon, GaugeIcon } from 'lucide-react';\nimport type { UISpanStyle } from '../types';\nimport { AgentIcon } from '@/ds/icons/AgentIcon';\nimport { FolderIcon } from '@/ds/icons/FolderIcon';\nimport { McpServerIcon } from '@/ds/icons/McpServerIcon';\nimport { MemoryIcon } from '@/ds/icons/MemoryIcon';\nimport { ToolsIcon } from '@/ds/icons/ToolsIcon';\nimport { WorkflowIcon } from '@/ds/icons/WorkflowIcon';\n\nexport const spanTypePrefixes = ['agent', 'workflow', 'model', 'mcp', 'tool', 'memory', 'workspace', 'scorer', 'other'];\n\nconst spanTypeToUiElements: Record<string, UISpanStyle> = {\n  agent: {\n    icon: <AgentIcon />,\n    color: 'oklch(0.75 0.15 250)',\n    label: 'Agent',\n    typePrefix: 'agent',\n  },\n  workflow: {\n    icon: <WorkflowIcon />,\n    color: 'oklch(0.75 0.15 200)',\n    label: 'Workflow',\n    typePrefix: 'workflow',\n  },\n  model: {\n    icon: <BrainIcon />,\n    color: 'oklch(0.75 0.15 320)',\n    label: 'Model',\n    typePrefix: 'model',\n  },\n  mcp: {\n    icon: <McpServerIcon />,\n    color: 'oklch(0.75 0.15 160)',\n    label: 'MCP',\n    typePrefix: 'mcp',\n  },\n  tool: {\n    icon: <ToolsIcon />,\n    color: 'oklch(0.75 0.15 100)',\n    label: 'Tool',\n    typePrefix: 'tool',\n  },\n  memory: {\n    icon: <MemoryIcon />,\n    color: 'oklch(0.75 0.15 60)',\n    label: 'Memory',\n    typePrefix: 'memory',\n  },\n  workspace: {\n    icon: <FolderIcon />,\n    color: 'oklch(0.75 0.15 40)',\n    label: 'Workspace',\n    typePrefix: 'workspace',\n  },\n  scorer: {\n    icon: <GaugeIcon />,\n    color: 'oklch(0.75 0.15 280)',\n    label: 'Scorer',\n    typePrefix: 'scorer',\n  },\n};\n\nconst otherSpanType: UISpanStyle = {\n  color: 'oklch(0.65 0 0)',\n  label: 'Other',\n  typePrefix: 'other',\n};\n\nexport function getSpanTypeUi(type: string) {\n  const typePrefix = type?.toLowerCase().split('_')[0];\n  return spanTypeToUiElements[typePrefix] ?? otherSpanType;\n}\n"],"names":["AgentIcon","WorkflowIcon","BrainIcon","McpServerIcon","ToolsIcon","MemoryIcon","FolderIcon","GaugeIcon"],"mappings":";;;;;;;;;;;;;AASO,MAAM,gBAAA,GAAmB,CAAC,OAAA,EAAS,UAAA,EAAY,OAAA,EAAS,OAAO,MAAA,EAAQ,QAAA,EAAU,WAAA,EAAa,QAAA,EAAU,OAAO;AAEtH,MAAM,oBAAA,GAAoD;AAAA,EACxD,KAAA,EAAO;AAAA,IACL,IAAA,iCAAOA,yBAAA,EAAA,EAAU,CAAA;AAAA,IACjB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,OAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,iCAAOC,+BAAA,EAAA,EAAa,CAAA;AAAA,IACpB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,UAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,iCAAOC,qBAAA,EAAA,EAAU,CAAA;AAAA,IACjB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,OAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,iCAAOC,iCAAA,EAAA,EAAc,CAAA;AAAA,IACrB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,KAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,iCAAOC,yBAAA,EAAA,EAAU,CAAA;AAAA,IACjB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,MAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,iCAAOC,2BAAA,EAAA,EAAW,CAAA;AAAA,IAClB,KAAA,EAAO,qBAAA;AAAA,IACP,KAAA,EAAO,QAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,iCAAOC,2BAAA,EAAA,EAAW,CAAA;AAAA,IAClB,KAAA,EAAO,qBAAA;AAAA,IACP,KAAA,EAAO,WAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,iCAAOC,qBAAA,EAAA,EAAU,CAAA;AAAA,IACjB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,QAAA;AAAA,IACP,UAAA,EAAY;AAAA;AAEhB,CAAA;AAEA,MAAM,aAAA,GAA6B;AAAA,EACjC,KAAA,EAAO,iBAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,UAAA,EAAY;AACd,CAAA;AAEO,SAAS,cAAc,IAAA,EAAc;AAC1C,EAAA,MAAM,aAAa,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACnD,EAAA,OAAO,oBAAA,CAAqB,UAAU,CAAA,IAAK,aAAA;AAC7C;;;;;"}

package/dist/domains/traces/components/shared.d.ts

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

package/dist/domains/traces/components/shared.es.js

@@ -0,0 +1,72 @@
+import { jsx } from 'react/jsx-runtime';
+import { GaugeIcon, BrainIcon } from 'lucide-react';
+import { AgentIcon } from '../../../icons/AgentIcon.es.js';
+import { FolderIcon } from '../../../icons/FolderIcon.es.js';
+import { McpServerIcon } from '../../../icons/McpServerIcon.es.js';
+import { MemoryIcon } from '../../../icons/MemoryIcon.es.js';
+import { ToolsIcon } from '../../../icons/ToolsIcon.es.js';
+import { WorkflowIcon } from '../../../icons/WorkflowIcon.es.js';
+
+const spanTypePrefixes = ["agent", "workflow", "model", "mcp", "tool", "memory", "workspace", "scorer", "other"];
+const spanTypeToUiElements = {
+  agent: {
+    icon: /* @__PURE__ */ jsx(AgentIcon, {}),
+    color: "oklch(0.75 0.15 250)",
+    label: "Agent",
+    typePrefix: "agent"
+  },
+  workflow: {
+    icon: /* @__PURE__ */ jsx(WorkflowIcon, {}),
+    color: "oklch(0.75 0.15 200)",
+    label: "Workflow",
+    typePrefix: "workflow"
+  },
+  model: {
+    icon: /* @__PURE__ */ jsx(BrainIcon, {}),
+    color: "oklch(0.75 0.15 320)",
+    label: "Model",
+    typePrefix: "model"
+  },
+  mcp: {
+    icon: /* @__PURE__ */ jsx(McpServerIcon, {}),
+    color: "oklch(0.75 0.15 160)",
+    label: "MCP",
+    typePrefix: "mcp"
+  },
+  tool: {
+    icon: /* @__PURE__ */ jsx(ToolsIcon, {}),
+    color: "oklch(0.75 0.15 100)",
+    label: "Tool",
+    typePrefix: "tool"
+  },
+  memory: {
+    icon: /* @__PURE__ */ jsx(MemoryIcon, {}),
+    color: "oklch(0.75 0.15 60)",
+    label: "Memory",
+    typePrefix: "memory"
+  },
+  workspace: {
+    icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+    color: "oklch(0.75 0.15 40)",
+    label: "Workspace",
+    typePrefix: "workspace"
+  },
+  scorer: {
+    icon: /* @__PURE__ */ jsx(GaugeIcon, {}),
+    color: "oklch(0.75 0.15 280)",
+    label: "Scorer",
+    typePrefix: "scorer"
+  }
+};
+const otherSpanType = {
+  color: "oklch(0.65 0 0)",
+  label: "Other",
+  typePrefix: "other"
+};
+function getSpanTypeUi(type) {
+  const typePrefix = type?.toLowerCase().split("_")[0];
+  return spanTypeToUiElements[typePrefix] ?? otherSpanType;
+}
+
+export { getSpanTypeUi, spanTypePrefixes };
+//# sourceMappingURL=shared.es.js.map

package/dist/domains/traces/components/shared.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.es.js","sources":["../../../../src/domains/traces/components/shared.tsx"],"sourcesContent":["import { BrainIcon, GaugeIcon } from 'lucide-react';\nimport type { UISpanStyle } from '../types';\nimport { AgentIcon } from '@/ds/icons/AgentIcon';\nimport { FolderIcon } from '@/ds/icons/FolderIcon';\nimport { McpServerIcon } from '@/ds/icons/McpServerIcon';\nimport { MemoryIcon } from '@/ds/icons/MemoryIcon';\nimport { ToolsIcon } from '@/ds/icons/ToolsIcon';\nimport { WorkflowIcon } from '@/ds/icons/WorkflowIcon';\n\nexport const spanTypePrefixes = ['agent', 'workflow', 'model', 'mcp', 'tool', 'memory', 'workspace', 'scorer', 'other'];\n\nconst spanTypeToUiElements: Record<string, UISpanStyle> = {\n  agent: {\n    icon: <AgentIcon />,\n    color: 'oklch(0.75 0.15 250)',\n    label: 'Agent',\n    typePrefix: 'agent',\n  },\n  workflow: {\n    icon: <WorkflowIcon />,\n    color: 'oklch(0.75 0.15 200)',\n    label: 'Workflow',\n    typePrefix: 'workflow',\n  },\n  model: {\n    icon: <BrainIcon />,\n    color: 'oklch(0.75 0.15 320)',\n    label: 'Model',\n    typePrefix: 'model',\n  },\n  mcp: {\n    icon: <McpServerIcon />,\n    color: 'oklch(0.75 0.15 160)',\n    label: 'MCP',\n    typePrefix: 'mcp',\n  },\n  tool: {\n    icon: <ToolsIcon />,\n    color: 'oklch(0.75 0.15 100)',\n    label: 'Tool',\n    typePrefix: 'tool',\n  },\n  memory: {\n    icon: <MemoryIcon />,\n    color: 'oklch(0.75 0.15 60)',\n    label: 'Memory',\n    typePrefix: 'memory',\n  },\n  workspace: {\n    icon: <FolderIcon />,\n    color: 'oklch(0.75 0.15 40)',\n    label: 'Workspace',\n    typePrefix: 'workspace',\n  },\n  scorer: {\n    icon: <GaugeIcon />,\n    color: 'oklch(0.75 0.15 280)',\n    label: 'Scorer',\n    typePrefix: 'scorer',\n  },\n};\n\nconst otherSpanType: UISpanStyle = {\n  color: 'oklch(0.65 0 0)',\n  label: 'Other',\n  typePrefix: 'other',\n};\n\nexport function getSpanTypeUi(type: string) {\n  const typePrefix = type?.toLowerCase().split('_')[0];\n  return spanTypeToUiElements[typePrefix] ?? otherSpanType;\n}\n"],"names":[],"mappings":";;;;;;;;;AASO,MAAM,gBAAA,GAAmB,CAAC,OAAA,EAAS,UAAA,EAAY,OAAA,EAAS,OAAO,MAAA,EAAQ,QAAA,EAAU,WAAA,EAAa,QAAA,EAAU,OAAO;AAEtH,MAAM,oBAAA,GAAoD;AAAA,EACxD,KAAA,EAAO;AAAA,IACL,IAAA,sBAAO,SAAA,EAAA,EAAU,CAAA;AAAA,IACjB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,OAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,sBAAO,YAAA,EAAA,EAAa,CAAA;AAAA,IACpB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,UAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,sBAAO,SAAA,EAAA,EAAU,CAAA;AAAA,IACjB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,OAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,sBAAO,aAAA,EAAA,EAAc,CAAA;AAAA,IACrB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,KAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,sBAAO,SAAA,EAAA,EAAU,CAAA;AAAA,IACjB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,MAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,sBAAO,UAAA,EAAA,EAAW,CAAA;AAAA,IAClB,KAAA,EAAO,qBAAA;AAAA,IACP,KAAA,EAAO,QAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,sBAAO,UAAA,EAAA,EAAW,CAAA;AAAA,IAClB,KAAA,EAAO,qBAAA;AAAA,IACP,KAAA,EAAO,WAAA;AAAA,IACP,UAAA,EAAY;AAAA,GACd;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,sBAAO,SAAA,EAAA,EAAU,CAAA;AAAA,IACjB,KAAA,EAAO,sBAAA;AAAA,IACP,KAAA,EAAO,QAAA;AAAA,IACP,UAAA,EAAY;AAAA;AAEhB,CAAA;AAEA,MAAM,aAAA,GAA6B;AAAA,EACjC,KAAA,EAAO,iBAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,UAAA,EAAY;AACd,CAAA;AAEO,SAAS,cAAc,IAAA,EAAc;AAC1C,EAAA,MAAM,aAAa,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACnD,EAAA,OAAO,oBAAA,CAAqB,UAAU,CAAA,IAAK,aAAA;AAC7C;;;;"}

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

@@ -0,0 +1,279 @@
+'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 domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
+const domains_traces_components_spanTokenUsage = require('./span-token-usage.cjs.js');
+const buttonsGroup = require('../../../buttons-group-C0fJastT.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-B-K23j9Y.cjs');
+const dataPanel = require('../../../data-panel-D7TbjekV.cjs');
+const Notice = require('../../../Notice-h63wsfzJ.cjs');
+const tabsTab = require('../../../tabs-tab-B7Ziuuh8.cjs');
+const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
+
+function buildDialogTitle(sectionTitle, icon, span) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 text-neutral2 uppercase tracking-widest [&>svg]:size-3.5", children: [
+      icon,
+      sectionTitle
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "› Span ",
+      /* @__PURE__ */ jsxRuntime.jsxs("b", { className: "text-neutral3", children: [
+        "#",
+        span.spanId
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "› Trace ",
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(dataPanel.DataPanel, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+          "# ",
+          spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dataPanel.DataPanel.NextPrevNav,
+          {
+            onPrevious,
+            onNext,
+            previousLabel: "Previous span",
+            nextLabel: "Next span"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.LoadingData, { children: "Loading span details..." }) : !span ? /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.NoData, { children: "Span not found." }) : /* @__PURE__ */ jsxRuntime.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__ */ 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) }) }) }),
+    usage && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTokenUsage.SpanTokenUsage, { usage, className: "mb-3" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(dataKeysAndValues.DataKeysAndValues, { children: [
+      (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        span.traceId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Trace Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Trace Id to clipboard", copyValue: span.traceId, children: span.traceId })
+        ] }),
+        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(", ") })
+        ] }),
+        span.runId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Run Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Run Id to clipboard", copyValue: span.runId, children: span.runId })
+        ] }),
+        span.threadId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Thread Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Thread Id to clipboard", copyValue: span.threadId, children: span.threadId })
+        ] }),
+        span.sessionId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Session Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Session Id to clipboard",
+              copyValue: span.sessionId,
+              children: span.sessionId
+            }
+          )
+        ] }),
+        span.requestId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Request Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Request Id to clipboard",
+              copyValue: span.requestId,
+              children: span.requestId
+            }
+          )
+        ] }),
+        span.resourceId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Resource Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Resource Id to clipboard",
+              copyValue: span.resourceId,
+              children: span.resourceId
+            }
+          )
+        ] }),
+        span.userId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "User Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy User Id to clipboard", copyValue: span.userId, children: span.userId })
+        ] }),
+        span.organizationId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Organization Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Organization Id to clipboard",
+              copyValue: span.organizationId,
+              children: span.organizationId
+            }
+          )
+        ] }),
+        span.experimentId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Experiment Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            dataKeysAndValues.DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Experiment Id to clipboard",
+              copyValue: span.experimentId,
+              children: span.experimentId
+            }
+          )
+        ] })
+      ] }),
+      span.name && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: span.name })
+      ] }),
+      span.spanType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Type" }),
+        /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: span.spanType })
+      ] }),
+      span.startedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Started" }),
+        /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.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(dataKeysAndValues.DataKeysAndValues.Key, { children: "Ended" }),
+        /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.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(dataKeysAndValues.DataKeysAndValues.Key, { children: "Duration" }),
+        /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 mt-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        dataPanel.DataPanel.CodeSection,
+        {
+          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)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        dataPanel.DataPanel.CodeSection,
+        {
+          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)
+        }
+      ),
+      /* @__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)
+        }
+      )
+    ] })
+  ] });
+  if (!scoringTabSlot && !feedbackTabSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: detailsBody });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.Tabs, { defaultTab: "details", value: activeTab, onValueChange: onTabChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.TabList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "details", children: "Details" }),
+      scoringTabSlot && /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.Tab, { value: "scoring", children: [
+        "Scoring ",
+        scoringTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "(",
+          scoringTabBadge,
+          ")"
+        ] })
+      ] }),
+      feedbackTabSlot && /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.Tab, { value: "feedback", children: [
+        "Feedback ",
+        feedbackTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "(",
+          feedbackTabBadge,
+          ")"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "details", children: detailsBody }),
+    scoringTabSlot && /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "scoring", children: scoringTabSlot({ span, traceId, spanId }) }),
+    feedbackTabSlot && /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "feedback", children: feedbackTabSlot({ span, traceId, spanId }) })
+  ] }) });
+}
+
+exports.SpanDataPanelView = SpanDataPanelView;
+//# sourceMappingURL=span-data-panel-view.cjs.js.map