@mastra/playground-ui 43.0.0-alpha.1 → 43.0.0-alpha.2

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

@@ -8,15 +8,15 @@ 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-Dw8Wu4sj.cjs');
-const dataKeysAndValues = require('../../../data-keys-and-values--e2u0YXB.cjs');
-const dataPanel = require('../../../data-panel-CsonAnlK.cjs');
-const Notice = require('../../../Notice-WhHdy89l.cjs');
-const tabsTab = require('../../../tabs-tab-Ch7-lVxf.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-sjag88jf.cjs');
+const dataPanel = require('../../../data-panel-BumsjXVz.cjs');
+const Notice = require('../../../Notice-D7mbkdZW.cjs');
+const tabsTab = require('../../../tabs-tab-BkUCE-4E.cjs');
 const tabsContent = require('../../../tabs-content-wBU5qmb6.cjs');
 
 function buildDialogTitle(sectionTitle, icon, span) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 tracking-widest text-neutral2 uppercase [&>svg]:size-3.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5", children: [
       icon,
       sectionTitle
     ] }),

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

@@ -1 +1 @@
-{"version":3,"file":"span-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { 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 tracking-widest text-neutral2 uppercase [&>svg]:size-3.5\">\n        {icon}\n        {sectionTitle}\n      </span>\n      <span>\n        › Span <b className=\"text-neutral3\">#{span.spanId}</b>\n      </span>\n      <span>\n        › Trace <b className=\"text-neutral3\">#{span.traceId}</b>\n      </span>\n    </>\n  );\n}\n\nexport interface SpanDataPanelViewProps {\n  traceId: string;\n  spanId: string;\n  /** Full span record. Caller fetches via useSpanDetail. */\n  span: SpanRecord | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  activeTab?: string;\n  onTabChange?: (tab: string) => void;\n  /**\n   * When provided, a \"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=\"mt-3 grid gap-3\">\n        <DataPanel.CodeSection\n          title=\"Input\"\n          dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n          icon={<FileInputIcon />}\n          codeStr={JSON.stringify(span.input ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Output\"\n          dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n          icon={<FileOutputIcon />}\n          codeStr={JSON.stringify(span.output ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Metadata\"\n          dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Attributes\"\n          dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n        />\n      </div>\n    </>\n  );\n\n  // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n  if (!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":";;;;;;;;;;;;;;;;AAaA,SAAS,gBAAA,CAAiB,YAAA,EAAsB,IAAA,EAAiB,IAAA,EAA2C;AAC1G,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,MAAA,EAAA,EAAK,WAAU,oFAAA,EACb,QAAA,EAAA;AAAA,MAAA,IAAA;AAAA,MACA;AAAA,KAAA,EACH,CAAA;AAAA,oCACC,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,MAAA,SAAA;AAAA,sBACGA,eAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,eAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,IAAA,CAAK;AAAA,OAAA,EAAO;AAAA,KAAA,EACpD,CAAA;AAAA,oCACC,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,sBACIA,eAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,eAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,IAAA,CAAK;AAAA,OAAA,EAAQ;AAAA,KAAA,EACtD;AAAA,GAAA,EACF,CAAA;AAEJ;AAmCO,SAAS,iBAAA,CAAkB;AAAA,EAChC,OAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,uCACGE,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAF,eAAA,CAACE,mBAAA,CAAU,QAAV,EACC,QAAA,EAAA;AAAA,sBAAAF,eAAA,CAACE,mBAAA,CAAU,SAAV,EAAkB,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wCACX,GAAA,EAAA,EAAE,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,UAAG;AAAA,SAAA,EAAO;AAAA,OAAA,EACpB,CAAA;AAAA,sBACAF,eAAA,CAACG,yBAAA,EAAA,EAAa,SAAA,EAAU,kBAAA,EACtB,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACF,mBAAA,CAAU,WAAA;AAAA,UAAV;AAAA,YACC,UAAA;AAAA,YACA,MAAA;AAAA,YACA,aAAA,EAAc,eAAA;AAAA,YACd,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBACAE,cAAA,CAACF,mBAAA,CAAU,WAAA,EAAV,EAAsB,SAAS,OAAA,EAAS;AAAA,OAAA,EAC3C;AAAA,KAAA,EACF,CAAA;AAAA,IAEC,SAAA,mBACCE,cAAA,CAACF,mBAAA,CAAU,WAAA,EAAV,EAAsB,QAAA,EAAA,yBAAA,EAAuB,CAAA,GAC5C,CAAC,IAAA,mBACHE,cAAA,CAACF,mBAAA,CAAU,MAAA,EAAV,EAAiB,6BAAe,CAAA,mBAEjCE,cAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA;AAAA,QACA,eAAA;AAAA,QACA,eAAA;AAAA,QACA,gBAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AAEA,SAAS,oBAAA,CAAqB;AAAA,EAC5B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAWG;AACD,EAAA,MAAM,aACJ,IAAA,CAAK,SAAA,IAAa,KAAK,OAAA,GAAU,IAAI,KAAK,IAAA,CAAK,OAAO,CAAA,CAAE,OAAA,KAAY,IAAI,IAAA,CAAK,KAAK,SAAS,CAAA,CAAE,SAAQ,GAAI,IAAA;AAC3G,EAAA,MAAM,KAAA,GAAQ,KAAK,UAAA,EAAY,KAAA;AAE/B,EAAA,MAAM,8BACJJ,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAAI,mDAAA,CAAqB,IAAI,qBACxBD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,MAAA,EACb,QAAA,kBAAAA,cAAA,CAACE,iBAAO,OAAA,EAAQ,SAAA,EAAU,OAAM,sBAAA,EAC9B,QAAA,kBAAAF,cAAA,CAACE,cAAO,OAAA,EAAP,EAAgB,8DAAqB,IAAI,CAAA,EAAE,GAC9C,CAAA,EACF,CAAA;AAAA,IAGD,KAAA,oBAASF,cAAA,CAACG,uDAAA,EAAA,EAAe,KAAA,EAAc,WAAU,MAAA,EAAO,CAAA;AAAA,oCAExDC,mCAAA,EAAA,EAGG,QAAA,EAAA;AAAA,MAAA,CAAA,QAAA,IAAY,IAAA,CAAK,YAAA,IAAgB,IAAA,qBACjCR,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,2BACJD,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,0BAC/BJ,cAAA,CAACI,mCAAA,CAAkB,gBAAA,EAAlB,EAAmC,WAAA,EAAY,8BAA6B,SAAA,EAAW,IAAA,CAAK,OAAA,EAC1F,QAAA,EAAA,IAAA,CAAK,OAAA,EACR;AAAA,SAAA,EACF,CAAA;AAAA,QAED,KAAK,IAAA,IAAQ,IAAA,CAAK,IAAA,CAAK,MAAA,GAAS,qBAC/BR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,0BAC3BJ,cAAA,CAACI,oCAAkB,KAAA,EAAlB,EAAyB,eAAK,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA,EAAE;AAAA,SAAA,EACjD,CAAA;AAAA,QAED,IAAA,CAAK,yBACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,0BAC7BJ,cAAA,CAACI,mCAAA,CAAkB,gBAAA,EAAlB,EAAmC,WAAA,EAAY,4BAA2B,SAAA,EAAW,IAAA,CAAK,KAAA,EACxF,QAAA,EAAA,IAAA,CAAK,KAAA,EACR;AAAA,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,4BACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,0BAChCJ,cAAA,CAACI,mCAAA,CAAkB,gBAAA,EAAlB,EAAmC,WAAA,EAAY,+BAA8B,SAAA,EAAW,IAAA,CAAK,QAAA,EAC3F,QAAA,EAAA,IAAA,CAAK,QAAA,EACR;AAAA,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,6BACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,0BACjCJ,cAAA;AAAA,YAACI,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,8BAAA;AAAA,cACZ,WAAW,IAAA,CAAK,SAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,6BACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,0BACjCJ,cAAA;AAAA,YAACI,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,8BAAA;AAAA,cACZ,WAAW,IAAA,CAAK,SAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,8BACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,0BAClCJ,cAAA;AAAA,YAACI,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,+BAAA;AAAA,cACZ,WAAW,IAAA,CAAK,UAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,0BACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,0BAC9BJ,cAAA,CAACI,mCAAA,CAAkB,gBAAA,EAAlB,EAAmC,WAAA,EAAY,6BAA4B,SAAA,EAAW,IAAA,CAAK,MAAA,EACzF,QAAA,EAAA,IAAA,CAAK,MAAA,EACR;AAAA,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,kCACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,iBAAA,EAAe,CAAA;AAAA,0BACtCJ,cAAA;AAAA,YAACI,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,mCAAA;AAAA,cACZ,WAAW,IAAA,CAAK,cAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,gCACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,0BACpCJ,cAAA;AAAA,YAACI,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,iCAAA;AAAA,cACZ,WAAW,IAAA,CAAK,YAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF;AAAA,OAAA,EAEJ,CAAA;AAAA,MAED,IAAA,CAAK,wBACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,wBAC3BJ,cAAA,CAACI,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,eAAK,IAAA,EAAK;AAAA,OAAA,EACtC,CAAA;AAAA,MAED,IAAA,CAAK,4BACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,wBAC3BJ,cAAA,CAACI,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,eAAK,QAAA,EAAS;AAAA,OAAA,EAC1C,CAAA;AAAA,MAED,IAAA,CAAK,6BACJR,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,wBAC9BJ,cAAA,CAACI,mCAAA,CAAkB,KAAA,EAAlB,EACE,QAAA,EAAAC,cAAA,CAAO,IAAI,IAAA,CAAK,IAAA,CAAK,SAAS,CAAA,EAAG,sBAAsB,CAAA,EAC1D;AAAA,OAAA,EACF,CAAA;AAAA,MAED,IAAA,CAAK,2BACJT,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,wBAC5BJ,cAAA,CAACI,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAAC,cAAA,CAAO,IAAI,IAAA,CAAK,IAAA,CAAK,OAAO,CAAA,EAAG,sBAAsB,CAAA,EAAE;AAAA,OAAA,EACnF,CAAA;AAAA,MAED,UAAA,IAAc,wBACbT,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAG,cAAA,CAACI,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,wBAC/BJ,cAAA,CAACI,mCAAA,CAAkB,KAAA,EAAlB,EACE,uBAAa,GAAA,GAAO,CAAA,EAAG,UAAU,CAAA,EAAA,CAAA,GAAO,IAAI,UAAA,GAAa,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA,EAC5E;AAAA,OAAA,EACF;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAEAR,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAA,EACb,QAAA,EAAA;AAAA,sBAAAI,cAAA;AAAA,QAACF,mBAAA,CAAU,WAAA;AAAA,QAAV;AAAA,UACC,KAAA,EAAM,OAAA;AAAA,UACN,WAAA,EAAa,iBAAiB,OAAA,kBAASE,cAAA,CAACM,6BAAc,CAAA,EAAI,EAAE,MAAA,EAAQ,OAAA,EAAS,CAAA;AAAA,UAC7E,IAAA,iCAAOA,yBAAA,EAAA,EAAc,CAAA;AAAA,UACrB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,KAAA,IAAS,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACrD;AAAA,sBACAN,cAAA;AAAA,QAACF,mBAAA,CAAU,WAAA;AAAA,QAAV;AAAA,UACC,KAAA,EAAM,QAAA;AAAA,UACN,WAAA,EAAa,iBAAiB,QAAA,kBAAUE,cAAA,CAACO,8BAAe,CAAA,EAAI,EAAE,MAAA,EAAQ,OAAA,EAAS,CAAA;AAAA,UAC/E,IAAA,iCAAOA,0BAAA,EAAA,EAAe,CAAA;AAAA,UACtB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,MAAA,IAAU,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACtD;AAAA,sBACAP,cAAA;AAAA,QAACF,mBAAA,CAAU,WAAA;AAAA,QAAV;AAAA,UACC,KAAA,EAAM,UAAA;AAAA,UACN,WAAA,EAAa,iBAAiB,UAAA,kBAAYE,cAAA,CAACQ,0BAAW,CAAA,EAAI,EAAE,MAAA,EAAQ,OAAA,EAAS,CAAA;AAAA,UAC7E,IAAA,iCAAOA,sBAAA,EAAA,EAAW,CAAA;AAAA,UAClB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,QAAA,IAAY,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACxD;AAAA,sBACAR,cAAA;AAAA,QAACF,mBAAA,CAAU,WAAA;AAAA,QAAV;AAAA,UACC,KAAA,EAAM,YAAA;AAAA,UACN,WAAA,EAAa,iBAAiB,YAAA,kBAAcE,cAAA,CAACQ,0BAAW,CAAA,EAAI,EAAE,MAAA,EAAQ,OAAA,EAAS,CAAA;AAAA,UAC/E,IAAA,iCAAOA,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,EACF,CAAA;AAIF,EAAA,IAAI,CAAC,cAAA,IAAkB,CAAC,eAAA,EAAiB;AACvC,IAAA,uBAAOR,cAAA,CAACF,mBAAA,CAAU,OAAA,EAAV,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,EACzC;AAEA,EAAA,uBACEE,cAAA,CAACF,mBAAA,CAAU,OAAA,EAAV,EACC,QAAA,kBAAAF,eAAA,CAACa,YAAA,EAAA,EAAK,UAAA,EAAW,SAAA,EAAU,KAAA,EAAO,SAAA,EAAW,aAAA,EAAe,WAAA,EAC1D,QAAA,EAAA;AAAA,oBAAAb,eAAA,CAACc,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAV,cAAA,CAACW,WAAA,EAAA,EAAI,KAAA,EAAM,SAAA,EAAU,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,MAC3B,cAAA,oBAAkBf,eAAA,CAACe,WAAA,EAAA,EAAI,KAAA,EAAM,SAAA,EAAU,QAAA,EAAA;AAAA,QAAA,UAAA;AAAA,QAAS,eAAA,IAAmB,wBAAQf,eAAA,CAAAC,mBAAA,EAAA,EAAE,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UAAE,eAAA;AAAA,UAAgB;AAAA,SAAA,EAAC;AAAA,OAAA,EAAI,CAAA;AAAA,MACpG,eAAA,oBACCD,eAAA,CAACe,WAAA,EAAA,EAAI,KAAA,EAAM,UAAA,EAAW,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,QAAU,gBAAA,IAAoB,wBAAQf,eAAA,CAAAC,mBAAA,EAAA,EAAE,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UAAE,gBAAA;AAAA,UAAiB;AAAA,SAAA,EAAC;AAAA,OAAA,EAAI;AAAA,KAAA,EAE1F,CAAA;AAAA,oBAEAG,cAAA,CAACY,sBAAA,EAAA,EAAW,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,IACxC,cAAA,oBAAkBZ,cAAA,CAACY,sBAAA,EAAA,EAAW,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,cAAA,CAAe,EAAE,IAAA,EAAM,OAAA,EAAS,MAAA,EAAQ,CAAA,EAAE,CAAA;AAAA,IACzF,eAAA,oBAAmBZ,cAAA,CAACY,sBAAA,EAAA,EAAW,KAAA,EAAM,UAAA,EAAY,QAAA,EAAA,eAAA,CAAgB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAA,EAAQ,CAAA,EAAE;AAAA,GAAA,EAC/F,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"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=\"text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5\">\n        {icon}\n        {sectionTitle}\n      </span>\n      <span>\n        › Span <b className=\"text-neutral3\">#{span.spanId}</b>\n      </span>\n      <span>\n        › Trace <b className=\"text-neutral3\">#{span.traceId}</b>\n      </span>\n    </>\n  );\n}\n\nexport interface SpanDataPanelViewProps {\n  traceId: string;\n  spanId: string;\n  /** Full span record. Caller fetches via useSpanDetail. */\n  span: SpanRecord | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  activeTab?: string;\n  onTabChange?: (tab: string) => void;\n  /**\n   * When provided, a \"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=\"mt-3 grid gap-3\">\n        <DataPanel.CodeSection\n          title=\"Input\"\n          dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n          icon={<FileInputIcon />}\n          codeStr={JSON.stringify(span.input ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Output\"\n          dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n          icon={<FileOutputIcon />}\n          codeStr={JSON.stringify(span.output ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Metadata\"\n          dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Attributes\"\n          dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n        />\n      </div>\n    </>\n  );\n\n  // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n  if (!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.es.js

@@ -4,15 +4,15 @@ 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-DJh4wnMs.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-BMnGKbXm.js';
-import { D as DataPanel } from '../../../data-panel-BGpCzY5K.js';
-import { N as Notice } from '../../../Notice-jmHNt3gS.js';
-import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-CQhe76fQ.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-BJynhd6V.js';
+import { D as DataPanel } from '../../../data-panel-BEvHk4wg.js';
+import { N as Notice } from '../../../Notice-zWRcxcM3.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-DDGltcUc.js';
 import { T as TabContent } from '../../../tabs-content-XUh680fO.js';
 
 function buildDialogTitle(sectionTitle, icon, span) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 tracking-widest text-neutral2 uppercase [&>svg]:size-3.5", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5", children: [
       icon,
       sectionTitle
     ] }),

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

@@ -1 +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 tracking-widest text-neutral2 uppercase [&>svg]:size-3.5\">\n        {icon}\n        {sectionTitle}\n      </span>\n      <span>\n        › Span <b className=\"text-neutral3\">#{span.spanId}</b>\n      </span>\n      <span>\n        › Trace <b className=\"text-neutral3\">#{span.traceId}</b>\n      </span>\n    </>\n  );\n}\n\nexport interface SpanDataPanelViewProps {\n  traceId: string;\n  spanId: string;\n  /** Full span record. Caller fetches via useSpanDetail. */\n  span: SpanRecord | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  activeTab?: string;\n  onTabChange?: (tab: string) => void;\n  /**\n   * When provided, a \"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=\"mt-3 grid gap-3\">\n        <DataPanel.CodeSection\n          title=\"Input\"\n          dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n          icon={<FileInputIcon />}\n          codeStr={JSON.stringify(span.input ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Output\"\n          dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n          icon={<FileOutputIcon />}\n          codeStr={JSON.stringify(span.output ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Metadata\"\n          dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Attributes\"\n          dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n        />\n      </div>\n    </>\n  );\n\n  // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n  if (!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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"}
+{"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=\"text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5\">\n        {icon}\n        {sectionTitle}\n      </span>\n      <span>\n        › Span <b className=\"text-neutral3\">#{span.spanId}</b>\n      </span>\n      <span>\n        › Trace <b className=\"text-neutral3\">#{span.traceId}</b>\n      </span>\n    </>\n  );\n}\n\nexport interface SpanDataPanelViewProps {\n  traceId: string;\n  spanId: string;\n  /** Full span record. Caller fetches via useSpanDetail. */\n  span: SpanRecord | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  activeTab?: string;\n  onTabChange?: (tab: string) => void;\n  /**\n   * When provided, a \"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=\"mt-3 grid gap-3\">\n        <DataPanel.CodeSection\n          title=\"Input\"\n          dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n          icon={<FileInputIcon />}\n          codeStr={JSON.stringify(span.input ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Output\"\n          dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n          icon={<FileOutputIcon />}\n          codeStr={JSON.stringify(span.output ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Metadata\"\n          dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n        />\n        <DataPanel.CodeSection\n          title=\"Attributes\"\n          dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n          icon={<BracesIcon />}\n          codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n        />\n      </div>\n    </>\n  );\n\n  // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n  if (!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-token-usage.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_spanTokenUsage_utils = require('./span-token-usage.utils.cjs.js');
-const dataKeysAndValues = require('../../../data-keys-and-values--e2u0YXB.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-sjag88jf.cjs');
 const utils_cn = require('../../../cn-vA5sWo9W.cjs');
 
 const detailKeyLabels = {
@@ -28,17 +28,17 @@ function SpanTokenUsage({ usage, className }) {
       className: utils_cn.cn("mt-2 mb-8 grid grid-cols-1 border-b border-border1 pb-3 4xl:grid-cols-2 4xl:gap-12", className),
       children: [
         showSplit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-3 text-neutral2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-neutral2 flex items-baseline gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md", children: "Tokens Used" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md font-semibold text-neutral4", children: total.toLocaleString() }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto text-ui-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md text-neutral4 font-semibold", children: total.toLocaleString() }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm ml-auto", children: [
               Math.round(inputPct),
               "% Input vs ",
               Math.round(outputPct),
               "% Output"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-md bg-surface4 p-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 mt-2 rounded-md p-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -70,10 +70,10 @@ function UsageColumn({
   details
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-baseline gap-3 text-neutral2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-neutral2 mb-2 flex items-baseline gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md", children: label }),
       typeof value === "number" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-baseline gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md font-semibold text-neutral4", children: value.toLocaleString() }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md text-neutral4 font-semibold", children: value.toLocaleString() }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 self-center rounded-full", style: { backgroundColor: color } })
       ] })
     ] }),

package/dist/domains/traces/components/span-token-usage.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-token-usage.cjs.js","sources":["../../../../src/domains/traces/components/span-token-usage.tsx"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\nimport { Fragment } from 'react';\nimport { getTokenUsageView } from './span-token-usage.utils';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nconst detailKeyLabels: Record<string, string> = {\n  text: 'Text',\n  cacheRead: 'Cache read',\n  cacheWrite: 'Cache write',\n  audio: 'Audio',\n  image: 'Image',\n  reasoning: 'Reasoning',\n};\n\ntype SpanTokenUsageProps = {\n  usage: UsageStats;\n  className?: string;\n};\n\nconst INPUT_COLOR = 'oklch(0.78 0.16 320)';\nconst OUTPUT_COLOR = 'oklch(0.55 0.18 320)';\n\nexport function SpanTokenUsage({ usage, className }: SpanTokenUsageProps) {\n  const view = getTokenUsageView(usage);\n  if (!view) return null;\n\n  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;\n\n  return (\n    <div\n      className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border1 pb-3 4xl:grid-cols-2 4xl:gap-12', className)}\n    >\n      {showSplit && (\n        <div className=\"mb-2\">\n          <div className=\"flex items-baseline gap-3 text-neutral2\">\n            <span className=\"text-ui-md\">Tokens Used</span>\n            <span className=\"text-ui-md font-semibold text-neutral4\">{total.toLocaleString()}</span>\n            <span className=\"ml-auto text-ui-sm\">\n              {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n            </span>\n          </div>\n          <div className=\"mt-2 rounded-md bg-surface4 p-1.5\">\n            <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n              <div\n                className=\"absolute top-0 left-0 h-1.5\"\n                style={{ width: `${inputPct}%`, backgroundColor: INPUT_COLOR }}\n              />\n              <div\n                className=\"absolute top-0 h-1.5\"\n                style={{ left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-6\">\n        <UsageColumn label=\"Input\" color={INPUT_COLOR} value={inputValue} details={inputDetails} />\n        <UsageColumn label=\"Output\" color={OUTPUT_COLOR} value={outputValue} details={outputDetails} />\n      </div>\n    </div>\n  );\n}\n\nfunction UsageColumn({\n  label,\n  color,\n  value,\n  details,\n}: {\n  label: string;\n  color: string;\n  value?: number;\n  details?: TokenDetailsObject;\n}) {\n  return (\n    <div>\n      <div className=\"mb-2 flex items-baseline gap-3 text-neutral2\">\n        <span className=\"text-ui-md\">{label}</span>\n        {typeof value === 'number' && (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-ui-md font-semibold text-neutral4\">{value.toLocaleString()}</span>\n            <span className=\"size-2 self-center rounded-full\" style={{ backgroundColor: color }} />\n          </span>\n        )}\n      </div>\n      {details && <DetailsList details={details} />}\n    </div>\n  );\n}\n\nfunction DetailsList({ details }: { details: TokenDetailsObject }) {\n  return (\n    <DataKeysAndValues density=\"dense\">\n      {Object.entries(details).map(([detailKey, detailValue]) => {\n        if (typeof detailValue !== 'number') return null;\n        return (\n          <Fragment key={detailKey}>\n            <DataKeysAndValues.Key>{detailKeyLabels[detailKey] || detailKey}</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n          </Fragment>\n        );\n      })}\n    </DataKeysAndValues>\n  );\n}\n"],"names":["getTokenUsageView","jsxs","cn","jsx","DataKeysAndValues","Fragment"],"mappings":"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"}
+{"version":3,"file":"span-token-usage.cjs.js","sources":["../../../../src/domains/traces/components/span-token-usage.tsx"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\nimport { Fragment } from 'react';\nimport { getTokenUsageView } from './span-token-usage.utils';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nconst detailKeyLabels: Record<string, string> = {\n  text: 'Text',\n  cacheRead: 'Cache read',\n  cacheWrite: 'Cache write',\n  audio: 'Audio',\n  image: 'Image',\n  reasoning: 'Reasoning',\n};\n\ntype SpanTokenUsageProps = {\n  usage: UsageStats;\n  className?: string;\n};\n\nconst INPUT_COLOR = 'oklch(0.78 0.16 320)';\nconst OUTPUT_COLOR = 'oklch(0.55 0.18 320)';\n\nexport function SpanTokenUsage({ usage, className }: SpanTokenUsageProps) {\n  const view = getTokenUsageView(usage);\n  if (!view) return null;\n\n  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;\n\n  return (\n    <div\n      className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border1 pb-3 4xl:grid-cols-2 4xl:gap-12', className)}\n    >\n      {showSplit && (\n        <div className=\"mb-2\">\n          <div className=\"text-neutral2 flex items-baseline gap-3\">\n            <span className=\"text-ui-md\">Tokens Used</span>\n            <span className=\"text-ui-md text-neutral4 font-semibold\">{total.toLocaleString()}</span>\n            <span className=\"text-ui-sm ml-auto\">\n              {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n            </span>\n          </div>\n          <div className=\"bg-surface4 mt-2 rounded-md p-1.5\">\n            <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n              <div\n                className=\"absolute top-0 left-0 h-1.5\"\n                style={{ width: `${inputPct}%`, backgroundColor: INPUT_COLOR }}\n              />\n              <div\n                className=\"absolute top-0 h-1.5\"\n                style={{ left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-6\">\n        <UsageColumn label=\"Input\" color={INPUT_COLOR} value={inputValue} details={inputDetails} />\n        <UsageColumn label=\"Output\" color={OUTPUT_COLOR} value={outputValue} details={outputDetails} />\n      </div>\n    </div>\n  );\n}\n\nfunction UsageColumn({\n  label,\n  color,\n  value,\n  details,\n}: {\n  label: string;\n  color: string;\n  value?: number;\n  details?: TokenDetailsObject;\n}) {\n  return (\n    <div>\n      <div className=\"text-neutral2 mb-2 flex items-baseline gap-3\">\n        <span className=\"text-ui-md\">{label}</span>\n        {typeof value === 'number' && (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-ui-md text-neutral4 font-semibold\">{value.toLocaleString()}</span>\n            <span className=\"size-2 self-center rounded-full\" style={{ backgroundColor: color }} />\n          </span>\n        )}\n      </div>\n      {details && <DetailsList details={details} />}\n    </div>\n  );\n}\n\nfunction DetailsList({ details }: { details: TokenDetailsObject }) {\n  return (\n    <DataKeysAndValues density=\"dense\">\n      {Object.entries(details).map(([detailKey, detailValue]) => {\n        if (typeof detailValue !== 'number') return null;\n        return (\n          <Fragment key={detailKey}>\n            <DataKeysAndValues.Key>{detailKeyLabels[detailKey] || detailKey}</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n          </Fragment>\n        );\n      })}\n    </DataKeysAndValues>\n  );\n}\n"],"names":["getTokenUsageView","jsxs","cn","jsx","DataKeysAndValues","Fragment"],"mappings":"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"}

package/dist/domains/traces/components/span-token-usage.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { getTokenUsageView } from './span-token-usage.utils.es.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-BMnGKbXm.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-BJynhd6V.js';
 import { c as cn } from '../../../cn-BakJzhuv.js';
 
 const detailKeyLabels = {
@@ -24,17 +24,17 @@ function SpanTokenUsage({ usage, className }) {
       className: cn("mt-2 mb-8 grid grid-cols-1 border-b border-border1 pb-3 4xl:grid-cols-2 4xl:gap-12", className),
       children: [
         showSplit && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3 text-neutral2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-neutral2 flex items-baseline gap-3", children: [
             /* @__PURE__ */ jsx("span", { className: "text-ui-md", children: "Tokens Used" }),
-            /* @__PURE__ */ jsx("span", { className: "text-ui-md font-semibold text-neutral4", children: total.toLocaleString() }),
-            /* @__PURE__ */ jsxs("span", { className: "ml-auto text-ui-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-ui-md text-neutral4 font-semibold", children: total.toLocaleString() }),
+            /* @__PURE__ */ jsxs("span", { className: "text-ui-sm ml-auto", children: [
               Math.round(inputPct),
               "% Input vs ",
               Math.round(outputPct),
               "% Output"
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-md bg-surface4 p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-surface4 mt-2 rounded-md p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: [
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -66,10 +66,10 @@ function UsageColumn({
   details
 }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-baseline gap-3 text-neutral2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-neutral2 mb-2 flex items-baseline gap-3", children: [
       /* @__PURE__ */ jsx("span", { className: "text-ui-md", children: label }),
       typeof value === "number" && /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-ui-md font-semibold text-neutral4", children: value.toLocaleString() }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-md text-neutral4 font-semibold", children: value.toLocaleString() }),
         /* @__PURE__ */ jsx("span", { className: "size-2 self-center rounded-full", style: { backgroundColor: color } })
       ] })
     ] }),

package/dist/domains/traces/components/span-token-usage.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-token-usage.es.js","sources":["../../../../src/domains/traces/components/span-token-usage.tsx"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\nimport { Fragment } from 'react';\nimport { getTokenUsageView } from './span-token-usage.utils';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nconst detailKeyLabels: Record<string, string> = {\n  text: 'Text',\n  cacheRead: 'Cache read',\n  cacheWrite: 'Cache write',\n  audio: 'Audio',\n  image: 'Image',\n  reasoning: 'Reasoning',\n};\n\ntype SpanTokenUsageProps = {\n  usage: UsageStats;\n  className?: string;\n};\n\nconst INPUT_COLOR = 'oklch(0.78 0.16 320)';\nconst OUTPUT_COLOR = 'oklch(0.55 0.18 320)';\n\nexport function SpanTokenUsage({ usage, className }: SpanTokenUsageProps) {\n  const view = getTokenUsageView(usage);\n  if (!view) return null;\n\n  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;\n\n  return (\n    <div\n      className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border1 pb-3 4xl:grid-cols-2 4xl:gap-12', className)}\n    >\n      {showSplit && (\n        <div className=\"mb-2\">\n          <div className=\"flex items-baseline gap-3 text-neutral2\">\n            <span className=\"text-ui-md\">Tokens Used</span>\n            <span className=\"text-ui-md font-semibold text-neutral4\">{total.toLocaleString()}</span>\n            <span className=\"ml-auto text-ui-sm\">\n              {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n            </span>\n          </div>\n          <div className=\"mt-2 rounded-md bg-surface4 p-1.5\">\n            <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n              <div\n                className=\"absolute top-0 left-0 h-1.5\"\n                style={{ width: `${inputPct}%`, backgroundColor: INPUT_COLOR }}\n              />\n              <div\n                className=\"absolute top-0 h-1.5\"\n                style={{ left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-6\">\n        <UsageColumn label=\"Input\" color={INPUT_COLOR} value={inputValue} details={inputDetails} />\n        <UsageColumn label=\"Output\" color={OUTPUT_COLOR} value={outputValue} details={outputDetails} />\n      </div>\n    </div>\n  );\n}\n\nfunction UsageColumn({\n  label,\n  color,\n  value,\n  details,\n}: {\n  label: string;\n  color: string;\n  value?: number;\n  details?: TokenDetailsObject;\n}) {\n  return (\n    <div>\n      <div className=\"mb-2 flex items-baseline gap-3 text-neutral2\">\n        <span className=\"text-ui-md\">{label}</span>\n        {typeof value === 'number' && (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-ui-md font-semibold text-neutral4\">{value.toLocaleString()}</span>\n            <span className=\"size-2 self-center rounded-full\" style={{ backgroundColor: color }} />\n          </span>\n        )}\n      </div>\n      {details && <DetailsList details={details} />}\n    </div>\n  );\n}\n\nfunction DetailsList({ details }: { details: TokenDetailsObject }) {\n  return (\n    <DataKeysAndValues density=\"dense\">\n      {Object.entries(details).map(([detailKey, detailValue]) => {\n        if (typeof detailValue !== 'number') return null;\n        return (\n          <Fragment key={detailKey}>\n            <DataKeysAndValues.Key>{detailKeyLabels[detailKey] || detailKey}</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n          </Fragment>\n        );\n      })}\n    </DataKeysAndValues>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"span-token-usage.es.js","sources":["../../../../src/domains/traces/components/span-token-usage.tsx"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\nimport { Fragment } from 'react';\nimport { getTokenUsageView } from './span-token-usage.utils';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nconst detailKeyLabels: Record<string, string> = {\n  text: 'Text',\n  cacheRead: 'Cache read',\n  cacheWrite: 'Cache write',\n  audio: 'Audio',\n  image: 'Image',\n  reasoning: 'Reasoning',\n};\n\ntype SpanTokenUsageProps = {\n  usage: UsageStats;\n  className?: string;\n};\n\nconst INPUT_COLOR = 'oklch(0.78 0.16 320)';\nconst OUTPUT_COLOR = 'oklch(0.55 0.18 320)';\n\nexport function SpanTokenUsage({ usage, className }: SpanTokenUsageProps) {\n  const view = getTokenUsageView(usage);\n  if (!view) return null;\n\n  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;\n\n  return (\n    <div\n      className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border1 pb-3 4xl:grid-cols-2 4xl:gap-12', className)}\n    >\n      {showSplit && (\n        <div className=\"mb-2\">\n          <div className=\"text-neutral2 flex items-baseline gap-3\">\n            <span className=\"text-ui-md\">Tokens Used</span>\n            <span className=\"text-ui-md text-neutral4 font-semibold\">{total.toLocaleString()}</span>\n            <span className=\"text-ui-sm ml-auto\">\n              {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n            </span>\n          </div>\n          <div className=\"bg-surface4 mt-2 rounded-md p-1.5\">\n            <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n              <div\n                className=\"absolute top-0 left-0 h-1.5\"\n                style={{ width: `${inputPct}%`, backgroundColor: INPUT_COLOR }}\n              />\n              <div\n                className=\"absolute top-0 h-1.5\"\n                style={{ left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-6\">\n        <UsageColumn label=\"Input\" color={INPUT_COLOR} value={inputValue} details={inputDetails} />\n        <UsageColumn label=\"Output\" color={OUTPUT_COLOR} value={outputValue} details={outputDetails} />\n      </div>\n    </div>\n  );\n}\n\nfunction UsageColumn({\n  label,\n  color,\n  value,\n  details,\n}: {\n  label: string;\n  color: string;\n  value?: number;\n  details?: TokenDetailsObject;\n}) {\n  return (\n    <div>\n      <div className=\"text-neutral2 mb-2 flex items-baseline gap-3\">\n        <span className=\"text-ui-md\">{label}</span>\n        {typeof value === 'number' && (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-ui-md text-neutral4 font-semibold\">{value.toLocaleString()}</span>\n            <span className=\"size-2 self-center rounded-full\" style={{ backgroundColor: color }} />\n          </span>\n        )}\n      </div>\n      {details && <DetailsList details={details} />}\n    </div>\n  );\n}\n\nfunction DetailsList({ details }: { details: TokenDetailsObject }) {\n  return (\n    <DataKeysAndValues density=\"dense\">\n      {Object.entries(details).map(([detailKey, detailValue]) => {\n        if (typeof detailValue !== 'number') return null;\n        return (\n          <Fragment key={detailKey}>\n            <DataKeysAndValues.Key>{detailKeyLabels[detailKey] || detailKey}</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n          </Fragment>\n        );\n      })}\n    </DataKeysAndValues>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,eAAA,GAA0C;AAAA,EAC9C,IAAA,EAAM,MAAA;AAAA,EACN,SAAA,EAAW,YAAA;AAAA,EACX,UAAA,EAAY,aAAA;AAAA,EACZ,KAAA,EAAO,OAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AAOA,MAAM,WAAA,GAAc,sBAAA;AACpB,MAAM,YAAA,GAAe,sBAAA;AAEd,SAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAU,EAAwB;AACxE,EAAA,MAAM,IAAA,GAAO,kBAAkB,KAAK,CAAA;AACpC,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAElB,EAAA,MAAM,EAAE,YAAY,WAAA,EAAa,KAAA,EAAO,WAAW,QAAA,EAAU,SAAA,EAAW,YAAA,EAAc,aAAA,EAAc,GAAI,IAAA;AAExG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,oFAAA,EAAsF,SAAS,CAAA;AAAA,MAE5G,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EACb,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,YAAA,EAAa,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,gCACvC,MAAA,EAAA,EAAK,SAAA,EAAU,wCAAA,EAA0C,QAAA,EAAA,KAAA,CAAM,gBAAe,EAAE,CAAA;AAAA,4BACjF,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBAAA,EACb,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,MAAM,QAAQ,CAAA;AAAA,cAAE,aAAA;AAAA,cAAY,IAAA,CAAK,MAAM,SAAS,CAAA;AAAA,cAAE;AAAA,aAAA,EAC1D;AAAA,WAAA,EACF,CAAA;AAAA,8BACC,KAAA,EAAA,EAAI,SAAA,EAAU,qCACb,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAU,6BAAA;AAAA,gBACV,OAAO,EAAE,KAAA,EAAO,GAAG,QAAQ,CAAA,CAAA,CAAA,EAAK,iBAAiB,WAAA;AAAY;AAAA,aAC/D;AAAA,4BACA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAU,sBAAA;AAAA,gBACV,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAAK,KAAA,EAAO,CAAA,EAAG,SAAS,CAAA,CAAA,CAAA,EAAK,eAAA,EAAiB,YAAA;AAAa;AAAA;AACvF,WAAA,EACF,CAAA,EACF;AAAA,SAAA,EACF,CAAA;AAAA,wBAGF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,WAAA,EAAA,EAAY,OAAM,OAAA,EAAQ,KAAA,EAAO,aAAa,KAAA,EAAO,UAAA,EAAY,SAAS,YAAA,EAAc,CAAA;AAAA,0BACzF,GAAA,CAAC,eAAY,KAAA,EAAM,QAAA,EAAS,OAAO,YAAA,EAAc,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,aAAA,EAAe;AAAA,SAAA,EAC/F;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,4BACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8CAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,YAAA,EAAc,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MACnC,OAAO,KAAA,KAAU,QAAA,oBAChB,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,6BAAA,EACd,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wCAAA,EAA0C,QAAA,EAAA,KAAA,CAAM,gBAAe,EAAE,CAAA;AAAA,wBACjF,GAAA,CAAC,UAAK,SAAA,EAAU,iCAAA,EAAkC,OAAO,EAAE,eAAA,EAAiB,OAAM,EAAG;AAAA,OAAA,EACvF;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC,OAAA,oBAAW,GAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAkB;AAAA,GAAA,EAC7C,CAAA;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,OAAA,EAAQ,EAAoC;AACjE,EAAA,uBACE,GAAA,CAAC,iBAAA,EAAA,EAAkB,OAAA,EAAQ,OAAA,EACxB,QAAA,EAAA,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAA,CAAE,GAAA,CAAI,CAAC,CAAC,SAAA,EAAW,WAAW,CAAA,KAAM;AACzD,IAAA,IAAI,OAAO,WAAA,KAAgB,QAAA,EAAU,OAAO,IAAA;AAC5C,IAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAkB,GAAA,EAAlB,EAAuB,QAAA,EAAA,eAAA,CAAgB,SAAS,KAAK,SAAA,EAAU,CAAA;AAAA,sBAChE,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAwB,WAAU,YAAA,EAAc,QAAA,EAAA,WAAA,CAAY,gBAAe,EAAE;AAAA,KAAA,EAAA,EAFjE,SAGf,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/timeline-expand-col.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const tooltip = require('../../../tooltip-VGyJcEoE.cjs');
+const tooltip = require('../../../tooltip-CLz5PtEE.cjs');
 const utils_cn = require('../../../cn-vA5sWo9W.cjs');
 
 function TimelineExpandCol({

package/dist/domains/traces/components/timeline-expand-col.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronUpIcon, ChevronDownIcon, ChevronsUpIcon, ChevronsDownIcon, FoldVerticalIcon, UnfoldVerticalIcon, ChevronsDownUpIcon, ChevronsUpDownIcon } from 'lucide-react';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-Ch06EF_U.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-BFbYhBj1.js';
 import { c as cn } from '../../../cn-BakJzhuv.js';
 
 function TimelineExpandCol({

package/dist/domains/traces/components/timeline-timing-col.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const format = require('date-fns/format');
-const dataKeysAndValues = require('../../../data-keys-and-values--e2u0YXB.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-sjag88jf.cjs');
 const hoverCard = require('../../../hover-card-DegapekV.cjs');
 const utils_cn = require('../../../cn-vA5sWo9W.cjs');
 

package/dist/domains/traces/components/timeline-timing-col.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns/format';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-BMnGKbXm.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-BJynhd6V.js';
 import { H as HoverCard, b as HoverCardTrigger, a as HoverCardContent } from '../../../hover-card-CADL8HiJ.js';
 import { c as cn } from '../../../cn-BakJzhuv.js';
 

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

@@ -10,10 +10,10 @@ const domains_traces_hooks_useDownloadTraceJson = require('../hooks/use-download
 const domains_traces_components_formatHierarchicalSpans = require('./format-hierarchical-spans.cjs.js');
 const domains_traces_components_traceKeysAndValues = require('./trace-keys-and-values.cjs.js');
 const domains_traces_components_traceTimeline = require('./trace-timeline.cjs.js');
-const Button = require('../../../Button-B5RnKrGb.cjs');
+const Button = require('../../../Button-Bm94fEF2.cjs');
 const buttonsGroup = require('../../../buttons-group-Dw8Wu4sj.cjs');
-const dataPanel = require('../../../data-panel-CsonAnlK.cjs');
-const Notice = require('../../../Notice-WhHdy89l.cjs');
+const dataPanel = require('../../../data-panel-BumsjXVz.cjs');
+const Notice = require('../../../Notice-D7mbkdZW.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
 

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

@@ -6,10 +6,10 @@ import { useDownloadTraceJson } from '../hooks/use-download-trace-json.es.js';
 import { formatHierarchicalSpans } from './format-hierarchical-spans.es.js';
 import { TraceKeysAndValues } from './trace-keys-and-values.es.js';
 import { TraceTimeline } from './trace-timeline.es.js';
-import { B as Button } from '../../../Button-Dh5CZ6Ir.js';
+import { B as Button } from '../../../Button-Bx2lFdqb.js';
 import { B as ButtonsGroup } from '../../../buttons-group-DJh4wnMs.js';
-import { D as DataPanel } from '../../../data-panel-BGpCzY5K.js';
-import { N as Notice } from '../../../Notice-jmHNt3gS.js';
+import { D as DataPanel } from '../../../data-panel-BEvHk4wg.js';
+import { N as Notice } from '../../../Notice-zWRcxcM3.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
 

package/dist/domains/traces/components/trace-keys-and-values.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const dateFns = require('date-fns');
-const dataKeysAndValues = require('../../../data-keys-and-values--e2u0YXB.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-sjag88jf.cjs');
 
 function computeTraceStatus(span) {
   if (span.error != null) return "error" /* ERROR */;

package/dist/domains/traces/components/trace-keys-and-values.es.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-BMnGKbXm.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-BJynhd6V.js';
 
 function computeTraceStatus(span) {
   if (span.error != null) return "error" /* ERROR */;

package/dist/domains/traces/components/trace-timeline.cjs.js

@@ -55,7 +55,7 @@ function TraceTimeline({
   ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     usedSpanTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-end gap-3 px-2 py-1.5", children: usedSpanTypes.map((type) => {
       const spanUI = domains_traces_components_shared.getSpanTypeUi(type);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-ui-sm text-neutral3", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-sm text-neutral3 flex items-center gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {

package/dist/domains/traces/components/trace-timeline.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  chartWidth = 'default',\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(hierarchicalSpans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n            '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap justify-end gap-3 px-2 py-1.5\">\n              {usedSpanTypes.map(type => {\n                const spanUI = getSpanTypeUi(type);\n                return (\n                  <div key={type} className=\"flex items-center gap-1 text-ui-sm text-neutral3\">\n                    <span\n                      className=\"inline-block size-1.5 shrink-0 rounded-full\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsxs","cn","jsx","Spinner","Fragment","getSpanTypeUi","TraceTimelineSpan"],"mappings":";;;;;;;;;;;AAoBO,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAAuB;AACrB,EAAA,MAAM,cAAA,GAAiB,iBAAA,GAAoB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAC1D,EAAA,MAAM,gBAAA,GAAmB,iBAAA,GAAoB,CAAC,CAAA,EAAG,SAAA,IAAa,EAAA;AAE9D,EAAA,MAAM,aAAA,GAAgBA,cAAQ,MAAM;AAClC,IAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAiC;AACrD,MAAA,MAAMC,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,QAAA,MAAM,MAAA,GAAS,KAAK,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACpD,QAAA,IAAI,MAAA,EAAQA,MAAAA,CAAM,GAAA,CAAI,MAAM,CAAA;AAC5B,QAAA,IAAI,KAAK,KAAA,EAAO;AACd,UAAA,KAAA,MAAW,CAAA,IAAK,aAAa,IAAA,CAAK,KAAK,GAAGA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QACvD;AAAA,MACF;AACA,MAAA,OAAOA,MAAAA;AAAA,IACT,CAAA;AACA,IAAA,MAAM,KAAA,GAAQ,aAAa,iBAAiB,CAAA;AAC5C,IAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAACC,iDAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACnE,IAAA,MAAM,KAAA,GAAQA,kDAAiB,MAAA,CAAO,CAAA,CAAA,KAAK,MAAM,OAAA,IAAW,KAAA,CAAM,GAAA,CAAI,CAAC,CAAC,CAAA;AACxE,IAAA,IAAI,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,6DAEK,QAAA,EAAA,SAAA,mBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,+FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAA,EAAA,EAAQ,CAAA;AAAA,QAAE;AAAA;AAAA;AAAA,sBAGbH,eAAA,CAAAI,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,aAAA,CAAc,MAAA,GAAS,qBACtBF,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8CAAA,EACZ,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,MAAA,MAAM,MAAA,GAASG,+CAAc,IAAI,CAAA;AACjC,MAAA,uBACEL,eAAA,CAAC,KAAA,EAAA,EAAe,SAAA,EAAU,kDAAA,EACxB,QAAA,EAAA;AAAA,wBAAAE,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,6CAAA;AAAA,YACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA;AAAM;AAAA,SAC1C;AAAA,QACC,QAAQ,KAAA,IAAS;AAAA,OAAA,EAAA,EALV,IAMV,CAAA;AAAA,IAEJ,CAAC,CAAA,EACH,CAAA;AAAA,mCAED,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EACZ,QAAA,EAAA,iBAAA,EAAmB,IAAI,CAAA,IAAA,qBACtBA,cAAA;AAAA,MAACI,6DAAA;AAAA,MAAA;AAAA,QAEC,IAAA;AAAA,QACA,QAAA,EAAU,iBAAA;AAAA,QACV,WAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA,gBAAA;AAAA,QACA,UAAA;AAAA,QACA,eAAA;AAAA,QACA,eAAA;AAAA,QACA,kBAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAXK,IAAA,CAAK;AAAA,KAab,CAAA,EACH;AAAA,GAAA,EACF,CAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  chartWidth = 'default',\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(hierarchicalSpans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n            '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap justify-end gap-3 px-2 py-1.5\">\n              {usedSpanTypes.map(type => {\n                const spanUI = getSpanTypeUi(type);\n                return (\n                  <div key={type} className=\"text-ui-sm text-neutral3 flex items-center gap-1\">\n                    <span\n                      className=\"inline-block size-1.5 shrink-0 rounded-full\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsxs","cn","jsx","Spinner","Fragment","getSpanTypeUi","TraceTimelineSpan"],"mappings":";;;;;;;;;;;AAoBO,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAAuB;AACrB,EAAA,MAAM,cAAA,GAAiB,iBAAA,GAAoB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAC1D,EAAA,MAAM,gBAAA,GAAmB,iBAAA,GAAoB,CAAC,CAAA,EAAG,SAAA,IAAa,EAAA;AAE9D,EAAA,MAAM,aAAA,GAAgBA,cAAQ,MAAM;AAClC,IAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAiC;AACrD,MAAA,MAAMC,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,QAAA,MAAM,MAAA,GAAS,KAAK,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACpD,QAAA,IAAI,MAAA,EAAQA,MAAAA,CAAM,GAAA,CAAI,MAAM,CAAA;AAC5B,QAAA,IAAI,KAAK,KAAA,EAAO;AACd,UAAA,KAAA,MAAW,CAAA,IAAK,aAAa,IAAA,CAAK,KAAK,GAAGA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QACvD;AAAA,MACF;AACA,MAAA,OAAOA,MAAAA;AAAA,IACT,CAAA;AACA,IAAA,MAAM,KAAA,GAAQ,aAAa,iBAAiB,CAAA;AAC5C,IAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAACC,iDAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACnE,IAAA,MAAM,KAAA,GAAQA,kDAAiB,MAAA,CAAO,CAAA,CAAA,KAAK,MAAM,OAAA,IAAW,KAAA,CAAM,GAAA,CAAI,CAAC,CAAC,CAAA;AACxE,IAAA,IAAI,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,6DAEK,QAAA,EAAA,SAAA,mBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,+FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAA,EAAA,EAAQ,CAAA;AAAA,QAAE;AAAA;AAAA;AAAA,sBAGbH,eAAA,CAAAI,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,aAAA,CAAc,MAAA,GAAS,qBACtBF,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8CAAA,EACZ,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,MAAA,MAAM,MAAA,GAASG,+CAAc,IAAI,CAAA;AACjC,MAAA,uBACEL,eAAA,CAAC,KAAA,EAAA,EAAe,SAAA,EAAU,kDAAA,EACxB,QAAA,EAAA;AAAA,wBAAAE,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,6CAAA;AAAA,YACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA;AAAM;AAAA,SAC1C;AAAA,QACC,QAAQ,KAAA,IAAS;AAAA,OAAA,EAAA,EALV,IAMV,CAAA;AAAA,IAEJ,CAAC,CAAA,EACH,CAAA;AAAA,mCAED,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EACZ,QAAA,EAAA,iBAAA,EAAmB,IAAI,CAAA,IAAA,qBACtBA,cAAA;AAAA,MAACI,6DAAA;AAAA,MAAA;AAAA,QAEC,IAAA;AAAA,QACA,QAAA,EAAU,iBAAA;AAAA,QACV,WAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA,gBAAA;AAAA,QACA,UAAA;AAAA,QACA,eAAA;AAAA,QACA,eAAA;AAAA,QACA,kBAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAXK,IAAA,CAAK;AAAA,KAab,CAAA,EACH;AAAA,GAAA,EACF,CAAA,EAEJ,CAAA;AAEJ;;;;"}